@pixerate/editor-react 0.16.0 → 0.17.0

package/dist/tokens/index.cjs

@@ -0,0 +1,395 @@
+"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/tokens/index.ts
+var tokens_exports = {};
+__export(tokens_exports, {
+  TokenSwatch: () => TokenSwatch,
+  TokensPanel: () => TokensPanel,
+  useTokenState: () => useTokenState,
+  useTokenStore: () => useTokenStore,
+  useTokens: () => useTokens
+});
+module.exports = __toCommonJS(tokens_exports);
+
+// src/tokens/useTokens.ts
+var import_react = require("react");
+var import_tokens = require("@pixerate/editor/tokens");
+function useTokenStore(options) {
+  const ref = (0, import_react.useRef)(null);
+  if (!ref.current) ref.current = new import_tokens.TokenStore(options);
+  return ref.current;
+}
+function useTokenState(store) {
+  return (0, import_react.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
+}
+function useTokens(store, options = {}) {
+  const state = useTokenState(store);
+  const modesKey = JSON.stringify(options.modes ?? {});
+  const cssKey = JSON.stringify(options.css ?? {}, (_k, v) => typeof v === "function" ? String(v) : v);
+  const cssVariables = (0, import_react.useMemo)(
+    () => (0, import_tokens.getTokenCssVariables)(state, options.modes, options.css),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, modesKey, cssKey]
+  );
+  const css = (0, import_react.useMemo)(() => (0, import_tokens.exportTokensCss)(state, options.css), [state, cssKey]);
+  const undo = (0, import_react.useCallback)(() => void store.undo(), [store]);
+  const redo = (0, import_react.useCallback)(() => void store.redo(), [store]);
+  return { store, state, cssVariables, css, canUndo: store.canUndo(), canRedo: store.canRedo(), undo, redo };
+}
+
+// src/tokens/TokensPanel.tsx
+var import_react2 = require("react");
+var import_tokens2 = require("@pixerate/editor/tokens");
+var import_jsx_runtime = require("react/jsx-runtime");
+var input = "w-full min-w-0 rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary";
+var button = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40";
+function CommitInput({
+  value,
+  onCommit,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      defaultValue: value,
+      className: input,
+      onBlur: (e) => {
+        if (e.currentTarget.value !== value) onCommit(e.currentTarget.value);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.currentTarget.blur();
+        if (e.key === "Escape") {
+          e.currentTarget.value = value;
+          e.currentTarget.blur();
+        }
+      },
+      ...rest
+    },
+    value
+  );
+}
+function TokenSwatch({ color, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "data-token-swatch": color,
+      className: `inline-block h-4 w-4 shrink-0 rounded border border-border ${className}`,
+      style: { background: `linear-gradient(${color}, ${color}), repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 8px 8px` },
+      "aria-hidden": "true"
+    }
+  );
+}
+function LiteralEditor({
+  variable,
+  value,
+  onSet
+}) {
+  switch (variable.type) {
+    case "color":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenSwatch, { color: String(value) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "color",
+              "aria-label": `${variable.name} colour`,
+              className: "absolute inset-0 h-full w-full cursor-pointer opacity-0",
+              value: String(value).slice(0, 7),
+              onChange: (e) => onSet(e.currentTarget.value + String(value).slice(7))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommitInput, { value: String(value), "aria-label": `${variable.name} value`, onCommit: onSet })
+      ] });
+    case "number":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommitInput, { value: String(value), inputMode: "decimal", "aria-label": `${variable.name} value`, onCommit: onSet });
+    case "string":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommitInput, { value: String(value), "aria-label": `${variable.name} value`, onCommit: onSet });
+    case "boolean":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          "aria-label": `${variable.name} value`,
+          checked: value === true,
+          onChange: (e) => onSet(e.currentTarget.checked)
+        }
+      );
+  }
+}
+function ValueCell({
+  state,
+  variable,
+  mode,
+  onSet
+}) {
+  const value = variable.valuesByMode[mode.id];
+  const alias = (0, import_tokens2.isTokenAlias)(value) ? value.alias : "";
+  const resolved = (0, import_tokens2.resolveTokenInMode)(state, variable.id, mode.id);
+  const candidates = state.variables.filter((v) => v.type === variable.type && v.id !== variable.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-1 py-1 align-middle", "data-variable-id": variable.id, "data-mode-id": mode.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+    alias ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-1 text-xs", "data-token-alias": alias, children: [
+      variable.type === "color" && resolved !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenSwatch, { color: String(resolved) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "truncate", children: [
+        "\u2192 ",
+        (0, import_tokens2.getTokenVariable)(state, alias)?.name ?? alias
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LiteralEditor, { variable, value, onSet }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "select",
+      {
+        "aria-label": `${variable.name} alias in ${mode.name}`,
+        className: "w-5 shrink-0 rounded border border-border bg-background text-xs",
+        title: "Alias",
+        value: alias,
+        onChange: (e) => {
+          const target = e.currentTarget.value;
+          onSet(target ? { alias: target } : resolved ?? void 0);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "Value" }),
+          candidates.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("option", { value: v.id, children: [
+            "\u2192 ",
+            v.name
+          ] }, v.id))
+        ]
+      }
+    )
+  ] }) });
+}
+function TokensPanel({ store, collectionId, onCollectionChange, onError, className = "" }) {
+  const state = useTokenState(store);
+  const [ownSelection, setOwnSelection] = (0, import_react2.useState)(void 0);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [newCollection, setNewCollection] = (0, import_react2.useState)("");
+  const [newMode, setNewMode] = (0, import_react2.useState)("");
+  const [newName, setNewName] = (0, import_react2.useState)("");
+  const [newType, setNewType] = (0, import_react2.useState)("color");
+  const selectedId = collectionId ?? ownSelection;
+  const collection = state.collections.find((c) => c.id === selectedId) ?? state.collections[0];
+  const select = (id) => {
+    setOwnSelection(id);
+    onCollectionChange?.(id);
+  };
+  const run = (fn) => {
+    try {
+      fn();
+      setError(null);
+    } catch (e) {
+      const err = e;
+      setError(err instanceof import_tokens2.TokenError ? err.message : String(err));
+      onError?.(err);
+    }
+  };
+  const variables = collection ? (0, import_tokens2.getCollectionVariables)(state, collection.id) : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-tokens-panel": "", className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+      state.collections.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "select",
+        {
+          "aria-label": "Collection",
+          className: "rounded border border-border bg-background px-1.5 py-0.5 text-xs",
+          value: collection?.id ?? "",
+          onChange: (e) => select(e.currentTarget.value),
+          children: state.collections.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: c.id, children: c.name }, c.id))
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          className: "flex items-center gap-1",
+          onSubmit: (e) => {
+            e.preventDefault();
+            run(() => {
+              const created = store.createCollection(newCollection, ["Light", "Dark"]);
+              setNewCollection("");
+              select(created.id);
+            });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                className: input,
+                placeholder: "New collection",
+                "aria-label": "New collection name",
+                value: newCollection,
+                onChange: (e) => setNewCollection(e.currentTarget.value)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", className: button, disabled: !newCollection.trim(), children: "Add" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ml-auto flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: button, disabled: !store.canUndo(), onClick: () => store.undo(), "aria-label": "Undo token edit", children: "Undo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: button, disabled: !store.canRedo(), onClick: () => store.redo(), "aria-label": "Redo token edit", children: "Redo" })
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "alert", className: "rounded border border-red-500/40 bg-red-500/10 px-2 py-1 text-red-500", children: error }) : null,
+    collection ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommitInput, { value: collection.name, "aria-label": "Collection name", onCommit: (name) => run(() => store.renameCollection(collection.id, name)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: button, onClick: () => run(() => store.deleteCollection(collection.id)), "aria-label": `Delete collection ${collection.name}`, children: "Delete" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "w-full border-collapse", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: "border-b border-border text-left text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "px-1 py-1 font-medium", children: "Name" }),
+          collection.modes.map((mode, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "px-1 py-1 font-medium", "data-mode-id": mode.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              CommitInput,
+              {
+                value: mode.name,
+                "aria-label": `Mode ${mode.name} name`,
+                onCommit: (name) => run(() => store.renameMode(collection.id, mode.id, name))
+              }
+            ),
+            index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { title: "Default mode", className: "text-[10px] uppercase", children: "default" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "px-1 hover:text-foreground",
+                title: "Make default",
+                "aria-label": `Make ${mode.name} the default mode`,
+                onClick: () => run(() => store.setDefaultMode(collection.id, mode.id)),
+                children: "\u2605"
+              }
+            ),
+            collection.modes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "px-1 hover:text-foreground",
+                "aria-label": `Remove mode ${mode.name}`,
+                onClick: () => run(() => store.removeMode(collection.id, mode.id)),
+                children: "\xD7"
+              }
+            ) : null
+          ] }) }, mode.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "px-1 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "form",
+            {
+              className: "flex items-center gap-1",
+              onSubmit: (e) => {
+                e.preventDefault();
+                run(() => {
+                  store.addMode(collection.id, newMode);
+                  setNewMode("");
+                });
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    className: input,
+                    placeholder: "Mode",
+                    "aria-label": "New mode name",
+                    value: newMode,
+                    onChange: (e) => setNewMode(e.currentTarget.value)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", className: button, disabled: !newMode.trim(), "aria-label": "Add mode", children: "+" })
+              ]
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: variables.map((variable) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: "border-b border-border/50", "data-token-row": variable.id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-1 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-4 text-center text-muted-foreground", title: variable.type, children: variable.type === "color" ? "\u25D0" : variable.type === "number" ? "#" : variable.type === "string" ? "T" : "\u2298" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              CommitInput,
+              {
+                value: variable.name,
+                "aria-label": `Variable ${variable.name} name`,
+                onCommit: (name) => run(() => store.renameVariable(variable.id, name))
+              }
+            )
+          ] }) }),
+          collection.modes.map((mode) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ValueCell,
+            {
+              state,
+              variable,
+              mode,
+              onSet: (value) => run(() => store.setValue(variable.id, value, mode.id))
+            },
+            mode.id
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-1 py-1 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "px-1 text-muted-foreground hover:text-foreground",
+              "aria-label": `Delete variable ${variable.name}`,
+              onClick: () => run(() => store.deleteVariables(variable.id)),
+              children: "\xD7"
+            }
+          ) })
+        ] }, variable.id)) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          className: "flex items-center gap-1",
+          onSubmit: (e) => {
+            e.preventDefault();
+            run(() => {
+              store.createVariable({ collectionId: collection.id, name: newName, type: newType });
+              setNewName("");
+            });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                className: input,
+                placeholder: "color/bg",
+                "aria-label": "New variable name",
+                value: newName,
+                onChange: (e) => setNewName(e.currentTarget.value)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "select",
+              {
+                "aria-label": "New variable type",
+                className: "rounded border border-border bg-background px-1 py-0.5 text-xs",
+                value: newType,
+                onChange: (e) => setNewType(e.currentTarget.value),
+                children: import_tokens2.TOKEN_TYPES.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: t, children: t }, t))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", className: button, disabled: !newName.trim(), children: "Add variable" })
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground", children: "No collections yet." })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TokenSwatch,
+  TokensPanel,
+  useTokenState,
+  useTokenStore,
+  useTokens
+});
+//# sourceMappingURL=index.cjs.map

