@labpane/os 0.0.0-stage → 1.0.0

package/dist/index.js

@@ -0,0 +1,1968 @@
+// workspace.tsx
+import {
+  useEffect as useEffect2,
+  useId as useId2,
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef5,
+  useState as useState4
+} from "react";
+
+// context.ts
+import {
+  createContext,
+  useContext,
+  useMemo
+} from "react";
+var WorkspaceId = createContext("");
+var densityPresets = {
+  comfortable: {
+    value: 100,
+    width: 192,
+    height: 44,
+    contentHeight: 36,
+    columnGap: 8,
+    rowGap: 8,
+    logoSize: 24,
+    borderWidth: 1
+  },
+  compact: {
+    value: 50,
+    width: 168,
+    height: 34,
+    contentHeight: 30,
+    columnGap: 6,
+    rowGap: 4,
+    logoSize: 20,
+    borderWidth: 0.75
+  },
+  dense: {
+    value: 0,
+    width: 152,
+    height: 26,
+    contentHeight: 24,
+    columnGap: 4,
+    rowGap: 2,
+    logoSize: 16,
+    borderWidth: 0.5
+  }
+};
+function densitySize(density) {
+  const value = Number.isFinite(density) ? Math.max(0, Math.min(100, density)) : 100;
+  const { dense, compact, comfortable } = densityPresets;
+  const [from, to] = value < compact.value ? [dense, compact] : [compact, comfortable];
+  const amount = (value - from.value) / (to.value - from.value);
+  return Object.fromEntries(
+    Object.keys(from).map((key) => [
+      key,
+      from[key] + (to[key] - from[key]) * amount
+    ])
+  );
+}
+var WorkspaceDensity = createContext(100);
+var fitTabWidth = (width, available, count) => Math.min(width, Math.max(128, (available - 16) / Math.max(1, count)));
+function useTabSize() {
+  const density = useContext(WorkspaceDensity);
+  return useMemo(() => densitySize(density), [density]);
+}
+function useWorkspaceIds() {
+  const prefix = useContext(WorkspaceId);
+  return {
+    tab: (key) => `${prefix}-tab-${encodeURIComponent(key)}`,
+    panel: (key) => `${prefix}-panel-${encodeURIComponent(key)}`
+  };
+}
+
+// surface.tsx
+import {
+  Fragment,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+
+// layout.ts
+var gutter = { x: 8, y: 8 };
+var minimum = { x: 280, y: 180 };
+var isSplit = (node) => "axis" in node;
+var panes = (node) => isSplit(node) ? [...panes(node.first), ...panes(node.second)] : [node];
+var clamp = (n, low, high) => Math.max(low, Math.min(high, n));
+function updateLayout(node, id, change) {
+  if (node.id === id) return change(node);
+  if (!isSplit(node)) return node;
+  const first = updateLayout(node.first, id, change), second = updateLayout(node.second, id, change);
+  return first === node.first && second === node.second ? node : { ...node, first, second };
+}
+function reconcileLayout(node, keys, active, preferred) {
+  if (!keys.length)
+    return !isSplit(node) && !node.tabs.length && !node.active ? node : { id: "primary", tabs: [] };
+  const seen = /* @__PURE__ */ new Set();
+  const clean = (node2) => {
+    if (isSplit(node2)) {
+      const first = clean(node2.first), second = clean(node2.second);
+      return first && second ? first === node2.first && second === node2.second ? node2 : { ...node2, first, second } : first ?? second;
+    }
+    const tabs = node2.tabs.filter(
+      (key) => keys.includes(key) && !seen.has(key) && !!seen.add(key)
+    );
+    if (!tabs.length) return void 0;
+    const selected = tabs.includes(active ?? "") ? active : tabs.includes(node2.active ?? "") ? node2.active : tabs[0];
+    return tabs.length === node2.tabs.length && selected === node2.active ? node2 : { ...node2, tabs, active: selected };
+  };
+  let next = clean(node) ?? { id: "primary", tabs: [] };
+  const missing = keys.filter((key) => !seen.has(key));
+  if (missing.length) {
+    const leaves = panes(next), target = leaves.find((p) => p.id === preferred) ?? leaves[0];
+    next = updateLayout(next, target.id, (node2) => ({
+      ...node2,
+      tabs: [...target.tabs, ...missing],
+      active: missing.includes(active ?? "") ? active : target.active ?? missing[0]
+    }));
+  }
+  return next;
+}
+function restoreLayout(value, keys) {
+  const ids = /* @__PURE__ */ new Set();
+  function read(value2, depth = 0) {
+    const n = value2;
+    if (!n || depth > 12 || typeof n.id !== "string" || !n.id || ids.has(n.id))
+      throw Error("Invalid layout");
+    ids.add(n.id);
+    if (n.axis === "x" || n.axis === "y") {
+      if (typeof n.ratio !== "number" || !Number.isFinite(n.ratio))
+        throw Error("Invalid ratio");
+      return {
+        id: n.id,
+        axis: n.axis,
+        ratio: clamp(n.ratio, 0.05, 0.95),
+        first: read(n.first, depth + 1),
+        second: read(n.second, depth + 1)
+      };
+    }
+    if (!Array.isArray(n.tabs) || n.tabs.some((key) => typeof key !== "string"))
+      throw Error("Invalid tabs");
+    return {
+      id: n.id,
+      tabs: n.tabs,
+      active: typeof n.active === "string" ? n.active : void 0
+    };
+  }
+  try {
+    return reconcileLayout(read(JSON.parse(value ?? "null")), keys);
+  } catch {
+    return { id: "primary", tabs: keys, active: keys[0] };
+  }
+}
+var newId = () => crypto.randomUUID?.() ?? Array.from(
+  crypto.getRandomValues(new Uint8Array(16)),
+  (byte) => byte.toString(16).padStart(2, "0")
+).join("");
+function dockTab(layout, key, target, edge, index) {
+  const leaves = panes(layout), source = leaves.find((p) => p.tabs.includes(key)), destination = leaves.find((p) => p.id === target);
+  if (!source || !destination || source === destination && (!edge || source.tabs.length === 1))
+    return layout;
+  let next = updateLayout(layout, source.id, (node) => {
+    const pane = node, index2 = pane.tabs.indexOf(key), tabs = pane.tabs.filter((k) => k !== key);
+    return {
+      ...pane,
+      tabs,
+      active: pane.active === key ? tabs[Math.min(index2, tabs.length - 1)] : pane.active
+    };
+  });
+  next = updateLayout(next, target, (node) => {
+    const pane = node;
+    if (!edge) {
+      const tabs = [...pane.tabs];
+      tabs.splice(index ?? tabs.length, 0, key);
+      return { ...pane, tabs, active: key };
+    }
+    const added = { id: newId(), tabs: [key], active: key };
+    return {
+      id: newId(),
+      axis: edge === "bottom" ? "y" : "x",
+      ratio: edge === "bottom" ? 2 / 3 : 0.5,
+      first: edge === "left" ? added : pane,
+      second: edge === "left" ? pane : added
+    };
+  });
+  return reconcileLayout(
+    next,
+    leaves.flatMap((p) => p.tabs),
+    key
+  );
+}
+function minimumSize(node, gap = gutter) {
+  if (!isSplit(node)) return minimum;
+  const a = minimumSize(node.first, gap), b = minimumSize(node.second, gap);
+  return node.axis === "x" ? { x: a.x + b.x + gap.x, y: Math.max(a.y, b.y) } : { x: Math.max(a.x, b.x), y: a.y + b.y + gap.y };
+}
+function layoutBoxes(layout, width, height, gap = gutter) {
+  const leaves = [], dividers = [];
+  function walk(node, box) {
+    if (!isSplit(node)) {
+      leaves.push({ ...box, pane: node });
+      return;
+    }
+    const axis = node.axis, dimension = axis === "x" ? "width" : "height", spacing = gap[axis], size = Math.max(1, box[dimension] - spacing);
+    const low = minimumSize(node.first, gap)[axis] / size, high = 1 - minimumSize(node.second, gap)[axis] / size;
+    const ratio = clamp(node.ratio, low, high), distance = clamp(Math.round(size * ratio), size * low, size * high);
+    const first = { ...box, [dimension]: distance };
+    const second = {
+      ...box,
+      [axis]: box[axis] + distance + spacing,
+      [dimension]: size - distance
+    };
+    dividers.push({
+      ...box,
+      [axis]: box[axis] + distance,
+      [dimension]: spacing,
+      split: node,
+      bounds: box,
+      ratio,
+      low,
+      high
+    });
+    walk(node.first, first);
+    walk(node.second, second);
+  }
+  const required = minimumSize(layout, gap);
+  walk(layout, {
+    x: 0,
+    y: 0,
+    width: Math.max(width, required.x),
+    height: Math.max(height, required.y)
+  });
+  return { leaves, dividers };
+}
+function dropRegion(box, edge, gap = gutter) {
+  if (edge === "left") return { ...box, width: (box.width - gap.x) / 2 };
+  if (edge === "right")
+    return {
+      ...box,
+      x: box.x + (box.width + gap.x) / 2,
+      width: (box.width - gap.x) / 2
+    };
+  if (edge === "bottom") {
+    const height = Math.max(minimum.y, (box.height - gap.y) / 3);
+    return { ...box, y: box.y + box.height - height, height };
+  }
+  return box;
+}
+
+// surface.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var position = (box) => ({
+  left: box.x,
+  top: box.y,
+  width: box.width,
+  height: box.height
+});
+function WorkspaceSurface({
+  layout,
+  change,
+  header,
+  content,
+  menu
+}) {
+  const ids = useWorkspaceIds();
+  const {
+    height: tabHeight,
+    width: tabWidth,
+    columnGap,
+    rowGap
+  } = useTabSize();
+  const gutter2 = { x: columnGap, y: rowGap };
+  const board = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [preview, setPreview] = useState();
+  const previewRef = useRef(void 0);
+  const [resizing, setResizing] = useState(false);
+  const geometry = [
+    size.width,
+    size.height,
+    tabHeight,
+    columnGap,
+    rowGap
+  ].join();
+  const previousGeometry = useRef(geometry);
+  const stableGeometry = previousGeometry.current === geometry;
+  useLayoutEffect(() => {
+    previousGeometry.current = geometry;
+  }, [geometry]);
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setSize({ width, height });
+    });
+    observer.observe(board.current);
+    return () => observer.disconnect();
+  }, []);
+  const { leaves, dividers } = layoutBoxes(
+    layout,
+    size.width,
+    size.height,
+    gutter2
+  ), required = minimumSize(layout, gutter2);
+  const show = (next) => {
+    if (previewRef.current?.pane === next?.pane && previewRef.current?.edge === next?.edge && previewRef.current?.index === next?.index && previewRef.current?.key === next?.key)
+      return;
+    previewRef.current = next;
+    setPreview(next);
+  };
+  const canSplit = (box, edge) => edge === "bottom" ? box.height >= minimum.y * 2 + rowGap : box.width >= minimum.x * 2 + columnGap;
+  const docking = {
+    paneCount: leaves.length,
+    next: (key) => {
+      const index = leaves.findIndex((p) => p.pane.tabs.includes(key));
+      change(
+        dockTab(layout, key, leaves[(index + 1) % leaves.length].pane.id)
+      );
+    },
+    move: ({ key, x, y, detached: wasDetached }) => {
+      const bounds = board.current.getBoundingClientRect(), localX = x - bounds.left, localY = y - bounds.top;
+      const target = leaves.find(
+        (p) => localX >= p.x && localX <= p.x + p.width && localY >= p.y && localY <= p.y + p.height
+      );
+      const source = leaves.find((p) => p.pane.tabs.includes(key));
+      const margin = wasDetached ? 8 : 24;
+      const detached = localY > source.y + tabHeight + margin || localY < source.y - margin || !!target && (localX < source.x - margin || localX > source.x + source.width + margin);
+      if (!detached) {
+        show();
+        return false;
+      }
+      let edge;
+      if (target && localY > target.y + tabHeight) {
+        if (localY > target.y + target.height * 0.72) edge = "bottom";
+        else if (localX < target.x + target.width * 0.28) edge = "left";
+        else if (localX > target.x + target.width * 0.72) edge = "right";
+      }
+      const valid = target && (!edge || canSplit(target, edge)) && (!target.pane.tabs.includes(key) || !!edge && target.pane.tabs.length > 1);
+      let index;
+      if (valid && !edge) {
+        const nav = board.current.querySelector(
+          `[data-pane-header="${CSS.escape(target.pane.id)}"] [role="tablist"]`
+        );
+        const header2 = nav?.closest("[data-pane-header]");
+        index = target.pane.tabs.length;
+        if (nav && header2 && localY <= target.y + tabHeight) {
+          const strip = nav.parentElement;
+          const inset = strip.getBoundingClientRect().left - header2.getBoundingClientRect().left;
+          const trailing = strip.parentElement.nextElementSibling?.getBoundingClientRect().width ?? 0;
+          const available = target.width - inset - trailing - 4;
+          const width = fitTabWidth(
+            tabWidth,
+            available,
+            target.pane.tabs.length + 1
+          );
+          const overflow = width * (target.pane.tabs.length + 1) + 16 - available;
+          const arrows = overflow > 1 ? Math.min(28, tabHeight) : 0;
+          const scroll = Math.min(
+            nav.scrollLeft,
+            Math.max(0, overflow + arrows * 2)
+          );
+          index = Math.max(
+            0,
+            Math.min(
+              target.pane.tabs.length,
+              Math.round(
+                (localX - target.x - inset - arrows + scroll - 8) / width
+              )
+            )
+          );
+        }
+      }
+      show(valid ? { pane: target.pane.id, key, edge, index } : { key });
+      return true;
+    },
+    drop: () => {
+      const target = previewRef.current;
+      show();
+      if (!target?.pane) return false;
+      change(
+        dockTab(layout, target.key, target.pane, target.edge, target.index)
+      );
+      return true;
+    },
+    cancel: () => show(),
+    split: (key, edge) => {
+      const target = leaves.find((p) => p.pane.tabs.includes(key));
+      if (!target || target.pane.tabs.length < 2 || !canSplit(target, edge))
+        return false;
+      change(dockTab(layout, key, target.pane.id, edge));
+      return true;
+    }
+  };
+  const lifted = preview?.key;
+  const regions = leaves.map(({ pane, ...box }) => {
+    if (lifted && pane.tabs.includes(lifted)) {
+      const remaining = pane.tabs.filter((key) => key !== lifted);
+      pane = {
+        ...pane,
+        active: remaining[Math.min(pane.tabs.indexOf(lifted), remaining.length - 1)]
+      };
+    }
+    if (preview?.pane !== pane.id || !preview.edge) return { pane, box };
+    const drop = dropRegion(box, preview.edge, gutter2);
+    if (preview.edge === "left")
+      return {
+        pane,
+        box: { ...box, x: drop.x + drop.width + columnGap, width: drop.width }
+      };
+    if (preview.edge === "right")
+      return { pane, box: { ...box, width: drop.width } };
+    return { pane, box: { ...box, height: drop.y - box.y - rowGap } };
+  });
+  const transition = !resizing && size.width > 0 && stableGeometry;
+  const top = Math.min(...leaves.map((leaf) => leaf.y));
+  const topRight = leaves.filter((leaf) => leaf.y === top).reduce(
+    (best, leaf) => !best || leaf.x > best.x ? leaf : best,
+    void 0
+  )?.pane.id;
+  return /* @__PURE__ */ jsx("div", { className: "lab-surface", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: board,
+      className: "lab-board",
+      style: {
+        minWidth: required.x,
+        minHeight: required.y
+      },
+      children: [
+        regions.map(({ pane, box }, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-pane-header": pane.id,
+            className: "lab-pane-header",
+            style: {
+              ...position({ ...box, height: tabHeight }),
+              transitionDuration: transition ? "var(--workspace-duration, 180ms)" : "0ms"
+            },
+            children: header(
+              pane,
+              index === 0,
+              pane.id === topRight,
+              {
+                ...docking,
+                insertion: preview?.pane === pane.id ? preview.index : void 0
+              },
+              (key = pane.active) => board.current?.querySelector(
+                key ? `[id="${CSS.escape(ids.panel(key))}"]` : `[data-pane-sheet="${CSS.escape(pane.id)}"]:not([hidden]):not([data-drag-content])`
+              ) ?? null
+            )
+          },
+          pane.id
+        )),
+        content(regions, transition, lifted),
+        dividers.map(({ split, bounds, ratio, low, high, ...box }) => {
+          const axis = split.axis, horizontal = axis === "x", dimension = horizontal ? "width" : "height";
+          const primary = panes(split.first).filter((p) => p.active);
+          const resize = (value) => change(
+            updateLayout(layout, split.id, (node) => ({
+              ...node,
+              ratio: Math.max(low, Math.min(high, value))
+            }))
+          );
+          const target = /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              "aria-label": horizontal ? "Resize columns" : "Resize rows",
+              "aria-labelledby": primary.map((p) => ids.tab(p.active)).join(" "),
+              "aria-controls": primary.map((p) => ids.panel(p.active)).join(" "),
+              "aria-valuetext": `${Math.round(ratio * 100)}% ${horizontal ? "width" : "height"}`,
+              title: menu ? "Drag to resize, use arrow keys, or open resize actions with right-click or Shift+F10" : "Drag to resize or use arrow keys",
+              "aria-orientation": horizontal ? "vertical" : "horizontal",
+              "aria-valuenow": Math.round(ratio * 100),
+              "aria-valuemin": Math.round(low * 100),
+              "aria-valuemax": Math.round(high * 100),
+              tabIndex: 0,
+              className: "lab-divider",
+              style: position({
+                ...box,
+                [axis]: box[axis] + gutter2[axis] / 2 - 12,
+                [dimension]: 24
+              }),
+              onDoubleClick: () => resize(horizontal ? 0.5 : 2 / 3),
+              onPointerDown: (event) => {
+                if (event.button !== 0) return;
+                event.preventDefault();
+                event.currentTarget.setPointerCapture(event.pointerId);
+                setResizing(true);
+              },
+              onPointerMove: (event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId))
+                  return;
+                const b = board.current.getBoundingClientRect();
+                const coordinate = horizontal ? event.clientX - b.left : event.clientY - b.top;
+                resize(
+                  (coordinate - bounds[axis]) / (bounds[dimension] - gutter2[axis])
+                );
+              },
+              onLostPointerCapture: () => setResizing(false),
+              onKeyDown: (event) => {
+                const step = event.shiftKey ? 0.1 : 0.02;
+                const values = {
+                  [horizontal ? "ArrowLeft" : "ArrowUp"]: ratio - step,
+                  [horizontal ? "ArrowRight" : "ArrowDown"]: ratio + step,
+                  Home: low,
+                  End: high
+                };
+                const value = values[event.key];
+                if (value === void 0) return;
+                event.preventDefault();
+                resize(value);
+              }
+            }
+          );
+          return /* @__PURE__ */ jsx(Fragment, { children: menu ? menu(target, [
+            {
+              label: horizontal ? "Narrower" : "Shorter",
+              onSelect: () => resize(ratio - 0.1)
+            },
+            {
+              label: horizontal ? "Wider" : "Taller",
+              onSelect: () => resize(ratio + 0.1)
+            },
+            {
+              label: "Reset size",
+              onSelect: () => resize(horizontal ? 0.5 : 2 / 3)
+            }
+          ]) : target }, split.id);
+        }),
+        /* @__PURE__ */ jsx("span", { role: "status", className: "lab-sr-only", children: preview?.pane && (preview.edge ? `Split ${preview.edge}` : "Move tab here") })
+      ]
+    }
+  ) });
+}
+
+// toolbar.tsx
+import { useState as useState3 } from "react";
+
+// tabs.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+// icons.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var icon = (strokeWidth, ...paths) => function Icon(props) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: paths.map((d) => /* @__PURE__ */ jsx2("path", { d }, d))
+    }
+  );
+};
+var ChevronLeftIcon = icon(4 / 3, "M10 4 6 8l4 4");
+var ChevronRightIcon = icon(4 / 3, "m6 4 4 4-4 4");
+var XIcon = icon(7 / 6, "m12 4-8 8", "m4 4 8 8");
+
+// frame.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var reach = 16;
+var shoulder = [
+  [0, 43.5],
+  [8.56, 43.5],
+  [13, 30],
+  [16, 21],
+  [19, 12],
+  [22, 8],
+  [30, 8]
+];
+function corner(gap) {
+  if (gap >= reach) return shoulder;
+  const wall = 0.5 - gap, radius = Math.max(0, gap - 0.5);
+  const source = [
+    [wall, 59],
+    [wall, 50.44],
+    [wall + radius * 0.4477, 43.5],
+    [wall + radius, 43.5],
+    [wall + radius * 1.5523, 43.5],
+    ...shoulder.slice(2)
+  ];
+  const target = [
+    [wall, 59],
+    [wall, 47.33],
+    [wall, 28.4183],
+    [wall, 24],
+    [wall, 19.5817],
+    [wall + 1.7909, 15.5817],
+    [wall + 4.6863, 12.6863],
+    [wall + 7.5817, 9.7909],
+    [wall + 11.5817, 8],
+    [wall + 16, 8]
+  ];
+  const t = 1 - gap / reach, amount = t * t * (3 - 2 * t);
+  return source.map(([x, y], i) => [
+    x + (target[i][0] - x) * amount,
+    y + (target[i][1] - y) * amount
+  ]);
+}
+function tabShape(leftGap = reach, rightGap = reach, size = densityPresets.comfortable) {
+  const width = size.width + 16;
+  const left = corner(leftGap);
+  const right = corner(rightGap).map(([x, y]) => [width - x, y]).reverse();
+  const coords = ([x, y]) => [
+    x,
+    size.height - 0.5 + (y - 43.5) * (y < 43.5 ? (size.contentHeight - 0.5) / 35.5 : 1)
+  ].map((v) => Math.round(v * 1e3) / 1e3).join(" ");
+  const curves = (points) => points.slice(1).map((p, i) => (i % 3 === 0 ? " C" : " ") + coords(p)).join("");
+  const outline = `M${coords(left[0])}${curves(left)} H${right[0][0]}${curves(right)}`;
+  return [
+    `${outline} V${size.height + (leftGap < reach || rightGap < reach ? 15 : 0)} H${left[0][0]} Z`,
+    outline
+  ];
+}
+function paneShape(leftGap, rightGap, bottom, morph = true, size = densityPresets.comfortable) {
+  const width = size.width + 16, baseline = size.height - 0.5, cornerBottom = size.height + 15;
+  const left = 0.5 - leftGap, right = width + rightGap - 0.5;
+  const rightCorner = morph && rightGap < reach ? "" : ` H${right - 15.5} A15.5 15.5 0 0 1 ${right} ${cornerBottom}`;
+  const leftCorner = morph && leftGap < reach ? "" : ` A15.5 15.5 0 0 1 ${left + 15.5} ${baseline} H0`;
+  return `${tabShape(morph ? leftGap : reach, morph ? rightGap : reach, size)[1]}${rightCorner} V${bottom - 15.5} A15.5 15.5 0 0 1 ${right - 15.5} ${bottom} H${left + 15.5} A15.5 15.5 0 0 1 ${left} ${bottom - 15.5} V${cornerBottom}${leftCorner} Z`;
+}
+function TabSurface({
+  selected,
+  keyboardFocus = false,
+  width
+}) {
+  const density = useTabSize(), size = { ...density, width: width ?? density.width }, viewWidth = size.width + 16;
+  const [fill, outline] = tabShape(void 0, void 0, size);
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: `0 0 ${viewWidth} ${size.height}`,
+      strokeWidth: size.borderWidth,
+      preserveAspectRatio: "none",
+      className: "lab-tab-surface",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: fill,
+            className: "lab-tab-fill",
+            "data-selected": selected || void 0
+          }
+        ),
+        /* @__PURE__ */ jsx3("path", { d: outline, "data-tab-outline": true, className: "lab-outline" }),
+        keyboardFocus && /* @__PURE__ */ jsx3("path", { d: outline, className: "lab-tab-focus" }),
+        !selected && /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: `M0 ${size.height - 0.5} H${viewWidth}`,
+            className: "lab-outline"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// drag-content.ts
+import { useEffect, useRef as useRef2 } from "react";
+function useDragContent() {
+  const generation = useRef2(0);
+  const current = useRef2(void 0);
+  const release = (animate = true) => {
+    const preview = current.current;
+    if (!preview) return;
+    current.current = void 0;
+    const version = ++generation.current;
+    const { element, inert } = preview;
+    const from = element.getBoundingClientRect();
+    element.removeAttribute("data-drag-content");
+    element.inert = inert;
+    element.style.transition = "none";
+    for (const name of ["x", "y", "width", "height"])
+      element.style.removeProperty(`--lab-drag-${name}`);
+    requestAnimationFrame(() => {
+      if (version !== generation.current) return;
+      const to = element.getBoundingClientRect();
+      element.style.removeProperty("transition");
+      if (!animate || !element.isConnected || !to.width || matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return;
+      const resized = Math.abs(from.width - to.width) > 0.5 || Math.abs(from.height - to.height) > 0.5;
+      element.animate(
+        [
+          {
+            transform: `translate(${from.left - to.left}px, ${from.top - to.top}px)`,
+            width: `${from.width}px`,
+            height: `${from.height}px`,
+            filter: "blur(0)",
+            opacity: 1
+          },
+          {
+            filter: resized ? "blur(3px)" : "blur(0)",
+            opacity: resized ? 0.85 : 1,
+            offset: 0.35
+          },
+          {
+            transform: "none",
+            width: `${to.width}px`,
+            height: `${to.height}px`,
+            filter: "blur(0)",
+            opacity: 1
+          }
+        ],
+        { duration: 220, easing: "cubic-bezier(.2,.8,.2,1)" }
+      );
+    });
+  };
+  useEffect(() => () => release(false), []);
+  return {
+    release,
+    lift(element, tab, fallback) {
+      if (current.current?.element !== element) {
+        release(false);
+        generation.current++;
+        element.getAnimations().forEach((animation) => animation.cancel());
+        const bounds = element.hidden ? fallback : element.getBoundingClientRect();
+        current.current = {
+          element,
+          width: bounds.width,
+          height: bounds.height,
+          offset: Math.max(
+            8,
+            Math.min(
+              tab.getBoundingClientRect().left - bounds.left,
+              bounds.width - tab.offsetWidth - 8
+            )
+          ),
+          inert: element.inert
+        };
+        for (const [name, value] of Object.entries({
+          width: `${bounds.width}px`,
+          height: `${bounds.height}px`
+        }))
+          element.style.setProperty(`--lab-drag-${name}`, String(value));
+        element.inert = true;
+        element.setAttribute("data-drag-content", "");
+      }
+      return current.current;
+    },
+    move(x, y) {
+      const element = current.current?.element;
+      element?.style.setProperty("--lab-drag-x", `${x}px`);
+      element?.style.setProperty("--lab-drag-y", `${y}px`);
+    }
+  };
+}
+
+// tabs.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var motion = { duration: 160, easing: "cubic-bezier(.2,.8,.2,1)" };
+function WorkspaceTabs({
+  items,
+  active,
+  onClose,
+  onDuplicate,
+  onReorder,
+  onSelect,
+  dragBoundary,
+  surface,
+  docking,
+  menu
+}) {
+  const ids = useWorkspaceIds();
+  const content = useDragContent();
+  const density = useTabSize();
+  const [metrics, setMetrics] = React.useState({
+    available: Infinity,
+    overflow: false,
+    left: false,
+    right: false
+  });
+  const measured = React.useRef(metrics);
+  const { available } = metrics;
+  const size = {
+    ...density,
+    width: fitTabWidth(
+      density.width,
+      available,
+      items.length + (docking.insertion === void 0 ? 0 : 1)
+    )
+  }, { width: tabWidth, height, contentHeight } = size, width = tabWidth + 16;
+  const links = items.map(({ key, label }) => [key, label]);
+  const tabOrder = JSON.stringify(items.map(({ key }) => key));
+  const labels = new Map(links);
+  const navRef = React.useRef(null);
+  const stripRef = React.useRef(null);
+  const helpId = React.useId();
+  const menuFocus = React.useRef(void 0);
+  const drag = React.useRef(void 0);
+  const [dragging, setDragging] = React.useState();
+  const [pointerFocus, setPointerFocus] = React.useState(false);
+  const [announcement, announce] = React.useState("");
+  const ghostRef = React.useRef(null);
+  const ghost = React.useCallback((element) => {
+    ghostRef.current = element;
+    if (element) element.inert = true;
+  }, []);
+  const frameRef = React.useRef(null);
+  const maskedSheet = React.useRef(null);
+  const maskedOutline = React.useRef(null);
+  const restoreFrame = () => {
+    maskedSheet.current?.style.removeProperty("border-color");
+    maskedOutline.current?.style.removeProperty("visibility");
+    maskedSheet.current = null;
+    maskedOutline.current = null;
+  };
+  const settling = React.useRef(void 0);
+  const positions = React.useRef({
+    order: "",
+    tabs: /* @__PURE__ */ new Map()
+  });
+  const frame = React.useRef(0);
+  const suppressClick = React.useRef(false);
+  const tabElement = (key) => navRef.current?.querySelector(
+    `a[data-tab="${CSS.escape(key)}"]`
+  )?.parentElement;
+  const reveal = (key = active) => {
+    const nav = navRef.current, tab = tabElement(key);
+    if (!nav || !tab || drag.current?.moved || docking.insertion !== void 0)
+      return;
+    nav.scrollLeft = Math.max(
+      tab.offsetLeft + tab.offsetWidth + 8 - nav.clientWidth,
+      Math.min(nav.scrollLeft, tab.offsetLeft - 8)
+    );
+  };
+  const draw = () => {
+    const current = drag.current, ghost2 = ghostRef.current, nav = navRef.current, bounds = dragBoundary?.getBoundingClientRect(), floating = !!ghost2 && !!current?.detached, tab = (floating ? null : ghost2) ?? tabElement(active), frame2 = frameRef.current;
+    if (ghost2 && current?.moved && bounds) {
+      const sheet2 = surface(current.key);
+      const preview = floating && sheet2 ? content.lift(sheet2, ghost2, current.sheet) : void 0;
+      const left2 = floating ? 8 : bounds.left + 8, right2 = floating ? innerWidth - 8 : bounds.right - 8;
+      const x2 = Math.max(
+        left2,
+        Math.min(current.x - current.offset, right2 - ghost2.offsetWidth)
+      );
+      const y = floating ? Math.max(
+        0,
+        Math.min(current.y - current.offsetY, innerHeight - height - 8)
+      ) : nav.getBoundingClientRect().top;
+      ghost2.style.left = `${x2}px`;
+      ghost2.style.top = `${y}px`;
+      if (preview) {
+        content.move(x2 - preview.offset, y + height - 1);
+        const left3 = preview.offset - 8, right3 = preview.width - preview.offset - tabWidth - 8;
+        ghost2.querySelector("svg > path").setAttribute("d", tabShape(left3, right3, size)[0]);
+        const outline = ghost2.querySelector("[data-tab-outline]");
+        outline.style.visibility = "visible";
+        outline.setAttribute(
+          "d",
+          paneShape(left3, right3, height + preview.height - 1.5, true, size)
+        );
+      } else content.release();
+    }
+    restoreFrame();
+    if (!tab || !bounds || !frame2) {
+      if (frame2) frame2.style.visibility = "hidden";
+      return;
+    }
+    const box = tab.getBoundingClientRect();
+    const sheet = surface(), sheetBox = sheet?.getBoundingClientRect();
+    const attached = Math.abs(box.top - bounds.top) < 0.5 && !!sheet;
+    const left = attached ? box.left - 8 - sheetBox.left : 16, right = attached ? sheetBox.right - box.right - 8 : 16;
+    if (ghost2 && !floating) {
+      const [fill, outline] = tabShape(
+        Math.max(0, left),
+        Math.max(0, right),
+        size
+      );
+      ghost2.querySelector("svg > path").setAttribute("d", fill);
+      ghost2.querySelector("[data-tab-outline]").setAttribute("d", outline);
+    }
+    const stroke = tab.querySelector("[data-tab-outline]");
+    stroke.style.visibility = attached ? "hidden" : "visible";
+    maskedOutline.current = stroke;
+    frame2.style.visibility = attached ? "visible" : "hidden";
+    if (!attached) return;
+    sheet.style.borderColor = "transparent";
+    maskedSheet.current = sheet;
+    const x = box.left - 8, bottom = sheetBox.bottom - box.top - 0.5;
+    const origin = frame2.parentElement.getBoundingClientRect();
+    frame2.style.left = `${x - origin.left}px`;
+    frame2.style.top = `${box.top - origin.top}px`;
+    const viewport = ghost2 && !floating ? sheetBox : nav.getBoundingClientRect(), clipLeft = Math.max(-left, viewport.left - x), clipRight = Math.min(width + right, viewport.right - x);
+    frame2.style.clipPath = `polygon(${clipLeft}px 0px, ${clipRight}px 0px, ${clipRight}px ${height - 1}px, ${width + right}px ${height - 1}px, ${width + right}px ${bottom + 1}px, ${-left}px ${bottom + 1}px, ${-left}px ${height - 1}px, ${clipLeft}px ${height - 1}px)`;
+    frame2.querySelector("path").setAttribute(
+      "d",
+      paneShape(left, right, bottom, !!ghost2 && !floating, size) + ((!ghost2 || floating) && clipLeft > 0 ? ` M0 ${height - 0.5} H${Math.min(width, clipLeft)}` : "") + ((!ghost2 || floating) && clipRight < width ? ` M${Math.max(0, clipRight)} ${height - 0.5} H${width}` : "")
+    );
+  };
+  const animate = (element, from) => {
+    const transform = getComputedStyle(element).transform;
+    if (transform !== "none") from += new DOMMatrixReadOnly(transform).m41;
+    element.getAnimations().forEach((animation) => animation.cancel());
+    if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
+      element.animate(
+        [{ transform: `translateX(${from}px)` }, { transform: "none" }],
+        motion
+      );
+  };
+  const settle = (key) => requestAnimationFrame(() => {
+    if (drag.current) return;
+    reveal(key);
+    const ghost2 = ghostRef.current, slot = tabElement(key);
+    if (!ghost2 || !slot || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setDragging(void 0);
+      return;
+    }
+    const from = ghost2.getBoundingClientRect(), to = slot.getBoundingClientRect();
+    settling.current = ghost2.animate(
+      [
+        { transform: "none" },
+        {
+          transform: `translate(${to.left - from.left}px,${to.top - from.top}px)`
+        }
+      ],
+      { ...motion, fill: "forwards" }
+    );
+    settling.current.onfinish = () => setDragging(void 0);
+    latest.current.refresh();
+  });
+  const finish = (cancel = false) => {
+    const current = drag.current;
+    if (!current) return;
+    drag.current = void 0;
+    suppressClick.current = current.moved;
+    content.release();
+    if (cancel) {
+      docking.cancel();
+      if (current.moved) onReorder(current.order);
+      announce("");
+    }
+    if (current.moved && (cancel || !docking.drop())) settle(current.key);
+    else setDragging(void 0);
+  };
+  const move = (from, to) => {
+    const order = links.map(([key]) => key), index = order.indexOf(to);
+    if (from === to || index < 0) return;
+    order.splice(order.indexOf(from), 1);
+    order.splice(index, 0, from);
+    onReorder(order);
+    announce(`${labels.get(from)}: position ${index + 1} of ${order.length}`);
+  };
+  const focusTab = (key) => requestAnimationFrame(() => document.getElementById(ids.tab(key))?.focus());
+  const split = (key, edge) => {
+    announce(
+      docking.split(key, edge) ? `${labels.get(key)} split ${edge}` : "Open another tab or make this pane larger to split it"
+    );
+    focusTab(key);
+  };
+  const keyDown = (event, key, index) => {
+    if (event.key === "Escape") return finish(true);
+    const edges = {
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      ArrowDown: "bottom"
+    };
+    const edge = edges[event.key];
+    if (event.altKey && edge) {
+      if (event.shiftKey) split(key, edge);
+      else if (edge !== "bottom")
+        move(key, items[index + (edge === "left" ? -1 : 1)]?.key ?? key);
+      else return;
+    } else {
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const targets = {
+        Home: 0,
+        End: items.length - 1,
+        ArrowLeft: (index + items.length - 1) % items.length,
+        ArrowRight: (index + 1) % items.length
+      };
+      const target = targets[event.key];
+      if (target !== void 0)
+        document.getElementById(ids.tab(items[target].key))?.focus();
+      else if (event.key === "Delete") onClose(key);
+      else if (event.key === " ") onSelect(key);
+      else return;
+    }
+    event.preventDefault();
+  };
+  const measure = () => {
+    const nav = navRef.current, strip = stripRef.current;
+    if (!nav || !strip || !dragBoundary) return;
+    const trailing = strip.parentElement.nextElementSibling?.getBoundingClientRect().width ?? 0;
+    const availableWidth = Math.max(
+      0,
+      dragBoundary.getBoundingClientRect().right - strip.getBoundingClientRect().left - trailing - 4
+    );
+    const inserting = docking.insertion === void 0 ? 0 : 1;
+    const count = items.length - (drag.current?.detached ? 1 : 0) + inserting;
+    const next = {
+      available: availableWidth,
+      overflow: count * fitTabWidth(density.width, availableWidth, items.length + inserting) + 16 > availableWidth + 1,
+      left: nav.scrollLeft > 1,
+      right: nav.scrollLeft + nav.clientWidth < nav.scrollWidth - 1
+    };
+    const current = measured.current;
+    if (next.available !== current.available || next.overflow !== current.overflow || next.left !== current.left || next.right !== current.right) {
+      measured.current = next;
+      setMetrics(next);
+    }
+  };
+  const follow = () => {
+    const nav = navRef.current;
+    if ([surface(), nav, ghostRef.current].some(
+      (element) => element?.getAnimations({ subtree: element === nav }).some((animation) => animation.playState === "running")
+    ))
+      frame.current = requestAnimationFrame(() => latest.current.refresh());
+  };
+  const refresh = (resized = false) => {
+    cancelAnimationFrame(frame.current);
+    measure();
+    if (resized) reveal();
+    draw();
+    follow();
+  };
+  const latest = React.useRef({ refresh, finish });
+  const detached = !!dragging && !!drag.current?.detached;
+  React.useLayoutEffect(() => {
+    latest.current = { refresh, finish };
+    const order = JSON.stringify([tabOrder, docking.insertion]);
+    const previous = positions.current;
+    positions.current = { order, tabs: /* @__PURE__ */ new Map() };
+    for (const element of navRef.current.children) {
+      const key = element.querySelector("a")?.dataset.tab;
+      if (!key) continue;
+      const left = element.offsetLeft, from = previous.tabs.get(key);
+      if (previous.order !== order && key !== dragging && from !== void 0 && from !== left)
+        animate(element, from - left);
+      positions.current.tabs.set(key, left);
+    }
+    cancelAnimationFrame(frame.current);
+    draw();
+    follow();
+  });
+  React.useLayoutEffect(
+    () => refresh(),
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- the inputs refresh measures
+    [
+      dragBoundary,
+      active,
+      tabOrder,
+      docking.insertion,
+      tabWidth,
+      height,
+      metrics.overflow,
+      dragging,
+      detached
+    ]
+  );
+  React.useLayoutEffect(() => reveal(), [active, tabOrder, docking.insertion]);
+  React.useLayoutEffect(() => {
+    const nav = navRef.current;
+    const resize = () => latest.current.refresh(true), scroll = () => latest.current.refresh(), blur = () => latest.current.finish(true);
+    const wheel = (event) => {
+      if (event.ctrlKey || Math.abs(event.deltaX) >= Math.abs(event.deltaY) || nav.scrollWidth <= nav.clientWidth)
+        return;
+      event.preventDefault();
+      nav.scrollLeft += event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? nav.clientWidth : 1);
+    };
+    const observer = new ResizeObserver(resize);
+    for (const element of [
+      nav,
+      stripRef.current,
+      dragBoundary,
+      ...dragBoundary?.children ?? [],
+      surface()
+    ])
+      if (element) observer.observe(element);
+    addEventListener("scroll", scroll, true);
+    addEventListener("blur", blur);
+    nav.addEventListener("wheel", wheel, { passive: false });
+    return () => {
+      observer.disconnect();
+      removeEventListener("scroll", scroll, true);
+      removeEventListener("blur", blur);
+      nav.removeEventListener("wheel", wheel);
+      cancelAnimationFrame(frame.current);
+      restoreFrame();
+    };
+  }, [active, dragBoundary]);
+  const scrollButton = (direction) => metrics.overflow && /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      className: "lab-scroll",
+      style: { width: Math.min(28, height), height: Math.min(28, height) },
+      "aria-label": direction < 0 ? "Scroll tabs left" : "Scroll tabs right",
+      title: direction < 0 ? "Scroll tabs left" : "Scroll tabs right",
+      disabled: direction < 0 ? !metrics.left : !metrics.right,
+      onClick: () => {
+        const nav = navRef.current;
+        nav.scrollBy({
+          left: direction * Math.max(tabWidth, nav.clientWidth - tabWidth),
+          behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+        });
+      },
+      children: direction < 0 ? /* @__PURE__ */ jsx4(ChevronLeftIcon, { className: "lab-icon" }) : /* @__PURE__ */ jsx4(ChevronRightIcon, { className: "lab-icon" })
+    }
+  );
+  return /* @__PURE__ */ jsxs3("div", { ref: stripRef, className: "lab-tabs", children: [
+    scrollButton(-1),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: navRef,
+        role: links.length ? "tablist" : void 0,
+        "aria-label": links.length ? `Workspace tabs: ${labels.get(active)}` : void 0,
+        "aria-describedby": links.length ? helpId : void 0,
+        onKeyDownCapture: () => setPointerFocus(false),
+        onBlurCapture: () => setPointerFocus(false),
+        onPointerDownCapture: () => {
+          content.release(false);
+          settling.current?.cancel();
+          setDragging(void 0);
+          drag.current = void 0;
+          suppressClick.current = false;
+        },
+        onDragStart: (event) => event.preventDefault(),
+        onClickCapture: (event) => {
+          if (suppressClick.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            suppressClick.current = false;
+          }
+        },
+        onPointerMove: (event) => {
+          const current = drag.current, nav = navRef.current, x = event.clientX;
+          if (!(event.buttons & 1) || !current || !nav) return;
+          if (!current.moved && Math.hypot(x - current.x, event.clientY - current.y) < 6)
+            return;
+          if (!current.moved && active !== current.key) onSelect(current.key);
+          current.moved = true;
+          if (!nav.hasPointerCapture(event.pointerId))
+            nav.setPointerCapture(event.pointerId);
+          setDragging(current.key);
+          event.preventDefault();
+          current.x = x;
+          current.y = event.clientY;
+          current.detached = docking.move(current);
+          if (!current.detached) {
+            const { left, right } = nav.getBoundingClientRect();
+            nav.scrollLeft += x < left + 24 ? -16 : x > right - 24 ? 16 : 0;
+            const index = Math.max(
+              0,
+              Math.min(
+                items.length - 1,
+                Math.floor(
+                  (Math.max(left + 8, Math.min(x, right - 8)) - left + nav.scrollLeft - 8) / tabWidth
+                )
+              )
+            );
+            move(current.key, items[index].key);
+          }
+          refresh();
+        },
+        onPointerUp: () => finish(),
+        onPointerCancel: () => finish(true),
+        className: "lab-tablist",
+        children: [
+          links.map(([key, text], index) => {
+            const actions = [
+              ...onDuplicate ? [
+                {
+                  label: "Duplicate tab",
+                  onSelect: () => {
+                    menuFocus.current = onDuplicate(key);
+                  }
+                }
+              ] : [],
+              {
+                label: "Move left",
+                onSelect: () => move(key, items[index - 1].key),
+                disabled: !index
+              },
+              {
+                label: "Move right",
+                onSelect: () => move(key, items[index + 1].key),
+                disabled: index === items.length - 1
+              },
+              {
+                label: "Move to next pane",
+                onSelect: () => docking.next(key),
+                disabled: docking.paneCount < 2
+              },
+              null,
+              ...["left", "right", "bottom"].map((edge) => ({
+                label: `Split ${edge === "bottom" ? "below" : edge}`,
+                onSelect: () => split(key, edge),
+                disabled: items.length < 2
+              })),
+              null,
+              { label: "Close tab", onSelect: () => onClose(key) }
+            ];
+            const target = /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                role: "presentation",
+                className: "lab-tab",
+                "data-dragging": dragging === key || void 0,
+                style: {
+                  paddingTop: height - contentHeight,
+                  marginRight: dragging === key && drag.current?.detached ? -tabWidth : 0,
+                  marginLeft: docking.insertion === index ? tabWidth : 0,
+                  zIndex: active === key ? links.length + 1 : links.length - index
+                },
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    TabSurface,
+                    {
+                      width: tabWidth,
+                      selected: active === key,
+                      keyboardFocus: !pointerFocus
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs3(
+                    "a",
+                    {
+                      id: ids.tab(key),
+                      role: "tab",
+                      tabIndex: active === key ? 0 : -1,
+                      "aria-selected": active === key,
+                      "aria-controls": ids.panel(key),
+                      href: items[index].href,
+                      "data-tab": key,
+                      style: { width: tabWidth, height: contentHeight },
+                      onClick: (event) => {
+                        const { metaKey, ctrlKey, shiftKey, altKey } = event;
+                        if (metaKey || ctrlKey || shiftKey || altKey) return;
+                        event.preventDefault();
+                        onSelect(key);
+                      },
+                      onFocus: () => onSelect(key),
+                      draggable: false,
+                      title: text,
+                      "aria-keyshortcuts": "ArrowLeft ArrowRight Home End Delete Alt+ArrowLeft Alt+ArrowRight Alt+Shift+ArrowLeft Alt+Shift+ArrowRight Alt+Shift+ArrowDown",
+                      onKeyDown: (event) => keyDown(event, key, index),
+                      onPointerDown: (event) => {
+                        if (event.button !== 0 || !event.isPrimary) return;
+                        if (event.pointerType === "mouse") event.preventDefault();
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                        event.currentTarget.focus({ preventScroll: true });
+                        setPointerFocus(true);
+                        const box = event.currentTarget.parentElement.getBoundingClientRect();
+                        drag.current = {
+                          key,
+                          offset: event.clientX - box.left,
+                          offsetY: event.clientY - box.top,
+                          sheet: surface().getBoundingClientRect(),
+                          x: event.clientX,
+                          y: event.clientY,
+                          detached: false,
+                          moved: false,
+                          order: links.map(([path]) => path)
+                        };
+                      },
+                      className: "lab-tab-link",
+                      children: [
+                        items[index].icon && /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "lab-tab-icon", children: items[index].icon }),
+                        /* @__PURE__ */ jsx4("span", { className: "lab-tab-label", children: text })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(CloseTab, { label: text, onClick: () => onClose(key) })
+                ]
+              }
+            );
+            return /* @__PURE__ */ jsx4(React.Fragment, { children: menu ? menu(
+              target,
+              actions,
+              () => {
+                focusTab(menuFocus.current ?? key);
+                menuFocus.current = void 0;
+              },
+              key
+            ) : target }, key);
+          }),
+          docking.insertion === items.length && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: { width: tabWidth },
+              className: "lab-tab-placeholder"
+            }
+          )
+        ]
+      }
+    ),
+    scrollButton(1),
+    /* @__PURE__ */ jsx4("span", { className: "lab-sr-only", "aria-live": "polite", children: announcement }),
+    /* @__PURE__ */ jsxs3("span", { id: helpId, className: "lab-sr-only", children: [
+      "Arrow keys switch tabs. Home and End select the first and last tab. Delete closes a tab. Alt plus Left or Right reorders. Alt plus Shift and Left, Right, or Down splits a pane. F6 moves between panes; Shift plus F6 moves back.",
+      menu && " Right-click or press Shift plus F10 for tab actions without dragging."
+    ] }),
+    active && /* @__PURE__ */ jsx4(
+      "svg",
+      {
+        ref: frameRef,
+        "aria-hidden": "true",
+        "data-pane-frame": true,
+        viewBox: `0 0 ${width} ${height}`,
+        strokeWidth: size.borderWidth,
+        style: { width, height },
+        className: "lab-pane-frame",
+        children: /* @__PURE__ */ jsx4("path", { className: "lab-outline" })
+      }
+    ),
+    dragging && createPortal(
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: ghost,
+          "data-dragged-tab": true,
+          "aria-hidden": "true",
+          style: {
+            width: tabWidth,
+            height,
+            paddingTop: height - contentHeight
+          },
+          className: "lab-ghost",
+          children: [
+            /* @__PURE__ */ jsx4(TabSurface, { selected: true, width: tabWidth }),
+            /* @__PURE__ */ jsxs3(
+              "span",
+              {
+                style: { height: contentHeight },
+                className: "lab-ghost-content",
+                children: [
+                  items.find((item) => item.key === dragging)?.icon && /* @__PURE__ */ jsx4("span", { className: "lab-tab-icon", children: items.find((item) => item.key === dragging).icon }),
+                  /* @__PURE__ */ jsx4("span", { className: "lab-tab-label", children: labels.get(dragging) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx4(CloseTab, { label: labels.get(dragging) })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function CloseTab({ label, onClick }) {
+  const { height, contentHeight } = useTabSize();
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      "aria-label": `Close ${label}`,
+      title: `Close ${label}`,
+      style: { top: height - contentHeight / 2 },
+      className: "lab-tab-close",
+      onClick,
+      children: /* @__PURE__ */ jsx4(XIcon, { className: "lab-tab-close-icon" })
+    }
+  );
+}
+
+// toolbar.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function WorkspaceToolbar({
+  active,
+  leading,
+  reserve,
+  end,
+  onActivate,
+  ...tabProps
+}) {
+  const { height } = useTabSize();
+  const [header, setHeader] = useState3(null);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: setHeader,
+      style: { height },
+      className: "lab-toolbar",
+      "data-leading": leading ? "" : void 0,
+      onPointerDownCapture: onActivate,
+      onFocusCapture: onActivate,
+      children: [
+        leading,
+        /* @__PURE__ */ jsx5("div", { className: "lab-toolbar-tabs", children: /* @__PURE__ */ jsx5(
+          WorkspaceTabs,
+          {
+            ...tabProps,
+            dragBoundary: header,
+            active: active ?? ""
+          }
+        ) }),
+        /* @__PURE__ */ jsxs4("div", { className: "lab-toolbar-end", children: [
+          end,
+          tabProps.items.find((tab) => tab.key === active)?.actions
+        ] }),
+        !!reserve && /* @__PURE__ */ jsx5("div", { className: "lab-toolbar-trailing", style: { width: reserve } })
+      ]
+    }
+  );
+}
+
+// unsaved-changes.ts
+import * as React2 from "react";
+var UnsavedChanges = React2.createContext(void 0);
+function useUnsavedChanges(dirty) {
+  const report = React2.useContext(UnsavedChanges);
+  const source = React2.useRef(/* @__PURE__ */ Symbol());
+  React2.useLayoutEffect(() => {
+    const id = source.current;
+    report?.(id, dirty);
+    return () => report?.(id, false);
+  }, [dirty, report]);
+}
+
+// workspace.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Workspace(props) {
+  const id = useId2();
+  return /* @__PURE__ */ jsx6(WorkspaceId.Provider, { value: id, children: /* @__PURE__ */ jsx6(WorkspaceDensity.Provider, { value: props.density ?? 100, children: /* @__PURE__ */ jsx6(WorkspaceContent, { ...props }) }) });
+}
+function WorkspaceContent({
+  density = 100,
+  tabs,
+  active,
+  onSelect,
+  onClose,
+  onDuplicate,
+  leading,
+  trailing,
+  toolbar,
+  menu,
+  confirmClose,
+  layout,
+  onLayoutChange: change,
+  className,
+  children,
+  empty
+}) {
+  const ids = useWorkspaceIds();
+  const { height, logoSize } = useTabSize();
+  const corner2 = useRef5(null);
+  const [reserve, setReserve] = useState4(0);
+  const hasTrailing = !!trailing;
+  useLayoutEffect4(() => {
+    const element = corner2.current;
+    if (!element) return setReserve(0);
+    const observer = new ResizeObserver(() => setReserve(element.offsetWidth));
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [hasTrailing]);
+  const root = useRef5(null);
+  const preferredPane = useRef5(void 0);
+  const visibleLayout = reconcileLayout(
+    layout,
+    tabs.map((t) => t.key),
+    active,
+    preferredPane.current
+  );
+  useLayoutEffect4(() => {
+    if (visibleLayout !== layout) change(visibleLayout);
+  }, [visibleLayout, layout]);
+  const dirty = useRef5(/* @__PURE__ */ new Map());
+  useEffect2(() => {
+    const warn = (event) => {
+      if (dirty.current.size) event.preventDefault();
+    };
+    addEventListener("beforeunload", warn);
+    return () => removeEventListener("beforeunload", warn);
+  }, []);
+  function close(key) {
+    const pane = panes(visibleLayout).find((p) => p.tabs.includes(key));
+    if (!pane) return;
+    const remaining = pane.tabs.filter((k) => k !== key);
+    const opener = tabs.find((tab) => tab.key === key)?.opener;
+    const neighbor = remaining.find((key2) => key2 === opener) ?? remaining[Math.min(pane.tabs.indexOf(key), remaining.length - 1)] ?? tabs.find((t) => t.key !== key)?.key;
+    onClose(key, neighbor);
+    requestAnimationFrame(
+      () => (document.getElementById(
+        ids.tab(key === pane.active ? neighbor ?? "" : pane.active ?? "")
+      ) ?? root.current?.querySelector(
+        ".lab-toolbar-end button, [data-pane-sheet]"
+      ))?.focus({ preventScroll: true })
+    );
+  }
+  const focus = (key) => requestAnimationFrame(() => document.getElementById(ids.tab(key))?.focus());
+  const paneOf = (pane) => ({
+    id: pane.id,
+    tabs: pane.tabs,
+    active: pane.active,
+    focus
+  });
+  return /* @__PURE__ */ jsx6(Fragment3, { children: /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: root,
+      role: "region",
+      "aria-label": "Workspace",
+      "data-density": density,
+      style: {
+        "--lab-tab-height": `${height}px`,
+        "--lab-logo-size": `${logoSize}px`
+      },
+      className: className ? `lab-workspace ${className}` : "lab-workspace",
+      onKeyDown: (event) => {
+        if (event.key !== "F6") return;
+        event.preventDefault();
+        const selected = Array.from(
+          event.currentTarget.querySelectorAll(
+            '[role="tab"][aria-selected="true"]'
+          )
+        );
+        const owner = document.activeElement?.closest(
+          '[data-pane-header], [role="tabpanel"]'
+        );
+        const index = selected.findIndex(
+          (tab) => owner?.contains(tab) || tab.getAttribute("aria-controls") === owner?.id
+        );
+        selected[(index + (event.shiftKey ? selected.length - 1 : 1)) % selected.length]?.focus();
+      },
+      children: [
+        trailing && /* @__PURE__ */ jsx6("div", { ref: corner2, className: "lab-trailing", style: { height }, children: trailing }),
+        /* @__PURE__ */ jsx6(
+          WorkspaceSurface,
+          {
+            layout: visibleLayout,
+            change,
+            menu,
+            header: (pane, first, last, docking, surface) => /* @__PURE__ */ jsx6(
+              WorkspaceToolbar,
+              {
+                leading: first ? leading : void 0,
+                reserve: last ? reserve : void 0,
+                end: toolbar?.(paneOf(pane)),
+                menu,
+                onActivate: () => {
+                  preferredPane.current = pane.id;
+                },
+                docking,
+                surface,
+                items: pane.tabs.map((key) => tabs.find((t) => t.key === key)),
+                active: pane.active,
+                onSelect,
+                onDuplicate: onDuplicate ? (key) => {
+                  const copy = onDuplicate(key), index = pane.tabs.indexOf(key) + 1;
+                  change(
+                    updateLayout(visibleLayout, pane.id, () => ({
+                      ...pane,
+                      tabs: [
+                        ...pane.tabs.slice(0, index),
+                        copy,
+                        ...pane.tabs.slice(index)
+                      ],
+                      active: copy
+                    }))
+                  );
+                  return copy;
+                } : void 0,
+                onClose: (key) => {
+                  if (![...dirty.current.values()].includes(key))
+                    return close(key);
+                  const tab = tabs.find((tab2) => tab2.key === key);
+                  const element = document.getElementById(ids.tab(key));
+                  Promise.resolve(
+                    confirmClose ? confirmClose(tab) : confirm(`Discard changes in ${tab.label}?`)
+                  ).then((discard) => {
+                    if (discard) close(key);
+                    else requestAnimationFrame(() => element?.focus());
+                  });
+                },
+                onReorder: (keys) => change(
+                  updateLayout(visibleLayout, pane.id, (node) => ({
+                    ...node,
+                    tabs: keys
+                  }))
+                )
+              }
+            ),
+            content: (regions, transition, lifted) => /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              tabs.map((tab) => {
+                const region = regions.find(
+                  (r) => r.pane.tabs.includes(tab.key)
+                );
+                return /* @__PURE__ */ jsx6(
+                  TabPanel,
+                  {
+                    tab,
+                    hidden: tab.key !== region.pane.active && tab.key !== lifted,
+                    pane: region.pane.id,
+                    box: region.box,
+                    transition,
+                    focus: () => {
+                      preferredPane.current = region.pane.id;
+                      if (active !== tab.key) onSelect(tab.key);
+                    },
+                    children: /* @__PURE__ */ jsx6(
+                      UnsavedChanges.Provider,
+                      {
+                        value: (source, changed) => changed ? dirty.current.set(source, tab.key) : dirty.current.delete(source),
+                        children: children(tab, paneOf(region.pane))
+                      }
+                    )
+                  },
+                  tab.key
+                );
+              }),
+              !tabs.length && /* @__PURE__ */ jsx6(
+                TabPanel,
+                {
+                  hidden: false,
+                  pane: regions[0].pane.id,
+                  box: regions[0].box,
+                  transition,
+                  children: empty(paneOf(regions[0].pane))
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+}
+function TabPanel({
+  tab,
+  hidden,
+  pane,
+  box,
+  transition,
+  focus,
+  children
+}) {
+  const ids = useWorkspaceIds();
+  const { height, borderWidth } = useTabSize();
+  const viewport = useRef5(null);
+  useLayoutEffect4(() => {
+    viewport.current?.scrollTo(0, 0);
+  }, [tab?.scrollKey]);
+  return (
+    // oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- focusable panel
+    /* @__PURE__ */ jsx6(
+      "section",
+      {
+        ref: viewport,
+        id: tab ? ids.panel(tab.key) : void 0,
+        role: tab ? "tabpanel" : void 0,
+        "aria-labelledby": tab ? ids.tab(tab.key) : void 0,
+        tabIndex: 0,
+        "data-pane-sheet": pane,
+        hidden,
+        className: "lab-panel",
+        style: {
+          borderWidth,
+          ...tab?.fill ? { padding: 0, overflow: "hidden" } : {},
+          ...position({
+            ...box,
+            y: box.y + height - 1,
+            height: box.height - height + 1
+          }),
+          transitionDuration: transition ? "var(--workspace-duration, 180ms)" : "0ms"
+        },
+        onPointerDownCapture: (event) => {
+          event.currentTarget.dataset.pointer = "";
+          focus?.();
+        },
+        onFocusCapture: focus,
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget))
+            delete event.currentTarget.dataset.pointer;
+        },
+        children
+      }
+    )
+  );
+}
+
+// workspace-frame.tsx
+import {
+  useLayoutEffect as useLayoutEffect5,
+  useRef as useRef6,
+  useState as useState5
+} from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function WorkspaceFrame({
+  expanded,
+  change,
+  children
+}) {
+  const viewport = useRef6(null);
+  const drag = useRef6(void 0);
+  const [available, setAvailable] = useState5(0);
+  const [draft, setDraft] = useState5();
+  const compact = Math.min(1600, available);
+  const width = draft ?? (expanded ? available : compact);
+  const cancel = () => {
+    drag.current = void 0;
+    setDraft(void 0);
+  };
+  useLayoutEffect5(() => {
+    const observer = new ResizeObserver(() => {
+      setAvailable(viewport.current.clientWidth);
+      cancel();
+    });
+    observer.observe(viewport.current);
+    addEventListener("blur", cancel);
+    return () => {
+      observer.disconnect();
+      removeEventListener("blur", cancel);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx7("div", { ref: viewport, className: "lab-frame", children: /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "lab-frame-content",
+      style: {
+        width: available ? width : "100%",
+        maxWidth: expanded ? void 0 : draft ?? 1600,
+        "--workspace-duration": draft === void 0 ? void 0 : "0ms"
+      },
+      children: [
+        children,
+        available > compact && ["left", "right"].map((side) => /* @__PURE__ */ jsx7(
+          "div",
+          {
+            role: "separator",
+            "aria-label": `Resize workspace from ${side}`,
+            "aria-orientation": "vertical",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(
+              (width - compact) / (available - compact) * 100
+            ),
+            "aria-valuetext": width === compact ? "Centered" : width === available ? "Full width" : "Resizing",
+            title: "Drag outward for full width or inward to center. Double-click to toggle; arrow keys also resize.",
+            tabIndex: 0,
+            className: "lab-frame-handle",
+            style: { [side]: -24 },
+            onDoubleClick: () => change(!expanded),
+            onPointerDown: (event) => {
+              if (event.button !== 0) return;
+              event.preventDefault();
+              event.currentTarget.focus({ preventScroll: true });
+              drag.current = { x: event.clientX, width };
+              setDraft(width);
+              event.currentTarget.setPointerCapture(event.pointerId);
+            },
+            onPointerMove: (event) => {
+              if (!drag.current || !event.currentTarget.hasPointerCapture(event.pointerId))
+                return;
+              const next = drag.current.width + (event.clientX - drag.current.x) * (side === "left" ? -2 : 2);
+              const snap = Math.min(32, (available - compact) / 4);
+              setDraft(
+                next > available - snap ? available : next < compact + snap ? compact : next
+              );
+            },
+            onPointerUp: (event) => {
+              if (!drag.current) return;
+              change(width > (compact + available) / 2);
+              cancel();
+              event.currentTarget.releasePointerCapture(event.pointerId);
+            },
+            onLostPointerCapture: cancel,
+            onPointerCancel: cancel,
+            onKeyDown: (event) => {
+              if (event.key === "Escape" && drag.current) {
+                event.preventDefault();
+                cancel();
+              } else if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+                event.preventDefault();
+                cancel();
+                change(
+                  event.key === "End" || event.key === (side === "left" ? "ArrowLeft" : "ArrowRight")
+                );
+              }
+            }
+          },
+          side
+        ))
+      ]
+    }
+  ) });
+}
+
+// window.tsx
+import {
+  useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect6,
+  useRef as useRef7,
+  useState as useState6
+} from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var client = typeof window !== "undefined";
+var maximized = () => client && outerWidth >= screen.availWidth && outerHeight >= screen.availHeight;
+var isFullscreen = (host) => client && (host?.fullscreen ? innerWidth >= screen.width && innerHeight >= screen.height : !!document.fullscreenElement);
+var setFullscreen = (host, on) => {
+  if (host?.fullscreen) host.fullscreen(on);
+  else if (on) void document.documentElement.requestFullscreen?.();
+  else if (document.fullscreenElement) void document.exitFullscreen();
+};
+var interactive = "a, button, input, select, textarea, label, summary, [contenteditable], [role=button], [role=tab], [role=separator], [role=menuitem], .lab-tab";
+var draggable = (target) => target instanceof Element && !target.closest(interactive) && (!!target.closest(".lab-toolbar, [data-window-drag]") || target.matches(".lab-workspace") || !!target.querySelector(".lab-workspace"));
+function useFullscreen(host) {
+  const [full, setFull] = useState6(() => isFullscreen(host));
+  useEffect3(() => {
+    const update = () => setFull(isFullscreen(host));
+    update();
+    window.addEventListener("resize", update);
+    document.addEventListener("fullscreenchange", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      document.removeEventListener("fullscreenchange", update);
+    };
+  }, [host]);
+  return [full, (on) => setFullscreen(host, on)];
+}
+function useWindowFrame(host) {
+  useEffect3(() => {
+    if (!host) return;
+    const root = document.documentElement;
+    let armed = false;
+    let cursor = "";
+    const edgeAt = (x, y) => {
+      if (!host.resize || maximized()) return "";
+      const vertical = y < 6 ? "n" : y > innerHeight - 6 ? "s" : "";
+      const horizontal = x < 6 ? "w" : x > innerWidth - 6 ? "e" : "";
+      return vertical + horizontal;
+    };
+    const move = (event) => {
+      if (armed && event.buttons === 1) {
+        armed = false;
+        host.drag();
+      } else if (!event.buttons) {
+        const edge = edgeAt(event.clientX, event.clientY);
+        const next = edge && `${edge}-resize`;
+        if (next !== cursor) root.style.cursor = cursor = next;
+      }
+    };
+    const down = (event) => {
+      if (event.button !== 0) return;
+      const edge = edgeAt(event.clientX, event.clientY);
+      if (edge) {
+        event.preventDefault();
+        host.resize(edge);
+      } else
+        armed = !!host.drag && event.detail === 1 && draggable(event.target);
+    };
+    const up = () => {
+      armed = false;
+    };
+    const dblclick = (event) => {
+      if (draggable(event.target)) host.toggleMaximize();
+    };
+    const key = (event) => {
+      const shortcut = host.platform === "macos" ? event.ctrlKey && event.metaKey && event.code === "KeyF" : event.key === "F11";
+      if (!host.fullscreen || !shortcut) return;
+      event.preventDefault();
+      host.fullscreen(!isFullscreen(host));
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mousedown", down);
+    window.addEventListener("mouseup", up);
+    window.addEventListener("dblclick", dblclick);
+    window.addEventListener("keydown", key);
+    return () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mousedown", down);
+      window.removeEventListener("mouseup", up);
+      window.removeEventListener("dblclick", dblclick);
+      window.removeEventListener("keydown", key);
+      if (cursor) root.style.cursor = "";
+    };
+  }, [host]);
+}
+var glyph = (children) => /* @__PURE__ */ jsx8(
+  "svg",
+  {
+    "aria-hidden": "true",
+    viewBox: "0 0 10 10",
+    width: "10",
+    height: "10",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1",
+    children
+  }
+);
+function WindowControls({ host }) {
+  const [full] = useFullscreen(host);
+  const [max, setMax] = useState6(maximized);
+  const [top, setTop] = useState6(0);
+  const spacer = useRef7(null);
+  const hidden = host.platform === "macos" || full;
+  const measure = () => {
+    setMax(maximized());
+    if (spacer.current) setTop(spacer.current.getBoundingClientRect().top);
+  };
+  useLayoutEffect6(measure);
+  useEffect3(() => {
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, []);
+  if (hidden) return null;
+  const button = (label, action, icon2, close) => /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      "aria-label": label,
+      title: label,
+      className: close ? "lab-window-button lab-window-close" : "lab-window-button",
+      onClick: action,
+      children: icon2
+    }
+  );
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: spacer,
+      className: "lab-window-controls",
+      style: { "--lab-window-top": `${top}px` },
+      children: /* @__PURE__ */ jsxs7("div", { className: "lab-window-buttons", children: [
+        button(
+          "Minimize",
+          () => host.minimize(),
+          glyph(/* @__PURE__ */ jsx8("path", { d: "M0 5.5h10" }))
+        ),
+        button(
+          max ? "Restore" : "Maximize",
+          () => host.toggleMaximize(),
+          max ? glyph(
+            /* @__PURE__ */ jsxs7(Fragment4, { children: [
+              /* @__PURE__ */ jsx8("rect", { x: "0.5", y: "2.5", width: "7", height: "7", rx: "1" }),
+              /* @__PURE__ */ jsx8("path", { d: "M2.5 2.5v-1a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-1" })
+            ] })
+          ) : glyph(/* @__PURE__ */ jsx8("rect", { x: "0.5", y: "0.5", width: "9", height: "9", rx: "1" }))
+        ),
+        button(
+          "Close",
+          () => host.close(),
+          glyph(/* @__PURE__ */ jsx8("path", { d: "m0.5 0.5 9 9m0-9-9 9" })),
+          true
+        )
+      ] })
+    }
+  );
+}
+export {
+  WindowControls,
+  Workspace,
+  WorkspaceFrame,
+  densityPresets,
+  densitySize,
+  dockTab,
+  panes,
+  reconcileLayout,
+  restoreLayout,
+  useFullscreen,
+  useUnsavedChanges,
+  useWindowFrame
+};
+//# sourceMappingURL=index.js.map