@weasel-js/ui 1.5.1 → 1.6.0

package/dist/chunks/Tree-BGt6P8tI.js

@@ -0,0 +1,203 @@
+import { n as e } from "./Disclosure-D79jhmh2.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+var c = {
+	tree: "_tree_10k4o_1",
+	group: "_group_10k4o_2",
+	item: "_item_10k4o_19",
+	row: "_row_10k4o_23",
+	twisty: "_twisty_10k4o_61",
+	leading: "_leading_10k4o_75",
+	label: "_label_10k4o_81",
+	trailing: "_trailing_10k4o_88",
+	empty: "_empty_10k4o_95"
+}, l = 500, u = r(function({ nodes: r, empty: u, className: d, "aria-label": f, "aria-labelledby": g, expandedIds: _, defaultExpandedIds: v, onExpandedChange: y, selectionMode: b = "none", selectedIds: x, defaultSelectedIds: S, onSelectionChange: C, onAction: w }, T) {
+	let [E, D] = h(_, v, y), [O, k] = h(x, S, C), A = b !== "none", j = i(), M = a(() => {
+		let e = [], t = (n, r, i) => {
+			for (let a of n) e.push({
+				node: a,
+				parentId: r,
+				level: i
+			}), a.children && E.has(a.id) && t(a.children, a.id, i + 1);
+		};
+		return t(r, null, 1), e;
+	}, [r, E]), N = a(() => new Map(M.map((e, t) => [e.node.id, t])), [M]), P = o(/* @__PURE__ */ new Map()), [F, I] = s(null), L = o(null), R = o({
+		text: "",
+		at: 0
+	}), z = F != null && N.has(F) ? F : (M.find((e) => A && O.has(e.node.id)) ?? M[0])?.node.id;
+	if (r.length === 0) return /* @__PURE__ */ t("div", {
+		className: [c.empty, d].filter(Boolean).join(" "),
+		children: u ?? "—"
+	});
+	let B = (e) => {
+		e != null && P.current.get(e)?.focus();
+	}, V = (e) => {
+		if (!e.children || e.disabled) return;
+		let t = new Set(E);
+		t.has(e.id) ? t.delete(e.id) : t.add(e.id), D(t);
+	}, H = (e, t) => {
+		let n;
+		if (b === "multiple" && t.shiftKey && L.current != null && N.has(L.current)) {
+			let t = N.get(L.current), r = N.get(e);
+			n = new Set(M.slice(Math.min(t, r), Math.max(t, r) + 1).filter((e) => !e.node.disabled).map((e) => e.node.id));
+		} else b === "multiple" && (t.metaKey || t.ctrlKey) ? (n = new Set(O), n.has(e) ? n.delete(e) : n.add(e), L.current = e) : (n = new Set([e]), L.current = e);
+		(n.size !== O.size || [...n].some((e) => !O.has(e))) && k(n);
+	}, U = (e, t) => {
+		e.disabled || (V(e), A && H(e.id, t), w?.(e.id, t));
+	}, W = (e) => (t) => {
+		if (t.target !== t.currentTarget) return;
+		let n = N.get(e.node.id), { node: r } = e, i = !!r.children && E.has(r.id);
+		switch (t.key) {
+			case "ArrowDown":
+				t.preventDefault(), B(M[Math.min(n + 1, M.length - 1)].node.id);
+				return;
+			case "ArrowUp":
+				t.preventDefault(), B(M[Math.max(n - 1, 0)].node.id);
+				return;
+			case "Home":
+				t.preventDefault(), B(M[0].node.id);
+				return;
+			case "End":
+				t.preventDefault(), B(M[M.length - 1].node.id);
+				return;
+			case "ArrowRight":
+				if (!r.children) return;
+				t.preventDefault(), i ? B(r.children[0]?.id) : V(r);
+				return;
+			case "ArrowLeft":
+				t.preventDefault(), i ? V(r) : B(e.parentId ?? void 0);
+				return;
+			case "Enter":
+			case " ":
+				t.preventDefault(), U(r, m(t));
+				return;
+			default:
+				if (t.key.length !== 1 || t.ctrlKey || t.metaKey || t.altKey) return;
+				G(t, n);
+		}
+	}, G = (e, t) => {
+		let n = Date.now(), r = R.current;
+		r.text = n - r.at > l ? e.key : r.text + e.key, r.at = n;
+		let i = r.text.toLowerCase(), a = r.text.length === 1 ? t + 1 : t;
+		for (let t = 0; t < M.length; t++) {
+			let n = M[(a + t) % M.length];
+			if (p(n.node).toLowerCase().startsWith(i)) {
+				e.preventDefault(), B(n.node.id);
+				return;
+			}
+		}
+	}, K = (e) => (t) => U(e, m(t)), q = (e) => (t) => {
+		t.stopPropagation(), V(e);
+	}, J = (e) => (t) => {
+		t ? P.current.set(e, t) : P.current.delete(e);
+	}, Y = 0, X = (r, i, a) => r.map((o, s) => {
+		let l = Y++, u = !!o.children, d = u && E.has(o.id), f = `${j}-${l}`, p = o.trailing == null ? void 0 : `${j}-${l}-t`;
+		return /* @__PURE__ */ n("li", {
+			ref: J(o.id),
+			role: "treeitem",
+			className: [c.item, o.className].filter(Boolean).join(" "),
+			"aria-level": a,
+			"aria-setsize": r.length,
+			"aria-posinset": s + 1,
+			"aria-expanded": u ? d : void 0,
+			"aria-selected": A ? O.has(o.id) : void 0,
+			"aria-disabled": o.disabled || void 0,
+			"aria-labelledby": p ? `${f} ${p}` : f,
+			"data-muted": o.muted ? "true" : void 0,
+			tabIndex: o.id === z ? 0 : -1,
+			onKeyDown: W({
+				node: o,
+				parentId: i,
+				level: a
+			}),
+			onFocus: (e) => {
+				e.target === e.currentTarget && I(o.id);
+			},
+			children: [/* @__PURE__ */ n("div", {
+				className: c.row,
+				onClick: K(o),
+				children: [
+					/* @__PURE__ */ t("span", {
+						className: c.twisty,
+						"aria-hidden": "true",
+						onClick: u ? q(o) : void 0,
+						children: u && /* @__PURE__ */ t(e, { open: d })
+					}),
+					o.leading != null && /* @__PURE__ */ t("span", {
+						className: c.leading,
+						children: o.leading
+					}),
+					/* @__PURE__ */ t("span", {
+						id: f,
+						className: c.label,
+						children: o.label
+					}),
+					p && /* @__PURE__ */ t("span", {
+						id: p,
+						className: c.trailing,
+						children: o.trailing
+					})
+				]
+			}), d && o.children.length > 0 && /* @__PURE__ */ t("ul", {
+				role: "group",
+				className: c.group,
+				children: X(o.children, o.id, a + 1)
+			})]
+		}, o.id);
+	});
+	return /* @__PURE__ */ t("ul", {
+		ref: T,
+		role: "tree",
+		className: [c.tree, d].filter(Boolean).join(" "),
+		"aria-label": f,
+		"aria-labelledby": g,
+		"aria-multiselectable": b === "multiple" || void 0,
+		children: X(r, null, 1)
+	});
+});
+function d(e, t) {
+	let n = !1, r = [];
+	for (let i of e) {
+		if (t(i)) {
+			r.push(i);
+			continue;
+		}
+		let e = i.children ? d(i.children, t) : [];
+		if (e.length === 0) {
+			n = !0;
+			continue;
+		}
+		e !== i.children && (n = !0), r.push(e === i.children ? i : {
+			...i,
+			children: e
+		});
+	}
+	return n ? r : e;
+}
+function f(e) {
+	let t = [], n = (e) => {
+		for (let r of e) r.children && (t.push(r.id), n(r.children));
+	};
+	return n(e), t;
+}
+function p(e) {
+	return e.textValue ?? (typeof e.label == "string" ? e.label : "");
+}
+function m(e) {
+	return {
+		shiftKey: e.shiftKey,
+		ctrlKey: e.ctrlKey,
+		metaKey: e.metaKey,
+		altKey: e.altKey
+	};
+}
+function h(e, t, n) {
+	let [r, i] = s(() => new Set(t));
+	return [a(() => e === void 0 ? void 0 : new Set(e), [e]) ?? r, (t) => {
+		e === void 0 && i(t), n?.(t);
+	}];
+}
+//#endregion
+export { d as n, f as r, u as t };
+
+//# sourceMappingURL=Tree-BGt6P8tI.js.map