package/dist/tokens/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/index.ts","../../src/tokens/useTokens.ts","../../src/tokens/TokensPanel.tsx"],"sourcesContent":["export * from './useTokens';\nexport * from './TokensPanel';\n","import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';\nimport {\n  TokenStore,\n  exportTokensCss,\n  getTokenCssVariables,\n  type TokenCssOptions,\n  type TokenModeContext,\n  type TokenState,\n  type TokenStoreOptions,\n} from '@pixerate/editor/tokens';\n\n/** A `TokenStore` created once for the component's lifetime. */\nexport function useTokenStore(options?: TokenStoreOptions): TokenStore {\n  const ref = useRef<TokenStore | null>(null);\n  if (!ref.current) ref.current = new TokenStore(options);\n  return ref.current;\n}\n\n/** The store's current state (re-renders on every change). */\nexport function useTokenState(store: TokenStore): TokenState {\n  return useSyncExternalStore(store.subscribe, store.getState, store.getState);\n}\n\nexport interface UseTokensOptions {\n  /** Modes for `cssVariables` (collection id → mode id; default modes otherwise). */\n  modes?: TokenModeContext;\n  /** Options for `css` and `cssVariables` (prefix, attribute, …). */\n  css?: TokenCssOptions;\n}\n\nexport interface UseTokensResult {\n  store: TokenStore;\n  state: TokenState;\n  /** Resolved custom properties for `modes`, e.g. `<div style={cssVariables}>`. */\n  cssVariables: Record<string, string>;\n  /** A stylesheet with every mode (`:root { … } :root[data-mode=\"dark\"] { … }`). */\n  css: string;\n  canUndo: boolean;\n  canRedo: boolean;\n  undo: () => void;\n  redo: () => void;\n}\n\n/**\n * Subscribes to a token store and exposes its state plus CSS custom properties for app\n * theming: apply `cssVariables` as an inline style, or inject `css` and switch modes with the\n * `data-mode` attribute.\n */\nexport function useTokens(store: TokenStore, options: UseTokensOptions = {}): UseTokensResult {\n  const state = useTokenState(store);\n  const modesKey = JSON.stringify(options.modes ?? {});\n  const cssKey = JSON.stringify(options.css ?? {}, (_k, v) => (typeof v === 'function' ? String(v) : v));\n  const cssVariables = useMemo(\n    () => getTokenCssVariables(state, options.modes, options.css),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [state, modesKey, cssKey],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const css = useMemo(() => exportTokensCss(state, options.css), [state, cssKey]);\n  const undo = useCallback(() => void store.undo(), [store]);\n  const redo = useCallback(() => void store.redo(), [store]);\n  return { store, state, cssVariables, css, canUndo: store.canUndo(), canRedo: store.canRedo(), undo, redo };\n}\n","import React, { useState } from 'react';\nimport {\n  TOKEN_TYPES,\n  TokenError,\n  getCollectionVariables,\n  getTokenVariable,\n  isTokenAlias,\n  resolveTokenInMode,\n  type TokenCollection,\n  type TokenLiteral,\n  type TokenMode,\n  type TokenState,\n  type TokenStore,\n  type TokenType,\n  type TokenVariable,\n} from '@pixerate/editor/tokens';\nimport { useTokenState } from './useTokens';\n\nexport interface TokensPanelProps {\n  store: TokenStore;\n  /** Selected collection (controlled); defaults to the first. */\n  collectionId?: string;\n  onCollectionChange?: (collectionId: string) => void;\n  /** Called with refused edits (also shown in the panel). */\n  onError?: (error: Error) => void;\n  className?: string;\n}\n\nconst input =\n  'w-full min-w-0 rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary';\nconst button = 'rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40';\n\n/** Commits on blur or Enter; resets when `value` changes from outside. */\nfunction CommitInput({\n  value,\n  onCommit,\n  ...rest\n}: { value: string; onCommit: (value: string) => void } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>) {\n  return (\n    <input\n      key={value}\n      defaultValue={value}\n      className={input}\n      onBlur={(e) => {\n        if (e.currentTarget.value !== value) onCommit(e.currentTarget.value);\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') e.currentTarget.blur();\n        if (e.key === 'Escape') {\n          e.currentTarget.value = value;\n          e.currentTarget.blur();\n        }\n      }}\n      {...rest}\n    />\n  );\n}\n\n/** A colour swatch (checkered under translucent colours). */\nexport function TokenSwatch({ color, className = '' }: { color: string; className?: string }) {\n  return (\n    <span\n      data-token-swatch={color}\n      className={`inline-block h-4 w-4 shrink-0 rounded border border-border ${className}`}\n      style={{ background: `linear-gradient(${color}, ${color}), repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 8px 8px` }}\n      aria-hidden=\"true\"\n    />\n  );\n}\n\nfunction LiteralEditor({\n  variable,\n  value,\n  onSet,\n}: {\n  variable: TokenVariable;\n  value: TokenLiteral;\n  onSet: (value: unknown) => void;\n}) {\n  switch (variable.type) {\n    case 'color':\n      return (\n        <span className=\"flex items-center gap-1\">\n          <label className=\"relative\">\n            <TokenSwatch color={String(value)} />\n            <input\n              type=\"color\"\n              aria-label={`${variable.name} colour`}\n              className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n              value={String(value).slice(0, 7)}\n              onChange={(e) => onSet(e.currentTarget.value + String(value).slice(7))}\n            />\n          </label>\n          <CommitInput value={String(value)} aria-label={`${variable.name} value`} onCommit={onSet} />\n        </span>\n      );\n    case 'number':\n      return <CommitInput value={String(value)} inputMode=\"decimal\" aria-label={`${variable.name} value`} onCommit={onSet} />;\n    case 'string':\n      return <CommitInput value={String(value)} aria-label={`${variable.name} value`} onCommit={onSet} />;\n    case 'boolean':\n      return (\n        <input\n          type=\"checkbox\"\n          aria-label={`${variable.name} value`}\n          checked={value === true}\n          onChange={(e) => onSet(e.currentTarget.checked)}\n        />\n      );\n  }\n}\n\nfunction ValueCell({\n  state,\n  variable,\n  mode,\n  onSet,\n}: {\n  state: TokenState;\n  variable: TokenVariable;\n  mode: TokenMode;\n  onSet: (value: unknown) => void;\n}) {\n  const value = variable.valuesByMode[mode.id];\n  const alias = isTokenAlias(value) ? value.alias : '';\n  const resolved = resolveTokenInMode(state, variable.id, mode.id);\n  const candidates = state.variables.filter((v) => v.type === variable.type && v.id !== variable.id);\n  return (\n    <td className=\"px-1 py-1 align-middle\" data-variable-id={variable.id} data-mode-id={mode.id}>\n      <div className=\"flex items-center gap-1\">\n        {alias ? (\n          <span className=\"flex min-w-0 flex-1 items-center gap-1 text-xs\" data-token-alias={alias}>\n            {variable.type === 'color' && resolved !== undefined ? <TokenSwatch color={String(resolved)} /> : null}\n            <span className=\"truncate\">→ {getTokenVariable(state, alias)?.name ?? alias}</span>\n          </span>\n        ) : (\n          <span className=\"min-w-0 flex-1\">\n            <LiteralEditor variable={variable} value={value as TokenLiteral} onSet={onSet} />\n          </span>\n        )}\n        <select\n          aria-label={`${variable.name} alias in ${mode.name}`}\n          className=\"w-5 shrink-0 rounded border border-border bg-background text-xs\"\n          title=\"Alias\"\n          value={alias}\n          onChange={(e) => {\n            const target = e.currentTarget.value;\n            // \"Value\" detaches the alias to what it resolves to.\n            onSet(target ? { alias: target } : resolved ?? undefined);\n          }}\n        >\n          <option value=\"\">Value</option>\n          {candidates.map((v) => (\n            <option key={v.id} value={v.id}>\n              → {v.name}\n            </option>\n          ))}\n        </select>\n      </div>\n    </td>\n  );\n}\n\n/**\n * Figma-style variables panel: collections, modes as columns, typed values with colour\n * swatches, aliases (→), add / rename / delete, undo / redo. Edits go through the store, so\n * each is one undo step; refused edits (cycles, duplicate names) show as an alert.\n */\nexport function TokensPanel({ store, collectionId, onCollectionChange, onError, className = '' }: TokensPanelProps) {\n  const state = useTokenState(store);\n  const [ownSelection, setOwnSelection] = useState<string | undefined>(undefined);\n  const [error, setError] = useState<string | null>(null);\n  const [newCollection, setNewCollection] = useState('');\n  const [newMode, setNewMode] = useState('');\n  const [newName, setNewName] = useState('');\n  const [newType, setNewType] = useState<TokenType>('color');\n\n  const selectedId = collectionId ?? ownSelection;\n  const collection: TokenCollection | undefined = state.collections.find((c) => c.id === selectedId) ?? state.collections[0];\n  const select = (id: string) => {\n    setOwnSelection(id);\n    onCollectionChange?.(id);\n  };\n  const run = (fn: () => void) => {\n    try {\n      fn();\n      setError(null);\n    } catch (e) {\n      const err = e as Error;\n      setError(err instanceof TokenError ? err.message : String(err));\n      onError?.(err);\n    }\n  };\n  const variables = collection ? getCollectionVariables(state, collection.id) : [];\n\n  return (\n    <div data-tokens-panel=\"\" className={`flex flex-col gap-2 text-xs text-foreground ${className}`}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {state.collections.length > 0 ? (\n          <select\n            aria-label=\"Collection\"\n            className=\"rounded border border-border bg-background px-1.5 py-0.5 text-xs\"\n            value={collection?.id ?? ''}\n            onChange={(e) => select(e.currentTarget.value)}\n          >\n            {state.collections.map((c) => (\n              <option key={c.id} value={c.id}>\n                {c.name}\n              </option>\n            ))}\n          </select>\n        ) : null}\n        <form\n          className=\"flex items-center gap-1\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            run(() => {\n              const created = store.createCollection(newCollection, ['Light', 'Dark']);\n              setNewCollection('');\n              select(created.id);\n            });\n          }}\n        >\n          <input\n            className={input}\n            placeholder=\"New collection\"\n            aria-label=\"New collection name\"\n            value={newCollection}\n            onChange={(e) => setNewCollection(e.currentTarget.value)}\n          />\n          <button type=\"submit\" className={button} disabled={!newCollection.trim()}>\n            Add\n          </button>\n        </form>\n        <span className=\"ml-auto flex gap-1\">\n          <button type=\"button\" className={button} disabled={!store.canUndo()} onClick={() => store.undo()} aria-label=\"Undo token edit\">\n            Undo\n          </button>\n          <button type=\"button\" className={button} disabled={!store.canRedo()} onClick={() => store.redo()} aria-label=\"Redo token edit\">\n            Redo\n          </button>\n        </span>\n      </div>\n\n      {error ? (\n        <div role=\"alert\" className=\"rounded border border-red-500/40 bg-red-500/10 px-2 py-1 text-red-500\">\n          {error}\n        </div>\n      ) : null}\n\n      {collection ? (\n        <>\n          <div className=\"flex items-center gap-1\">\n            <CommitInput value={collection.name} aria-label=\"Collection name\" onCommit={(name) => run(() => store.renameCollection(collection.id, name))} />\n            <button type=\"button\" className={button} onClick={() => run(() => store.deleteCollection(collection.id))} aria-label={`Delete collection ${collection.name}`}>\n              Delete\n            </button>\n          </div>\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full border-collapse\">\n              <thead>\n                <tr className=\"border-b border-border text-left text-muted-foreground\">\n                  <th className=\"px-1 py-1 font-medium\">Name</th>\n                  {collection.modes.map((mode, index) => (\n                    <th key={mode.id} className=\"px-1 py-1 font-medium\" data-mode-id={mode.id}>\n                      <div className=\"flex items-center gap-1\">\n                        <CommitInput\n                          value={mode.name}\n                          aria-label={`Mode ${mode.name} name`}\n                          onCommit={(name) => run(() => store.renameMode(collection.id, mode.id, name))}\n                        />\n                        {index === 0 ? (\n                          <span title=\"Default mode\" className=\"text-[10px] uppercase\">\n                            default\n                          </span>\n                        ) : (\n                          <button\n                            type=\"button\"\n                            className=\"px-1 hover:text-foreground\"\n                            title=\"Make default\"\n                            aria-label={`Make ${mode.name} the default mode`}\n                            onClick={() => run(() => store.setDefaultMode(collection.id, mode.id))}\n                          >\n                            ★\n                          </button>\n                        )}\n                        {collection.modes.length > 1 ? (\n                          <button\n                            type=\"button\"\n                            className=\"px-1 hover:text-foreground\"\n                            aria-label={`Remove mode ${mode.name}`}\n                            onClick={() => run(() => store.removeMode(collection.id, mode.id))}\n                          >\n                            ×\n                          </button>\n                        ) : null}\n                      </div>\n                    </th>\n                  ))}\n                  <th className=\"px-1 py-1\">\n                    <form\n                      className=\"flex items-center gap-1\"\n                      onSubmit={(e) => {\n                        e.preventDefault();\n                        run(() => {\n                          store.addMode(collection.id, newMode);\n                          setNewMode('');\n                        });\n                      }}\n                    >\n                      <input\n                        className={input}\n                        placeholder=\"Mode\"\n                        aria-label=\"New mode name\"\n                        value={newMode}\n                        onChange={(e) => setNewMode(e.currentTarget.value)}\n                      />\n                      <button type=\"submit\" className={button} disabled={!newMode.trim()} aria-label=\"Add mode\">\n                        +\n                      </button>\n                    </form>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {variables.map((variable) => (\n                  <tr key={variable.id} className=\"border-b border-border/50\" data-token-row={variable.id}>\n                    <td className=\"px-1 py-1\">\n                      <div className=\"flex items-center gap-1\">\n                        <span className=\"w-4 text-center text-muted-foreground\" title={variable.type}>\n                          {variable.type === 'color' ? '◐' : variable.type === 'number' ? '#' : variable.type === 'string' ? 'T' : '⊘'}\n                        </span>\n                        <CommitInput\n                          value={variable.name}\n                          aria-label={`Variable ${variable.name} name`}\n                          onCommit={(name) => run(() => store.renameVariable(variable.id, name))}\n                        />\n                      </div>\n                    </td>\n                    {collection.modes.map((mode) => (\n                      <ValueCell\n                        key={mode.id}\n                        state={state}\n                        variable={variable}\n                        mode={mode}\n                        onSet={(value) => run(() => store.setValue(variable.id, value, mode.id))}\n                      />\n                    ))}\n                    <td className=\"px-1 py-1 text-right\">\n                      <button\n                        type=\"button\"\n                        className=\"px-1 text-muted-foreground hover:text-foreground\"\n                        aria-label={`Delete variable ${variable.name}`}\n                        onClick={() => run(() => store.deleteVariables(variable.id))}\n                      >\n                        ×\n                      </button>\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n          <form\n            className=\"flex items-center gap-1\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              run(() => {\n                store.createVariable({ collectionId: collection.id, name: newName, type: newType });\n                setNewName('');\n              });\n            }}\n          >\n            <input\n              className={input}\n              placeholder=\"color/bg\"\n              aria-label=\"New variable name\"\n              value={newName}\n              onChange={(e) => setNewName(e.currentTarget.value)}\n            />\n            <select\n              aria-label=\"New variable type\"\n              className=\"rounded border border-border bg-background px-1 py-0.5 text-xs\"\n              value={newType}\n              onChange={(e) => setNewType(e.currentTarget.value as TokenType)}\n            >\n              {TOKEN_TYPES.map((t) => (\n                <option key={t} value={t}>\n                  {t}\n                </option>\n              ))}\n            </select>\n            <button type=\"submit\" className={button} disabled={!newName.trim()}>\n              Add variable\n            </button>\n          </form>\n        </>\n      ) : (\n        <p className=\"text-muted-foreground\">No collections yet.</p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_react","import_tokens"]}

package/dist/tokens/index.d.cts

@@ -0,0 +1,54 @@
+import { TokenModeContext, TokenCssOptions, TokenStore, TokenState, TokenStoreOptions } from '@pixerate/editor/tokens';
+import React__default from 'react';
+
+/** A `TokenStore` created once for the component's lifetime. */
+declare function useTokenStore(options?: TokenStoreOptions): TokenStore;
+/** The store's current state (re-renders on every change). */
+declare function useTokenState(store: TokenStore): TokenState;
+interface UseTokensOptions {
+    /** Modes for `cssVariables` (collection id → mode id; default modes otherwise). */
+    modes?: TokenModeContext;
+    /** Options for `css` and `cssVariables` (prefix, attribute, …). */
+    css?: TokenCssOptions;
+}
+interface UseTokensResult {
+    store: TokenStore;
+    state: TokenState;
+    /** Resolved custom properties for `modes`, e.g. `<div style={cssVariables}>`. */
+    cssVariables: Record<string, string>;
+    /** A stylesheet with every mode (`:root { … } :root[data-mode="dark"] { … }`). */
+    css: string;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+}
+/**
+ * Subscribes to a token store and exposes its state plus CSS custom properties for app
+ * theming: apply `cssVariables` as an inline style, or inject `css` and switch modes with the
+ * `data-mode` attribute.
+ */
+declare function useTokens(store: TokenStore, options?: UseTokensOptions): UseTokensResult;
+
+interface TokensPanelProps {
+    store: TokenStore;
+    /** Selected collection (controlled); defaults to the first. */
+    collectionId?: string;
+    onCollectionChange?: (collectionId: string) => void;
+    /** Called with refused edits (also shown in the panel). */
+    onError?: (error: Error) => void;
+    className?: string;
+}
+/** A colour swatch (checkered under translucent colours). */
+declare function TokenSwatch({ color, className }: {
+    color: string;
+    className?: string;
+}): React__default.JSX.Element;
+/**
+ * Figma-style variables panel: collections, modes as columns, typed values with colour
+ * swatches, aliases (→), add / rename / delete, undo / redo. Edits go through the store, so
+ * each is one undo step; refused edits (cycles, duplicate names) show as an alert.
+ */
+declare function TokensPanel({ store, collectionId, onCollectionChange, onError, className }: TokensPanelProps): React__default.JSX.Element;
+
+export { TokenSwatch, TokensPanel, type TokensPanelProps, type UseTokensOptions, type UseTokensResult, useTokenState, useTokenStore, useTokens };

package/dist/tokens/index.d.ts

@@ -0,0 +1,54 @@
+import { TokenModeContext, TokenCssOptions, TokenStore, TokenState, TokenStoreOptions } from '@pixerate/editor/tokens';
+import React__default from 'react';
+
+/** A `TokenStore` created once for the component's lifetime. */
+declare function useTokenStore(options?: TokenStoreOptions): TokenStore;
+/** The store's current state (re-renders on every change). */
+declare function useTokenState(store: TokenStore): TokenState;
+interface UseTokensOptions {
+    /** Modes for `cssVariables` (collection id → mode id; default modes otherwise). */
+    modes?: TokenModeContext;
+    /** Options for `css` and `cssVariables` (prefix, attribute, …). */
+    css?: TokenCssOptions;
+}
+interface UseTokensResult {
+    store: TokenStore;
+    state: TokenState;
+    /** Resolved custom properties for `modes`, e.g. `<div style={cssVariables}>`. */
+    cssVariables: Record<string, string>;
+    /** A stylesheet with every mode (`:root { … } :root[data-mode="dark"] { … }`). */
+    css: string;
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+}
+/**
+ * Subscribes to a token store and exposes its state plus CSS custom properties for app
+ * theming: apply `cssVariables` as an inline style, or inject `css` and switch modes with the
+ * `data-mode` attribute.
+ */
+declare function useTokens(store: TokenStore, options?: UseTokensOptions): UseTokensResult;
+
+interface TokensPanelProps {
+    store: TokenStore;
+    /** Selected collection (controlled); defaults to the first. */
+    collectionId?: string;
+    onCollectionChange?: (collectionId: string) => void;
+    /** Called with refused edits (also shown in the panel). */
+    onError?: (error: Error) => void;
+    className?: string;
+}
+/** A colour swatch (checkered under translucent colours). */
+declare function TokenSwatch({ color, className }: {
+    color: string;
+    className?: string;
+}): React__default.JSX.Element;
+/**
+ * Figma-style variables panel: collections, modes as columns, typed values with colour
+ * swatches, aliases (→), add / rename / delete, undo / redo. Edits go through the store, so
+ * each is one undo step; refused edits (cycles, duplicate names) show as an alert.
+ */
+declare function TokensPanel({ store, collectionId, onCollectionChange, onError, className }: TokensPanelProps): React__default.JSX.Element;
+
+export { TokenSwatch, TokensPanel, type TokensPanelProps, type UseTokensOptions, type UseTokensResult, useTokenState, useTokenStore, useTokens };