@nvidia-elements/core 2.23.4 → 2.23.6

package/dist/workspace/utils/presentation/preview.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview.utils.js","names":["shouldEmphasizeReservedDestination","preview","getRegionCornerStyle","corners","styles","corner","right","bottom","x","rect","y","regions","group","node"],"sources":["../../../../src/workspace/utils/presentation/preview.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Rect } from '@nvidia-elements/core/internal';\n\nimport type { WorkspacePlacedRegion } from '../geometry/allocation.utils.js';\nimport type { WorkspaceDragPreview } from '../interaction/drag-preview.utils.js';\n\nexport function shouldEmphasizeReservedDestination(preview: WorkspaceDragPreview) {\n  return (\n    !preview.blocked &&\n    'allocation' in preview &&\n    preview.allocation === 'reserved' &&\n    (preview.intent.kind === 'order' ||\n      preview.intent.kind === 'insert' ||\n      (preview.phase === 'detached' && preview.intent.kind === 'invalid' && preview.cue.kind === 'group'))\n  );\n}\n\n/** Rounds only corners shared with the visible group geometry. */\nexport function getRegionCornerStyle(rect: Rect, regions: WorkspacePlacedRegion[]): string {\n  const corners = [\n    ['top-left', 0, 0],\n    ['top-right', 1, 0],\n    ['bottom-right', 1, 1],\n    ['bottom-left', 0, 1]\n  ] as const;\n  const styles = ['border-radius:var(--_workspace-border-radius)'];\n  for (const [corner, right, bottom] of corners) {\n    const x = rect.x + right * rect.width;\n    const y = rect.y + bottom * rect.height;\n    const rounded = regions.some(\n      ({ node, rect: group }) =>\n        node.type === 'group' &&\n        Math.abs(x - group.x - right * group.width) < 0.000001 &&\n        Math.abs(y - group.y - bottom * group.height) < 0.000001\n    );\n    if (!rounded) {\n      styles.push(`border-${corner}-radius:0px`);\n    }\n  }\n  return styles.join(';');\n}\n"],"mappings":";AAQA,SAAgBA,EAAmC,GAA+B;CAChF,OACE,CAACC,EAAQ,WACT,gBAAgBA,KAChBA,EAAQ,eAAe,eACtBA,EAAQ,OAAO,SAAS,WACvBA,EAAQ,OAAO,SAAS,YACvBA,EAAQ,UAAU,cAAcA,EAAQ,OAAO,SAAS,aAAaA,EAAQ,IAAI,SAAS;AAEjG;AAGA,SAAgBC,EAAqB,GAAY,GAA0C;CACzF,IAAMC,IAAU;EACd;GAAC;GAAY;GAAG;EAAC;EACjB;GAAC;GAAa;GAAG;EAAC;EAClB;GAAC;GAAgB;GAAG;EAAC;EACrB;GAAC;GAAe;GAAG;EAAC;CACtB,GACMC,IAAS,CAAC,+CAA+C;CAC/D,KAAK,IAAM,CAACC,GAAQC,GAAOC,MAAWJ,GAAS;EAC7C,IAAMK,IAAIC,EAAK,IAAIH,IAAQG,EAAK,OAC1BC,IAAID,EAAK,IAAIF,IAASE,EAAK;EAOjC,AANgBE,EAAQ,MACrB,EAAE,SAAM,MAAMC,QACbC,EAAK,SAAS,WACd,KAAK,IAAIL,IAAII,EAAM,IAAIN,IAAQM,EAAM,KAAK,IAAI,QAC9C,KAAK,IAAIF,IAAIE,EAAM,IAAIL,IAASK,EAAM,MAAM,IAAI,IAE/C,KACHR,EAAO,KAAK,UAAUC,EAAO,YAAY;CAE7C;CACA,OAAOD,EAAO,KAAK,GAAG;AACxB"}
+{"version":3,"file":"preview.utils.js","names":["preparePreviewBoundaries","getAllocatedScopes","catalogRegions","placedRegions","sourcePanelIds","scope","getRegionCornerStyle","shouldEmphasizeReservedDestination","preview","corners","styles","corner","right","bottom","x","rect","y","regions","group","node"],"sources":["../../../../src/workspace/utils/presentation/preview.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Rect } from '@nvidia-elements/core/internal';\n\nimport { getAllocatedScopes } from '../placement/scope.utils.js';\n\nimport type { WorkspacePlacedRegion } from '../geometry/allocation.utils.js';\nimport type { WorkspaceDragPreview } from '../interaction/drag-preview.utils.js';\n\nexport interface PreviewBoundary {\n  key: string;\n  rect: Rect;\n  style: string;\n}\n\nexport function preparePreviewBoundaries(\n  catalogRegions: WorkspacePlacedRegion[],\n  placedRegions: WorkspacePlacedRegion[],\n  sourcePanelIds: string[]\n): PreviewBoundary[] {\n  return getAllocatedScopes({\n    catalog: catalogRegions,\n    allocation: placedRegions,\n    source: sourcePanelIds\n  }).map(scope => ({\n    ...scope,\n    style: `left:${scope.rect.x}px;top:${scope.rect.y}px;width:${scope.rect.width}px;height:${scope.rect.height}px;${getRegionCornerStyle(scope.rect, placedRegions)}`\n  }));\n}\n\nexport function shouldEmphasizeReservedDestination(preview: WorkspaceDragPreview) {\n  return (\n    !preview.blocked &&\n    'allocation' in preview &&\n    preview.allocation === 'reserved' &&\n    (preview.intent.kind === 'order' ||\n      preview.intent.kind === 'insert' ||\n      (preview.phase === 'detached' && preview.intent.kind === 'invalid' && preview.cue.kind === 'group'))\n  );\n}\n\n/** Rounds only corners shared with the visible group geometry. */\nexport function getRegionCornerStyle(rect: Rect, regions: WorkspacePlacedRegion[]): string {\n  const corners = [\n    ['top-left', 0, 0],\n    ['top-right', 1, 0],\n    ['bottom-right', 1, 1],\n    ['bottom-left', 0, 1]\n  ] as const;\n  const styles = ['border-radius:var(--_workspace-border-radius)'];\n  for (const [corner, right, bottom] of corners) {\n    const x = rect.x + right * rect.width;\n    const y = rect.y + bottom * rect.height;\n    const rounded = regions.some(\n      ({ node, rect: group }) =>\n        node.type === 'group' &&\n        Math.abs(x - group.x - right * group.width) < 0.000001 &&\n        Math.abs(y - group.y - bottom * group.height) < 0.000001\n    );\n    if (!rounded) {\n      styles.push(`border-${corner}-radius:0px`);\n    }\n  }\n  return styles.join(';');\n}\n"],"mappings":";;AAgBA,SAAgBA,EACd,GACA,GACA,GACmB;CACnB,OAAOC,EAAmB;EACxB,SAASC;EACT,YAAYC;EACZ,QAAQC;CACV,CAAC,CAAC,CAAC,KAAI,OAAU;EACf,GAAGC;EACH,OAAO,QAAQA,EAAM,KAAK,EAAE,SAASA,EAAM,KAAK,EAAE,WAAWA,EAAM,KAAK,MAAM,YAAYA,EAAM,KAAK,OAAO,KAAKC,EAAqBD,EAAM,MAAMF,CAAa;CACjK,EAAE;AACJ;AAEA,SAAgBI,EAAmC,GAA+B;CAChF,OACE,CAACC,EAAQ,WACT,gBAAgBA,KAChBA,EAAQ,eAAe,eACtBA,EAAQ,OAAO,SAAS,WACvBA,EAAQ,OAAO,SAAS,YACvBA,EAAQ,UAAU,cAAcA,EAAQ,OAAO,SAAS,aAAaA,EAAQ,IAAI,SAAS;AAEjG;AAGA,SAAgBF,EAAqB,GAAY,GAA0C;CACzF,IAAMG,IAAU;EACd;GAAC;GAAY;GAAG;EAAC;EACjB;GAAC;GAAa;GAAG;EAAC;EAClB;GAAC;GAAgB;GAAG;EAAC;EACrB;GAAC;GAAe;GAAG;EAAC;CACtB,GACMC,IAAS,CAAC,+CAA+C;CAC/D,KAAK,IAAM,CAACC,GAAQC,GAAOC,MAAWJ,GAAS;EAC7C,IAAMK,IAAIC,EAAK,IAAIH,IAAQG,EAAK,OAC1BC,IAAID,EAAK,IAAIF,IAASE,EAAK;EAOjC,AANgBE,EAAQ,MACrB,EAAE,SAAM,MAAMC,QACbC,EAAK,SAAS,WACd,KAAK,IAAIL,IAAII,EAAM,IAAIN,IAAQM,EAAM,KAAK,IAAI,QAC9C,KAAK,IAAIF,IAAIE,EAAM,IAAIL,IAASK,EAAM,MAAM,IAAI,IAE/C,KACHR,EAAO,KAAK,UAAUC,EAAO,YAAY;CAE7C;CACA,OAAOD,EAAO,KAAK,GAAG;AACxB"}

