efficient-shell 0.0.0 → 4.126.3

package/dist/page-tabs/index.js

@@ -0,0 +1,706 @@
+import { useShellStrings, PopupMenu, PopupMenuItem, PopupMenuDivider } from '../chunk-7KIOEKHS.js';
+import { confirm } from '../chunk-HYZ5QMVO.js';
+import '../chunk-3CUSBZWG.js';
+import * as ReactModule from 'react';
+import { createContext, memo, useRef, useLayoutEffect, useEffect, useMemo, useId, useCallback, useReducer, useContext, useState, Fragment as Fragment$1 } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var PageTabsContext = createContext(null);
+var PageTabFrameContext = createContext(null);
+
+// src/page-tabs/tabsModel.ts
+var DEFAULT_MAX_TABS = 12;
+function emptyState() {
+  return { tabs: [], activeKey: null, mounted: [], dirty: [], closing: null, clock: 0 };
+}
+var without = (list, key) => list.filter((k) => k !== key);
+var withKey = (list, key) => list.includes(key) ? list : [...list, key];
+function orderPinned(tabs, pinnedKeys) {
+  const pinned = pinnedKeys.map((key) => tabs.find((t) => t.key === key)).filter((t) => Boolean(t));
+  return [...pinned, ...tabs.filter((t) => !pinnedKeys.includes(t.key))];
+}
+function visit(state, entry, maxTabs = DEFAULT_MAX_TABS) {
+  const clock = state.clock + 1;
+  const existing = state.tabs.find((t) => t.key === entry.key);
+  let tabs;
+  if (existing) {
+    tabs = state.tabs.map(
+      (t) => t.key === entry.key ? {
+        ...t,
+        path: entry.path,
+        title: t.titleFrom === "page" ? t.title : entry.title || t.title,
+        lastActive: clock
+      } : t
+    );
+  } else {
+    tabs = [
+      ...state.tabs,
+      { key: entry.key, path: entry.path, title: entry.title, titleFrom: "route", pinned: false, lastActive: clock }
+    ];
+  }
+  let next = {
+    ...state,
+    tabs,
+    activeKey: entry.key,
+    mounted: withKey(state.mounted, entry.key),
+    clock
+  };
+  if (next.closing && next.closing !== entry.key) next = removeTab(next, next.closing);
+  else if (next.closing === entry.key) next = { ...next, closing: null };
+  return evictOverflow(next, maxTabs);
+}
+function visitTransient(state) {
+  let next = { ...state, activeKey: null };
+  if (next.closing) next = removeTab(next, next.closing);
+  return next;
+}
+function evictOverflow(state, maxTabs) {
+  let next = state;
+  while (next.tabs.length > maxTabs) {
+    const candidates = next.tabs.filter((t) => !t.pinned && t.key !== next.activeKey && !next.dirty.includes(t.key) && t.key !== next.closing).sort((a, b) => a.lastActive - b.lastActive);
+    if (candidates.length === 0) break;
+    next = removeTab(next, candidates[0].key);
+  }
+  return next;
+}
+function removeTab(state, key) {
+  return {
+    ...state,
+    tabs: state.tabs.filter((t) => t.key !== key),
+    mounted: without(state.mounted, key),
+    dirty: without(state.dirty, key),
+    activeKey: state.activeKey === key ? null : state.activeKey,
+    closing: state.closing === key ? null : state.closing
+  };
+}
+function neighbourOf(state, key) {
+  const visible = state.tabs.filter((t) => t.key !== state.closing || t.key === key);
+  const i = visible.findIndex((t) => t.key === key);
+  if (i < 0) return null;
+  return visible[i + 1] ?? visible[i - 1] ?? null;
+}
+function beginClose(state, key) {
+  return { ...state, closing: key };
+}
+function keysToClose(state, scope, key) {
+  const closable = state.tabs.filter((t) => !t.pinned);
+  if (scope === "all") return closable.map((t) => t.key);
+  if (scope === "others") return closable.filter((t) => t.key !== key).map((t) => t.key);
+  const i = state.tabs.findIndex((t) => t.key === key);
+  if (i < 0) return [];
+  return state.tabs.slice(i + 1).filter((t) => !t.pinned).map((t) => t.key);
+}
+function setTitle(state, key, title) {
+  const tab = state.tabs.find((t) => t.key === key);
+  if (!tab || !title || tab.title === title && tab.titleFrom === "page") return state;
+  return {
+    ...state,
+    tabs: state.tabs.map((t) => t.key === key ? { ...t, title, titleFrom: "page" } : t)
+  };
+}
+function setDirty(state, key, dirty) {
+  const has = state.dirty.includes(key);
+  if (dirty === has) return state;
+  return { ...state, dirty: dirty ? [...state.dirty, key] : without(state.dirty, key) };
+}
+function ensurePinned(state, pinned) {
+  const pinnedKeys = pinned.map((p) => p.key);
+  let tabs = state.tabs.map((t) => ({ ...t, pinned: pinnedKeys.includes(t.key) }));
+  for (const p of pinned) {
+    if (!tabs.some((t) => t.key === p.key)) {
+      tabs = [...tabs, { key: p.key, path: p.path, title: p.title, titleFrom: "route", pinned: true, lastActive: 0 }];
+    }
+  }
+  return { ...state, tabs: orderPinned(tabs, pinnedKeys) };
+}
+function serialize(state) {
+  const stored = {
+    v: 1,
+    tabs: state.tabs.filter((t) => t.key !== state.closing).map(({ key, path, title, titleFrom }) => ({ key, path, title, titleFrom }))
+  };
+  return JSON.stringify(stored);
+}
+function restore(raw, resolve) {
+  if (!raw) return [];
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return [];
+  }
+  const stored = parsed;
+  if (!stored || stored.v !== 1 || !Array.isArray(stored.tabs)) return [];
+  const out = [];
+  for (const item of stored.tabs) {
+    if (!item || typeof item.path !== "string" || !item.path.startsWith("/") || item.path.startsWith("//")) continue;
+    const hashAt = item.path.indexOf("#");
+    const path = hashAt >= 0 ? item.path.slice(0, hashAt) : item.path;
+    const entry = resolve(path);
+    if (!entry || out.some((t) => t.key === entry.key)) continue;
+    const pageTitle = item.titleFrom === "page" && typeof item.title === "string" && item.title;
+    out.push({
+      key: entry.key,
+      path,
+      title: pageTitle || entry.title,
+      titleFrom: pageTitle ? "page" : "route",
+      pinned: false,
+      lastActive: 0
+    });
+  }
+  return out;
+}
+function reducer(state, action) {
+  switch (action.type) {
+    case "visit":
+      return visit(state, action.entry, action.maxTabs);
+    case "transient":
+      return visitTransient(state);
+    case "close": {
+      let next = state;
+      for (const key of action.keys) next = removeTab(next, key);
+      return action.closing ? beginClose(next, action.closing) : next;
+    }
+    case "title":
+      return setTitle(state, action.key, action.title);
+    case "dirty":
+      return setDirty(state, action.key, action.dirty);
+  }
+}
+var pathOf = (location) => `${location.pathname}${location.search}`;
+function parseTabPath(path) {
+  const hashAt = path.indexOf("#");
+  const hash = hashAt >= 0 ? path.slice(hashAt) : "";
+  const rest = hashAt >= 0 ? path.slice(0, hashAt) : path;
+  const searchAt = rest.indexOf("?");
+  return {
+    pathname: searchAt >= 0 ? rest.slice(0, searchAt) : rest,
+    search: searchAt >= 0 ? rest.slice(searchAt) : "",
+    hash
+  };
+}
+function readStorage(key) {
+  if (!key) return null;
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function PageTabsProvider({
+  children,
+  resolve,
+  pinned = [],
+  storageKey,
+  maxTabs = DEFAULT_MAX_TABS,
+  enabled = true,
+  confirmDiscard
+}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const strings = useShellStrings().pageTabs;
+  const idPrefix = useId();
+  const resolveRef = useRef(resolve);
+  resolveRef.current = resolve;
+  const entryFor = useCallback((loc) => {
+    const route = resolveRef.current(loc);
+    if (!route) return null;
+    return { key: route.key ?? loc.pathname, path: pathOf(loc), title: route.title };
+  }, []);
+  const [state, dispatch] = useReducer(reducer, void 0, () => {
+    const restored = restore(readStorage(storageKey), (path) => entryFor(parseTabPath(path)));
+    const pinnedEntries = pinned.map((path) => entryFor(parseTabPath(path))).filter((e) => Boolean(e));
+    let initial = ensurePinned({ ...emptyState(), tabs: restored }, pinnedEntries);
+    const entry = enabled ? entryFor(location) : null;
+    initial = entry ? visit(initial, entry, maxTabs) : visitTransient(initial);
+    return initial;
+  });
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const locations = useRef(/* @__PURE__ */ new Map());
+  const current = enabled ? entryFor(location) : null;
+  const currentKey = current?.key ?? null;
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const entry = entryFor(location);
+    if (entry) {
+      locations.current.set(entry.key, location);
+      dispatch({ type: "visit", entry, maxTabs });
+    } else {
+      dispatch({ type: "transient" });
+    }
+  }, [location, enabled, maxTabs, entryFor]);
+  useEffect(() => {
+    const open = new Set(state.tabs.map((t) => t.key));
+    for (const key of locations.current.keys()) if (!open.has(key)) locations.current.delete(key);
+  }, [state.tabs]);
+  const serialized = useMemo(() => serialize(state), [state]);
+  useEffect(() => {
+    if (!storageKey) return;
+    try {
+      localStorage.setItem(storageKey, serialized);
+    } catch {
+    }
+  }, [serialized, storageKey]);
+  const anyDirty = state.dirty.length > 0;
+  useEffect(() => {
+    if (!anyDirty) return;
+    const hold = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", hold);
+    return () => window.removeEventListener("beforeunload", hold);
+  }, [anyDirty]);
+  const ids = useRef(/* @__PURE__ */ new Map());
+  const idFor = useCallback(
+    (key, part) => {
+      let n = ids.current.get(key);
+      if (n === void 0) {
+        n = ids.current.size;
+        ids.current.set(key, n);
+      }
+      return `${idPrefix}-page-${part}-${n}`;
+    },
+    [idPrefix]
+  );
+  const askDiscard = useCallback(
+    (tabs) => {
+      if (confirmDiscard) return confirmDiscard(tabs);
+      return confirm({
+        title: strings.discardTitle,
+        message: tabs.length === 1 ? strings.discardOne : `${tabs.length} ${strings.discardMany}`,
+        confirmLabel: strings.discardConfirm,
+        cancelLabel: strings.keepEditing,
+        variant: "warning"
+      });
+    },
+    [confirmDiscard, strings]
+  );
+  const fallbackPath = useCallback(() => {
+    const s = stateRef.current;
+    return s.tabs.find((t) => t.pinned)?.path ?? "/";
+  }, []);
+  const closeNow = useCallback(
+    (keys, to, prefer) => {
+      const s = stateRef.current;
+      const active = s.activeKey;
+      if (!active || !keys.includes(active)) {
+        dispatch({ type: "close", keys, closing: null });
+        return;
+      }
+      let target = to;
+      if (!target) {
+        const survivors = { ...s, tabs: s.tabs.filter((t) => t.key === active || !keys.includes(t.key)) };
+        const preferred = prefer ? s.tabs.find((t) => t.key === prefer && !keys.includes(t.key)) : void 0;
+        target = (preferred ?? neighbourOf(survivors, active))?.path ?? fallbackPath();
+      }
+      dispatch({ type: "close", keys: keys.filter((k) => k !== active), closing: active });
+      navigate(target);
+    },
+    [navigate, fallbackPath]
+  );
+  const close = useCallback(
+    async (key, options = {}) => {
+      const tab = stateRef.current.tabs.find((t) => t.key === key);
+      if (!tab || tab.pinned) {
+        if (options.to) navigate(options.to);
+        return false;
+      }
+      if (!options.force && stateRef.current.dirty.includes(key) && !await askDiscard([tab])) return false;
+      if (!stateRef.current.tabs.some((t) => t.key === key)) return false;
+      closeNow([key], options.to);
+      return true;
+    },
+    [askDiscard, closeNow, navigate]
+  );
+  const closeMany = useCallback(
+    async (scope, key) => {
+      let keys = keysToClose(stateRef.current, scope, key);
+      const dirty = stateRef.current.tabs.filter(
+        (t) => keys.includes(t.key) && stateRef.current.dirty.includes(t.key)
+      );
+      if (dirty.length && !await askDiscard(dirty)) {
+        keys = keys.filter((k) => !dirty.some((t) => t.key === k));
+      }
+      const open = new Set(stateRef.current.tabs.map((t) => t.key));
+      keys = keys.filter((k) => open.has(k));
+      if (keys.length) closeNow(keys, void 0, scope === "all" ? null : key);
+    },
+    [askDiscard, closeNow]
+  );
+  const activate = useCallback(
+    (key) => {
+      const tab = stateRef.current.tabs.find((t) => t.key === key);
+      if (!tab || key === stateRef.current.activeKey) return;
+      navigate(tab.path);
+    },
+    [navigate]
+  );
+  const setTitle2 = useCallback((key, title) => dispatch({ type: "title", key, title }), []);
+  const setDirty2 = useCallback((key, dirty) => dispatch({ type: "dirty", key, dirty }), []);
+  const keyFor = useCallback((loc) => entryFor(loc)?.key ?? null, [entryFor]);
+  const locationFor = useCallback((key) => locations.current.get(key), []);
+  const visibleTabs = useMemo(
+    () => enabled ? state.tabs.filter((t) => t.key !== state.closing) : [],
+    [enabled, state.tabs, state.closing]
+  );
+  const value = useMemo(
+    () => ({
+      enabled,
+      state,
+      currentKey,
+      resolve,
+      keyFor,
+      locationFor,
+      idFor,
+      activate,
+      close,
+      closeMany,
+      setTitle: setTitle2,
+      setDirty: setDirty2,
+      visibleTabs
+    }),
+    [enabled, state, currentKey, resolve, keyFor, locationFor, idFor, activate, close, closeMany, setTitle2, setDirty2, visibleTabs]
+  );
+  return /* @__PURE__ */ jsx(PageTabsContext.Provider, { value, children });
+}
+var Activity2 = ReactModule.Activity;
+var PAGE_TABS_PAUSE_HIDDEN = Boolean(Activity2);
+function KeepAlive({ active, children }) {
+  if (Activity2) return /* @__PURE__ */ jsx(Activity2, { mode: active ? "visible" : "hidden", children });
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var sameFrame = (a, b) => a.active === b.active && a.location === b.location && a.className === b.className && a.panelId === b.panelId && a.tabId === b.tabId && (!b.active || a.render === b.render);
+var TabFrame = memo(function TabFrame2({ tabKey, active, location, render, className, panelId, tabId }) {
+  const ref = useRef(null);
+  const activeRef = useRef(active);
+  const scrolls = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const wasActive = activeRef.current;
+    activeRef.current = active;
+    if (!active || wasActive) return;
+    for (const [el, [top, left]] of scrolls.current) {
+      if (!el.isConnected) {
+        scrolls.current.delete(el);
+        continue;
+      }
+      el.scrollTop = top;
+      el.scrollLeft = left;
+    }
+  }, [active]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onScroll = (e) => {
+      if (!activeRef.current) return;
+      const target = e.target;
+      if (!target || typeof target.scrollTop !== "number") return;
+      scrolls.current.set(target, [target.scrollTop, target.scrollLeft]);
+    };
+    el.addEventListener("scroll", onScroll, true);
+    return () => el.removeEventListener("scroll", onScroll, true);
+  }, []);
+  const frame = useMemo(() => ({ key: tabKey, activeRef }), [tabKey]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: panelId ? "tabpanel" : void 0,
+      id: panelId,
+      "aria-labelledby": tabId,
+      hidden: !active,
+      style: active ? void 0 : { display: "none" },
+      className,
+      "data-page-tab": tabKey,
+      children: /* @__PURE__ */ jsx(PageTabFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(KeepAlive, { active, children: render(location) }) })
+    }
+  );
+}, sameFrame);
+var TRANSIENT = "\0transient";
+function PageTabsOutlet({ children, frameClassName }) {
+  const ctx = useContext(PageTabsContext);
+  const location = useLocation();
+  if (!ctx || !ctx.enabled) {
+    return /* @__PURE__ */ jsx("div", { className: frameClassName, children: children(location) }, TRANSIENT);
+  }
+  const { state, currentKey, locationFor, idFor } = ctx;
+  const keys = state.tabs.filter((t) => state.mounted.includes(t.key)).map((t) => t.key);
+  if (currentKey && !keys.includes(currentKey)) keys.push(currentKey);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    keys.map((key) => {
+      const active = key === currentKey;
+      const loc = active ? location : locationFor(key);
+      if (!loc) return null;
+      return /* @__PURE__ */ jsx(
+        TabFrame,
+        {
+          tabKey: key,
+          active,
+          location: loc,
+          render: children,
+          className: frameClassName,
+          panelId: idFor(key, "panel"),
+          tabId: idFor(key, "tab")
+        },
+        key
+      );
+    }),
+    !currentKey && /* @__PURE__ */ jsx(TabFrame, { tabKey: TRANSIENT, active: true, location, render: children, className: frameClassName }, TRANSIENT)
+  ] });
+}
+var STRIP = "relative flex h-10 shrink-0 items-end gap-3 bg-gray-100 px-3";
+var TABLIST = "flex min-w-0 flex-1 items-end overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+var TAB_BASE = "group @container relative flex h-9 flex-[0_1_15rem] items-center rounded-t-md border border-b-0 text-[13px] transition-colors";
+var TAB_FLOOR_IDLE = "min-w-[2.75rem]";
+var TAB_FLOOR_ACTIVE = "min-w-[4.25rem]";
+var TAB_PINNED = "group relative flex h-9 flex-none items-center justify-center rounded-t-md border border-b-0 transition-colors";
+var TAB_ACTIVE = "z-[1] border-gray-200 bg-gray-50 text-gray-900";
+var TAB_IDLE = "border-transparent text-gray-600 hover:bg-gray-200/70 hover:text-gray-900";
+var TITLE = "min-w-0 flex-1 overflow-hidden whitespace-nowrap [mask-image:linear-gradient(to_right,#000_calc(100%-1rem),transparent)]";
+var ICON_WRAP = "relative flex size-4 shrink-0 items-center justify-center text-gray-500 [&>svg]:size-4";
+var FOCUS_RING = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500";
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", className: "size-3.5", children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) });
+}
+function PageTabBar({ className, activeClassName, end }) {
+  const ctx = useContext(PageTabsContext);
+  const strings = useShellStrings().pageTabs;
+  const stripRef = useRef(null);
+  const [menu, setMenu] = useState(null);
+  const activeKey = ctx?.currentKey ?? null;
+  useEffect(() => {
+    if (!ctx || !activeKey) return;
+    const el = document.getElementById(ctx.idFor(activeKey, "tab"));
+    el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [ctx, activeKey]);
+  if (!ctx || !ctx.enabled) return null;
+  const { visibleTabs: tabs, state, idFor, activate, close, closeMany, resolve } = ctx;
+  const focusKey = tabs.some((t) => t.key === activeKey) ? activeKey : tabs[0]?.key;
+  const focusTab = (index) => {
+    const tab = tabs[(index + tabs.length) % tabs.length];
+    if (tab) document.getElementById(idFor(tab.key, "tab"))?.focus();
+  };
+  const onKeyDown = (e) => {
+    const i = tabs.findIndex((t) => document.getElementById(idFor(t.key, "tab")) === e.target);
+    if (i < 0) return;
+    if (e.key === "ArrowRight") focusTab(i + 1);
+    else if (e.key === "ArrowLeft") focusTab(i - 1);
+    else if (e.key === "Home") focusTab(0);
+    else if (e.key === "End") focusTab(tabs.length - 1);
+    else if (e.key === "Delete" && !tabs[i].pinned) void close(tabs[i].key);
+    else return;
+    e.preventDefault();
+  };
+  const onContextMenu = (e, tab) => {
+    e.preventDefault();
+    setMenu({ x: e.clientX, y: e.clientY, key: tab.key });
+  };
+  const onAuxClick = (e, tab) => {
+    if (e.button !== 1 || tab.pinned) return;
+    e.preventDefault();
+    void close(tab.key);
+  };
+  const menuTab = menu ? tabs.find((t) => t.key === menu.key) : void 0;
+  const menuIndex = menuTab ? tabs.indexOf(menuTab) : -1;
+  const closable = (list) => list.some((t) => !t.pinned);
+  const run = (fn) => () => {
+    setMenu(null);
+    void fn();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: className ?? STRIP, children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gray-200" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: stripRef,
+        role: "tablist",
+        "aria-label": strings.label,
+        onKeyDown,
+        className: TABLIST,
+        children: tabs.map((tab, i) => {
+          const active = tab.key === activeKey;
+          const dirty = state.dirty.includes(tab.key);
+          const icon = resolve(parseTabPath(tab.path))?.icon;
+          const colours = active ? activeClassName ?? TAB_ACTIVE : TAB_IDLE;
+          const divider = i > 0 && !active && tabs[i - 1].key !== activeKey;
+          const tabButton = {
+            type: "button",
+            role: "tab",
+            id: idFor(tab.key, "tab"),
+            "aria-selected": active,
+            "aria-controls": state.mounted.includes(tab.key) ? idFor(tab.key, "panel") : void 0,
+            tabIndex: tab.key === focusKey ? 0 : -1,
+            title: tab.title,
+            onClick: () => activate(tab.key)
+          };
+          const handlers = {
+            onContextMenu: (e) => onContextMenu(e, tab),
+            onAuxClick: (e) => onAuxClick(e, tab),
+            // A middle-press would otherwise start the browser's autoscroll.
+            onMouseDown: (e) => {
+              if (e.button === 1) e.preventDefault();
+            }
+          };
+          const iconEl = icon && // The consumer's nav icons, whatever size they were drawn at for
+          // the sidebar, sit at the strip's size here.
+          /* @__PURE__ */ jsxs("span", { className: ICON_WRAP, "aria-hidden": "true", children: [
+            icon,
+            dirty && !active && !tab.pinned && // Unsaved work on a tab too narrow for its × slot: the dot
+            // moves onto the icon.
+            /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 hidden size-2 rounded-full bg-gray-500 ring-2 ring-gray-100 @max-[6.5rem]:block @max-[6.5rem]:group-hover:hidden" })
+          ] });
+          if (tab.pinned) {
+            return /* @__PURE__ */ jsx("div", { role: "presentation", className: `${TAB_PINNED} ${icon ? "w-10" : ""} ${colours}`, ...handlers, children: /* @__PURE__ */ jsxs("button", { ...tabButton, className: `flex h-full items-center justify-center rounded-t-md ${icon ? "w-full" : "px-3"} ${FOCUS_RING}`, children: [
+              iconEl,
+              /* @__PURE__ */ jsx("span", { className: icon ? "sr-only" : "whitespace-nowrap text-[13px]", children: tab.title })
+            ] }) }, tab.key);
+          }
+          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            divider && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "mb-2.5 h-4 w-px shrink-0 self-end border-l border-gray-300" }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "presentation",
+                className: `${TAB_BASE} ${active ? TAB_FLOOR_ACTIVE : TAB_FLOOR_IDLE} ${colours}`,
+                ...handlers,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ...tabButton,
+                      className: `flex h-full min-w-0 flex-1 items-center gap-2 rounded-t-md pl-3 pr-1 text-left ${FOCUS_RING} ${active ? "@max-[5rem]:pl-2.5" : "@max-[6.5rem]:pr-3 @max-[6.5rem]:group-hover:pr-1 @max-[4.5rem]:justify-center @max-[4.5rem]:px-0 @max-[4.5rem]:group-hover:pl-1.5"}`,
+                      children: [
+                        iconEl,
+                        /* @__PURE__ */ jsx("span", { className: `${TITLE} ${icon ? active ? "@max-[5rem]:sr-only" : "@max-[4.5rem]:sr-only" : ""}`, children: tab.title })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: `mr-1.5 flex size-5 shrink-0 items-center justify-center ${active ? "" : "@max-[6.5rem]:hidden @max-[6.5rem]:group-hover:flex"}`,
+                      children: [
+                        dirty && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            role: "img",
+                            "aria-label": strings.unsaved,
+                            className: "size-2 rounded-full bg-gray-500 group-hover:hidden"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            tabIndex: -1,
+                            "aria-label": `${strings.close} ${tab.title}`,
+                            onClick: () => void close(tab.key),
+                            className: `size-5 items-center justify-center rounded text-gray-400 hover:bg-gray-200 hover:text-gray-700 ${dirty ? "hidden group-hover:flex" : active ? "flex" : "flex opacity-0 group-hover:opacity-100 focus-visible:opacity-100"}`,
+                            children: /* @__PURE__ */ jsx(CloseIcon, {})
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] }, tab.key);
+        })
+      }
+    ),
+    end && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 self-center", children: end }),
+    menu && menuTab && /* @__PURE__ */ jsxs(PopupMenu, { portal: true, style: { left: menu.x, top: menu.y }, onClose: () => setMenu(null), children: [
+      /* @__PURE__ */ jsx(PopupMenuItem, { disabled: menuTab.pinned, onClick: run(() => close(menuTab.key)), children: strings.close }),
+      /* @__PURE__ */ jsx(PopupMenuDivider, {}),
+      /* @__PURE__ */ jsx(
+        PopupMenuItem,
+        {
+          disabled: !closable(tabs.filter((t) => t.key !== menuTab.key)),
+          onClick: run(() => closeMany("others", menuTab.key)),
+          children: strings.closeOthers
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PopupMenuItem,
+        {
+          disabled: !closable(tabs.slice(menuIndex + 1)),
+          onClick: run(() => closeMany("right", menuTab.key)),
+          children: strings.closeRight
+        }
+      ),
+      /* @__PURE__ */ jsx(PopupMenuItem, { disabled: !closable(tabs), onClick: run(() => closeMany("all", null)), children: strings.closeAll })
+    ] })
+  ] });
+}
+var NO_TABS = {
+  enabled: false,
+  tabs: [],
+  activeKey: null,
+  activate: () => {
+  },
+  close: async () => false,
+  closeOthers: async () => {
+  },
+  closeRight: async () => {
+  },
+  closeAll: async () => {
+  }
+};
+function usePageTabs() {
+  const ctx = useContext(PageTabsContext);
+  if (!ctx || !ctx.enabled) return NO_TABS;
+  return {
+    enabled: true,
+    tabs: ctx.visibleTabs,
+    activeKey: ctx.currentKey,
+    activate: ctx.activate,
+    close: ctx.close,
+    closeOthers: (key) => ctx.closeMany("others", key),
+    closeRight: (key) => ctx.closeMany("right", key),
+    closeAll: () => ctx.closeMany("all", null)
+  };
+}
+function usePageTab() {
+  const ctx = useContext(PageTabsContext);
+  const frame = useContext(PageTabFrameContext);
+  const navigate = useNavigate();
+  const key = ctx?.enabled && frame ? frame.key : null;
+  const close = useCallback(
+    async (options = {}) => {
+      if (ctx?.enabled && frame && ctx.state.tabs.some((t) => t.key === frame.key)) {
+        return ctx.close(frame.key, options);
+      }
+      if (options.to) navigate(options.to);
+      return false;
+    },
+    [ctx, frame, navigate]
+  );
+  return { key, close };
+}
+function usePageTabTitle(title) {
+  const ctx = useContext(PageTabsContext);
+  const frame = useContext(PageTabFrameContext);
+  const setTitle2 = ctx?.enabled ? ctx.setTitle : void 0;
+  const key = frame?.key;
+  useEffect(() => {
+    if (setTitle2 && key && title) setTitle2(key, title);
+  }, [setTitle2, key, title]);
+}
+function usePageTabDirty(dirty) {
+  const ctx = useContext(PageTabsContext);
+  const frame = useContext(PageTabFrameContext);
+  const setDirty2 = ctx?.enabled ? ctx.setDirty : void 0;
+  useEffect(() => {
+    if (!setDirty2 || !frame) return;
+    setDirty2(frame.key, dirty);
+    return () => {
+      if (frame.activeRef.current) setDirty2(frame.key, false);
+    };
+  }, [setDirty2, frame, dirty]);
+}
+
+export { DEFAULT_MAX_TABS, PAGE_TABS_PAUSE_HIDDEN, PageTabBar, PageTabsOutlet, PageTabsProvider, parseTabPath, usePageTab, usePageTabDirty, usePageTabTitle, usePageTabs };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map