@weasel-js/ui 1.5.2 → 1.6.0

package/dist/chunks/ActionBar-CYvfmEz0.js

@@ -0,0 +1,57 @@
+import { n as e, r as t } from "./Tooltip-9XiJF937.js";
+import { t as n } from "./formatShortcut-BoGqUoWi.js";
+import { actionItems as r, actionShortcuts as i, buildDepsFromRequires as a, evaluateEnabled as o, useActionsRegistry as s, useOptionalDepRegistry as c } from "@weasel-js/core";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useSyncExternalStore as d } from "react";
+import { Focusable as f } from "react-aria-components";
+var p = {
+	bar: "_bar_1x8zd_7",
+	vertical: "_vertical_1x8zd_18",
+	button: "_button_1x8zd_22"
+}, m = Object.freeze([]), h = () => () => {};
+function g(e, t) {
+	if (t !== void 0) return t;
+	let n = e.icon;
+	return typeof n == "function" ? n() : n;
+}
+function _(e, t) {
+	let r = t.action.shortcut ?? n(i(t.action, t.params)[0]);
+	return r ? `${e} (${r})` : e;
+}
+function v(n) {
+	let { group: i, orientation: v = "horizontal", icons: y, labels: b, className: x } = n, S = s(), C = c(), w = d(S ? S.subscribe : h, S ? S.list : () => m, S ? S.list : () => m).filter((e) => e.group === i).flatMap(r);
+	return /* @__PURE__ */ l("div", {
+		className: [
+			p.bar,
+			v === "vertical" && p.vertical,
+			x
+		].filter(Boolean).join(" "),
+		role: "toolbar",
+		"aria-label": `${i} actions`,
+		children: w.map((n) => {
+			let r = b?.[n.key] ?? n.label, i = g(n, y?.[n.key]), s = C ? a(n.action, C) : void 0, { enabled: c } = o(n.action, s), d = !c, m = _(r, n);
+			return /* @__PURE__ */ u(t, {
+				isDisabled: d,
+				children: [/* @__PURE__ */ l(f, {
+					isDisabled: d,
+					children: /* @__PURE__ */ l("button", {
+						type: "button",
+						"data-testid": `action-bar-item-${n.key}`,
+						"aria-label": r,
+						"aria-disabled": d || void 0,
+						disabled: d,
+						className: p.button,
+						onClick: () => {
+							d || S?.trigger(n.action.id, n.params);
+						},
+						children: i
+					})
+				}), /* @__PURE__ */ l(e, { children: m })]
+			}, n.key);
+		})
+	});
+}
+//#endregion
+export { v as t };
+
+//# sourceMappingURL=ActionBar-CYvfmEz0.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar-CYvfmEz0.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: var(--wzl-space-1);\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: var(--wzl-tb-height);\n  height: var(--wzl-tb-height);\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  buildDepsFromRequires,\n  actionItems,\n  actionShortcuts,\n  type Action,\n  type ActionItem,\n} from '@weasel-js/core';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { formatShortcut } from '../ToolPalette/formatShortcut';\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-entry icon overrides, keyed by `ActionItem.key` — the action id, or\n   * `id:variant` for one variant of a parametric action. 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-entry label overrides, keyed like `icons`. Drives both `aria-label`\n   * and `title`. When omitted, the entry'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(item: ActionItem, override: ReactNode | undefined): ReactNode {\n  if (override !== undefined) return override;\n  const i = item.icon;\n  if (typeof i === 'function') return i();\n  return i;\n}\n\nfunction resolveTitle(label: string, item: ActionItem): string {\n  const shortcut = item.action.shortcut ?? formatShortcut(actionShortcuts(item.action, item.params)[0]);\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 — or per variant, for an action that declares\n * `variants`. 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 items = all.filter((a) => a.group === group).flatMap(actionItems);\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      {items.map((item) => {\n        const label = labels?.[item.key] ?? item.label;\n        const icon = resolveIcon(item, icons?.[item.key]);\n        // Read at render: `enabled` reflects whatever the deps hold now, so\n        // the bar is current as long as its parent re-renders on changes.\n        const deps = depReg ? buildDepsFromRequires(item.action, depReg) : undefined;\n        const { enabled } = evaluateEnabled(item.action, deps);\n        const disabled = !enabled;\n        const title = resolveTitle(label, item);\n        return (\n          <TooltipTrigger key={item.key} isDisabled={disabled}>\n            <Focusable isDisabled={disabled}>\n              <button\n                type=\"button\"\n                data-testid={`action-bar-item-${item.key}`}\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(item.action.id, item.params);\n                }}\n              >\n                {icon}\n              </button>\n            </Focusable>\n            <Tooltip>{title}</Tooltip>\n          </TooltipTrigger>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;GCgBM,IAAgC,OAAO,OAAO,EAAE,CAAC,EACjD,gBAA0C;AAyBhD,SAAS,EAAY,GAAkB,GAA4C;AACjF,KAAI,MAAa,KAAA,EAAW,QAAO;CACnC,IAAM,IAAI,EAAK;AAEf,QADI,OAAO,KAAM,aAAmB,GAAG,GAChC;;AAGT,SAAS,EAAa,GAAe,GAA0B;CAC7D,IAAM,IAAW,EAAK,OAAO,YAAY,EAAe,EAAgB,EAAK,QAAQ,EAAK,OAAO,CAAC,GAAG;AACrG,QAAO,IAAW,GAAG,EAAM,IAAI,EAAS,KAAK;;AAiB/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,EAErB,CAAI,QAAQ,MAAM,EAAE,UAAU,EAAM,CAAC,QAAQ,EAAY;AAMvE,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,EAAM,KAAK,MAAS;GACnB,IAAM,IAAQ,IAAS,EAAK,QAAQ,EAAK,OACnC,IAAO,EAAY,GAAM,IAAQ,EAAK,KAAK,EAG3C,IAAO,IAAS,EAAsB,EAAK,QAAQ,EAAO,GAAG,KAAA,GAC7D,EAAE,eAAY,EAAgB,EAAK,QAAQ,EAAK,EAChD,IAAW,CAAC,GACZ,IAAQ,EAAa,GAAO,EAAK;AACvC,UACE,kBAAC,GAAD;IAA+B,YAAY;cAA3C,CACE,kBAAC,GAAD;KAAW,YAAY;eACrB,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,mBAAmB,EAAK;MACrC,cAAY;MACZ,iBAAe,KAAY,KAAA;MACjB;MACV,WAAW,EAAE;MACb,eAAe;AACT,YAIJ,GAAU,QAAQ,EAAK,OAAO,IAAI,EAAK,OAAO;;gBAG/C;MACM,CAAA;KACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,GAAgB,CAAA,CACX;MArBI,EAAK,IAqBT;IAEnB;EACE,CAAA"}