@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/source/components/layout/tabGroups/tabGroups.jsx

@@ -0,0 +1,1117 @@
+import {
+  For,
+  Show,
+  children as resolveChildren,
+  createComputed,
+  createEffect,
+  createMemo,
+  createRenderEffect,
+  createSignal,
+  createUniqueId,
+  mapArray,
+  on,
+  onCleanup,
+  onMount,
+  splitProps
+} from "solid-js";
+import { isServer } from "solid-js/web";
+import cn from "clsx";
+import { Tabs } from "../../navigation/tabs/tabs";
+import { Tab } from "../../navigation/tabs/tab/tab";
+import { Menu } from "../../navigation/menu/menu";
+import { MenuItem } from "../../navigation/menu/menuItem";
+import { Icon } from "../../base/icon";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { callHandler } from "../../../primitives/callHandler";
+import { matchesKeyboardShortcut } from "../../../utils/keyboardShortcut";
+import { throttle } from "../../../utils/throttle";
+import {
+  TAB_GROUPS_LABELS,
+  adjacentGroup,
+  computeTabGroupsGrid,
+  createTabGroupsLayout,
+  describeTabGroupsChange,
+  dropZoneAt,
+  findGroupOfTab,
+  getGroups,
+  gridTemplateColumns,
+  gridTemplateRows,
+  groupBodyArea,
+  groupHeaderArea,
+  moveTab,
+  moveTabInDirection,
+  removeTab,
+  resizeSplit,
+  selectTab,
+  separatorArea,
+  setActiveGroup
+} from "./tabGroupsLayout";
+import {
+  containsDeep,
+  deepActiveElement,
+  focusFromEnd,
+  frameExitTarget,
+  lastStopOf,
+  ownGroupIdOf,
+  ownerRootOf,
+  tabMove
+} from "./tabGroupsFocus";
+const CHORD_SHORTCUTS = [
+  "Alt+Shift+ArrowLeft",
+  "Alt+Shift+ArrowRight",
+  "Alt+Shift+ArrowUp",
+  "Alt+Shift+ArrowDown",
+  "Control+Shift+ArrowLeft",
+  "Meta+Shift+ArrowLeft",
+  "Control+Shift+ArrowRight",
+  "Meta+Shift+ArrowRight"
+].join(" ");
+const DIRECTION_CHORDS = [
+  ["left", ["Alt", "Shift", "ArrowLeft"]],
+  ["right", ["Alt", "Shift", "ArrowRight"]],
+  ["top", ["Alt", "Shift", "ArrowUp"]],
+  ["bottom", ["Alt", "Shift", "ArrowDown"]]
+];
+const FIRST_MENU_ITEM = '[role^="menuitem"]:not([aria-disabled="true"])';
+function groupIdOf(node) {
+  let current = node ?? null;
+  while (current) {
+    const id = current.getAttribute("data-group-id");
+    if (id !== null) return id;
+    current = current.parentElement;
+  }
+  return null;
+}
+function tabItemOf(tab) {
+  return tab.closest(".smwb-tab-item") ?? tab;
+}
+function tabElementOf(target) {
+  if (!target) return null;
+  const direct = target.closest('[role="tab"]');
+  if (direct) return direct;
+  const item = target.closest(".smwb-tab-item");
+  return item?.querySelector('[role="tab"]') ?? null;
+}
+function findSplitNode(root, id) {
+  if (root.type === "group") return void 0;
+  if (root.id === id) return root;
+  for (const child of root.children) {
+    const found = findSplitNode(child, id);
+    if (found) return found;
+  }
+  return void 0;
+}
+function groupIdsOf(node) {
+  return node.type === "group" ? [node.id] : node.children.flatMap(groupIdsOf);
+}
+function readingKeys(root) {
+  const keys = [];
+  const walk = (node) => {
+    if (node.type === "group") {
+      keys.push(`h:${node.id}`, `p:${node.id}`);
+      return;
+    }
+    node.children.forEach((child, index) => {
+      walk(child);
+      if (index < node.children.length - 1) keys.push(`s:${node.id}:${index}`);
+    });
+  };
+  walk(root);
+  return keys;
+}
+function placeChildren(parent, next, previous) {
+  const wanted = new Set(next);
+  previous.forEach((node) => {
+    if (!wanted.has(node) && node.parentNode === parent) node.remove();
+  });
+  const children = Array.from(parent.children);
+  const position = /* @__PURE__ */ new Map();
+  children.forEach((child, at) => position.set(child, at));
+  const active = parent.ownerDocument.activeElement;
+  const focused = active === null ? -1 : next.findIndex((node) => node.contains(active));
+  const focusedAt = focused < 0 ? void 0 : position.get(next[focused]);
+  const kept = [];
+  next.forEach((node, i) => {
+    const at = position.get(node);
+    if (at === void 0) return;
+    if (focusedAt !== void 0 && i !== focused && i < focused !== at < focusedAt) return;
+    kept.push(at);
+  });
+  const length = kept.map(() => 1);
+  const before = kept.map(() => -1);
+  let best = -1;
+  kept.forEach((at, k) => {
+    for (let j = 0; j < k; j++) {
+      if (kept[j] < at && length[j] + 1 > length[k]) {
+        length[k] = length[j] + 1;
+        before[k] = j;
+      }
+    }
+    if (best < 0 || length[k] > length[best]) best = k;
+  });
+  const stays = /* @__PURE__ */ new Set();
+  for (let k = best; k >= 0; k = before[k]) stays.add(kept[k]);
+  let anchor = stays.size > 0 ? children[Math.max(...stays)].nextSibling : parent.firstChild;
+  for (let i = next.length - 1; i >= 0; i--) {
+    const node = next[i];
+    const at = position.get(node);
+    if (at === void 0 || !stays.has(at)) parent.insertBefore(node, anchor);
+    anchor = node;
+  }
+}
+function selectedTabsOf(layout) {
+  return getGroups(layout).map((group) => group.active).filter((tab) => tab !== null);
+}
+function TabGroups(props) {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "style",
+    "id",
+    "data-testid",
+    "ref",
+    "layout",
+    "defaultLayout",
+    "onLayoutChange",
+    "getTab",
+    "renderPanel",
+    "onTabClose",
+    "empty",
+    "minGroupSize",
+    "keyboardStep",
+    "groupActions",
+    "dense",
+    "labels",
+    // Wrapped so that the caller's handler still runs, first.
+    "onDragStart",
+    "onDragOver",
+    "onDrop",
+    "onDragEnd",
+    "onFocusIn",
+    "onKeyDown"
+  ]);
+  const generatedId = createUniqueId();
+  const base = () => local.id ?? generatedId;
+  const encode = (id) => encodeURIComponent(id);
+  const tabElementId = (tabId) => `${base()}-tab-${encode(tabId)}`;
+  const panelElementId = (tabId) => `${base()}-panel-${encode(tabId)}`;
+  const menuElementId = (groupId) => `${base()}-menu-${encode(groupId)}`;
+  const headerElementId = (groupId) => `${base()}-header-${encode(groupId)}`;
+  const separatorElementId = (splitId, index) => `${base()}-separator-${encode(splitId)}-${index}`;
+  const statusElementId = () => `${base()}-status`;
+  const minGroupSize = () => local.minGroupSize ?? 120;
+  const keyboardStep = () => local.keyboardStep ?? 5;
+  const withGroupActions = () => local.groupActions !== false;
+  const labels = createMemo(
+    () => ({
+      ...TAB_GROUPS_LABELS,
+      ...local.labels
+    })
+  );
+  const [layout, setLayout] = createControllableState({
+    value: () => local.layout,
+    defaultValue: local.defaultLayout ?? createTabGroupsLayout()
+  });
+  let latest = layout();
+  createComputed(() => {
+    latest = layout();
+  });
+  const grid = createMemo(() => computeTabGroupsGrid(layout()));
+  const groups = createMemo(() => getGroups(layout()));
+  const groupCount = createMemo(() => groups().length);
+  const hasSplit = createMemo(() => groups().length > 1);
+  const selectedTabs = createMemo(() => new Set(selectedTabsOf(layout())));
+  const groupOfTab = createMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    getGroups(layout()).forEach((group) => group.tabs.forEach((tab) => map.set(tab, group.id)));
+    return map;
+  });
+  const groupById = (value, groupId) => getGroups(value).find((group) => group.id === groupId);
+  const indexOfGroup = (groupId) => groups().findIndex((group) => group.id === groupId);
+  const isEmpty = createMemo(() => {
+    const list = groups();
+    return list.length === 1 && (list[0]?.tabs.length ?? 0) === 0;
+  });
+  const groupIds = createMemo(() => groups().map((group) => group.id));
+  const separatorKeys = createMemo(() => readingKeys(layout().root).filter((key) => key.startsWith("s:")));
+  const panelOrder = createMemo((previous) => {
+    const alive = groupOfTab();
+    const order = previous.filter((tab) => alive.has(tab));
+    const placed = new Set(order);
+    groups().forEach(
+      (group) => group.tabs.forEach((tab) => {
+        if (placed.has(tab)) return;
+        placed.add(tab);
+        order.push(tab);
+      })
+    );
+    return order.length === previous.length && order.every((tab, index) => tab === previous[index]) ? previous : order;
+  }, []);
+  const owns = createMemo(() => {
+    if (isEmpty()) return void 0;
+    const value = layout();
+    return [
+      ...readingKeys(value.root).flatMap((key) => {
+        if (key.startsWith("h:")) return [headerElementId(key.slice(2))];
+        if (key.startsWith("p:")) return (groupById(value, key.slice(2))?.tabs ?? []).map(panelElementId);
+        const last = key.lastIndexOf(":");
+        return [separatorElementId(key.slice(2, last), Number(key.slice(last + 1)))];
+      }),
+      statusElementId()
+    ].join(" ");
+  });
+  const [mountedTabs, setMountedTabs] = createSignal(new Set(selectedTabsOf(layout())));
+  if (!isServer) {
+    createEffect(() => {
+      const value = layout();
+      const alive = /* @__PURE__ */ new Set();
+      getGroups(value).forEach((group) => group.tabs.forEach((tab) => alive.add(tab)));
+      const selected = selectedTabsOf(value);
+      setMountedTabs((prev) => {
+        const next = /* @__PURE__ */ new Set();
+        let changed = false;
+        prev.forEach((tab) => {
+          if (alive.has(tab)) next.add(tab);
+          else changed = true;
+        });
+        selected.forEach((tab) => {
+          if (!next.has(tab)) {
+            next.add(tab);
+            changed = true;
+          }
+        });
+        return changed || next.size !== prev.size ? next : prev;
+      });
+    });
+  }
+  const [status, setStatus] = createSignal("");
+  const [openMenu, setOpenMenu] = createSignal(null);
+  const [dragging, setDragging] = createSignal(false);
+  const [dropGroup, setDropGroup] = createSignal(null);
+  const [dropZone, setDropZone] = createSignal(null);
+  const [draggingSeparator, setDraggingSeparator] = createSignal(null);
+  let rootEl;
+  let guardEl;
+  let pendingFocus = null;
+  const reported = /* @__PURE__ */ new WeakMap();
+  let reportCount = 0;
+  let settleQueued = false;
+  let leaving = false;
+  let lastFocus = null;
+  let pointerFocus = false;
+  const announce = (next, change) => {
+    const text = describeTabGroupsChange(change, next, tabTitle, labels());
+    if (text === "") return;
+    setStatus((prev) => prev.replace(/\u00a0+$/, "") === text ? `${text}\xA0` : text);
+  };
+  const armFocus = (tabId, next, gone) => {
+    const group = findGroupOfTab(next, tabId);
+    if (!group) return;
+    pendingFocus = {
+      tab: tabId,
+      group: group.id,
+      index: group.tabs.indexOf(tabId),
+      ...gone === void 0 ? {} : { gone },
+      after: next,
+      base: layout(),
+      from: rootEl ? deepActiveElement(rootEl.ownerDocument) : null
+    };
+  };
+  const stillWaiting = (pending, drawn) => {
+    if (drawn === pending.base) return true;
+    const drawnAt = reported.get(drawn);
+    const askedAt = reported.get(pending.after);
+    return drawnAt !== void 0 && askedAt !== void 0 && drawnAt < askedAt;
+  };
+  const focusPending = () => {
+    const pending = pendingFocus;
+    const drawn = layout();
+    if (!pending || stillWaiting(pending, drawn)) return;
+    const doc = rootEl?.ownerDocument;
+    const group = findGroupOfTab(drawn, pending.tab);
+    const shown = group?.id === pending.group && group.tabs.indexOf(pending.tab) === pending.index && (pending.gone === void 0 || !groupById(drawn, pending.gone));
+    const element = shown ? doc?.getElementById(tabElementId(pending.tab)) : null;
+    if (shown && (!element || groupIdOf(element) !== pending.group)) return;
+    pendingFocus = null;
+    if (!element || !rootEl || !doc) return;
+    const active = deepActiveElement(doc);
+    if (active === element) return;
+    if (active !== null && active !== doc.body && active !== pending.from && !containsDeep(rootEl, active)) return;
+    element.focus();
+  };
+  const commit = (next, change) => {
+    if (next === latest) return;
+    latest = next;
+    reportCount += 1;
+    reported.set(next, reportCount);
+    setLayout(() => next);
+    local.onLayoutChange?.(next, change);
+    announce(next, change);
+    focusPending();
+    if (local.layout !== void 0 && !settleQueued) {
+      settleQueued = true;
+      queueMicrotask(settle);
+    }
+  };
+  const settle = () => {
+    settleQueued = false;
+    if (local.layout === void 0 || latest === layout()) return;
+    latest = layout();
+  };
+  if (!isServer) {
+    createEffect(
+      on(
+        layout,
+        () => {
+          focusPending();
+        },
+        { defer: true }
+      )
+    );
+  }
+  const tabTitle = (tabId) => {
+    const meta = local.getTab(tabId);
+    if (!meta) return tabId;
+    if (meta.title !== void 0) return meta.title;
+    return typeof meta.label === "string" ? meta.label : tabId;
+  };
+  const commitMove = (next, before, tabId, from, options = {}) => {
+    if (next === before) return;
+    const to = findGroupOfTab(next, tabId)?.id;
+    const target = to !== void 0 ? groupById(next, to) : void 0;
+    if (!to || !target) return;
+    const sourceClosed = !getGroups(next).some((group) => group.id === from);
+    const existed = getGroups(before).some((group) => group.id === to);
+    const change = options.edge !== void 0 && !existed ? { type: "split", tab: tabId, from, to, edge: options.edge, sourceClosed } : { type: "move", tab: tabId, from, to, index: target.tabs.indexOf(tabId), sourceClosed };
+    if (options.focus) armFocus(tabId, next);
+    commit(next, change);
+  };
+  const onRowChange = (groupId) => (event, index) => {
+    if (event.type === "drop") return;
+    const current = latest;
+    const group = groupById(current, groupId);
+    const tabId = group?.tabs[index];
+    if (!group || tabId === void 0) return;
+    commit(selectTab(current, tabId), { type: "select", tab: tabId, group: groupId });
+  };
+  const onRowReorder = (groupId) => (from, to) => {
+    const current = latest;
+    const group = groupById(current, groupId);
+    const tabId = group?.tabs[from];
+    if (!group || tabId === void 0) return;
+    commitMove(moveTab(current, tabId, { group: groupId, index: to }), current, tabId, groupId, {
+      focus: dragState?.hadFocus ?? false
+    });
+  };
+  const requestClose = (tabId, event, reason) => {
+    const current = latest;
+    const group = findGroupOfTab(current, tabId);
+    if (!group) return;
+    if (local.onTabClose?.(tabId, event, reason) === false) return;
+    const next = removeTab(current, tabId);
+    if (next === current) return;
+    const groupClosed = !getGroups(next).some((candidate) => candidate.id === group.id);
+    const root = rootEl;
+    const active = root ? deepActiveElement(root.ownerDocument) : null;
+    const focusWasHere = reason === "actions" || root !== void 0 && ownGroupIdOf(root, active) === group.id;
+    const heir = groupClosed && focusWasHere ? adjacentGroup(current, group.id) : void 0;
+    if (heir !== void 0) {
+      const heirTab = groupById(next, heir)?.active;
+      if (heirTab) armFocus(heirTab, next, group.id);
+    }
+    commit(next, { type: "close", tab: tabId, group: group.id, groupClosed });
+  };
+  const onHeaderKeyDown = (groupId) => (event) => {
+    if (event.defaultPrevented || event.repeat || event.isComposing) return;
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const tabEl = target.closest('[role="tab"]');
+    if (!tabEl || groupIdOf(tabEl) !== groupId) return;
+    if (tabEl.getAttribute("aria-disabled") === "true") return;
+    const tabId = tabEl.getAttribute("data-tab-id");
+    if (!tabId) return;
+    const current = latest;
+    const group = groupById(current, groupId);
+    if (!group) return;
+    for (const [edge, keys] of DIRECTION_CHORDS) {
+      if (!matchesKeyboardShortcut(event, keys)) continue;
+      const next = moveTabInDirection(current, tabId, edge);
+      if (next === current) return;
+      event.preventDefault();
+      commitMove(next, current, tabId, groupId, { edge, focus: true });
+      return;
+    }
+    const shift = matchesKeyboardShortcut(event, ["Mod", "Shift", "ArrowLeft"]) ? -1 : matchesKeyboardShortcut(event, ["Mod", "Shift", "ArrowRight"]) ? 1 : 0;
+    if (shift === 0) return;
+    const from = group.tabs.indexOf(tabId);
+    const to = from + shift;
+    if (from < 0 || to < 0 || to >= group.tabs.length) return;
+    event.preventDefault();
+    commitMove(moveTab(current, tabId, { group: groupId, index: to }), current, tabId, groupId, {
+      focus: true
+    });
+  };
+  const focusFirstMenuItem = (groupId) => {
+    const doc = rootEl?.ownerDocument;
+    const item = doc?.getElementById(menuElementId(groupId))?.querySelector(FIRST_MENU_ITEM);
+    item?.focus({ preventScroll: true });
+  };
+  const openGroupMenu = (groupId, byKeyboard) => {
+    setOpenMenu(groupId);
+    if (byKeyboard) focusFirstMenuItem(groupId);
+  };
+  const onTriggerClick = (groupId, event) => {
+    if (openMenu() === groupId) {
+      setOpenMenu(null);
+      return;
+    }
+    openGroupMenu(groupId, event.detail === 0);
+  };
+  const onTriggerKeyDown = (groupId, event) => {
+    if (event.defaultPrevented || event.repeat || event.key !== "ArrowDown") return;
+    event.preventDefault();
+    openGroupMenu(groupId, true);
+  };
+  const canSplit = (groupId) => {
+    const group = groupById(layout(), groupId);
+    return Boolean(group && group.active !== null && group.tabs.length >= 2);
+  };
+  const siblingGroup = (groupId, delta) => {
+    const list = groups();
+    return list[indexOfGroup(groupId) + delta]?.id;
+  };
+  const canMoveToSibling = (groupId, delta) => {
+    const group = groupById(layout(), groupId);
+    return Boolean(group && group.active !== null && siblingGroup(groupId, delta) !== void 0);
+  };
+  const canShift = (groupId, delta) => {
+    const group = groupById(layout(), groupId);
+    if (!group || group.active === null) return false;
+    const to = group.tabs.indexOf(group.active) + delta;
+    return to >= 0 && to < group.tabs.length;
+  };
+  const runMenuAction = (groupId, action) => {
+    setOpenMenu(null);
+    const current = latest;
+    const group = groupById(current, groupId);
+    const tabId = group?.active;
+    if (!group || !tabId) return;
+    if (action === "splitRight" || action === "splitDown") {
+      const edge = action === "splitRight" ? "right" : "bottom";
+      commitMove(moveTab(current, tabId, { group: groupId, edge }), current, tabId, groupId, {
+        edge,
+        focus: true
+      });
+      return;
+    }
+    if (action === "previous" || action === "next") {
+      const to2 = siblingGroup(groupId, action === "previous" ? -1 : 1);
+      if (!to2) return;
+      commitMove(moveTab(current, tabId, { group: to2 }), current, tabId, groupId, { focus: true });
+      return;
+    }
+    const from = group.tabs.indexOf(tabId);
+    const to = from + (action === "left" ? -1 : 1);
+    if (from < 0 || to < 0 || to >= group.tabs.length) return;
+    commitMove(moveTab(current, tabId, { group: groupId, index: to }), current, tabId, groupId, {
+      focus: true
+    });
+  };
+  const splitExtentPercent = (splitId) => {
+    const value = layout();
+    const node = findSplitNode(value.root, splitId);
+    if (!node) return 0;
+    const held = new Set(groupIdsOf(node));
+    const entries = grid().groups.filter((entry) => held.has(entry.id));
+    if (entries.length === 0) return 0;
+    const tracks = node.direction === "row" ? grid().columns : grid().rows;
+    let from = Number.POSITIVE_INFINITY;
+    let to = Number.NEGATIVE_INFINITY;
+    entries.forEach((entry) => {
+      const span = node.direction === "row" ? entry.column : entry.row;
+      from = Math.min(from, span[0]);
+      to = Math.max(to, span[1]);
+    });
+    let total = 0;
+    for (let index = from; index < to; index += 1) total += tracks[index] ?? 0;
+    return total;
+  };
+  const splitExtentPx = (splitId) => {
+    const rect = rootEl?.getBoundingClientRect();
+    const node = findSplitNode(layout().root, splitId);
+    if (!rect || !node) return 0;
+    const axis = node.direction === "row" ? rect.width : rect.height;
+    return axis * splitExtentPercent(splitId) / 100;
+  };
+  const minSizePercent = (extentPx) => extentPx > 0 ? minGroupSize() / extentPx * 100 : 0;
+  const resizeChange = (next, splitId) => {
+    const node = findSplitNode(next.root, splitId);
+    return { type: "resize", split: splitId, sizes: node ? [...node.sizes] : [] };
+  };
+  const resizeBy = (splitId, index, delta, min) => {
+    const current = latest;
+    const next = resizeSplit(current, splitId, index, delta, min);
+    if (next === current) return;
+    commit(next, resizeChange(next, splitId));
+  };
+  const onSeparatorKeyDown = (splitId, index, orientation) => (event) => {
+    if (event.defaultPrevented) return;
+    const vertical = orientation === "vertical";
+    const backwards = event.key === (vertical ? "ArrowLeft" : "ArrowUp");
+    const forwards = event.key === (vertical ? "ArrowRight" : "ArrowDown");
+    const limit = event.key === "Home" || event.key === "End";
+    if (!backwards && !forwards && !limit) return;
+    event.preventDefault();
+    const delta = limit ? event.key === "Home" ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY : backwards ? -keyboardStep() : keyboardStep();
+    resizeBy(splitId, index, delta, minSizePercent(splitExtentPx(splitId)));
+  };
+  let separatorDrag = null;
+  const coordinate = (event, orientation) => orientation === "vertical" ? event.clientX : event.clientY;
+  const applySeparatorDrag = (position) => {
+    const drag = separatorDrag;
+    if (!drag) return;
+    const deltaPx = position - drag.start;
+    const delta = drag.extentPx > 0 ? deltaPx / drag.extentPx * 100 : 0;
+    const next = resizeSplit(drag.layout, drag.split, drag.index, delta, drag.min);
+    if (next === latest) return;
+    commit(next, resizeChange(next, drag.split));
+  };
+  const throttledSeparatorDrag = throttle(applySeparatorDrag, 1e3 / 60);
+  onCleanup(() => throttledSeparatorDrag.cancel());
+  if (!isServer) {
+    createEffect(() => {
+      const drag = draggingSeparator();
+      if (!drag) return;
+      const body = document.body;
+      const previous = body.style.cursor;
+      body.style.cursor = drag.orientation === "vertical" ? "col-resize" : "row-resize";
+      onCleanup(() => {
+        body.style.cursor = previous;
+      });
+    });
+  }
+  const onSeparatorPointerDown = (key, splitId, index, orientation) => (event) => {
+    if (isServer || event.pointerType === "mouse" && event.button !== 0) return;
+    const extentPx = splitExtentPx(splitId);
+    separatorDrag = {
+      key,
+      split: splitId,
+      index,
+      orientation,
+      pointerId: event.pointerId,
+      start: coordinate(event, orientation),
+      extentPx,
+      min: minSizePercent(extentPx),
+      layout: latest
+    };
+    setDraggingSeparator({ key, orientation });
+    const target = event.currentTarget;
+    if (typeof target.setPointerCapture === "function") {
+      try {
+        target.setPointerCapture(event.pointerId);
+      } catch {
+      }
+    }
+  };
+  const onSeparatorPointerMove = (orientation) => (event) => {
+    const drag = separatorDrag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    throttledSeparatorDrag(coordinate(event, orientation));
+  };
+  const onSeparatorPointerUp = (orientation) => (event) => {
+    const drag = separatorDrag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    throttledSeparatorDrag.cancel();
+    applySeparatorDrag(coordinate(event, orientation));
+    separatorDrag = null;
+    setDraggingSeparator(null);
+    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  let dragState = null;
+  let markedItem = null;
+  let dropTargetsFrame;
+  onCleanup(() => {
+    if (dropTargetsFrame !== void 0) cancelAnimationFrame(dropTargetsFrame);
+  });
+  const markRowItem = (item) => {
+    if (markedItem === item) return;
+    markedItem?.classList.remove("smwb-tab-item--drop-target");
+    markedItem = item;
+    item?.classList.add("smwb-tab-item--drop-target");
+  };
+  const hideSourceRowMark = () => {
+    const group = dragState?.group;
+    const header = Array.from(rootEl?.querySelectorAll(":scope > .smwb-tab-groups__header") ?? []).find(
+      (element) => element.getAttribute("data-group-id") === group
+    );
+    header?.querySelectorAll(".smwb-tab-item--drop-target").forEach((item) => {
+      if (item !== markedItem) item.classList.remove("smwb-tab-item--drop-target");
+    });
+  };
+  const clearDropState = () => {
+    dragState = null;
+    if (dropTargetsFrame !== void 0) {
+      cancelAnimationFrame(dropTargetsFrame);
+      dropTargetsFrame = void 0;
+    }
+    markRowItem(null);
+    setDropGroup(null);
+    setDropZone(null);
+    setDragging(false);
+  };
+  const hitTest = (target) => {
+    if (!rootEl || !target || target.closest(".smwb-tab-groups") !== rootEl) return null;
+    const headerEl = target.closest(".smwb-tab-groups__header");
+    if (headerEl) {
+      const group2 = headerEl.getAttribute("data-group-id");
+      if (!group2) return null;
+      const tabEl = tabElementOf(target);
+      const overId = tabEl?.getAttribute("data-tab-id");
+      const tabs = groupById(latest, group2)?.tabs ?? [];
+      const at = overId ? tabs.indexOf(overId) : -1;
+      return {
+        kind: "row",
+        group: group2,
+        index: at >= 0 ? at : null,
+        item: at >= 0 && tabEl ? tabItemOf(tabEl) : null
+      };
+    }
+    const body = target.closest(".smwb-tab-groups__drop-target");
+    if (!body) return null;
+    const group = body.getAttribute("data-group-id");
+    return group ? { kind: "body", group, element: body } : null;
+  };
+  const zoneOf = (element, event) => {
+    const rect = element.getBoundingClientRect();
+    return dropZoneAt(event.clientX - rect.left, event.clientY - rect.top, rect.width, rect.height);
+  };
+  const bodyDropAllowed = (dragGroup, group, zone) => {
+    if (dragGroup !== group) return true;
+    if (zone === "center") return false;
+    return (groupById(latest, group)?.tabs.length ?? 0) >= 2;
+  };
+  const onRootDragStart = (event) => {
+    callHandler(local.onDragStart, event);
+    if (isServer) return;
+    const target = event.target;
+    if (!(target instanceof Element) || !rootEl || target.closest(".smwb-tab-groups") !== rootEl) return;
+    const tabEl = tabElementOf(target);
+    const tabId = tabEl?.getAttribute("data-tab-id");
+    if (!tabEl || !tabId || tabEl.getAttribute("aria-disabled") === "true") return;
+    const group = groupIdOf(tabEl);
+    if (!group) return;
+    const doc = rootEl.ownerDocument;
+    const active = doc.activeElement;
+    dragState = {
+      tab: tabId,
+      group,
+      hadFocus: Boolean(active && active !== doc.body && tabItemOf(tabEl).contains(active))
+    };
+    const view = doc.defaultView;
+    if (!view) return;
+    dropTargetsFrame = view.requestAnimationFrame(() => {
+      dropTargetsFrame = void 0;
+      setDragging(true);
+    });
+  };
+  const onRootDragOver = (event) => {
+    callHandler(local.onDragOver, event);
+    const state = dragState;
+    if (!state) return;
+    const hit = hitTest(event.target);
+    if (!hit) {
+      markRowItem(null);
+      hideSourceRowMark();
+      setDropGroup(null);
+      setDropZone(null);
+      return;
+    }
+    if (hit.kind === "row") {
+      if (hit.group === state.group) {
+        markRowItem(null);
+        hit.item?.classList.add("smwb-tab-item--drop-target");
+        return;
+      }
+      hideSourceRowMark();
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+      setDropGroup(null);
+      setDropZone(null);
+      markRowItem(hit.item);
+      return;
+    }
+    markRowItem(null);
+    hideSourceRowMark();
+    const zone = zoneOf(hit.element, event);
+    if (!bodyDropAllowed(state.group, hit.group, zone)) {
+      setDropGroup(null);
+      setDropZone(null);
+      return;
+    }
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    setDropGroup(hit.group);
+    setDropZone(zone);
+  };
+  const onRootDrop = (event) => {
+    callHandler(local.onDrop, event);
+    const state = dragState;
+    if (!state) return;
+    const hit = event.defaultPrevented ? null : hitTest(event.target);
+    const zone = hit && hit.kind === "body" ? zoneOf(hit.element, event) : null;
+    clearDropState();
+    if (!hit) return;
+    if (hit.kind === "row") {
+      if (hit.group === state.group) return;
+      const target2 = hit.index === null ? { group: hit.group } : { group: hit.group, index: hit.index };
+      commitMove(moveTab(latest, state.tab, target2), latest, state.tab, state.group, {
+        focus: state.hadFocus
+      });
+      return;
+    }
+    if (!zone || !bodyDropAllowed(state.group, hit.group, zone)) return;
+    const target = zone === "center" ? { group: hit.group } : { group: hit.group, edge: zone };
+    commitMove(moveTab(latest, state.tab, target), latest, state.tab, state.group, {
+      edge: zone === "center" ? void 0 : zone,
+      focus: state.hadFocus
+    });
+  };
+  const onRootDragEnd = (event) => {
+    callHandler(local.onDragEnd, event);
+    clearDropState();
+  };
+  const onRootFocusIn = (event) => {
+    callHandler(local.onFocusIn, event);
+    const root = rootEl;
+    const target = event.target;
+    if (!root || !(target instanceof HTMLElement)) return;
+    const previous = lastFocus;
+    lastFocus = ownerRootOf(target) === root ? target : null;
+    if (previous instanceof HTMLElement && previous.localName === "iframe" && previous !== target && !pointerFocus) {
+      const instead = frameExitTarget(root, previous, target);
+      if (instead !== null && instead === guardEl) {
+        leaving = true;
+        if (instead !== target) instead.focus({ preventScroll: true });
+        return;
+      }
+      if (instead !== null) {
+        instead.focus();
+        return;
+      }
+    }
+    if (target === guardEl) {
+      onGuardFocus();
+      return;
+    }
+    const groupId = ownGroupIdOf(root, target);
+    if (!groupId || latest.activeGroup === groupId) return;
+    commit(setActiveGroup(latest, groupId), { type: "activate", group: groupId });
+  };
+  const onRootKeyDown = (event) => {
+    callHandler(local.onKeyDown, event);
+    if (event.defaultPrevented || event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+    if (event.isComposing) return;
+    const root = rootEl;
+    const from = root ? deepActiveElement(root.ownerDocument) : null;
+    if (!root || !from || !containsDeep(root, from)) return;
+    const move = tabMove(root, from, event.shiftKey ? -1 : 1);
+    if (!move) return;
+    if (move.element === guardEl) leaving = true;
+    lastFocus = null;
+    if (move.prevent) {
+      event.preventDefault();
+      move.element.focus();
+    } else {
+      move.element.focus({ preventScroll: true });
+    }
+  };
+  onMount(() => {
+    const root = rootEl;
+    const view = root?.ownerDocument.defaultView;
+    if (!root || !view) return;
+    let timer;
+    const onPointerDown = () => {
+      pointerFocus = true;
+      view.clearTimeout(timer);
+      timer = view.setTimeout(() => {
+        pointerFocus = false;
+      }, 0);
+    };
+    const onFocusOut = (event) => {
+      if (event.relatedTarget instanceof Node && !root.contains(event.relatedTarget)) lastFocus = null;
+    };
+    const onWindowBlur = () => {
+      const active = root.ownerDocument.activeElement;
+      if (active instanceof view.HTMLIFrameElement && ownerRootOf(active) === root) lastFocus = active;
+    };
+    root.addEventListener("pointerdown", onPointerDown, true);
+    root.addEventListener("focusout", onFocusOut);
+    view.addEventListener("blur", onWindowBlur);
+    onCleanup(() => {
+      view.clearTimeout(timer);
+      root.removeEventListener("pointerdown", onPointerDown, true);
+      root.removeEventListener("focusout", onFocusOut);
+      view.removeEventListener("blur", onWindowBlur);
+    });
+  });
+  const onGuardFocus = () => {
+    if (leaving || !rootEl) return;
+    const last = lastStopOf(rootEl);
+    if (last) focusFromEnd(last);
+  };
+  const rootStyle = () => mergeStyle(local.style, {
+    "grid-template-columns": gridTemplateColumns(grid()),
+    "grid-template-rows": gridTemplateRows(grid())
+  });
+  const headerArea = (groupId) => {
+    const placed = grid().groups.find((entry) => entry.id === groupId);
+    return placed ? groupHeaderArea(placed) : "auto";
+  };
+  const bodyArea = (tabId) => {
+    const groupId = groupOfTab().get(tabId);
+    const placed = groupId === void 0 ? void 0 : grid().groups.find((entry) => entry.id === groupId);
+    return placed ? groupBodyArea(placed) : "auto";
+  };
+  const separatorEntry = (splitId, index) => grid().separators.find((entry) => entry.split === splitId && entry.index === index);
+  const separatorValue = (splitId, index) => {
+    const node = findSplitNode(layout().root, splitId);
+    if (!node) return 0;
+    const first = node.sizes[index] ?? 0;
+    const pair = first + (node.sizes[index + 1] ?? 0);
+    return pair > 0 ? Math.round(first / pair * 100) : 0;
+  };
+  const dropTargetClass = (groupId) => {
+    const zone = dropGroup() === groupId ? dropZone() : null;
+    return zone ? `smwb-tab-groups__drop-target--${zone}` : void 0;
+  };
+  const emptySlot = resolveChildren(() => local.empty);
+  const renderTab = (groupId, tabId) => {
+    const meta = () => local.getTab(tabId);
+    const closable = createMemo(() => meta()?.closable !== false);
+    const optional = createMemo(() => {
+      const given = meta();
+      const extra = {};
+      if (given?.disabled) extra.disabled = true;
+      if (given?.closeLabel !== void 0) extra.closeLabel = given.closeLabel;
+      if (given?.actions !== void 0) extra.actions = given.actions;
+      return extra;
+    });
+    const shortcuts = createMemo(() => meta()?.disabled ? void 0 : CHORD_SHORTCUTS);
+    return <Tab
+      {...optional()}
+      id={tabElementId(tabId)}
+      aria-controls={panelElementId(tabId)}
+      data-tab-id={tabId}
+      aria-keyshortcuts={shortcuts()}
+      label={meta()?.label ?? tabId}
+      icon={meta()?.icon}
+      closable={closable()}
+      onClose={(event, reason) => requestClose(tabId, event, reason)}
+    />;
+  };
+  const renderHeader = (groupId) => {
+    const [anchor, setAnchor] = createSignal(null);
+    const group = () => groupById(layout(), groupId);
+    const tabs = () => group()?.tabs ?? [];
+    const value = () => {
+      const active = group()?.active;
+      if (active === null || active === void 0) return 0;
+      const index = tabs().indexOf(active);
+      return index < 0 ? 0 : index;
+    };
+    return <div
+      class={cn("smwb-tab-groups__header", {
+        "smwb-tab-groups__header--active": layout().activeGroup === groupId
+      })}
+      id={headerElementId(groupId)}
+      data-group-id={groupId}
+      style={{ "grid-area": headerArea(groupId) }}
+      onKeyDown={onHeaderKeyDown(groupId)}
+    >
+        <Tabs
+      class="smwb-tab-groups__tabs"
+      value={value()}
+      onChange={onRowChange(groupId)}
+      onReorder={onRowReorder(groupId)}
+      aria-label={labels().group(indexOfGroup(groupId) + 1, groupCount())}
+      scrollable
+      overflowMenu
+      dense={local.dense === true}
+    >
+          <For each={tabs()}>{(tabId) => renderTab(groupId, tabId)}</For>
+        </Tabs>
+        <Show when={withGroupActions()}>
+          <button
+      type="button"
+      class="smwb-tab-groups__actions-trigger"
+      aria-label={labels().groupActions}
+      aria-haspopup="menu"
+      aria-expanded={openMenu() === groupId}
+      aria-controls={openMenu() === groupId ? menuElementId(groupId) : void 0}
+      ref={(el) => setAnchor(() => el)}
+      onClick={(event) => onTriggerClick(groupId, event)}
+      onKeyDown={(event) => onTriggerKeyDown(groupId, event)}
+    >
+            <Icon name="more_vert" size={20} />
+          </button>
+          <Menu
+      id={menuElementId(groupId)}
+      anchorElement={anchor()}
+      isOpen={openMenu() === groupId}
+      onClose={() => setOpenMenu(null)}
+      placement="bottom-end"
+    >
+            <MenuItem disabled={!canSplit(groupId)} onClick={() => runMenuAction(groupId, "splitRight")}>
+              {labels().splitRight}
+            </MenuItem>
+            <MenuItem disabled={!canSplit(groupId)} onClick={() => runMenuAction(groupId, "splitDown")}>
+              {labels().splitDown}
+            </MenuItem>
+            <MenuItem disabled={!canMoveToSibling(groupId, -1)} onClick={() => runMenuAction(groupId, "previous")}>
+              {labels().moveToPreviousGroup}
+            </MenuItem>
+            <MenuItem disabled={!canMoveToSibling(groupId, 1)} onClick={() => runMenuAction(groupId, "next")}>
+              {labels().moveToNextGroup}
+            </MenuItem>
+            <MenuItem disabled={!canShift(groupId, -1)} onClick={() => runMenuAction(groupId, "left")}>
+              {labels().moveLeft}
+            </MenuItem>
+            <MenuItem disabled={!canShift(groupId, 1)} onClick={() => runMenuAction(groupId, "right")}>
+              {labels().moveRight}
+            </MenuItem>
+          </Menu>
+        </Show>
+      </div>;
+  };
+  const renderPanelItem = (tabId) => {
+    const mounted = createMemo(() => mountedTabs().has(tabId));
+    const selected = createMemo(() => selectedTabs().has(tabId));
+    const groupId = createMemo(() => groupOfTab().get(tabId) ?? "");
+    return <div
+      class="smwb-tab-panel smwb-tab-groups__panel"
+      role="tabpanel"
+      id={panelElementId(tabId)}
+      aria-labelledby={tabElementId(tabId)}
+      tabindex={0}
+      hidden={selected() ? void 0 : true}
+      data-tab-id={tabId}
+      data-group-id={groupId()}
+      style={{ "grid-area": bodyArea(tabId) }}
+    >
+        <Show when={mounted()}>
+          {local.renderPanel(tabId)}
+          {
+      /* Where Shift+Tab enters the panel from the next child in reading order: the browser's
+         own move from here lands on the panel's last stop (`tabMove`). */
+    }
+          <span class="smwb-tab-groups__panel-end" tabindex={-1} aria-hidden="true" />
+        </Show>
+      </div>;
+  };
+  const renderSeparatorItem = (key, splitId, index) => {
+    const entry = () => separatorEntry(splitId, index);
+    const orientation = () => entry()?.orientation ?? "vertical";
+    const area = () => {
+      const placed = entry();
+      return placed ? separatorArea(placed) : "auto";
+    };
+    return <div
+      class={cn("smwb-tab-groups__separator", `smwb-tab-groups__separator--${orientation()}`, {
+        "smwb-tab-groups__separator--dragging": draggingSeparator()?.key === key
+      })}
+      id={separatorElementId(splitId, index)}
+      role="separator"
+      tabindex={0}
+      aria-orientation={orientation()}
+      aria-valuenow={separatorValue(splitId, index)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={labels().resize}
+      data-split-id={splitId}
+      data-index={index}
+      style={{ "grid-area": area() }}
+      onKeyDown={onSeparatorKeyDown(splitId, index, orientation())}
+      onPointerDown={onSeparatorPointerDown(key, splitId, index, orientation())}
+      onPointerMove={onSeparatorPointerMove(orientation())}
+      onPointerUp={onSeparatorPointerUp(orientation())}
+      onPointerCancel={onSeparatorPointerUp(orientation())}
+    />;
+  };
+  const renderSeparatorKey = (key) => {
+    const last = key.lastIndexOf(":");
+    return renderSeparatorItem(key, key.slice(2, last), Number(key.slice(last + 1)));
+  };
+  const headerNodes = createMemo(mapArray(() => isEmpty() ? [] : groupIds(), renderHeader));
+  const separatorNodes = createMemo(mapArray(() => isEmpty() ? [] : separatorKeys(), renderSeparatorKey));
+  const panelNodes = createMemo(mapArray(() => isEmpty() ? [] : panelOrder(), renderPanelItem));
+  const childNodes = createMemo(() => [...headerNodes(), ...separatorNodes(), ...panelNodes()]);
+  return <div
+    {...rest}
+    ref={mergeRefs(local.ref, (el) => {
+      rootEl = el;
+      if (isServer) return;
+      createRenderEffect((previous) => {
+        const next = childNodes();
+        placeChildren(el, next, previous);
+        return next;
+      }, []);
+    })}
+    id={base()}
+    class={cn("smwb-tab-groups", { "smwb-tab-groups--split": hasSplit() }, local.class)}
+    style={rootStyle()}
+    data-testid={local["data-testid"] ?? "tab-groups"}
+    aria-owns={owns()}
+    onKeyDown={onRootKeyDown}
+    onDragStart={onRootDragStart}
+    onDragOver={onRootDragOver}
+    onDrop={onRootDrop}
+    onDragEnd={onRootDragEnd}
+    onFocusIn={onRootFocusIn}
+  >
+      {isServer ? childNodes() : void 0}
+      <Show when={isEmpty()}>
+        <div class="smwb-tab-groups__empty">{emptySlot()}</div>
+      </Show>
+      <Show when={dragging()}>
+        <For each={grid().groups}>
+          {(placed) => <div
+    class={cn("smwb-tab-groups__drop-target", dropTargetClass(placed.id))}
+    data-group-id={placed.id}
+    aria-hidden="true"
+    style={{ "grid-area": groupBodyArea(placed) }}
+  />}
+        </For>
+      </Show>
+      <Show when={!isEmpty()}>
+        {
+    /* The root's last Tab stop, which only ever holds the focus on its way in or out. */
+  }
+        <span
+    ref={(el) => guardEl = el}
+    class="smwb-tab-groups__focus-guard"
+    tabindex={0}
+    onBlur={() => {
+      leaving = false;
+    }}
+  />
+      </Show>
+      <div
+    id={statusElementId()}
+    class="smwb-tab-groups__status"
+    role="status"
+    aria-atomic={true}
+    data-testid="tab-groups-status"
+  >
+        {status()}
+      </div>
+    </div>;
+}
+var tabGroups_default = TabGroups;
+export {
+  TabGroups,
+  tabGroups_default as default
+};
+//# sourceMappingURL=tabGroups.jsx.map