\n+

\n\\`\\`\\`\n\n![Responsive workspace reference](${RESPONSIVE_IMAGE_URL})\n\nA mixed prose paragraph keeps the ![Mixed prose reference](${RESPONSIVE_IMAGE_URL}) on the readable measure.\n\n\\`\\`\\`mermaid\nflowchart LR\n\tCompactDocumentMeasureThatReadersCanTrack --> IndependentWidgetScrollersThatPreserveTheDocumentWidth\n\tIndependentWidgetScrollersThatPreserveTheDocumentWidth --> KeyboardSafeDestinationSwitchingAcrossResponsiveWorkspaces\n\tKeyboardSafeDestinationSwitchingAcrossResponsiveWorkspaces --> DurableAgentChangeChipsAndCollaboratorCursorLabels\n\\`\\`\\`\n\n$$\n${LATEX_SLASH}mathrm{CompactDocumentMeasureMustRemainReadableWhileIndependentWidgetsOwnTheirOverflow} ${LATEX_SLASH}Rightarrow ${LATEX_SLASH}mathrm{ResponsiveWorkspace}\n$$\n\n\n\n\nOne destination occupies the available width at a time.\n\n\n\n\nConversation remains beside the document when room permits it.\n\n\n\n\nTemporary conversation still preserves the document's readable measure.\n\n\n\n\nEach wide widget owns its overflow without widening the collaborative source.\n\n\n\n\nKeyboard focus follows the selected destination without losing the strip.\n\n\n\n\nThe final destination stays reachable without animated navigation.\n\n\n\n\n\n\nEvery visible control and focused element stays inside the visual viewport.\n\n![Contained callout reference](${RESPONSIVE_IMAGE_URL})\n\n\n\nInline \\`UnbreakableInlineCodeTokenThatMustStayInsideTheReadableDocumentMeasureEvenWhenItsAuthoredIntrinsicWidthFarExceedsTheDesktopReadingColumnAndNeedsToWrapWithoutWideningTheCollaborativeDocument\\` belongs with the surrounding prose.\n\n${paragraphs}\n`;\n\nexport async function expectNoHorizontalOverflow(page: Page): Promise {\n\tlet dimensions = await page.evaluate(() => ({\n\t\tscrollWidth: document.documentElement.scrollWidth,\n\t\tclientWidth: document.documentElement.clientWidth,\n\t}));\n\texpect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);\n}\n\nexport async function expectInsideViewport(locator: Locator): Promise {\n\tlet issues = await locator.evaluateAll(nodes => {\n\t\tif (nodes.length === 0) return [{ reason: \"missing\", rectangle: null, viewport: null }];\n\t\tlet issues: Array<{\n\t\t\treason: string;\n\t\t\trectangle: {\n\t\t\t\tbottom: number;\n\t\t\t\theight: number;\n\t\t\t\tleft: number;\n\t\t\t\tright: number;\n\t\t\t\ttop: number;\n\t\t\t\twidth: number;\n\t\t\t} | null;\n\t\t\tviewport: {\n\t\t\t\theight: number;\n\t\t\t\toffsetLeft: number;\n\t\t\t\toffsetTop: number;\n\t\t\t\twidth: number;\n\t\t\t} | null;\n\t\t}> = [];\n\t\tfor (let node of nodes) {\n\t\t\tlet element = node as HTMLElement;\n\t\t\tlet rectangle = element.getBoundingClientRect();\n\t\t\tlet bounds = {\n\t\t\t\tbottom: rectangle.bottom,\n\t\t\t\theight: rectangle.height,\n\t\t\t\tleft: rectangle.left,\n\t\t\t\tright: rectangle.right,\n\t\t\t\ttop: rectangle.top,\n\t\t\t\twidth: rectangle.width,\n\t\t\t};\n\t\t\tif (!element.checkVisibility() || rectangle.width === 0 || rectangle.height === 0) {\n\t\t\t\tissues.push({\n\t\t\t\t\treason: \"not visible\",\n\t\t\t\t\trectangle: bounds,\n\t\t\t\t\tviewport: null,\n\t\t\t\t});\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tlet viewport = visualViewport ?? {\n\t\t\t\toffsetLeft: 0,\n\t\t\t\toffsetTop: 0,\n\t\t\t\twidth: innerWidth,\n\t\t\t\theight: innerHeight,\n\t\t\t};\n\t\t\tlet inside = rectangle.left >= viewport.offsetLeft\n\t\t\t\t&& rectangle.top >= viewport.offsetTop\n\t\t\t\t&& rectangle.right <= viewport.offsetLeft + viewport.width\n\t\t\t\t&& rectangle.bottom <= viewport.offsetTop + viewport.height;\n\t\t\tif (!inside) {\n\t\t\t\tissues.push({\n\t\t\t\t\treason: \"outside viewport\",\n\t\t\t\t\trectangle: bounds,\n\t\t\t\t\tviewport,\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\treturn issues;\n\t});\n\texpect(issues).toEqual([]);\n}\n","editable",false,"branch","documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars",0,"watchers","watching","pinned","notify","views",[183,184,185,186,187,188,189,190,191,192,193,194,195],"navigation",{"_54":55,"_139":140,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150},"sources",[],"viewer","meta",{"_131":132,"_133":134,"_135":136,"_42":31,"_137":126,"_138":31,"_48":49,"_50":49},"branches",[73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130],"tags",[69,70,71,72],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","comments","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","main","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","description","Let's compose rich plans together","owner","githubnext","section","","head","empty","pins",[165,166,167],"documents",{"_160":161,"_162":163},"code",{"_156":157,"_158":159},"automations",{"_153":154,"_155":-5},"delivery",{"_151":49,"_152":-5},"tag","04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_164":163},"total",11,"issue",{"_168":158,"_170":181,"_15":158,"_172":182,"_52":174,"_175":31,"_176":174,"_177":159},{"_168":178,"_170":179,"_15":178,"_172":180,"_52":174,"_175":31,"_176":174,"_177":49},{"_168":169,"_170":171,"_15":169,"_172":173,"_52":174,"_175":31,"_176":174,"_177":163},"id","issues","name","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_168":158,"_170":181,"_15":158,"_172":226,"_52":174,"_175":31,"_176":174},{"_168":178,"_170":179,"_15":178,"_172":225,"_52":174,"_175":31,"_176":174},{"_168":169,"_170":171,"_15":169,"_172":224,"_52":174,"_175":31,"_176":174},{"_168":221,"_170":222,"_15":221,"_172":223,"_52":31,"_175":31,"_176":174},{"_168":218,"_170":219,"_15":218,"_172":220,"_52":31,"_175":31,"_176":174},{"_168":153,"_170":216,"_15":145,"_172":217,"_52":31,"_175":31,"_176":174},{"_168":155,"_170":213,"_15":214,"_172":215,"_52":31,"_175":31,"_176":174},{"_168":151,"_170":211,"_15":151,"_172":212,"_52":31,"_175":31,"_176":174},{"_168":207,"_170":208,"_15":209,"_172":210,"_52":31,"_175":31,"_176":174},{"_168":141,"_170":205,"_15":141,"_172":206,"_52":31,"_175":31,"_176":31},{"_168":202,"_170":203,"_15":202,"_172":204,"_52":31,"_175":31,"_176":31},{"_168":199,"_170":200,"_15":199,"_172":201,"_52":31,"_175":31,"_176":31},{"_168":196,"_170":197,"_15":196,"_172":198,"_52":31,"_175":31,"_176":31},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794437895960,"sidebar","expanded"]