@labpane/os 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,10 +1,11 @@
 // workspace.tsx
 import {
-  useEffect as useEffect2,
+  useEffect as useEffect4,
   useId as useId2,
-  useLayoutEffect as useLayoutEffect4,
-  useRef as useRef5,
-  useState as useState4
+  useLayoutEffect as useLayoutEffect8,
+  useMemo as useMemo2,
+  useRef as useRef9,
+  useState as useState5
 } from "react";
 
 // context.ts
@@ -52,9 +53,9 @@ function densitySize(density) {
   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
+    Object.keys(from).map((key2) => [
+      key2,
+      from[key2] + (to[key2] - from[key2]) * amount
     ])
   );
 }
@@ -67,8 +68,20 @@ function useTabSize() {
 function useWorkspaceIds() {
   const prefix = useContext(WorkspaceId);
   return {
-    tab: (key) => `${prefix}-tab-${encodeURIComponent(key)}`,
-    panel: (key) => `${prefix}-panel-${encodeURIComponent(key)}`
+    tab: (key2) => `${prefix}-tab-${encodeURIComponent(key2)}`,
+    panel: (key2) => `${prefix}-panel-${encodeURIComponent(key2)}`
+  };
+}
+var TabLinks = createContext(/* @__PURE__ */ new Map());
+function useTabLinks() {
+  const links = useContext(TabLinks);
+  return {
+    register: (key2) => (element) => {
+      if (element) links.set(key2, element);
+      else links.delete(key2);
+    },
+    get: (key2) => links.get(key2),
+    focus: (key2) => requestAnimationFrame(() => links.get(key2)?.focus())
   };
 }
 
@@ -102,14 +115,14 @@ function reconcileLayout(node, keys, active, preferred) {
       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)
+      (key2) => keys.includes(key2) && !seen.has(key2) && !!seen.add(key2)
     );
     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));
