@dialpad/dialtone-vue 3.221.1 → 3.222.0-next.2

package/dist/ResizableHandle-v-oU-sj-.js

@@ -0,0 +1,308 @@
+import { d as e, p as t, s as n } from "./ResizableUtils-C9qEZRN5.js";
+import { t as r } from "./UseResizableCalculations-BTQ4jiff.js";
+import { computed as i, createElementBlock as a, createElementVNode as o, getCurrentInstance as s, inject as c, normalizeClass as l, normalizeStyle as u, onMounted as d, onUnmounted as f, openBlock as p, ref as m, unref as h } from "vue";
+//#region components/Resizable/Composables/UseResizableKeyboard.ts
+var g = {
+	resizeAnnouncement: "{beforeId}: {beforePx}px, {afterId}: {afterPx}px",
+	collapseAnnouncement: "{panelId} collapsed",
+	expandAnnouncement: "{panelId} expanded",
+	resetAnnouncement: "{beforeId} and {afterId} reset",
+	ariaValueText: "{panelId}: {pixels}px",
+	handleAriaLabel: "Resize handle between {before} and {after} panels"
+}, _ = {
+	fine: 1,
+	normal: 8,
+	large: 24
+};
+function v(e) {
+	let { panels: n, direction: i, containerSize: a, beforePanelId: o, afterPanelId: s, handleElement: c, onResize: l, onCollapse: u, onReset: d, onSizeAnnouncement: f, messages: p } = e, h = {
+		...g,
+		...p
+	}, v = m(!1), y = r(() => a.value);
+	function b() {
+		return {
+			beforePanel: n.value.find((e) => e.id === o.value),
+			afterPanel: n.value.find((e) => e.id === s.value)
+		};
+	}
+	function x(e) {
+		return e.metaKey || e.ctrlKey ? _.fine : e.shiftKey ? _.large : _.normal;
+	}
+	function S(e, t) {
+		return t === "row" ? {
+			ArrowLeft: "decrease",
+			ArrowRight: "increase"
+		}[e] || null : {
+			ArrowUp: "decrease",
+			ArrowDown: "increase"
+		}[e] || null;
+	}
+	function C(e, t) {
+		let n = Math.round(e.pixelSize), r = Math.round(t.pixelSize);
+		return h.resizeAnnouncement.replace("{beforeId}", e.id).replace("{afterId}", t.id).replace("{beforePx}", String(n)).replace("{afterPx}", String(r));
+	}
+	function w(e, t, n, r, i) {
+		e.style.insetInlineStart = e.style.insetInlineStart || "0px", e.style.insetInlineEnd = `${i}px`, e.style.inlineSize = "", t.style.insetInlineStart = `${r}px`, t.style.inlineSize = "", n && (n.style.insetInlineStart = `${Math.max(0, r - 2)}px`);
+	}
+	function T(e, t, n) {
+		e.style.insetInlineStart = "", e.style.insetInlineEnd = "", e.style.inlineSize = "", t.style.insetInlineStart = "", t.style.inlineSize = "", n && (n.style.insetInlineStart = "");
+	}
+	function E(e, n, r, i) {
+		let u = Math.round(r), d = Math.round(i), f = r, p = c.value?.closest(".d-resizable"), m = null, h = null, g = null;
+		if (p && (m = p.querySelector(`[data-panel-id="${o.value}"]`), h = p.querySelector(`[data-panel-id="${s.value}"]`), g = p.querySelector(`[data-handle-id="${t(o.value, s.value)}"]`), m && h)) {
+			let e = a.value - f;
+			w(m, h, g, f, e);
+		}
+		l(o.value, u, s.value, d), m && h && T(m, h, g);
+	}
+	function D(e, r, i, c) {
+		let l = i === "increase" ? c : -c, u = e.pixelSize + l, d = y.processResizeMove(u, e, r, a.value, t(o.value, s.value), n.value, 0);
+		return d.isValidResize ? (E(e, r, d.beforePanelSize, d.afterPanelSize), f && f(C(e, r)), !0) : !1;
+	}
+	function O(e) {
+		let t = S(e.key, i.value);
+		if (!t) return;
+		e.preventDefault(), e.stopPropagation();
+		let { beforePanel: n, afterPanel: r } = b();
+		!n || !r || D(n, r, t, x(e));
+	}
+	function k(e) {
+		let { beforePanel: t } = b();
+		if (!t?.collapsible || !u) return;
+		e.preventDefault();
+		let n = !t.collapsed;
+		u(t.id, n), f && f((n ? h.collapseAnnouncement : h.expandAnnouncement).replace("{panelId}", t.id));
+	}
+	function A(e) {
+		e.preventDefault();
+		let { beforePanel: t, afterPanel: n } = b();
+		if (!t || !n) return;
+		let r = (t.userMinSizePixels ?? 10) - t.pixelSize;
+		r !== 0 && D(t, n, r > 0 ? "increase" : "decrease", Math.abs(r));
+	}
+	function j(e) {
+		e.preventDefault();
+		let { beforePanel: t, afterPanel: n } = b();
+		if (!t || !n) return;
+		let r = n.userMinSizePixels ?? 10, i = t.userMaxSizePixels ?? a.value - r, o = Math.min(i, a.value - r) - t.pixelSize;
+		o !== 0 && D(t, n, o > 0 ? "increase" : "decrease", Math.abs(o));
+	}
+	function M(e) {
+		if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+		e.preventDefault();
+		let { beforePanel: t, afterPanel: n } = b();
+		!t || !n || !d || (d(t.id, n.id), f && f(h.resetAnnouncement.replace("{beforeId}", t.id).replace("{afterId}", n.id)));
+	}
+	function N(e) {
+		e.preventDefault(), c.value?.blur();
+	}
+	function P(e) {
+		if (v.value) {
+			switch (e.key) {
+				case "Enter":
+					k(e);
+					return;
+				case "Home":
+					A(e);
+					return;
+				case "End":
+					j(e);
+					return;
+				case "r":
+				case "R":
+					M(e);
+					return;
+				case "Escape":
+					N(e);
+					return;
+			}
+			O(e);
+		}
+	}
+	function F() {
+		v.value = !0;
+	}
+	function I() {
+		v.value = !1;
+	}
+	function L() {
+		c.value?.focus();
+	}
+	return {
+		isFocused: v,
+		focusHandle: L,
+		handleKeyDown: P,
+		handleFocus: F,
+		handleBlur: I,
+		KEYBOARD_INCREMENTS: _
+	};
+}
+//#endregion
+//#region components/Resizable/ResizableHandle.vue
+var y = [
+	"data-handle-id",
+	"tabindex",
+	"aria-orientation",
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-controls",
+	"aria-valuetext",
+	"aria-disabled"
+], b = {
+	__name: "ResizableHandle",
+	props: {
+		beforePanelId: {
+			type: String,
+			default: null
+		},
+		afterPanelId: {
+			type: String,
+			default: null
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		class: {
+			type: [
+				String,
+				Object,
+				Array
+			],
+			default: ""
+		},
+		disableResetOnDoubleClick: {
+			type: Boolean,
+			default: !1
+		},
+		resetBehavior: {
+			type: String,
+			default: "both"
+		},
+		ariaLabel: {
+			type: String,
+			default: null
+		}
+	},
+	setup(r) {
+		let g = r, _ = c(e, null), b = _?.layout ?? i(() => ({
+			panels: /* @__PURE__ */ new Map(),
+			handles: []
+		})), x = _?.panels ?? i(() => []), S = _?.direction ?? i(() => "row"), C = _?.containerSize ?? i(() => 1e3), w = _?.activeHandleId ?? i(() => void 0), T = _?.startResize ?? (() => {}), E = _?.resetPanels ?? (() => {}), D = _?.registerHandle ?? (() => 0), O = _?.unregisterHandle ?? (() => {}), k = _?.saveToStorage ?? null, A = _?.collapsePanel ?? null, j = _?.commitPanelSize ?? null, M = _?.announce ?? null, N = _?.panelMap ?? i(() => /* @__PURE__ */ new Map()), P = _?.messages ?? {}, F = s(), I = m(0), L = i(() => {
+			let e = b.value;
+			if (e.handles.length === 0) return null;
+			if (g.beforePanelId && g.afterPanelId) {
+				let n = t(g.beforePanelId, g.afterPanelId);
+				return e.handles.find((e) => e.id === n) ?? null;
+			}
+			return e.handles[I.value] ?? null;
+		}), R = i(() => L.value?.id ?? ""), z = i(() => L.value?.beforePanelId ?? g.beforePanelId ?? ""), B = i(() => L.value?.afterPanelId ?? g.afterPanelId ?? ""), V = i(() => !!(R.value && w.value === R.value)), H = i(() => g.disabled || (L.value?.disabled ?? !1)), U = S, W = i(() => {
+			let e = L.value;
+			return e ? {
+				insetInlineStart: `${Math.max(0, e.left - 2)}px`,
+				visibility: "",
+				...Q.value
+			} : { visibility: "hidden" };
+		}), G = i(() => {
+			if (g.ariaLabel) return g.ariaLabel;
+			let e = z.value || "first", t = B.value || "second";
+			return (P.handleAriaLabel ?? "Resize handle between {before} and {after} panels").replace("{before}", e).replace("{after}", t);
+		}), K = i(() => {
+			let e = N.value.get(z.value);
+			return e ? (P.ariaValueText ?? "{panelId}: {pixels}px").replace("{panelId}", z.value).replace("{pixels}", String(Math.round(e.pixelSize))) : "";
+		}), q = i(() => {
+			let e = N.value.get(z.value), t = C.value;
+			return !e || !t ? 0 : Math.floor(n(e.collapsed ? 0 : e.pixelSize || 0, t));
+		}), J = i(() => {
+			let e = N.value.get(z.value), t = C.value;
+			return !e || !t ? 0 : Math.floor(n(e.userMinSizePixels || 0, t));
+		}), Y = i(() => {
+			let e = N.value.get(z.value), t = C.value;
+			return !e || !t ? 100 : Math.floor(n(e.userMaxSizePixels || t, t));
+		}), X = m(null), Z = v({
+			panels: x,
+			direction: S,
+			containerSize: C,
+			beforePanelId: z,
+			afterPanelId: B,
+			handleElement: X,
+			onResize(e, t, n, r) {
+				j ? (j(e, t), j(n, r)) : k?.();
+			},
+			onCollapse(e, t) {
+				A?.(e, t);
+			},
+			onReset(e, t) {
+				E?.(e, t, "both");
+			},
+			onSizeAnnouncement(e) {
+				M?.(e);
+			},
+			messages: P
+		}), Q = _?.offsetHandleStyles ?? i(() => ({}));
+		d(() => {
+			D(F);
+			let e = X.value;
+			if (e?.parentElement) {
+				let t = Array.from(e.parentElement.querySelectorAll(".d-resizable-handle")).indexOf(e);
+				t >= 0 && (I.value = t);
+			}
+		}), f(() => {
+			O(F);
+		});
+		function $(e) {
+			H.value || (e.preventDefault(), T(R.value));
+		}
+		function ee() {
+			if (g.disableResetOnDoubleClick || H.value) return;
+			let e = z.value, t = B.value;
+			!e || !t || E(e, t, g.resetBehavior);
+		}
+		function te(e) {
+			Z.handleKeyDown(e);
+		}
+		function ne() {
+			Z.handleFocus();
+		}
+		function re() {
+			Z.handleBlur();
+		}
+		return (e, t) => (p(), a("div", {
+			ref_key: "handleElement",
+			ref: X,
+			"data-qa": "dt-resizable-handle",
+			class: l([
+				"d-resizable-handle",
+				`d-resizable-handle--${h(U)}`,
+				g.class,
+				{
+					"d-resizable-handle--active": V.value,
+					"d-resizable-handle--disabled": H.value
+				}
+			]),
+			style: u(W.value),
+			"data-handle-id": R.value,
+			tabindex: H.value ? "-1" : "0",
+			role: "separator",
+			"aria-orientation": h(U) === "row" ? "vertical" : "horizontal",
+			"aria-label": G.value,
+			"aria-valuenow": q.value,
+			"aria-valuemin": J.value,
+			"aria-valuemax": Y.value,
+			"aria-controls": `dt-resizable-panel-${z.value}`,
+			"aria-valuetext": K.value,
+			"aria-disabled": H.value || void 0,
+			onPointerdown: $,
+			onDblclick: ee,
+			onKeydown: te,
+			onFocus: ne,
+			onBlur: re
+		}, [...t[0] || (t[0] = [o("div", { class: "d-resizable-handle__indicator" }, null, -1)])], 46, y));
+	}
+};
+//#endregion
+export { b as t };
+
+//# sourceMappingURL=ResizableHandle-v-oU-sj-.js.map

package/dist/ResizableHandle-v-oU-sj-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableHandle-v-oU-sj-.js","names":[],"sources":["../components/Resizable/Composables/UseResizableKeyboard.ts","../components/Resizable/ResizableHandle.vue"],"sourcesContent":["import { ref, type ComputedRef, type Ref } from 'vue';\nimport type {\n  ResizablePanelState,\n  ResizableDirection,\n} from '../ResizableConstants';\nimport { MIN_PANEL_SIZE_PX, RESIZABLE_HANDLE_CENTER_OFFSET_PX, buildHandleId } from '../ResizableConstants';\nimport { useResizeHandling } from './UseResizableCalculations';\n\nexport interface ResizableKeyboardMessages {\n  /**\n   * Announcement template for resize actions.\n   * Placeholders: {beforeId}, {afterId}, {beforePx}, {afterPx}\n   */\n  resizeAnnouncement?: string;\n  /** Announced when a panel is collapsed. Placeholder: {panelId} */\n  collapseAnnouncement?: string;\n  /** Announced when a panel is expanded. Placeholder: {panelId} */\n  expandAnnouncement?: string;\n  /** Announced when panels are reset. Placeholders: {beforeId}, {afterId} */\n  resetAnnouncement?: string;\n  /** aria-valuetext template. Placeholders: {panelId}, {pixels} */\n  ariaValueText?: string;\n  /** aria-label template. Placeholders: {before}, {after} */\n  handleAriaLabel?: string;\n}\n\nconst DEFAULT_KEYBOARD_MESSAGES: Required<ResizableKeyboardMessages> = {\n  resizeAnnouncement:\n    '{beforeId}: {beforePx}px, {afterId}: {afterPx}px',\n  collapseAnnouncement: '{panelId} collapsed',\n  expandAnnouncement: '{panelId} expanded',\n  resetAnnouncement: '{beforeId} and {afterId} reset',\n  ariaValueText: '{panelId}: {pixels}px',\n  handleAriaLabel: 'Resize handle between {before} and {after} panels',\n};\n\nexport interface ResizableKeyboardOptions {\n  panels: ComputedRef<ResizablePanelState[]>;\n  direction: ComputedRef<ResizableDirection>;\n  containerSize: ComputedRef<number>;\n  beforePanelId: ComputedRef<string>;\n  afterPanelId: ComputedRef<string>;\n  handleElement: Ref<HTMLElement | null>;\n  onResize: (\n    beforePanelId: string,\n    beforeSize: number,\n    afterPanelId: string,\n    afterSize: number,\n  ) => void;\n  onCollapse?: (panelId: string, collapsed: boolean) => void;\n  onReset?: (beforePanelId: string, afterPanelId: string) => void;\n  onSizeAnnouncement?: (message: string) => void;\n  messages?: ResizableKeyboardMessages;\n}\n\n/**\n * Keyboard increment settings for different modifier combinations (pixels).\n */\nexport const KEYBOARD_INCREMENTS = {\n  /** Fine control (Cmd/Ctrl + Arrow) */\n  fine: 1,\n  /** Normal increment (Arrow only) */\n  normal: 8,\n  /** Large increment (Shift + Arrow) */\n  large: 24,\n} as const;\n\n/**\n * Composable for keyboard-driven resize on a single handle.\n * Implements the W3C ARIA separator keyboard pattern:\n * - Arrow keys: resize\n * - Enter: toggle collapse on before panel\n * - Home: resize to min\n * - End: resize to max\n * - R: reset adjacent panels\n * - Escape: blur handle\n */\nexport function useResizableKeyboard(options: ResizableKeyboardOptions) {\n  const {\n    panels,\n    direction,\n    containerSize,\n    beforePanelId,\n    afterPanelId,\n    handleElement,\n    onResize,\n    onCollapse,\n    onReset,\n    onSizeAnnouncement,\n    messages: userMessages,\n  } = options;\n\n  const msg = { ...DEFAULT_KEYBOARD_MESSAGES, ...userMessages };\n\n  const isFocused = ref(false);\n\n  const resizeHandler = useResizeHandling(() => containerSize.value);\n\n  function getCurrentPanels() {\n    const beforePanel = panels.value.find(\n      (p) => p.id === beforePanelId.value,\n    );\n    const afterPanel = panels.value.find(\n      (p) => p.id === afterPanelId.value,\n    );\n    return { beforePanel, afterPanel };\n  }\n\n  function getResizeIncrement(event: KeyboardEvent): number {\n    if (event.metaKey || event.ctrlKey) return KEYBOARD_INCREMENTS.fine;\n    if (event.shiftKey) return KEYBOARD_INCREMENTS.large;\n    return KEYBOARD_INCREMENTS.normal;\n  }\n\n  function getResizeDirection(\n    key: string,\n    layoutDirection: ResizableDirection,\n  ): 'increase' | 'decrease' | null {\n    const rowKeyMap: Record<string, 'increase' | 'decrease'> = {\n      ArrowLeft: 'decrease',\n      ArrowRight: 'increase',\n    };\n    const columnKeyMap: Record<string, 'increase' | 'decrease'> = {\n      ArrowUp: 'decrease',\n      ArrowDown: 'increase',\n    };\n    return layoutDirection === 'row'\n      ? rowKeyMap[key] || null\n      : columnKeyMap[key] || null;\n  }\n\n  function generateSizeAnnouncement(\n    beforePanel: ResizablePanelState,\n    afterPanel: ResizablePanelState,\n  ): string {\n    const beforePx = Math.round(beforePanel.pixelSize);\n    const afterPx = Math.round(afterPanel.pixelSize);\n\n    return msg.resizeAnnouncement\n      .replace('{beforeId}', beforePanel.id)\n      .replace('{afterId}', afterPanel.id)\n      .replace('{beforePx}', String(beforePx))\n      .replace('{afterPx}', String(afterPx));\n  }\n\n  // ─── DOM position updates (logical properties) ──────────────────────\n\n  function updateLayout(\n    beforeEl: HTMLElement,\n    afterEl: HTMLElement,\n    handleEl: HTMLElement | null,\n    cursorPos: number,\n    beforeEnd: number,\n  ): void {\n    beforeEl.style.insetInlineStart = beforeEl.style.insetInlineStart || '0px';\n    beforeEl.style.insetInlineEnd = `${beforeEnd}px`;\n    beforeEl.style.inlineSize = '';\n\n    afterEl.style.insetInlineStart = `${cursorPos}px`;\n    afterEl.style.inlineSize = '';\n\n    if (handleEl) {\n      handleEl.style.insetInlineStart = `${Math.max(0, cursorPos - RESIZABLE_HANDLE_CENTER_OFFSET_PX)}px`;\n    }\n  }\n\n  function clearInlineStyles(\n    beforeEl: HTMLElement,\n    afterEl: HTMLElement,\n    handleEl: HTMLElement | null,\n  ): void {\n    beforeEl.style.insetInlineStart = '';\n    beforeEl.style.insetInlineEnd = '';\n    beforeEl.style.inlineSize = '';\n    afterEl.style.insetInlineStart = '';\n    afterEl.style.inlineSize = '';\n    if (handleEl) handleEl.style.insetInlineStart = '';\n  }\n\n  function applyResize(\n    beforePanel: ResizablePanelState,\n    afterPanel: ResizablePanelState,\n    newBeforePixels: number,\n    newAfterPixels: number,\n  ): void {\n    const roundedBefore = Math.round(newBeforePixels);\n    const roundedAfter = Math.round(newAfterPixels);\n\n    // DOM updates for immediate visual feedback\n    const cursorPos = newBeforePixels;\n    const container = handleElement.value?.closest('.d-resizable');\n\n    let beforeEl: HTMLElement | null = null;\n    let afterEl: HTMLElement | null = null;\n    let hEl: HTMLElement | null = null;\n\n    if (container) {\n      beforeEl = container.querySelector(\n        `[data-panel-id=\"${beforePanelId.value}\"]`,\n      );\n      afterEl = container.querySelector(\n        `[data-panel-id=\"${afterPanelId.value}\"]`,\n      );\n      hEl = container.querySelector(\n        `[data-handle-id=\"${buildHandleId(beforePanelId.value, afterPanelId.value)}\"]`,\n      );\n\n      if (beforeEl && afterEl) {\n        const beforeEnd = containerSize.value - cursorPos;\n        updateLayout(beforeEl, afterEl, hEl, cursorPos, beforeEnd);\n      }\n    }\n\n    // Commit to reactive state — mirrors drag's commitDrag discipline\n    onResize(\n      beforePanelId.value,\n      roundedBefore,\n      afterPanelId.value,\n      roundedAfter,\n    );\n\n    // Clear inline styles so Vue exclusively owns the DOM from this point.\n    // Without this, there's a frame where both inline styles and Vue's\n    // computed layout coexist — a latent bug surface if anything reads\n    // DOM positions between onResize and Vue's next render.\n    if (beforeEl && afterEl) {\n      clearInlineStyles(beforeEl, afterEl, hEl);\n    }\n  }\n\n  function processKeyboardResize(\n    beforePanel: ResizablePanelState,\n    afterPanel: ResizablePanelState,\n    resizeDirection: 'increase' | 'decrease',\n    incrementPixels: number,\n  ): boolean {\n    const delta =\n      resizeDirection === 'increase' ? incrementPixels : -incrementPixels;\n    const newCursorPosition = beforePanel.pixelSize + delta;\n\n    const resizeResult = resizeHandler.processResizeMove(\n      newCursorPosition,\n      beforePanel,\n      afterPanel,\n      containerSize.value,\n      buildHandleId(beforePanelId.value, afterPanelId.value),\n      panels.value,\n      0,\n    );\n\n    if (!resizeResult.isValidResize) return false;\n\n    applyResize(\n      beforePanel,\n      afterPanel,\n      resizeResult.beforePanelSize,\n      resizeResult.afterPanelSize,\n    );\n\n    if (onSizeAnnouncement) {\n      onSizeAnnouncement(\n        generateSizeAnnouncement(beforePanel, afterPanel),\n      );\n    }\n\n    return true;\n  }\n\n  // ─── Key handlers ─────────────────────────────────────────────────\n\n  function handleArrowKey(event: KeyboardEvent): void {\n    const resizeDirection = getResizeDirection(event.key, direction.value);\n    if (!resizeDirection) return;\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { beforePanel, afterPanel } = getCurrentPanels();\n    if (!beforePanel || !afterPanel) return;\n\n    const incrementPixels = getResizeIncrement(event);\n    processKeyboardResize(\n      beforePanel, afterPanel, resizeDirection, incrementPixels,\n    );\n  }\n\n  function handleEnterKey(event: KeyboardEvent): void {\n    const { beforePanel } = getCurrentPanels();\n    if (!beforePanel?.collapsible || !onCollapse) return;\n\n    event.preventDefault();\n    const newCollapsed = !beforePanel.collapsed;\n    onCollapse(beforePanel.id, newCollapsed);\n\n    if (onSizeAnnouncement) {\n      const template = newCollapsed\n        ? msg.collapseAnnouncement\n        : msg.expandAnnouncement;\n      onSizeAnnouncement(template.replace('{panelId}', beforePanel.id));\n    }\n  }\n\n  function handleHomeKey(event: KeyboardEvent): void {\n    event.preventDefault();\n\n    const { beforePanel, afterPanel } = getCurrentPanels();\n    if (!beforePanel || !afterPanel) return;\n\n    const targetSize = beforePanel.userMinSizePixels ?? MIN_PANEL_SIZE_PX;\n    const delta = targetSize - beforePanel.pixelSize;\n    if (delta === 0) return;\n\n    const dir = delta > 0 ? 'increase' : 'decrease';\n    processKeyboardResize(beforePanel, afterPanel, dir, Math.abs(delta));\n  }\n\n  function handleEndKey(event: KeyboardEvent): void {\n    event.preventDefault();\n\n    const { beforePanel, afterPanel } = getCurrentPanels();\n    if (!beforePanel || !afterPanel) return;\n\n    const afterMin = afterPanel.userMinSizePixels ?? MIN_PANEL_SIZE_PX;\n    const maxSize = beforePanel.userMaxSizePixels\n      ?? (containerSize.value - afterMin);\n    const targetSize = Math.min(maxSize, containerSize.value - afterMin);\n    const delta = targetSize - beforePanel.pixelSize;\n    if (delta === 0) return;\n\n    const dir = delta > 0 ? 'increase' : 'decrease';\n    processKeyboardResize(beforePanel, afterPanel, dir, Math.abs(delta));\n  }\n\n  function handleResetKey(event: KeyboardEvent): void {\n    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;\n\n    event.preventDefault();\n\n    const { beforePanel, afterPanel } = getCurrentPanels();\n    if (!beforePanel || !afterPanel || !onReset) return;\n\n    onReset(beforePanel.id, afterPanel.id);\n\n    if (onSizeAnnouncement) {\n      onSizeAnnouncement(\n        msg.resetAnnouncement\n          .replace('{beforeId}', beforePanel.id)\n          .replace('{afterId}', afterPanel.id),\n      );\n    }\n  }\n\n  function handleEscapeKey(event: KeyboardEvent): void {\n    event.preventDefault();\n    handleElement.value?.blur();\n  }\n\n  // ─── Event handlers ─────────────────────────────────────────────────\n\n  function handleKeyDown(event: KeyboardEvent): void {\n    if (!isFocused.value) return;\n\n    switch (event.key) {\n      case 'Enter':\n        handleEnterKey(event);\n        return;\n      case 'Home':\n        handleHomeKey(event);\n        return;\n      case 'End':\n        handleEndKey(event);\n        return;\n      case 'r':\n      case 'R':\n        handleResetKey(event);\n        return;\n      case 'Escape':\n        handleEscapeKey(event);\n        return;\n    }\n\n    // Arrow keys — resize\n    handleArrowKey(event);\n  }\n\n  function handleFocus(): void {\n    isFocused.value = true;\n  }\n\n  function handleBlur(): void {\n    isFocused.value = false;\n  }\n\n  function focusHandle(): void {\n    handleElement.value?.focus();\n  }\n\n  return {\n    isFocused,\n    focusHandle,\n    handleKeyDown,\n    handleFocus,\n    handleBlur,\n    KEYBOARD_INCREMENTS,\n  };\n}\n","<template>\n  <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n  <div\n    ref=\"handleElement\"\n    data-qa=\"dt-resizable-handle\"\n    :class=\"[\n      'd-resizable-handle',\n      `d-resizable-handle--${direction}`,\n      props.class,\n      {\n        'd-resizable-handle--active': isActive,\n        'd-resizable-handle--disabled': isDisabled,\n      },\n    ]\"\n    :style=\"handleStyles\"\n    :data-handle-id=\"handleId\"\n    :tabindex=\"isDisabled ? '-1' : '0'\"\n    role=\"separator\"\n    :aria-orientation=\"direction === 'row' ? 'vertical' : 'horizontal'\"\n    :aria-label=\"computedAriaLabel\"\n    :aria-valuenow=\"ariaValueNow\"\n    :aria-valuemin=\"ariaValueMin\"\n    :aria-valuemax=\"ariaValueMax\"\n    :aria-controls=\"`dt-resizable-panel-${resolvedBeforePanelId}`\"\n    :aria-valuetext=\"ariaValueText\"\n    :aria-disabled=\"isDisabled || undefined\"\n    @pointerdown=\"handlePointerDown\"\n    @dblclick=\"handleDoubleClick\"\n    @keydown=\"handleKeyDown\"\n    @focus=\"handleFocusEvent\"\n    @blur=\"handleBlurEvent\"\n  >\n    <div class=\"d-resizable-handle__indicator\" />\n  </div>\n</template>\n\n<script setup>\nimport { computed, inject, onMounted, onUnmounted, ref, getCurrentInstance } from 'vue';\nimport { RESIZABLE_CONTEXT_KEY, RESIZABLE_HANDLE_CENTER_OFFSET_PX, buildHandleId } from './ResizableConstants';\nimport { pixelsToPercentage } from './ResizableUtils';\nimport { useResizableKeyboard } from './Composables/UseResizableKeyboard';\n\nconst props = defineProps({\n  /** ID of the panel before this handle. Auto-detected from layout order if not set. */\n  beforePanelId: { type: String, default: null },\n  /** ID of the panel after this handle. Auto-detected from layout order if not set. */\n  afterPanelId: { type: String, default: null },\n  /** Disable resize interaction for this handle. */\n  disabled: { type: Boolean, default: false },\n  /** Additional CSS classes applied to the handle element. */\n  class: { type: [String, Object, Array], default: '' },\n  /** Disable the double-click reset behavior. */\n  disableResetOnDoubleClick: { type: Boolean, default: false },\n  /**\n   * Which panels to reset on double-click.\n   * @values 'both', 'before', 'after', 'all'\n   */\n  resetBehavior: { type: String, default: 'both' },\n  /** Override the default aria-label for i18n. */\n  ariaLabel: { type: String, default: null },\n});\n\n// ── Injected context from DtResizable ────────────────────────────────────\n\nconst ctx = inject(RESIZABLE_CONTEXT_KEY, null);\nconst layoutRef = ctx?.layout ?? computed(() => ({ panels: new Map(), handles: [] }));\nconst panels = ctx?.panels ?? computed(() => []);\nconst directionRef = ctx?.direction ?? computed(() => 'row');\nconst containerSizeRef = ctx?.containerSize ?? computed(() => 1000);\nconst activeHandleId = ctx?.activeHandleId ?? computed(() => undefined);\nconst startResize = ctx?.startResize ?? (() => {});\nconst resetPanels = ctx?.resetPanels ?? (() => {});\nconst registerHandle = ctx?.registerHandle ?? (() => 0);\nconst unregisterHandle = ctx?.unregisterHandle ?? (() => {});\nconst saveToStorage = ctx?.saveToStorage ?? null;\nconst collapsePanel = ctx?.collapsePanel ?? null;\nconst commitPanelSize = ctx?.commitPanelSize ?? null;\nconst announce = ctx?.announce ?? null;\nconst panelMap = ctx?.panelMap ?? computed(() => new Map());\nconst injectedMessages = ctx?.messages ?? {};\n\n// ── Handle registration ──────────────────────────────────────────────────────\n\nconst currentInstance = getCurrentInstance();\n\n// ── Layout-driven position ───────────────────────────────────────────────────\n\n// DOM index resolved once at mount time to avoid repeated querySelectorAll calls\nconst resolvedDomIndex = ref(0);\n\nconst handlePosition = computed(() => {\n  const layout = layoutRef.value;\n  if (layout.handles.length === 0) return null;\n\n  if (props.beforePanelId && props.afterPanelId) {\n    const id = buildHandleId(props.beforePanelId, props.afterPanelId);\n    return layout.handles.find(h => h.id === id) ?? null;\n  }\n\n  return layout.handles[resolvedDomIndex.value] ?? null;\n});\n\n/** The composite handle identifier used by the drag system */\nconst handleId = computed(() => handlePosition.value?.id ?? '');\n\n/** Panel ID before this handle (from layout result) */\nconst resolvedBeforePanelId = computed(() => handlePosition.value?.beforePanelId ?? props.beforePanelId ?? '');\n\n/** Panel ID after this handle (from layout result) */\nconst resolvedAfterPanelId = computed(() => handlePosition.value?.afterPanelId ?? props.afterPanelId ?? '');\n\n/** Whether this handle is currently the active drag handle */\nconst isActive = computed(() => !!(handleId.value && activeHandleId.value === handleId.value));\n\n/**\n * Handle is disabled when:\n * - props.disabled is set, OR\n * - the layout marks this handle as disabled (adjacent collapsed/non-resizable panel)\n */\nconst isDisabled = computed(() => props.disabled || (handlePosition.value?.disabled ?? false));\n\n/** Reactive layout direction */\nconst direction = directionRef;\n\n// ── Position styles from layout ──────────────────────────────────────────────\n\nconst handleStyles = computed(() => {\n  const pos = handlePosition.value;\n\n  if (!pos) {\n    return { visibility: 'hidden' };\n  }\n\n  return {\n    insetInlineStart: `${Math.max(0, pos.left - RESIZABLE_HANDLE_CENTER_OFFSET_PX)}px`,\n    visibility: '',\n    ...offsetHandleStyles.value,\n  };\n});\n\n// ── ARIA values ──────────────────────────────────────────────────────────────\n\nconst computedAriaLabel = computed(() => {\n  if (props.ariaLabel) return props.ariaLabel;\n  const before = resolvedBeforePanelId.value || 'first';\n  const after = resolvedAfterPanelId.value || 'second';\n  const template = injectedMessages.handleAriaLabel\n    ?? 'Resize handle between {before} and {after} panels';\n  return template.replace('{before}', before).replace('{after}', after);\n});\n\nconst ariaValueText = computed(() => {\n  const p = panelMap.value.get(resolvedBeforePanelId.value);\n  if (!p) return '';\n  const template = injectedMessages.ariaValueText ?? '{panelId}: {pixels}px';\n  return template\n    .replace('{panelId}', resolvedBeforePanelId.value)\n    .replace('{pixels}', String(Math.round(p.pixelSize)));\n});\n\nconst ariaValueNow = computed(() => {\n  const p = panelMap.value.get(resolvedBeforePanelId.value);\n  const cs = containerSizeRef.value;\n  if (!p || !cs) return 0;\n  return Math.floor(pixelsToPercentage(p.collapsed ? 0 : p.pixelSize || 0, cs));\n});\n\nconst ariaValueMin = computed(() => {\n  const p = panelMap.value.get(resolvedBeforePanelId.value);\n  const cs = containerSizeRef.value;\n  if (!p || !cs) return 0;\n  return Math.floor(pixelsToPercentage(p.userMinSizePixels || 0, cs));\n});\n\nconst ariaValueMax = computed(() => {\n  const p = panelMap.value.get(resolvedBeforePanelId.value);\n  const cs = containerSizeRef.value;\n  if (!p || !cs) return 100;\n  return Math.floor(pixelsToPercentage(p.userMaxSizePixels || cs, cs));\n});\n\n// ── Handle DOM element ───────────────────────────────────────────────────────\n\nconst handleElement = ref(null);\n\n// ── Keyboard resize composable ─────────────────────────────────────────────\n\nconst keyboard = useResizableKeyboard({\n  panels,\n  direction: directionRef,\n  containerSize: containerSizeRef,\n  beforePanelId: resolvedBeforePanelId,\n  afterPanelId: resolvedAfterPanelId,\n  handleElement,\n  onResize (beforeId, beforeSize, afterId, afterSize) {\n    if (commitPanelSize) {\n      commitPanelSize(beforeId, beforeSize);\n      commitPanelSize(afterId, afterSize);\n    } else {\n      saveToStorage?.();\n    }\n  },\n  onCollapse (panelId, collapsed) { collapsePanel?.(panelId, collapsed); },\n  onReset (beforeId, afterId) { resetPanels?.(beforeId, afterId, 'both'); },\n  onSizeAnnouncement (msg) { announce?.(msg); },\n  messages: injectedMessages,\n});\n\n// ── Offset (from parent context) ──────────────────────────────────────────\nconst offsetHandleStyles = ctx?.offsetHandleStyles ?? computed(() => ({}));\n\n// ── Lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(() => {\n  registerHandle(currentInstance);\n\n  const el = handleElement.value;\n  if (el?.parentElement) {\n    const allHandles = Array.from(el.parentElement.querySelectorAll('.d-resizable-handle'));\n    const idx = allHandles.indexOf(el);\n    if (idx >= 0) resolvedDomIndex.value = idx;\n  }\n});\n\nonUnmounted(() => {\n  unregisterHandle(currentInstance);\n});\n\n// ── Event handlers ───────────────────────────────────────────────────────────\n\nfunction handlePointerDown (event) {\n  if (isDisabled.value) return;\n  event.preventDefault();\n  startResize(handleId.value);\n}\n\nfunction handleDoubleClick () {\n  if (props.disableResetOnDoubleClick) return;\n  if (isDisabled.value) return;\n\n  const beforeId = resolvedBeforePanelId.value;\n  const afterId = resolvedAfterPanelId.value;\n\n  if (!beforeId || !afterId) return;\n\n  resetPanels(beforeId, afterId, props.resetBehavior);\n}\n\nfunction handleKeyDown (event) {\n  keyboard.handleKeyDown(event);\n}\n\nfunction handleFocusEvent () {\n  keyboard.handleFocus();\n}\n\nfunction handleBlurEvent () {\n  keyboard.handleBlur();\n}\n</script>\n"],"mappings":"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"}

package/dist/ResizableUtils-C9qEZRN5.js

@@ -0,0 +1,100 @@
+import { LAYOUT_SIZE_VALUES as e } from "./common/constants/layout.js";
+//#region components/Resizable/ResizableConstants.ts
+var t = "50p", n = 10, r = 2, i = Symbol("resizable-context");
+function a(e, t) {
+	return `${e}:${t}`;
+}
+//#endregion
+//#region components/Resizable/ResizableUtils.ts
+var o = 64, s = new Set(e), c = /* @__PURE__ */ new Map(), l = null;
+function u() {
+	return l === null && (l = typeof document < "u" && parseFloat(getComputedStyle(document.documentElement).fontSize) || 10), l;
+}
+function d(e) {
+	if (!m(e)) return;
+	if (c.has(e)) return c.get(e);
+	if (typeof document < "u") {
+		let t = getComputedStyle(document.documentElement).getPropertyValue(`--dt-layout-${e}`).trim();
+		if (t) {
+			let n = t.match(/^([\d.]+)rem$/);
+			if (n) {
+				let t = parseFloat(n[1]) * u();
+				return c.set(e, t), t;
+			}
+			let r = t.match(/^([\d.]+)px$/);
+			if (r) {
+				let t = parseFloat(r[1]);
+				return c.set(e, t), t;
+			}
+		}
+	}
+	let t = f(e);
+	if (t !== void 0) return c.set(e, t), t;
+}
+function f(e) {
+	if (e === "0") return 0;
+	if (e.endsWith("px")) return parseFloat(e);
+	let t = Number(e);
+	if (Number.isFinite(t)) return t * o / 100;
+}
+function p(e) {
+	if (!e.endsWith("p")) return;
+	let t = parseFloat(e.slice(0, -1));
+	return isFinite(t) && t >= 0 && t <= 100 ? t : void 0;
+}
+function m(e) {
+	return s.has(e);
+}
+function h(e) {
+	return p(e) !== void 0;
+}
+function g(e) {
+	return m(e) || h(e);
+}
+function _(e, t) {
+	let n = d(e);
+	if (n !== void 0) return n;
+	let r = p(e);
+	if (r !== void 0) return r / 100 * t;
+}
+function v(e, t, n) {
+	let { clampToContainer: r = !0 } = n ?? {}, i = b(t);
+	if (x(i, e)) return 0;
+	let a = i === 0 ? 1e3 : i;
+	if (typeof e == "string") {
+		let t = _(e, a);
+		return t === void 0 ? y(e) : S(t, e, i, r);
+	}
+	return y(e);
+}
+function y(e) {
+	return console.warn(`[resizable] Invalid ResizableSizeValue: ${e}. Expected a size token or percentage with 'p' suffix.`), 0;
+}
+function b(e) {
+	return !isFinite(e) || e < 0 ? (console.warn(`[resizable] Invalid containerSize: ${e}. Using fallback value of 1000px.`), 1e3) : e > 1e4 ? (console.warn(`[resizable] Unusually large containerSize: ${e}px. Capping at 10000px.`), 1e4) : e;
+}
+function x(e, t) {
+	return e === 0 && t === "0";
+}
+function S(e, t, n, r) {
+	return !isFinite(e) || e < 0 ? (console.warn(`[resizable] Invalid pixel calculation result: ${e} for value: ${t}, containerSize: ${n}`), 0) : r && n > 0 && e > n ? (console.warn(`[resizable] Size value '${t}' (${e}px) exceeds container (${n}px). Clamping to container.`), n) : e;
+}
+function C(e) {
+	return h(e);
+}
+function w(e) {
+	return m(e);
+}
+function T(e, t) {
+	return e / t * 100;
+}
+function E(e) {
+	return e.userMinSize ? h(e.userMinSize) : !1;
+}
+function D() {
+	c.clear(), l = null;
+}
+//#endregion
+export { g as a, b as c, i as d, r as f, C as i, t as l, D as n, v as o, a as p, w as r, T as s, E as t, n as u };
+
+//# sourceMappingURL=ResizableUtils-C9qEZRN5.js.map

package/dist/ResizableUtils-C9qEZRN5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableUtils-C9qEZRN5.js","names":[],"sources":["../components/Resizable/ResizableConstants.ts","../components/Resizable/ResizableUtils.ts"],"sourcesContent":["/**\n * Resizable panel system — types and injection keys.\n *\n * @see resizable.vue — provides all keys\n * @see resizable_panel.vue — consumes panel/layout keys\n * @see resizable_handle.vue — consumes handle/resize keys\n */\nimport type { InjectionKey, ComputedRef, ComponentInternalInstance } from 'vue';\nimport type { LayoutResult } from './Composables/ComputeLayout';\n\n// ─── Sizing Types ──────────────────────────────────────────────────────────\n\n/**\n * Resizable panels accept Dialtone layout tokens (numeric strings mapped to\n * `--dt-layout-*` pixel values, e.g. '500' → 320px) or percentage values with\n * a 'p' suffix (e.g. '50p' → 50% of the container).\n *\n * The accepted set matches DtBox's layout value surface so the same numeric\n * label resolves to the same pixel size across DtResizable, DtBox, and the\n * `d-w-*` / `d-h-*` utility classes.\n *\n * parseSizeToPixels() warns for unrecognized values.\n */\nexport type ResizableSizeValue = string;\n\n// ─── Types ──────────────────────────────────────────────────────────────────\n\nexport type ResizableDirection = 'row' | 'column';\n\nexport interface ResizablePanelConfig {\n  /** Panel identifier. Auto-generated by ResizableGroup if not provided. */\n  id: string;\n  /** Initial size - layout token (e.g., '500') or percentage with 'p' suffix (e.g., '50p') */\n  initialSize?: ResizableSizeValue;\n\n  // ─── User Drag Limits (Absolute Boundaries) ───\n  /** Hard floor for user dragging. User cannot drag panel smaller than this. */\n  userMinSize?: ResizableSizeValue;\n  /** Hard ceiling for user dragging. User cannot drag panel larger than this. */\n  userMaxSize?: ResizableSizeValue;\n\n  // ─── System Scaling Limits (Operating Range) ───\n  /**\n   * System scaling floor. System won't compress panel below this during viewport resize.\n   * Must be >= userMinSize. Falls back to userMinSize if not specified.\n   */\n  systemMinSize?: ResizableSizeValue;\n  /**\n   * System scaling ceiling. System won't expand panel above this during viewport resize.\n   * Must be <= userMaxSize. Falls back to userMaxSize if not specified.\n   */\n  systemMaxSize?: ResizableSizeValue;\n\n  // ─── Auto-Collapse ───\n  /**\n   * Container width threshold for auto-collapse.\n   * When container width drops below this value, panel auto-collapses.\n   * This is the container width, not the panel width.\n   */\n  collapseSize?: ResizableSizeValue;\n\n  // ─── Behavior Flags ───\n  /** Whether this panel can be resized by user dragging */\n  resizable?: boolean;\n  /** Whether this panel can be manually collapsed via UI */\n  collapsible?: boolean;\n  /** Initial collapsed state */\n  collapsed?: boolean;\n\n}\n\nexport interface ResizablePanelState extends ResizablePanelConfig {\n  // ─── Core State ───\n  /** Current size in pixels (primary storage) */\n  pixelSize: number;\n\n  // ─── User Drag Constraints (Computed Pixels) ───\n  /** Computed pixel value for userMinSize (absolute floor for user dragging) */\n  userMinSizePixels?: number;\n  /** Computed pixel value for userMaxSize (absolute ceiling for user dragging) */\n  userMaxSizePixels?: number;\n\n  // ─── System Scaling Constraints (Computed Pixels) ───\n  /** Computed pixel value for systemMinSize (system scaling floor) */\n  systemMinSizePixels?: number;\n  /** Computed pixel value for systemMaxSize (system scaling ceiling) */\n  systemMaxSizePixels?: number;\n\n  // ─── Auto-Collapse State ───\n  /** Computed pixel value for collapseSize (container width threshold) */\n  collapseSizePixels?: number;\n  /** True if panel was auto-collapsed (vs manually collapsed via UI) */\n  autoCollapsed?: boolean;\n\n  // ─── Manual Resize Tracking ───\n  /**\n   * Internal: Stores the user's preferred pixel size when they drag a panel.\n   * Used by the drag system to track intent before converting to ratio.\n   * Not exposed as a component prop.\n   */\n  manualTargetSize?: number;\n  /**\n   * Stores the user's preferred ratio (0–1) when they drag a panel.\n   * - undefined: no manual target, panel scales proportionally with viewport\n   * - number: panel targets (ratio × containerSize) pixels on each render,\n   *   still subject to min/max constraints.\n   *\n   * Enables correct proportional scaling when the viewport changes.\n   * Panel feels \"sticky\" at the chosen proportion.\n   */\n  manualTargetRatio?: number;\n\n  // ─── Storage Restoration ───\n  /**\n   * True if this panel's state was loaded from localStorage on the current\n   * initialization pass. Prevents double-restoration when loadFromStorage is\n   * called multiple times (e.g. the deferred 100ms retry in useResizableCore).\n   */\n  restoredFromStorage?: boolean;\n\n}\n\nexport interface ResizableHandleConfig {\n  id: string;\n  beforePanelId: string;\n  afterPanelId: string;\n  direction: ResizableDirection;\n}\n\nexport type ResizableSizeMode = 'percentage' | 'pixels';\n\n\nexport interface ResizableGroupConfig {\n  direction: ResizableDirection;\n  panels: ResizablePanelConfig[];\n  storageKey?: string; // Optional localStorage key for persistence\n  sizeMode?: ResizableSizeMode; // Whether to use percentage or pixel-based sizing\n  limitToParent?: boolean; // Limit resizing to parent viewport bounds\n}\n\nexport interface ResizableGroupState {\n  direction: ResizableDirection;\n  panels: ResizablePanelState[];\n  containerSize: number; // Total container size in pixels\n  isResizing: boolean;\n  activeHandleId?: string;\n}\n\nexport interface ResizableEvents {\n  'panel-resize': (panelId: string, size: number) => void;\n  'panel-collapse': (panelId: string, collapsed: boolean) => void;\n  'resize-start': (handleId: string) => void;\n  'resize-end': (handleId: string) => void;\n}\n\n/**\n * Defines collapse behavior for a panel during space constraints.\n * Used to determine which panels collapse first when viewport shrinks.\n */\nexport interface CollapseRule {\n  /** Panel ID this rule applies to */\n  panelId: string;\n  /** Collapse priority - lower numbers collapse first */\n  priority: number;\n  /** Optional threshold that triggers collapse (overrides panel's userMinSize) */\n  minSizeBeforeCollapse?: ResizableSizeValue;\n}\n\n/**\n// ─── Defaults ─────────────────────────────────────────────────────────────\n\n/** Default panel size when no initialSize is specified (50% of container). */\nexport const DEFAULT_PANEL_SIZE = '50p';\n\n/** Minimum panel size in pixels below which a resize is rejected. */\nexport const MIN_PANEL_SIZE_PX = 10;\n\n/** Centers the 4px handle over the panel boundary. */\nexport const RESIZABLE_HANDLE_CENTER_OFFSET_PX = 2;\n\n// ─── Storage Adapter ───────────────────────────────────────────────────────\n\n/**\n * Interface for pluggable storage backends.\n * Implement this to persist panel layouts to Pinia, Vuex, IndexedDB, etc.\n * The built-in `localStorageAdapter(key)` factory creates a localStorage-backed adapter.\n */\nexport interface ResizableStorageAdapter {\n  /** Persist the current panel layout. */\n  save(data: ResizableStoragePanelData[]): void;\n  /** Load a previously saved layout. Returns null if nothing is stored. */\n  load(): ResizableStoragePanelData[] | null;\n  /** Remove all persisted data for this layout. */\n  clear(): void;\n}\n\n/**\n * Shape of a single panel's persisted data.\n * Intentionally minimal — only what's needed to restore a layout.\n */\nexport interface ResizableStoragePanelData {\n  id: string;\n  pixelSize: number;\n  collapsed?: boolean;\n  autoCollapsed?: boolean;\n  manualTargetRatio?: number;\n}\n\n// ─── Injection Context ──────────────────────────────────────────────────────\n// Single context object for provide/inject between ResizableGroup, Panel, Handle.\n\nexport interface ResizableContext {\n  // Reactive state\n  layout: ComputedRef<LayoutResult>;\n  panels: ComputedRef<ResizablePanelState[]>;\n  panelMap: ComputedRef<Map<string, ResizablePanelState>>;\n  direction: ComputedRef<ResizableDirection>;\n  containerSize: ComputedRef<number>;\n  containerElement: ComputedRef<HTMLElement | null>;\n  isResizing: ComputedRef<boolean>;\n  activeHandleId: ComputedRef<string | undefined>;\n  isInitializing: ComputedRef<boolean>;\n  messages: Record<string, string>;\n\n  // Offset (from fixed header/toolbar)\n  offsetHandleStyles: ComputedRef<Record<string, string>>;\n  offsetContentStyles: ComputedRef<Record<string, string>>;\n\n  // Operations\n  startResize: (handleId: string) => void;\n  resetPanels: (\n    beforePanelId?: string,\n    afterPanelId?: string,\n    behavior?: 'both' | 'before' | 'after' | 'all',\n  ) => void;\n  registerHandle: (instance: ComponentInternalInstance | null) => void;\n  unregisterHandle: (instance: ComponentInternalInstance | null) => void;\n  registerPanel: (config: ResizablePanelConfig) => void;\n  unregisterPanel: (id: string) => void;\n  saveToStorage: () => void;\n  announce: (message: string) => void;\n  collapsePanel: (panelId: string, collapsed: boolean) => void;\n  emitPanelResize: (panelId: string, size: number) => void;\n  commitPanelSize: (panelId: string, pixels: number) => void;\n  updateSavedPanel: (panelId: string, updates: Partial<ResizableStoragePanelData>) => void;\n}\n\nexport const RESIZABLE_CONTEXT_KEY: InjectionKey<ResizableContext> = Symbol('resizable-context');\n\n/**\n * Build a composite handle ID from the before and after panel IDs.\n * Handles use the format \"{beforePanelId}:{afterPanelId}\" throughout the system.\n */\nexport function buildHandleId(beforeId: string, afterId: string): string {\n  return `${beforeId}:${afterId}`;\n}\n","import type { ResizableSizeValue } from './ResizableConstants';\nimport { LAYOUT_SIZE_VALUES } from '@/common/constants';\n\n// ─── Layout Token Resolution ───────────────────────────────────────────────\n// Resolves Dialtone layout tokens (e.g., '500', '200', '8px') to pixel values.\n// Reads --dt-layout-{token} CSS custom properties at runtime to stay in sync\n// with the token pipeline. Falls back to a static map in environments where\n// CSS custom properties aren't available (tests, SSR).\n//\n// The size allowlist mirrors the shared Dialtone layout value set so the same\n// numeric label resolves to the same pixel size in DtBox, DtResizable, and the\n// `d-w-*` / `d-h-*` utility classes.\n\nconst LAYOUT_BASE_PX = 64;\nconst layoutSizeValueSet = new Set<string>(LAYOUT_SIZE_VALUES);\n\n/** Cache for resolved token pixel values (populated on first use). */\nconst tokenCache = new Map<string, number>();\n\n/** Root font size cache — read once from getComputedStyle. */\nlet cachedRootFontSize: number | null = null;\n\nfunction getRootFontSize(): number {\n  if (cachedRootFontSize !== null) return cachedRootFontSize;\n  if (typeof document !== 'undefined') {\n    cachedRootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10;\n  } else {\n    cachedRootFontSize = 10; // Dialtone default\n  }\n  return cachedRootFontSize;\n}\n\n/**\n * Resolve a Dialtone layout token to pixels via CSS custom properties.\n * Early-rejects tokens not in the shared layout token allowlist so the\n * accepted value set matches DtBox and the token pipeline.\n * Falls back to derived layout token values when CSS isn't available.\n */\nfunction resolveTokenPixels(token: string): number | undefined {\n  if (!isSizeToken(token)) return undefined;\n  if (tokenCache.has(token)) return tokenCache.get(token);\n\n  // Try runtime CSS resolution first so theme overrides propagate without rebuild\n  if (typeof document !== 'undefined') {\n    const cssValue = getComputedStyle(document.documentElement)\n      .getPropertyValue(`--dt-layout-${token}`)\n      .trim();\n\n    if (cssValue) {\n      const remMatch = cssValue.match(/^([\\d.]+)rem$/);\n      if (remMatch) {\n        const px = parseFloat(remMatch[1]) * getRootFontSize();\n        tokenCache.set(token, px);\n        return px;\n      }\n      const pxMatch = cssValue.match(/^([\\d.]+)px$/);\n      if (pxMatch) {\n        const px = parseFloat(pxMatch[1]);\n        tokenCache.set(token, px);\n        return px;\n      }\n    }\n  }\n\n  // Static fallback — kept for jsdom tests and SSR where CSS custom properties aren't loaded.\n  const px = getFallbackLayoutTokenPixels(token);\n  if (px === undefined) return undefined;\n\n  tokenCache.set(token, px);\n  return px;\n}\n\n/**\n * Static fallback resolution — mirrors the layout stop rule in\n * `packages/dialtone-css/postcss/constants.cjs`:\n * - '*px' values are literal off-scale pixels.\n * - numeric stops are scale-indexed on the 64px layout base.\n */\nfunction getFallbackLayoutTokenPixels(token: string): number | undefined {\n  if (token === '0') return 0;\n  if (token.endsWith('px')) return parseFloat(token);\n\n  const stop = Number(token);\n  if (!Number.isFinite(stop)) return undefined;\n\n  return (stop * LAYOUT_BASE_PX) / 100;\n}\n\n// ─── Percentage Resolution ─────────────────────────────────────────────────\n// Percentage tokens use a simple pattern: numeric value + 'p' suffix.\n\nfunction parsePercentage(value: string): number | undefined {\n  if (!value.endsWith('p')) return undefined;\n  const num = parseFloat(value.slice(0, -1));\n  return isFinite(num) && num >= 0 && num <= 100 ? num : undefined;\n}\n\n// ─── Token Helpers ──────────────────────────────────────────────────────────\n\nfunction isSizeToken(value: string): boolean {\n  return layoutSizeValueSet.has(value);\n}\n\nfunction isPercentageToken(value: string): boolean {\n  return parsePercentage(value) !== undefined;\n}\n\nexport function isValidSizing(value: string): boolean {\n  return isSizeToken(value) || isPercentageToken(value);\n}\n\nfunction parseSizingToPixels(value: string, containerSize: number): number | undefined {\n  const sizePixels = resolveTokenPixels(value);\n  if (sizePixels !== undefined) return sizePixels;\n\n  const percentage = parsePercentage(value);\n  if (percentage !== undefined) return (percentage / 100) * containerSize;\n\n  return undefined;\n}\n\n// ─── Public API ─────────────────────────────────────────────────────────────\n\nexport interface ParseSizeOptions {\n  /**\n   * When true, clamps the result to container size.\n   * Panels cannot exceed their parent container.\n   * @default true\n   */\n  clampToContainer?: boolean;\n}\n\n/**\n * Parses a ResizableSizeValue and returns the pixel value.\n * Handles layout tokens (e.g., '500') and percentage tokens (e.g., '50p').\n *\n * Layout tokens resolve from --dt-layout-{token} CSS custom properties at\n * runtime, falling back to a static map in test/SSR environments.\n *\n * @param value - Layout token or percentage token\n * @param containerSize - Container size in pixels\n * @param options - Optional configuration\n * @returns Pixel value, clamped to container by default\n *\n * @example\n * parseSizeToPixels('500', 1000)  // Returns 320 (from --dt-layout-500)\n * parseSizeToPixels('50p', 1000)  // Returns 500 (50% of 1000)\n * parseSizeToPixels('1600', 1000) // Returns 1000 (clamped from 1024px)\n */\nexport function parseSizeToPixels(\n  value: ResizableSizeValue,\n  containerSize: number,\n  options?: ParseSizeOptions\n): number {\n  const { clampToContainer = true } = options ?? {};\n  const validatedContainerSize = validateContainerSize(containerSize);\n\n  if (isCollapsedPanel(validatedContainerSize, value)) {\n    return 0;\n  }\n\n  const calculationContainerSize = validatedContainerSize === 0 ? 1000 : validatedContainerSize;\n\n  if (typeof value === 'string') {\n    const result = parseSizingToPixels(value, calculationContainerSize);\n    if (result === undefined) return warnInvalidSizeValue(value);\n\n    return validatePixelResult(result, value, validatedContainerSize, clampToContainer);\n  }\n\n  return warnInvalidSizeValue(value);\n}\n\nfunction warnInvalidSizeValue(value: ResizableSizeValue): 0 {\n  console.warn(\n    `[resizable] Invalid ResizableSizeValue: ${value}. Expected a size token or percentage with 'p' suffix.`,\n  );\n  return 0;\n}\n\nexport function validateContainerSize(containerSize: number): number {\n  if (!isFinite(containerSize) || containerSize < 0) {\n    console.warn(`[resizable] Invalid containerSize: ${containerSize}. Using fallback value of 1000px.`);\n    return 1000;\n  }\n\n  if (containerSize > 10000) {\n    console.warn(`[resizable] Unusually large containerSize: ${containerSize}px. Capping at 10000px.`);\n    return 10000;\n  }\n\n  return containerSize;\n}\n\nfunction isCollapsedPanel(containerSize: number, value: ResizableSizeValue): boolean {\n  return containerSize === 0 && value === '0';\n}\n\nfunction validatePixelResult(\n  result: number,\n  value: ResizableSizeValue,\n  containerSize: number,\n  clampToContainer: boolean\n): number {\n  if (!isFinite(result) || result < 0) {\n    console.warn(\n      `[resizable] Invalid pixel calculation result: ${result} for value: ${value}, containerSize: ${containerSize}`\n    );\n    return 0;\n  }\n\n  if (clampToContainer && containerSize > 0 && result > containerSize) {\n    console.warn(\n      `[resizable] Size value '${value}' (${result}px) exceeds container (${containerSize}px). Clamping to container.`\n    );\n    return containerSize;\n  }\n\n  return result;\n}\n\nexport function isPercentageValue(value: ResizableSizeValue): boolean {\n  return isPercentageToken(value);\n}\n\nexport function isCSSValue(value: ResizableSizeValue): boolean {\n  return isSizeToken(value);\n}\n\nexport function pixelsToPercentage(pixels: number, containerSize: number): number {\n  return (pixels / containerSize) * 100;\n}\n\n/**\n * Checks if a panel's userMinSize is percentage-based (e.g., '50p').\n */\nexport function hasPercentageMinSize(panel: { userMinSize?: ResizableSizeValue }): boolean {\n  if (!panel.userMinSize) return false;\n  return isPercentageToken(panel.userMinSize);\n}\n\n/**\n * Invalidate the token cache. Call when the theme changes or\n * when token values may have been updated at runtime.\n */\nexport function invalidateTokenCache(): void {\n  tokenCache.clear();\n  cachedRootFontSize = null;\n}\n"],"mappings":"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"}

package/dist/ResizableUtils-DMfertP2.cjs

@@ -0,0 +1,2 @@
+const e=require(`./common/constants/layout.cjs`);var t=`50p`,n=10,r=2,i=Symbol(`resizable-context`);function a(e,t){return`${e}:${t}`}var o=64,s=new Set(e.LAYOUT_SIZE_VALUES),c=new Map,l=null;function u(){return l===null&&(l=typeof document<`u`&&parseFloat(getComputedStyle(document.documentElement).fontSize)||10),l}function d(e){if(!m(e))return;if(c.has(e))return c.get(e);if(typeof document<`u`){let t=getComputedStyle(document.documentElement).getPropertyValue(`--dt-layout-${e}`).trim();if(t){let n=t.match(/^([\d.]+)rem$/);if(n){let t=parseFloat(n[1])*u();return c.set(e,t),t}let r=t.match(/^([\d.]+)px$/);if(r){let t=parseFloat(r[1]);return c.set(e,t),t}}}let t=f(e);if(t!==void 0)return c.set(e,t),t}function f(e){if(e===`0`)return 0;if(e.endsWith(`px`))return parseFloat(e);let t=Number(e);if(Number.isFinite(t))return t*o/100}function p(e){if(!e.endsWith(`p`))return;let t=parseFloat(e.slice(0,-1));return isFinite(t)&&t>=0&&t<=100?t:void 0}function m(e){return s.has(e)}function h(e){return p(e)!==void 0}function g(e){return m(e)||h(e)}function _(e,t){let n=d(e);if(n!==void 0)return n;let r=p(e);if(r!==void 0)return r/100*t}function v(e,t,n){let{clampToContainer:r=!0}=n??{},i=b(t);if(x(i,e))return 0;let a=i===0?1e3:i;if(typeof e==`string`){let t=_(e,a);return t===void 0?y(e):S(t,e,i,r)}return y(e)}function y(e){return console.warn(`[resizable] Invalid ResizableSizeValue: ${e}. Expected a size token or percentage with 'p' suffix.`),0}function b(e){return!isFinite(e)||e<0?(console.warn(`[resizable] Invalid containerSize: ${e}. Using fallback value of 1000px.`),1e3):e>1e4?(console.warn(`[resizable] Unusually large containerSize: ${e}px. Capping at 10000px.`),1e4):e}function x(e,t){return e===0&&t===`0`}function S(e,t,n,r){return!isFinite(e)||e<0?(console.warn(`[resizable] Invalid pixel calculation result: ${e} for value: ${t}, containerSize: ${n}`),0):r&&n>0&&e>n?(console.warn(`[resizable] Size value '${t}' (${e}px) exceeds container (${n}px). Clamping to container.`),n):e}function C(e){return h(e)}function w(e){return m(e)}function T(e,t){return e/t*100}function E(e){return e.userMinSize?h(e.userMinSize):!1}function D(){c.clear(),l=null}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,`d`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`f`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`l`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`p`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`u`,{enumerable:!0,get:function(){return n}});
+//# sourceMappingURL=ResizableUtils-DMfertP2.cjs.map

package/dist/ResizableUtils-DMfertP2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableUtils-DMfertP2.cjs","names":[],"sources":["../components/Resizable/ResizableConstants.ts","../components/Resizable/ResizableUtils.ts"],"sourcesContent":["/**\n * Resizable panel system — types and injection keys.\n *\n * @see resizable.vue — provides all keys\n * @see resizable_panel.vue — consumes panel/layout keys\n * @see resizable_handle.vue — consumes handle/resize keys\n */\nimport type { InjectionKey, ComputedRef, ComponentInternalInstance } from 'vue';\nimport type { LayoutResult } from './Composables/ComputeLayout';\n\n// ─── Sizing Types ──────────────────────────────────────────────────────────\n\n/**\n * Resizable panels accept Dialtone layout tokens (numeric strings mapped to\n * `--dt-layout-*` pixel values, e.g. '500' → 320px) or percentage values with\n * a 'p' suffix (e.g. '50p' → 50% of the container).\n *\n * The accepted set matches DtBox's layout value surface so the same numeric\n * label resolves to the same pixel size across DtResizable, DtBox, and the\n * `d-w-*` / `d-h-*` utility classes.\n *\n * parseSizeToPixels() warns for unrecognized values.\n */\nexport type ResizableSizeValue = string;\n\n// ─── Types ──────────────────────────────────────────────────────────────────\n\nexport type ResizableDirection = 'row' | 'column';\n\nexport interface ResizablePanelConfig {\n  /** Panel identifier. Auto-generated by ResizableGroup if not provided. */\n  id: string;\n  /** Initial size - layout token (e.g., '500') or percentage with 'p' suffix (e.g., '50p') */\n  initialSize?: ResizableSizeValue;\n\n  // ─── User Drag Limits (Absolute Boundaries) ───\n  /** Hard floor for user dragging. User cannot drag panel smaller than this. */\n  userMinSize?: ResizableSizeValue;\n  /** Hard ceiling for user dragging. User cannot drag panel larger than this. */\n  userMaxSize?: ResizableSizeValue;\n\n  // ─── System Scaling Limits (Operating Range) ───\n  /**\n   * System scaling floor. System won't compress panel below this during viewport resize.\n   * Must be >= userMinSize. Falls back to userMinSize if not specified.\n   */\n  systemMinSize?: ResizableSizeValue;\n  /**\n   * System scaling ceiling. System won't expand panel above this during viewport resize.\n   * Must be <= userMaxSize. Falls back to userMaxSize if not specified.\n   */\n  systemMaxSize?: ResizableSizeValue;\n\n  // ─── Auto-Collapse ───\n  /**\n   * Container width threshold for auto-collapse.\n   * When container width drops below this value, panel auto-collapses.\n   * This is the container width, not the panel width.\n   */\n  collapseSize?: ResizableSizeValue;\n\n  // ─── Behavior Flags ───\n  /** Whether this panel can be resized by user dragging */\n  resizable?: boolean;\n  /** Whether this panel can be manually collapsed via UI */\n  collapsible?: boolean;\n  /** Initial collapsed state */\n  collapsed?: boolean;\n\n}\n\nexport interface ResizablePanelState extends ResizablePanelConfig {\n  // ─── Core State ───\n  /** Current size in pixels (primary storage) */\n  pixelSize: number;\n\n  // ─── User Drag Constraints (Computed Pixels) ───\n  /** Computed pixel value for userMinSize (absolute floor for user dragging) */\n  userMinSizePixels?: number;\n  /** Computed pixel value for userMaxSize (absolute ceiling for user dragging) */\n  userMaxSizePixels?: number;\n\n  // ─── System Scaling Constraints (Computed Pixels) ───\n  /** Computed pixel value for systemMinSize (system scaling floor) */\n  systemMinSizePixels?: number;\n  /** Computed pixel value for systemMaxSize (system scaling ceiling) */\n  systemMaxSizePixels?: number;\n\n  // ─── Auto-Collapse State ───\n  /** Computed pixel value for collapseSize (container width threshold) */\n  collapseSizePixels?: number;\n  /** True if panel was auto-collapsed (vs manually collapsed via UI) */\n  autoCollapsed?: boolean;\n\n  // ─── Manual Resize Tracking ───\n  /**\n   * Internal: Stores the user's preferred pixel size when they drag a panel.\n   * Used by the drag system to track intent before converting to ratio.\n   * Not exposed as a component prop.\n   */\n  manualTargetSize?: number;\n  /**\n   * Stores the user's preferred ratio (0–1) when they drag a panel.\n   * - undefined: no manual target, panel scales proportionally with viewport\n   * - number: panel targets (ratio × containerSize) pixels on each render,\n   *   still subject to min/max constraints.\n   *\n   * Enables correct proportional scaling when the viewport changes.\n   * Panel feels \"sticky\" at the chosen proportion.\n   */\n  manualTargetRatio?: number;\n\n  // ─── Storage Restoration ───\n  /**\n   * True if this panel's state was loaded from localStorage on the current\n   * initialization pass. Prevents double-restoration when loadFromStorage is\n   * called multiple times (e.g. the deferred 100ms retry in useResizableCore).\n   */\n  restoredFromStorage?: boolean;\n\n}\n\nexport interface ResizableHandleConfig {\n  id: string;\n  beforePanelId: string;\n  afterPanelId: string;\n  direction: ResizableDirection;\n}\n\nexport type ResizableSizeMode = 'percentage' | 'pixels';\n\n\nexport interface ResizableGroupConfig {\n  direction: ResizableDirection;\n  panels: ResizablePanelConfig[];\n  storageKey?: string; // Optional localStorage key for persistence\n  sizeMode?: ResizableSizeMode; // Whether to use percentage or pixel-based sizing\n  limitToParent?: boolean; // Limit resizing to parent viewport bounds\n}\n\nexport interface ResizableGroupState {\n  direction: ResizableDirection;\n  panels: ResizablePanelState[];\n  containerSize: number; // Total container size in pixels\n  isResizing: boolean;\n  activeHandleId?: string;\n}\n\nexport interface ResizableEvents {\n  'panel-resize': (panelId: string, size: number) => void;\n  'panel-collapse': (panelId: string, collapsed: boolean) => void;\n  'resize-start': (handleId: string) => void;\n  'resize-end': (handleId: string) => void;\n}\n\n/**\n * Defines collapse behavior for a panel during space constraints.\n * Used to determine which panels collapse first when viewport shrinks.\n */\nexport interface CollapseRule {\n  /** Panel ID this rule applies to */\n  panelId: string;\n  /** Collapse priority - lower numbers collapse first */\n  priority: number;\n  /** Optional threshold that triggers collapse (overrides panel's userMinSize) */\n  minSizeBeforeCollapse?: ResizableSizeValue;\n}\n\n/**\n// ─── Defaults ─────────────────────────────────────────────────────────────\n\n/** Default panel size when no initialSize is specified (50% of container). */\nexport const DEFAULT_PANEL_SIZE = '50p';\n\n/** Minimum panel size in pixels below which a resize is rejected. */\nexport const MIN_PANEL_SIZE_PX = 10;\n\n/** Centers the 4px handle over the panel boundary. */\nexport const RESIZABLE_HANDLE_CENTER_OFFSET_PX = 2;\n\n// ─── Storage Adapter ───────────────────────────────────────────────────────\n\n/**\n * Interface for pluggable storage backends.\n * Implement this to persist panel layouts to Pinia, Vuex, IndexedDB, etc.\n * The built-in `localStorageAdapter(key)` factory creates a localStorage-backed adapter.\n */\nexport interface ResizableStorageAdapter {\n  /** Persist the current panel layout. */\n  save(data: ResizableStoragePanelData[]): void;\n  /** Load a previously saved layout. Returns null if nothing is stored. */\n  load(): ResizableStoragePanelData[] | null;\n  /** Remove all persisted data for this layout. */\n  clear(): void;\n}\n\n/**\n * Shape of a single panel's persisted data.\n * Intentionally minimal — only what's needed to restore a layout.\n */\nexport interface ResizableStoragePanelData {\n  id: string;\n  pixelSize: number;\n  collapsed?: boolean;\n  autoCollapsed?: boolean;\n  manualTargetRatio?: number;\n}\n\n// ─── Injection Context ──────────────────────────────────────────────────────\n// Single context object for provide/inject between ResizableGroup, Panel, Handle.\n\nexport interface ResizableContext {\n  // Reactive state\n  layout: ComputedRef<LayoutResult>;\n  panels: ComputedRef<ResizablePanelState[]>;\n  panelMap: ComputedRef<Map<string, ResizablePanelState>>;\n  direction: ComputedRef<ResizableDirection>;\n  containerSize: ComputedRef<number>;\n  containerElement: ComputedRef<HTMLElement | null>;\n  isResizing: ComputedRef<boolean>;\n  activeHandleId: ComputedRef<string | undefined>;\n  isInitializing: ComputedRef<boolean>;\n  messages: Record<string, string>;\n\n  // Offset (from fixed header/toolbar)\n  offsetHandleStyles: ComputedRef<Record<string, string>>;\n  offsetContentStyles: ComputedRef<Record<string, string>>;\n\n  // Operations\n  startResize: (handleId: string) => void;\n  resetPanels: (\n    beforePanelId?: string,\n    afterPanelId?: string,\n    behavior?: 'both' | 'before' | 'after' | 'all',\n  ) => void;\n  registerHandle: (instance: ComponentInternalInstance | null) => void;\n  unregisterHandle: (instance: ComponentInternalInstance | null) => void;\n  registerPanel: (config: ResizablePanelConfig) => void;\n  unregisterPanel: (id: string) => void;\n  saveToStorage: () => void;\n  announce: (message: string) => void;\n  collapsePanel: (panelId: string, collapsed: boolean) => void;\n  emitPanelResize: (panelId: string, size: number) => void;\n  commitPanelSize: (panelId: string, pixels: number) => void;\n  updateSavedPanel: (panelId: string, updates: Partial<ResizableStoragePanelData>) => void;\n}\n\nexport const RESIZABLE_CONTEXT_KEY: InjectionKey<ResizableContext> = Symbol('resizable-context');\n\n/**\n * Build a composite handle ID from the before and after panel IDs.\n * Handles use the format \"{beforePanelId}:{afterPanelId}\" throughout the system.\n */\nexport function buildHandleId(beforeId: string, afterId: string): string {\n  return `${beforeId}:${afterId}`;\n}\n","import type { ResizableSizeValue } from './ResizableConstants';\nimport { LAYOUT_SIZE_VALUES } from '@/common/constants';\n\n// ─── Layout Token Resolution ───────────────────────────────────────────────\n// Resolves Dialtone layout tokens (e.g., '500', '200', '8px') to pixel values.\n// Reads --dt-layout-{token} CSS custom properties at runtime to stay in sync\n// with the token pipeline. Falls back to a static map in environments where\n// CSS custom properties aren't available (tests, SSR).\n//\n// The size allowlist mirrors the shared Dialtone layout value set so the same\n// numeric label resolves to the same pixel size in DtBox, DtResizable, and the\n// `d-w-*` / `d-h-*` utility classes.\n\nconst LAYOUT_BASE_PX = 64;\nconst layoutSizeValueSet = new Set<string>(LAYOUT_SIZE_VALUES);\n\n/** Cache for resolved token pixel values (populated on first use). */\nconst tokenCache = new Map<string, number>();\n\n/** Root font size cache — read once from getComputedStyle. */\nlet cachedRootFontSize: number | null = null;\n\nfunction getRootFontSize(): number {\n  if (cachedRootFontSize !== null) return cachedRootFontSize;\n  if (typeof document !== 'undefined') {\n    cachedRootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10;\n  } else {\n    cachedRootFontSize = 10; // Dialtone default\n  }\n  return cachedRootFontSize;\n}\n\n/**\n * Resolve a Dialtone layout token to pixels via CSS custom properties.\n * Early-rejects tokens not in the shared layout token allowlist so the\n * accepted value set matches DtBox and the token pipeline.\n * Falls back to derived layout token values when CSS isn't available.\n */\nfunction resolveTokenPixels(token: string): number | undefined {\n  if (!isSizeToken(token)) return undefined;\n  if (tokenCache.has(token)) return tokenCache.get(token);\n\n  // Try runtime CSS resolution first so theme overrides propagate without rebuild\n  if (typeof document !== 'undefined') {\n    const cssValue = getComputedStyle(document.documentElement)\n      .getPropertyValue(`--dt-layout-${token}`)\n      .trim();\n\n    if (cssValue) {\n      const remMatch = cssValue.match(/^([\\d.]+)rem$/);\n      if (remMatch) {\n        const px = parseFloat(remMatch[1]) * getRootFontSize();\n        tokenCache.set(token, px);\n        return px;\n      }\n      const pxMatch = cssValue.match(/^([\\d.]+)px$/);\n      if (pxMatch) {\n        const px = parseFloat(pxMatch[1]);\n        tokenCache.set(token, px);\n        return px;\n      }\n    }\n  }\n\n  // Static fallback — kept for jsdom tests and SSR where CSS custom properties aren't loaded.\n  const px = getFallbackLayoutTokenPixels(token);\n  if (px === undefined) return undefined;\n\n  tokenCache.set(token, px);\n  return px;\n}\n\n/**\n * Static fallback resolution — mirrors the layout stop rule in\n * `packages/dialtone-css/postcss/constants.cjs`:\n * - '*px' values are literal off-scale pixels.\n * - numeric stops are scale-indexed on the 64px layout base.\n */\nfunction getFallbackLayoutTokenPixels(token: string): number | undefined {\n  if (token === '0') return 0;\n  if (token.endsWith('px')) return parseFloat(token);\n\n  const stop = Number(token);\n  if (!Number.isFinite(stop)) return undefined;\n\n  return (stop * LAYOUT_BASE_PX) / 100;\n}\n\n// ─── Percentage Resolution ─────────────────────────────────────────────────\n// Percentage tokens use a simple pattern: numeric value + 'p' suffix.\n\nfunction parsePercentage(value: string): number | undefined {\n  if (!value.endsWith('p')) return undefined;\n  const num = parseFloat(value.slice(0, -1));\n  return isFinite(num) && num >= 0 && num <= 100 ? num : undefined;\n}\n\n// ─── Token Helpers ──────────────────────────────────────────────────────────\n\nfunction isSizeToken(value: string): boolean {\n  return layoutSizeValueSet.has(value);\n}\n\nfunction isPercentageToken(value: string): boolean {\n  return parsePercentage(value) !== undefined;\n}\n\nexport function isValidSizing(value: string): boolean {\n  return isSizeToken(value) || isPercentageToken(value);\n}\n\nfunction parseSizingToPixels(value: string, containerSize: number): number | undefined {\n  const sizePixels = resolveTokenPixels(value);\n  if (sizePixels !== undefined) return sizePixels;\n\n  const percentage = parsePercentage(value);\n  if (percentage !== undefined) return (percentage / 100) * containerSize;\n\n  return undefined;\n}\n\n// ─── Public API ─────────────────────────────────────────────────────────────\n\nexport interface ParseSizeOptions {\n  /**\n   * When true, clamps the result to container size.\n   * Panels cannot exceed their parent container.\n   * @default true\n   */\n  clampToContainer?: boolean;\n}\n\n/**\n * Parses a ResizableSizeValue and returns the pixel value.\n * Handles layout tokens (e.g., '500') and percentage tokens (e.g., '50p').\n *\n * Layout tokens resolve from --dt-layout-{token} CSS custom properties at\n * runtime, falling back to a static map in test/SSR environments.\n *\n * @param value - Layout token or percentage token\n * @param containerSize - Container size in pixels\n * @param options - Optional configuration\n * @returns Pixel value, clamped to container by default\n *\n * @example\n * parseSizeToPixels('500', 1000)  // Returns 320 (from --dt-layout-500)\n * parseSizeToPixels('50p', 1000)  // Returns 500 (50% of 1000)\n * parseSizeToPixels('1600', 1000) // Returns 1000 (clamped from 1024px)\n */\nexport function parseSizeToPixels(\n  value: ResizableSizeValue,\n  containerSize: number,\n  options?: ParseSizeOptions\n): number {\n  const { clampToContainer = true } = options ?? {};\n  const validatedContainerSize = validateContainerSize(containerSize);\n\n  if (isCollapsedPanel(validatedContainerSize, value)) {\n    return 0;\n  }\n\n  const calculationContainerSize = validatedContainerSize === 0 ? 1000 : validatedContainerSize;\n\n  if (typeof value === 'string') {\n    const result = parseSizingToPixels(value, calculationContainerSize);\n    if (result === undefined) return warnInvalidSizeValue(value);\n\n    return validatePixelResult(result, value, validatedContainerSize, clampToContainer);\n  }\n\n  return warnInvalidSizeValue(value);\n}\n\nfunction warnInvalidSizeValue(value: ResizableSizeValue): 0 {\n  console.warn(\n    `[resizable] Invalid ResizableSizeValue: ${value}. Expected a size token or percentage with 'p' suffix.`,\n  );\n  return 0;\n}\n\nexport function validateContainerSize(containerSize: number): number {\n  if (!isFinite(containerSize) || containerSize < 0) {\n    console.warn(`[resizable] Invalid containerSize: ${containerSize}. Using fallback value of 1000px.`);\n    return 1000;\n  }\n\n  if (containerSize > 10000) {\n    console.warn(`[resizable] Unusually large containerSize: ${containerSize}px. Capping at 10000px.`);\n    return 10000;\n  }\n\n  return containerSize;\n}\n\nfunction isCollapsedPanel(containerSize: number, value: ResizableSizeValue): boolean {\n  return containerSize === 0 && value === '0';\n}\n\nfunction validatePixelResult(\n  result: number,\n  value: ResizableSizeValue,\n  containerSize: number,\n  clampToContainer: boolean\n): number {\n  if (!isFinite(result) || result < 0) {\n    console.warn(\n      `[resizable] Invalid pixel calculation result: ${result} for value: ${value}, containerSize: ${containerSize}`\n    );\n    return 0;\n  }\n\n  if (clampToContainer && containerSize > 0 && result > containerSize) {\n    console.warn(\n      `[resizable] Size value '${value}' (${result}px) exceeds container (${containerSize}px). Clamping to container.`\n    );\n    return containerSize;\n  }\n\n  return result;\n}\n\nexport function isPercentageValue(value: ResizableSizeValue): boolean {\n  return isPercentageToken(value);\n}\n\nexport function isCSSValue(value: ResizableSizeValue): boolean {\n  return isSizeToken(value);\n}\n\nexport function pixelsToPercentage(pixels: number, containerSize: number): number {\n  return (pixels / containerSize) * 100;\n}\n\n/**\n * Checks if a panel's userMinSize is percentage-based (e.g., '50p').\n */\nexport function hasPercentageMinSize(panel: { userMinSize?: ResizableSizeValue }): boolean {\n  if (!panel.userMinSize) return false;\n  return isPercentageToken(panel.userMinSize);\n}\n\n/**\n * Invalidate the token cache. Call when the theme changes or\n * when token values may have been updated at runtime.\n */\nexport function invalidateTokenCache(): void {\n  tokenCache.clear();\n  cachedRootFontSize = null;\n}\n"],"mappings":"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"}