@weasel-js/ui 1.7.0 → 1.7.1

package/dist/chunks/ActionBar-xA73vzzF.js

@@ -0,0 +1,64 @@
+import { n as e, r as t } from "./Tooltip-C6eFCYxw.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 { useLayoutEffect as d, useReducer as f, useSyncExternalStore as p } from "react";
+import { Focusable as m } from "react-aria-components";
+var h = {
+	bar: "_bar_1x8zd_7",
+	vertical: "_vertical_1x8zd_18",
+	button: "_button_1x8zd_22"
+}, g = Object.freeze([]), _ = () => () => {};
+function v(e, t) {
+	if (t !== void 0) return t;
+	let n = e.icon;
+	return typeof n == "function" ? n() : n;
+}
+function y(e, t) {
+	let r = t.action.shortcut ?? n(i(t.action, t.params)[0]);
+	return r ? `${e} (${r})` : e;
+}
+function b(n) {
+	let { group: i, orientation: b = "horizontal", icons: x, labels: S, className: C } = n, w = s(), T = c(), E = p(w ? w.subscribe : _, w ? w.list : () => g, w ? w.list : () => g).filter((e) => e.group === i).flatMap(r), D = (e) => {
+		let t = T ? a(e.action, T) : void 0;
+		return o(e.action, t).enabled;
+	}, O = E.map(D), [, k] = f((e) => e + 1, 0);
+	d(() => {
+		E.some((e, t) => D(e) !== O[t]) && k();
+	});
+	let A = [
+		h.bar,
+		b === "vertical" && h.vertical,
+		C
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l("div", {
+		className: A,
+		role: "toolbar",
+		"aria-label": `${i} actions`,
+		children: E.map((n, r) => {
+			let i = S?.[n.key] ?? n.label, a = v(n, x?.[n.key]), o = !O[r], s = y(i, n);
+			return /* @__PURE__ */ u(t, {
+				isDisabled: o,
+				children: [/* @__PURE__ */ l(m, {
+					isDisabled: o,
+					children: /* @__PURE__ */ l("button", {
+						type: "button",
+						"data-testid": `action-bar-item-${n.key}`,
+						"aria-label": i,
+						"aria-disabled": o || void 0,
+						disabled: o,
+						className: h.button,
+						onClick: () => {
+							o || w?.trigger(n.action.id, n.params);
+						},
+						children: a
+					})
+				}), /* @__PURE__ */ l(e, { children: s })]
+			}, n.key);
+		})
+	});
+}
+//#endregion
+export { b as t };
+
+//# sourceMappingURL=ActionBar-xA73vzzF.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar-xA73vzzF.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","isEnabled","deps","buildDepsFromRequires","evaluateEnabled","shown","recheck","useReducer","n","cls","orientation","className","labels","icon","icons","disabled","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 { useLayoutEffect, useReducer, 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  const isEnabled = (item: ActionItem): boolean => {\n    const deps = depReg ? buildDepsFromRequires(item.action, depReg) : undefined;\n    return evaluateEnabled(item.action, deps).enabled;\n  };\n  // Dep sources publish on commit, so a render reads the previous commit's\n  // deps. Once this one commits, re-render if what they say now differs.\n  const shown = items.map(isEnabled);\n  const [, recheck] = useReducer((n: number) => n + 1, 0);\n  useLayoutEffect(() => {\n    if (items.some((item, i) => isEnabled(item) !== shown[i])) recheck();\n  });\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, i) => {\n        const label = labels?.[item.key] ?? item.label;\n        const icon = resolveIcon(item, icons?.[item.key]);\n        const disabled = !shown[i];\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,GAChEC,KAAa,MAA8B;EAC/C,IAAMC,IAAOR,IAASS,EAAsBlB,EAAK,QAAQS,CAAM,IAAI,KAAA;EACnE,OAAOU,EAAgBnB,EAAK,QAAQiB,CAAI,CAAC,CAAC;CAC5C,GAGMG,IAAQT,EAAM,IAAIK,CAAS,GAC3B,GAAGK,KAAWC,GAAY,MAAcC,IAAI,GAAG,CAAC;CACtD,QAAsB;EACpB,AAAIZ,EAAM,MAAM,GAAM,MAAMK,EAAUhB,CAAI,MAAMoB,EAAMrB,EAAE,KAAGsB,EAAQ;CACrE,CAAC;CAED,IAAMG,IAAM;EAACpC,EAAE;EAAKqC,MAAgB,cAAcrC,EAAE;EAAUsC;CAAS,CAAC,CACrE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAWF;EAAK,MAAK;EAAU,cAAY,GAAGV,EAAM;EACtD,UAAAH,EAAM,KAAK,GAAM,MAAM;GACtB,IAAMP,IAAQuB,IAAS3B,EAAK,QAAQA,EAAK,OACnC4B,IAAO/B,EAAYG,GAAM6B,IAAQ7B,EAAK,IAAI,GAC1C8B,IAAW,CAACV,EAAMrB,IAClBgC,IAAQ9B,EAAaG,GAAOJ,CAAI;GACtC,OACE,kBAACX,GAAD;IAA+B,YAAYyC;IAA3C,UAAA,CACE,kBAACE,GAAD;KAAW,YAAYF;KACrB,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,eAAa,mBAAmB9B,EAAK;MACrC,cAAYI;MACZ,iBAAe0B,KAAY,KAAA;MACjB;MACV,WAAW1C,EAAE;MACb,eAAe;OACb,AAAI0C,KAIJvB,GAAU,QAAQP,EAAK,OAAO,IAAIA,EAAK,MAAM;MAC/C;MAEC,UAAA4B;KACK,CAAA;IACC,CAAA,GACX,kBAACtC,GAAD,EAAA,UAAUyC,EAAe,CAAA,CACX;GArBK,GAAA/B,EAAK,GAqBV;EAEpB,CAAC;CACE,CAAA;AAET"}