@zag-js/splitter 1.39.1 → 1.41.0

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './splitter.anatomy.mjs';
 export { connect } from './splitter.connect.mjs';
 export { machine } from './splitter.machine.mjs';
 export { panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps } from './splitter.props.mjs';
-export { SplitterApi as Api, CursorState, DragState, ElementIds, ExpandCollapseDetails, SplitterItem as Item, KeyboardState, SplitterMachine as Machine, PanelData, PanelId, PanelItem, PanelProps, SplitterProps as Props, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterService as Service } from './splitter.types.mjs';
+export { SplitterApi as Api, CursorState, DragState, ElementIds, ExpandCollapseDetails, SplitterItem as Item, KeyboardState, SplitterMachine as Machine, PanelData, PanelId, PanelItem, PanelProps, PanelResizeBehavior, PanelSize, SplitterProps as Props, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterService as Service } from './splitter.types.mjs';
 export { getPanelLayout as layout } from './utils/panel.mjs';
 export { HitAreaMargins, SplitterRegistry, SplitterRegistryOptions, registry } from './utils/registry.mjs';
 import '@zag-js/anatomy';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './splitter.anatomy.js';
 export { connect } from './splitter.connect.js';
 export { machine } from './splitter.machine.js';
 export { panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps } from './splitter.props.js';
-export { SplitterApi as Api, CursorState, DragState, ElementIds, ExpandCollapseDetails, SplitterItem as Item, KeyboardState, SplitterMachine as Machine, PanelData, PanelId, PanelItem, PanelProps, SplitterProps as Props, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterService as Service } from './splitter.types.js';
+export { SplitterApi as Api, CursorState, DragState, ElementIds, ExpandCollapseDetails, SplitterItem as Item, KeyboardState, SplitterMachine as Machine, PanelData, PanelId, PanelItem, PanelProps, PanelResizeBehavior, PanelSize, SplitterProps as Props, ResizeDetails, ResizeEndDetails, ResizeEvent, ResizeTriggerId, ResizeTriggerItem, ResizeTriggerProps, ResizeTriggerState, SplitterService as Service } from './splitter.types.js';
 export { getPanelLayout as layout } from './utils/panel.js';
 export { HitAreaMargins, SplitterRegistry, SplitterRegistryOptions, registry } from './utils/registry.js';
 import '@zag-js/anatomy';

package/dist/splitter.connect.js

@@ -40,29 +40,59 @@ var dom = __toESM(require("./splitter.dom.js"));
 var import_aria = require("./utils/aria.js");
 var import_fuzzy = require("./utils/fuzzy.js");
 var import_panel = require("./utils/panel.js");
