@weasel-js/ui 1.3.0-pre.0 → 1.3.0

package/dist/chunks/useReorderDragList-RSJqj18B.js

@@ -0,0 +1,109 @@
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region src/useReorderDragList.ts
+function r(e, t) {
+	let n = 0;
+	for (let r = t - 1; r >= 0; r--) if (e[r]?.locked) {
+		n = r + 1;
+		break;
+	}
+	let r = e.length;
+	for (let n = t + 1; n < e.length; n++) if (e[n]?.locked) {
+		r = n;
+		break;
+	}
+	return [n, r];
+}
+function i(i) {
+	let { threshold: a = 4 } = i, o = t(i);
+	o.current = i;
+	let s = t(null), c = t(null), l = t(null), [u, d] = n({
+		draggedIds: null,
+		targetIndex: null
+	}), f = e((e, t) => {
+		let [n, i] = r(o.current.items, t), a = s.current;
+		if (!a) return n;
+		let c = Array.from(a.children), l = c.length;
+		for (let t = 0; t < c.length; t++) {
+			let n = c[t];
+			if (n && e < n.getBoundingClientRect().bottom) {
+				l = t;
+				break;
+			}
+		}
+		return Math.max(n, Math.min(l, i));
+	}, []), p = e((e) => {
+		s.current = e;
+	}, []), m = e((e, t, n) => {
+		if (!o.current.items[t]?.locked) {
+			try {
+				n.currentTarget.setPointerCapture?.(n.pointerId);
+			} catch {}
+			c.current = {
+				id: e,
+				sourceIndex: t,
+				startX: n.clientX,
+				startY: n.clientY,
+				pointerId: n.pointerId
+			};
+		}
+	}, []), h = e(() => {
+		c.current = null, l.current = null, d({
+			draggedIds: null,
+			targetIndex: null
+		});
+	}, []);
+	return {
+		rowProps: (e, t) => ({ onPointerDown: (n) => m(e, t, n) }),
+		containerProps: {
+			ref: p,
+			onPointerMove: e((e) => {
+				let t = l.current;
+				if (t) {
+					let n = f(e.clientY, t.sourceIndex);
+					n !== t.targetIndex && (t.targetIndex = n, d({
+						draggedIds: t.draggedIds,
+						targetIndex: n
+					}));
+					return;
+				}
+				let n = c.current;
+				if (!n) return;
+				let i = e.clientX - n.startX, s = e.clientY - n.startY;
+				if (Math.hypot(i, s) < a) return;
+				let u = o.current.selectedIds, p = u.includes(n.id), [m, h] = r(o.current.items, n.sourceIndex), g = (p ? [...u] : [n.id]).filter((e) => {
+					let t = o.current.items.findIndex((t) => t.id === e);
+					return t >= m && t < h;
+				}), _ = f(e.clientY, n.sourceIndex);
+				l.current = {
+					...n,
+					draggedIds: g,
+					targetIndex: _
+				}, d({
+					draggedIds: g,
+					targetIndex: _
+				});
+			}, [f, a]),
+			onPointerUp: e((e) => {
+				let t = l.current;
+				if (!t) {
+					h();
+					return;
+				}
+				let n = f(e.clientY, t.sourceIndex), r = o.current.items, i = t.draggedIds.map((e) => r.findIndex((t) => t.id === e)).filter((e) => e >= 0).sort((e, t) => e - t), a = i.length > 0 && i.every((e, t) => {
+					if (t === 0) return !0;
+					let n = i[t - 1];
+					return n !== void 0 && e === n + 1;
+				}), s = i[0], c = i[i.length - 1];
+				a && s !== void 0 && c !== void 0 && n >= s && n <= c + 1 || o.current.onReorder(t.draggedIds, n), h();
+			}, [f, h]),
+			onPointerCancel: e(() => {
+				h();
+			}, [h])
+		},
+		state: u
+	};
+}
+//#endregion
+export { i as t };
+
+//# sourceMappingURL=useReorderDragList-RSJqj18B.js.map

