@k2b/ui 0.1.0-rc.0

package/dist/ssr/layout/Panes.js

@@ -0,0 +1,678 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<div class=\"", "\" data-k2b-panes role=\"group\"", ">", "</div>"],
+  _tmpl$2 = ["<button type=\"button\" class=\"k2b-panes__add\"", "><i class=\"ti ti-plus\" aria-hidden=\"true\"></i><span>", "</span></button>"],
+  _tmpl$3 = ["<div class=\"k2b-panes__empty\">", "</div>"],
+  _tmpl$4 = ["<div class=\"k2b-panes__split\"", "><div class=\"k2b-panes__split-child\" style=\"", "\">", "</div><button type=\"button\" role=\"separator\"", " class=\"k2b-panes__separator\"", "><span aria-hidden=\"true\"></span></button><div class=\"k2b-panes__split-child\" style=\"", "\">", "</div></div>"],
+  _tmpl$5 = ["<button type=\"button\" class=\"k2b-panes__add k2b-panes__add--tab\"", "><i class=\"ti ti-plus\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$6 = ["<div class=\"k2b-panes__tabs-scrollbar\" aria-hidden=\"true\"><span style=\"", "\"></span></div>"],
+  _tmpl$7 = ["<div class=\"k2b-panes__drop-targets\" aria-hidden=\"true\">", "</div>"],
+  _tmpl$8 = ["<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>", "</section>"],
+  _tmpl$9 = ["<button type=\"button\" class=\"k2b-panes__close\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$0 = ["<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 class=\"", "\" aria-hidden=\"true\"></i><span>", "</span></span></button>", "</div>"],
+  _tmpl$1 = ["<span>", "</span>"],
+  _tmpl$10 = ["<div class=\"k2b-panes__drop-target\"", " aria-hidden=\"true\">", "", "</div>"],
+  _tmpl$11 = ["<i", " aria-hidden=\"true\"></i>"];
+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 _$ssr(_tmpl$, `k2b-panes ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel ?? messages().paneWorkspace, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return layout().root;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$3, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.onAddItem !== undefined;
+        },
+        get children() {
+          return _$ssr(_tmpl$2, _$ssrAttribute("aria-label", _$escape(messages().addPane, true), false), _$escape(messages().addPane));
+        }
+      })));
+    },
+    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;
+      }
+    })
+  })));
+}
+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 _$ssr(_tmpl$4, _$ssrAttribute("data-direction", _$escape(props.node().direction, true), false), _$ssrStyleProperty("flex:", `${_$escape(props.node().ratio, true)} 1 0`), _$escape(_$createComponent(PanesNodeRenderer, _$mergeProps(props, {
+    node: () => props.node().first,
+    get path() {
+      return [...props.path, "first"];
+    }
+  }))), _$ssrAttribute("aria-orientation", props.node().direction === "horizontal" ? "vertical" : "horizontal", false) + _$ssrAttribute("aria-valuemin", _$escape(Math.round(PANES_MIN_RATIO * 100), true), false) + _$ssrAttribute("aria-valuemax", _$escape(Math.round((1 - PANES_MIN_RATIO) * 100), true), false) + _$ssrAttribute("aria-valuenow", _$escape(Math.round(props.node().ratio * 100), true), false) + _$ssrAttribute("aria-disabled", !props.canResize(), false) + _$ssrAttribute("tabindex", props.canResize() ? 0 : -1, false), _$ssrAttribute("data-direction", _$escape(props.node().direction, true), false) + _$ssrAttribute("aria-label", _$escape(messages().resizePanes, true), false), _$ssrStyleProperty("flex:", `${1 - _$escape(props.node().ratio, true)} 1 0`), _$escape(_$createComponent(PanesNodeRenderer, _$mergeProps(props, {
+    node: () => props.node().second,
+    get path() {
+      return [...props.path, "second"];
+    }
+  }))));
+}
+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 _$ssr(_tmpl$8, _$ssrAttribute("aria-label", _$escape(messages().paneTabs, true), false), _$escape(_$createComponent(For, {
+    get each() {
+      return itemIds();
+    },
+    children: (itemId, index) => {
+      const item = () => requireItem(props.itemById(), itemId);
+      const active = () => props.node().active === itemId;
+      return _$ssr(_tmpl$0, _$ssrAttribute("data-active", active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-closable", item().onClose !== undefined ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-movable", props.canMove() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-dnd-active", props.dnd.activeId() === draggableId(itemId) ? "true" : _$escape(undefined, true), false), _$escape(_$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"
+        })
+      })), _$ssrAttribute("id", _$escape(tabId(itemId), true), false), _$ssrAttribute("aria-label", _$escape(item().title, true), false) + _$ssrAttribute("aria-selected", _$escape(active(), true), false) + _$ssrAttribute("aria-controls", active() ? _$escape(panelId(itemId), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-posinset", _$escape(index(), true) + 1, false) + _$ssrAttribute("aria-setsize", _$escape(itemIds().length, true), false) + _$ssrAttribute("aria-keyshortcuts", item().onClose ? "Delete Backspace" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", active() ? 0 : -1, false) + _$ssrAttribute("title", _$escape(item().title, true), false), `${_$escape(iconClass(item().icon), true)} k2b-panes__icon`, _$escape(item().title), _$escape(_$createComponent(Show, {
+        get when() {
+          return item().onClose !== undefined;
+        },
+        get children() {
+          return _$ssr(_tmpl$9, _$ssrAttribute("title", _$escape(messages().closeNamed({
+            name: item().title
+          }), true), false) + _$ssrAttribute("aria-label", _$escape(messages().closeNamed({
+            name: item().title
+          }), true), false));
+        }
+      })));
+    }
+  })), _$escape(_$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"
+    })
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.canAdd();
+    },
+    get children() {
+      return _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(messages().addPane, true), false) + _$ssrAttribute("title", _$escape(messages().addPane, true), false));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return scrollbar().overflow;
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$ssrStyleProperty("--k2b-panes-scroll-left:", `${_$escape(scrollbar().left, true)}px`) + _$ssrStyleProperty(";--k2b-panes-scroll-width:", `${_$escape(scrollbar().width, true)}px`));
+    }
+  })), _$ssrAttribute("id", _$escape(panelId(props.node().active), true), false), _$ssrAttribute("aria-labelledby", _$escape(tabId(props.node().active), true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.node().active;
+    },
+    keyed: true,
+    children: itemId => _$createComponent(ActivePane, {
+      itemId: itemId,
+      get itemById() {
+        return props.itemById;
+      }
+    })
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return bodyTargets().length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$7, _$escape(_$createComponent(For, {
+        get each() {
+          return bodyTargets();
+        },
+        children: target => _$createComponent(PanesDropTargetView, {
+          target: target,
+          get label() {
+            return targetLabel(target);
+          },
+          get dnd() {
+            return props.dnd;
+          },
+          placement: "body"
+        })
+      })));
+    }
+  })));
+}
+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 _$ssr(_tmpl$10, _$ssrAttribute("data-kind", _$escape(props.target.kind, true), false) + _$ssrAttribute("data-placement", _$escape(props.placement, true), false) + _$ssrAttribute("data-zone", _$escape(props.target.side, true), false) + _$ssrAttribute("data-active", props.dnd.overId() === `panes-target:${props.target.id}` ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("title", _$escape(props.label, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return icon();
+    },
+    keyed: true,
+    children: iconClass => _$ssr(_tmpl$11, _$ssrAttribute("class", _$escape(iconClass, true), false))
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.target.kind === "split";
+    },
+    get children() {
+      return _$ssr(_tmpl$1, _$escape(props.label));
+    }
+  })));
+}
+//# sourceMappingURL=Panes.js.map