+var import_size = require("./utils/size.js");
 function connect(service, normalize) {
   const { state, send, prop, computed, context, scope } = service;
   const horizontal = computed("horizontal");
   const dragging = state.matches("dragging");
   const registry = prop("registry");
   const orientation = prop("orientation");
+  const rawPanels = prop("panels");
+  const panels = context.get("panels");
+  const getResolvedSizes = () => {
+    const sizes = context.get("size");
+    if (sizes.length > 0) return sizes;
+    return (0, import_size.resolvePanelSizes)({
+      sizes: prop("size") ?? prop("defaultSize"),
+      panels: rawPanels,
+      rootEl: null,
+      orientation
+    });
+  };
   const getPanelStyle = (id) => {
-    const panels = prop("panels");
-    const panelIndex = panels.findIndex((panel) => panel.id === id);
-    const defaultSize = context.initial("size")[panelIndex];
+    const panelIndex = rawPanels.findIndex((panel) => panel.id === id);
+    const size = prop("size")?.[panelIndex];
+    const defaultSize = prop("defaultSize")?.[panelIndex];
     const dragState = context.get("dragState");
     return (0, import_panel.getPanelFlexBoxStyle)({
+      size,
       defaultSize,
       dragState,
-      sizes: context.get("size"),
-      panels,
-      panelIndex
+      resolvedSizes: context.get("size"),
+      panels: rawPanels,
+      panelIndex,
+      horizontal
     });
   };
+  const resolveResizeTriggerId = (id) => {
+    const [beforeId, afterId] = id.split(":");
+    if (beforeId && afterId) return id;
+    if (beforeId) {
+      const index = rawPanels.findIndex((panel) => panel.id === beforeId);
+      const nextPanel = rawPanels[index + 1];
+      return nextPanel ? `${beforeId}:${nextPanel.id}` : id;
+    }
+    if (afterId) {
+      const index = rawPanels.findIndex((panel) => panel.id === afterId);
+      const prevPanel = rawPanels[index - 1];
+      return prevPanel ? `${prevPanel.id}:${afterId}` : id;
+    }
+    return id;
+  };
   const getResizeTriggerState = (props) => {
     const { id, disabled } = props;
     const dragging2 = context.get("dragState")?.resizeTriggerId === id;
-    const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
+    const focused = dragging2 || state.matches("focused") && context.get("keyboardState")?.resizeTriggerId === id;
     return {
       dragging: dragging2,
       focused,
@@ -73,13 +103,13 @@ function connect(service, normalize) {
     dragging,
     orientation,
     getPanels() {
-      return prop("panels");
+      return rawPanels;
     },
     getPanelById(id) {
-      return (0, import_panel.getPanelById)(prop("panels"), id);
+      return (0, import_panel.getPanelById)(rawPanels, id);
     },
     getItems() {
-      return prop("panels").flatMap((panel, index, arr) => {
+      return rawPanels.flatMap((panel, index, arr) => {
         const nextPanel = arr[index + 1];
         if (panel && nextPanel) {
           return [
@@ -91,13 +121,13 @@ function connect(service, normalize) {
       });
     },
     getSizes() {
-      return context.get("size");
+      return getResolvedSizes();
     },
     setSizes(size) {
       send({ type: "SIZE.SET", size });
     },
     resetSizes() {
-      send({ type: "SIZE.SET", size: context.initial("size") });
+      send({ type: "SIZE.RESET" });
     },
     collapsePanel(id) {
       send({ type: "PANEL.COLLAPSE", id });
@@ -109,27 +139,27 @@ function connect(service, normalize) {
       send({ type: "PANEL.RESIZE", id, size: unsafePanelSize });
     },
     getPanelSize(id) {
-      const panels = prop("panels");
-      const size = context.get("size");
-      const panelData = (0, import_panel.getPanelById)(panels, id);
-      const { panelSize } = (0, import_panel.panelDataHelper)(panels, panelData, size);
-      (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      const panels2 = context.get("panels");
+      const size = getResolvedSizes();
+      const panelData = (0, import_panel.getPanelById)(panels2, id);
+      const { panelSize } = (0, import_panel.panelDataHelper)(panels2, panelData, size);
+      (0, import_utils.ensure)(panelSize != null, () => `Panel size not found for panel "${panelData.id}"`);
       return panelSize;
     },
     isPanelCollapsed(id) {
-      const panels = prop("panels");
-      const size = context.get("size");
-      const panelData = (0, import_panel.getPanelById)(panels, id);
-      const { collapsedSize = 0, collapsible, panelSize } = (0, import_panel.panelDataHelper)(panels, panelData, size);
-      (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      const panels2 = context.get("panels");
+      const size = getResolvedSizes();
+      const panelData = (0, import_panel.getPanelById)(panels2, id);
+      const { collapsedSize = 0, collapsible, panelSize } = (0, import_panel.panelDataHelper)(panels2, panelData, size);
+      (0, import_utils.ensure)(panelSize != null, () => `Panel size not found for panel "${panelData.id}"`);
       return collapsible === true && (0, import_fuzzy.fuzzyNumbersEqual)(panelSize, collapsedSize);
     },
     isPanelExpanded(id) {
-      const panels = prop("panels");
-      const size = context.get("size");
-      const panelData = (0, import_panel.getPanelById)(panels, id);
-      const { collapsedSize = 0, collapsible, panelSize } = (0, import_panel.panelDataHelper)(panels, panelData, size);
-      (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      const panels2 = context.get("panels");
+      const size = getResolvedSizes();
+      const panelData = (0, import_panel.getPanelById)(panels2, id);
+      const { collapsedSize = 0, collapsible, panelSize } = (0, import_panel.panelDataHelper)(panels2, panelData, size);
+      (0, import_utils.ensure)(panelSize != null, () => `Panel size not found for panel "${panelData.id}"`);
       return !collapsible || (0, import_fuzzy.fuzzyCompareNumbers)(panelSize, collapsedSize) > 0;
     },
     getLayout() {
@@ -180,7 +210,8 @@ function connect(service, normalize) {
     getResizeTriggerProps(props) {
       const { id } = props;
       const triggerState = getResizeTriggerState(props);
-      const aria = (0, import_aria.getAriaValue)(context.get("size"), prop("panels"), id);
+      const resolvedId = resolveResizeTriggerId(id);
+      const aria = (0, import_aria.getAriaValue)(getResolvedSizes(), panels, resolvedId);
       return normalize.element({
         ...import_splitter.parts.resizeTrigger.attrs,
         dir: prop("dir"),
@@ -194,7 +225,7 @@ function connect(service, normalize) {
         "aria-valuemax": aria.valueMax,
         "data-orientation": orientation,
         "aria-orientation": orientation,
-        "aria-controls": `${dom.getPanelId(scope, aria.beforeId)} ${dom.getPanelId(scope, aria.afterId)}`,
+        "aria-controls": aria.beforeId && aria.afterId ? `${dom.getPanelId(scope, aria.beforeId)} ${dom.getPanelId(scope, aria.afterId)}` : void 0,
         "data-focus": (0, import_dom_query.dataAttr)(triggerState.focused),
         "data-dragging": (0, import_dom_query.dataAttr)(triggerState.dragging),
         "data-disabled": (0, import_dom_query.dataAttr)(triggerState.disabled),
@@ -213,6 +244,7 @@ function connect(service, normalize) {
             event.preventDefault();
             return;
           }
+          event.currentTarget.focus({ preventScroll: true });
           if (registry) {
             return;
           }

package/dist/splitter.connect.mjs

@@ -8,29 +8,59 @@ import * as dom from "./splitter.dom.mjs";
 import { getAriaValue } from "./utils/aria.mjs";
 import { fuzzyCompareNumbers, fuzzyNumbersEqual } from "./utils/fuzzy.mjs";
 import { findPanelIndex, getPanelById, getPanelFlexBoxStyle, getPanelLayout, panelDataHelper } from "./utils/panel.mjs";
+import { resolvePanelSizes } from "./utils/size.mjs";
 function connect(service, normalize) {
   const { state, send, prop, computed, context, scope } = service;
   const horizontal = computed("horizontal");
   const dragging = state.matches("dragging");
   const registry = prop("registry");
   const orientation = prop("orientation");
+  const rawPanels = prop("panels");
+  const panels = context.get("panels");
+  const getResolvedSizes = () => {
+    const sizes = context.get("size");
+    if (sizes.length > 0) return sizes;
+    return resolvePanelSizes({
+      sizes: prop("size") ?? prop("defaultSize"),
+      panels: rawPanels,
+      rootEl: null,
+      orientation
+    });
+  };
   const getPanelStyle = (id) => {
-    const panels = prop("panels");
-    const panelIndex = panels.findIndex((panel) => panel.id === id);
-    const defaultSize = context.initial("size")[panelIndex];
+    const panelIndex = rawPanels.findIndex((panel) => panel.id === id);
+    const size = prop("size")?.[panelIndex];
+    const defaultSize = prop("defaultSize")?.[panelIndex];
     const dragState = context.get("dragState");
     return getPanelFlexBoxStyle({
+      size,
       defaultSize,
       dragState,
-      sizes: context.get("size"),
-      panels,
-      panelIndex
+      resolvedSizes: context.get("size"),
+      panels: rawPanels,
+      panelIndex,
+      horizontal
     });
   };
+  const resolveResizeTriggerId = (id) => {
+    const [beforeId, afterId] = id.split(":");
+    if (beforeId && afterId) return id;
+    if (beforeId) {
+      const index = rawPanels.findIndex((panel) => panel.id === beforeId);
+      const nextPanel = rawPanels[index + 1];
+      return nextPanel ? `${beforeId}:${nextPanel.id}` : id;
+    }
+    if (afterId) {
+      const index = rawPanels.findIndex((panel) => panel.id === afterId);
+      const prevPanel = rawPanels[index - 1];
+      return prevPanel ? `${prevPanel.id}:${afterId}` : id;
+    }
+    return id;
+  };
   const getResizeTriggerState = (props) => {
     const { id, disabled } = props;
     const dragging2 = context.get("dragState")?.resizeTriggerId === id;
-    const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
+    const focused = dragging2 || state.matches("focused") && context.get("keyboardState")?.resizeTriggerId === id;
     return {
       dragging: dragging2,
       focused,
@@ -41,13 +71,13 @@ function connect(service, normalize) {
     dragging,
     orientation,
     getPanels() {
-      return prop("panels");
+      return rawPanels;
     },
     getPanelById(id) {
-      return getPanelById(prop("panels"), id);
+      return getPanelById(rawPanels, id);
     },
     getItems() {
-      return prop("panels").flatMap((panel, index, arr) => {
+      return rawPanels.flatMap((panel, index, arr) => {
         const nextPanel = arr[index + 1];
         if (panel && nextPanel) {
           return [
@@ -59,13 +89,13 @@ function connect(service, normalize) {
       });
     },
     getSizes() {
-      return context.get("size");
+      return getResolvedSizes();
     },
     setSizes(size) {
       send({ type: "SIZE.SET", size });
     },
     resetSizes() {
-      send({ type: "SIZE.SET", size: context.initial("size") });
+      send({ type: "SIZE.RESET" });
     },
     collapsePanel(id) {
       send({ type: "PANEL.COLLAPSE", id });
@@ -77,27 +107,27 @@ function connect(service, normalize) {
       send({ type: "PANEL.RESIZE", id, size: unsafePanelSize });
     },
     getPanelSize(id) {
-      const panels = prop("panels");
-      const size = context.get("size");
-      const panelData = getPanelById(panels, id);
-      const { panelSize } = panelDataHelper(panels, panelData, size);
-      ensure(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      const panels2 = context.get("panels");
+      const size = getResolvedSizes();
+      const panelData = getPanelById(panels2, id);
+      const { panelSize } = panelDataHelper(panels2, panelData, size);
+      ensure(panelSize != null, () => `Panel size not found for panel "${panelData.id}"`);
       return panelSize;
     },
     isPanelCollapsed(id) {
-      const panels = prop("panels");
-      const size = context.get("size");
-      const panelData = getPanelById(panels, id);
-      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels, panelData, size);
-      ensure(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      const panels2 = context.get("panels");
+      const size = getResolvedSizes();
+      const panelData = getPanelById(panels2, id);
+      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels2, panelData, size);
+      ensure(panelSize != null, () => `Panel size not found for panel "${panelData.id}"`);
       return collapsible === true && fuzzyNumbersEqual(panelSize, collapsedSize);
     },
     isPanelExpanded(id) {
-      const panels = prop("panels");
-      const size = context.get("size");
-      const panelData = getPanelById(panels, id);
-      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels, panelData, size);
-      ensure(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      const panels2 = context.get("panels");
+      const size = getResolvedSizes();
+      const panelData = getPanelById(panels2, id);
+      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels2, panelData, size);
+      ensure(panelSize != null, () => `Panel size not found for panel "${panelData.id}"`);
       return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
     },
     getLayout() {
@@ -148,7 +178,8 @@ function connect(service, normalize) {
     getResizeTriggerProps(props) {
       const { id } = props;
       const triggerState = getResizeTriggerState(props);
-      const aria = getAriaValue(context.get("size"), prop("panels"), id);
+      const resolvedId = resolveResizeTriggerId(id);
+      const aria = getAriaValue(getResolvedSizes(), panels, resolvedId);
       return normalize.element({
         ...parts.resizeTrigger.attrs,
         dir: prop("dir"),
@@ -162,7 +193,7 @@ function connect(service, normalize) {
         "aria-valuemax": aria.valueMax,
         "data-orientation": orientation,
         "aria-orientation": orientation,
-        "aria-controls": `${dom.getPanelId(scope, aria.beforeId)} ${dom.getPanelId(scope, aria.afterId)}`,
+        "aria-controls": aria.beforeId && aria.afterId ? `${dom.getPanelId(scope, aria.beforeId)} ${dom.getPanelId(scope, aria.afterId)}` : void 0,
         "data-focus": dataAttr(triggerState.focused),
         "data-dragging": dataAttr(triggerState.dragging),
         "data-disabled": dataAttr(triggerState.disabled),
@@ -181,6 +212,7 @@ function connect(service, normalize) {
             event.preventDefault();
             return;
           }
+          event.currentTarget.focus({ preventScroll: true });
           if (registry) {
             return;
           }

package/dist/splitter.dom.d.mts

@@ -1,5 +1,5 @@
 import { Scope } from '@zag-js/core';
-import { CursorState } from './splitter.types.mjs';
+import { CursorState, ResizeTriggerId } from './splitter.types.mjs';
 import '@zag-js/types';
 import './utils/registry.mjs';
 
@@ -10,12 +10,13 @@ declare const getPanelId: (ctx: Scope, id: string | number) => any;
 declare const getPanelEls: (ctx: Scope) => HTMLElement[];
 declare const getGlobalCursorId: (ctx: Scope) => string;
 declare const getRootEl: (ctx: Scope) => HTMLElement | null;
-declare const getResizeTriggerEl: (ctx: Scope, id: string) => HTMLElement | null;
+declare const getResizeTriggerEl: (ctx: Scope, id: string | null | undefined) => HTMLElement | null;
 declare const getPanelEl: (ctx: Scope, id: string | number) => HTMLElement | null;
+declare const resolveResizeTriggerId: (ctx: Scope, id: ResizeTriggerId) => `${string}:${string}` | null;
 declare const getCursor: (state: CursorState, x: boolean) => (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
 declare const getResizeTriggerEls: (ctx: Scope) => HTMLElement[];
 declare const getGlobalCursorEl: (ctx: Scope) => HTMLElement | null;
 declare const setupGlobalCursor: (ctx: Scope, state: CursorState, x: boolean, nonce?: string) => void;
 declare const removeGlobalCursor: (ctx: Scope) => void;
 
-export { getCursor, getGlobalCursorEl, getGlobalCursorId, getLabelId, getPanelEl, getPanelEls, getPanelId, getResizeTriggerEl, getResizeTriggerEls, getResizeTriggerId, getRootEl, getRootId, removeGlobalCursor, setupGlobalCursor };
+export { getCursor, getGlobalCursorEl, getGlobalCursorId, getLabelId, getPanelEl, getPanelEls, getPanelId, getResizeTriggerEl, getResizeTriggerEls, getResizeTriggerId, getRootEl, getRootId, removeGlobalCursor, resolveResizeTriggerId, setupGlobalCursor };

package/dist/splitter.dom.d.ts

@@ -1,5 +1,5 @@
 import { Scope } from '@zag-js/core';
-import { CursorState } from './splitter.types.js';
+import { CursorState, ResizeTriggerId } from './splitter.types.js';
 import '@zag-js/types';
 import './utils/registry.js';
 
@@ -10,12 +10,13 @@ declare const getPanelId: (ctx: Scope, id: string | number) => any;
 declare const getPanelEls: (ctx: Scope) => HTMLElement[];
 declare const getGlobalCursorId: (ctx: Scope) => string;
 declare const getRootEl: (ctx: Scope) => HTMLElement | null;
-declare const getResizeTriggerEl: (ctx: Scope, id: string) => HTMLElement | null;
+declare const getResizeTriggerEl: (ctx: Scope, id: string | null | undefined) => HTMLElement | null;
 declare const getPanelEl: (ctx: Scope, id: string | number) => HTMLElement | null;
+declare const resolveResizeTriggerId: (ctx: Scope, id: ResizeTriggerId) => `${string}:${string}` | null;
 declare const getCursor: (state: CursorState, x: boolean) => (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
 declare const getResizeTriggerEls: (ctx: Scope) => HTMLElement[];
 declare const getGlobalCursorEl: (ctx: Scope) => HTMLElement | null;
 declare const setupGlobalCursor: (ctx: Scope, state: CursorState, x: boolean, nonce?: string) => void;
 declare const removeGlobalCursor: (ctx: Scope) => void;
 
-export { getCursor, getGlobalCursorEl, getGlobalCursorId, getLabelId, getPanelEl, getPanelEls, getPanelId, getResizeTriggerEl, getResizeTriggerEls, getResizeTriggerId, getRootEl, getRootId, removeGlobalCursor, setupGlobalCursor };
+export { getCursor, getGlobalCursorEl, getGlobalCursorId, getLabelId, getPanelEl, getPanelEls, getPanelId, getResizeTriggerEl, getResizeTriggerEls, getResizeTriggerId, getRootEl, getRootId, removeGlobalCursor, resolveResizeTriggerId, setupGlobalCursor };

package/dist/splitter.dom.js

@@ -33,6 +33,7 @@ __export(splitter_dom_exports, {
   getRootEl: () => getRootEl,
   getRootId: () => getRootId,
   removeGlobalCursor: () => removeGlobalCursor,
+  resolveResizeTriggerId: () => resolveResizeTriggerId,
   setupGlobalCursor: () => setupGlobalCursor
 });
 module.exports = __toCommonJS(splitter_dom_exports);
@@ -41,11 +42,38 @@ var getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
 var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`;
 var getLabelId = (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`;
 var getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`;
-var getPanelEls = (ctx) => (0, import_dom_query.queryAll)(getRootEl(ctx), `[data-part=panel][data-ownedby=${getRootId(ctx)}]`);
+var getPanelEls = (ctx) => (0, import_dom_query.queryAll)(getRootEl(ctx), `[data-part=panel][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
 var getGlobalCursorId = (ctx) => `splitter:${ctx.id}:global-cursor`;
 var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getResizeTriggerEl = (ctx, id) => ctx.getById(getResizeTriggerId(ctx, id));
+var getResizeTriggerEl = (ctx, id) => id != null ? ctx.getById(getResizeTriggerId(ctx, id)) : null;
 var getPanelEl = (ctx, id) => ctx.getById(getPanelId(ctx, id));
+var getPanelIdFromEl = (el) => {
+  return (0, import_dom_query.isHTMLElement)(el) && el.dataset.part === "panel" ? el.dataset.id : void 0;
+};
+var getPrevPanelId = (el) => {
+  let prev = el?.previousElementSibling ?? null;
+  while (prev) {
+    const id = getPanelIdFromEl(prev);
+    if (id) return id;
+    prev = prev.previousElementSibling;
+  }
+};
+var getNextPanelId = (el) => {
+  let next = el?.nextElementSibling ?? null;
+  while (next) {
+    const id = getPanelIdFromEl(next);
+    if (id) return id;
+    next = next.nextElementSibling;
+  }
+};
+var resolveResizeTriggerId = (ctx, id) => {
+  const [beforeId, afterId] = id.split(":");
+  if (beforeId && afterId) return id;
+  const triggerEl = getResizeTriggerEl(ctx, id);
+  const resolvedBeforeId = beforeId || getPrevPanelId(triggerEl);
+  const resolvedAfterId = afterId || getNextPanelId(triggerEl);
+  return resolvedBeforeId && resolvedAfterId ? `${resolvedBeforeId}:${resolvedAfterId}` : null;
+};
 var getCursor = (state, x) => {
   let cursor = x ? "col-resize" : "row-resize";
   if (state.isAtMin) cursor = x ? "e-resize" : "s-resize";
@@ -90,5 +118,6 @@ var removeGlobalCursor = (ctx) => {
   getRootEl,
   getRootId,
   removeGlobalCursor,
+  resolveResizeTriggerId,
   setupGlobalCursor
 });

package/dist/splitter.dom.mjs

@@ -1,16 +1,43 @@
 import "./chunk-QZ7TP4HQ.mjs";
 
 // src/splitter.dom.ts
-import { queryAll } from "@zag-js/dom-query";
+import { isHTMLElement, queryAll } from "@zag-js/dom-query";
 var getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
 var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`;
 var getLabelId = (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`;
 var getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`;
-var getPanelEls = (ctx) => queryAll(getRootEl(ctx), `[data-part=panel][data-ownedby=${getRootId(ctx)}]`);
+var getPanelEls = (ctx) => queryAll(getRootEl(ctx), `[data-part=panel][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
 var getGlobalCursorId = (ctx) => `splitter:${ctx.id}:global-cursor`;
 var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getResizeTriggerEl = (ctx, id) => ctx.getById(getResizeTriggerId(ctx, id));
+var getResizeTriggerEl = (ctx, id) => id != null ? ctx.getById(getResizeTriggerId(ctx, id)) : null;
 var getPanelEl = (ctx, id) => ctx.getById(getPanelId(ctx, id));
+var getPanelIdFromEl = (el) => {
+  return isHTMLElement(el) && el.dataset.part === "panel" ? el.dataset.id : void 0;
+};
+var getPrevPanelId = (el) => {
+  let prev = el?.previousElementSibling ?? null;
+  while (prev) {
+    const id = getPanelIdFromEl(prev);
+    if (id) return id;
+    prev = prev.previousElementSibling;
+  }
+};
+var getNextPanelId = (el) => {
+  let next = el?.nextElementSibling ?? null;
+  while (next) {
+    const id = getPanelIdFromEl(next);
+    if (id) return id;
+    next = next.nextElementSibling;
+  }
+};
+var resolveResizeTriggerId = (ctx, id) => {
+  const [beforeId, afterId] = id.split(":");
+  if (beforeId && afterId) return id;
+  const triggerEl = getResizeTriggerEl(ctx, id);
+  const resolvedBeforeId = beforeId || getPrevPanelId(triggerEl);
+  const resolvedAfterId = afterId || getNextPanelId(triggerEl);
+  return resolvedBeforeId && resolvedAfterId ? `${resolvedBeforeId}:${resolvedAfterId}` : null;
+};
 var getCursor = (state, x) => {
   let cursor = x ? "col-resize" : "row-resize";
   if (state.isAtMin) cursor = x ? "e-resize" : "s-resize";
@@ -54,5 +81,6 @@ export {
   getRootEl,
   getRootId,
   removeGlobalCursor,
+  resolveResizeTriggerId,
   setupGlobalCursor
 };