@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/server/index.server-t9a3m15z.js

@@ -0,0 +1,691 @@
+import {
+  useResizeObserver
+} from "./index.server-9w7qdn8h.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/resizable-panels/resizable-panels.svelte
+import * as $ from "svelte/internal/server";
+
+// src/components/resizable-panels/resizable-panels-sizing.ts
+var DEFAULT_KEYBOARD_STEP = { value: 10, unit: "px" };
+var DEFAULT_SNAP_THRESHOLD = { value: 8, unit: "px" };
+function roundToThousandth(value) {
+  return Number(value.toFixed(3));
+}
+function clamp(value, minimum, maximum) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+function resolveSizeToPixels(size, availablePanePixels) {
+  if (!size)
+    return;
+  if (!Number.isFinite(size.value))
+    return;
+  if (size.unit === "px")
+    return Math.max(0, size.value);
+  return Math.max(0, size.value / 100 * availablePanePixels);
+}
+function formatSizeFromPixels(pixels, preferredUnit, availablePanePixels) {
+  if (preferredUnit === "px") {
+    return { value: roundToThousandth(pixels), unit: "px" };
+  }
+  if (availablePanePixels <= 0) {
+    return { value: 0, unit: "percent" };
+  }
+  return {
+    value: roundToThousandth(pixels / availablePanePixels * 100),
+    unit: preferredUnit
+  };
+}
+function getPreferredUnit(pane) {
+  return pane.defaultSize?.unit ?? "percent";
+}
+function formatSizeSignature(size) {
+  if (!size)
+    return "";
+  return `${size.value}:${size.unit}`;
+}
+function getPaneLayoutSignature(panes) {
+  return panes.map((pane) => [
+    pane.id,
+    formatSizeSignature(pane.defaultSize),
+    formatSizeSignature(pane.minSize),
+    formatSizeSignature(pane.maxSize),
+    (pane.snapPoints ?? []).map((size) => formatSizeSignature(size)).join(","),
+    pane.collapsible ? "1" : "0",
+    pane.defaultCollapsed ? "1" : "0"
+  ].join("|")).join("||");
+}
+function getPaneDefaultSizeSignature(panes) {
+  return panes.map((pane) => [pane.id, formatSizeSignature(pane.defaultSize)].join("|")).join("||");
+}
+function getPanelConstraints(panes, availablePanePixels) {
+  return panes.map((pane) => {
+    const minimum = resolveSizeToPixels(pane.minSize, availablePanePixels) ?? 0;
+    const maximum = resolveSizeToPixels(pane.maxSize, availablePanePixels) ?? Number.POSITIVE_INFINITY;
+    return {
+      minPixels: Math.max(0, minimum),
+      maxPixels: Math.max(Math.max(0, minimum), maximum)
+    };
+  });
+}
+function distributeDelta(sizes, targetTotal, capacities, direction) {
+  const nextSizes = [...sizes];
+  let remaining = targetTotal - nextSizes.reduce((sum, value) => sum + value, 0);
+  if (Math.abs(remaining) < 0.001)
+    return nextSizes;
+  const sign = direction === "grow" ? 1 : -1;
+  let guard = 0;
+  while (Math.abs(remaining) > 0.001 && guard < 1000) {
+    guard += 1;
+    const availableIndexes = capacities.map((capacity, index) => ({ capacity, index })).filter(({ capacity }) => capacity > 0.001);
+    if (availableIndexes.length === 0)
+      break;
+    const totalCapacity = availableIndexes.reduce((sum, item) => sum + item.capacity, 0);
+    let consumedThisPass = 0;
+    for (const { capacity, index } of availableIndexes) {
+      const proportional = Math.abs(remaining) * capacity / totalCapacity;
+      const slice = Math.min(capacity, proportional || Math.abs(remaining));
+      nextSizes[index] += slice * sign;
+      capacities[index] -= slice;
+      consumedThisPass += slice;
+      remaining -= slice * sign;
+      if (Math.abs(remaining) <= 0.001)
+        break;
+    }
+    if (consumedThisPass <= 0.001)
+      break;
+  }
+  return nextSizes;
+}
+function scaleSizesToTotal(sizes, targetTotal) {
+  if (targetTotal <= 0)
+    return sizes.map(() => 0);
+  const currentTotal = sizes.reduce((sum, value) => sum + value, 0);
+  if (currentTotal <= 0) {
+    const equalShare = sizes.length > 0 ? targetTotal / sizes.length : 0;
+    return sizes.map(() => equalShare);
+  }
+  const scale = targetTotal / currentTotal;
+  return sizes.map((size) => size * scale);
+}
+function applyCollapsedConstraints(constraints, collapsedFlags) {
+  return constraints.map((constraint, index) => collapsedFlags[index] ? { minPixels: 0, maxPixels: 0 } : constraint);
+}
+function normalizeToAvailable(desiredSizes, constraints, availablePanePixels, collapsedFlags = []) {
+  const effectiveConstraints = applyCollapsedConstraints(constraints, collapsedFlags);
+  const clampedSizes = desiredSizes.map((size, index) => clamp(size, effectiveConstraints[index].minPixels, effectiveConstraints[index].maxPixels));
+  const minimumTotal = effectiveConstraints.reduce((sum, constraint) => sum + constraint.minPixels, 0);
+  if (minimumTotal > availablePanePixels) {
+    return scaleSizesToTotal(effectiveConstraints.map((constraint) => constraint.minPixels), availablePanePixels);
+  }
+  const finiteMaximums = effectiveConstraints.map((constraint) => constraint.maxPixels);
+  if (finiteMaximums.every(Number.isFinite)) {
+    const maximumTotal = finiteMaximums.reduce((sum, value) => sum + value, 0);
+    if (maximumTotal > 0 && maximumTotal < availablePanePixels) {
+      return scaleSizesToTotal(finiteMaximums, availablePanePixels);
+    }
+  }
+  const currentTotal = clampedSizes.reduce((sum, value) => sum + value, 0);
+  if (currentTotal < availablePanePixels) {
+    return distributeDelta(clampedSizes, availablePanePixels, effectiveConstraints.map((constraint, index) => Math.max(0, constraint.maxPixels - clampedSizes[index])), "grow");
+  }
+  if (currentTotal > availablePanePixels) {
+    return distributeDelta(clampedSizes, availablePanePixels, effectiveConstraints.map((constraint, index) => Math.max(0, clampedSizes[index] - constraint.minPixels)), "shrink");
+  }
+  return clampedSizes;
+}
+function validatePanes(panes) {
+  const issues = [];
+  const seenIds = new Set;
+  for (const pane of panes) {
+    if (!pane.id.trim()) {
+      issues.push("Every pane needs a non-empty id.");
+      continue;
+    }
+    if (seenIds.has(pane.id)) {
+      issues.push(`Duplicate pane id "${pane.id}".`);
+      continue;
+    }
+    seenIds.add(pane.id);
+    if (pane.defaultCollapsed && !pane.collapsible) {
+      issues.push(`Pane "${pane.id}" cannot default to collapsed unless collapsible is true.`);
+    }
+  }
+  return issues;
+}
+function createInitialLayoutState(panes, availablePanePixels, orientation) {
+  const constraints = getPanelConstraints(panes, availablePanePixels);
+  const equalShare = panes.length > 0 ? availablePanePixels / panes.length : 0;
+  const desiredSizes = panes.map((pane) => resolveSizeToPixels(pane.defaultSize, availablePanePixels) ?? equalShare);
+  const baseSizes = normalizeToAvailable(desiredSizes, constraints, availablePanePixels);
+  const collapsedIndexes = panes.map((pane, index) => pane.defaultCollapsed && pane.collapsible ? index : -1).filter((index) => index >= 0);
+  const restorePixels = [...baseSizes];
+  const collapsedSizes = [...baseSizes];
+  for (const index of collapsedIndexes) {
+    collapsedSizes[index] = 0;
+  }
+  const redistributed = normalizeToAvailable(collapsedSizes, constraints, availablePanePixels, panes.map((pane) => Boolean(pane.defaultCollapsed && pane.collapsible)));
+  return {
+    availablePanePixels,
+    orientation,
+    panels: panes.map((pane, index) => ({
+      id: pane.id,
+      sizePixels: redistributed[index] ?? 0,
+      restorePixels: restorePixels[index] ?? 0,
+      collapsed: collapsedIndexes.includes(index),
+      preferredUnit: getPreferredUnit(pane)
+    }))
+  };
+}
+function rebaseLayoutState(state, panes, availablePanePixels, orientation, options = {}) {
+  const previousById = new Map(state.panels.map((panel) => [panel.id, panel]));
+  const constraints = getPanelConstraints(panes, availablePanePixels);
+  const fallback = createInitialLayoutState(panes, availablePanePixels, orientation);
+  const collapsedFlags = panes.map((pane, index) => {
+    const previous = previousById.get(pane.id);
+    return previous?.collapsed ?? fallback.panels[index].collapsed;
+  });
+  const desiredSizes = panes.map((pane, index) => {
+    const previous = previousById.get(pane.id);
+    if (!previous)
+      return fallback.panels[index].sizePixels;
+    if (previous.collapsed)
+      return 0;
+    if (options.useDefaultSizes)
+      return fallback.panels[index].sizePixels;
+    if (state.availablePanePixels <= 0)
+      return fallback.panels[index].sizePixels;
+    return previous.sizePixels / state.availablePanePixels * availablePanePixels;
+  });
+  const normalized = normalizeToAvailable(desiredSizes, constraints, availablePanePixels, collapsedFlags);
+  return {
+    availablePanePixels,
+    orientation,
+    panels: panes.map((pane, index) => {
+      const previous = previousById.get(pane.id);
+      const previousRestore = state.availablePanePixels > 0 ? previous?.restorePixels ?? fallback.panels[index].restorePixels : fallback.panels[index].restorePixels;
+      const collapsed = collapsedFlags[index];
+      return {
+        id: pane.id,
+        sizePixels: normalized[index] ?? 0,
+        restorePixels: state.availablePanePixels > 0 ? previousRestore / state.availablePanePixels * availablePanePixels : previousRestore,
+        collapsed,
+        preferredUnit: getPreferredUnit(pane)
+      };
+    })
+  };
+}
+function getPairBounds(state, panes, handleIndex, options = {}) {
+  const constraints = getPanelConstraints(panes, state.availablePanePixels);
+  const leading = state.panels[handleIndex];
+  const trailing = state.panels[handleIndex + 1];
+  const leadingConstraints = constraints[handleIndex];
+  const trailingConstraints = constraints[handleIndex + 1];
+  const pairTotal = leading.sizePixels + trailing.sizePixels;
+  const leadingMinimum = leading.collapsed && options.allowCollapsedLeadingMinimum ? 0 : leadingConstraints.minPixels;
+  const trailingMinimum = trailing.collapsed && options.allowCollapsedTrailingMinimum ? 0 : trailingConstraints.minPixels;
+  const minimumLeading = Math.max(leadingMinimum, Number.isFinite(trailingConstraints.maxPixels) ? pairTotal - trailingConstraints.maxPixels : Number.NEGATIVE_INFINITY);
+  const pairMaximumLeading = pairTotal - trailingMinimum;
+  const maximumLeading = clamp(leadingConstraints.maxPixels, minimumLeading, Math.max(minimumLeading, pairMaximumLeading));
+  return { pairTotal, minimumLeading, maximumLeading };
+}
+function clonePanels(state) {
+  return state.panels.map((panel) => ({ ...panel }));
+}
+function hasLayoutPixelChanges(previous, next) {
+  if (previous.panels.length !== next.panels.length)
+    return true;
+  return previous.panels.some((panel, index) => {
+    const nextPanel = next.panels[index];
+    if (!nextPanel)
+      return true;
+    return Math.abs(panel.sizePixels - nextPanel.sizePixels) >= 0.001 || panel.collapsed !== nextPanel.collapsed;
+  });
+}
+function setLeadingPanePixels(state, panes, handleIndex, leadingPixels, options = {}) {
+  const { pairTotal, minimumLeading, maximumLeading } = getPairBounds(state, panes, handleIndex, options);
+  const panels = clonePanels(state);
+  const nextLeading = clamp(leadingPixels, minimumLeading, maximumLeading);
+  const nextTrailing = pairTotal - nextLeading;
+  panels[handleIndex].sizePixels = nextLeading;
+  panels[handleIndex].collapsed = panes[handleIndex].collapsible ? nextLeading === 0 : false;
+  if (nextLeading > 0)
+    panels[handleIndex].restorePixels = nextLeading;
+  panels[handleIndex + 1].sizePixels = nextTrailing;
+  panels[handleIndex + 1].collapsed = panes[handleIndex + 1].collapsible ? nextTrailing === 0 : false;
+  if (nextTrailing > 0)
+    panels[handleIndex + 1].restorePixels = nextTrailing;
+  return { ...state, panels };
+}
+function applyPairDelta(state, panes, handleIndex, deltaPixels) {
+  const leading = state.panels[handleIndex];
+  return setLeadingPanePixels(state, panes, handleIndex, leading.sizePixels + deltaPixels, {
+    allowCollapsedLeadingMinimum: leading.collapsed,
+    allowCollapsedTrailingMinimum: state.panels[handleIndex + 1].collapsed
+  });
+}
+function getSnapCandidates(state, panes, handleIndex) {
+  const leadingPane = panes[handleIndex];
+  const trailingPane = panes[handleIndex + 1];
+  const pairTotal = state.panels[handleIndex].sizePixels + state.panels[handleIndex + 1].sizePixels;
+  const leadingCandidates = (leadingPane.snapPoints ?? []).map((size) => resolveSizeToPixels(size, state.availablePanePixels)).filter((value) => value !== undefined).map((value) => clamp(value, 0, pairTotal));
+  const trailingCandidates = (trailingPane.snapPoints ?? []).map((size) => resolveSizeToPixels(size, state.availablePanePixels)).filter((value) => value !== undefined).map((value) => clamp(pairTotal - value, 0, pairTotal));
+  return [...leadingCandidates, ...trailingCandidates];
+}
+function applyPairSnap(state, panes, handleIndex, threshold = DEFAULT_SNAP_THRESHOLD) {
+  const thresholdPixels = resolveSizeToPixels(threshold, state.availablePanePixels) ?? 0;
+  const currentLeading = state.panels[handleIndex].sizePixels;
+  const candidates = getSnapCandidates(state, panes, handleIndex);
+  let chosen = null;
+  let chosenDistance = Number.POSITIVE_INFINITY;
+  for (const candidate of candidates) {
+    const distance = Math.abs(candidate - currentLeading);
+    if (distance > thresholdPixels)
+      continue;
+    if (distance < chosenDistance) {
+      chosen = candidate;
+      chosenDistance = distance;
+    }
+  }
+  if (chosen === null)
+    return state;
+  return setLeadingPanePixels(state, panes, handleIndex, chosen, {
+    allowCollapsedLeadingMinimum: state.panels[handleIndex].collapsed,
+    allowCollapsedTrailingMinimum: state.panels[handleIndex + 1].collapsed
+  });
+}
+function applyPointerDragDelta(state, panes, handleIndex, previousAxis, currentAxis, threshold = DEFAULT_SNAP_THRESHOLD) {
+  const delta = currentAxis - previousAxis;
+  if (Math.abs(delta) < 0.001) {
+    return { axis: previousAxis, changed: false, state };
+  }
+  const resized = applyPairDelta(state, panes, handleIndex, delta);
+  const snapped = applyPairSnap(resized, panes, handleIndex, threshold);
+  const changed = hasLayoutPixelChanges(state, snapped);
+  return {
+    axis: currentAxis,
+    changed,
+    state: changed ? snapped : state
+  };
+}
+function resolveKeyboardStep(keyboardStep, availablePanePixels, multiplier = 1) {
+  return (resolveSizeToPixels(keyboardStep ?? DEFAULT_KEYBOARD_STEP, availablePanePixels) ?? 10) * multiplier;
+}
+function chooseCollapseIndex(panes, handleIndex, collapseTarget) {
+  const leadingIndex = handleIndex;
+  const trailingIndex = handleIndex + 1;
+  const leading = panes[leadingIndex];
+  const trailing = panes[trailingIndex];
+  if (collapseTarget === "leading")
+    return leading.collapsible ? leadingIndex : null;
+  if (collapseTarget === "trailing")
+    return trailing.collapsible ? trailingIndex : null;
+  if (leading.collapsible)
+    return leadingIndex;
+  if (trailing.collapsible)
+    return trailingIndex;
+  return null;
+}
+function toggleCollapseForHandle(state, panes, handleIndex, collapseTarget) {
+  const targetIndex = chooseCollapseIndex(panes, handleIndex, collapseTarget);
+  if (targetIndex === null)
+    return { state, changed: false };
+  const target = state.panels[targetIndex];
+  const pairTotal = state.panels[handleIndex].sizePixels + state.panels[handleIndex + 1].sizePixels;
+  if (!target.collapsed) {
+    const panels2 = clonePanels(state);
+    panels2[targetIndex].restorePixels = target.sizePixels;
+    panels2[targetIndex].collapsed = true;
+    const collapsed = setLeadingPanePixels({ ...state, panels: panels2 }, panes, handleIndex, targetIndex === handleIndex ? 0 : pairTotal, {
+      allowCollapsedLeadingMinimum: targetIndex === handleIndex,
+      allowCollapsedTrailingMinimum: targetIndex !== handleIndex
+    });
+    return { state: collapsed, changed: hasLayoutPixelChanges(state, collapsed) };
+  }
+  const panels = clonePanels(state);
+  const restored = setLeadingPanePixels({ ...state, panels }, panes, handleIndex, targetIndex === handleIndex ? target.restorePixels : pairTotal - target.restorePixels, {
+    allowCollapsedLeadingMinimum: targetIndex === handleIndex,
+    allowCollapsedTrailingMinimum: targetIndex !== handleIndex
+  });
+  return { state: restored, changed: true };
+}
+function getLayoutSnapshot(state, panes) {
+  return panes.map((pane, index) => {
+    const runtime = state.panels[index];
+    const percentage = state.availablePanePixels > 0 ? runtime.sizePixels / state.availablePanePixels * 100 : 0;
+    return {
+      id: pane.id,
+      size: formatSizeFromPixels(runtime.sizePixels, runtime.preferredUnit, state.availablePanePixels),
+      pixelSize: roundToThousandth(runtime.sizePixels),
+      percentage: roundToThousandth(percentage),
+      collapsed: runtime.collapsed
+    };
+  });
+}
+function getHandleAriaState(state, panes, handleIndex) {
+  const { pairTotal, minimumLeading, maximumLeading } = getPairBounds(state, panes, handleIndex, {
+    allowCollapsedLeadingMinimum: state.panels[handleIndex].collapsed,
+    allowCollapsedTrailingMinimum: state.panels[handleIndex + 1].collapsed
+  });
+  if (state.availablePanePixels <= 0 || pairTotal <= 0) {
+    return { valueNow: 0, valueMin: 0, valueMax: 100, valueText: "0px (0%)" };
+  }
+  const currentPixels = state.panels[handleIndex].sizePixels;
+  const currentPercent = Math.round(currentPixels / pairTotal * 100);
+  const minimumPercent = Math.round(minimumLeading / pairTotal * 100);
+  const maximumPercent = Math.round(maximumLeading / pairTotal * 100);
+  return {
+    valueNow: currentPercent,
+    valueMin: minimumPercent,
+    valueMax: maximumPercent,
+    valueText: `${Math.round(currentPixels)}px (${currentPercent}%)`
+  };
+}
+
+// src/components/resizable-panels/resizable-panels.svelte
+function Resizable_panels($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const componentId = $.props_id($$renderer2);
+    let {
+      panes,
+      orientation = "horizontal",
+      keyboardStep,
+      snapThreshold = { value: 8, unit: "px" },
+      collapseOnDoubleClick = false,
+      collapseTarget = "nearest-collapsible",
+      onlayoutchange,
+      onlayoutcommit,
+      children,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let rootElement = undefined;
+    let measuredRootPixels = 0;
+    let measuredHandlePixels = 8;
+    let activeHandleIndex = null;
+    let activePointerId = null;
+    let activeHandleElement = null;
+    let previousPointerAxis = 0;
+    let pointerDragChanged = false;
+    let layoutState = null;
+    let previousPaneLayoutSignature = "";
+    let previousPaneDefaultSizeSignature = "";
+    const issues = $.derived(() => validatePanes(panes));
+    function computeAvailablePanePixels(rootPixels = measuredRootPixels, handlePixels = measuredHandlePixels) {
+      return Math.max(0, rootPixels - Math.max(0, panes.length - 1) * handlePixels);
+    }
+    const availablePanePixels = $.derived(computeAvailablePanePixels);
+    const unmeasuredSizes = $.derived(() => panes.map((pane, index) => {
+      const percent = panes.length > 0 ? 100 / panes.length : 0;
+      const size = { value: percent, unit: "percent" };
+      const context = {
+        id: pane.id,
+        index,
+        collapsed: Boolean(pane.defaultCollapsed && pane.collapsible),
+        size,
+        pixelSize: 0,
+        percentage: percent
+      };
+      return context;
+    }));
+    function emit(reason, committed) {
+      if (!layoutState)
+        return;
+      const detail = {
+        reason,
+        orientation,
+        sizes: getLayoutSnapshot(layoutState, panes)
+      };
+      onlayoutchange?.(detail);
+      if (committed) {
+        onlayoutcommit?.(detail);
+      }
+    }
+    function syncMeasuredLayout(nextAvailablePanePixels = availablePanePixels()) {
+      if (panes.length === 0) {
+        layoutState = null;
+        previousPaneLayoutSignature = "";
+        previousPaneDefaultSizeSignature = "";
+        return;
+      }
+      const normalizedAvailablePanePixels = Math.max(0, nextAvailablePanePixels);
+      const nextPaneLayoutSignature = getPaneLayoutSignature(panes);
+      const nextPaneDefaultSizeSignature = getPaneDefaultSizeSignature(panes);
+      if (!layoutState) {
+        layoutState = createInitialLayoutState(panes, normalizedAvailablePanePixels, orientation);
+        previousPaneLayoutSignature = nextPaneLayoutSignature;
+        previousPaneDefaultSizeSignature = nextPaneDefaultSizeSignature;
+        return;
+      }
+      if (layoutState.availablePanePixels !== normalizedAvailablePanePixels || layoutState.orientation !== orientation) {
+        const previousAvailablePanePixels = layoutState.availablePanePixels;
+        layoutState = rebaseLayoutState(layoutState, panes, normalizedAvailablePanePixels, orientation);
+        previousPaneLayoutSignature = nextPaneLayoutSignature;
+        previousPaneDefaultSizeSignature = nextPaneDefaultSizeSignature;
+        if (previousAvailablePanePixels > 0 && normalizedAvailablePanePixels > 0) {
+          emit("rebase", true);
+        }
+        return;
+      }
+      if (layoutState.panels.length !== panes.length || layoutState.panels.some((panel, index) => panel.id !== panes[index]?.id) || previousPaneLayoutSignature !== nextPaneLayoutSignature) {
+        const previousLayoutState = layoutState;
+        const nextLayoutState = rebaseLayoutState(layoutState, panes, normalizedAvailablePanePixels, orientation, {
+          useDefaultSizes: previousPaneDefaultSizeSignature !== nextPaneDefaultSizeSignature
+        });
+        layoutState = nextLayoutState;
+        previousPaneLayoutSignature = nextPaneLayoutSignature;
+        previousPaneDefaultSizeSignature = nextPaneDefaultSizeSignature;
+        if (hasLayoutPixelChanges(previousLayoutState, nextLayoutState)) {
+          emit("rebase", true);
+        }
+      }
+    }
+    function measureRoot(element = rootElement) {
+      if (!element)
+        return;
+      const rect = element.getBoundingClientRect();
+      const rootPixels = orientation === "horizontal" ? rect.width : rect.height;
+      const firstHandle = element.querySelector(".cinder-resizable-panels__handle");
+      let handlePixels = measuredHandlePixels;
+      if (firstHandle) {
+        const handleRect = firstHandle.getBoundingClientRect();
+        handlePixels = orientation === "horizontal" ? handleRect.width : handleRect.height;
+      }
+      measuredRootPixels = rootPixels;
+      measuredHandlePixels = handlePixels;
+      syncMeasuredLayout(computeAvailablePanePixels(rootPixels, handlePixels));
+    }
+    const resizeAttachment = useResizeObserver(() => {
+      measureRoot();
+    });
+    function axisValueFromPointerEvent(event) {
+      return orientation === "horizontal" ? event.clientX : event.clientY;
+    }
+    function handlePointerDown(event, handleIndex) {
+      if (event.button !== 0)
+        return;
+      if (!layoutState)
+        return;
+      if (activePointerId !== null)
+        return;
+      activeHandleIndex = handleIndex;
+      activePointerId = event.pointerId;
+      previousPointerAxis = axisValueFromPointerEvent(event);
+      pointerDragChanged = false;
+      if (event.currentTarget instanceof HTMLElement) {
+        activeHandleElement = event.currentTarget;
+        event.currentTarget.focus();
+        if ("setPointerCapture" in event.currentTarget) {
+          event.currentTarget.setPointerCapture(event.pointerId);
+        }
+      }
+    }
+    function handlePointerMove(event) {
+      if (activeHandleIndex === null || activePointerId !== event.pointerId || !layoutState)
+        return;
+      const next = applyPointerDragDelta(layoutState, panes, activeHandleIndex, previousPointerAxis, axisValueFromPointerEvent(event), snapThreshold);
+      previousPointerAxis = next.axis;
+      if (!next.changed)
+        return;
+      layoutState = next.state;
+      pointerDragChanged = true;
+      emit("pointer", false);
+    }
+    function endPointerDrag(event) {
+      if (activeHandleIndex === null || activePointerId !== event.pointerId)
+        return;
+      if (activeHandleElement && "releasePointerCapture" in activeHandleElement) {
+        try {
+          activeHandleElement.releasePointerCapture(event.pointerId);
+        } catch {}
+      }
+      activeHandleIndex = null;
+      activePointerId = null;
+      activeHandleElement = null;
+      if (pointerDragChanged) {
+        emit("pointer", true);
+      }
+      pointerDragChanged = false;
+    }
+    function handleDoubleClick(handleIndex) {
+      if (!collapseOnDoubleClick || !layoutState)
+        return;
+      const result = toggleCollapseForHandle(layoutState, panes, handleIndex, collapseTarget);
+      if (!result.changed)
+        return;
+      layoutState = result.state;
+      emit("double-click", true);
+    }
+    function handleKeyDown(event, handleIndex) {
+      if (!layoutState)
+        return;
+      const separatorOrientation = orientation === "horizontal" ? "vertical" : "horizontal";
+      const step = resolveKeyboardStep(keyboardStep, availablePanePixels(), event.shiftKey ? 10 : 1);
+      let nextState = null;
+      if (separatorOrientation === "vertical") {
+        if (event.key === "ArrowLeft")
+          nextState = applyPairDelta(layoutState, panes, handleIndex, -step);
+        if (event.key === "ArrowRight")
+          nextState = applyPairDelta(layoutState, panes, handleIndex, step);
+      } else {
+        if (event.key === "ArrowUp")
+          nextState = applyPairDelta(layoutState, panes, handleIndex, -step);
+        if (event.key === "ArrowDown")
+          nextState = applyPairDelta(layoutState, panes, handleIndex, step);
+      }
+      if (event.key === "Home") {
+        nextState = setLeadingPanePixels(layoutState, panes, handleIndex, 0, {
+          allowCollapsedLeadingMinimum: layoutState.panels[handleIndex].collapsed,
+          allowCollapsedTrailingMinimum: layoutState.panels[handleIndex + 1].collapsed
+        });
+      }
+      if (event.key === "End") {
+        const pairTotal = layoutState.panels[handleIndex].sizePixels + layoutState.panels[handleIndex + 1].sizePixels;
+        nextState = setLeadingPanePixels(layoutState, panes, handleIndex, pairTotal, {
+          allowCollapsedLeadingMinimum: layoutState.panels[handleIndex].collapsed,
+          allowCollapsedTrailingMinimum: layoutState.panels[handleIndex + 1].collapsed
+        });
+      }
+      if (!nextState)
+        return;
+      event.preventDefault();
+      const snappedState = applyPairSnap(nextState, panes, handleIndex, snapThreshold);
+      if (!hasLayoutPixelChanges(layoutState, snappedState))
+        return;
+      layoutState = snappedState;
+      emit("keyboard", true);
+    }
+    function paneContext(index) {
+      if (!layoutState) {
+        return unmeasuredSizes()[index];
+      }
+      const runtime = layoutState.panels[index];
+      if (layoutState.availablePanePixels <= 0) {
+        const unmeasured = unmeasuredSizes()[index];
+        return {
+          ...unmeasured,
+          id: runtime.id,
+          index,
+          collapsed: runtime.collapsed,
+          size: runtime.collapsed ? { value: 0, unit: "px" } : unmeasured.size,
+          pixelSize: 0,
+          percentage: runtime.collapsed ? 0 : unmeasured.percentage
+        };
+      }
+      const percentage = layoutState.availablePanePixels > 0 ? runtime.sizePixels / layoutState.availablePanePixels * 100 : 0;
+      return {
+        id: runtime.id,
+        index,
+        collapsed: runtime.collapsed,
+        size: runtime.preferredUnit === "px" ? { value: runtime.sizePixels, unit: "px" } : { value: percentage, unit: "percent" },
+        pixelSize: runtime.sizePixels,
+        percentage
+      };
+    }
+    function panelStyle(index) {
+      if (!layoutState)
+        return;
+      if (layoutState.availablePanePixels <= 0) {
+        return layoutState.panels[index].collapsed ? "--_cinder-resizable-panel-size:0px;" : undefined;
+      }
+      return `--_cinder-resizable-panel-size:${layoutState.panels[index].sizePixels}px;`;
+    }
+    function isPaneHiddenFromInteraction(context) {
+      const currentLayoutState = layoutState;
+      if (currentLayoutState === null)
+        return false;
+      return context.collapsed || currentLayoutState.availablePanePixels > 0 && context.pixelSize <= 0;
+    }
+    function handleAriaLabel(handleIndex) {
+      return `Resize ${panes[handleIndex].label} and ${panes[handleIndex + 1].label}`;
+    }
+    function handleAriaOrientation() {
+      return orientation === "horizontal" ? "vertical" : "horizontal";
+    }
+    function getUnmeasuredHandleAriaState(handleIndex) {
+      const leadingPercentage = unmeasuredSizes()[handleIndex]?.percentage ?? 0;
+      const trailingPercentage = unmeasuredSizes()[handleIndex + 1]?.percentage ?? 0;
+      const pairTotal = leadingPercentage + trailingPercentage;
+      const valueNow = pairTotal > 0 ? Math.round(leadingPercentage / pairTotal * 100) : 0;
+      return {
+        valueNow,
+        valueMin: 0,
+        valueMax: 100,
+        valueText: `0px (${valueNow}%)`
+      };
+    }
+    $$renderer2.push(`<div${$.attributes({
+      ...rest,
+      class: $.clsx(classNames("cinder-resizable-panels", className)),
+      "data-cinder-orientation": orientation
+    })}><!--[-->`);
+    const each_array = $.ensure_array_like(panes);
+    for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+      let pane = each_array[index];
+      const context = paneContext(index);
+      const hiddenFromInteraction = isPaneHiddenFromInteraction(context);
+      $$renderer2.push(`<section${$.attr("id", `${componentId}-${pane.id}`)} class="cinder-resizable-panels__pane"${$.attr("data-cinder-collapsed", context.collapsed || undefined)}${$.attr("aria-hidden", hiddenFromInteraction ? "true" : undefined)}${$.attr("inert", hiddenFromInteraction || undefined, true)}${$.attr_style(panelStyle(index))}>`);
+      children($$renderer2, pane, context);
+      $$renderer2.push(`<!----></section> `);
+      if (index < panes.length - 1) {
+        $$renderer2.push("<!--[0-->");
+        const ariaState = layoutState && availablePanePixels() > 0 ? getHandleAriaState(layoutState, panes, index) : getUnmeasuredHandleAriaState(index);
+        $$renderer2.push(`<span class="cinder-resizable-panels__handle"${$.attr("data-cinder-orientation", orientation)} role="separator" tabindex="0"${$.attr("aria-controls", `${componentId}-${panes[index].id} ${componentId}-${panes[index + 1].id}`)}${$.attr("aria-label", handleAriaLabel(index))}${$.attr("aria-orientation", handleAriaOrientation())}${$.attr("aria-valuemin", ariaState.valueMin)}${$.attr("aria-valuemax", ariaState.valueMax)}${$.attr("aria-valuenow", ariaState.valueNow)}${$.attr("aria-valuetext", ariaState.valueText)}><span aria-hidden="true" class="cinder-resizable-panels__handle-line"></span></span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+
+// src/components/resizable-panels/index.ts
+var resizable_panels_default = Resizable_panels;
+export { Resizable_panels, resizable_panels_default };
+
+//# debugId=78096C5B58AA0FE164756E2164756E21