package/dist/chunks/useReorderDragList-RSJqj18B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReorderDragList-RSJqj18B.js","names":[],"sources":["../../src/useReorderDragList.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { ReactNode, PointerEvent as ReactPointerEvent, RefCallback } from 'react';\n\n/** One row in a reorderable list. */\nexport interface LayerListItem {\n  id: string;\n  label: ReactNode;\n  /** Locked rows cannot be dragged, cannot be crossed by drops, and\n   *  never combine with other rows in a multi-selection. */\n  locked?: boolean;\n  /** Optional color swatch rendered before the label. Any CSS color string. */\n  swatch?: string;\n}\n\n/**\n * Options for {@link useReorderDragList}. `onReorder` receives the dragged ids\n * and the index they were dropped at, measured against the pre-drag `items`.\n */\nexport interface UseReorderDragListOptions {\n  items: LayerListItem[];\n  selectedIds: string[];\n  onReorder(ids: string[], targetIndex: number): void;\n  /** Pointer-move distance (px) before pending drag engages. Default 4. */\n  threshold?: number;\n}\n\n/**\n * Live drag state for rendering feedback: which ids are being dragged and the\n * insertion index the drop would use. Both `null` when no drag is engaged.\n */\nexport interface ReorderDragState {\n  draggedIds: string[] | null;\n  targetIndex: number | null;\n}\n\n/**\n * Props to spread onto the list container and each row, plus the live\n * {@link ReorderDragState}.\n */\nexport interface ReorderDragHandlers {\n  rowProps(id: string, index: number): { onPointerDown(e: ReactPointerEvent): void };\n  containerProps: {\n    ref: RefCallback<HTMLElement>;\n    onPointerMove(e: ReactPointerEvent): void;\n    onPointerUp(e: ReactPointerEvent): void;\n    onPointerCancel(e: ReactPointerEvent): void;\n  };\n  state: ReorderDragState;\n}\n\ninterface PendingState {\n  id: string;\n  sourceIndex: number;\n  startX: number;\n  startY: number;\n  pointerId: number;\n}\n\ninterface ActiveState extends PendingState {\n  draggedIds: string[];\n  targetIndex: number;\n}\n\n/**\n * The half-open run of indices a row at `sourceIndex` may be dropped into:\n * bounded by the nearest locked row above and below it, so a locked row is a\n * wall in both directions rather than a global ceiling.\n */\nfunction unlockedSegment(items: readonly LayerListItem[], sourceIndex: number): [number, number] {\n  let lo = 0;\n  for (let i = sourceIndex - 1; i >= 0; i--) {\n    if (items[i]?.locked) { lo = i + 1; break; }\n  }\n  let hi = items.length;\n  for (let i = sourceIndex + 1; i < items.length; i++) {\n    if (items[i]?.locked) { hi = i; break; }\n  }\n  return [lo, hi];\n}\n\n/**\n * Drag-to-reorder for a vertical list of rows. Dragging a row that is part of\n * the current selection drags the whole selection; dragging any other row\n * drags just that row. Locked rows can neither be dragged nor crossed by a\n * drop. A drop that would leave a contiguous block where it already is does\n * not call `onReorder`.\n *\n * The pointer is captured on the row, so a drag that leaves the list still\n * tracks and still releases cleanly.\n */\nexport function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers {\n  const { threshold = 4 } = opts;\n  const optsRef = useRef(opts);\n  optsRef.current = opts;\n  const containerRef = useRef<HTMLElement | null>(null);\n  const pendingRef = useRef<PendingState | null>(null);\n  const activeRef = useRef<ActiveState | null>(null);\n  const [state, setState] = useState<ReorderDragState>({ draggedIds: null, targetIndex: null });\n\n  const computeTargetIndex = useCallback((clientY: number, sourceIndex: number): number => {\n    const [lo, hi] = unlockedSegment(optsRef.current.items, sourceIndex);\n    const c = containerRef.current;\n    if (!c) return lo;\n    const rows = Array.from(c.children) as HTMLElement[];\n    let raw = rows.length;\n    for (let i = 0; i < rows.length; i++) {\n      const row = rows[i];\n      if (!row) continue;\n      const r = row.getBoundingClientRect();\n      if (clientY < r.bottom) { raw = i; break; }\n    }\n    return Math.max(lo, Math.min(raw, hi));\n  }, []);\n\n  const refCb = useCallback<RefCallback<HTMLElement>>((el) => {\n    containerRef.current = el;\n  }, []);\n\n  const onPointerDownRow = useCallback((id: string, index: number, e: ReactPointerEvent) => {\n    // Locked items cannot be dragged — skip recording the pending state so\n    // pointer-move cannot engage. Plain click still works because LayerList\n    // tracks click intent in its own ref, separate from drag candidacy.\n    const item = optsRef.current.items[index];\n    if (item?.locked) return;\n    // Capture the pointer to the row so subsequent move/up events keep firing\n    // (on the row, bubbling to the container) even when the user drags\n    // outside the list's bounding box. Without capture, releasing outside\n    // the container leaves the drag state stuck because pointerup fires on\n    // the document, not the list.\n    try { (e.currentTarget as Element).setPointerCapture?.(e.pointerId); } catch { /* unsupported / already captured */ }\n    pendingRef.current = {\n      id,\n      sourceIndex: index,\n      startX: e.clientX,\n      startY: e.clientY,\n      pointerId: e.pointerId,\n    };\n  }, []);\n\n  const reset = useCallback(() => {\n    pendingRef.current = null;\n    activeRef.current = null;\n    setState({ draggedIds: null, targetIndex: null });\n  }, []);\n\n  const onPointerMove = useCallback((e: ReactPointerEvent) => {\n    const active = activeRef.current;\n    if (active) {\n      const targetIndex = computeTargetIndex(e.clientY, active.sourceIndex);\n      if (targetIndex !== active.targetIndex) {\n        active.targetIndex = targetIndex;\n        setState({ draggedIds: active.draggedIds, targetIndex });\n      }\n      return;\n    }\n    const pending = pendingRef.current;\n    if (!pending) return;\n    const dx = e.clientX - pending.startX;\n    const dy = e.clientY - pending.startY;\n    if (Math.hypot(dx, dy) < threshold) return;\n    // Engage.\n    const selected = optsRef.current.selectedIds;\n    const inSelection = selected.includes(pending.id);\n    const [lo, hi] = unlockedSegment(optsRef.current.items, pending.sourceIndex);\n    const draggedIds = (inSelection ? [...selected] : [pending.id]).filter((id) => {\n      const i = optsRef.current.items.findIndex((it) => it.id === id);\n      return i >= lo && i < hi;\n    });\n    const targetIndex = computeTargetIndex(e.clientY, pending.sourceIndex);\n    activeRef.current = { ...pending, draggedIds, targetIndex };\n    setState({ draggedIds, targetIndex });\n  }, [computeTargetIndex, threshold]);\n\n  const onPointerUp = useCallback((e: ReactPointerEvent) => {\n    const active = activeRef.current;\n    if (!active) {\n      reset();\n      return;\n    }\n    const targetIndex = computeTargetIndex(e.clientY, active.sourceIndex);\n    // Skip no-op: target lands inside the dragged-ids contiguous block.\n    const items = optsRef.current.items;\n    const indices = active.draggedIds\n      .map((id) => items.findIndex((it) => it.id === id))\n      .filter((i) => i >= 0)\n      .sort((a, b) => a - b);\n    const isContiguous =\n      indices.length > 0 &&\n      indices.every((v, i) => {\n        if (i === 0) return true;\n        const prev = indices[i - 1];\n        return prev !== undefined && v === prev + 1;\n      });\n    const first = indices[0];\n    const last = indices[indices.length - 1];\n    const wouldBeNoop =\n      isContiguous &&\n      first !== undefined &&\n      last !== undefined &&\n      targetIndex >= first &&\n      targetIndex <= last + 1;\n    if (!wouldBeNoop) {\n      optsRef.current.onReorder(active.draggedIds, targetIndex);\n    }\n    reset();\n  }, [computeTargetIndex, reset]);\n\n  const onPointerCancel = useCallback(() => {\n    reset();\n  }, [reset]);\n\n  return {\n    rowProps: (id, index) => ({\n      onPointerDown: (e) => onPointerDownRow(id, index, e),\n    }),\n    containerProps: {\n      ref: refCb,\n      onPointerMove,\n      onPointerUp,\n      onPointerCancel,\n    },\n    state,\n  };\n}\n"],"mappings":"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"}

package/dist/chunks/{useRovingTabIndex-CQz8EiKh.js → useRovingTabIndex-CuUl6DLF.js}

@@ -62,4 +62,4 @@ function a(a) {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=useRovingTabIndex-CQz8EiKh.js.map
+//# sourceMappingURL=useRovingTabIndex-CuUl6DLF.js.map

package/dist/chunks/{useRovingTabIndex-CQz8EiKh.js.map → useRovingTabIndex-CuUl6DLF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useRovingTabIndex-CQz8EiKh.js","names":[],"sources":["../../src/useRovingTabIndex.ts"],"sourcesContent":["import { useRef, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';\n\n/** The only thing the hook needs to know about a bar's items: which are\n *  skipped by arrow navigation. */\nexport type RovingItem = { disabled?: boolean };\n\n/** Options for {@link useRovingTabIndex}. */\nexport type UseRovingTabIndexOptions = {\n  /** In the same order as the elements carrying `itemClassName`. */\n  items: readonly RovingItem[];\n  /** Class on the focusable element of each item, inside the container the\n   *  returned `rootRef` is attached to. Their DOM order must match `items`. */\n  itemClassName: string;\n  /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a\n   *  radiogroup-style bar passes its selected index so Tab lands on the\n   *  current value. */\n  tabStopIndex?: number;\n  /** Called with the new index as arrow/Home/End focus moves, before focus\n   *  moves. This is where a selection-follows-focus bar commits the value. */\n  onNavigate?: (index: number) => void;\n  /** Space/Enter on the item at `index`. When omitted the keypress is left\n   *  alone, which on a native `<button>` produces an ordinary click. */\n  onActivate?: (index: number) => void;\n};\n\n/**\n * What {@link useRovingTabIndex} returns: a container ref plus the per-item\n * `tabIndex` and `onKeyDown` values to spread onto each item.\n */\nexport type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {\n  /** Attach to the container element that holds the items. */\n  rootRef: RefObject<T | null>;\n  /** `tabIndex` value for the item at `index`. */\n  tabIndexFor: (index: number) => 0 | -1;\n  /** `onKeyDown` for the item at `index`. */\n  onKeyDown: (index: number) => (e: ReactKeyboardEvent<HTMLElement>) => void;\n};\n\nfunction firstEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = 0; i < items.length; i++) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction lastEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction nextEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from + k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\nfunction prevEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from - k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\n/**\n * Roving tabindex for a bar of items: one item is in the tab order, and the\n * arrow keys move focus among the rest, skipping disabled ones and wrapping\n * at both ends. Home and End go to the first and last enabled item. Both axes\n * navigate, so the same bar works laid out either way.\n *\n * Backs `ActionsBar`, `OptionsBar`, and `ToggleBar`.\n *\n * **When a bar should not use this.** Only when the bar owns its items. A\n * container of arbitrary compound controls — a number field, a select, a\n * color field — must leave the arrow keys alone, because those controls edit\n * their own value with them; taking the arrows over would break the control\n * to navigate between controls. `ToolOptionsBar` is that case and keeps plain\n * DOM tab order. A bar whose items are all simple buttons is the case this\n * hook is for.\n *\n * With every item disabled there is no tab stop and the bar drops out of the\n * tab order entirely.\n */\nexport function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(\n  options: UseRovingTabIndexOptions,\n): RovingTabIndex<T> {\n  const { items, itemClassName, onNavigate, onActivate } = options;\n  const rootRef = useRef<T | null>(null);\n\n  const tabStopIndex = options.tabStopIndex ?? firstEnabledIndex(items);\n\n  const focusItem = (index: number): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const elements = root.querySelectorAll<HTMLElement>(`.${itemClassName}`);\n    elements[index]?.focus();\n  };\n\n  const onKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLElement>): void => {\n    let nextIndex = -1;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        nextIndex = prevEnabledIndex(items, index);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        nextIndex = nextEnabledIndex(items, index);\n        break;\n      case 'Home':\n        nextIndex = firstEnabledIndex(items);\n        break;\n      case 'End':\n        nextIndex = lastEnabledIndex(items);\n        break;\n      case ' ':\n      case 'Enter':\n        if (onActivate) {\n          e.preventDefault();\n          onActivate(index);\n        }\n        return;\n      default:\n        return;\n    }\n    if (nextIndex < 0 || nextIndex === index) return;\n    e.preventDefault();\n    onNavigate?.(nextIndex);\n    focusItem(nextIndex);\n  };\n\n  return {\n    rootRef,\n    tabIndexFor: (index: number) => (index === tabStopIndex ? 0 : -1),\n    onKeyDown,\n  };\n}\n"],"mappings":";;AAsCA,SAAS,EAAkB,GAAsC;AAC/D,MAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AACtE,QAAO;;AAGT,SAAS,EAAiB,GAAsC;AAC9D,MAAK,IAAI,IAAI,EAAM,SAAS,GAAG,KAAK,GAAG,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AAC3E,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAsBT,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,UAAO,kBAAe,eAAY,kBAAe,GACnD,IAAU,EAAiB,KAAK,EAEhC,IAAe,EAAQ,gBAAgB,EAAkB,EAAM,EAE/D,KAAa,MAAwB;EACzC,IAAM,IAAO,EAAQ;AAChB,OACY,EAAK,iBAA8B,IAAI,IACxD,CAAS,IAAQ,OAAO;;AAoC1B,QAAO;EACL;EACA,cAAc,MAAmB,MAAU,IAAe,IAAI;EAC9D,YApCiB,OAAmB,MAA6C;GACjF,IAAI,IAAY;AAChB,WAAQ,EAAE,KAAV;IACE,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;AACH,SAAY,EAAkB,EAAM;AACpC;IACF,KAAK;AACH,SAAY,EAAiB,EAAM;AACnC;IACF,KAAK;IACL,KAAK;AACH,KAAI,MACF,EAAE,gBAAgB,EAClB,EAAW,EAAM;AAEnB;IACF,QACE;;AAEA,OAAY,KAAK,MAAc,MACnC,EAAE,gBAAgB,EAClB,IAAa,EAAU,EACvB,EAAU,EAAU;;EAOrB"}
+{"version":3,"file":"useRovingTabIndex-CuUl6DLF.js","names":[],"sources":["../../src/useRovingTabIndex.ts"],"sourcesContent":["import { useRef, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';\n\n/** The only thing the hook needs to know about a bar's items: which are\n *  skipped by arrow navigation. */\nexport type RovingItem = { disabled?: boolean };\n\n/** Options for {@link useRovingTabIndex}. */\nexport type UseRovingTabIndexOptions = {\n  /** In the same order as the elements carrying `itemClassName`. */\n  items: readonly RovingItem[];\n  /** Class on the focusable element of each item, inside the container the\n   *  returned `rootRef` is attached to. Their DOM order must match `items`. */\n  itemClassName: string;\n  /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a\n   *  radiogroup-style bar passes its selected index so Tab lands on the\n   *  current value. */\n  tabStopIndex?: number;\n  /** Called with the new index as arrow/Home/End focus moves, before focus\n   *  moves. This is where a selection-follows-focus bar commits the value. */\n  onNavigate?: (index: number) => void;\n  /** Space/Enter on the item at `index`. When omitted the keypress is left\n   *  alone, which on a native `<button>` produces an ordinary click. */\n  onActivate?: (index: number) => void;\n};\n\n/**\n * What {@link useRovingTabIndex} returns: a container ref plus the per-item\n * `tabIndex` and `onKeyDown` values to spread onto each item.\n */\nexport type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {\n  /** Attach to the container element that holds the items. */\n  rootRef: RefObject<T | null>;\n  /** `tabIndex` value for the item at `index`. */\n  tabIndexFor: (index: number) => 0 | -1;\n  /** `onKeyDown` for the item at `index`. */\n  onKeyDown: (index: number) => (e: ReactKeyboardEvent<HTMLElement>) => void;\n};\n\nfunction firstEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = 0; i < items.length; i++) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction lastEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction nextEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from + k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\nfunction prevEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from - k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\n/**\n * Roving tabindex for a bar of items: one item is in the tab order, and the\n * arrow keys move focus among the rest, skipping disabled ones and wrapping\n * at both ends. Home and End go to the first and last enabled item. Both axes\n * navigate, so the same bar works laid out either way.\n *\n * Backs `ActionsBar`, `OptionsBar`, and `ToggleBar`.\n *\n * **When a bar should not use this.** Only when the bar owns its items. A\n * container of arbitrary compound controls — a number field, a select, a\n * color field — must leave the arrow keys alone, because those controls edit\n * their own value with them; taking the arrows over would break the control\n * to navigate between controls. `ToolOptionsBar` is that case and keeps plain\n * DOM tab order. A bar whose items are all simple buttons is the case this\n * hook is for.\n *\n * With every item disabled there is no tab stop and the bar drops out of the\n * tab order entirely.\n */\nexport function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(\n  options: UseRovingTabIndexOptions,\n): RovingTabIndex<T> {\n  const { items, itemClassName, onNavigate, onActivate } = options;\n  const rootRef = useRef<T | null>(null);\n\n  const tabStopIndex = options.tabStopIndex ?? firstEnabledIndex(items);\n\n  const focusItem = (index: number): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const elements = root.querySelectorAll<HTMLElement>(`.${itemClassName}`);\n    elements[index]?.focus();\n  };\n\n  const onKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLElement>): void => {\n    let nextIndex = -1;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        nextIndex = prevEnabledIndex(items, index);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        nextIndex = nextEnabledIndex(items, index);\n        break;\n      case 'Home':\n        nextIndex = firstEnabledIndex(items);\n        break;\n      case 'End':\n        nextIndex = lastEnabledIndex(items);\n        break;\n      case ' ':\n      case 'Enter':\n        if (onActivate) {\n          e.preventDefault();\n          onActivate(index);\n        }\n        return;\n      default:\n        return;\n    }\n    if (nextIndex < 0 || nextIndex === index) return;\n    e.preventDefault();\n    onNavigate?.(nextIndex);\n    focusItem(nextIndex);\n  };\n\n  return {\n    rootRef,\n    tabIndexFor: (index: number) => (index === tabStopIndex ? 0 : -1),\n    onKeyDown,\n  };\n}\n"],"mappings":";;AAsCA,SAAS,EAAkB,GAAsC;AAC/D,MAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AACtE,QAAO;;AAGT,SAAS,EAAiB,GAAsC;AAC9D,MAAK,IAAI,IAAI,EAAM,SAAS,GAAG,KAAK,GAAG,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AAC3E,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAsBT,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,UAAO,kBAAe,eAAY,kBAAe,GACnD,IAAU,EAAiB,KAAK,EAEhC,IAAe,EAAQ,gBAAgB,EAAkB,EAAM,EAE/D,KAAa,MAAwB;EACzC,IAAM,IAAO,EAAQ;AAChB,OACY,EAAK,iBAA8B,IAAI,IACxD,CAAS,IAAQ,OAAO;;AAoC1B,QAAO;EACL;EACA,cAAc,MAAmB,MAAU,IAAe,IAAI;EAC9D,YApCiB,OAAmB,MAA6C;GACjF,IAAI,IAAY;AAChB,WAAQ,EAAE,KAAV;IACE,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;AACH,SAAY,EAAkB,EAAM;AACpC;IACF,KAAK;AACH,SAAY,EAAiB,EAAM;AACnC;IACF,KAAK;IACL,KAAK;AACH,KAAI,MACF,EAAE,gBAAgB,EAClB,EAAW,EAAM;AAEnB;IACF,QACE;;AAEA,OAAY,KAAK,MAAc,MACnC,EAAE,gBAAgB,EAClB,IAAa,EAAU,EACvB,EAAU,EAAU;;EAOrB"}

package/dist/components/ActionsBar/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/ActionsBar-gTuCtkv8.js";
+import { t as e } from "../../chunks/ActionsBar-CBi_dV4B.js";
 export { e as ActionsBar };

package/dist/components/BandEditor/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../../chunks/BandEditor-DKbcHG2_.js";
+import { n as e, r as t, t as n } from "../../chunks/BandEditor-DeE-Nhyh.js";
 export { n as BandEditor, e as linearScale, t as logScale };

package/dist/components/Callout/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/Callout-CHs98djt.js";
+import { n as e, t } from "../../chunks/Callout-CxDNb9iE.js";
 export { t as Callout, e as CalloutTrigger };

package/dist/components/Checkbox/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/Checkbox-BLEw-wEb.js";
+import { t as e } from "../../chunks/Checkbox-Chtrlh19.js";
 export { e as Checkbox };

package/dist/components/ColorField/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/ColorField-D1t-BdSa.js";
+import { t as e } from "../../chunks/ColorField-CSSRv3jG.js";
 export { e as ColorField };

package/dist/components/ComboBox/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/ComboBox-cvdKolWv.js";
+import { n as e, t } from "../../chunks/ComboBox-BIQ8KP4h.js";
 export { t as ComboBox, e as ComboBoxItem };

package/dist/components/CurveEditor/index.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../../chunks/CurveEditor-BaA-PabB.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../chunks/CurveEditor-DiJk0NhK.js";
 export { n as CurveEditor, i as LayeredCurveEditor, t as createFunctionLayer, a as createSetCurveOp, e as functionLayerState, r as sampleByInterpolation };

package/dist/components/DataGrid/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/DataGrid-D15I779H.js";
+import { t as e } from "../../chunks/DataGrid-BgiEYBLo.js";
 export { e as DataGrid };

package/dist/components/Dialog/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/Dialog-DC1x46Sq.js";
+import { t as e } from "../../chunks/Dialog-RzrboT4Q.js";
 export { e as Dialog };

package/dist/components/DragHandleGlyph/DragHandleGlyph.d.ts

@@ -0,0 +1,12 @@
+/** Props for `<DragHandleGlyph>`. */
+export interface DragHandleGlyphProps {
+    /** Height in px; width scales with it. Default 16. */
+    size?: number;
+}
+/** The two-column dot grip used on anything draggable by a handle.
+ *
+ *  Deliberately not part of the icon register: that register is outline strokes
+ *  at a fixed weight, and a grip is filled dots. Forcing it in would either
+ *  break the register's rule or produce a worse glyph. */
+export declare function DragHandleGlyph({ size }: DragHandleGlyphProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DragHandleGlyph.d.ts.map

package/dist/components/DragHandleGlyph/DragHandleGlyph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandleGlyph.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandleGlyph/DragHandleGlyph.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;0DAI0D;AAC1D,wBAAgB,eAAe,CAAC,EAAE,IAAS,EAAE,EAAE,oBAAoB,2CAiBlE"}

package/dist/components/DragHandleGlyph/index.d.ts

@@ -0,0 +1,3 @@
+export type { DragHandleGlyphProps } from './DragHandleGlyph';
+export { DragHandleGlyph } from './DragHandleGlyph';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DragHandleGlyph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DragHandleGlyph/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/DragHandleGlyph/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../chunks/DragHandleGlyph-CJbzRigu.js";
+export { e as DragHandleGlyph };

package/dist/components/Field/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/Field-BjFl_yng.js";
+import { n as e, t } from "../../chunks/Field-DrRby9vo.js";
 export { t as Field, e as fieldClasses };

package/dist/components/GradientEditor/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../../chunks/GradientEditor-BJRD0n1g.js";
+import { n as e, r as t, t as n } from "../../chunks/GradientEditor-BuVR6pt-.js";
 export { t as GradientEditor, e as GradientHandles, n as SceneGradientHandles };

package/dist/components/InlineRange/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/InlineRange-C6UYKxLD.js";
+import { t as e } from "../../chunks/InlineRange-B-Jkv8AA.js";
 export { e as InlineRange };

package/dist/components/Input/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/Input-DhWBgpRx.js";
+import { t as e } from "../../chunks/Input-BnxOPY4N.js";
 export { e as Input };

package/dist/components/Keycaps/index.js

@@ -1,3 +1,3 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../../chunks/Keycaps-BhCKdyws.js";
-import { t as o } from "../../chunks/keyGlyph-DNpLxF8u.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../chunks/Keycaps-Dk33JOiH.js";
+import { t as o } from "../../chunks/keyGlyph-D3X08tSp.js";
 export { e as KeyCap, t as KeySequence, a as detectPlatform, r as inferKeycapKind, o as keyGlyph, n as keySpecFromKey, i as keySpecsFromMods };

package/dist/components/LayerStack/LayerStack.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+/** One card in a layer stack: its identity, the label shown when collapsed,
+ *  and the optional select hoisted into its header. */
+export interface LayerStackItem {
+    /** Stable id used for keys, onRemove, onReorder. Numeric to match
+     *  common id-from-nextId conventions; string ids also work. */
+    id: number | string;
+    /** Short kind label rendered in the header when no primary select
+     *  is hoisted (e.g. "shadow", "stroke"). */
+    kind: string;
+    /** When present, hoist this select into the card header so the user
+     *  can switch mode/shape without expanding. */
+    primaryValue?: string;
+    primaryOptions?: string[];
+    /** Accent CSS color used as the left border / index-badge fill. Sets
+     *  --wzl-layer-stack-accent on the card, which re-binds --wzl-accent
+     *  for everything inside it. */
+    accent?: string;
+    /** Optional badge text rendered before the primary control
+     *  (e.g. tail index "1", "2", "3"). When omitted a drag handle
+     *  glyph renders in its place. */
+    badge?: string;
+    /** Initial expanded state. Defaults to true for newly-added items. */
+    defaultExpanded?: boolean;
+}
+/** Props for `<LayerStack>`. */
+export interface LayerStackProps {
+    title: string;
+    items: LayerStackItem[];
+    /** Kinds the user can add via the header palette. */
+    paletteKinds: string[];
+    onAdd: (kind: string) => void;
+    onRemove: (id: number | string) => void;
+    onReorder: (orderedIds: Array<number | string>) => void;
+    onPrimaryChange: (id: number | string, nextValue: string) => void;
+    /** Render the body controls for each item. */
+    renderBody: (item: LayerStackItem) => ReactNode;
+    /** Hide the title + palette row (used when an outer wrap renders its
+     *  own head — see speech-balloons Tails panel). */
+    hideHead?: boolean;
+    /** Appended to the root element's class list. The module's own class names
+     *  are hashed, so this is the supported way to reach the stack from a
+     *  consumer stylesheet. */
+    className?: string;
+}
+/** A drag-reorderable stack of expandable cards, with a palette in the header
+ *  for adding more. The body of each card is the caller's to render. */
+export declare function LayerStack({ className, title, items, paletteKinds, onAdd, onRemove, onReorder, onPrimaryChange, renderBody, hideHead, }: LayerStackProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LayerStack.d.ts.map

package/dist/components/LayerStack/LayerStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerStack.d.ts","sourceRoot":"","sources":["../../../src/components/LayerStack/LayerStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAyC,MAAM,OAAO,CAAC;AAMlG;uDACuD;AACvD,MAAM,WAAW,cAAc;IAC7B;mEAC+D;IAC/D,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB;gDAC4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb;mDAC+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;oCAEgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;sCAEkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,gCAAgC;AAChC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,qDAAqD;IACrD,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,8CAA8C;IAC9C,UAAU,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,SAAS,CAAC;IAChD;uDACmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;+BAE2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;wEACwE;AACxE,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,eAAe,EACf,UAAU,EACV,QAAQ,GACT,EAAE,eAAe,2CAsJjB"}

package/dist/components/LayerStack/index.d.ts

@@ -0,0 +1,2 @@
+export { LayerStack, type LayerStackItem, type LayerStackProps } from './LayerStack';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LayerStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LayerStack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/LayerStack/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../chunks/LayerStack-DQYvGNPA.js";
+export { e as LayerStack };

package/dist/components/NumberField/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/NumberField-ZdVa4bpJ.js";
+import { t as e } from "../../chunks/NumberField-BQ-KaK7T.js";
 export { e as NumberField };

package/dist/components/OptionsBar/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/OptionsBar-DahCI4Aq.js";
+import { t as e } from "../../chunks/OptionsBar-BecAPCID.js";
 export { e as OptionsBar };

package/dist/components/PaintInput/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/PaintInput-Cggm9OIl.js";
+import { t as e } from "../../chunks/PaintInput-K5W4Uho3.js";
 export { e as PaintInput };

package/dist/components/PatternPicker/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/PatternPicker-B63SlDoF.js";
+import { n as e, t } from "../../chunks/PatternPicker-BdLSj_f_.js";
 export { t as PatternPicker, e as seedPattern };

package/dist/components/Plot2D/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../../chunks/Plot2D-sPXTw_-l.js";
+import { n as e, r as t, t as n } from "../../chunks/Plot2D-BEjpJhk-.js";
 export { n as Plot2D, e as modelToPlot, t as plotToModel };

package/dist/components/PointPlotter/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/PointPlotter-CLd9u5Bq.js";
+import { t as e } from "../../chunks/PointPlotter-C_tZb122.js";
 export { e as PointPlotter };

package/dist/components/Powerline/index.js

@@ -1,3 +1,3 @@
 import { n as e } from "../../chunks/Badge-9dPfvYOk.js";
-import { t } from "../../chunks/Powerline-DhQJYaUg.js";
+import { t } from "../../chunks/Powerline-Cc-Av8Pc.js";
 export { e as EDGE_PROFILES, t as Powerline };

package/dist/components/Prefs/index.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "../../chunks/Prefs-BSJ0lMmJ.js";
+import { a as e, i as t, n, r, t as i } from "../../chunks/Prefs-CRTRAud6.js";
 export { i as PrefsDialog, n as PrefsForm, r as isPrefLeaf, t as prefValueAtPath, e as visiblePrefSubtree };

package/dist/components/Properties/CurveField.d.ts

@@ -0,0 +1,37 @@
+/** An annotation drawn over a curve plot: a shaded band across a range of x,
+ *  or a vertical line at one x. */
+export type CurveMark = {
+    kind: 'band';
+    x: [number, number];
+    color?: string;
+} | {
+    kind: 'line';
+    x: number;
+    color?: string;
+};
+/** Props for `<CurveField>`. */
+export interface CurveFieldProps {
+    /** Flat [x0, y0, x1, y1, …] — matches how curve-as-array configs
+     *  serialize in JSON snapshots. */
+    values: number[];
+    min: number;
+    max: number;
+    step: number;
+    /** Plot width in CSS px. Caller sizes (typically uses a ResizeObserver). */
+    width: number;
+    /** Plot height in CSS px. Default 110. */
+    height?: number;
+    /** Flat default curve. When provided, a Reset button restores it. */
+    defaults?: readonly number[];
+    onChange: (next: number[]) => void;
+    /** Optional vertical marks overlaid on the plot (e.g. landmarks). */
+    marks?: readonly CurveMark[];
+}
+/**
+ * A function-domain (y = f(x), x ∈ [0,1]) curve editor with per-stop
+ * numeric readouts and flip buttons. Wraps weasel-ui's
+ * `CurveEditor`; consumers wanting the raw editor (2D paths,
+ * custom anchors) should import that instead.
+ */
+export declare function CurveField({ values, min, max, step, width, height, defaults, onChange, marks, }: CurveFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CurveField.d.ts.map

package/dist/components/Properties/CurveField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurveField.d.ts","sourceRoot":"","sources":["../../../src/components/Properties/CurveField.tsx"],"names":[],"mappings":"AAKA;mCACmC;AACnC,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhD,gCAAgC;AAChC,MAAM,WAAW,eAAe;IAC9B;uCACmC;IACnC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,GAAG,EACH,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,GACN,EAAE,eAAe,2CA2IjB"}

package/dist/components/Properties/EffectCard.d.ts

@@ -0,0 +1,68 @@
+import { type ReactNode } from 'react';
+/** Props for `<Subpanel>`. */
+export interface SubpanelProps {
+    title: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/** A typographic divider inside a property list: a small title flanked by a
+ *  rule. Purely a heading — use `<PropertyGroup>` for a bordered section. */
+export declare function Subpanel({ title, children, className }: SubpanelProps): import("react/jsx-runtime").JSX.Element;
+/** Props for `<EffectCard>`. */
+export interface EffectCardProps {
+    /** Card title rendered in the title bar (e.g. effect kind label or a select). */
+    title: ReactNode;
+    /** Optional badge/chip displayed before the remove button (e.g. primary value summary). */
+    primary?: ReactNode;
+    /** Optional accent color in any CSS color form. Sets --wzl-effect-card-accent on the card. */
+    accent?: string;
+    /** Optional ordinal badge that doubles as the drag handle (used by tail cards in SB). */
+    index?: number;
+    expanded?: boolean;
+    onToggleExpanded?: () => void;
+    onRemove?: () => void;
+    /**
+     * Drag-handle wiring. When provided, an inline handle (⋮⋮ icon or `index`)
+     * activates HTML5 drag on press. Consumer owns the drag/drop coordination —
+     * see EffectCardList for the batteries-included wrapper.
+     */
+    draggable?: boolean;
+    onPressHandle?: () => void;
+    onReleaseHandle?: () => void;
+    onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    dragging?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+/** An accented, collapsible card for one item in a list of like things —
+ *  effects, layers, tails. The accent color rebinds the theme accent token
+ *  within the card, so its controls pick it up too. */
+export declare function EffectCard({ title, primary, accent, index, expanded, onToggleExpanded, onRemove, draggable, onPressHandle, onReleaseHandle, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, dragging, children, className, }: EffectCardProps): import("react/jsx-runtime").JSX.Element;
+/** The minimum an item must carry to appear in an `<EffectCardList>`. */
+export interface EffectCardListItem {
+    id: string | number;
+}
+/** Props for `<EffectCardList>`. */
+export interface EffectCardListProps<T extends EffectCardListItem> {
+    items: ReadonlyArray<T>;
+    renderItem: (item: T, helpers: {
+        isExpanded: boolean;
+        isDragging: boolean;
+        toggleExpanded: () => void;
+        cardProps: Pick<EffectCardProps, 'expanded' | 'dragging' | 'draggable' | 'onToggleExpanded' | 'onPressHandle' | 'onReleaseHandle' | 'onDragStart' | 'onDragEnd' | 'onDragOver' | 'onDragLeave' | 'onDrop'>;
+    }) => ReactNode;
+    onReorder: (sourceId: T['id'], targetId: T['id'], position: 'before' | 'after') => void;
+    /** Optional rendered when the list is empty. */
+    empty?: ReactNode;
+    /** IDs to render expanded on first mount. Defaults to all collapsed. */
+    defaultExpandedIds?: ReadonlyArray<T['id']>;
+}
+/** A drag-reorderable list of `<EffectCard>`s. Owns the expanded and dragging
+ *  state and hands it back to `renderItem`, so the caller only supplies each
+ *  card's contents. */
+export declare function EffectCardList<T extends EffectCardListItem>({ items, renderItem, onReorder, empty, defaultExpandedIds, }: EffectCardListProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EffectCard.d.ts.map

package/dist/components/Properties/EffectCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EffectCard.d.ts","sourceRoot":"","sources":["../../../src/components/Properties/EffectCard.tsx"],"names":[],"mappings":"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"}

package/dist/components/Properties/PropertyGroup.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+/** Props for `<PropertyGroup>`. */
+export interface PropertyGroupProps {
+    /** Title rendered between two rules at the top of the group. */
+    title: ReactNode;
+    /** When true the group renders nothing — useful for conditional sections. */
+    hidden?: boolean;
+    children: ReactNode;
+    className?: string;
+    /**
+     * How rows pack into the 2-column grid.
+     *   - `'auto-color'` (default): only color rows pair side-by-side; everything
+     *     else spans the full width.
+     *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.
+     */
+    pack?: 'auto-color' | 'pairs';
+}
+/**
+ * Visually-bordered group inside a PropertyList. Use to scope a set of
+ * related rows under a heading (e.g. "Aqua", "Bevel", "Dome" sections
+ * inside a fill effect's controls).
+ */
+export declare function PropertyGroup({ title, hidden, children, className, pack, }: PropertyGroupProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PropertyGroup.d.ts.map

package/dist/components/Properties/PropertyGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyGroup.d.ts","sourceRoot":"","sources":["../../../src/components/Properties/PropertyGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,mCAAmC;AACnC,MAAM,WAAW,kBAAkB;IACjC,gEAAgE;IAChE,KAAK,EAAE,SAAS,CAAC;IACjB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;CAC/B;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAmB,GACpB,EAAE,kBAAkB,kDAcpB"}