@k2b/ui 0.1.0-rc.0

package/dist/browser/layout/Panes.js

@@ -0,0 +1,978 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div data-k2b-panes role=group>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button class=k2b-panes__add><i class="ti ti-plus"aria-hidden=true></i><span>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-panes__empty>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-panes__split><div class=k2b-panes__split-child></div><button type=button role=separator class=k2b-panes__separator><span aria-hidden=true></span></button><div class=k2b-panes__split-child>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class="k2b-panes__add k2b-panes__add--tab"><i class="ti ti-plus"aria-hidden=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-panes__tabs-scrollbar aria-hidden=true><span>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-panes__drop-targets aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<section class=k2b-panes__group><div class=k2b-panes__tabs role=tablist aria-orientation=horizontal><!$><!/><!$><!/><!$><!/></div><!$><!/><div class=k2b-panes__body><div class=k2b-panes__panel role=tabpanel></div></div><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<button type=button class=k2b-panes__close><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-panes__tab><!$><!/><button type=button class=k2b-panes__tab-button role=tab><span class="k2b-ui k2b-panes__drag-surface k2b-panes__drag-preview"data-dnd-preview><i aria-hidden=true></i><span></span></span></button><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-panes__drop-target aria-hidden=true><!$><!/><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<i aria-hidden=true>`);
+import { dnd } from "@k2b/stdlib/solid";
+import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show } from "solid-js";
+import { useUiMessages } from "../intl/messages";
+import { activatePanesItem, applyPanesIntent, getPanesDropTargets, PANES_MAX_ID_LENGTH, PANES_MIN_RATIO, parsePanesLayout, resizePanesSplit, samePanesIntent } from "./panes-layout";
+import { assertUniqueStableUiIds } from "./stable-id";
+const PANES_RESIZE_SNAP_DISTANCE = 8;
+const PANES_RESIZE_UNSNAP_DISTANCE = 12;
+const PANES_RESIZE_NEIGHBOR_GAP = 16;
+const intervalGap = (left, right) => left.crossEnd < right.crossStart ? right.crossStart - left.crossEnd : right.crossEnd < left.crossStart ? left.crossStart - right.crossEnd : 0;
+export const resolvePanesResizeSnap = (coordinate, source, candidates, options = {}) => {
+  const neighbors = candidates.filter(candidate => {
+    const gap = intervalGap(source, candidate);
+    return gap > 0 && gap <= PANES_RESIZE_NEIGHBOR_GAP;
+  });
+  const activeCoordinate = options.activeCoordinate;
+  const active = activeCoordinate === null || activeCoordinate === undefined ? null : neighbors.find(candidate => Math.abs(candidate.coordinate - activeCoordinate) < 0.5);
+  if (active && Math.abs(coordinate - active.coordinate) <= PANES_RESIZE_UNSNAP_DISTANCE) {
+    return {
+      coordinate: active.coordinate,
+      snappedTo: active.coordinate
+    };
+  }
+  const previous = options.previousCoordinate;
+  let winner = null;
+  let winnerDistance = Number.POSITIVE_INFINITY;
+  for (const candidate of neighbors) {
+    if (previous !== undefined && Math.abs(candidate.coordinate - previous) < 0.5) continue;
+    const distanceToRange = previous === undefined || candidate.coordinate < Math.min(previous, coordinate) || candidate.coordinate > Math.max(previous, coordinate) ? Math.abs(candidate.coordinate - coordinate) : 0;
+    const distanceToCoordinate = Math.abs(candidate.coordinate - coordinate);
+    if (distanceToRange <= PANES_RESIZE_SNAP_DISTANCE && distanceToCoordinate < winnerDistance) {
+      winner = candidate;
+      winnerDistance = distanceToCoordinate;
+    }
+  }
+  return winner ? {
+    coordinate: winner.coordinate,
+    snappedTo: winner.coordinate
+  } : {
+    coordinate,
+    snappedTo: null
+  };
+};
+export const indexPanesDropTargets = targets => {
+  const mutable = new Map();
+  for (const target of targets) {
+    let indexed = mutable.get(target.targetItemId);
+    if (!indexed) {
+      indexed = {
+        tabs: new Map(),
+        body: []
+      };
+      mutable.set(target.targetItemId, indexed);
+    }
+    if (target.kind === "tab") indexed.tabs.set(target.beforeItemId ?? null, target);else indexed.body.push(target);
+  }
+  return mutable;
+};
+const iconClass = icon => {
+  const value = icon?.trim() || "ti-layout-sidebar-right";
+  return value.startsWith("ti ") ? value : `ti ${value}`;
+};
+const collectLayoutItemIds = (node, ids = []) => {
+  if (!node) return ids;
+  if (node.type === "group") ids.push(...node.items);else {
+    collectLayoutItemIds(node.first, ids);
+    collectLayoutItemIds(node.second, ids);
+  }
+  return ids;
+};
+const nearestDroppable = entries => entries.reduce((winner, entry) => !winner || entry.distance < winner.distance ? entry : winner, null);
+export const pointerHitsPanesDropTarget = (entry, pointer, hitElement) => {
+  if (hitElement !== undefined && !entry.element?.contains(hitElement)) return false;
+  const side = entry.meta.target.side;
+  if (entry.meta.target.kind !== "split" || !side) return entry.containsPointer;
+  if (!entry.containsPointer) return false;
+  const x = pointer.x - entry.rect.left;
+  const y = pointer.y - entry.rect.top;
+  if (side === "top") return x >= y && x <= entry.rect.width - y;
+  if (side === "bottom") {
+    const corner = entry.rect.height - y;
+    return x >= corner && x <= entry.rect.width - corner;
+  }
+  if (side === "left") return y >= x && y <= entry.rect.height - x;
+  const corner = entry.rect.width - x;
+  return y >= corner && y <= entry.rect.height - corner;
+};
+const panesCollisionDetector = (context, mode) => {
+  const document = mode === "pointer" ? context.droppables[0]?.element.ownerDocument : undefined;
+  const hitElement = document?.elementFromPoint(context.pointer.x, context.pointer.y) ?? undefined;
+  return nearestDroppable(context.droppables.filter(entry => pointerHitsPanesDropTarget(entry, context.pointer, hitElement)))?.id ?? null;
+};
+const createItemMap = items => {
+  assertUniqueStableUiIds(items.map(item => item.id), "Panes item id", PANES_MAX_ID_LENGTH);
+  return new Map(items.map(item => [item.id, item]));
+};
+const requireItem = (items, id) => {
+  const item = items.get(id);
+  if (!item) throw new Error(`Panes layout references missing item "${id}".`);
+  return item;
+};
+export default function Panes(props) {
+  const messages = useUiMessages();
+  const instanceId = `k2b-panes-${createUniqueId()}`;
+  const items = createMemo(() => createItemMap(props.items));
+  const layout = createMemo(() => {
+    if (!parsePanesLayout(props.layout)) throw new Error("Panes layout must be a valid version 2 layout.");
+    for (const id of collectLayoutItemIds(props.layout.root)) requireItem(items(), id);
+    return props.layout;
+  });
+  const canMove = () => props.movable ?? true;
+  const canResize = () => props.resizable ?? true;
+  const split = () => props.split ?? "both";
+  const [draggedItemId, setDraggedItemId] = createSignal(null);
+  const [dragMode, setDragMode] = createSignal(null);
+  const dropTargets = createMemo(() => {
+    const itemId = draggedItemId();
+    return itemId ? getPanesDropTargets(layout(), itemId, {
+      movable: canMove(),
+      split: split()
+    }) : [];
+  });
+  const dropTargetIndex = createMemo(() => indexPanesDropTargets(dropTargets()));
+  const paneDnd = dnd.create({
+    collisionDetector: context => panesCollisionDetector(context, dragMode()),
+    buildIntent: ({
+      over
+    }) => over?.meta.target.intent ?? null,
+    isSameIntent: samePanesIntent,
+    onDragStart: ({
+      active,
+      mode
+    }) => {
+      setDragMode(mode);
+      setDraggedItemId(active.meta.itemId);
+    },
+    announcements: {
+      dragStart: active => `Picked up ${active.meta.label}.`,
+      dragOver: (active, over) => over ? `Move ${active.meta.label} to ${over.meta.label}.` : `${active.meta.label} is not over a pane.`,
+      drop: (active, over) => over ? `Moved ${active.meta.label} to ${over.meta.label}.` : `Did not move ${active.meta.label}.`,
+      cancel: active => `Cancelled moving ${active.meta.label}.`
+    },
+    onDrop: ({
+      intent,
+      mode
+    }) => {
+      setDragMode(null);
+      setDraggedItemId(null);
+      if (!intent) return;
+      const current = layout();
+      const next = applyPanesIntent(current, intent);
+      if (next === current) return;
+      props.onLayoutChange(next);
+      if (mode === "keyboard") queueMicrotask(() => document.getElementById(`${instanceId}-${intent.itemId}-tab`)?.focus());
+    },
+    onCancel: () => {
+      setDragMode(null);
+      setDraggedItemId(null);
+    }
+  });
+  const activate = itemId => {
+    const current = layout();
+    const next = activatePanesItem(current, itemId);
+    if (next !== current) props.onLayoutChange(next);
+  };
+  const requestAdd = targetItemId => props.onAddItem?.(targetItemId);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return layout().root;
+      },
+      get fallback() {
+        return (() => {
+          var _el$2 = _$getNextElement(_tmpl$3);
+          _$insert(_el$2, _$createComponent(Show, {
+            get when() {
+              return props.onAddItem !== undefined;
+            },
+            get children() {
+              var _el$3 = _$getNextElement(_tmpl$2),
+                _el$4 = _el$3.firstChild,
+                _el$5 = _el$4.nextSibling;
+              _el$3.$$click = () => requestAdd(null);
+              _$insert(_el$5, () => messages().addPane);
+              _$effect(() => _$setAttribute(_el$3, "aria-label", messages().addPane));
+              _$runHydrationEvents();
+              return _el$3;
+            }
+          }));
+          return _el$2;
+        })();
+      },
+      children: root => _$createComponent(PanesNodeRenderer, {
+        node: root,
+        path: [],
+        layout: layout,
+        itemById: items,
+        dnd: paneDnd,
+        dropTargetIndex: dropTargetIndex,
+        instanceId: instanceId,
+        canMove: canMove,
+        canResize: canResize,
+        addItem: requestAdd,
+        canAdd: () => props.onAddItem !== undefined,
+        onActivate: activate,
+        get onLayoutChange() {
+          return props.onLayoutChange;
+        }
+      })
+    }));
+    _$effect(_p$ => {
+      var _v$ = `k2b-panes ${props.class ?? ""}`,
+        _v$2 = props.ariaLabel ?? messages().paneWorkspace;
+      _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$;
+  })();
+}
+function PanesNodeRenderer(props) {
+  const split = createMemo(() => {
+    const node = props.node();
+    return node.type === "split" ? node : null;
+  });
+  const group = createMemo(() => {
+    const node = props.node();
+    return node.type === "group" ? node : null;
+  });
+  return [_$createComponent(Show, {
+    get when() {
+      return split();
+    },
+    children: node => _$createComponent(PanesSplitRenderer, _$mergeProps(props, {
+      node: node
+    }))
+  }), _$createComponent(Show, {
+    get when() {
+      return group();
+    },
+    children: node => _$createComponent(PanesGroupRenderer, _$mergeProps(props, {
+      node: node
+    }))
+  })];
+}
+function PanesSplitRenderer(props) {
+  const messages = useUiMessages();
+  let container;
+  let separatorElement;
+  let stopResize;
+  let finishResize;
+  const stopActiveResize = () => {
+    stopResize?.();
+    stopResize = undefined;
+    finishResize = undefined;
+  };
+  const finishActiveResize = () => {
+    finishResize?.();
+    stopResize = undefined;
+    finishResize = undefined;
+  };
+  onCleanup(stopActiveResize);
+  const commitRatio = ratio => {
+    const current = props.layout();
+    const next = resizePanesSplit(current, props.path, ratio);
+    if (next !== current) props.onLayoutChange(next);
+  };
+  const resizeGeometry = separator => {
+    if (!separator) return null;
+    const direction = props.node().direction;
+    const containerRect = container?.getBoundingClientRect();
+    const separatorRect = separator.getBoundingClientRect();
+    const extent = direction === "horizontal" ? containerRect?.width ?? 0 : containerRect?.height ?? 0;
+    const separatorExtent = direction === "horizontal" ? separatorRect.width : separatorRect.height;
+    const availableExtent = extent - separatorExtent;
+    if (!containerRect || availableExtent <= 0 || separatorRect.width <= 0 || separatorRect.height <= 0) return null;
+    const geometry = rect => direction === "horizontal" ? {
+      coordinate: rect.left + rect.width / 2,
+      crossStart: rect.top,
+      crossEnd: rect.bottom
+    } : {
+      coordinate: rect.top + rect.height / 2,
+      crossStart: rect.left,
+      crossEnd: rect.right
+    };
+    const panes = separator.closest("[data-k2b-panes]");
+    const candidates = panes ? Array.from(panes.querySelectorAll(`.k2b-panes__separator[data-direction="${direction}"]`)).filter(candidate => candidate !== separator && candidate.closest("[data-k2b-panes]") === panes).map(candidate => candidate.getBoundingClientRect()).filter(rect => rect.width > 0 && rect.height > 0).map(geometry) : [];
+    const origin = direction === "horizontal" ? containerRect.left + separatorExtent / 2 : containerRect.top + separatorExtent / 2;
+    return {
+      source: geometry(separatorRect),
+      candidates,
+      coordinateForRatio: ratio => origin + availableExtent * ratio,
+      ratioForCoordinate: coordinate => (coordinate - origin) / availableExtent
+    };
+  };
+  const startResize = event => {
+    if (!props.canResize()) return;
+    event.preventDefault();
+    stopActiveResize();
+    const pointerId = event.pointerId;
+    const captureTarget = event.currentTarget ?? separatorElement;
+    if (!captureTarget) return;
+    const start = props.node().direction === "horizontal" ? event.clientX : event.clientY;
+    const geometry = resizeGeometry(captureTarget);
+    const startRatio = props.node().ratio;
+    const startCoordinate = geometry?.source.coordinate;
+    const rect = container?.getBoundingClientRect();
+    const extent = Math.max(1, props.node().direction === "horizontal" ? rect?.width ?? 1 : rect?.height ?? 1);
+    let snappedTo = null;
+    let frame;
+    let pendingRatio;
+    const flush = () => {
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      frame = undefined;
+      if (pendingRatio === undefined) return;
+      const ratio = pendingRatio;
+      pendingRatio = undefined;
+      commitRatio(ratio);
+    };
+    const onMove = move => {
+      if (move.pointerId !== pointerId) return;
+      const current = props.node().direction === "horizontal" ? move.clientX : move.clientY;
+      if (geometry && startCoordinate !== undefined) {
+        const snapped = resolvePanesResizeSnap(startCoordinate + current - start, geometry.source, geometry.candidates, {
+          activeCoordinate: snappedTo
+        });
+        snappedTo = snapped.snappedTo;
+        pendingRatio = geometry.ratioForCoordinate(snapped.coordinate);
+      } else {
+        pendingRatio = startRatio + (current - start) / extent;
+      }
+      if (frame === undefined) frame = requestAnimationFrame(flush);
+    };
+    const onEnd = end => {
+      if (end.pointerId === pointerId) finishActiveResize();
+    };
+    stopResize = () => {
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      frame = undefined;
+      pendingRatio = undefined;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onEnd);
+      window.removeEventListener("pointercancel", onEnd);
+      window.removeEventListener("blur", finishActiveResize);
+      if (captureTarget.hasPointerCapture?.(pointerId)) captureTarget.releasePointerCapture(pointerId);
+    };
+    finishResize = () => {
+      flush();
+      stopResize?.();
+    };
+    captureTarget.setPointerCapture?.(pointerId);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onEnd);
+    window.addEventListener("pointercancel", onEnd);
+    window.addEventListener("blur", finishActiveResize);
+  };
+  const onResizeKeyDown = event => {
+    if (!props.canResize()) return;
+    const step = event.shiftKey ? 0.08 : 0.02;
+    let ratio = null;
+    if (event.key === "Home") ratio = PANES_MIN_RATIO;
+    if (event.key === "End") ratio = 1 - PANES_MIN_RATIO;
+    if (props.node().direction === "horizontal" && event.key === "ArrowLeft") ratio = props.node().ratio - step;
+    if (props.node().direction === "horizontal" && event.key === "ArrowRight") ratio = props.node().ratio + step;
+    if (props.node().direction === "vertical" && event.key === "ArrowUp") ratio = props.node().ratio - step;
+    if (props.node().direction === "vertical" && event.key === "ArrowDown") ratio = props.node().ratio + step;
+    if (ratio === null) return;
+    event.preventDefault();
+    const geometry = resizeGeometry(event.currentTarget ?? separatorElement);
+    if (geometry) {
+      const snapped = resolvePanesResizeSnap(geometry.coordinateForRatio(ratio), geometry.source, geometry.candidates, {
+        previousCoordinate: geometry.source.coordinate
+      });
+      ratio = geometry.ratioForCoordinate(snapped.coordinate);
+    }
+    commitRatio(ratio);
+  };
+  return (() => {
+    var _el$6 = _$getNextElement(_tmpl$4),
+      _el$7 = _el$6.firstChild,
+      _el$8 = _el$7.nextSibling,
+      _el$9 = _el$8.nextSibling;
+    var _ref$ = container;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$6) : container = _el$6;
+    _$insert(_el$7, _$createComponent(PanesNodeRenderer, _$mergeProps(props, {
+      node: () => props.node().first,
+      get path() {
+        return [...props.path, "first"];
+      }
+    })));
+    _el$8.$$keydown = onResizeKeyDown;
+    _el$8.$$pointerdown = startResize;
+    var _ref$2 = separatorElement;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$8) : separatorElement = _el$8;
+    _$insert(_el$9, _$createComponent(PanesNodeRenderer, _$mergeProps(props, {
+      node: () => props.node().second,
+      get path() {
+        return [...props.path, "second"];
+      }
+    })));
+    _$effect(_p$ => {
+      var _v$3 = props.node().direction,
+        _v$4 = `${props.node().ratio} 1 0`,
+        _v$5 = props.node().direction === "horizontal" ? "vertical" : "horizontal",
+        _v$6 = Math.round(PANES_MIN_RATIO * 100),
+        _v$7 = Math.round((1 - PANES_MIN_RATIO) * 100),
+        _v$8 = Math.round(props.node().ratio * 100),
+        _v$9 = !props.canResize(),
+        _v$0 = props.canResize() ? 0 : -1,
+        _v$1 = props.node().direction,
+        _v$10 = messages().resizePanes,
+        _v$11 = `${1 - props.node().ratio} 1 0`;
+      _v$3 !== _p$.e && _$setAttribute(_el$6, "data-direction", _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setStyleProperty(_el$7, "flex", _p$.t = _v$4);
+      _v$5 !== _p$.a && _$setAttribute(_el$8, "aria-orientation", _p$.a = _v$5);
+      _v$6 !== _p$.o && _$setAttribute(_el$8, "aria-valuemin", _p$.o = _v$6);
+      _v$7 !== _p$.i && _$setAttribute(_el$8, "aria-valuemax", _p$.i = _v$7);
+      _v$8 !== _p$.n && _$setAttribute(_el$8, "aria-valuenow", _p$.n = _v$8);
+      _v$9 !== _p$.s && _$setAttribute(_el$8, "aria-disabled", _p$.s = _v$9);
+      _v$0 !== _p$.h && _$setAttribute(_el$8, "tabindex", _p$.h = _v$0);
+      _v$1 !== _p$.r && _$setAttribute(_el$8, "data-direction", _p$.r = _v$1);
+      _v$10 !== _p$.d && _$setAttribute(_el$8, "aria-label", _p$.d = _v$10);
+      _v$11 !== _p$.l && _$setStyleProperty(_el$9, "flex", _p$.l = _v$11);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined,
+      l: undefined
+    });
+    _$runHydrationEvents();
+    return _el$6;
+  })();
+}
+function ActivePane(props) {
+  return requireItem(props.itemById(), props.itemId).render();
+}
+function PanesGroupRenderer(props) {
+  const messages = useUiMessages();
+  let tabsElement;
+  let scrollbarDragOffset = 0;
+  let stopTabPress;
+  let suppressedPointerClick = null;
+  let clearSuppressedPointerClick;
+  const dndInstanceId = createUniqueId();
+  const draggableId = id => `panes-item:${dndInstanceId}:${id}`;
+  const itemIds = createMemo(() => props.node().items);
+  const groupTargets = createMemo(() => {
+    const index = props.dropTargetIndex();
+    for (const itemId of itemIds()) {
+      const indexed = index.get(itemId);
+      if (indexed) return indexed;
+    }
+    return null;
+  });
+  const targetBefore = itemId => groupTargets()?.tabs.get(itemId);
+  const targetAtEnd = () => groupTargets()?.tabs.get(null);
+  const bodyTargets = () => groupTargets()?.body ?? [];
+  const startTabPress = (event, itemId) => {
+    if (event.button !== 0 || event.isPrimary === false) return;
+    stopTabPress?.();
+    const pointerId = event.pointerId;
+    const button = event.currentTarget;
+    const ownerWindow = window;
+    const stop = () => {
+      ownerWindow.removeEventListener("pointerup", onPointerUp, true);
+      ownerWindow.removeEventListener("pointercancel", onPointerCancel, true);
+      if (stopTabPress === stop) stopTabPress = undefined;
+    };
+    const onPointerUp = up => {
+      if (up.pointerId !== pointerId) return;
+      const rect = button.getBoundingClientRect();
+      const releasedInside = up.clientX >= rect.left && up.clientX <= rect.right && up.clientY >= rect.top && up.clientY <= rect.bottom;
+      const shouldActivate = releasedInside && !props.dnd.isDragging();
+      stop();
+      if (!shouldActivate) return;
+      suppressedPointerClick = itemId;
+      if (clearSuppressedPointerClick !== undefined) ownerWindow.clearTimeout(clearSuppressedPointerClick);
+      clearSuppressedPointerClick = ownerWindow.setTimeout(() => {
+        if (suppressedPointerClick === itemId) suppressedPointerClick = null;
+        clearSuppressedPointerClick = undefined;
+      }, 0);
+      props.onActivate(itemId);
+    };
+    const onPointerCancel = cancel => {
+      if (cancel.pointerId === pointerId) stop();
+    };
+    stopTabPress = stop;
+    ownerWindow.addEventListener("pointerup", onPointerUp, true);
+    ownerWindow.addEventListener("pointercancel", onPointerCancel, true);
+  };
+  onCleanup(() => {
+    stopTabPress?.();
+    if (clearSuppressedPointerClick !== undefined) window.clearTimeout(clearSuppressedPointerClick);
+  });
+  const [scrollbar, setScrollbar] = createSignal({
+    overflow: false,
+    left: 0,
+    width: 0
+  });
+  const syncScrollbar = () => {
+    if (!tabsElement) return;
+    const {
+      clientWidth,
+      scrollLeft,
+      scrollWidth
+    } = tabsElement;
+    if (scrollWidth <= clientWidth || clientWidth <= 0) {
+      setScrollbar({
+        overflow: false,
+        left: 0,
+        width: 0
+      });
+      return;
+    }
+    const width = Math.min(clientWidth, Math.max(24, clientWidth * clientWidth / scrollWidth));
+    const left = scrollLeft / (scrollWidth - clientWidth) * (clientWidth - width);
+    setScrollbar({
+      overflow: true,
+      left,
+      width
+    });
+  };
+  const scrollFromPointer = event => {
+    if (!tabsElement) return;
+    const track = event.currentTarget;
+    const {
+      left,
+      width
+    } = scrollbar();
+    const rect = track.getBoundingClientRect();
+    const available = Math.max(1, rect.width - width);
+    const thumbLeft = Math.min(available, Math.max(0, event.clientX - rect.left - scrollbarDragOffset));
+    tabsElement.scrollLeft = thumbLeft / available * (tabsElement.scrollWidth - tabsElement.clientWidth);
+    syncScrollbar();
+  };
+  const startScrollbarDrag = event => {
+    event.preventDefault();
+    const track = event.currentTarget;
+    const current = scrollbar();
+    scrollbarDragOffset = event.target === track ? current.width / 2 : Math.min(current.width, Math.max(0, event.clientX - track.getBoundingClientRect().left - current.left));
+    track.setPointerCapture(event.pointerId);
+    scrollFromPointer(event);
+  };
+  onMount(() => {
+    syncScrollbar();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(syncScrollbar);
+    if (tabsElement) observer?.observe(tabsElement);
+    onCleanup(() => observer?.disconnect());
+  });
+  createEffect(() => {
+    itemIds().length;
+    props.itemById();
+    groupTargets();
+    props.canAdd();
+    queueMicrotask(syncScrollbar);
+  });
+  const tabId = itemId => `${props.instanceId}-${itemId}-tab`;
+  const panelId = itemId => `${props.instanceId}-${itemId}-panel`;
+  const focusTab = index => {
+    const itemId = itemIds()[index];
+    if (!itemId) return;
+    props.onActivate(itemId);
+    queueMicrotask(() => document.getElementById(tabId(itemId))?.focus());
+  };
+  const onTabKeyDown = (event, index, itemId) => {
+    if (props.dnd.activeId() === draggableId(itemId)) return;
+    const item = requireItem(props.itemById(), itemId);
+    if ((event.key === "Delete" || event.key === "Backspace") && item.onClose) {
+      event.preventDefault();
+      item.onClose();
+      return;
+    }
+    const count = itemIds().length;
+    let next = null;
+    if (event.key === "ArrowLeft") next = (index - 1 + count) % count;
+    if (event.key === "ArrowRight") next = (index + 1) % count;
+    if (event.key === "Home") next = 0;
+    if (event.key === "End") next = count - 1;
+    if (next === null) return;
+    event.preventDefault();
+    focusTab(next);
+  };
+  const targetLabel = target => {
+    const targetItem = requireItem(props.itemById(), target.targetItemId);
+    if (target.kind === "group") return messages().addToNamed({
+      name: targetItem.title
+    });
+    if (target.kind === "tab") {
+      const before = target.beforeItemId ? requireItem(props.itemById(), target.beforeItemId) : null;
+      return before ? messages().insertBeforeNamed({
+        name: before.title
+      }) : messages().insertAtEnd;
+    }
+    return target.side ? messages().addPaneSide({
+      side: target.side,
+      name: targetItem.title
+    }) : messages().addToNamed({
+      name: targetItem.title
+    });
+  };
+  return (() => {
+    var _el$0 = _$getNextElement(_tmpl$8),
+      _el$1 = _el$0.firstChild,
+      _el$11 = _el$1.firstChild,
+      [_el$12, _co$] = _$getNextMarker(_el$11.nextSibling),
+      _el$13 = _el$12.nextSibling,
+      [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling),
+      _el$15 = _el$14.nextSibling,
+      [_el$16, _co$3] = _$getNextMarker(_el$15.nextSibling),
+      _el$22 = _el$1.nextSibling,
+      [_el$23, _co$4] = _$getNextMarker(_el$22.nextSibling),
+      _el$19 = _el$23.nextSibling,
+      _el$20 = _el$19.firstChild,
+      _el$24 = _el$19.nextSibling,
+      [_el$25, _co$5] = _$getNextMarker(_el$24.nextSibling);
+    _el$1.addEventListener("scroll", syncScrollbar);
+    var _ref$3 = tabsElement;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$1) : tabsElement = _el$1;
+    _$insert(_el$1, _$createComponent(For, {
+      get each() {
+        return itemIds();
+      },
+      children: (itemId, index) => {
+        const item = () => requireItem(props.itemById(), itemId);
+        const active = () => props.node().active === itemId;
+        return (() => {
+          var _el$26 = _$getNextElement(_tmpl$0),
+            _el$32 = _el$26.firstChild,
+            [_el$33, _co$6] = _$getNextMarker(_el$32.nextSibling),
+            _el$27 = _el$33.nextSibling,
+            _el$28 = _el$27.firstChild,
+            _el$29 = _el$28.firstChild,
+            _el$30 = _el$29.nextSibling,
+            _el$34 = _el$27.nextSibling,
+            [_el$35, _co$7] = _$getNextMarker(_el$34.nextSibling);
+          _$use(surface => props.dnd.draggable(surface, () => ({
+            id: draggableId(itemId),
+            meta: {
+              itemId,
+              label: item().title
+            },
+            disabled: !props.canMove(),
+            focusable: false,
+            keyboard: true,
+            handleSelector: ".k2b-panes__tab-button"
+          })), _el$26);
+          _$insert(_el$26, _$createComponent(Show, {
+            get when() {
+              return targetBefore(itemId);
+            },
+            children: target => _$createComponent(PanesDropTargetView, {
+              get target() {
+                return target();
+              },
+              get label() {
+                return targetLabel(target());
+              },
+              get dnd() {
+                return props.dnd;
+              },
+              placement: "tab"
+            })
+          }), _el$33, _co$6);
+          _el$27.$$keydown = event => onTabKeyDown(event, index(), itemId);
+          _el$27.$$click = event => {
+            if (event?.detail > 0 && suppressedPointerClick === itemId) {
+              suppressedPointerClick = null;
+              if (clearSuppressedPointerClick !== undefined) {
+                window.clearTimeout(clearSuppressedPointerClick);
+                clearSuppressedPointerClick = undefined;
+              }
+              return;
+            }
+            props.onActivate(itemId);
+          };
+          _el$27.$$pointerdown = event => startTabPress(event, itemId);
+          _$insert(_el$30, () => item().title);
+          _$insert(_el$26, _$createComponent(Show, {
+            get when() {
+              return item().onClose !== undefined;
+            },
+            get children() {
+              var _el$31 = _$getNextElement(_tmpl$9);
+              _el$31.$$click = event => {
+                event.stopPropagation();
+                item().onClose?.();
+              };
+              _el$31.$$pointerdown = event => event.stopPropagation();
+              _$effect(_p$ => {
+                var _v$19 = messages().closeNamed({
+                    name: item().title
+                  }),
+                  _v$20 = messages().closeNamed({
+                    name: item().title
+                  });
+                _v$19 !== _p$.e && _$setAttribute(_el$31, "title", _p$.e = _v$19);
+                _v$20 !== _p$.t && _$setAttribute(_el$31, "aria-label", _p$.t = _v$20);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              _$runHydrationEvents();
+              return _el$31;
+            }
+          }), _el$35, _co$7);
+          _$effect(_p$ => {
+            var _v$21 = active() ? "true" : undefined,
+              _v$22 = item().onClose !== undefined ? "true" : undefined,
+              _v$23 = props.canMove() ? "true" : undefined,
+              _v$24 = props.dnd.activeId() === draggableId(itemId) ? "true" : undefined,
+              _v$25 = tabId(itemId),
+              _v$26 = item().title,
+              _v$27 = active(),
+              _v$28 = active() ? panelId(itemId) : undefined,
+              _v$29 = index() + 1,
+              _v$30 = itemIds().length,
+              _v$31 = item().onClose ? "Delete Backspace" : undefined,
+              _v$32 = active() ? 0 : -1,
+              _v$33 = item().title,
+              _v$34 = `${iconClass(item().icon)} k2b-panes__icon`;
+            _v$21 !== _p$.e && _$setAttribute(_el$26, "data-active", _p$.e = _v$21);
+            _v$22 !== _p$.t && _$setAttribute(_el$26, "data-closable", _p$.t = _v$22);
+            _v$23 !== _p$.a && _$setAttribute(_el$26, "data-movable", _p$.a = _v$23);
+            _v$24 !== _p$.o && _$setAttribute(_el$26, "data-dnd-active", _p$.o = _v$24);
+            _v$25 !== _p$.i && _$setAttribute(_el$27, "id", _p$.i = _v$25);
+            _v$26 !== _p$.n && _$setAttribute(_el$27, "aria-label", _p$.n = _v$26);
+            _v$27 !== _p$.s && _$setAttribute(_el$27, "aria-selected", _p$.s = _v$27);
+            _v$28 !== _p$.h && _$setAttribute(_el$27, "aria-controls", _p$.h = _v$28);
+            _v$29 !== _p$.r && _$setAttribute(_el$27, "aria-posinset", _p$.r = _v$29);
+            _v$30 !== _p$.d && _$setAttribute(_el$27, "aria-setsize", _p$.d = _v$30);
+            _v$31 !== _p$.l && _$setAttribute(_el$27, "aria-keyshortcuts", _p$.l = _v$31);
+            _v$32 !== _p$.u && _$setAttribute(_el$27, "tabindex", _p$.u = _v$32);
+            _v$33 !== _p$.c && _$setAttribute(_el$27, "title", _p$.c = _v$33);
+            _v$34 !== _p$.w && _$className(_el$29, _p$.w = _v$34);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined,
+            n: undefined,
+            s: undefined,
+            h: undefined,
+            r: undefined,
+            d: undefined,
+            l: undefined,
+            u: undefined,
+            c: undefined,
+            w: undefined
+          });
+          _$runHydrationEvents();
+          return _el$26;
+        })();
+      }
+    }), _el$12, _co$);
+    _$insert(_el$1, _$createComponent(Show, {
+      get when() {
+        return targetAtEnd();
+      },
+      children: target => _$createComponent(PanesDropTargetView, {
+        get target() {
+          return target();
+        },
+        get label() {
+          return targetLabel(target());
+        },
+        get dnd() {
+          return props.dnd;
+        },
+        placement: "tab-end"
+      })
+    }), _el$14, _co$2);
+    _$insert(_el$1, _$createComponent(Show, {
+      get when() {
+        return props.canAdd();
+      },
+      get children() {
+        var _el$10 = _$getNextElement(_tmpl$5);
+        _el$10.$$click = () => props.addItem(props.node().active);
+        _$effect(_p$ => {
+          var _v$12 = messages().addPane,
+            _v$13 = messages().addPane;
+          _v$12 !== _p$.e && _$setAttribute(_el$10, "aria-label", _p$.e = _v$12);
+          _v$13 !== _p$.t && _$setAttribute(_el$10, "title", _p$.t = _v$13);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$runHydrationEvents();
+        return _el$10;
+      }
+    }), _el$16, _co$3);
+    _$insert(_el$0, _$createComponent(Show, {
+      get when() {
+        return scrollbar().overflow;
+      },
+      get children() {
+        var _el$17 = _$getNextElement(_tmpl$6),
+          _el$18 = _el$17.firstChild;
+        _el$17.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
+        _el$17.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
+        _el$17.$$pointermove = event => {
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event);
+        };
+        _el$17.$$pointerdown = startScrollbarDrag;
+        _$effect(_p$ => {
+          var _v$14 = `${scrollbar().left}px`,
+            _v$15 = `${scrollbar().width}px`;
+          _v$14 !== _p$.e && _$setStyleProperty(_el$18, "--k2b-panes-scroll-left", _p$.e = _v$14);
+          _v$15 !== _p$.t && _$setStyleProperty(_el$18, "--k2b-panes-scroll-width", _p$.t = _v$15);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$runHydrationEvents();
+        return _el$17;
+      }
+    }), _el$23, _co$4);
+    _$insert(_el$20, _$createComponent(Show, {
+      get when() {
+        return props.node().active;
+      },
+      keyed: true,
+      children: itemId => _$createComponent(ActivePane, {
+        itemId: itemId,
+        get itemById() {
+          return props.itemById;
+        }
+      })
+    }));
+    _$insert(_el$0, _$createComponent(Show, {
+      get when() {
+        return bodyTargets().length > 0;
+      },
+      get children() {
+        var _el$21 = _$getNextElement(_tmpl$7);
+        _$insert(_el$21, _$createComponent(For, {
+          get each() {
+            return bodyTargets();
+          },
+          children: target => _$createComponent(PanesDropTargetView, {
+            target: target,
+            get label() {
+              return targetLabel(target);
+            },
+            get dnd() {
+              return props.dnd;
+            },
+            placement: "body"
+          })
+        }));
+        return _el$21;
+      }
+    }), _el$25, _co$5);
+    _$effect(_p$ => {
+      var _v$16 = messages().paneTabs,
+        _v$17 = panelId(props.node().active),
+        _v$18 = tabId(props.node().active);
+      _v$16 !== _p$.e && _$setAttribute(_el$1, "aria-label", _p$.e = _v$16);
+      _v$17 !== _p$.t && _$setAttribute(_el$20, "id", _p$.t = _v$17);
+      _v$18 !== _p$.a && _$setAttribute(_el$20, "aria-labelledby", _p$.a = _v$18);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$0;
+  })();
+}
+function PanesDropTargetView(props) {
+  const icon = () => {
+    if (props.target.kind === "group") return "ti ti-plus";
+    if (props.target.kind === "tab") return props.placement === "tab" ? "ti ti-spacing-horizontal" : null;
+    if (props.target.side === "top") return "ti ti-row-insert-top";
+    if (props.target.side === "bottom") return "ti ti-row-insert-bottom";
+    if (props.target.side === "left") return "ti ti-column-insert-left";
+    return "ti ti-column-insert-right";
+  };
+  return (() => {
+    var _el$36 = _$getNextElement(_tmpl$10),
+      _el$38 = _el$36.firstChild,
+      [_el$39, _co$8] = _$getNextMarker(_el$38.nextSibling),
+      _el$40 = _el$39.nextSibling,
+      [_el$41, _co$9] = _$getNextMarker(_el$40.nextSibling);
+    _$use(element => props.dnd.droppable(element, () => ({
+      id: `panes-target:${props.target.id}`,
+      meta: {
+        target: props.target,
+        label: props.label
+      }
+    })), _el$36);
+    _$insert(_el$36, _$createComponent(Show, {
+      get when() {
+        return icon();
+      },
+      keyed: true,
+      children: iconClass => (() => {
+        var _el$42 = _$getNextElement(_tmpl$11);
+        _$className(_el$42, iconClass);
+        return _el$42;
+      })()
+    }), _el$39, _co$8);
+    _$insert(_el$36, _$createComponent(Show, {
+      get when() {
+        return props.target.kind === "split";
+      },
+      get children() {
+        var _el$37 = _$getNextElement(_tmpl$1);
+        _$insert(_el$37, () => props.label);
+        return _el$37;
+      }
+    }), _el$41, _co$9);
+    _$effect(_p$ => {
+      var _v$35 = props.target.kind,
+        _v$36 = props.placement,
+        _v$37 = props.target.side,
+        _v$38 = props.dnd.overId() === `panes-target:${props.target.id}` ? "true" : undefined,
+        _v$39 = props.label;
+      _v$35 !== _p$.e && _$setAttribute(_el$36, "data-kind", _p$.e = _v$35);
+      _v$36 !== _p$.t && _$setAttribute(_el$36, "data-placement", _p$.t = _v$36);
+      _v$37 !== _p$.a && _$setAttribute(_el$36, "data-zone", _p$.a = _v$37);
+      _v$38 !== _p$.o && _$setAttribute(_el$36, "data-active", _p$.o = _v$38);
+      _v$39 !== _p$.i && _$setAttribute(_el$36, "title", _p$.i = _v$39);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
+    return _el$36;
+  })();
+}
+_$delegateEvents(["click", "pointerdown", "keydown", "pointermove", "pointerup"]);
+//# sourceMappingURL=Panes.js.map