package/dist/workspace/workspace.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"workspace.examples.js","names":["workspace_examples_default"],"sources":["../../src/workspace/workspace.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\n\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/dropdown-group/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\nimport '@nvidia-elements/core/workspace/define.js';\n\nexport default { title: 'Elements/Workspace', component: 'nve-workspace' };\n\n/**\n * @summary Arrange panels in nested groups while retaining application content. Drag panel headers or tabs to move panels, group handles to move tabs together, and separators to resize.\n */\nexport const Default = {\n  render: () => html`\n    <nve-workspace\n      groupable\n      rearrangeable\n      resizable\n      style=\"height:600px\"\n      value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,4],\"children\":[{\"type\":\"group\",\"panels\":[\"workspace-outline\"],\"active\":\"workspace-outline\"},{\"type\":\"split\",\"axis\":\"vertical\",\"weights\":[3,2],\"children\":[{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[3,2],\"children\":[{\"type\":\"group\",\"panels\":[\"workspace-editor\"],\"active\":\"workspace-editor\"},{\"type\":\"group\",\"panels\":[\"workspace-preview\"],\"active\":\"workspace-preview\"}]},{\"type\":\"group\",\"panels\":[\"workspace-notes\",\"workspace-activity\",\"workspace-tasks\"],\"active\":\"workspace-notes\"}]}]}}'>\n      <nve-workspace-panel id=\"workspace-outline\">\n        <nve-workspace-panel-header>Outline</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Outline content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-editor\">\n        <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n        <nve-workspace-panel-content>\n          <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n        </nve-workspace-panel-content>\n        <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-preview\">\n        <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-notes\">\n        <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-activity\">\n        <nve-workspace-panel-header>Activity</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Activity content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-tasks\">\n        <nve-workspace-panel-header>Tasks</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Tasks content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Resize groups within a fixed arrangement and switch tabs while retaining application content.\n */\nexport const Resizable = {\n  render: () => html`\n    <nve-workspace\n      resizable\n      value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"editor\",\"notes\"],\"active\":\"editor\"},{\"type\":\"group\",\"panels\":[\"preview\"],\"active\":\"preview\"}]},\"closed\":[]}'\n      style=\"height:420px\">\n      <nve-workspace-panel id=\"editor\">\n        <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n        <nve-workspace-panel-content>\n          <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n        </nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"preview\">\n        <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"notes\">\n        <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Rearrange panels while keeping tabbed panels together.\n */\nexport const Rearrangeable = {\n  render: () => html`\n    <nve-workspace\n      rearrangeable\n      resizable\n      style=\"height:420px\"\n      value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"editor\",\"notes\"],\"active\":\"editor\"},{\"type\":\"group\",\"panels\":[\"preview\"],\"active\":\"preview\"}]}}'>\n      <nve-workspace-panel id=\"editor\">\n        <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n        <nve-workspace-panel-content>\n          <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n        </nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"preview\">\n        <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"notes\">\n        <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Join panels into tabbed groups or move individual tabs out.\n */\nexport const Groupable = {\n  render: () => html`\n    <div id=\"regroup-example\" nve-layout=\"column gap:md\">\n      <nve-button>Reset layout</nve-button>\n      <nve-workspace\n        rearrangeable\n        groupable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"group-editor\",\"group-notes\"],\"active\":\"group-editor\"},{\"type\":\"group\",\"panels\":[\"group-preview\"],\"active\":\"group-preview\"}]}}'>\n        <nve-workspace-panel id=\"group-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"group-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"group-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#regroup-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Close and reopen panels while retaining their positions and application content.\n */\nexport const Closable = {\n  render: () => html`\n    <div id=\"open-close-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-open-close\">Reset layout</nve-button>\n        <div nve-layout=\"row gap:sm\">\n          <nve-button command=\"--open\" commandfor=\"retained-editor\">Open editor</nve-button>\n          <nve-button command=\"--close\" commandfor=\"retained-editor\">Close editor</nve-button>\n        </div>\n      </div>\n      <nve-workspace\n        closable\n        groupable\n        rearrangeable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"retained-editor\",\"retained-notes\"],\"active\":\"retained-editor\"},{\"type\":\"group\",\"panels\":[\"restorable-preview\"],\"active\":\"restorable-preview\"}]},\"closed\":[]}'>\n        <nve-workspace-panel id=\"retained-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"restorable-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"retained-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#open-close-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('#reset-open-close').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Expand a group and its tabs to full screen.\n */\nexport const Fullscreenable = {\n  render: () => html`\n    <div id=\"fullscreen-example\" nve-layout=\"column gap:md\">\n      <nve-button>Reset layout</nve-button>\n      <nve-workspace\n        fullscreenable\n        closable\n        rearrangeable\n        groupable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"fullscreen-editor\",\"fullscreen-notes\"],\"active\":\"fullscreen-editor\"},{\"type\":\"group\",\"panels\":[\"fullscreen-preview\"],\"active\":\"fullscreen-preview\"}]}}'>\n        <nve-workspace-panel id=\"fullscreen-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"fullscreen-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"fullscreen-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#fullscreen-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Add custom menus that use invoker commands to move, split, or close panels and toggle group fullscreen alongside application actions.\n */\n// eslint-disable-next-line local-typescript/example-template-size -- Keep the complete menu composition readable without compressing its markup.\nexport const CustomPanelActions = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-button id=\"a-reopen\" popovertarget=\"a-open\" disabled>Reopen</nve-button>\n      <nve-workspace\n        id=\"a-demo\"\n        fullscreenable\n        groupable\n        rearrangeable\n        closable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"a-editor\",\"a-notes\"],\"active\":\"a-editor\"},{\"type\":\"group\",\"panels\":[\"a-preview\"],\"active\":\"a-preview\"}]}}'>\n        <nve-workspace-panel id=\"a-editor\">\n          <nve-workspace-panel-header>\n            Editor\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\"\n              aria-label=\"Editor actions\" value=\"a-editor\" popovertarget=\"a-menu\"></nve-icon-button>\n          </nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"a-notes\">\n          <nve-workspace-panel-header>\n            Notes\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\"\n              aria-label=\"Notes actions\" value=\"a-notes\" popovertarget=\"a-menu\"></nve-icon-button>\n          </nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"a-preview\">\n          <nve-workspace-panel-header>\n            Preview\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\"\n              aria-label=\"Preview actions\" value=\"a-preview\" popovertarget=\"a-menu\"></nve-icon-button>\n          </nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-dropdown-group>\n          <nve-dropdown id=\"a-menu\">\n            <nve-menu>\n              <nve-menu-item command=\"--toggle-fullscreen\">Fullscreen</nve-menu-item>\n              <nve-menu-item popovertarget=\"a-move\">\n                Move to\n                <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n              </nve-menu-item>\n              <nve-menu-item popovertarget=\"a-split\">\n                Split\n                <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n              </nve-menu-item>\n              <nve-menu-item command=\"--close\">Close</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n          <nve-dropdown id=\"a-move\" position=\"right\">\n            <nve-menu>\n              <nve-menu-item command=\"--place\" data-target=\"a-editor\">Editor</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-target=\"a-notes\">Notes</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-target=\"a-preview\">Preview</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n          <nve-dropdown id=\"a-open\" position=\"bottom\">\n            <nve-menu>\n              <nve-menu-item command=\"--open\" data-target=\"a-editor\">Editor</nve-menu-item>\n              <nve-menu-item command=\"--open\" data-target=\"a-notes\">Notes</nve-menu-item>\n              <nve-menu-item command=\"--open\" data-target=\"a-preview\">Preview</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n          <nve-dropdown id=\"a-split\" position=\"right\">\n            <nve-menu>\n              <nve-menu-item command=\"--place\" data-side=\"left\">Left</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-side=\"right\">Right</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-side=\"top\">Above</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-side=\"bottom\">Below</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n        </nve-dropdown-group>\n      </nve-workspace>\n      <script type=\"module\">\n        const workspace = document.querySelector('#a-demo');\n        const dropdownGroup = workspace.querySelector('nve-dropdown-group');\n        const reopen = document.querySelector('#a-reopen');\n        let panelId;\n\n        function refresh() {\n          const { root, closed } = JSON.parse(workspace.value);\n          const labels = new Map(\n            [...workspace.querySelectorAll(':scope > nve-workspace-panel')].map(panel => [\n              panel.id,\n              panel.querySelector('nve-workspace-panel-header').textContent.trim()\n            ])\n          );\n          const groups = getOpenPanelGroups(root, labels, closed);\n          const currentGroup = groups.find(ids => ids.includes(panelId));\n          const splitTarget = currentGroup?.find(id => id !== panelId);\n\n          updateMoveMenu(groups, currentGroup, labels);\n          updateReopenMenu(closed, labels);\n\n          for (const item of dropdownGroup.querySelectorAll('[command]')) {\n            item.commandForElement = workspace;\n            item.value = item.command === '--open' ? item.dataset.target : panelId;\n            if (item.dataset.side) {\n              item.placement = { operation: 'split', target: splitTarget, position: item.dataset.side };\n            }\n            item.disabled = item.style.display === 'none' || !workspace.isCommandAvailable(item.command, item);\n          }\n\n          for (const trigger of dropdownGroup.querySelectorAll('[popovertarget]')) {\n            const items = trigger.popoverTargetElement.querySelectorAll('[command]');\n            trigger.disabled = [...items].every(item => item.disabled);\n          }\n          reopen.disabled = !closed.some(id => labels.has(id));\n        }\n\n        function getOpenPanelGroups(node, labels, closed) {\n          if (!node) return [];\n          if (node.type === 'group') {\n            return [node.panels.filter(id => labels.has(id) && !closed.includes(id))];\n          }\n          return node.children.flatMap(child => getOpenPanelGroups(child, labels, closed));\n        }\n\n        function updateMoveMenu(groups, currentGroup, labels) {\n          for (const item of dropdownGroup.querySelectorAll('#a-move [data-target]')) {\n            const target = item.dataset.target;\n            const members = groups.find(ids => ids[0] === target && ids !== currentGroup);\n            item.style.display = members ? '' : 'none';\n            item.placement = { operation: 'join', target };\n            if (members) {\n              item.textContent = members.map(id => labels.get(id)).join(', ');\n            }\n          }\n        }\n\n        function updateReopenMenu(closed, labels) {\n          for (const item of dropdownGroup.querySelectorAll('#a-open [data-target]')) {\n            const target = item.dataset.target;\n            item.style.display = labels.has(target) && closed.includes(target) ? '' : 'none';\n          }\n        }\n\n        dropdownGroup.addEventListener('beforetoggle', event => {\n          if (event.newState !== 'open') return;\n          if (event.target.id === 'a-menu') panelId = event.source?.value;\n          refresh();\n        }, true);\n        workspace.addEventListener('commandavailabilitychange', refresh);\n        workspace.addEventListener('command', () => dropdownGroup.close());\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Match the surrounding layout with inset, flat, or full container framing.\n * @tags test-case\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-workspace\n        container=\"inset\"\n        resizable\n        style=\"height:220px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"container-inset\"],\"active\":\"container-inset\"},{\"type\":\"group\",\"panels\":[\"container-inset-preview\"],\"active\":\"container-inset-preview\"}]}}'>\n        <nve-workspace-panel id=\"container-inset\">\n          <nve-workspace-panel-header>Editor (inset)</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n          <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"container-inset-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <nve-workspace\n        container=\"flat\"\n        resizable\n        style=\"height:220px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"container-flat\"],\"active\":\"container-flat\"},{\"type\":\"group\",\"panels\":[\"container-flat-preview\"],\"active\":\"container-flat-preview\"}]}}'>\n        <nve-workspace-panel id=\"container-flat\">\n          <nve-workspace-panel-header>Editor (flat)</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n          <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"container-flat-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <nve-workspace\n        container=\"full\"\n        resizable\n        style=\"height:220px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"container-full\"],\"active\":\"container-full\"},{\"type\":\"group\",\"panels\":[\"container-full-preview\"],\"active\":\"container-full-preview\"}]}}'>\n        <nve-workspace-panel id=\"container-full\">\n          <nve-workspace-panel-header>Editor (full)</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n          <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"container-full-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n    </div>\n  `\n};\n\n/**\n * @summary Customize header spacing, control sizes, and panel corners for a compact workspace.\n * @tags theme\n */\nexport const CustomHeaders = {\n  render: () => html`\n    <div id=\"compact-example\" nve-layout=\"column gap:md\">\n      <nve-button>Reset layout</nve-button>\n      <style>\n        #condensed-workspace > nve-workspace-panel {\n          --box-shadow: none;\n        }\n        #condensed-workspace nve-workspace-panel-header {\n          --min-height: var(--nve-ref-size-800);\n          --padding: var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-250);\n        }\n      </style>\n      <nve-workspace\n        id=\"condensed-workspace\"\n        rearrangeable\n        groupable\n        closable\n        resizable\n        fullscreenable\n        style=\"--gap:0;--border-radius:0;--header-control-size:var(--nve-ref-size-600);--close-button-inset:var(--nve-ref-size-100);height:300px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"condensed-editor\",\"condensed-notes\"],\"active\":\"condensed-editor\"},{\"type\":\"group\",\"panels\":[\"condensed-preview\"],\"active\":\"condensed-preview\"}]}}'>\n        <nve-workspace-panel id=\"condensed-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"condensed-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"condensed-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#compact-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Save and restore groups, split proportions, and closed panels without recreating application content.\n */\nexport const SaveRestore = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-arrangement\">Reset layout</nve-button>\n        <div nve-layout=\"row gap:sm\">\n          <nve-button id=\"save-arrangement\">Save layout</nve-button>\n          <nve-button id=\"restore-arrangement\">Restore layout</nve-button>\n        </div>\n      </div>\n      <nve-workspace\n        id=\"saved-arrangement\"\n        groupable\n        rearrangeable\n        closable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"saved-editor\",\"saved-notes\"],\"active\":\"saved-editor\"},{\"type\":\"group\",\"panels\":[\"saved-preview\"],\"active\":\"saved-preview\"}]},\"closed\":[]}'>\n        <nve-workspace-panel id=\"saved-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"saved-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"saved-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const workspace = document.querySelector('#saved-arrangement');\n        const save = document.querySelector('#save-arrangement');\n        const restore = document.querySelector('#restore-arrangement');\n        const reset = document.querySelector('#reset-arrangement');\n        const initialValue = workspace.getAttribute('value');\n        let savedValue = initialValue;\n        save.addEventListener('click', () => {\n          savedValue = workspace.value;\n        });\n        restore.addEventListener('click', () => {\n          workspace.animateTo(savedValue);\n        });\n        reset.addEventListener('click', () => {\n          workspace.animateTo(initialValue);\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary The workspace scrolls when panel minimum heights exceed the available space. Increasing its height restores resizing.\n * @tags test-case\n */\nexport const ConstrainedSpace = {\n  render: () => html`\n    <div id=\"constrained-example\" nve-layout=\"column gap:md\">\n      <nve-range>\n        <label>\n          Workspace height:\n          <output for=\"workspace-height\">180</output>\n          px\n        </label>\n        <input id=\"workspace-height\" type=\"range\" min=\"180\" max=\"420\" value=\"180\" />\n      </nve-range>\n      <nve-button>Reset layout</nve-button>\n      <nve-workspace\n        groupable\n        rearrangeable\n        resizable\n        style=\"height:180px\"\n        value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"vertical\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"top\"],\"active\":\"top\"},{\"type\":\"group\",\"panels\":[\"bottom\"],\"active\":\"bottom\"}]},\"closed\":[]}'>\n        <nve-workspace-panel id=\"top\" min-height=\"110\">\n          <nve-workspace-panel-header>Top</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Top content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"bottom\" min-height=\"110\">\n          <nve-workspace-panel-header>Bottom</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Bottom content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#constrained-example');\n        const workspace = example.querySelector('nve-workspace');\n        const range = example.querySelector('input');\n        const output = example.querySelector('output');\n        const initialValue = workspace.getAttribute('value');\n        const updateHeight = () => {\n          workspace.style.height = range.value + 'px';\n          output.value = range.value;\n        };\n        range.addEventListener('input', updateHeight);\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n          range.value = '180';\n          updateHeight();\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Keep tab titles readable in a narrow group with scrolling and keyboard selection.\n * @tags test-case\n */\nexport const TabOverflow = {\n  render: () => html`\n    <nve-workspace style=\"width:260px;height:260px\">\n      ${[\n        'Editor',\n        'Preview',\n        'Terminal',\n        'Notes',\n        'Project outline',\n        'Recent activity',\n        'Task history',\n        'Search results'\n      ].map(\n        (title, index) => html`\n          <nve-workspace-panel id=${`view-${index}`}>\n            <nve-workspace-panel-header>${title}</nve-workspace-panel-header>\n            <nve-workspace-panel-content>\n              ${title === 'Editor' ? html`<nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>` : `${title} content`}\n            </nve-workspace-panel-content>\n          </nve-workspace-panel>\n        `\n      )}\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Adjust spacing between groups with --gap. Zero joins the group frames.\n * @tags test-case\n */\nexport const Gap = {\n  render: () => html`\n    <div id=\"workspace-gap-example\" nve-layout=\"column gap:md\">\n      <nve-range>\n        <label>\n          Gap:\n          <output for=\"workspace-gap-range\">0</output>\n          px\n        </label>\n        <input id=\"workspace-gap-range\" type=\"range\" min=\"0\" max=\"24\" value=\"0\" />\n      </nve-range>\n      <nve-workspace\n        container=\"full\"\n        resizable\n        style=\"--gap:0px;height:360px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"gap-editor\"],\"active\":\"gap-editor\"},{\"type\":\"group\",\"panels\":[\"gap-preview\"],\"active\":\"gap-preview\"}]}}'>\n        <nve-workspace-panel id=\"gap-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"gap-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#workspace-gap-example');\n        const workspace = example.querySelector('nve-workspace');\n        const range = example.querySelector('input');\n        const output = example.querySelector('output');\n        range.addEventListener('input', () => {\n          workspace.style.setProperty('--gap', range.value + 'px');\n          output.value = range.value;\n        });\n      </script>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}
+{"version":3,"file":"workspace.examples.js","names":["workspace_examples_default"],"sources":["../../src/workspace/workspace.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\n\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/dropdown-group/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\nimport '@nvidia-elements/core/workspace/define.js';\n\nexport default { title: 'Elements/Workspace', component: 'nve-workspace' };\n\n/**\n * @summary Arrange panels in nested groups while retaining application content. Drag panel headers or tabs to move panels, group handles to move tabs together, and separators to resize.\n */\nexport const Default = {\n  render: () => html`\n    <nve-workspace\n      groupable\n      rearrangeable\n      resizable\n      style=\"height:600px\"\n      value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,4],\"children\":[{\"type\":\"group\",\"panels\":[\"workspace-outline\"],\"active\":\"workspace-outline\"},{\"type\":\"split\",\"axis\":\"vertical\",\"weights\":[3,2],\"children\":[{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[3,2],\"children\":[{\"type\":\"group\",\"panels\":[\"workspace-editor\"],\"active\":\"workspace-editor\"},{\"type\":\"group\",\"panels\":[\"workspace-preview\"],\"active\":\"workspace-preview\"}]},{\"type\":\"group\",\"panels\":[\"workspace-notes\",\"workspace-activity\",\"workspace-tasks\"],\"active\":\"workspace-notes\"}]}]}}'>\n      <nve-workspace-panel id=\"workspace-outline\">\n        <nve-workspace-panel-header>Outline</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Outline content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-editor\">\n        <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n        <nve-workspace-panel-content>\n          <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n        </nve-workspace-panel-content>\n        <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-preview\">\n        <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-notes\">\n        <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-activity\">\n        <nve-workspace-panel-header>Activity</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Activity content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"workspace-tasks\">\n        <nve-workspace-panel-header>Tasks</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Tasks content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Resize groups within a fixed arrangement and switch tabs while retaining application content.\n */\nexport const Resizable = {\n  render: () => html`\n    <nve-workspace\n      resizable\n      value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"editor\",\"notes\"],\"active\":\"editor\"},{\"type\":\"group\",\"panels\":[\"preview\"],\"active\":\"preview\"}]},\"closed\":[]}'\n      style=\"height:420px\">\n      <nve-workspace-panel id=\"editor\">\n        <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n        <nve-workspace-panel-content>\n          <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n        </nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"preview\">\n        <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"notes\">\n        <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Rearrange panels while keeping tabbed panels together.\n */\nexport const Rearrangeable = {\n  render: () => html`\n    <nve-workspace\n      rearrangeable\n      resizable\n      style=\"height:420px\"\n      value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"editor\",\"notes\"],\"active\":\"editor\"},{\"type\":\"group\",\"panels\":[\"preview\"],\"active\":\"preview\"}]}}'>\n      <nve-workspace-panel id=\"editor\">\n        <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n        <nve-workspace-panel-content>\n          <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n        </nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"preview\">\n        <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n      <nve-workspace-panel id=\"notes\">\n        <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n        <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n      </nve-workspace-panel>\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Join panels into tabbed groups or move individual tabs out.\n */\nexport const Groupable = {\n  render: () => html`\n    <div id=\"regroup-example\" nve-layout=\"column gap:md\">\n      <nve-button>Reset layout</nve-button>\n      <nve-workspace\n        rearrangeable\n        groupable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"group-editor\",\"group-notes\"],\"active\":\"group-editor\"},{\"type\":\"group\",\"panels\":[\"group-preview\"],\"active\":\"group-preview\"}]}}'>\n        <nve-workspace-panel id=\"group-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"group-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"group-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#regroup-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Close and reopen panels while retaining their positions and application content.\n */\nexport const Closable = {\n  render: () => html`\n    <div id=\"open-close-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-open-close\">Reset layout</nve-button>\n        <div nve-layout=\"row gap:sm\">\n          <nve-button command=\"--open\" commandfor=\"retained-editor\">Open editor</nve-button>\n          <nve-button command=\"--close\" commandfor=\"retained-editor\">Close editor</nve-button>\n        </div>\n      </div>\n      <nve-workspace\n        closable\n        groupable\n        rearrangeable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"retained-editor\",\"retained-notes\"],\"active\":\"retained-editor\"},{\"type\":\"group\",\"panels\":[\"restorable-preview\"],\"active\":\"restorable-preview\"}]},\"closed\":[]}'>\n        <nve-workspace-panel id=\"retained-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"restorable-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"retained-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#open-close-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('#reset-open-close').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Expand a group and its tabs to full screen.\n */\nexport const Fullscreenable = {\n  render: () => html`\n    <div id=\"fullscreen-example\" nve-layout=\"column gap:md\">\n      <nve-button>Reset layout</nve-button>\n      <nve-workspace\n        fullscreenable\n        closable\n        rearrangeable\n        groupable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"fullscreen-editor\",\"fullscreen-notes\"],\"active\":\"fullscreen-editor\"},{\"type\":\"group\",\"panels\":[\"fullscreen-preview\"],\"active\":\"fullscreen-preview\"}]}}'>\n        <nve-workspace-panel id=\"fullscreen-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"fullscreen-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"fullscreen-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#fullscreen-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Add custom menus that use invoker commands to move, split, or close panels and toggle group fullscreen alongside application actions.\n */\n// eslint-disable-next-line local-typescript/example-template-size -- Keep the complete menu composition readable without compressing its markup.\nexport const CustomPanelActions = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-button id=\"a-reopen\" popovertarget=\"a-open\" disabled>Reopen</nve-button>\n      <nve-workspace\n        id=\"a-demo\"\n        fullscreenable\n        groupable\n        rearrangeable\n        closable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"a-editor\",\"a-notes\"],\"active\":\"a-editor\"},{\"type\":\"group\",\"panels\":[\"a-preview\"],\"active\":\"a-preview\"}]}}'>\n        <nve-workspace-panel id=\"a-editor\">\n          <nve-workspace-panel-header>\n            Editor\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\"\n              aria-label=\"Editor actions\" value=\"a-editor\" popovertarget=\"a-menu\"></nve-icon-button>\n          </nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"a-notes\">\n          <nve-workspace-panel-header>\n            Notes\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\"\n              aria-label=\"Notes actions\" value=\"a-notes\" popovertarget=\"a-menu\"></nve-icon-button>\n          </nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"a-preview\">\n          <nve-workspace-panel-header>\n            Preview\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\"\n              aria-label=\"Preview actions\" value=\"a-preview\" popovertarget=\"a-menu\"></nve-icon-button>\n          </nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-dropdown-group>\n          <nve-dropdown id=\"a-menu\">\n            <nve-menu>\n              <nve-menu-item command=\"--toggle-fullscreen\">Fullscreen</nve-menu-item>\n              <nve-menu-item popovertarget=\"a-move\">\n                Move to\n                <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n              </nve-menu-item>\n              <nve-menu-item popovertarget=\"a-split\">\n                Split\n                <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n              </nve-menu-item>\n              <nve-menu-item command=\"--close\">Close</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n          <nve-dropdown id=\"a-move\" position=\"right\">\n            <nve-menu>\n              <nve-menu-item command=\"--place\" data-target=\"a-editor\">Editor</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-target=\"a-notes\">Notes</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-target=\"a-preview\">Preview</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n          <nve-dropdown id=\"a-open\" position=\"bottom\">\n            <nve-menu>\n              <nve-menu-item command=\"--open\" data-target=\"a-editor\">Editor</nve-menu-item>\n              <nve-menu-item command=\"--open\" data-target=\"a-notes\">Notes</nve-menu-item>\n              <nve-menu-item command=\"--open\" data-target=\"a-preview\">Preview</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n          <nve-dropdown id=\"a-split\" position=\"right\">\n            <nve-menu>\n              <nve-menu-item command=\"--place\" data-side=\"left\">Left</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-side=\"right\">Right</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-side=\"top\">Above</nve-menu-item>\n              <nve-menu-item command=\"--place\" data-side=\"bottom\">Below</nve-menu-item>\n            </nve-menu>\n          </nve-dropdown>\n        </nve-dropdown-group>\n      </nve-workspace>\n      <script type=\"module\">\n        const workspace = document.querySelector('#a-demo');\n        const dropdownGroup = workspace.querySelector('nve-dropdown-group');\n        const reopen = document.querySelector('#a-reopen');\n        let panelId;\n\n        function refresh() {\n          const { root, closed } = JSON.parse(workspace.value);\n          const labels = new Map(\n            [...workspace.querySelectorAll(':scope > nve-workspace-panel')].map(panel => [\n              panel.id,\n              panel.querySelector('nve-workspace-panel-header').textContent.trim()\n            ])\n          );\n          const groups = getOpenPanelGroups(root, labels, closed);\n          const currentGroup = groups.find(ids => ids.includes(panelId));\n          const splitTarget = currentGroup?.find(id => id !== panelId);\n\n          updateMoveMenu(groups, currentGroup, labels);\n          updateReopenMenu(closed, labels);\n\n          for (const item of dropdownGroup.querySelectorAll('[command]')) {\n            item.commandForElement = workspace;\n            item.value = item.command === '--open' ? item.dataset.target : panelId;\n            if (item.dataset.side) {\n              item.placement = { operation: 'split', target: splitTarget, position: item.dataset.side };\n            }\n            item.disabled = item.style.display === 'none' || !workspace.isCommandAvailable(item.command, item);\n          }\n\n          for (const trigger of dropdownGroup.querySelectorAll('[popovertarget]')) {\n            const items = trigger.popoverTargetElement.querySelectorAll('[command]');\n            trigger.disabled = [...items].every(item => item.disabled);\n          }\n          reopen.disabled = !closed.some(id => labels.has(id));\n        }\n\n        function getOpenPanelGroups(node, labels, closed) {\n          if (!node) return [];\n          if (node.type === 'group') {\n            return [node.panels.filter(id => labels.has(id) && !closed.includes(id))];\n          }\n          return node.children.flatMap(child => getOpenPanelGroups(child, labels, closed));\n        }\n\n        function updateMoveMenu(groups, currentGroup, labels) {\n          for (const item of dropdownGroup.querySelectorAll('#a-move [data-target]')) {\n            const target = item.dataset.target;\n            const members = groups.find(ids => ids[0] === target && ids !== currentGroup);\n            item.style.display = members ? '' : 'none';\n            item.placement = { operation: 'join', target };\n            if (members) {\n              item.textContent = members.map(id => labels.get(id)).join(', ');\n            }\n          }\n        }\n\n        function updateReopenMenu(closed, labels) {\n          for (const item of dropdownGroup.querySelectorAll('#a-open [data-target]')) {\n            const target = item.dataset.target;\n            item.style.display = labels.has(target) && closed.includes(target) ? '' : 'none';\n          }\n        }\n\n        dropdownGroup.addEventListener('beforetoggle', event => {\n          if (event.newState !== 'open') return;\n          if (event.target.id === 'a-menu') panelId = event.source?.value;\n          refresh();\n        }, true);\n        workspace.addEventListener('commandavailabilitychange', refresh);\n        workspace.addEventListener('command', () => dropdownGroup.close());\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Match the surrounding layout with inset, flat, or full container framing.\n * @tags test-case\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-workspace\n        container=\"inset\"\n        resizable\n        style=\"height:220px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"container-inset\"],\"active\":\"container-inset\"},{\"type\":\"group\",\"panels\":[\"container-inset-preview\"],\"active\":\"container-inset-preview\"}]}}'>\n        <nve-workspace-panel id=\"container-inset\">\n          <nve-workspace-panel-header>Editor (inset)</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n          <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"container-inset-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <nve-workspace\n        container=\"flat\"\n        resizable\n        style=\"height:220px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"container-flat\"],\"active\":\"container-flat\"},{\"type\":\"group\",\"panels\":[\"container-flat-preview\"],\"active\":\"container-flat-preview\"}]}}'>\n        <nve-workspace-panel id=\"container-flat\">\n          <nve-workspace-panel-header>Editor (flat)</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n          <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"container-flat-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <nve-workspace\n        container=\"full\"\n        resizable\n        style=\"height:220px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"container-full\"],\"active\":\"container-full\"},{\"type\":\"group\",\"panels\":[\"container-full-preview\"],\"active\":\"container-full-preview\"}]}}'>\n        <nve-workspace-panel id=\"container-full\">\n          <nve-workspace-panel-header>Editor (full)</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n          <nve-workspace-panel-footer>Ready</nve-workspace-panel-footer>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"container-full-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n    </div>\n  `\n};\n\n/**\n * @summary Customize spacing, controls, headers, and footers for a compact workspace.\n * @tags theme\n */\nexport const CompactStyling = {\n  render: () => html`\n    <div id=\"compact-example\" nve-layout=\"column gap:md\">\n      <nve-button>Reset layout</nve-button>\n      <style>\n        #condensed-workspace > nve-workspace-panel {\n          --box-shadow: none;\n        }\n        #condensed-workspace nve-workspace-panel-header {\n          --min-height: var(--nve-ref-size-800);\n          --padding: var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-250);\n        }\n        #condensed-workspace nve-workspace-panel-footer {\n          --padding: var(--nve-ref-size-200) var(--nve-ref-size-250);\n        }\n      </style>\n      <nve-workspace\n        id=\"condensed-workspace\"\n        rearrangeable\n        groupable\n        closable\n        resizable\n        fullscreenable\n        style=\"--gap:0;--border-radius:0;--header-control-size:var(--nve-ref-size-600);--close-button-inset:var(--nve-ref-size-100);height:300px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"condensed-editor\",\"condensed-notes\"],\"active\":\"condensed-editor\"},{\"type\":\"group\",\"panels\":[\"condensed-preview\"],\"active\":\"condensed-preview\"}]}}'>\n        <nve-workspace-panel id=\"condensed-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n          <nve-workspace-panel-footer>\n            <span nve-text=\"body sm trim:none\">Ready</span>\n          </nve-workspace-panel-footer>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"condensed-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"condensed-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#compact-example');\n        const workspace = example.querySelector('nve-workspace');\n        const initialValue = workspace.getAttribute('value');\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Save and restore groups, split proportions, and closed panels without recreating application content.\n */\nexport const SaveRestore = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-arrangement\">Reset layout</nve-button>\n        <div nve-layout=\"row gap:sm\">\n          <nve-button id=\"save-arrangement\">Save layout</nve-button>\n          <nve-button id=\"restore-arrangement\">Restore layout</nve-button>\n        </div>\n      </div>\n      <nve-workspace\n        id=\"saved-arrangement\"\n        groupable\n        rearrangeable\n        closable\n        resizable\n        style=\"height:420px\"\n        value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"saved-editor\",\"saved-notes\"],\"active\":\"saved-editor\"},{\"type\":\"group\",\"panels\":[\"saved-preview\"],\"active\":\"saved-preview\"}]},\"closed\":[]}'>\n        <nve-workspace-panel id=\"saved-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"saved-notes\">\n          <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"saved-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const workspace = document.querySelector('#saved-arrangement');\n        const save = document.querySelector('#save-arrangement');\n        const restore = document.querySelector('#restore-arrangement');\n        const reset = document.querySelector('#reset-arrangement');\n        const initialValue = workspace.getAttribute('value');\n        let savedValue = initialValue;\n        save.addEventListener('click', () => {\n          savedValue = workspace.value;\n        });\n        restore.addEventListener('click', () => {\n          workspace.animateTo(savedValue);\n        });\n        reset.addEventListener('click', () => {\n          workspace.animateTo(initialValue);\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary The workspace scrolls when panel minimum heights exceed the available space. Increasing its height restores resizing.\n * @tags test-case\n */\nexport const ConstrainedSpace = {\n  render: () => html`\n    <div id=\"constrained-example\" nve-layout=\"column gap:md\">\n      <nve-range>\n        <label>\n          Workspace height:\n          <output for=\"workspace-height\">180</output>\n          px\n        </label>\n        <input id=\"workspace-height\" type=\"range\" min=\"180\" max=\"420\" value=\"180\" />\n      </nve-range>\n      <nve-button>Reset layout</nve-button>\n      <nve-workspace\n        groupable\n        rearrangeable\n        resizable\n        style=\"height:180px\"\n        value='{\"version\":1,\"root\":{\"type\":\"split\",\"axis\":\"vertical\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"top\"],\"active\":\"top\"},{\"type\":\"group\",\"panels\":[\"bottom\"],\"active\":\"bottom\"}]},\"closed\":[]}'>\n        <nve-workspace-panel id=\"top\" min-height=\"110\">\n          <nve-workspace-panel-header>Top</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Top content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"bottom\" min-height=\"110\">\n          <nve-workspace-panel-header>Bottom</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Bottom content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#constrained-example');\n        const workspace = example.querySelector('nve-workspace');\n        const range = example.querySelector('input');\n        const output = example.querySelector('output');\n        const initialValue = workspace.getAttribute('value');\n        const updateHeight = () => {\n          workspace.style.height = range.value + 'px';\n          output.value = range.value;\n        };\n        range.addEventListener('input', updateHeight);\n        example.querySelector('nve-button').addEventListener('click', () => {\n          workspace.value = initialValue;\n          range.value = '180';\n          updateHeight();\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Keep tab titles readable in a narrow group with scrolling and keyboard selection.\n * @tags test-case\n */\nexport const TabOverflow = {\n  render: () => html`\n    <nve-workspace style=\"width:260px;height:260px\">\n      ${[\n        'Editor',\n        'Preview',\n        'Terminal',\n        'Notes',\n        'Project outline',\n        'Recent activity',\n        'Task history',\n        'Search results'\n      ].map(\n        (title, index) => html`\n          <nve-workspace-panel id=${`view-${index}`}>\n            <nve-workspace-panel-header>${title}</nve-workspace-panel-header>\n            <nve-workspace-panel-content>\n              ${title === 'Editor' ? html`<nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>` : `${title} content`}\n            </nve-workspace-panel-content>\n          </nve-workspace-panel>\n        `\n      )}\n    </nve-workspace>\n  `\n};\n\n/**\n * @summary Adjust spacing between groups with --gap. Zero joins the group frames.\n * @tags test-case\n */\nexport const Gap = {\n  render: () => html`\n    <div id=\"workspace-gap-example\" nve-layout=\"column gap:md\">\n      <nve-range>\n        <label>\n          Gap:\n          <output for=\"workspace-gap-range\">0</output>\n          px\n        </label>\n        <input id=\"workspace-gap-range\" type=\"range\" min=\"0\" max=\"24\" value=\"0\" />\n      </nve-range>\n      <nve-workspace\n        container=\"full\"\n        resizable\n        style=\"--gap:0px;height:360px\"\n        value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[1,1],\"children\":[{\"type\":\"group\",\"panels\":[\"gap-editor\"],\"active\":\"gap-editor\"},{\"type\":\"group\",\"panels\":[\"gap-preview\"],\"active\":\"gap-preview\"}]}}'>\n        <nve-workspace-panel id=\"gap-editor\">\n          <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n          <nve-workspace-panel-content>\n            <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n          </nve-workspace-panel-content>\n        </nve-workspace-panel>\n        <nve-workspace-panel id=\"gap-preview\">\n          <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n          <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n        </nve-workspace-panel>\n      </nve-workspace>\n      <script type=\"module\">\n        const example = document.querySelector('#workspace-gap-example');\n        const workspace = example.querySelector('nve-workspace');\n        const range = example.querySelector('input');\n        const output = example.querySelector('output');\n        range.addEventListener('input', () => {\n          workspace.style.setProperty('--gap', range.value + 'px');\n          output.value = range.value;\n        });\n      </script>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/workspace/workspace.examples.json

@@ -77,10 +77,10 @@
       ]
     },
     {
-      "id": "workspace-custom-headers",
-      "name": "CustomHeaders",
-      "template": "<div id=\"compact-example\" nve-layout=\"column gap:md\">\n  <nve-button>Reset layout</nve-button>\n  <style>\n    #condensed-workspace > nve-workspace-panel {\n      --box-shadow: none;\n    }\n    #condensed-workspace nve-workspace-panel-header {\n      --min-height: var(--nve-ref-size-800);\n      --padding: var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-250);\n    }\n  </style>\n  <nve-workspace\n    id=\"condensed-workspace\"\n    rearrangeable\n    groupable\n    closable\n    resizable\n    fullscreenable\n    style=\"--gap: 0; --border-radius: 0; --header-control-size: var(--nve-ref-size-600); --close-button-inset: var(--nve-ref-size-100); height: 300px\"\n    value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"condensed-editor\",\"condensed-notes\"],\"active\":\"condensed-editor\"},{\"type\":\"group\",\"panels\":[\"condensed-preview\"],\"active\":\"condensed-preview\"}]}}'\n  >\n    <nve-workspace-panel id=\"condensed-editor\">\n      <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n      <nve-workspace-panel-content>\n        <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n      </nve-workspace-panel-content>\n    </nve-workspace-panel>\n    <nve-workspace-panel id=\"condensed-notes\">\n      <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n      <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n    </nve-workspace-panel>\n    <nve-workspace-panel id=\"condensed-preview\">\n      <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n      <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n    </nve-workspace-panel>\n  </nve-workspace>\n  <script type=\"module\">\n    const example = document.querySelector(\"#compact-example\");\n    const workspace = example.querySelector(\"nve-workspace\");\n    const initialValue = workspace.getAttribute(\"value\");\n    example.querySelector(\"nve-button\").addEventListener(\"click\", () => {\n      workspace.value = initialValue;\n    });\n  </script>\n</div>\n",
-      "summary": "Customize header spacing, control sizes, and panel corners for a compact workspace.",
+      "id": "workspace-compact-styling",
+      "name": "CompactStyling",
+      "template": "<div id=\"compact-example\" nve-layout=\"column gap:md\">\n  <nve-button>Reset layout</nve-button>\n  <style>\n    #condensed-workspace > nve-workspace-panel {\n      --box-shadow: none;\n    }\n    #condensed-workspace nve-workspace-panel-header {\n      --min-height: var(--nve-ref-size-800);\n      --padding: var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-250);\n    }\n    #condensed-workspace nve-workspace-panel-footer {\n      --padding: var(--nve-ref-size-200) var(--nve-ref-size-250);\n    }\n  </style>\n  <nve-workspace\n    id=\"condensed-workspace\"\n    rearrangeable\n    groupable\n    closable\n    resizable\n    fullscreenable\n    style=\"--gap: 0; --border-radius: 0; --header-control-size: var(--nve-ref-size-600); --close-button-inset: var(--nve-ref-size-100); height: 300px\"\n    value='{\"version\":1,\"closed\":[],\"root\":{\"type\":\"split\",\"axis\":\"horizontal\",\"weights\":[2,1],\"children\":[{\"type\":\"group\",\"panels\":[\"condensed-editor\",\"condensed-notes\"],\"active\":\"condensed-editor\"},{\"type\":\"group\",\"panels\":[\"condensed-preview\"],\"active\":\"condensed-preview\"}]}}'\n  >\n    <nve-workspace-panel id=\"condensed-editor\">\n      <nve-workspace-panel-header>Editor</nve-workspace-panel-header>\n      <nve-workspace-panel-content>\n        <nve-textarea><textarea aria-label=\"Editor\">Editor content</textarea></nve-textarea>\n      </nve-workspace-panel-content>\n      <nve-workspace-panel-footer>\n        <span nve-text=\"body sm trim:none\">Ready</span>\n      </nve-workspace-panel-footer>\n    </nve-workspace-panel>\n    <nve-workspace-panel id=\"condensed-notes\">\n      <nve-workspace-panel-header>Notes</nve-workspace-panel-header>\n      <nve-workspace-panel-content>Notes content</nve-workspace-panel-content>\n    </nve-workspace-panel>\n    <nve-workspace-panel id=\"condensed-preview\">\n      <nve-workspace-panel-header>Preview</nve-workspace-panel-header>\n      <nve-workspace-panel-content>Preview content</nve-workspace-panel-content>\n    </nve-workspace-panel>\n  </nve-workspace>\n  <script type=\"module\">\n    const example = document.querySelector(\"#compact-example\");\n    const workspace = example.querySelector(\"nve-workspace\");\n    const initialValue = workspace.getAttribute(\"value\");\n    example.querySelector(\"nve-button\").addEventListener(\"click\", () => {\n      workspace.value = initialValue;\n    });\n  </script>\n</div>\n",
+      "summary": "Customize spacing, controls, headers, and footers for a compact workspace.",
       "description": "",
       "composition": true,
       "tags": [

package/dist/workspace/workspace.js

@@ -1,5 +1,5 @@
 // src/workspace/workspace.css?inline
-var e = ":host{--gap: var(--nve-ref-size-150);--border-radius: var(--nve-ref-border-radius-lg);--tab-min-width: calc(3 * var(--nve-ref-size-1000));--tab-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--close-button-inset: var(--nve-ref-size-200);--header-control-size: var(--nve-ref-size-700);--header-control-inset: var(--nve-ref-size-100);--_workspace-border-radius: var(--border-radius);--animation-duration: var(--nve-ref-animation-duration-150);--animation-easing: var(--nve-ref-animation-easing-100);--_placement-reserved-background: color-mix(in srgb, var(--nve-sys-accent-secondary-background) 28%, transparent);--gutter-background: transparent;--gutter-hover-background: var(--nve-sys-accent-secondary-background);display:grid;width:100%;width:stretch;grid-template-rows:minmax(0,1fr)}[internal-host]{position:relative;display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;contain:size;contain-intrinsic-block-size:var(--_minimum-height, 0)}.viewport{position:relative;min-width:0;min-height:0;overflow:auto}.canvas{width:100%;height:100%;position:relative;overflow:clip}::slotted(nve-workspace-panel){position:absolute}::slotted(nve-workspace-panel:not(:state(workspace-presented))){display:none!important}.group-chrome{position:absolute;overflow:clip;border-radius:var(--_workspace-border-radius);pointer-events:none}.tabs{direction:ltr;position:relative;display:flex;pointer-events:auto;background:var(--nve-sys-layer-container-background)}.tabs[data-carried-reservation]{visibility:hidden}.tablist{position:relative;flex:none;min-width:0;overflow:clip}.tablist[data-scrollable]{overflow:auto hidden;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}.tab-track{position:relative;height:100%;display:block;--gap: 0;--indicator-border-radius: var(--nve-ref-border-radius-none)}[internal-host][data-resizing] .tab-track,[internal-host][data-rearranging] .tab-track{--indicator-animation-duration: 0ms}.tab-entry{--padding: 0;--gap: 0;--border-radius: var(--nve-ref-border-radius-none)}:host([closable]) .tab-entry{--padding: 0 var(--close-button-inset) 0 0}.tab-entry nve-tabs-item{--padding: 0 var(--nve-ref-size-200)}.tablist .tab-entry{position:absolute;top:0;height:100%;--width: 100%;box-sizing:border-box}.tablist .tab-entry+.tab-entry,.tabs>nve-drag-handle+.tablist .tab-entry:first-child{border-inline-start:var(--tab-border)}[data-carried-tab]{visibility:hidden}[internal-host][data-rearranging] .tablist .tab-entry{transition:left var(--animation-duration) var(--animation-easing),width var(--animation-duration) var(--animation-easing)}.panel-entry{padding:var(--padding);display:flex;align-items:center}.panel-title{display:flex;align-items:center;flex:1;min-width:0;height:100%;box-sizing:border-box;padding:0 var(--nve-ref-size-200);overflow:hidden;white-space:nowrap;color:var(--nve-sys-text-emphasis-color);font-size:var(--nve-ref-font-size-100);font-weight:var(--nve-ref-font-weight-semibold);line-height:var(--nve-ref-font-size-500)}.fallback-title{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([rearrangeable][groupable]) .tabs nve-tabs-item,:host([rearrangeable]) .tabs .panel-title{--cursor: grab;cursor:grab;touch-action:pan-x}.tabs nve-drag-handle{flex:0 0 auto;--cursor: grab;--height: 100%;--border-radius: var(--nve-ref-border-radius-none);touch-action:none}:is(.tabs,.chrome) nve-drag-handle{--width: calc(var(--header-control-size) + 2 * var(--header-control-inset))}nve-icon-button:is([part~=close-button],[part~=fullscreen-button]){--width: var(--header-control-size);--height: var(--header-control-size)}.group-actions{display:flex;align-items:center;flex:none;padding-inline:var(--header-control-inset) calc(var(--header-control-inset) + var(--nve-ref-border-width-sm));border-inline-start:var(--tab-border);box-sizing:border-box}.group-actions[data-authored-suffix]{border-inline-start-color:transparent}.gutter{position:absolute;background:var(--gutter-background);pointer-events:none}nve-resize-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;--background: transparent}nve-resize-handle:hover:not(:state(active))::part(_line){background:var(--gutter-hover-background)}.preview-layer{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:6}.destination{position:absolute;inset:0 auto auto 0;pointer-events:none;z-index:6;box-sizing:border-box;--background: transparent;background-color:color-mix(in srgb,var(--nve-sys-accent-secondary-background) 16%,transparent);border-radius:var(--border-radius);transition:background-color var(--animation-duration) var(--animation-easing),transform var(--animation-duration) var(--animation-easing),width var(--animation-duration) var(--animation-easing),height var(--animation-duration) var(--animation-easing)}.destination[data-reserved-placement]{background-color:var(--_placement-reserved-background)}.destination[data-cue-clipped]{visibility:hidden}.destination[data-drop-blocked]{--border: 2px solid var(--nve-sys-support-danger-emphasis-color)}.destination nve-icon{position:absolute;inset:var(--nve-ref-space-sm) auto auto var(--nve-ref-space-sm)}.carried{position:absolute;z-index:8;pointer-events:none;white-space:nowrap;--background: var(--nve-sys-layer-container-background);--border: var(--nve-ref-border-width-sm) solid var(--nve-sys-accent-secondary-background)}.context-boundary{position:absolute;box-sizing:border-box;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 var(--nve-ref-border-width-md) var(--nve-sys-accent-secondary-background);z-index:4}.context-boundary[data-active]{opacity:1}.order-overlay{position:absolute;pointer-events:none;background:var(--_placement-reserved-background);z-index:7}.seam-badge{position:absolute;box-sizing:border-box;display:grid;place-items:center;width:var(--nve-ref-size-800);height:var(--nve-ref-size-800);border:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);border-radius:var(--nve-ref-border-radius-full);background:var(--nve-sys-layer-container-background);color:var(--nve-sys-accent-secondary-background);transform:translate(-50%,-50%);pointer-events:none}.seam-badge>svg{display:block;width:var(--nve-ref-size-500);height:var(--nve-ref-size-500);overflow:visible;pointer-events:none}[internal-host][data-rearranging] .context-boundary,[internal-host][data-rearranging] .group-chrome,[internal-host][data-rearranging] ::slotted(nve-workspace-panel){transition:left var(--animation-duration) var(--animation-easing),top var(--animation-duration) var(--animation-easing),width var(--animation-duration) var(--animation-easing),height var(--animation-duration) var(--animation-easing)}.chrome{animation-duration:var(--animation-duration);animation-timing-function:var(--animation-easing);position:absolute;visibility:hidden;pointer-events:none;width:max-content}.gap-probe{position:absolute;width:max(0px,var(--gap));height:0}.tab-min-probe{position:absolute;width:max(0px,var(--tab-min-width));height:0}.chrome-header{align-items:center;min-height:calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));direction:ltr;display:flex}:host(:fullscreen){width:100%;height:100%;background:var(--nve-sys-layer-container-background)}:host([container=\"flat\"]) .tabs{background:transparent}:host([container=\"flat\"]),:host([container=\"full\"]){--_workspace-border-radius: var(--nve-ref-border-radius-none)}";
+var e = ":host{--gap: var(--nve-ref-size-150);--border-radius: var(--nve-ref-border-radius-lg);--tab-min-width: calc(3 * var(--nve-ref-size-1000));--tab-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--close-button-inset: var(--nve-ref-size-200);--header-control-size: var(--nve-ref-size-700);--header-control-inset: var(--nve-ref-size-100);--_workspace-border-radius: var(--border-radius);--animation-duration: var(--nve-ref-animation-duration-150);--animation-easing: var(--nve-ref-animation-easing-100);--_placement-reserved-background: color-mix(in srgb, var(--nve-sys-accent-secondary-background) 28%, transparent);--gutter-background: transparent;--gutter-hover-background: var(--nve-sys-accent-secondary-background);display:grid;width:100%;width:stretch;grid-template-rows:minmax(0,1fr)}[internal-host]{position:relative;display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;contain:size;contain-intrinsic-block-size:var(--_minimum-height, 0)}.viewport{position:relative;min-width:0;min-height:0;overflow:auto}.canvas{width:100%;height:100%;position:relative;overflow:clip}::slotted(nve-workspace-panel){position:absolute}::slotted(nve-workspace-panel:not(:state(workspace-presented))){display:none!important}.group-chrome{position:absolute;overflow:clip;border-radius:var(--_workspace-border-radius);pointer-events:none}.tabs{direction:ltr;position:relative;display:flex;pointer-events:auto;background:var(--nve-sys-layer-container-background)}.tabs[data-carried-reservation]{visibility:hidden}.tablist{position:relative;flex:none;min-width:0;overflow:clip}.tablist[data-scrollable]{overflow:auto hidden;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}.tab-track{position:relative;height:100%;display:block;--gap: 0;--indicator-border-radius: var(--nve-ref-border-radius-none)}[internal-host][data-resizing] .tab-track,[internal-host][data-rearranging] .tab-track{--indicator-animation-duration: 0ms}.tab-entry{--padding: 0;--gap: 0;--border-radius: var(--nve-ref-border-radius-none)}:host([closable]) .tab-entry{--padding: 0 var(--close-button-inset) 0 0}.tab-entry nve-tabs-item{--padding: 0 var(--nve-ref-size-200)}.tablist .tab-entry{position:absolute;top:0;height:100%;--width: 100%;box-sizing:border-box}.tablist .tab-entry+.tab-entry,.tabs>nve-drag-handle+.tablist .tab-entry:first-child{border-inline-start:var(--tab-border)}[data-carried-tab]{visibility:hidden}[internal-host][data-rearranging] .tablist .tab-entry{transition:left var(--animation-duration) var(--animation-easing),width var(--animation-duration) var(--animation-easing)}.panel-entry{padding:var(--padding);display:flex;align-items:center}.panel-title{display:flex;align-items:center;flex:1;min-width:0;height:100%;box-sizing:border-box;padding:0 var(--nve-ref-size-200);overflow:hidden;white-space:nowrap;color:var(--nve-sys-text-emphasis-color);font-size:var(--nve-ref-font-size-100);font-weight:var(--nve-ref-font-weight-semibold);line-height:var(--nve-ref-font-size-500)}.fallback-title{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([rearrangeable][groupable]) .tabs nve-tabs-item,:host([rearrangeable]) .tabs .panel-title{--cursor: grab;cursor:grab;touch-action:pan-x}.tabs nve-drag-handle{flex:0 0 auto;--cursor: grab;--height: 100%;--border-radius: var(--nve-ref-border-radius-none);touch-action:none}:is(.tabs,.chrome) nve-drag-handle{--width: calc(var(--header-control-size) + 2 * var(--header-control-inset))}nve-icon-button:is([part~=close-button],[part~=fullscreen-button]){--width: var(--header-control-size);--height: var(--header-control-size)}.group-actions{display:flex;align-items:center;flex:none;padding-inline:var(--header-control-inset) calc(var(--header-control-inset) + var(--nve-ref-border-width-sm));border-inline-start:var(--tab-border);box-sizing:border-box}.group-actions[data-authored-suffix]{border-inline-start-color:transparent}.gutter{position:absolute;background:var(--gutter-background);pointer-events:none}nve-resize-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;--background: transparent}nve-resize-handle:hover:not(:state(active))::part(_line){background:var(--gutter-hover-background)}.preview-layer{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:6}.destination{position:absolute;inset:0 auto auto 0;pointer-events:none;z-index:6;box-sizing:border-box;--background: transparent;background-color:color-mix(in srgb,var(--nve-sys-accent-secondary-background) 16%,transparent);border-radius:var(--border-radius);transition:background-color var(--animation-duration) var(--animation-easing),transform var(--animation-duration) var(--animation-easing),width var(--animation-duration) var(--animation-easing),height var(--animation-duration) var(--animation-easing)}.destination[data-reserved-placement]{background-color:var(--_placement-reserved-background)}.destination[data-cue-clipped]{visibility:hidden}.destination[data-drop-blocked]{--border: 2px solid var(--nve-sys-support-danger-emphasis-color)}.destination nve-icon{position:absolute;inset:var(--nve-ref-space-sm) auto auto var(--nve-ref-space-sm)}.carried{position:absolute;z-index:8;pointer-events:none;white-space:nowrap;--background: var(--nve-sys-layer-container-background);--border: var(--nve-ref-border-width-sm) solid var(--nve-sys-accent-secondary-background)}.scope-boundary{position:absolute;box-sizing:border-box;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 var(--nve-ref-border-width-md) var(--nve-sys-accent-secondary-background);z-index:4}.scope-boundary[data-active]{opacity:1}.order-overlay{position:absolute;pointer-events:none;background:var(--_placement-reserved-background);z-index:7}.seam-badge{position:absolute;box-sizing:border-box;display:grid;place-items:center;width:var(--nve-ref-size-800);height:var(--nve-ref-size-800);border:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);border-radius:var(--nve-ref-border-radius-full);background:var(--nve-sys-layer-container-background);color:var(--nve-sys-accent-secondary-background);transform:translate(-50%,-50%);pointer-events:none}.seam-badge>svg{display:block;width:var(--nve-ref-size-500);height:var(--nve-ref-size-500);overflow:visible;pointer-events:none}[internal-host][data-rearranging] .scope-boundary,[internal-host][data-rearranging] .group-chrome,[internal-host][data-rearranging] ::slotted(nve-workspace-panel){transition:left var(--animation-duration) var(--animation-easing),top var(--animation-duration) var(--animation-easing),width var(--animation-duration) var(--animation-easing),height var(--animation-duration) var(--animation-easing)}.chrome{animation-duration:var(--animation-duration);animation-timing-function:var(--animation-easing);position:absolute;visibility:hidden;pointer-events:none;width:max-content}.gap-probe{position:absolute;width:max(0px,var(--gap));height:0}.tab-min-probe{position:absolute;width:max(0px,var(--tab-min-width));height:0}.chrome-header{align-items:center;min-height:calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));direction:ltr;display:flex}:host(:fullscreen){width:100%;height:100%;background:var(--nve-sys-layer-container-background)}:host([container=\"flat\"]) .tabs{background:transparent}:host([container=\"flat\"]),:host([container=\"full\"]){--_workspace-border-radius: var(--nve-ref-border-radius-none)}";
 export { e as default };
 
 //# sourceMappingURL=workspace.js.map

package/dist/workspace/workspace.js.map

@@ -1 +1 @@
-{"version":3,"file":"workspace.js","names":["workspace_default"],"sources":["../../src/workspace/workspace.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-size-150);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --tab-min-width: calc(3 * var(--nve-ref-size-1000));\n  --tab-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --close-button-inset: var(--nve-ref-size-200);\n  --header-control-size: var(--nve-ref-size-700);\n  --header-control-inset: var(--nve-ref-size-100);\n  --_workspace-border-radius: var(--border-radius);\n  --animation-duration: var(--nve-ref-animation-duration-150);\n  --animation-easing: var(--nve-ref-animation-easing-100);\n  --_placement-reserved-background: color-mix(in srgb, var(--nve-sys-accent-secondary-background) 28%, transparent);\n  --gutter-background: transparent;\n  --gutter-hover-background: var(--nve-sys-accent-secondary-background);\n  display: grid;\n  width: 100%; /* fallback safari */\n  width: stretch;\n  grid-template-rows: minmax(0, 1fr);\n}\n\n[internal-host] {\n  position: relative;\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n  min-width: 0;\n  min-height: 0;\n  contain: size;\n  contain-intrinsic-block-size: var(--_minimum-height, 0);\n}\n\n.viewport {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.canvas {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: clip;\n}\n\n::slotted(nve-workspace-panel) {\n  position: absolute;\n}\n\n::slotted(nve-workspace-panel:not(:state(workspace-presented))) {\n  display: none !important;\n}\n\n.group-chrome {\n  position: absolute;\n  overflow: clip;\n  border-radius: var(--_workspace-border-radius);\n  pointer-events: none;\n}\n\n.tabs {\n  direction: ltr;\n  position: relative;\n  display: flex;\n  pointer-events: auto;\n  background: var(--nve-sys-layer-container-background);\n}\n\n.tabs[data-carried-reservation] {\n  visibility: hidden;\n}\n\n.tablist {\n  position: relative;\n  flex: none;\n  min-width: 0;\n  overflow: clip;\n}\n\n.tablist[data-scrollable] {\n  overflow: auto hidden;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n.tab-track {\n  position: relative;\n  height: 100%;\n  display: block;\n  --gap: 0;\n  --indicator-border-radius: var(--nve-ref-border-radius-none);\n}\n\n[internal-host][data-resizing] .tab-track,\n[internal-host][data-rearranging] .tab-track {\n  --indicator-animation-duration: 0ms;\n}\n\n.tab-entry {\n  --padding: 0;\n  --gap: 0;\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n\n:host([closable]) .tab-entry {\n  --padding: 0 var(--close-button-inset) 0 0;\n}\n\n.tab-entry nve-tabs-item {\n  --padding: 0 var(--nve-ref-size-200);\n}\n\n.tablist .tab-entry {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  --width: 100%;\n  box-sizing: border-box;\n}\n\n.tablist .tab-entry + .tab-entry,\n.tabs > nve-drag-handle + .tablist .tab-entry:first-child {\n  border-inline-start: var(--tab-border);\n}\n\n[data-carried-tab] {\n  visibility: hidden;\n}\n\n[internal-host][data-rearranging] .tablist .tab-entry {\n  transition:\n    left var(--animation-duration) var(--animation-easing),\n    width var(--animation-duration) var(--animation-easing);\n}\n\n.panel-entry {\n  padding: var(--padding);\n  display: flex;\n  align-items: center;\n}\n\n.panel-title {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 var(--nve-ref-size-200);\n  overflow: hidden;\n  white-space: nowrap;\n  color: var(--nve-sys-text-emphasis-color);\n  font-size: var(--nve-ref-font-size-100);\n  font-weight: var(--nve-ref-font-weight-semibold);\n  line-height: var(--nve-ref-font-size-500);\n}\n\n.fallback-title {\n  display: block;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([rearrangeable][groupable]) .tabs nve-tabs-item,\n:host([rearrangeable]) .tabs .panel-title {\n  --cursor: grab;\n  cursor: grab;\n  touch-action: pan-x;\n}\n\n.tabs nve-drag-handle {\n  flex: 0 0 auto;\n  --cursor: grab;\n  --height: 100%;\n  --border-radius: var(--nve-ref-border-radius-none);\n  touch-action: none;\n}\n\n:is(.tabs, .chrome) nve-drag-handle {\n  --width: calc(var(--header-control-size) + 2 * var(--header-control-inset));\n}\n\nnve-icon-button:is([part~='close-button'], [part~='fullscreen-button']) {\n  --width: var(--header-control-size);\n  --height: var(--header-control-size);\n}\n\n.group-actions {\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding-inline: var(--header-control-inset) calc(var(--header-control-inset) + var(--nve-ref-border-width-sm));\n  border-inline-start: var(--tab-border);\n  box-sizing: border-box;\n}\n\n.group-actions[data-authored-suffix] {\n  /* Keep the measured control width while the authored suffix supplies the divider. */\n  border-inline-start-color: transparent;\n}\n\n.gutter {\n  position: absolute;\n  background: var(--gutter-background);\n  pointer-events: none;\n}\n\nnve-resize-handle {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: auto;\n  --background: transparent;\n}\n\nnve-resize-handle:hover:not(:state(active))::part(_line) {\n  background: var(--gutter-hover-background);\n}\n\n.preview-layer {\n  position: absolute;\n  inset: 0;\n  overflow: clip;\n  pointer-events: none;\n  z-index: 6;\n}\n\n.destination {\n  position: absolute;\n  inset: 0 auto auto 0;\n  pointer-events: none;\n  z-index: 6;\n  box-sizing: border-box;\n  --background: transparent;\n  background-color: color-mix(in srgb, var(--nve-sys-accent-secondary-background) 16%, transparent);\n  border-radius: var(--border-radius);\n  transition:\n    background-color var(--animation-duration) var(--animation-easing),\n    transform var(--animation-duration) var(--animation-easing),\n    width var(--animation-duration) var(--animation-easing),\n    height var(--animation-duration) var(--animation-easing);\n}\n\n.destination[data-reserved-placement] {\n  background-color: var(--_placement-reserved-background);\n}\n\n.destination[data-cue-clipped] {\n  visibility: hidden;\n}\n\n.destination[data-drop-blocked] {\n  --border: 2px solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n.destination nve-icon {\n  position: absolute;\n  inset: var(--nve-ref-space-sm) auto auto var(--nve-ref-space-sm);\n}\n\n.carried {\n  position: absolute;\n  z-index: 8;\n  pointer-events: none;\n  white-space: nowrap;\n  --background: var(--nve-sys-layer-container-background);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-sys-accent-secondary-background);\n}\n\n.context-boundary {\n  position: absolute;\n  box-sizing: border-box;\n  pointer-events: none;\n  opacity: 0;\n  box-shadow: inset 0 0 0 var(--nve-ref-border-width-md) var(--nve-sys-accent-secondary-background);\n  z-index: 4;\n}\n\n.context-boundary[data-active] {\n  opacity: 1;\n}\n\n.order-overlay {\n  position: absolute;\n  pointer-events: none;\n  background: var(--_placement-reserved-background);\n  z-index: 7;\n}\n\n.seam-badge {\n  position: absolute;\n  box-sizing: border-box;\n  display: grid;\n  place-items: center;\n  width: var(--nve-ref-size-800);\n  height: var(--nve-ref-size-800);\n  border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  border-radius: var(--nve-ref-border-radius-full);\n  background: var(--nve-sys-layer-container-background);\n  /* eslint-disable-next-line @nvidia-elements/lint/no-unexpected-css-variable -- The seam badge uses the same accent as the operating outline. */\n  color: var(--nve-sys-accent-secondary-background);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n.seam-badge > svg {\n  display: block;\n  width: var(--nve-ref-size-500);\n  height: var(--nve-ref-size-500);\n  overflow: visible;\n  pointer-events: none;\n}\n\n[internal-host][data-rearranging] .context-boundary,\n[internal-host][data-rearranging] .group-chrome,\n[internal-host][data-rearranging] ::slotted(nve-workspace-panel) {\n  transition:\n    left var(--animation-duration) var(--animation-easing),\n    top var(--animation-duration) var(--animation-easing),\n    width var(--animation-duration) var(--animation-easing),\n    height var(--animation-duration) var(--animation-easing);\n}\n\n.chrome {\n  animation-duration: var(--animation-duration);\n  animation-timing-function: var(--animation-easing);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: max-content;\n}\n\n.gap-probe {\n  position: absolute;\n  width: max(0px, var(--gap));\n  height: 0;\n}\n\n.tab-min-probe {\n  position: absolute;\n  width: max(0px, var(--tab-min-width));\n  height: 0;\n}\n\n.chrome-header {\n  align-items: center;\n  min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));\n  direction: ltr;\n  display: flex;\n}\n\n:host(:fullscreen) {\n  width: 100%;\n  height: 100%;\n  background: var(--nve-sys-layer-container-background);\n}\n\n:host([container='flat']) .tabs {\n  background: transparent;\n}\n\n:host([container='flat']),\n:host([container='full']) {\n  --_workspace-border-radius: var(--nve-ref-border-radius-none);\n}\n"],"mappings":""}
+{"version":3,"file":"workspace.js","names":["workspace_default"],"sources":["../../src/workspace/workspace.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-size-150);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --tab-min-width: calc(3 * var(--nve-ref-size-1000));\n  --tab-border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --close-button-inset: var(--nve-ref-size-200);\n  --header-control-size: var(--nve-ref-size-700);\n  --header-control-inset: var(--nve-ref-size-100);\n  --_workspace-border-radius: var(--border-radius);\n  --animation-duration: var(--nve-ref-animation-duration-150);\n  --animation-easing: var(--nve-ref-animation-easing-100);\n  --_placement-reserved-background: color-mix(in srgb, var(--nve-sys-accent-secondary-background) 28%, transparent);\n  --gutter-background: transparent;\n  --gutter-hover-background: var(--nve-sys-accent-secondary-background);\n  display: grid;\n  width: 100%; /* fallback safari */\n  width: stretch;\n  grid-template-rows: minmax(0, 1fr);\n}\n\n[internal-host] {\n  position: relative;\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n  min-width: 0;\n  min-height: 0;\n  contain: size;\n  contain-intrinsic-block-size: var(--_minimum-height, 0);\n}\n\n.viewport {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n\n.canvas {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: clip;\n}\n\n::slotted(nve-workspace-panel) {\n  position: absolute;\n}\n\n::slotted(nve-workspace-panel:not(:state(workspace-presented))) {\n  display: none !important;\n}\n\n.group-chrome {\n  position: absolute;\n  overflow: clip;\n  border-radius: var(--_workspace-border-radius);\n  pointer-events: none;\n}\n\n.tabs {\n  direction: ltr;\n  position: relative;\n  display: flex;\n  pointer-events: auto;\n  background: var(--nve-sys-layer-container-background);\n}\n\n.tabs[data-carried-reservation] {\n  visibility: hidden;\n}\n\n.tablist {\n  position: relative;\n  flex: none;\n  min-width: 0;\n  overflow: clip;\n}\n\n.tablist[data-scrollable] {\n  overflow: auto hidden;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n.tab-track {\n  position: relative;\n  height: 100%;\n  display: block;\n  --gap: 0;\n  --indicator-border-radius: var(--nve-ref-border-radius-none);\n}\n\n[internal-host][data-resizing] .tab-track,\n[internal-host][data-rearranging] .tab-track {\n  --indicator-animation-duration: 0ms;\n}\n\n.tab-entry {\n  --padding: 0;\n  --gap: 0;\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n\n:host([closable]) .tab-entry {\n  --padding: 0 var(--close-button-inset) 0 0;\n}\n\n.tab-entry nve-tabs-item {\n  --padding: 0 var(--nve-ref-size-200);\n}\n\n.tablist .tab-entry {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  --width: 100%;\n  box-sizing: border-box;\n}\n\n.tablist .tab-entry + .tab-entry,\n.tabs > nve-drag-handle + .tablist .tab-entry:first-child {\n  border-inline-start: var(--tab-border);\n}\n\n[data-carried-tab] {\n  visibility: hidden;\n}\n\n[internal-host][data-rearranging] .tablist .tab-entry {\n  transition:\n    left var(--animation-duration) var(--animation-easing),\n    width var(--animation-duration) var(--animation-easing);\n}\n\n.panel-entry {\n  padding: var(--padding);\n  display: flex;\n  align-items: center;\n}\n\n.panel-title {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 var(--nve-ref-size-200);\n  overflow: hidden;\n  white-space: nowrap;\n  color: var(--nve-sys-text-emphasis-color);\n  font-size: var(--nve-ref-font-size-100);\n  font-weight: var(--nve-ref-font-weight-semibold);\n  line-height: var(--nve-ref-font-size-500);\n}\n\n.fallback-title {\n  display: block;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([rearrangeable][groupable]) .tabs nve-tabs-item,\n:host([rearrangeable]) .tabs .panel-title {\n  --cursor: grab;\n  cursor: grab;\n  touch-action: pan-x;\n}\n\n.tabs nve-drag-handle {\n  flex: 0 0 auto;\n  --cursor: grab;\n  --height: 100%;\n  --border-radius: var(--nve-ref-border-radius-none);\n  touch-action: none;\n}\n\n:is(.tabs, .chrome) nve-drag-handle {\n  --width: calc(var(--header-control-size) + 2 * var(--header-control-inset));\n}\n\nnve-icon-button:is([part~='close-button'], [part~='fullscreen-button']) {\n  --width: var(--header-control-size);\n  --height: var(--header-control-size);\n}\n\n.group-actions {\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding-inline: var(--header-control-inset) calc(var(--header-control-inset) + var(--nve-ref-border-width-sm));\n  border-inline-start: var(--tab-border);\n  box-sizing: border-box;\n}\n\n.group-actions[data-authored-suffix] {\n  /* Keep the measured control width while the authored suffix supplies the divider. */\n  border-inline-start-color: transparent;\n}\n\n.gutter {\n  position: absolute;\n  background: var(--gutter-background);\n  pointer-events: none;\n}\n\nnve-resize-handle {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: auto;\n  --background: transparent;\n}\n\nnve-resize-handle:hover:not(:state(active))::part(_line) {\n  background: var(--gutter-hover-background);\n}\n\n.preview-layer {\n  position: absolute;\n  inset: 0;\n  overflow: clip;\n  pointer-events: none;\n  z-index: 6;\n}\n\n.destination {\n  position: absolute;\n  inset: 0 auto auto 0;\n  pointer-events: none;\n  z-index: 6;\n  box-sizing: border-box;\n  --background: transparent;\n  background-color: color-mix(in srgb, var(--nve-sys-accent-secondary-background) 16%, transparent);\n  border-radius: var(--border-radius);\n  transition:\n    background-color var(--animation-duration) var(--animation-easing),\n    transform var(--animation-duration) var(--animation-easing),\n    width var(--animation-duration) var(--animation-easing),\n    height var(--animation-duration) var(--animation-easing);\n}\n\n.destination[data-reserved-placement] {\n  background-color: var(--_placement-reserved-background);\n}\n\n.destination[data-cue-clipped] {\n  visibility: hidden;\n}\n\n.destination[data-drop-blocked] {\n  --border: 2px solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n.destination nve-icon {\n  position: absolute;\n  inset: var(--nve-ref-space-sm) auto auto var(--nve-ref-space-sm);\n}\n\n.carried {\n  position: absolute;\n  z-index: 8;\n  pointer-events: none;\n  white-space: nowrap;\n  --background: var(--nve-sys-layer-container-background);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-sys-accent-secondary-background);\n}\n\n.scope-boundary {\n  position: absolute;\n  box-sizing: border-box;\n  pointer-events: none;\n  opacity: 0;\n  box-shadow: inset 0 0 0 var(--nve-ref-border-width-md) var(--nve-sys-accent-secondary-background);\n  z-index: 4;\n}\n\n.scope-boundary[data-active] {\n  opacity: 1;\n}\n\n.order-overlay {\n  position: absolute;\n  pointer-events: none;\n  background: var(--_placement-reserved-background);\n  z-index: 7;\n}\n\n.seam-badge {\n  position: absolute;\n  box-sizing: border-box;\n  display: grid;\n  place-items: center;\n  width: var(--nve-ref-size-800);\n  height: var(--nve-ref-size-800);\n  border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  border-radius: var(--nve-ref-border-radius-full);\n  background: var(--nve-sys-layer-container-background);\n  /* eslint-disable-next-line @nvidia-elements/lint/no-unexpected-css-variable -- The seam badge uses the same accent as the operating outline. */\n  color: var(--nve-sys-accent-secondary-background);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n.seam-badge > svg {\n  display: block;\n  width: var(--nve-ref-size-500);\n  height: var(--nve-ref-size-500);\n  overflow: visible;\n  pointer-events: none;\n}\n\n[internal-host][data-rearranging] .scope-boundary,\n[internal-host][data-rearranging] .group-chrome,\n[internal-host][data-rearranging] ::slotted(nve-workspace-panel) {\n  transition:\n    left var(--animation-duration) var(--animation-easing),\n    top var(--animation-duration) var(--animation-easing),\n    width var(--animation-duration) var(--animation-easing),\n    height var(--animation-duration) var(--animation-easing);\n}\n\n.chrome {\n  animation-duration: var(--animation-duration);\n  animation-timing-function: var(--animation-easing);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  width: max-content;\n}\n\n.gap-probe {\n  position: absolute;\n  width: max(0px, var(--gap));\n  height: 0;\n}\n\n.tab-min-probe {\n  position: absolute;\n  width: max(0px, var(--tab-min-width));\n  height: 0;\n}\n\n.chrome-header {\n  align-items: center;\n  min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));\n  direction: ltr;\n  display: flex;\n}\n\n:host(:fullscreen) {\n  width: 100%;\n  height: 100%;\n  background: var(--nve-sys-layer-container-background);\n}\n\n:host([container='flat']) .tabs {\n  background: transparent;\n}\n\n:host([container='flat']),\n:host([container='full']) {\n  --_workspace-border-radius: var(--nve-ref-border-radius-none);\n}\n"],"mappings":""}