@weasel-js/ui 1.5.2 → 1.6.1

package/dist/chunks/ActionBar-DCq16yFA.js

@@ -0,0 +1,57 @@
+import { n as e, r as t } from "./Tooltip-Clg2mhSt.js";
+import { t as n } from "./formatShortcut-DRQrVThu.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), T = [
+		p.bar,
+		v === "vertical" && p.vertical,
+		x
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l("div", {
+		className: T,
+		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-DCq16yFA.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar-DCq16yFA.js","names":["s","TooltipTrigger","Tooltip","Tooltip$1","TooltipTrigger$1","formatShortcut","ActionBar_module_default","EMPTY_LIST","noopSubscribe","resolveIcon","override","i","item","resolveTitle","shortcut","actionShortcuts","label","ActionBar","props","registry","useActionsRegistry","depReg","useOptionalDepRegistry","items","useSyncExternalStore","a","group","actionItems","cls","orientation","className","labels","icon","icons","deps","buildDepsFromRequires","evaluateEnabled","disabled","enabled","title","Focusable"],"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":";;;;;;;;;;GCgBMO,IAAgC,OAAO,OAAO,CAAC,CAAC,GAChDC,gBAA0C,CAAC;AAyBjD,SAASC,EAAY,GAAkB,GAA4C;CACjF,IAAIC,MAAa,KAAA,GAAW,OAAOA;CACnC,IAAMC,IAAIC,EAAK;CAEf,OADI,OAAOD,KAAM,aAAmBA,EAAE,IAC/BA;AACT;AAEA,SAASE,EAAa,GAAe,GAA0B;CAC7D,IAAMC,IAAWF,EAAK,OAAO,YAAYP,EAAeU,EAAgBH,EAAK,QAAQA,EAAK,MAAM,CAAC,CAAC,EAAE;CACpG,OAAOE,IAAW,GAAGE,EAAM,IAAIF,EAAS,KAAKE;AAC/C;AAgBA,SAAgBC,EAAU,GAAuB;CAC/C,IAAM,EAAE,UAAO,iBAAc,cAAc,UAAO,WAAQ,iBAAcC,GAClEC,IAAWC,EAAmB,GAC9BC,IAASC,EAAuB,GAMhCC,IALMC,EACVL,IAAWA,EAAS,YAAYX,GAChCW,IAAWA,EAAS,aAAaZ,GACjCY,IAAWA,EAAS,aAAaZ,CAErB,CAAA,CAAI,QAAQ,MAAMkB,EAAE,UAAUC,CAAK,CAAC,CAAC,QAAQC,CAAW,GAEhEC,IAAM;EAAC5B,EAAE;EAAK6B,MAAgB,cAAc7B,EAAE;EAAU8B;CAAS,CAAC,CACrE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAWF;EAAK,MAAK;EAAU,cAAY,GAAGF,EAAM;EACtD,UAAAH,EAAM,KAAK,MAAS;GACnB,IAAMP,IAAQe,IAASnB,EAAK,QAAQA,EAAK,OACnCoB,IAAOvB,EAAYG,GAAMqB,IAAQrB,EAAK,IAAI,GAG1CsB,IAAOb,IAASc,EAAsBvB,EAAK,QAAQS,CAAM,IAAI,KAAA,GAC7D,EAAE,eAAYe,EAAgBxB,EAAK,QAAQsB,CAAI,GAC/CG,IAAW,CAACC,GACZC,IAAQ1B,EAAaG,GAAOJ,CAAI;GACtC,OACE,kBAACX,GAAD;IAA+B,YAAYoC;IAA3C,UAAA,CACE,kBAACG,GAAD;KAAW,YAAYH;KACrB,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,mBAAmBzB,EAAK;MACrC,cAAYI;MACZ,iBAAeqB,KAAY,KAAA;MACjB;MACV,WAAWrC,EAAE;MACb,eAAe;OACb,AAAIqC,KAIJlB,GAAU,QAAQP,EAAK,OAAO,IAAIA,EAAK,MAAM;MAC/C;MAEC,UAAAoB;KACK,CAAA;IACC,CAAA,GACX,kBAAC9B,GAAD,EAAA,UAAUqC,EAAe,CAAA,CACX;GArBK,GAAA3B,EAAK,GAqBV;EAEpB,CAAC;CACE,CAAA;AAET"}