@pixerate/editor-react 0.18.1 → 0.19.0

package/README.md

@@ -51,7 +51,9 @@ export function Document() {
   const editor = useEditor({ content: "<p>Hello</p>", richTextOptions: { markdown: true } });
   return (
     <>
-      <BubbleMenu editor={editor}>{/* your formatting buttons */}</BubbleMenu>
+      <BubbleMenu editor={editor}>
+        <button onClick={() => editor?.chain().focus().toggleBold().run()}>Bold</button>
+      </BubbleMenu>
       <EditorContent editor={editor} />
     </>
   );
@@ -100,6 +102,8 @@ useAgentToolProvider(registry, provider);
 | `@pixerate/editor-react/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments), `useGenerationPlan`, `JobProgress`, `useJobProgress` over `@pixerate/editor/generation` (also re-exported from the root entry) |
 | `@pixerate/editor-react/canvas` | `useCanvasGraph`, `useCanvasLayout`, `useCanvasClipboard`, `useCanvasDocking`, `useCanvasShortcuts`, `useCanvasExplosion`, `useStreamingCanvas`, `AgentPresenceLayer`, plus the pure layout helpers from `@pixerate/editor/canvas` |
 
+Spreadsheet persistence: `useSpreadsheetEditor` exposes `document` (and passes it to `onDocumentChange`) with the defined names its formulas use in `document.names`, so saving that document and passing it back as `document` restores workbook, sheet-scoped and LAMBDA names. For several sheets, save `controller.getWorkbook()` instead.
+
 ## Styling (Tailwind CSS required)
 
 The components are styled with [Tailwind CSS](https://tailwindcss.com) utility classes and ship no stylesheet of their own. To style them:

package/dist/canvas/index.cjs

@@ -53,6 +53,7 @@ __export(canvas_exports, {
   TOKEN_MODES_DATA_KEY: () => import_canvas23.TOKEN_MODES_DATA_KEY,
   TokenBindingPicker: () => TokenBindingPicker,
   TokenModeSwitcher: () => TokenModeSwitcher,
+  addCanvasVariant: () => import_canvas25.addCanvasVariant,
   addKeyframesAtTime: () => import_canvas24.addKeyframesAtTime,
   alignNodes: () => import_canvas18.alignNodes,
   animateNode: () => import_canvas24.animateNode,
@@ -158,6 +159,7 @@ __export(canvas_exports, {
   getLayoutParent: () => import_canvas22.getLayoutParent,
   getLayoutSizing: () => import_canvas22.getLayoutSizing,
   getLayoutedNodes: () => import_canvas21.getLayoutedNodes,
+  getNextVariantValues: () => import_canvas25.getNextVariantValues,
   getNodeAnimation: () => import_canvas24.getNodeAnimation,
   getNodeOverrides: () => import_canvas25.getNodeOverrides,
   getNodeRect: () => import_canvas18.getNodeRect,
@@ -256,7 +258,10 @@ __export(canvas_exports, {
   recordAnimationChanges: () => import_canvas24.recordAnimationChanges,
   relayoutUpdates: () => import_canvas22.relayoutUpdates,
   remapPastedNodes: () => import_canvas21.remapPastedNodes,
+  removeCanvasVariant: () => import_canvas25.removeCanvasVariant,
   removeTrack: () => import_canvas24.removeTrack,
+  renameCanvasVariantProperty: () => import_canvas25.renameCanvasVariantProperty,
+  renameCanvasVariantValue: () => import_canvas25.renameCanvasVariantValue,
   reorderNodes: () => import_canvas18.reorderNodes,
   repositionNodesTo: () => import_canvas21.repositionNodesTo,
   resetCanvasInstanceOverrides: () => import_canvas25.resetCanvasInstanceOverrides,
@@ -275,6 +280,7 @@ __export(canvas_exports, {
   setCanvasComponentProperty: () => import_canvas25.setCanvasComponentProperty,
   setCanvasInstanceProperties: () => import_canvas25.setCanvasInstanceProperties,
   setCanvasTokenMode: () => import_canvas23.setCanvasTokenMode,
+  setCanvasVariantProperties: () => import_canvas25.setCanvasVariantProperties,
   setKeyframe: () => import_canvas24.setKeyframe,
   setKeyframeEasing: () => import_canvas24.setKeyframeEasing,
   setMotionPath: () => import_canvas24.setMotionPath,
@@ -1909,28 +1915,64 @@ function useCanvasComponents(options) {
 var import_react16 = require("react");
 var import_canvas16 = require("@pixerate/editor/canvas");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function InlineField({ value, label, onCommit }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "input",
+    {
+      type: "text",
+      "aria-label": label,
+      defaultValue: value,
+      className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+      onBlur: (e) => {
+        const next = e.currentTarget.value.trim();
+        if (next && next !== value) onCommit(next);
+        else e.currentTarget.value = value;
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.currentTarget.blur();
+        if (e.key === "Escape") {
+          e.currentTarget.value = value;
+          e.currentTarget.blur();
+        }
+      }
+    },
+    value
+  );
+}
 function CanvasComponentsPanel({
   nodes,
   onInsert,
+  components,
+  onError,
   search = true,
   className = ""
 }) {
   const [query, setQuery] = (0, import_react16.useState)("");
-  const { components, sets } = (0, import_canvas16.listCanvasComponents)(nodes);
+  const [propsOpen, setPropsOpen] = (0, import_react16.useState)(null);
+  const [menuFor, setMenuFor] = (0, import_react16.useState)(null);
+  const [editing, setEditing] = (0, import_react16.useState)(null);
+  const { components: all, sets } = (0, import_canvas16.listCanvasComponents)(nodes);
   const q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
-  const lone = components.filter((c) => !c.setId && match(c.name));
+  const lone = all.filter((c) => !c.setId && match(c.name));
   const shownSets = sets.filter((s) => match(s.name) || s.variants.some((v) => match(v.name)));
-  const item = (id, name, count, extra = {}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  const report = (result) => {
+    if (result && !result.ok && result.reason) onError?.(result.reason);
+    return !!result?.ok;
+  };
+  const small = "shrink-0 rounded px-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40";
+  const menuItem = "rounded px-2 py-0.5 text-left hover:bg-muted disabled:opacity-40";
+  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "button",
     {
       type: "button",
       draggable: true,
       "data-component-id": id,
       ...extra,
-      className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-xs hover:bg-muted",
+      className: "flex w-full min-w-0 items-center justify-between gap-2 rounded px-2 py-1 text-left text-xs hover:bg-muted",
       title: `Insert an instance of ${name}`,
       onClick: () => onInsert(id),
+      onContextMenu,
       onDragStart: (e) => {
         e.dataTransfer.setData(import_canvas16.CANVAS_COMPONENT_DRAG_TYPE, id);
         e.dataTransfer.setData("text/plain", name);
@@ -1958,11 +2000,165 @@ function CanvasComponentsPanel({
       }
     ) : null,
     shownSets.map((set) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-component-set": set.id, className: "flex flex-col", children: [
-      item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => item(v.id, v.name, v.instanceCount, { "data-kind": "variant" })) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
+        item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
+        components ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              className: small,
+              "data-action": "add-variant",
+              "aria-label": `Add a variant to ${set.name}`,
+              title: "Add a variant (duplicates the default variant)",
+              onClick: () => report(components.addVariant(set.id)),
+              children: "+\xA0Variant"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              className: small,
+              "data-action": "variant-properties",
+              "aria-expanded": propsOpen === set.id,
+              "aria-label": `Edit the variant properties of ${set.name}`,
+              title: "Rename variant properties and values",
+              onClick: () => setPropsOpen(propsOpen === set.id ? null : set.id),
+              children: "\u2699"
+            }
+          )
+        ] }) : null
+      ] }),
+      components && propsOpen === set.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          InlineField,
+          {
+            value: option.name,
+            label: `Rename property ${option.name}`,
+            onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          InlineField,
+          {
+            value,
+            label: `Rename ${option.name} value ${value}`,
+            onCommit: (next) => report(components.renameVariantValue(option.name, value, next, set.id))
+          },
+          value
+        )) })
+      ] }, option.name)) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
+          item(
+            v.id,
+            v.name,
+            v.instanceCount,
+            { "data-kind": "variant" },
+            components ? (e) => {
+              e.preventDefault();
+              setMenuFor(v.id);
+            } : void 0
+          ),
+          components ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              className: small,
+              "data-action": "variant-menu",
+              "aria-haspopup": "menu",
+              "aria-expanded": menuFor === v.id,
+              "aria-label": `Variant actions for ${v.name}`,
+              onClick: () => setMenuFor(menuFor === v.id ? null : v.id),
+              children: "\u22EF"
+            }
+          ) : null
+        ] }),
+        components && menuFor === v.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: menuItem,
+              "data-action": "edit-variant",
+              onClick: () => {
+                setEditing(v.id);
+                setMenuFor(null);
+              },
+              children: "Edit values\u2026"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: menuItem,
+              "data-action": "duplicate-variant",
+              onClick: () => {
+                setMenuFor(null);
+                report(components.addVariant(set.id, { from: v.id }));
+              },
+              children: "Duplicate"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: menuItem,
+              "data-action": "remove-variant",
+              disabled: set.variants.length < 2,
+              title: set.variants.length < 2 ? "A component set needs at least one variant." : "Its instances switch to the closest variant",
+              onClick: () => {
+                setMenuFor(null);
+                report(components.removeVariant(v.id));
+              },
+              children: "Remove variant"
+            }
+          )
+        ] }) : null,
+        components && editing === v.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "form",
+          {
+            "data-variant-editor": v.id,
+            className: "ml-2 flex flex-col gap-1 py-1",
+            onSubmit: (e) => {
+              e.preventDefault();
+              const values = {};
+              for (const input of e.currentTarget.querySelectorAll("input[data-variant-value]")) {
+                values[input.dataset.variantValue] = input.value;
+              }
+              if (report(components.setVariantProperties(values, v.id))) setEditing(null);
+            },
+            children: [
+              set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    "data-variant-value": option.name,
+                    "aria-label": `${option.name} value`,
+                    defaultValue: v.variant?.[option.name] ?? "",
+                    className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+                  }
+                )
+              ] }, option.name)),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
+              ] })
+            ]
+          }
+        ) : null
+      ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    components.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2117,6 +2313,7 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   TOKEN_MODES_DATA_KEY,
   TokenBindingPicker,
   TokenModeSwitcher,
+  addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
   animateNode,
@@ -2222,6 +2419,7 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   getLayoutParent,
   getLayoutSizing,
   getLayoutedNodes,
+  getNextVariantValues,
   getNodeAnimation,
   getNodeOverrides,
   getNodeRect,
@@ -2320,7 +2518,10 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   recordAnimationChanges,
   relayoutUpdates,
   remapPastedNodes,
+  removeCanvasVariant,
   removeTrack,
+  renameCanvasVariantProperty,
+  renameCanvasVariantValue,
   reorderNodes,
   repositionNodesTo,
   resetCanvasInstanceOverrides,
@@ -2339,6 +2540,7 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   setCanvasComponentProperty,
   setCanvasInstanceProperties,
   setCanvasTokenMode,
+  setCanvasVariantProperties,
   setKeyframe,
   setKeyframeEasing,
   setMotionPath,