@pixerate/editor-react 0.14.0 → 0.16.0

package/dist/commands/index.cjs

@@ -0,0 +1,232 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/commands/index.ts
+var commands_exports = {};
+__export(commands_exports, {
+  CommandPalette: () => CommandPalette,
+  useCommandPalette: () => useCommandPalette,
+  useCommandShortcuts: () => useCommandShortcuts,
+  useRegisterCommands: () => useRegisterCommands
+});
+module.exports = __toCommonJS(commands_exports);
+
+// src/commands/useCommandPalette.ts
+var import_react = require("react");
+var import_commands = require("@pixerate/editor/commands");
+function useCommandPalette(registry, options = {}) {
+  const optionsRef = (0, import_react.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react.useMemo)(
+    () => (0, import_commands.createCommandPaletteController)(registry, {
+      context: () => {
+        const c = optionsRef.current.context;
+        if (c === void 0) return registry.context;
+        return typeof c === "function" ? c() : c;
+      },
+      scope: () => {
+        const s = optionsRef.current.scope;
+        return typeof s === "function" ? s() : s;
+      },
+      recents: options.recents,
+      recentLimit: options.recentLimit,
+      limit: options.limit,
+      platform: options.platform,
+      onRecentsChange: (recents) => optionsRef.current.onRecentsChange?.(recents),
+      onRun: (result) => optionsRef.current.onRun?.(result)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [registry]
+  );
+  const state = (0, import_react.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  const { hotkey, hotkeyTarget } = options;
+  (0, import_react.useEffect)(() => {
+    if (!hotkey) return;
+    const target = hotkeyTarget ?? (typeof window !== "undefined" ? window : null);
+    if (!target) return;
+    const onKeyDown = (event) => {
+      const e = event;
+      if (e.defaultPrevented || !(0, import_commands.matchPaletteHotkey)(e, hotkey, optionsRef.current.platform)) return;
+      e.preventDefault();
+      controller.toggle();
+    };
+    target.addEventListener("keydown", onKeyDown);
+    return () => target.removeEventListener("keydown", onKeyDown);
+  }, [controller, hotkey, hotkeyTarget]);
+  return {
+    ...state,
+    controller,
+    setOpen: controller.setOpen,
+    toggle: controller.toggle,
+    setQuery: controller.setQuery,
+    setActiveIndex: controller.setActiveIndex,
+    move: controller.move,
+    run: controller.run,
+    runActive: controller.runActive,
+    handleKeyDown: controller.handleKeyDown
+  };
+}
+
+// src/commands/CommandPalette.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+function HighlightedLabel({ item }) {
+  if (item.labelIndices.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: item.label });
+  const marked = new Set(item.labelIndices);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Array.from(item.label).map(
+    (ch, i) => marked.has(i) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-foreground", "data-match": "", children: ch }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.default.Fragment, { children: ch }, i)
+  ) });
+}
+var CommandPalette = ({
+  palette,
+  placeholder = "Type a command\u2026",
+  emptyMessage = "No matching commands",
+  className = ""
+}) => {
+  const inputRef = (0, import_react2.useRef)(null);
+  const listRef = (0, import_react2.useRef)(null);
+  const baseId = (0, import_react2.useId)();
+  const listId = `${baseId}-list`;
+  const optionId = (index) => `${baseId}-option-${index}`;
+  const { open, query, items, activeIndex } = palette;
+  (0, import_react2.useEffect)(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+  (0, import_react2.useEffect)(() => {
+    if (!open) return;
+    const active = listRef.current?.querySelector('[aria-selected="true"]');
+    active?.scrollIntoView?.({ block: "nearest" });
+  }, [open, activeIndex]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[15vh]",
+      "data-command-palette-backdrop": "",
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget) palette.setOpen(false);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
+          className: `w-full max-w-lg overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-xl ${className}`,
+          style: { background: "var(--popover, var(--background, #fff))" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": "true",
+                "aria-controls": listId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": items.length ? optionId(activeIndex) : void 0,
+                "aria-label": "Search commands",
+                placeholder,
+                value: query,
+                onChange: (e) => palette.setQuery(e.target.value),
+                onKeyDown: (e) => {
+                  if (palette.handleKeyDown(e.nativeEvent)) e.stopPropagation();
+                },
+                className: "w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
+              }
+            ),
+            items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "max-h-80 overflow-y-auto py-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "li",
+              {
+                id: optionId(index),
+                role: "option",
+                "aria-selected": index === activeIndex,
+                "aria-disabled": !item.enabled || void 0,
+                "data-command-id": item.id,
+                "data-recent": item.recent ? "" : void 0,
+                title: item.disabledReason,
+                onMouseMove: () => index !== activeIndex && palette.setActiveIndex(index),
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => palette.run(item.id),
+                className: `flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm ${index === activeIndex ? "bg-muted" : ""} ${item.enabled ? "" : "cursor-default opacity-50"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HighlightedLabel, { item }),
+                    item.disabledReason && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", "data-disabled-reason": "", children: item.disabledReason })
+                  ] }),
+                  item.group && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.group }),
+                  item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("kbd", { className: "shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground", children: item.shortcut })
+                ]
+              },
+              item.id
+            )) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/commands/useCommandShortcuts.ts
+var import_react3 = require("react");
+function useCommandShortcuts(registry, options = {}) {
+  const optionsRef = (0, import_react3.useRef)(options);
+  optionsRef.current = options;
+  const { enabled = true, target } = options;
+  (0, import_react3.useEffect)(() => {
+    if (!registry || !enabled) return;
+    const eventTarget = target ?? (typeof window !== "undefined" ? window : null);
+    if (!eventTarget) return;
+    const onKeyDown = (event) => {
+      const { scopes, context, allowInEditable, onRun } = optionsRef.current;
+      const result = registry.handleKeyDown(event, {
+        scopes,
+        ...allowInEditable !== void 0 ? { allowInEditable } : {},
+        ...context !== void 0 ? { context } : {}
+      });
+      if (result) onRun?.(result);
+    };
+    eventTarget.addEventListener("keydown", onKeyDown);
+    return () => eventTarget.removeEventListener("keydown", onKeyDown);
+  }, [registry, enabled, target]);
+}
+function useRegisterCommands(registry, specs) {
+  (0, import_react3.useEffect)(() => {
+    if (!registry || !specs || specs.length === 0) return;
+    return registry.register(specs);
+  }, [registry, specs]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CommandPalette,
+  useCommandPalette,
+  useCommandShortcuts,
+  useRegisterCommands
+});
+//# sourceMappingURL=index.cjs.map

package/dist/commands/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/commands/index.ts","../../src/commands/useCommandPalette.ts","../../src/commands/CommandPalette.tsx","../../src/commands/useCommandShortcuts.ts"],"sourcesContent":["export * from './useCommandPalette';\nexport * from './CommandPalette';\nexport * from './useCommandShortcuts';\n","import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  createCommandPaletteController,\n  matchPaletteHotkey,\n  type CommandPaletteController,\n  type CommandPaletteOptions,\n  type CommandPaletteState,\n  type CommandRegistry,\n} from '@pixerate/editor/commands';\n\nexport interface UseCommandPaletteOptions<TContext = any> extends CommandPaletteOptions<TContext> {\n  /** Chord that toggles the palette from anywhere, also while typing (e.g. `Mod+K`). */\n  hotkey?: string;\n  /** Element or window the hotkey listens on (default: `window`). */\n  hotkeyTarget?: Window | HTMLElement | null;\n}\n\nexport interface UseCommandPaletteResult extends CommandPaletteState {\n  controller: CommandPaletteController;\n  setOpen: (open: boolean) => void;\n  toggle: () => void;\n  setQuery: (query: string) => void;\n  setActiveIndex: (index: number) => void;\n  move: (delta: number) => void;\n  run: CommandPaletteController['run'];\n  runActive: CommandPaletteController['runActive'];\n  handleKeyDown: CommandPaletteController['handleKeyDown'];\n}\n\n/**\n * Command palette state over a `CommandRegistry` (ranked rows with shortcuts and\n * disabled reasons, active row, recents). Render it with `<CommandPalette palette={…} />`\n * or your own UI. Options are read live; the registry identity is the dependency.\n */\nexport function useCommandPalette<TContext = any>(\n  registry: CommandRegistry<TContext>,\n  options: UseCommandPaletteOptions<TContext> = {},\n): UseCommandPaletteResult {\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const controller = useMemo(\n    () =>\n      createCommandPaletteController(registry, {\n        context: () => {\n          const c = optionsRef.current.context;\n          if (c === undefined) return registry.context;\n          return (typeof c === 'function' ? (c as () => TContext)() : c) as TContext;\n        },\n        scope: () => {\n          const s = optionsRef.current.scope;\n          return typeof s === 'function' ? s() : s;\n        },\n        recents: options.recents,\n        recentLimit: options.recentLimit,\n        limit: options.limit,\n        platform: options.platform,\n        onRecentsChange: (recents) => optionsRef.current.onRecentsChange?.(recents),\n        onRun: (result) => optionsRef.current.onRun?.(result),\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [registry],\n  );\n\n  const state = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);\n\n  const { hotkey, hotkeyTarget } = options;\n  useEffect(() => {\n    if (!hotkey) return;\n    const target = hotkeyTarget ?? (typeof window !== 'undefined' ? window : null);\n    if (!target) return;\n    const onKeyDown = (event: Event) => {\n      const e = event as KeyboardEvent;\n      if (e.defaultPrevented || !matchPaletteHotkey(e, hotkey, optionsRef.current.platform)) return;\n      e.preventDefault();\n      controller.toggle();\n    };\n    target.addEventListener('keydown', onKeyDown);\n    return () => target.removeEventListener('keydown', onKeyDown);\n  }, [controller, hotkey, hotkeyTarget]);\n\n  return {\n    ...state,\n    controller,\n    setOpen: controller.setOpen,\n    toggle: controller.toggle,\n    setQuery: controller.setQuery,\n    setActiveIndex: controller.setActiveIndex,\n    move: controller.move,\n    run: controller.run,\n    runActive: controller.runActive,\n    handleKeyDown: controller.handleKeyDown,\n  };\n}\n","import React, { useEffect, useId, useRef } from 'react';\nimport type { CommandPaletteItem } from '@pixerate/editor/commands';\nimport type { UseCommandPaletteResult } from './useCommandPalette';\n\nexport interface CommandPaletteProps {\n  /** State from `useCommandPalette`. */\n  palette: UseCommandPaletteResult;\n  placeholder?: string;\n  emptyMessage?: string;\n  /** Extra classes for the dialog panel. */\n  className?: string;\n}\n\n/** Label with the fuzzy-matched characters emphasised. */\nfunction HighlightedLabel({ item }: { item: CommandPaletteItem }) {\n  if (item.labelIndices.length === 0) return <>{item.label}</>;\n  const marked = new Set(item.labelIndices);\n  return (\n    <>\n      {Array.from(item.label).map((ch, i) =>\n        marked.has(i) ? (\n          <span key={i} className=\"font-semibold text-foreground\" data-match=\"\">\n            {ch}\n          </span>\n        ) : (\n          <React.Fragment key={i}>{ch}</React.Fragment>\n        ),\n      )}\n    </>\n  );\n}\n\n/**\n * Headless-styled command palette (Tailwind + theme tokens): a search box over the\n * registry's commands showing each command's group, shortcut and, for disabled\n * commands, the reason. Arrow keys move, Enter runs, Escape or a backdrop click closes.\n */\nexport const CommandPalette: React.FC<CommandPaletteProps> = ({\n  palette,\n  placeholder = 'Type a command…',\n  emptyMessage = 'No matching commands',\n  className = '',\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n  const baseId = useId();\n  const listId = `${baseId}-list`;\n  const optionId = (index: number) => `${baseId}-option-${index}`;\n  const { open, query, items, activeIndex } = palette;\n\n  useEffect(() => {\n    if (open) inputRef.current?.focus();\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const active = listRef.current?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n    active?.scrollIntoView?.({ block: 'nearest' });\n  }, [open, activeIndex]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-start justify-center bg-black/30 px-4 pt-[15vh]\"\n      data-command-palette-backdrop=\"\"\n      onMouseDown={(e) => {\n        if (e.target === e.currentTarget) palette.setOpen(false);\n      }}\n    >\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Command palette\"\n        className={`w-full max-w-lg overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-xl ${className}`}\n        style={{ background: 'var(--popover, var(--background, #fff))' }}\n      >\n        <input\n          ref={inputRef}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded=\"true\"\n          aria-controls={listId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={items.length ? optionId(activeIndex) : undefined}\n          aria-label=\"Search commands\"\n          placeholder={placeholder}\n          value={query}\n          onChange={(e) => palette.setQuery(e.target.value)}\n          onKeyDown={(e) => {\n            if (palette.handleKeyDown(e.nativeEvent)) e.stopPropagation();\n          }}\n          className=\"w-full border-b border-border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground\"\n        />\n        {items.length === 0 ? (\n          <div className=\"px-3 py-6 text-center text-sm text-muted-foreground\">{emptyMessage}</div>\n        ) : (\n          <ul ref={listRef} id={listId} role=\"listbox\" aria-label=\"Commands\" className=\"max-h-80 overflow-y-auto py-1\">\n            {items.map((item, index) => (\n              <li\n                key={item.id}\n                id={optionId(index)}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                aria-disabled={!item.enabled || undefined}\n                data-command-id={item.id}\n                data-recent={item.recent ? '' : undefined}\n                title={item.disabledReason}\n                onMouseMove={() => index !== activeIndex && palette.setActiveIndex(index)}\n                onMouseDown={(e) => e.preventDefault()}\n                onClick={() => palette.run(item.id)}\n                className={`flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm ${\n                  index === activeIndex ? 'bg-muted' : ''\n                } ${item.enabled ? '' : 'cursor-default opacity-50'}`}\n              >\n                <span className=\"min-w-0 flex-1 truncate\">\n                  <HighlightedLabel item={item} />\n                  {item.disabledReason && (\n                    <span className=\"ml-2 text-xs text-muted-foreground\" data-disabled-reason=\"\">\n                      {item.disabledReason}\n                    </span>\n                  )}\n                </span>\n                {item.group && <span className=\"shrink-0 text-xs text-muted-foreground\">{item.group}</span>}\n                {item.shortcut && (\n                  <kbd className=\"shrink-0 rounded border border-border px-1.5 font-mono text-[10px] text-muted-foreground\">\n                    {item.shortcut}\n                  </kbd>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { CommandRegistry, CommandResult, CommandSpec } from '@pixerate/editor/commands';\n\nexport interface UseCommandShortcutsOptions<TContext = any> {\n  /** Default `true`. */\n  enabled?: boolean;\n  /** Element or window to listen on (default: `window`). */\n  target?: Window | HTMLElement | null;\n  /** Active scopes, most specific first (e.g. `'canvas'` while the canvas has focus). */\n  scopes?: string | readonly string[];\n  /** Context for the commands (default: the registry's). */\n  context?: TContext;\n  /** Fire even while typing in inputs / contenteditable (default: per binding). */\n  allowInEditable?: boolean;\n  /** Called after a shortcut ran a command. */\n  onRun?: (result: CommandResult) => void;\n}\n\n/**\n * Runs the registry's commands from their keyboard shortcuts (`registry.handleKeyDown`).\n * Typing in inputs and editors is never hijacked, and disabled commands leave the\n * event alone. Options are read live.\n */\nexport function useCommandShortcuts<TContext = any>(\n  registry: CommandRegistry<TContext> | null | undefined,\n  options: UseCommandShortcutsOptions<TContext> = {},\n): void {\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  const { enabled = true, target } = options;\n\n  useEffect(() => {\n    if (!registry || !enabled) return;\n    const eventTarget = target ?? (typeof window !== 'undefined' ? window : null);\n    if (!eventTarget) return;\n    const onKeyDown = (event: Event) => {\n      const { scopes, context, allowInEditable, onRun } = optionsRef.current;\n      const result = registry.handleKeyDown(event as KeyboardEvent, {\n        scopes,\n        ...(allowInEditable !== undefined ? { allowInEditable } : {}),\n        ...(context !== undefined ? { context } : {}),\n      });\n      if (result) onRun?.(result);\n    };\n    eventTarget.addEventListener('keydown', onKeyDown);\n    return () => eventTarget.removeEventListener('keydown', onKeyDown);\n  }, [registry, enabled, target]);\n}\n\n/**\n * Registers commands while the component is mounted. Memoize `specs` (e.g. with\n * `useMemo(() => createHistoryCommands(manager), [manager])`): a new array re-registers.\n */\nexport function useRegisterCommands<TContext = any>(\n  registry: CommandRegistry<TContext> | null | undefined,\n  specs: readonly CommandSpec<TContext>[] | null | undefined,\n): void {\n  useEffect(() => {\n    if (!registry || !specs || specs.length === 0) return;\n    return registry.register(specs);\n  }, [registry, specs]);\n}\n"],"mappings":"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","names":["import_react","React","import_react"]}

package/dist/commands/index.d.cts

@@ -0,0 +1,69 @@
+import { CommandPaletteState, CommandPaletteController, CommandPaletteOptions, CommandRegistry, CommandResult, CommandSpec } from '@pixerate/editor/commands';
+import React__default from 'react';
+
+interface UseCommandPaletteOptions<TContext = any> extends CommandPaletteOptions<TContext> {
+    /** Chord that toggles the palette from anywhere, also while typing (e.g. `Mod+K`). */
+    hotkey?: string;
+    /** Element or window the hotkey listens on (default: `window`). */
+    hotkeyTarget?: Window | HTMLElement | null;
+}
+interface UseCommandPaletteResult extends CommandPaletteState {
+    controller: CommandPaletteController;
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+    setQuery: (query: string) => void;
+    setActiveIndex: (index: number) => void;
+    move: (delta: number) => void;
+    run: CommandPaletteController['run'];
+    runActive: CommandPaletteController['runActive'];
+    handleKeyDown: CommandPaletteController['handleKeyDown'];
+}
+/**
+ * Command palette state over a `CommandRegistry` (ranked rows with shortcuts and
+ * disabled reasons, active row, recents). Render it with `<CommandPalette palette={…} />`
+ * or your own UI. Options are read live; the registry identity is the dependency.
+ */
+declare function useCommandPalette<TContext = any>(registry: CommandRegistry<TContext>, options?: UseCommandPaletteOptions<TContext>): UseCommandPaletteResult;
+
+interface CommandPaletteProps {
+    /** State from `useCommandPalette`. */
+    palette: UseCommandPaletteResult;
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Extra classes for the dialog panel. */
+    className?: string;
+}
+/**
+ * Headless-styled command palette (Tailwind + theme tokens): a search box over the
+ * registry's commands showing each command's group, shortcut and, for disabled
+ * commands, the reason. Arrow keys move, Enter runs, Escape or a backdrop click closes.
+ */
+declare const CommandPalette: React__default.FC<CommandPaletteProps>;
+
+interface UseCommandShortcutsOptions<TContext = any> {
+    /** Default `true`. */
+    enabled?: boolean;
+    /** Element or window to listen on (default: `window`). */
+    target?: Window | HTMLElement | null;
+    /** Active scopes, most specific first (e.g. `'canvas'` while the canvas has focus). */
+    scopes?: string | readonly string[];
+    /** Context for the commands (default: the registry's). */
+    context?: TContext;
+    /** Fire even while typing in inputs / contenteditable (default: per binding). */
+    allowInEditable?: boolean;
+    /** Called after a shortcut ran a command. */
+    onRun?: (result: CommandResult) => void;
+}
+/**
+ * Runs the registry's commands from their keyboard shortcuts (`registry.handleKeyDown`).
+ * Typing in inputs and editors is never hijacked, and disabled commands leave the
+ * event alone. Options are read live.
+ */
+declare function useCommandShortcuts<TContext = any>(registry: CommandRegistry<TContext> | null | undefined, options?: UseCommandShortcutsOptions<TContext>): void;
+/**
+ * Registers commands while the component is mounted. Memoize `specs` (e.g. with
+ * `useMemo(() => createHistoryCommands(manager), [manager])`): a new array re-registers.
+ */
+declare function useRegisterCommands<TContext = any>(registry: CommandRegistry<TContext> | null | undefined, specs: readonly CommandSpec<TContext>[] | null | undefined): void;
+
+export { CommandPalette, type CommandPaletteProps, type UseCommandPaletteOptions, type UseCommandPaletteResult, type UseCommandShortcutsOptions, useCommandPalette, useCommandShortcuts, useRegisterCommands };

package/dist/commands/index.d.ts

@@ -0,0 +1,69 @@
+import { CommandPaletteState, CommandPaletteController, CommandPaletteOptions, CommandRegistry, CommandResult, CommandSpec } from '@pixerate/editor/commands';
+import React__default from 'react';
+
+interface UseCommandPaletteOptions<TContext = any> extends CommandPaletteOptions<TContext> {
+    /** Chord that toggles the palette from anywhere, also while typing (e.g. `Mod+K`). */
+    hotkey?: string;
+    /** Element or window the hotkey listens on (default: `window`). */
+    hotkeyTarget?: Window | HTMLElement | null;
+}
+interface UseCommandPaletteResult extends CommandPaletteState {
+    controller: CommandPaletteController;
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+    setQuery: (query: string) => void;
+    setActiveIndex: (index: number) => void;
+    move: (delta: number) => void;
+    run: CommandPaletteController['run'];
+    runActive: CommandPaletteController['runActive'];
+    handleKeyDown: CommandPaletteController['handleKeyDown'];
+}
+/**
+ * Command palette state over a `CommandRegistry` (ranked rows with shortcuts and
+ * disabled reasons, active row, recents). Render it with `<CommandPalette palette={…} />`
+ * or your own UI. Options are read live; the registry identity is the dependency.
+ */
+declare function useCommandPalette<TContext = any>(registry: CommandRegistry<TContext>, options?: UseCommandPaletteOptions<TContext>): UseCommandPaletteResult;
+
+interface CommandPaletteProps {
+    /** State from `useCommandPalette`. */
+    palette: UseCommandPaletteResult;
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Extra classes for the dialog panel. */
+    className?: string;
+}
+/**
+ * Headless-styled command palette (Tailwind + theme tokens): a search box over the
+ * registry's commands showing each command's group, shortcut and, for disabled
+ * commands, the reason. Arrow keys move, Enter runs, Escape or a backdrop click closes.
+ */
+declare const CommandPalette: React__default.FC<CommandPaletteProps>;
+
+interface UseCommandShortcutsOptions<TContext = any> {
+    /** Default `true`. */
+    enabled?: boolean;
+    /** Element or window to listen on (default: `window`). */
+    target?: Window | HTMLElement | null;
+    /** Active scopes, most specific first (e.g. `'canvas'` while the canvas has focus). */
+    scopes?: string | readonly string[];
+    /** Context for the commands (default: the registry's). */
+    context?: TContext;
+    /** Fire even while typing in inputs / contenteditable (default: per binding). */
+    allowInEditable?: boolean;
+    /** Called after a shortcut ran a command. */
+    onRun?: (result: CommandResult) => void;
+}
+/**
+ * Runs the registry's commands from their keyboard shortcuts (`registry.handleKeyDown`).
+ * Typing in inputs and editors is never hijacked, and disabled commands leave the
+ * event alone. Options are read live.
+ */
+declare function useCommandShortcuts<TContext = any>(registry: CommandRegistry<TContext> | null | undefined, options?: UseCommandShortcutsOptions<TContext>): void;
+/**
+ * Registers commands while the component is mounted. Memoize `specs` (e.g. with
+ * `useMemo(() => createHistoryCommands(manager), [manager])`): a new array re-registers.
+ */
+declare function useRegisterCommands<TContext = any>(registry: CommandRegistry<TContext> | null | undefined, specs: readonly CommandSpec<TContext>[] | null | undefined): void;
+
+export { CommandPalette, type CommandPaletteProps, type UseCommandPaletteOptions, type UseCommandPaletteResult, type UseCommandShortcutsOptions, useCommandPalette, useCommandShortcuts, useRegisterCommands };

package/dist/commands/index.js

@@ -0,0 +1,13 @@
+import {
+  CommandPalette,
+  useCommandPalette,
+  useCommandShortcuts,
+  useRegisterCommands
+} from "../chunk-4ZC2WCUO.js";
+export {
+  CommandPalette,
+  useCommandPalette,
+  useCommandShortcuts,
+  useRegisterCommands
+};
+//# sourceMappingURL=index.js.map

package/dist/commands/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/generation/index.cjs

@@ -0,0 +1,235 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/generation/index.ts
+var generation_exports = {};
+__export(generation_exports, {
+  GenerationSettings: () => GenerationSettings,
+  JobProgress: () => JobProgress,
+  useGenerationPlan: () => useGenerationPlan,
+  useJobProgress: () => useJobProgress
+});
+module.exports = __toCommonJS(generation_exports);
+
+// src/generation/useGenerationPlan.ts
+var import_react = require("react");
+var import_generation = require("@pixerate/editor/generation");
+function useGenerationPlan(request, capabilities, options = {}) {
+  const key = JSON.stringify([request, capabilities, options]);
+  return (0, import_react.useMemo)(() => (0, import_generation.planGenerationRequest)(request, capabilities, options), [key]);
+}
+function useJobProgress(options) {
+  const { startedAt, expectedMs, done, now, intervalMs = 1e3 } = options;
+  const [tick, setTick] = (0, import_react.useState)(() => Date.now());
+  const ticking = !done && now === void 0;
+  (0, import_react.useEffect)(() => {
+    if (!ticking) return;
+    setTick(Date.now());
+    const id = setInterval(() => setTick(Date.now()), Math.max(16, intervalMs));
+    return () => clearInterval(id);
+  }, [ticking, intervalMs]);
+  return (0, import_generation.estimateJobProgress)({ startedAt, expectedMs, done, now: now ?? tick });
+}
+
+// src/generation/GenerationSettings.tsx
+var import_react2 = require("react");
+var import_generation2 = require("@pixerate/editor/generation");
+var import_jsx_runtime = require("react/jsx-runtime");
+var inputClass = "w-full rounded-md border border-border bg-background px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring";
+function Control({
+  control,
+  value,
+  id,
+  onValue
+}) {
+  const shown = value ?? control.defaultValue;
+  if (control.kind === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        "data-field": control.key,
+        checked: Boolean(shown),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.checked))
+      }
+    );
+  }
+  if (control.kind === "select") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "select",
+      {
+        id,
+        "data-field": control.key,
+        className: inputClass,
+        value: shown === void 0 ? "" : String(shown),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value)),
+        children: [
+          shown === void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "Default" }),
+          control.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: String(option.value), children: option.label }, String(option.value)))
+        ]
+      }
+    );
+  }
+  if (control.kind === "textarea") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        id,
+        "data-field": control.key,
+        className: inputClass,
+        rows: 2,
+        maxLength: control.maxLength,
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value))
+      }
+    );
+  }
+  const numeric = typeof shown === "number" ? shown : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        id,
+        type: control.kind === "range" ? "range" : "number",
+        "data-field": control.key,
+        className: control.kind === "range" ? "flex-1" : inputClass,
+        min: control.min,
+        max: control.max,
+        step: control.step ?? "any",
+        value: numeric ?? (control.kind === "range" ? control.min ?? 0 : ""),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value))
+      }
+    ),
+    control.kind === "range" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-10 text-right tabular-nums text-muted-foreground", "data-field-value": "", children: numeric ?? "\u2013" })
+  ] });
+}
+var GenerationSettings = ({
+  capabilities,
+  value,
+  onChange,
+  plan: planProp,
+  strategy,
+  showAdjustments = true,
+  onAddReference,
+  renderReference,
+  className = ""
+}) => {
+  const baseId = (0, import_react2.useId)();
+  const controls = (0, import_react2.useMemo)(() => (0, import_generation2.getGenerationControls)(capabilities), [capabilities]);
+  const computed = useGenerationPlan(value, capabilities, { strategy });
+  const plan = planProp ?? computed;
+  const slots = (0, import_generation2.getReferenceSlots)(capabilities, value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex flex-col gap-3 text-sm ${className}`, "data-generation-settings": "", "data-model": capabilities.id, children: [
+    controls.map((control) => {
+      const id = `${baseId}-${control.key}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", "data-control": control.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "text-xs font-medium text-muted-foreground", title: control.description, children: control.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Control,
+          {
+            control,
+            id,
+            value: (0, import_generation2.getRequestValue)(value, control.key),
+            onValue: (next) => onChange((0, import_generation2.setRequestValue)(value, control.key, next))
+          }
+        )
+      ] }, control.key);
+    }),
+    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "flex flex-col gap-1", "data-reference-role": slot.role, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("legend", { className: "text-xs font-medium text-muted-foreground", title: slot.description, children: [
+        slot.label,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tabular-nums", "data-reference-count": "", children: [
+          "(",
+          slot.references.length,
+          "/",
+          slot.max,
+          ")"
+        ] }),
+        slot.min > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-destructive", children: " *" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "flex flex-wrap gap-1", children: [
+        slot.references.map((ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center gap-1 rounded border border-border px-1.5 py-0.5", "data-reference-id": ref.id, children: [
+          renderReference ? renderReference(ref) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "max-w-[10rem] truncate", children: ref.id }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${slot.label} ${ref.id}`,
+              className: "text-muted-foreground hover:text-foreground",
+              onClick: () => onChange((0, import_generation2.removeReference)(value, slot.role, ref.id)),
+              children: "\xD7"
+            }
+          )
+        ] }, ref.id)),
+        onAddReference && slot.canAdd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded border border-dashed border-border px-1.5 py-0.5 text-muted-foreground hover:text-foreground",
+            onClick: () => onAddReference(slot.role),
+            children: "Add"
+          }
+        ) })
+      ] })
+    ] }, slot.role)),
+    showAdjustments && plan.adjustments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { role: "status", className: "flex flex-col gap-0.5 text-xs text-muted-foreground", "data-generation-adjustments": "", children: plan.adjustments.map((adjustment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-adjustment-field": adjustment.field, "data-adjustment-kind": adjustment.kind, children: adjustment.reason }, index)) }),
+    showAdjustments && plan.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { role: "alert", className: "flex flex-col gap-0.5 text-xs text-destructive", "data-generation-errors": "", children: plan.errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-error-field": error.field, children: error.message }, index)) })
+  ] });
+};
+
+// src/generation/JobProgress.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var JobProgress = ({ title, className = "", ...options }) => {
+  const progress = useJobProgress(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-col gap-1 text-sm ${className}`, "data-job-progress": "", "data-done": options.done ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate text-foreground", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-job-progress-label": "", "aria-live": "polite", children: progress.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": title ?? "Generation progress",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": progress.percent,
+        "aria-valuetext": `${progress.percent}%, ${progress.label}`,
+        className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "h-full rounded-full bg-primary transition-[width] duration-500",
+            style: { width: `${progress.percent}%`, background: "var(--primary, currentColor)" }
+          }
+        )
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GenerationSettings,
+  JobProgress,
+  useGenerationPlan,
+  useJobProgress
+});
+//# sourceMappingURL=index.cjs.map