package/dist/chunks/Tree-BGt6P8tI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree-BGt6P8tI.js","names":[],"sources":["../../src/components/Tree/Tree.module.css","../../src/components/Tree/Tree.tsx"],"sourcesContent":[".tree,\n.group {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.tree {\n  user-select: none;\n  -webkit-user-select: none;\n  width: 100%;\n}\n\n/* One twisty and one gap, so a child's twisty sits under its parent's label. */\n.group {\n  padding-inline-start: var(--wzl-tree-indent, calc(var(--wzl-control-h-xs) + var(--wzl-space-2)));\n}\n\n.item {\n  outline: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  padding: 0 var(--wzl-space-2) 0 0;\n  height: var(--wzl-control-h);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  border-radius: var(--wzl-radius-sm);\n  cursor: default;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.row:hover {\n  background: var(--wzl-surface);\n}\n\n.item:focus-visible > .row {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n.item[aria-selected='true'] > .row {\n  background: var(--wzl-border);\n}\n\n.item[data-muted] > .row {\n  color: var(--wzl-fg-subtle);\n}\n\n.item[aria-disabled='true'] > .row {\n  color: var(--wzl-fg-subtle);\n  cursor: not-allowed;\n}\n\n/* A leaf keeps the empty box, so labels at one level line up whether or not\n   their rows are branches. */\n.twisty {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-control-h-xs);\n  align-self: stretch;\n  color: var(--wzl-fg-muted);\n}\n\n.row:hover > .twisty {\n  color: var(--wzl-fg);\n}\n\n.leading {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n}\n\n.label {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.trailing {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n}\n\n.empty {\n  padding: var(--wzl-space-6) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n","/**\n * A hierarchy of rows that expand and collapse: a file tree, a registry\n * browser, an outline.\n *\n * **Semantics.** WAI-ARIA `tree`: each node is a `treeitem` carrying\n * `aria-level`, `aria-setsize` and `aria-posinset`; a branch carries\n * `aria-expanded` and nests its children in a `group`, which is rendered only\n * while the branch is open. `aria-selected` appears only when `selectionMode`\n * is set. A treeitem may not contain interactive content, so `leading` and\n * `trailing` are decoration — an icon, a count — and the twisty is a drawn\n * `DisclosureMark`, not a button.\n *\n * **Keyboard.** One treeitem is in the tab order: the one last focused, else\n * the first selected, else the first. Up/Down move between visible rows,\n * Home/End go to the first and last. Right opens a closed branch, then moves\n * into it; Left closes an open branch, else moves to the parent. Enter and\n * Space activate, as a click does. Typing moves to the next row whose text\n * starts with what was typed.\n *\n * **Activating** a row — click, Enter, Space — toggles it if it is a branch,\n * selects it under `selectionMode`, and calls `onAction`. Clicking the twisty\n * only toggles.\n *\n * **Filtering** is the consumer's: narrow `nodes` with `filterTree`, and pass\n * `treeBranchIds` of the result as `expandedIds` so every match shows.\n */\nimport {\n  forwardRef,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport type { PressModifiers } from '../../useReorderDragList';\nimport { DisclosureMark } from '../Disclosure';\nimport s from './Tree.module.css';\n\n/** One node. A node with `children` is a branch, even when the array is empty. */\nexport interface TreeNode {\n  /** Unique across the whole tree. */\n  id: string;\n  label: ReactNode;\n  /** What type-ahead matches against. Defaults to `label` when that is a string. */\n  textValue?: string;\n  /** Decoration before the label — an icon. Not a control. */\n  leading?: ReactNode;\n  /** Decoration after the label — a count badge. Not a control. Read as part\n   *  of the row's accessible name. */\n  trailing?: ReactNode;\n  children?: readonly TreeNode[];\n  /** Present but not in effect. */\n  muted?: boolean;\n  /** Focusable and announced, but cannot be activated, expanded or selected. */\n  disabled?: boolean;\n  className?: string;\n}\n\n/** Whether and how rows are selectable. */\nexport type TreeSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface TreeProps {\n  nodes: readonly TreeNode[];\n  /** Shown in place of the tree when `nodes` is empty. */\n  empty?: ReactNode;\n  className?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n\n  /** Open branches, controlled. */\n  expandedIds?: Iterable<string>;\n  /** Open branches on first render, when uncontrolled. */\n  defaultExpandedIds?: Iterable<string>;\n  /** The whole set a toggle would produce. Called whether or not controlled. */\n  onExpandedChange?(ids: Set<string>): void;\n\n  /** Default `'none'`. `'multiple'` adds to the selection with Cmd/Ctrl and\n   *  extends it over visible rows with Shift. */\n  selectionMode?: TreeSelectionMode;\n  /** Selected rows, controlled. */\n  selectedIds?: Iterable<string>;\n  /** Selected rows on first render, when uncontrolled. */\n  defaultSelectedIds?: Iterable<string>;\n  /** The whole set an activation would produce, when it differs. */\n  onSelectionChange?(ids: Set<string>): void;\n\n  /** A row was activated — click, Enter or Space — with the modifiers held. */\n  onAction?(id: string, mods: PressModifiers): void;\n}\n\ninterface Visible {\n  node: TreeNode;\n  parentId: string | null;\n  level: number;\n}\n\nconst TYPEAHEAD_MS = 500;\n\nexport const Tree = forwardRef(function Tree(\n  {\n    nodes, empty, className,\n    'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy,\n    expandedIds, defaultExpandedIds, onExpandedChange,\n    selectionMode = 'none', selectedIds, defaultSelectedIds, onSelectionChange,\n    onAction,\n  }: TreeProps,\n  ref: Ref<HTMLUListElement>,\n) {\n  const [expanded, setExpanded] = useControlledSet(expandedIds, defaultExpandedIds, onExpandedChange);\n  const [selected, setSelected] = useControlledSet(selectedIds, defaultSelectedIds, onSelectionChange);\n  const selectable = selectionMode !== 'none';\n  const baseId = useId();\n\n  const visible = useMemo(() => {\n    const out: Visible[] = [];\n    const walk = (list: readonly TreeNode[], parentId: string | null, level: number) => {\n      for (const node of list) {\n        out.push({ node, parentId, level });\n        if (node.children && expanded.has(node.id)) walk(node.children, node.id, level + 1);\n      }\n    };\n    walk(nodes, null, 1);\n    return out;\n  }, [nodes, expanded]);\n  const indexOf = useMemo(() => new Map(visible.map((v, i) => [v.node.id, i])), [visible]);\n\n  const items = useRef(new Map<string, HTMLLIElement>());\n  const [focusId, setFocusId] = useState<string | null>(null);\n  const anchor = useRef<string | null>(null);\n  const typed = useRef({ text: '', at: 0 });\n\n  const stopId = focusId != null && indexOf.has(focusId)\n    ? focusId\n    : (visible.find((v) => selectable && selected.has(v.node.id)) ?? visible[0])?.node.id;\n\n  if (nodes.length === 0) {\n    return <div className={[s.empty, className].filter(Boolean).join(' ')}>{empty ?? '—'}</div>;\n  }\n\n  const focus = (id: string | undefined) => { if (id != null) items.current.get(id)?.focus(); };\n\n  const toggle = (node: TreeNode) => {\n    if (!node.children || node.disabled) return;\n    const next = new Set(expanded);\n    if (next.has(node.id)) next.delete(node.id);\n    else next.add(node.id);\n    setExpanded(next);\n  };\n\n  const select = (id: string, mods: PressModifiers) => {\n    let next: Set<string>;\n    if (selectionMode === 'multiple' && mods.shiftKey && anchor.current != null && indexOf.has(anchor.current)) {\n      const a = indexOf.get(anchor.current)!;\n      const b = indexOf.get(id)!;\n      next = new Set(visible.slice(Math.min(a, b), Math.max(a, b) + 1)\n        .filter((v) => !v.node.disabled).map((v) => v.node.id));\n    } else if (selectionMode === 'multiple' && (mods.metaKey || mods.ctrlKey)) {\n      next = new Set(selected);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      anchor.current = id;\n    } else {\n      next = new Set([id]);\n      anchor.current = id;\n    }\n    if (next.size !== selected.size || [...next].some((x) => !selected.has(x))) setSelected(next);\n  };\n\n  const activate = (node: TreeNode, mods: PressModifiers) => {\n    if (node.disabled) return;\n    toggle(node);\n    if (selectable) select(node.id, mods);\n    onAction?.(node.id, mods);\n  };\n\n  const onKeyDown = (v: Visible) => (e: KeyboardEvent<HTMLLIElement>) => {\n    if (e.target !== e.currentTarget) return;\n    const i = indexOf.get(v.node.id)!;\n    const { node } = v;\n    const open = !!node.children && expanded.has(node.id);\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        focus(visible[Math.min(i + 1, visible.length - 1)].node.id);\n        return;\n      case 'ArrowUp':\n        e.preventDefault();\n        focus(visible[Math.max(i - 1, 0)].node.id);\n        return;\n      case 'Home':\n        e.preventDefault();\n        focus(visible[0].node.id);\n        return;\n      case 'End':\n        e.preventDefault();\n        focus(visible[visible.length - 1].node.id);\n        return;\n      case 'ArrowRight':\n        if (!node.children) return;\n        e.preventDefault();\n        if (!open) toggle(node);\n        else focus(node.children[0]?.id);\n        return;\n      case 'ArrowLeft':\n        e.preventDefault();\n        if (open) toggle(node);\n        else focus(v.parentId ?? undefined);\n        return;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        activate(node, modsOf(e));\n        return;\n      default:\n        if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;\n        typeAhead(e, i);\n    }\n  };\n\n  const typeAhead = (e: KeyboardEvent, from: number) => {\n    const now = Date.now();\n    const t = typed.current;\n    t.text = now - t.at > TYPEAHEAD_MS ? e.key : t.text + e.key;\n    t.at = now;\n    const want = t.text.toLowerCase();\n    // A fresh first letter looks past the current row; a longer prefix may still match it.\n    const start = t.text.length === 1 ? from + 1 : from;\n    for (let k = 0; k < visible.length; k++) {\n      const v = visible[(start + k) % visible.length];\n      if (textOf(v.node).toLowerCase().startsWith(want)) {\n        e.preventDefault();\n        focus(v.node.id);\n        return;\n      }\n    }\n  };\n\n  const onRowClick = (node: TreeNode) => (e: MouseEvent<HTMLDivElement>) => activate(node, modsOf(e));\n\n  const onTwistyClick = (node: TreeNode) => (e: MouseEvent<HTMLSpanElement>) => {\n    e.stopPropagation();\n    toggle(node);\n  };\n\n  const itemRef = (id: string) => (el: HTMLLIElement | null) => {\n    if (el) items.current.set(id, el);\n    else items.current.delete(id);\n  };\n\n  let seq = 0;\n  const renderLevel = (list: readonly TreeNode[], parentId: string | null, level: number): ReactNode =>\n    list.map((node, pos) => {\n      const n = seq++;\n      const branch = !!node.children;\n      const open = branch && expanded.has(node.id);\n      const labelId = `${baseId}-${n}`;\n      const trailingId = node.trailing != null ? `${baseId}-${n}-t` : undefined;\n      return (\n        <li\n          key={node.id}\n          ref={itemRef(node.id)}\n          role=\"treeitem\"\n          className={[s.item, node.className].filter(Boolean).join(' ')}\n          aria-level={level}\n          aria-setsize={list.length}\n          aria-posinset={pos + 1}\n          aria-expanded={branch ? open : undefined}\n          aria-selected={selectable ? selected.has(node.id) : undefined}\n          aria-disabled={node.disabled || undefined}\n          aria-labelledby={trailingId ? `${labelId} ${trailingId}` : labelId}\n          data-muted={node.muted ? 'true' : undefined}\n          tabIndex={node.id === stopId ? 0 : -1}\n          onKeyDown={onKeyDown({ node, parentId, level })}\n          onFocus={(e) => { if (e.target === e.currentTarget) setFocusId(node.id); }}\n        >\n          <div className={s.row} onClick={onRowClick(node)}>\n            <span className={s.twisty} aria-hidden=\"true\" onClick={branch ? onTwistyClick(node) : undefined}>\n              {branch && <DisclosureMark open={open} />}\n            </span>\n            {node.leading != null && <span className={s.leading}>{node.leading}</span>}\n            <span id={labelId} className={s.label}>{node.label}</span>\n            {trailingId && <span id={trailingId} className={s.trailing}>{node.trailing}</span>}\n          </div>\n          {open && node.children!.length > 0 && (\n            <ul role=\"group\" className={s.group}>\n              {renderLevel(node.children!, node.id, level + 1)}\n            </ul>\n          )}\n        </li>\n      );\n    });\n\n  return (\n    <ul\n      ref={ref}\n      role=\"tree\"\n      className={[s.tree, className].filter(Boolean).join(' ')}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-multiselectable={selectionMode === 'multiple' || undefined}\n    >\n      {renderLevel(nodes, null, 1)}\n    </ul>\n  );\n});\n\n/**\n * `nodes` narrowed to those `match` accepts, plus their ancestors. A matching\n * node keeps its whole subtree; a branch with no match inside it is dropped.\n * Returns `nodes` itself when nothing is dropped.\n */\nexport function filterTree(\n  nodes: readonly TreeNode[],\n  match: (node: TreeNode) => boolean,\n): readonly TreeNode[] {\n  let changed = false;\n  const out: TreeNode[] = [];\n  for (const node of nodes) {\n    if (match(node)) {\n      out.push(node);\n      continue;\n    }\n    const kids = node.children ? filterTree(node.children, match) : [];\n    if (kids.length === 0) {\n      changed = true;\n      continue;\n    }\n    if (kids !== node.children) changed = true;\n    out.push(kids === node.children ? node : { ...node, children: kids });\n  }\n  return changed ? out : nodes;\n}\n\n/** Every branch id in `nodes`, depth first — `expandedIds` for a tree with everything open. */\nexport function treeBranchIds(nodes: readonly TreeNode[]): string[] {\n  const out: string[] = [];\n  const walk = (list: readonly TreeNode[]) => {\n    for (const node of list) {\n      if (!node.children) continue;\n      out.push(node.id);\n      walk(node.children);\n    }\n  };\n  walk(nodes);\n  return out;\n}\n\nfunction textOf(node: TreeNode): string {\n  return node.textValue ?? (typeof node.label === 'string' ? node.label : '');\n}\n\nfunction modsOf(e: { shiftKey: boolean; ctrlKey: boolean; metaKey: boolean; altKey: boolean }): PressModifiers {\n  return { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey };\n}\n\nfunction useControlledSet(\n  value: Iterable<string> | undefined,\n  initial: Iterable<string> | undefined,\n  onChange: ((ids: Set<string>) => void) | undefined,\n): [ReadonlySet<string>, (next: Set<string>) => void] {\n  const [own, setOwn] = useState<ReadonlySet<string>>(() => new Set(initial));\n  const controlled = useMemo(() => (value === undefined ? undefined : new Set(value)), [value]);\n  const set = (next: Set<string>) => {\n    if (value === undefined) setOwn(next);\n    onChange?.(next);\n  };\n  return [controlled ?? own, set];\n}\n"],"mappings":"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"}

package/dist/chunks/{createKeyframeLayer-7j7ukrSx.js → createKeyframeLayer-BzDRCrrh.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./dlog-CMYiRF3Q.js";
-import { c as t, s as n, t as r } from "./Plot2D-Czvyt_vG.js";
-import { t as i } from "./snap-B0WQwetQ.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { cubicBezierEasing as c, openPointerSession as l, resolveEasing as u } from "@weasel-js/core";
+import { c as t, s as n, t as r } from "./Plot2D-lyO7waPQ.js";
+import { t as i } from "./snap-DC4Km8xG.js";
+import { cubicBezierEasing as a, openPointerSession as o, resolveEasing as s } from "@weasel-js/core";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useCallback as d, useEffect as f, useMemo as p, useRef as m, useState as h } from "react";
 import { tokenPx as g } from "@weasel-js/theme";
 //#region src/components/CurveEditor/hitTest.ts
@@ -85,7 +85,7 @@ function w(e) {
 	};
 }
 function T(i) {
-	let { layers: a, onLayerChange: c, onLayerCommit: u, width: g, height: _, xRange: v = [0, 1], yRange: y = [0, 1], grid: b, axes: x, xTicks: T, yTicks: E, className: D, style: O, children: k } = i, A = i.history !== !1, j = p(() => ({
+	let { layers: a, onLayerChange: s, onLayerCommit: c, width: g, height: _, xRange: v = [0, 1], yRange: y = [0, 1], grid: b, axes: x, xTicks: T, yTicks: E, className: D, style: O, children: k } = i, A = i.history !== !1, j = p(() => ({
 		xMin: v[0],
 		xMax: v[1],
 		yMin: y[0],
@@ -116,9 +116,9 @@ function T(i) {
 		let t = N.current;
 		for (let n of t) {
 			let t = e.get(n.layer.id);
-			t !== void 0 && t !== n.state && c(n.layer.id, t);
+			t !== void 0 && t !== n.state && s(n.layer.id, t);
 		}
-	}, [c]), G = d(() => {
+	}, [s]), G = d(() => {
 		if (!A) return;
 		let e = V.current;
 		if (e.length === 0) return;
@@ -151,7 +151,7 @@ function T(i) {
 		let r = n.clientToModel(e), i = Q(t.layerId);
 		if (i === void 0) return;
 		let a = L(w(e)), o = t.gesture.onMove(i, r, e, a);
-		o !== i && c(t.layerId, o);
+		o !== i && s(t.layerId, o);
 	}, J.current = (e) => {
 		let t = R.current;
 		if (!t) return;
@@ -161,7 +161,7 @@ function T(i) {
 			return;
 		}
 		let r = L(w(e)), i = t.gesture.onCommit ? t.gesture.onCommit(n, r) : n;
-		i !== n && c(t.layerId, i), A && (V.current.push(t.startStates), H.current = []), u && u(t.layerId, i, t.startSelfState), Z();
+		i !== n && s(t.layerId, i), A && (V.current.push(t.startStates), H.current = []), c && c(t.layerId, i, t.startSelfState), Z();
 	}, Y.current = () => {
 		let e = R.current;
 		if (!e) return;
@@ -171,7 +171,7 @@ function T(i) {
 			return;
 		}
 		let n = L(C), r = e.gesture.onCancel ? e.gesture.onCancel(t, n) : e.startSelfState;
-		r !== t && c(e.layerId, r), Z();
+		r !== t && s(e.layerId, r), Z();
 	};
 	let $ = d((e, t, n) => {
 		let r = U();
@@ -180,7 +180,7 @@ function T(i) {
 			gesture: n,
 			startStates: r,
 			startSelfState: r.get(e)
-		}, B(e), X.current = l(t.currentTarget, t, {
+		}, B(e), X.current = o(t.currentTarget, t, {
 			onMove: (e) => q.current(e),
 			onEnd: (e) => J.current(e),
 			onCancel: () => Y.current()
@@ -195,52 +195,52 @@ function T(i) {
 		});
 		let o = U();
 		for (let e = i.length - 1; e >= 0; e--) {
-			let s = i[e], l = s.layer.hitTest?.(s.state, n.plot, r);
-			if (!l) continue;
-			let d = s.state, f, p = s.layer.onPointerDown?.(d, l, a, r, {
+			let l = i[e], u = l.layer.hitTest?.(l.state, n.plot, r);
+			if (!u) continue;
+			let d = l.state, f, p = l.layer.onPointerDown?.(d, u, a, r, {
 				plot: n.plot,
 				model: n.model,
 				commit(e) {
-					f = e, c(s.layer.id, e);
+					f = e, s(l.layer.id, e);
 				}
 			});
 			if (t.stopPropagation(), p) {
-				$(s.layer.id, t, p);
+				$(l.layer.id, t, p);
 				return;
 			}
-			f !== void 0 && (A && (V.current.push(o), H.current = []), u?.(s.layer.id, f, d));
+			f !== void 0 && (A && (V.current.push(o), H.current = []), c?.(l.layer.id, f, d));
 			return;
 		}
-		let s = null;
+		let l = null;
 		for (let e = i.length - 1; e >= 0; e--) {
-			let l = i[e];
-			if (!l.layer.onEmptyPointerDown) continue;
-			let u = l.state, d, f = l.layer.onEmptyPointerDown(u, n.model, a, r, {
+			let c = i[e];
+			if (!c.layer.onEmptyPointerDown) continue;
+			let u = c.state, d, f = c.layer.onEmptyPointerDown(u, n.model, a, r, {
 				plot: n.plot,
 				model: n.model,
 				commit(e) {
-					d = e, c(l.layer.id, e);
+					d = e, s(c.layer.id, e);
 				}
 			});
 			if (f) {
-				$(l.layer.id, t, f), d !== void 0 && R.current !== null && (R.current.startStates = o, R.current.startSelfState = o.get(l.layer.id));
+				$(c.layer.id, t, f), d !== void 0 && R.current !== null && (R.current.startStates = o, R.current.startSelfState = o.get(c.layer.id));
 				return;
 			}
 			if (d !== void 0) {
-				s = {
-					id: l.layer.id,
+				l = {
+					id: c.layer.id,
 					next: d,
 					prev: u
 				};
 				break;
 			}
 		}
-		s && (A && (V.current.push(o), H.current = []), u?.(s.id, s.next, s.prev));
+		l && (A && (V.current.push(o), H.current = []), c?.(l.id, l.next, l.prev));
 	}, [
 		L,
 		$,
+		s,
 		c,
-		u,
 		A,
 		U
 	]), te = d((e) => {
@@ -261,8 +261,8 @@ function T(i) {
 			if (!i.layer.onKeyDown) continue;
 			let a = U(), o;
 			if (i.layer.onKeyDown(i.state, e.nativeEvent, t, { commit(e) {
-				o = e, c(i.layer.id, e);
-			} }), o !== void 0 && (A && (V.current.push(a), H.current = []), u?.(i.layer.id, o, i.state)), e.nativeEvent.defaultPrevented) return;
+				o = e, s(i.layer.id, e);
+			} }), o !== void 0 && (A && (V.current.push(a), H.current = []), c?.(i.layer.id, o, i.state)), e.nativeEvent.defaultPrevented) return;
 		}
 	}, [
 		A,
@@ -270,8 +270,8 @@ function T(i) {
 		K,
 		L,
 		U,
-		c,
-		u
+		s,
+		c
 	]);
 	f(() => () => {
 		X.current?.cancel();
@@ -282,7 +282,7 @@ function T(i) {
 		toPlot: (e) => n(e, j, M),
 		toModel: (e) => t(e, j, M)
 	}), [j, M]);
-	return /* @__PURE__ */ s(r, {
+	return /* @__PURE__ */ u(r, {
 		ref: I,
 		className: [S.root, D].filter(Boolean).join(" "),
 		style: O,
@@ -310,7 +310,7 @@ function T(i) {
 				},
 				isActive: z === e.layer.id
 			};
-			return /* @__PURE__ */ o("g", {
+			return /* @__PURE__ */ l("g", {
 				"data-layer-id": e.layer.id,
 				children: e.layer.render(e.state, t)
 			}, e.layer.id);
@@ -369,10 +369,10 @@ function R(e) {
 	};
 }
 function z(e = {}) {
-	let t = e.id ?? "keyframes", n = e.label ?? "Curve", r = e.formatX ?? ((e) => String(Math.round(e))), l = e.snapRadiusPx ?? 6;
+	let t = e.id ?? "keyframes", n = e.label ?? "Curve", r = e.formatX ?? ((e) => String(Math.round(e))), o = e.snapRadiusPx ?? 6;
 	function d(e, t, n) {
 		let r = e.drag;
-		return r?.kind === "handle" && r.segment === n ? c(...r.bezier) : u(t[n].easing);
+		return r?.kind === "handle" && r.segment === n ? a(...r.bezier) : s(t[n].easing);
 	}
 	function f(e, t, n) {
 		let r = [];
@@ -404,17 +404,17 @@ function z(e = {}) {
 	}
 	let h = (e) => e.map((e, t) => `${t === 0 ? "M" : "L"}${e.x.toFixed(2)},${e.y.toFixed(2)}`).join("");
 	function g(e, t) {
-		let i = e.drag?.kind === "key" ? R(e).keys : e.keys, c = f(e, i, t), l = c.flatMap((e, t) => t === 0 ? e : e.slice(1)), u = e.selectedSegment, d = p(e), g = e.drag?.kind === "key" ? e.drag.index : null;
-		return /* @__PURE__ */ s(a, { children: [
-			u !== null && u >= 1 && u < i.length ? (() => {
+		let i = e.drag?.kind === "key" ? R(e).keys : e.keys, a = f(e, i, t), o = a.flatMap((e, t) => t === 0 ? e : e.slice(1)), s = e.selectedSegment, d = p(e), g = e.drag?.kind === "key" ? e.drag.index : null;
+		return /* @__PURE__ */ u(c, { children: [
+			s !== null && s >= 1 && s < i.length ? (() => {
 				let e = t.toPlot({
-					x: i[u - 1].t,
+					x: i[s - 1].t,
 					y: 0
 				}).x, n = t.toPlot({
-					x: i[u].t,
+					x: i[s].t,
 					y: 0
 				}).x;
-				return /* @__PURE__ */ o("rect", {
+				return /* @__PURE__ */ l("rect", {
 					className: S.segmentBand,
 					x: Math.min(e, n),
 					y: 0,
@@ -422,44 +422,44 @@ function z(e = {}) {
 					height: t.plotSize.height
 				});
 			})() : null,
-			l.length > 1 ? /* @__PURE__ */ o("path", {
+			o.length > 1 ? /* @__PURE__ */ l("path", {
 				"data-curve-element": "curve",
 				className: S.curve,
-				d: h(l)
+				d: h(o)
 			}) : null,
-			c.map((e, t) => /* @__PURE__ */ o("path", {
+			a.map((e, t) => /* @__PURE__ */ l("path", {
 				className: S.segmentTarget,
 				d: h(e),
 				role: "button",
 				tabIndex: 0,
 				"aria-label": `${n} segment into ${r(i[t + 1].t)}`,
-				"aria-current": u === t + 1 ? "true" : void 0,
+				"aria-current": s === t + 1 ? "true" : void 0,
 				"data-segment-index": t + 1
 			}, `seg-${t + 1}`)),
 			d ? (() => {
-				let [r, i] = m(e, d, t), c = t.toPlot({
-					x: e.keys[u - 1].t,
-					y: e.keys[u - 1].value
-				}), l = t.toPlot({
-					x: e.keys[u].t,
-					y: e.keys[u].value
+				let [r, i] = m(e, d, t), a = t.toPlot({
+					x: e.keys[s - 1].t,
+					y: e.keys[s - 1].value
+				}), o = t.toPlot({
+					x: e.keys[s].t,
+					y: e.keys[s].value
 				});
-				return /* @__PURE__ */ s(a, { children: [
-					/* @__PURE__ */ o("line", {
+				return /* @__PURE__ */ u(c, { children: [
+					/* @__PURE__ */ l("line", {
 						className: S.handleStem,
-						x1: c.x,
-						y1: c.y,
+						x1: a.x,
+						y1: a.y,
 						x2: r.x,
 						y2: r.y
 					}),
-					/* @__PURE__ */ o("line", {
+					/* @__PURE__ */ l("line", {
 						className: S.handleStem,
-						x1: l.x,
-						y1: l.y,
+						x1: o.x,
+						y1: o.y,
 						x2: i.x,
 						y2: i.y
 					}),
-					[r, i].map((e, t) => /* @__PURE__ */ o("circle", {
+					[r, i].map((e, t) => /* @__PURE__ */ l("circle", {
 						className: S.handle,
 						cx: e.x,
 						cy: e.y,
@@ -472,17 +472,17 @@ function z(e = {}) {
 				] });
 			})() : null,
 			e.keys.map((i, a) => {
-				let s = t.toPlot({
+				let o = t.toPlot({
 					x: i.t,
 					y: i.value
 				});
-				return /* @__PURE__ */ o("rect", {
+				return /* @__PURE__ */ l("rect", {
 					className: S.keyframe,
-					x: s.x - A,
-					y: s.y - A,
+					x: o.x - A,
+					y: o.y - A,
 					width: A * 2,
 					height: A * 2,
-					transform: `rotate(45 ${s.x} ${s.y})`,
+					transform: `rotate(45 ${o.x} ${o.y})`,
 					role: "button",
 					tabIndex: 0,
 					"aria-label": `${n} key at ${r(i.t)}`,
@@ -496,7 +496,7 @@ function z(e = {}) {
 					x: e.drag.t,
 					y: e.drag.value
 				});
-				return /* @__PURE__ */ o("rect", {
+				return /* @__PURE__ */ l("rect", {
 					"aria-hidden": "true",
 					className: S.keyframeGhost,
 					x: n.x - A,
@@ -534,18 +534,18 @@ function z(e = {}) {
 	}
 	function b(t) {
 		return {
-			onMove(n, r, a, o) {
-				let s = F(r.x, e.xClamp);
+			onMove(n, r, a, s) {
+				let c = F(r.x, e.xClamp);
 				if (e.snapX && !a.altKey) {
-					let t = (o.modelRange.xMax - o.modelRange.xMin) / o.plotSize.width;
-					s = F(i(s, e.snapX, Math.abs(t) * l), e.xClamp);
+					let t = (s.modelRange.xMax - s.modelRange.xMin) / s.plotSize.width;
+					c = F(i(c, e.snapX, Math.abs(t) * o), e.xClamp);
 				}
 				return {
 					...n,
 					drag: {
 						kind: "key",
 						index: t,
-						t: s,
+						t: c,
 						value: F(r.y, e.yClamp)
 					}
 				};
@@ -696,4 +696,4 @@ function z(e = {}) {
 //#endregion
 export { S as a, b as c, T as i, _ as l, z as n, y as o, P as r, x as s, R as t, v as u };
 
-//# sourceMappingURL=createKeyframeLayer-7j7ukrSx.js.map
+//# sourceMappingURL=createKeyframeLayer-BzDRCrrh.js.map