@weasel-js/ui 1.2.0 → 1.3.0

package/dist/chunks/{ActionBar-BvPEd_GW.js → ActionBar-BTev_ZZl.js}

@@ -1,12 +1,12 @@
-import { n as e, t } from "./Tooltip-DXJbdR5B.js";
-import { useSyncExternalStore as n } from "react";
-import { Focusable as r } from "react-aria-components";
+import { n as e, t } from "./Tooltip-Di7vxbFa.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { evaluateEnabled as i, useActionsRegistry as a, useOptionalDepRegistry as o } from "@weasel-js/core";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useSyncExternalStore as s } from "react";
+import { Focusable as c } from "react-aria-components";
 var l = {
-	bar: "_bar_147qb_7",
-	vertical: "_vertical_147qb_18",
-	button: "_button_147qb_22"
+	bar: "_bar_1quk7_7",
+	vertical: "_vertical_1quk7_18",
+	button: "_button_1quk7_22"
 }, u = Object.freeze([]), d = () => () => {};
 function f(e, t) {
 	if (t !== void 0) return t;
@@ -17,7 +17,7 @@ function p(e, t) {
 	return t ? `${e} (${t})` : e;
 }
 function m(m) {
-	let { group: h, orientation: g = "horizontal", icons: _, labels: v, className: y } = m, b = a(), x = o(), S = n(b ? b.subscribe : d, b ? b.list : () => u, b ? b.list : () => u).filter((e) => e.group === h), C = x ? {
+	let { group: h, orientation: g = "horizontal", icons: _, labels: v, className: y } = m, b = a(), x = o(), S = s(b ? b.subscribe : d, b ? b.list : () => u, b ? b.list : () => u).filter((e) => e.group === h), C = x ? {
 		selection: x.get("selection"),
 		scene: x.get("scene"),
 		history: x.get("history"),
@@ -26,7 +26,7 @@ function m(m) {
 		activeTool: x.get("activeTool"),
 		booleansAdapter: x.get("booleansAdapter")
 	} : void 0;
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ n("div", {
 		className: [
 			l.bar,
 			g === "vertical" && l.vertical,
@@ -34,30 +34,30 @@ function m(m) {
 		].filter(Boolean).join(" "),
 		role: "toolbar",
 		"aria-label": `${h} actions`,
-		children: S.map((n) => {
-			let a = v?.[n.id] ?? n.label, o = f(n, _?.[n.id]), { enabled: u } = i(n, C), d = !u, m = p(a, n.shortcut);
-			return /* @__PURE__ */ c(e, {
+		children: S.map((a) => {
+			let o = v?.[a.id] ?? a.label, s = f(a, _?.[a.id]), { enabled: u } = i(a, C), d = !u, m = p(o, a.shortcut);
+			return /* @__PURE__ */ r(e, {
 				isDisabled: d,
-				children: [/* @__PURE__ */ s(r, {
+				children: [/* @__PURE__ */ n(c, {
 					isDisabled: d,
-					children: /* @__PURE__ */ s("button", {
+					children: /* @__PURE__ */ n("button", {
 						type: "button",
-						"data-testid": `action-bar-item-${n.id}`,
-						"aria-label": a,
+						"data-testid": `action-bar-item-${a.id}`,
+						"aria-label": o,
 						"aria-disabled": d || void 0,
 						disabled: d,
 						className: l.button,
 						onClick: () => {
-							d || b?.trigger(n.id);
+							d || b?.trigger(a.id);
 						},
-						children: o
+						children: s
 					})
-				}), /* @__PURE__ */ s(t, { children: m })]
-			}, n.id);
+				}), /* @__PURE__ */ n(t, { children: m })]
+			}, a.id);
 		})
 	});
 }
 //#endregion
 export { m as t };
 
-//# sourceMappingURL=ActionBar-BvPEd_GW.js.map
+//# sourceMappingURL=ActionBar-BTev_ZZl.js.map

package/dist/chunks/ActionBar-BTev_ZZl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar-BTev_ZZl.js","names":[],"sources":["../../src/components/ActionBar/ActionBar.module.css","../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["/* `<ActionBar>` shares the segmented widget look of the WeaselDraw\n * pathfinder panel — small chrome on the panel surface so a bar of\n * Action buttons reads as a single control. Tokens are theme-driven\n * via `--wzl-*`. Visual parity with `PathfinderPanel.module.css` is\n * intentional; this is the generic version. */\n\n.bar {\n  display: flex;\n  flex-direction: row;\n  gap: 1px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: 2px;\n  user-select: none;\n}\n\n.bar.vertical {\n  flex-direction: column;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  border: 0;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n.button:hover:not([disabled]) {\n  background: var(--wzl-border);\n}\n\n.button:active:not([disabled]) {\n  background: color-mix(in srgb, var(--wzl-border) 70%, transparent);\n}\n\n.button[disabled] {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.button > svg {\n  display: block;\n}\n","import { useSyncExternalStore, type ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport {\n  useActionsRegistry,\n  useOptionalDepRegistry,\n  evaluateEnabled,\n  type Action,\n} from '@weasel-js/core';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './ActionBar.module.css';\n\nconst EMPTY_LIST: readonly Action[] = Object.freeze([]);\nconst noopSubscribe = (): (() => void) => () => {};\n\n/** Props for {@link ActionBar}. */\nexport interface ActionBarProps {\n  /** Group key — only actions with `action.group === group` are rendered. */\n  group: string;\n  /** Layout direction. Defaults to `'horizontal'`. */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Per-id icon overrides — keyed by `action.id`. When an entry is provided\n   * it replaces the action's own `icon` for this bar only. Mirrors\n   * `PathfinderPanelProps.icons` so call sites that ship custom glyph sets\n   * can swap them in without re-registering actions.\n   */\n  icons?: Record<string, ReactNode>;\n  /**\n   * Per-id label overrides — keyed by `action.id`. Drives both `aria-label`\n   * and `title`. When omitted, the action's own `label` is used.\n   */\n  labels?: Record<string, string>;\n  /** Additional class for the toolbar root. */\n  className?: string;\n}\n\nfunction resolveIcon(action: Action, override: ReactNode | undefined): ReactNode {\n  if (override !== undefined) return override;\n  const i = action.icon;\n  if (typeof i === 'function') return i();\n  return i;\n}\n\nfunction resolveTitle(label: string, shortcut: string | undefined): string {\n  return shortcut ? `${label} (${shortcut})` : label;\n}\n\n/**\n * Generic group-keyed action toolbar. Reads the parent `ActionsRegistry`,\n * filters to actions whose `group` matches `props.group`, and renders one\n * icon button per match. Disabled state is derived from each action's\n * `enabled` predicate via `evaluateEnabled` (so the button greys out and\n * swallows clicks while the keybinding — if any — still fires through the\n * registry's keydown listener; that's the registry's contract, not ours).\n *\n * Visual parity with the WeaselDraw `<PathfinderPanel>` is intentional;\n * this is the generic, registry-driven version. No keyboard navigation\n * (roving tabindex) yet — bar consumers today are short flat strips. Add\n * if/when a long bar lands.\n */\nexport function ActionBar(props: ActionBarProps) {\n  const { group, orientation = 'horizontal', icons, labels, className } = props;\n  const registry = useActionsRegistry();\n  const depReg = useOptionalDepRegistry();\n  const all = useSyncExternalStore(\n    registry ? registry.subscribe : noopSubscribe,\n    registry ? registry.list : () => EMPTY_LIST,\n    registry ? registry.list : () => EMPTY_LIST,\n  );\n  const actions = all.filter((a) => a.group === group);\n\n  // Build the deps bag fresh each render — predicates read selection / etc.\n  // from these. ActionBar relies on its parent re-rendering when the\n  // underlying state changes (e.g. the consumer reads `selection.current`\n  // somewhere above us) for `enabled` to reflect the latest values.\n  const deps = depReg\n    ? {\n        selection: depReg.get('selection'),\n        scene: depReg.get('scene'),\n        history: depReg.get('history'),\n        view: depReg.get('view'),\n        pointer: depReg.get('pointer'),\n        activeTool: depReg.get('activeTool'),\n        booleansAdapter: depReg.get('booleansAdapter'),\n      }\n    : undefined;\n\n  const cls = [s.bar, orientation === 'vertical' && s.vertical, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={`${group} actions`}>\n      {actions.map((action) => {\n        const label = labels?.[action.id] ?? action.label;\n        const icon = resolveIcon(action, icons?.[action.id]);\n        const { enabled } = evaluateEnabled(action, deps);\n        const disabled = !enabled;\n        const title = resolveTitle(label, action.shortcut);\n        return (\n          <TooltipTrigger key={action.id} isDisabled={disabled}>\n            <Focusable isDisabled={disabled}>\n              <button\n                type=\"button\"\n                data-testid={`action-bar-item-${action.id}`}\n                aria-label={label}\n                aria-disabled={disabled || undefined}\n                disabled={disabled}\n                className={s.button}\n                onClick={() => {\n                  if (disabled) return;\n                  // Dispatch through the registry so the enabled() guard runs.\n                  // If no registry is in scope the click is a no-op — ActionBar\n                  // is expected to render under an `ActionsProvider`.\n                  registry?.trigger(action.id);\n                }}\n              >\n                {icon}\n              </button>\n            </Focusable>\n            <Tooltip>{title}</Tooltip>\n          </TooltipTrigger>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;GCWM,IAAgC,OAAO,OAAO,EAAE,CAAC,EACjD,gBAA0C;AAwBhD,SAAS,EAAY,GAAgB,GAA4C;AAC/E,KAAI,MAAa,KAAA,EAAW,QAAO;CACnC,IAAM,IAAI,EAAO;AAEjB,QADI,OAAO,KAAM,aAAmB,GAAG,GAChC;;AAGT,SAAS,EAAa,GAAe,GAAsC;AACzE,QAAO,IAAW,GAAG,EAAM,IAAI,EAAS,KAAK;;AAgB/C,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,UAAO,iBAAc,cAAc,UAAO,WAAQ,iBAAc,GAClE,IAAW,GAAoB,EAC/B,IAAS,GAAwB,EAMjC,IALM,EACV,IAAW,EAAS,YAAY,GAChC,IAAW,EAAS,aAAa,GACjC,IAAW,EAAS,aAAa,EAEnB,CAAI,QAAQ,MAAM,EAAE,UAAU,EAAM,EAM9C,IAAO,IACT;EACE,WAAW,EAAO,IAAI,YAAY;EAClC,OAAO,EAAO,IAAI,QAAQ;EAC1B,SAAS,EAAO,IAAI,UAAU;EAC9B,MAAM,EAAO,IAAI,OAAO;EACxB,SAAS,EAAO,IAAI,UAAU;EAC9B,YAAY,EAAO,IAAI,aAAa;EACpC,iBAAiB,EAAO,IAAI,kBAAkB;EAC/C,GACD,KAAA;AAMJ,QACE,kBAAC,OAAD;EAAK,WALK;GAAC,EAAE;GAAK,MAAgB,cAAc,EAAE;GAAU;GAAU,CACrE,OAAO,QAAQ,CACf,KAAK,IAGU;EAAK,MAAK;EAAU,cAAY,GAAG,EAAM;YACtD,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAQ,IAAS,EAAO,OAAO,EAAO,OACtC,IAAO,EAAY,GAAQ,IAAQ,EAAO,IAAI,EAC9C,EAAE,eAAY,EAAgB,GAAQ,EAAK,EAC3C,IAAW,CAAC,GACZ,IAAQ,EAAa,GAAO,EAAO,SAAS;AAClD,UACE,kBAAC,GAAD;IAAgC,YAAY;cAA5C,CACE,kBAAC,GAAD;KAAW,YAAY;eACrB,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,mBAAmB,EAAO;MACvC,cAAY;MACZ,iBAAe,KAAY,KAAA;MACjB;MACV,WAAW,EAAE;MACb,eAAe;AACT,YAIJ,GAAU,QAAQ,EAAO,GAAG;;gBAG7B;MACM,CAAA;KACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,GAAgB,CAAA,CACX;MArBI,EAAO,GAqBX;IAEnB;EACE,CAAA"}

package/dist/chunks/{ActionsBar-9aR5N3lU.js → ActionsBar-CBi_dV4B.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./useRovingTabIndex-DBZtq4IH.js";
-import { t } from "./segmentedControl.module-DCyuDbj1.js";
-import "react";
+import { t as e } from "./useRovingTabIndex-CuUl6DLF.js";
+import { t } from "./segmentedControl.module-YXqIjnmu.js";
 import { jsx as n } from "react/jsx-runtime";
+import "react";
 //#region src/components/ActionsBar/ActionsBar.tsx
 function r(r) {
 	let { items: i, ariaLabel: a, className: o, height: s, size: c, variant: l } = r, u = (e) => {
@@ -38,4 +38,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=ActionsBar-9aR5N3lU.js.map
+//# sourceMappingURL=ActionsBar-CBi_dV4B.js.map

package/dist/chunks/{ActionsBar-9aR5N3lU.js.map → ActionsBar-CBi_dV4B.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ActionsBar-9aR5N3lU.js","names":[],"sources":["../../src/components/ActionsBar/ActionsBar.tsx"],"sourcesContent":["import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from '../segmentedControl.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\n/**\n * One button in an {@link ActionsBar}. `value` is only a React key; the item\n * carries no selected state.\n */\nexport type ActionsBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  onAction: () => void;\n};\n\n/** Segment height and type scale for an {@link ActionsBar}. */\nexport type ActionsBarSize = 'sm' | 'md';\n/** Visual treatment of an {@link ActionsBar}. */\nexport type ActionsBarVariant = 'default' | 'minimal';\n\n/** Props for {@link ActionsBar}. */\nexport type ActionsBarProps<V extends string | number = string> = {\n  items: readonly ActionsBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  size?: ActionsBarSize;\n  variant?: ActionsBarVariant;\n};\n\n/**\n * Segmented strip of momentary buttons — each press fires and nothing stays\n * selected. Shares the look and the arrow-key navigation of `ToggleBar` and\n * `OptionsBar`.\n *\n * This is a plain callback bar. For buttons driven by the kit's actions\n * registry, use `ActionBar` instead.\n */\nexport function ActionsBar<V extends string | number = string>(props: ActionsBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n\n  const fire = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onAction();\n  };\n\n  const roving = useRovingTabIndex({ items, itemClassName: s.segment, onActivate: fire });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--wzl-tb-height' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={rootCls}\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.value}\n          type=\"button\"\n          aria-label={item.ariaLabel}\n          disabled={item.disabled}\n          tabIndex={roving.tabIndexFor(i)}\n          className={s.segment}\n          onClick={() => fire(i)}\n          onKeyDown={roving.onKeyDown(i)}\n        >\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAuCA,SAAgB,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GAEzD,KAAQ,MAAkB;EAC9B,IAAM,IAAO,EAAM;AACf,IAAK,YACT,EAAK,UAAU;IAGX,IAAS,EAAkB;EAAE;EAAO,eAAe,EAAE;EAAS,YAAY;EAAM,CAAC,EAEjF,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK,EAG/C,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAChB,kBAAC,UAAD;GAEE,MAAK;GACL,cAAY,EAAK;GACjB,UAAU,EAAK;GACf,UAAU,EAAO,YAAY,EAAE;GAC/B,WAAW,EAAE;GACb,eAAe,EAAK,EAAE;GACtB,WAAW,EAAO,UAAU,EAAE;aAE7B,EAAK;GACC,EAVF,EAAK,MAUH,CACT;EACE,CAAA"}
+{"version":3,"file":"ActionsBar-CBi_dV4B.js","names":[],"sources":["../../src/components/ActionsBar/ActionsBar.tsx"],"sourcesContent":["import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from '../segmentedControl.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\n/**\n * One button in an {@link ActionsBar}. `value` is only a React key; the item\n * carries no selected state.\n */\nexport type ActionsBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  onAction: () => void;\n};\n\n/** Segment height and type scale for an {@link ActionsBar}. */\nexport type ActionsBarSize = 'sm' | 'md';\n/** Visual treatment of an {@link ActionsBar}. */\nexport type ActionsBarVariant = 'default' | 'minimal';\n\n/** Props for {@link ActionsBar}. */\nexport type ActionsBarProps<V extends string | number = string> = {\n  items: readonly ActionsBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  size?: ActionsBarSize;\n  variant?: ActionsBarVariant;\n};\n\n/**\n * Segmented strip of momentary buttons — each press fires and nothing stays\n * selected. Shares the look and the arrow-key navigation of `ToggleBar` and\n * `OptionsBar`.\n *\n * This is a plain callback bar. For buttons driven by the kit's actions\n * registry, use `ActionBar` instead.\n */\nexport function ActionsBar<V extends string | number = string>(props: ActionsBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n\n  const fire = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onAction();\n  };\n\n  const roving = useRovingTabIndex({ items, itemClassName: s.segment, onActivate: fire });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--wzl-tb-height' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={rootCls}\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => (\n        <button\n          key={item.value}\n          type=\"button\"\n          aria-label={item.ariaLabel}\n          disabled={item.disabled}\n          tabIndex={roving.tabIndexFor(i)}\n          className={s.segment}\n          onClick={() => fire(i)}\n          onKeyDown={roving.onKeyDown(i)}\n        >\n          {item.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAuCA,SAAgB,EAA+C,GAAyC;CACtG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GAEzD,KAAQ,MAAkB;EAC9B,IAAM,IAAO,EAAM;AACf,IAAK,YACT,EAAK,UAAU;IAGX,IAAS,EAAkB;EAAE;EAAO,eAAe,EAAE;EAAS,YAAY;EAAM,CAAC,EAEjF,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK,EAG/C,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAChB,kBAAC,UAAD;GAEE,MAAK;GACL,cAAY,EAAK;GACjB,UAAU,EAAK;GACf,UAAU,EAAO,YAAY,EAAE;GAC/B,WAAW,EAAE;GACb,eAAe,EAAK,EAAE;GACtB,WAAW,EAAO,UAAU,EAAE;aAE7B,EAAK;GACC,EAVF,EAAK,MAUH,CACT;EACE,CAAA"}