+  const missing = keys.filter((key2) => !seen.has(key2));
   if (missing.length) {
     const leaves = panes(next), target = leaves.find((p) => p.id === preferred) ?? leaves[0];
     next = updateLayout(next, target.id, (node2) => ({
@@ -122,7 +135,7 @@ function reconcileLayout(node, keys, active, preferred) {
 }
 function restoreLayout(value, keys) {
   const ids = /* @__PURE__ */ new Set();
-  function read(value2, depth = 0) {
+  function read2(value2, depth = 0) {
     const n = value2;
     if (!n || depth > 12 || typeof n.id !== "string" || !n.id || ids.has(n.id))
       throw Error("Invalid layout");
@@ -134,11 +147,11 @@ function restoreLayout(value, keys) {
         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)
+        first: read2(n.first, depth + 1),
+        second: read2(n.second, depth + 1)
       };
     }
-    if (!Array.isArray(n.tabs) || n.tabs.some((key) => typeof key !== "string"))
+    if (!Array.isArray(n.tabs) || n.tabs.some((key2) => typeof key2 !== "string"))
       throw Error("Invalid tabs");
     return {
       id: n.id,
@@ -147,7 +160,7 @@ function restoreLayout(value, keys) {
     };
   }
   try {
-    return reconcileLayout(read(JSON.parse(value ?? "null")), keys);
+    return reconcileLayout(read2(JSON.parse(value ?? "null")), keys);
   } catch {
     return { id: "primary", tabs: keys, active: keys[0] };
   }
@@ -156,26 +169,26 @@ 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);
+function dockTab(layout, key2, target, edge, index) {
+  const leaves = panes(layout), source = leaves.find((p) => p.tabs.includes(key2)), 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);
+    const pane = node, index2 = pane.tabs.indexOf(key2), tabs = pane.tabs.filter((k) => k !== key2);
     return {
       ...pane,
       tabs,
-      active: pane.active === key ? tabs[Math.min(index2, tabs.length - 1)] : pane.active
+      active: pane.active === key2 ? 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 };
+      tabs.splice(index ?? tabs.length, 0, key2);
+      return { ...pane, tabs, active: key2 };
     }
-    const added = { id: newId(), tabs: [key], active: key };
+    const added = { id: newId(), tabs: [key2], active: key2 };
     return {
       id: newId(),
       axis: edge === "bottom" ? "y" : "x",
@@ -187,7 +200,7 @@ function dockTab(layout, key, target, edge, index) {
   return reconcileLayout(
     next,
     leaves.flatMap((p) => p.tabs),
-    key
+    key2
   );
 }
 function minimumSize(node, gap = gutter) {
@@ -248,6 +261,13 @@ function dropRegion(box, edge, gap = gutter) {
   return box;
 }
 
+// overlay.ts
+var overlays = ["dialog", "alertdialog", "menu", "listbox"].map((role) => `[role="${role}"]`).concat("[data-labpane-overlay]").join(", ");
+function hasOpenOverlay() {
+  const full = document.fullscreenElement;
+  return !!full && full !== document.documentElement || !!document.querySelector(overlays);
+}
+
 // surface.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var position = (box) => ({
@@ -311,18 +331,18 @@ function WorkspaceSurface({
   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));
+    next: (key2) => {
+      const index = leaves.findIndex((p) => p.pane.tabs.includes(key2));
       change(
-        dockTab(layout, key, leaves[(index + 1) % leaves.length].pane.id)
+        dockTab(layout, key2, leaves[(index + 1) % leaves.length].pane.id)
       );
     },
-    move: ({ key, x, y, detached: wasDetached }) => {
+    move: ({ key: key2, 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 source = leaves.find((p) => p.pane.tabs.includes(key2));
       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) {
@@ -335,7 +355,7 @@ function WorkspaceSurface({
         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);
+      const valid = target && (!edge || canSplit(target, edge)) && (!target.pane.tabs.includes(key2) || !!edge && target.pane.tabs.length > 1);
       let index;
       if (valid && !edge) {
         const nav = board.current.querySelector(
@@ -370,7 +390,7 @@ function WorkspaceSurface({
           );
         }
       }
-      show(valid ? { pane: target.pane.id, key, edge, index } : { key });
+      show(valid ? { pane: target.pane.id, key: key2, edge, index } : { key: key2 });
       return true;
     },
     drop: () => {
@@ -383,18 +403,18 @@ function WorkspaceSurface({
       return true;
     },
     cancel: () => show(),
-    split: (key, edge) => {
-      const target = leaves.find((p) => p.pane.tabs.includes(key));
+    split: (key2, edge) => {
+      const target = leaves.find((p) => p.pane.tabs.includes(key2));
       if (!target || target.pane.tabs.length < 2 || !canSplit(target, edge))
         return false;
-      change(dockTab(layout, key, target.pane.id, edge));
+      change(dockTab(layout, key2, 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);
+      const remaining = pane.tabs.filter((key2) => key2 !== lifted);
       pane = {
         ...pane,
         active: remaining[Math.min(pane.tabs.indexOf(lifted), remaining.length - 1)]
@@ -431,6 +451,7 @@ function WorkspaceSurface({
           "div",
           {
             "data-pane-header": pane.id,
+            "data-top": box.y === 0 || void 0,
             className: "lab-pane-header",
             style: {
               ...position({ ...box, height: tabHeight }),
@@ -444,8 +465,8 @@ function WorkspaceSurface({
                 ...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])`
+              (key2 = pane.active) => board.current?.querySelector(
+                key2 ? `[id="${CSS.escape(ids.panel(key2))}"]` : `[data-pane-sheet="${CSS.escape(pane.id)}"]:not([hidden]):not([data-drag-content])`
               ) ?? null
             )
           },
@@ -499,6 +520,7 @@ function WorkspaceSurface({
               },
               onLostPointerCapture: () => setResizing(false),
               onKeyDown: (event) => {
+                if (hasOpenOverlay()) return;
                 const step = event.shiftKey ? 0.1 : 0.02;
                 const values = {
                   [horizontal ? "ArrowLeft" : "ArrowUp"]: ratio - step,
@@ -772,6 +794,7 @@ function WorkspaceTabs({
   menu
 }) {
   const ids = useWorkspaceIds();
+  const tabLinks = useTabLinks();
   const content = useDragContent();
   const density = useTabSize();
   const [metrics, setMetrics] = React.useState({
@@ -790,8 +813,8 @@ function WorkspaceTabs({
       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 links = items.map(({ key: key2, label }) => [key2, label]);
+  const tabOrder = JSON.stringify(items.map(({ key: key2 }) => key2));
   const labels = new Map(links);
   const navRef = React.useRef(null);
   const stripRef = React.useRef(null);
@@ -822,11 +845,11 @@ function WorkspaceTabs({
   });
   const frame = React.useRef(0);
   const suppressClick = React.useRef(false);
-  const tabElement = (key) => navRef.current?.querySelector(
-    `a[data-tab="${CSS.escape(key)}"]`
+  const tabElement = (key2) => navRef.current?.querySelector(
+    `a[data-tab="${CSS.escape(key2)}"]`
   )?.parentElement;
-  const reveal = (key = active) => {
-    const nav = navRef.current, tab = tabElement(key);
+  const reveal = (key2 = active) => {
+    const nav = navRef.current, tab = tabElement(key2);
     if (!nav || !tab || drag.current?.moved || docking.insertion !== void 0)
       return;
     nav.scrollLeft = Math.max(
@@ -908,10 +931,10 @@ function WorkspaceTabs({
         motion
       );
   };
-  const settle = (key) => requestAnimationFrame(() => {
+  const settle = (key2) => requestAnimationFrame(() => {
     if (drag.current) return;
-    reveal(key);
-    const ghost2 = ghostRef.current, slot = tabElement(key);
+    reveal(key2);
+    const ghost2 = ghostRef.current, slot = tabElement(key2);
     if (!ghost2 || !slot || matchMedia("(prefers-reduced-motion: reduce)").matches) {
       setDragging(void 0);
       return;
@@ -944,21 +967,21 @@ function WorkspaceTabs({
     else setDragging(void 0);
   };
   const move = (from, to) => {
-    const order = links.map(([key]) => key), index = order.indexOf(to);
+    const order = links.map(([key2]) => key2), 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) => {
+  const split = (key2, edge) => {
     announce(
-      docking.split(key, edge) ? `${labels.get(key)} split ${edge}` : "Open another tab or make this pane larger to split it"
+      docking.split(key2, edge) ? `${labels.get(key2)} split ${edge}` : "Open another tab or make this pane larger to split it"
     );
-    focusTab(key);
+    tabLinks.focus(key2);
   };
-  const keyDown = (event, key, index) => {
+  const keyDown = (event, key2, index) => {
+    if (hasOpenOverlay()) return;
     if (event.key === "Escape") return finish(true);
     const edges = {
       ArrowLeft: "left",
@@ -967,9 +990,9 @@ function WorkspaceTabs({
     };
     const edge = edges[event.key];
     if (event.altKey && edge) {
-      if (event.shiftKey) split(key, edge);
+      if (event.shiftKey) split(key2, edge);
       else if (edge !== "bottom")
-        move(key, items[index + (edge === "left" ? -1 : 1)]?.key ?? key);
+        move(key2, items[index + (edge === "left" ? -1 : 1)]?.key ?? key2);
       else return;
     } else {
       if (event.altKey || event.ctrlKey || event.metaKey) return;
@@ -980,10 +1003,9 @@ function WorkspaceTabs({
         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);
+      if (target !== void 0) tabLinks.get(items[target].key)?.focus();
+      else if (event.key === "Delete") onClose(key2);
+      else if (event.key === " ") onSelect(key2);
       else return;
     }
     event.preventDefault();
@@ -1032,12 +1054,12 @@ function WorkspaceTabs({
     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)
+      const key2 = element.querySelector("a")?.dataset.tab;
+      if (!key2) continue;
+      const left = element.offsetLeft, from = previous.tabs.get(key2);
+      if (previous.order !== order && key2 !== dragging && from !== void 0 && from !== left)
         animate(element, from - left);
-      positions.current.tabs.set(key, left);
+      positions.current.tabs.set(key2, left);
     }
     cancelAnimationFrame(frame.current);
     draw();
@@ -1168,83 +1190,84 @@ function WorkspaceTabs({
         onPointerCancel: () => finish(true),
         className: "lab-tablist",
         children: [
-          links.map(([key, text], index) => {
+          links.map(([key2, text], index) => {
             const actions = [
               ...onDuplicate ? [
                 {
                   label: "Duplicate tab",
                   onSelect: () => {
-                    menuFocus.current = onDuplicate(key);
+                    menuFocus.current = onDuplicate(key2);
                   }
                 }
               ] : [],
               {
                 label: "Move left",
-                onSelect: () => move(key, items[index - 1].key),
+                onSelect: () => move(key2, items[index - 1].key),
                 disabled: !index
               },
               {
                 label: "Move right",
-                onSelect: () => move(key, items[index + 1].key),
+                onSelect: () => move(key2, items[index + 1].key),
                 disabled: index === items.length - 1
               },
               {
                 label: "Move to next pane",
-                onSelect: () => docking.next(key),
+                onSelect: () => docking.next(key2),
                 disabled: docking.paneCount < 2
               },
               null,
               ...["left", "right", "bottom"].map((edge) => ({
                 label: `Split ${edge === "bottom" ? "below" : edge}`,
-                onSelect: () => split(key, edge),
+                onSelect: () => split(key2, edge),
                 disabled: items.length < 2
               })),
               null,
-              { label: "Close tab", onSelect: () => onClose(key) }
+              { label: "Close tab", onSelect: () => onClose(key2) }
             ];
             const target = /* @__PURE__ */ jsxs3(
               "div",
               {
                 role: "presentation",
                 className: "lab-tab",
-                "data-dragging": dragging === key || void 0,
+                "data-dragging": dragging === key2 || void 0,
                 style: {
                   paddingTop: height - contentHeight,
-                  marginRight: dragging === key && drag.current?.detached ? -tabWidth : 0,
+                  marginRight: dragging === key2 && drag.current?.detached ? -tabWidth : 0,
                   marginLeft: docking.insertion === index ? tabWidth : 0,
-                  zIndex: active === key ? links.length + 1 : links.length - index
+                  zIndex: active === key2 ? links.length + 1 : links.length - index
                 },
                 children: [
                   /* @__PURE__ */ jsx4(
                     TabSurface,
                     {
                       width: tabWidth,
-                      selected: active === key,
+                      selected: active === key2,
                       keyboardFocus: !pointerFocus
                     }
                   ),
                   /* @__PURE__ */ jsxs3(
                     "a",
                     {
-                      id: ids.tab(key),
+                      ref: tabLinks.register(key2),
+                      id: ids.tab(key2),
                       role: "tab",
-                      tabIndex: active === key ? 0 : -1,
-                      "aria-selected": active === key,
-                      "aria-controls": ids.panel(key),
+                      tabIndex: active === key2 ? 0 : -1,
+                      "aria-selected": active === key2,
+                      "aria-controls": ids.panel(key2),
                       href: items[index].href,
-                      "data-tab": key,
+                      "data-tab": key2,
                       style: { width: tabWidth, height: contentHeight },
                       onClick: (event) => {
                         const { metaKey, ctrlKey, shiftKey, altKey } = event;
                         if (metaKey || ctrlKey || shiftKey || altKey) return;
                         event.preventDefault();
-                        onSelect(key);
+                        onSelect(key2);
                       },
-                      onFocus: () => onSelect(key),
+                      onFocus: () => onSelect(key2),
                       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),
+                      onKeyDown: (event) => keyDown(event, key2, index),
                       onPointerDown: (event) => {
                         if (event.button !== 0 || !event.isPrimary) return;
                         if (event.pointerType === "mouse") event.preventDefault();
@@ -1253,7 +1276,7 @@ function WorkspaceTabs({
                         setPointerFocus(true);
                         const box = event.currentTarget.parentElement.getBoundingClientRect();
                         drag.current = {
-                          key,
+                          key: key2,
                           offset: event.clientX - box.left,
                           offsetY: event.clientY - box.top,
                           sheet: surface().getBoundingClientRect(),
@@ -1271,7 +1294,7 @@ function WorkspaceTabs({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx4(CloseTab, { label: text, onClick: () => onClose(key) })
+                  /* @__PURE__ */ jsx4(CloseTab, { label: text, onClick: () => onClose(key2) })
                 ]
               }
             );
@@ -1279,11 +1302,11 @@ function WorkspaceTabs({
               target,
               actions,
               () => {
-                focusTab(menuFocus.current ?? key);
+                tabLinks.focus(menuFocus.current ?? key2);
                 menuFocus.current = void 0;
               },
-              key
-            ) : target }, key);
+              key2
+            ) : target }, key2);
           }),
           docking.insertion === items.length && /* @__PURE__ */ jsx4(
             "div",
@@ -1420,11 +1443,226 @@ function useUnsavedChanges(dirty) {
   }, [dirty, report]);
 }
 
+// tab-state.ts
+import * as React3 from "react";
+var key = /* @__PURE__ */ Symbol.for("labpane.tab-state");
+var registry = globalThis;
+var TabStateContext = registry[key] ??= React3.createContext(
+  { active: true, visible: true }
+);
+function useTabActive() {
+  return React3.useContext(TabStateContext).active;
+}
+function useTabVisible() {
+  return React3.useContext(TabStateContext).visible;
+}
+function useTabVisibleRef() {
+  const visible = useTabVisible();
+  const ref = React3.useRef(visible);
+  React3.useLayoutEffect(() => {
+    ref.current = visible;
+  }, [visible]);
+  return ref;
+}
+function useShownOnce(visible) {
+  const [shown, setShown] = React3.useState(visible);
+  React3.useEffect(() => {
+    if (visible) setShown(true);
+  }, [visible]);
+  return shown;
+}
+
+// leave-tab.ts
+import { createContext as createContext4, useContext as useContext4, useLayoutEffect as useLayoutEffect6, useRef as useRef7 } from "react";
+
+// tab-map.ts
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef6 } from "react";
+function useTabMap(tabs) {
+  const map = useRef6(/* @__PURE__ */ new Map());
+  useLayoutEffect5(() => {
+    for (const key2 of map.current.keys())
+      if (!tabs.some((tab) => tab.key === key2)) map.current.delete(key2);
+  }, [tabs]);
+  return map.current;
+}
+
+// leave-tab.ts
+function useOpeners(tabs, front) {
+  const openers = useTabMap(tabs);
+  const previous = useRef7({
+    keys: /* @__PURE__ */ new Set()
+  });
+  useLayoutEffect6(() => {
+    const keys = new Set(tabs.map((tab) => tab.key));
+    const { keys: known, front: before } = previous.current;
+    previous.current = { keys, front };
+    if (before === void 0 || !keys.has(before)) return;
+    for (const key2 of keys)
+      if (key2 !== before && (!known.has(key2) || key2 === front))
+        openers.set(key2, before);
+  }, [tabs, front, openers]);
+  return openers;
+}
+var LeaveTab = createContext4(() => {
+});
+function useLeaveTab() {
+  return useContext4(LeaveTab);
+}
+
+// tab-history.ts
+import { createContext as createContext5, useContext as useContext5, useSyncExternalStore } from "react";
+function createTabHistory(initial) {
+  const paths = [initial];
+  const listeners = /* @__PURE__ */ new Set();
+  let index = 0;
+  const go = (to) => {
+    index = to;
+    current = snapshot();
+    listeners.forEach((listener) => listener());
+  };
+  const navigate = (path) => {
+    if (path === paths[index]) return;
+    paths.splice(index + 1, Infinity, path);
+    go(index + 1);
+  };
+  const back = () => {
+    if (index > 0) go(index - 1);
+  };
+  const forward = () => {
+    if (index < paths.length - 1) go(index + 1);
+  };
+  const snapshot = () => ({
+    path: paths[index],
+    canGoBack: index > 0,
+    canGoForward: index < paths.length - 1,
+    navigate,
+    back,
+    forward
+  });
+  let current = snapshot();
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    get: () => current
+  };
+}
+var TabHistoryContext = createContext5(createTabHistory(""));
+function useTabHistory() {
+  const store = useContext5(TabHistoryContext);
+  return useSyncExternalStore(store.subscribe, store.get, store.get);
+}
+function useTabHistories(tabs) {
+  const stores = useTabMap(tabs);
+  return (tab) => {
+    let store = stores.get(tab.key);
+    if (!store) stores.set(tab.key, store = createTabHistory(tab.href ?? ""));
+    return store;
+  };
+}
+
+// browser-history.ts
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect7, useRef as useRef8 } from "react";
+var read = (state) => state?.labpane;
+function createBrowserHistory(front) {
+  const session = Date.now();
+  let serial = 0;
+  let position2 = 0;
+  let below = 0;
+  let above = 0;
+  let hopping = false;
+  let queued = false;
+  const mark = (serial2) => ({ labpane: { session, serial: serial2 } });
+  const push = (path) => history.pushState(mark(++serial), "", path);
+  const hop = () => {
+    hopping = true;
+    history.back();
+  };
+  const settle = () => {
+    hopping = false;
+    if (!queued) return;
+    queued = false;
+    sync();
+  };
+  const move = (to, direction) => {
+    position2 = to;
+    below = Math.max(0, below + direction);
+    above = Math.max(0, above - direction);
+  };
+  function sync() {
+    const tab = front();
+    if (!tab) return;
+    if (hopping) {
+      queued = true;
+      return;
+    }
+    history.replaceState(mark(position2), "", tab.path);
+    if (tab.canGoBack && !below || !tab.canGoForward && above) {
+      push(tab.path);
+      position2 = serial;
+      below += 1;
+      above = 0;
+    }
+    if (tab.canGoForward && !above) {
+      push(tab.path);
+      above = 1;
+      hop();
+    }
+  }
+  function pop(event) {
+    const landed = read(event.state);
+    if (!landed) return;
+    if (landed.session !== session) return history.back();
+    if (landed.serial === position2) return settle();
+    const tab = front();
+    if (landed.serial > position2) {
+      if (!tab?.canGoForward) {
+        above += 1;
+        queued = true;
+        return hop();
+      }
+      move(landed.serial, 1);
+      tab.forward();
+    } else {
+      move(landed.serial, -1);
+      if (tab?.canGoBack) tab.back();
+      else history.back();
+    }
+  }
+  return { sync, pop };
+}
+function useBrowserHistory(front) {
+  const latest = useRef8(front);
+  useLayoutEffect7(() => {
+    latest.current = front;
+  });
+  const browser = useRef8(
+    void 0
+  );
+  useEffect3(() => {
+    if (!front) return;
+    const { sync, pop } = browser.current ??= createBrowserHistory(
+      () => latest.current?.get()
+    );
+    addEventListener("popstate", pop);
+    sync();
+    const unsubscribe = front.subscribe(sync);
+    return () => {
+      unsubscribe();
+      removeEventListener("popstate", pop);
+    };
+  }, [front]);
+}
+
 // 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 }) }) });
+  const [links] = useState5(() => /* @__PURE__ */ new Map());
+  return /* @__PURE__ */ jsx6(WorkspaceId.Provider, { value: id, children: /* @__PURE__ */ jsx6(TabLinks.Provider, { value: links, children: /* @__PURE__ */ jsx6(WorkspaceDensity.Provider, { value: props.density ?? 100, children: /* @__PURE__ */ jsx6(WorkspaceContent, { ...props }) }) }) });
 }
 function WorkspaceContent({
   density = 100,
@@ -1435,67 +1673,99 @@ function WorkspaceContent({
   onDuplicate,
   leading,
   trailing,
+  titleBar,
   toolbar,
   menu,
   confirmClose,
   layout,
   onLayoutChange: change,
+  history: history2,
   className,
   children,
   empty
 }) {
-  const ids = useWorkspaceIds();
-  const { height, logoSize } = useTabSize();
-  const corner2 = useRef5(null);
-  const [reserve, setReserve] = useState4(0);
+  const links = useTabLinks();
+  const { height, contentHeight, logoSize } = useTabSize();
+  const corner2 = useRef9(null);
+  const [reserve, setReserve] = useState5(0);
   const hasTrailing = !!trailing;
-  useLayoutEffect4(() => {
+  useLayoutEffect8(() => {
     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 root = useRef9(null);
+  const [inset, setInset] = useState5(0);
+  useLayoutEffect8(() => {
+    if (!titleBar) return setInset(0);
+    const measure = () => setInset(root.current.getBoundingClientRect().top);
+    measure();
+    addEventListener("resize", measure);
+    return () => removeEventListener("resize", measure);
+  }, [titleBar]);
+  const preferredPane = useRef9(void 0);
   const visibleLayout = reconcileLayout(
     layout,
     tabs.map((t) => t.key),
     active,
     preferredPane.current
   );
-  useLayoutEffect4(() => {
+  useLayoutEffect8(() => {
     if (visibleLayout !== layout) change(visibleLayout);
   }, [visibleLayout, layout]);
-  const dirty = useRef5(/* @__PURE__ */ new Map());
-  useEffect2(() => {
+  const front = active ?? panes(visibleLayout)[0]?.active;
+  const openers = useOpeners(tabs, front);
+  const historyOf = useTabHistories(tabs);
+  const frontTab = tabs.find((tab) => tab.key === front);
+  useBrowserHistory(history2 && frontTab ? historyOf(frontTab) : void 0);
+  const dirty = useRef9(/* @__PURE__ */ new Map());
+  useEffect4(() => {
     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));
+  function close(key2, next) {
+    const pane = panes(visibleLayout).find((p) => p.tabs.includes(key2));
     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);
+    const remaining = pane.tabs.filter((k) => k !== key2);
+    const opener = tabs.find((tab) => tab.key === key2)?.opener;
+    const neighbor = next ?? remaining.find((key3) => key3 === opener) ?? remaining[Math.min(pane.tabs.indexOf(key2), remaining.length - 1)] ?? tabs.find((t) => t.key !== key2)?.key;
+    onClose(key2, neighbor);
     requestAnimationFrame(
-      () => (document.getElementById(
-        ids.tab(key === pane.active ? neighbor ?? "" : pane.active ?? "")
+      () => (links.get(
+        key2 === 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());
+  function requestClose(key2, next) {
+    if (![...dirty.current.values()].includes(key2)) return close(key2, next);
+    const tab = tabs.find((tab2) => tab2.key === key2);
+    const element = links.get(key2);
+    Promise.resolve(
+      confirmClose ? confirmClose(tab) : confirm(`Discard changes in ${tab.label}?`)
+    ).then((discard) => {
+      if (discard) close(key2, next);
+      else requestAnimationFrame(() => element?.focus());
+    });
+  }
+  function leave(key2) {
+    const opener = openers.get(key2) ?? tabs.find((tab) => tab.key === key2)?.opener;
+    requestClose(
+      key2,
+      tabs.some((tab) => tab.key === opener) ? opener : void 0
+    );
+  }
   const paneOf = (pane) => ({
     id: pane.id,
     tabs: pane.tabs,
     active: pane.active,
-    focus
+    focus: links.focus
   });
   return /* @__PURE__ */ jsx6(Fragment3, { children: /* @__PURE__ */ jsxs5(
     "div",
@@ -1504,13 +1774,16 @@ function WorkspaceContent({
       role: "region",
       "aria-label": "Workspace",
       "data-density": density,
+      "data-title-bar": titleBar || void 0,
       style: {
         "--lab-tab-height": `${height}px`,
-        "--lab-logo-size": `${logoSize}px`
+        "--lab-tab-content-height": `${contentHeight}px`,
+        "--lab-logo-size": `${logoSize}px`,
+        "--lab-title-inset": `${inset}px`
       },
       className: className ? `lab-workspace ${className}` : "lab-workspace",
       onKeyDown: (event) => {
-        if (event.key !== "F6") return;
+        if (event.key !== "F6" || hasOpenOverlay()) return;
         event.preventDefault();
         const selected = Array.from(
           event.currentTarget.querySelectorAll(
@@ -1545,11 +1818,11 @@ function WorkspaceContent({
                 },
                 docking,
                 surface,
-                items: pane.tabs.map((key) => tabs.find((t) => t.key === key)),
+                items: pane.tabs.map((key2) => tabs.find((t) => t.key === key2)),
                 active: pane.active,
                 onSelect,
-                onDuplicate: onDuplicate ? (key) => {
-                  const copy = onDuplicate(key), index = pane.tabs.indexOf(key) + 1;
+                onDuplicate: onDuplicate ? (key2) => {
+                  const copy = onDuplicate(key2), index = pane.tabs.indexOf(key2) + 1;
                   change(
                     updateLayout(visibleLayout, pane.id, () => ({
                       ...pane,
@@ -1563,18 +1836,7 @@ function WorkspaceContent({
                   );
                   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());
-                  });
-                },
+                onClose: requestClose,
                 onReorder: (keys) => change(
                   updateLayout(visibleLayout, pane.id, (node) => ({
                     ...node,
@@ -1588,11 +1850,12 @@ function WorkspaceContent({
                 const region = regions.find(
                   (r) => r.pane.tabs.includes(tab.key)
                 );
+                const hidden = tab.key !== region.pane.active && tab.key !== lifted;
                 return /* @__PURE__ */ jsx6(
                   TabPanel,
                   {
                     tab,
-                    hidden: tab.key !== region.pane.active && tab.key !== lifted,
+                    hidden,
                     pane: region.pane.id,
                     box: region.box,
                     transition,
@@ -1601,10 +1864,19 @@ function WorkspaceContent({
                       if (active !== tab.key) onSelect(tab.key);
                     },
                     children: /* @__PURE__ */ jsx6(
-                      UnsavedChanges.Provider,
+                      TabScope,
                       {
-                        value: (source, changed) => changed ? dirty.current.set(source, tab.key) : dirty.current.delete(source),
-                        children: children(tab, paneOf(region.pane))
+                        active: tab.key === front,
+                        visible: !hidden,
+                        leave: () => leave(tab.key),
+                        history: historyOf(tab),
+                        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))
+                          }
+                        )
                       }
                     )
                   },
@@ -1628,6 +1900,16 @@ function WorkspaceContent({
     }
   ) });
 }
+function TabScope({
+  active,
+  visible,
+  leave,
+  history: history2,
+  children
+}) {
+  const state = useMemo2(() => ({ active, visible }), [active, visible]);
+  return /* @__PURE__ */ jsx6(TabStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx6(LeaveTab.Provider, { value: leave, children: /* @__PURE__ */ jsx6(TabHistoryContext.Provider, { value: history2, children }) }) });
+}
 function TabPanel({
   tab,
   hidden,
@@ -1639,8 +1921,8 @@ function TabPanel({
 }) {
   const ids = useWorkspaceIds();
   const { height, borderWidth } = useTabSize();
-  const viewport = useRef5(null);
-  useLayoutEffect4(() => {
+  const viewport = useRef9(null);
+  useLayoutEffect8(() => {
     viewport.current?.scrollTo(0, 0);
   }, [tab?.scrollKey]);
   return (
@@ -1683,9 +1965,9 @@ function TabPanel({
 
 // workspace-frame.tsx
 import {
-  useLayoutEffect as useLayoutEffect5,
-  useRef as useRef6,
-  useState as useState5
+  useLayoutEffect as useLayoutEffect9,
+  useRef as useRef10,
+  useState as useState6
 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function WorkspaceFrame({
@@ -1693,17 +1975,17 @@ function WorkspaceFrame({
   change,
   children
 }) {
-  const viewport = useRef6(null);
-  const drag = useRef6(void 0);
-  const [available, setAvailable] = useState5(0);
-  const [draft, setDraft] = useState5();
+  const viewport = useRef10(null);
+  const drag = useRef10(void 0);
+  const [available, setAvailable] = useState6(0);
+  const [draft, setDraft] = useState6();
   const compact = Math.min(1600, available);
   const width = draft ?? (expanded ? available : compact);
   const cancel = () => {
     drag.current = void 0;
     setDraft(void 0);
   };
-  useLayoutEffect5(() => {
+  useLayoutEffect9(() => {
     const observer = new ResizeObserver(() => {
       setAvailable(viewport.current.clientWidth);
       cancel();
@@ -1790,10 +2072,10 @@ function WorkspaceFrame({
 
 // window.tsx
 import {
-  useEffect as useEffect3,
-  useLayoutEffect as useLayoutEffect6,
-  useRef as useRef7,
-  useState as useState6
+  useEffect as useEffect5,
+  useLayoutEffect as useLayoutEffect10,
+  useRef as useRef11,
+  useState as useState7
 } from "react";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var client = typeof window !== "undefined";
@@ -1807,8 +2089,8 @@ var setFullscreen = (host, on) => {
 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 [full, setFull] = useState7(() => isFullscreen(host));
+  useEffect5(() => {
     const update = () => setFull(isFullscreen(host));
     update();
     window.addEventListener("resize", update);
@@ -1821,7 +2103,7 @@ function useFullscreen(host) {
   return [full, (on) => setFullscreen(host, on)];
 }
 function useWindowFrame(host) {
-  useEffect3(() => {
+  useEffect5(() => {
     if (!host) return;
     const root = document.documentElement;
     let armed = false;
@@ -1857,7 +2139,7 @@ function useWindowFrame(host) {
     const dblclick = (event) => {
       if (draggable(event.target)) host.toggleMaximize();
     };
-    const key = (event) => {
+    const key2 = (event) => {
       const shortcut = host.platform === "macos" ? event.ctrlKey && event.metaKey && event.code === "KeyF" : event.key === "F11";
       if (!host.fullscreen || !shortcut) return;
       event.preventDefault();
@@ -1867,13 +2149,13 @@ function useWindowFrame(host) {
     window.addEventListener("mousedown", down);
     window.addEventListener("mouseup", up);
     window.addEventListener("dblclick", dblclick);
-    window.addEventListener("keydown", key);
+    window.addEventListener("keydown", key2);
     return () => {
       window.removeEventListener("mousemove", move);
       window.removeEventListener("mousedown", down);
       window.removeEventListener("mouseup", up);
       window.removeEventListener("dblclick", dblclick);
-      window.removeEventListener("keydown", key);
+      window.removeEventListener("keydown", key2);
       if (cursor) root.style.cursor = "";
     };
   }, [host]);
@@ -1891,18 +2173,47 @@ var glyph = (children) => /* @__PURE__ */ jsx8(
     children
   }
 );
+function TrafficLights({ host }) {
+  const [full] = useFullscreen(host);
+  const spacer = useRef11(null);
+  const shown = host.platform === "macos" && !full;
+  useLayoutEffect10(() => {
+    const element = spacer.current;
+    const toolbar = element?.closest(".lab-toolbar");
+    if (!element || !toolbar || !host.trafficLights) return;
+    const place = () => {
+      const center = toolbar.getBoundingClientRect().bottom / 2;
+      host.trafficLights(center);
+      const end = center * 2 + 46;
+      const gap = parseFloat(getComputedStyle(toolbar).columnGap) || 0;
+      element.style.width = `${end - element.getBoundingClientRect().left - gap}px`;
+    };
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(toolbar);
+    return () => observer.disconnect();
+  }, [host, shown]);
+  return shown ? /* @__PURE__ */ jsx8("div", { ref: spacer, className: "lab-traffic-lights" }) : null;
+}
+function desktopSlots(host, menu) {
+  const place = (align) => typeof menu === "function" ? menu(align) : menu;
+  if (!host) return { leading: place("start"), trailing: void 0 };
+  if (host.platform === "macos")
+    return { leading: /* @__PURE__ */ jsx8(TrafficLights, { host }), trailing: place("end") };
+  return { leading: place("start"), trailing: /* @__PURE__ */ jsx8(WindowControls, { host }) };
+}
 function WindowControls({ host }) {
   const [full] = useFullscreen(host);
-  const [max, setMax] = useState6(maximized);
-  const [top, setTop] = useState6(0);
-  const spacer = useRef7(null);
+  const [max, setMax] = useState7(maximized);
+  const [top, setTop] = useState7(0);
+  const spacer = useRef11(null);
   const hidden = host.platform === "macos" || full;
   const measure = () => {
     setMax(maximized());
     if (spacer.current) setTop(spacer.current.getBoundingClientRect().top);
   };
-  useLayoutEffect6(measure);
-  useEffect3(() => {
+  useLayoutEffect10(measure);
+  useEffect5(() => {
     window.addEventListener("resize", measure);
     return () => window.removeEventListener("resize", measure);
   }, []);
@@ -1952,16 +2263,25 @@ function WindowControls({ host }) {
   );
 }
 export {
+  TrafficLights,
   WindowControls,
   Workspace,
   WorkspaceFrame,
   densityPresets,
   densitySize,
+  desktopSlots,
   dockTab,
+  hasOpenOverlay,
   panes,
   reconcileLayout,
   restoreLayout,
   useFullscreen,
+  useLeaveTab,
+  useShownOnce,
+  useTabActive,
+  useTabHistory,
+  useTabVisible,
+  useTabVisibleRef,
   useUnsavedChanges,
   useWindowFrame
 };