@nvidia-elements/core 2.22.4 → 2.23.0

package/dist/workspace/workspace.examples.json

@@ -0,0 +1,133 @@
+{
+  "element": "nve-workspace",
+  "entrypoint": "@nvidia-elements/core/workspace/workspace.examples.json",
+  "items": [
+    {
+      "id": "workspace",
+      "name": "Default",
+      "template": "<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>\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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "workspace-resizable",
+      "name": "Resizable",
+      "template": "<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>\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",
+      "summary": "Resize groups within a fixed arrangement and switch tabs while retaining application content.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "workspace-rearrangeable",
+      "name": "Rearrangeable",
+      "template": "<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>\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",
+      "summary": "Rearrange panels while keeping tabbed panels together.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "workspace-groupable",
+      "name": "Groupable",
+      "template": "<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  >\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",
+      "summary": "Join panels into tabbed groups or move individual tabs out.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "workspace-closable",
+      "name": "Closable",
+      "template": "<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  >\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",
+      "summary": "Close and reopen panels while retaining their positions and application content.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "workspace-fullscreenable",
+      "name": "Fullscreenable",
+      "template": "<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  >\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",
+      "summary": "Expand a group and its tabs to full screen.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "workspace-custom-panel-actions",
+      "name": "CustomPanelActions",
+      "template": "<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  >\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\" 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\" 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\" 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([...workspace.querySelectorAll(\":scope > nve-workspace-panel\")].map((panel) => [panel.id, panel.querySelector(\"nve-workspace-panel-header\").textContent.trim()]));\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(\n      \"beforetoggle\",\n      (event) => {\n        if (event.newState !== \"open\") return;\n        if (event.target.id === \"a-menu\") panelId = event.source?.value;\n        refresh();\n      },\n      true,\n    );\n    workspace.addEventListener(\"commandavailabilitychange\", refresh);\n    workspace.addEventListener(\"command\", () => dropdownGroup.close());\n  </script>\n</div>\n",
+      "summary": "Add custom menus that use invoker commands to move, split, or close panels and toggle group fullscreen alongside application actions.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "workspace-container",
+      "name": "Container",
+      "template": "<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  >\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  >\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  >\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",
+      "summary": "Match the surrounding layout with inset, flat, or full container framing.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "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.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "theme"
+      ]
+    },
+    {
+      "id": "workspace-save-restore",
+      "name": "SaveRestore",
+      "template": "<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  >\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",
+      "summary": "Save and restore groups, split proportions, and closed panels without recreating application content.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "workspace-constrained-space",
+      "name": "ConstrainedSpace",
+      "template": "<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  >\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",
+      "summary": "The workspace scrolls when panel minimum heights exceed the available space. Increasing its height restores resizing.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "workspace-tab-overflow",
+      "name": "TabOverflow",
+      "template": "<nve-workspace style=\"width: 260px; height: 260px\">\n  <nve-workspace-panel id=\"view-0\">\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\n  <nve-workspace-panel id=\"view-1\">\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\n  <nve-workspace-panel id=\"view-2\">\n    <nve-workspace-panel-header>Terminal</nve-workspace-panel-header>\n    <nve-workspace-panel-content> Terminal content </nve-workspace-panel-content>\n  </nve-workspace-panel>\n\n  <nve-workspace-panel id=\"view-3\">\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\n  <nve-workspace-panel id=\"view-4\">\n    <nve-workspace-panel-header>Project outline</nve-workspace-panel-header>\n    <nve-workspace-panel-content> Project outline content </nve-workspace-panel-content>\n  </nve-workspace-panel>\n\n  <nve-workspace-panel id=\"view-5\">\n    <nve-workspace-panel-header>Recent activity</nve-workspace-panel-header>\n    <nve-workspace-panel-content> Recent activity content </nve-workspace-panel-content>\n  </nve-workspace-panel>\n\n  <nve-workspace-panel id=\"view-6\">\n    <nve-workspace-panel-header>Task history</nve-workspace-panel-header>\n    <nve-workspace-panel-content> Task history content </nve-workspace-panel-content>\n  </nve-workspace-panel>\n\n  <nve-workspace-panel id=\"view-7\">\n    <nve-workspace-panel-header>Search results</nve-workspace-panel-header>\n    <nve-workspace-panel-content> Search results content </nve-workspace-panel-content>\n  </nve-workspace-panel>\n</nve-workspace>\n",
+      "summary": "Keep tab titles readable in a narrow group with scrolling and keyboard selection.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "workspace-gap",
+      "name": "Gap",
+      "template": "<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  >\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",
+      "summary": "Adjust spacing between groups with --gap. Zero joins the group frames.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/workspace/workspace.js

@@ -0,0 +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)}";
+export { e as default };
+
+//# sourceMappingURL=workspace.js.map

package/dist/workspace/workspace.js.map

@@ -0,0 +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":""}

package/dist/workspace/workspace.types.d.ts

@@ -0,0 +1,3 @@
+export interface WorkspaceAnimationOptions {
+    readonly duration?: number;
+}