@pixerate/editor-react 0.14.0 → 0.16.0

package/dist/persistence/index.cjs

@@ -0,0 +1,191 @@
+"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/persistence/index.ts
+var persistence_exports = {};
+__export(persistence_exports, {
+  RecoveryPrompt: () => RecoveryPrompt,
+  useAutosave: () => useAutosave
+});
+module.exports = __toCommonJS(persistence_exports);
+
+// src/persistence/useAutosave.ts
+var import_react = require("react");
+var import_persistence = require("@pixerate/editor/persistence");
+var IDLE = {
+  status: "idle",
+  error: null,
+  failures: 0,
+  nextAttemptAt: null,
+  lastSavedAt: null,
+  ready: false
+};
+function useAutosave(options) {
+  const optionsRef = (0, import_react.useRef)(options);
+  optionsRef.current = options;
+  const { storage, key, history, dirty } = options;
+  const recover = options.recover !== false;
+  const flushOnHide = options.flushOnHide !== false;
+  const ready = options.ready !== false;
+  const [controller, setController] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)(IDLE);
+  const [recovery, setRecovery] = (0, import_react.useState)(null);
+  const [pendingRecovery, setPendingRecovery] = (0, import_react.useState)(recover);
+  const revisionsRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const revisions = (0, import_persistence.createRevisionTracker)({ history, dirty });
+    const o = optionsRef.current;
+    const instance = (0, import_persistence.createAutosaveController)({
+      storage,
+      key,
+      getSnapshot: () => optionsRef.current.getSnapshot(),
+      serialize: o.serialize,
+      deserialize: o.deserialize,
+      name: () => optionsRef.current.name,
+      revision: revisions.revision,
+      savedRevision: revisions.savedRevision,
+      interval: o.interval,
+      debounceMs: o.debounceMs,
+      retryBaseMs: o.retryBaseMs,
+      retryMaxMs: o.retryMaxMs
+    });
+    const unsubscribeStatus = instance.subscribe(setStatus);
+    const unsubscribeRevisions = revisions.subscribe(() => instance.notify());
+    revisionsRef.current = revisions;
+    setController(instance);
+    setStatus(instance.getStatus());
+    let active = true;
+    if (recover) {
+      setPendingRecovery(true);
+      instance.checkRecovery().catch(() => null).then((found) => {
+        if (!active) return;
+        setRecovery(found);
+        setPendingRecovery(found !== null);
+      });
+    } else {
+      setRecovery(null);
+      setPendingRecovery(false);
+    }
+    return () => {
+      active = false;
+      unsubscribeStatus();
+      unsubscribeRevisions();
+      revisions.destroy();
+      instance.destroy();
+      if (revisionsRef.current === revisions) revisionsRef.current = null;
+    };
+  }, [storage, key, history, dirty, recover]);
+  (0, import_react.useEffect)(() => {
+    if (controller && ready && !pendingRecovery) controller.ready();
+  }, [controller, ready, pendingRecovery]);
+  (0, import_react.useEffect)(() => {
+    if (!controller || !flushOnHide || typeof window === "undefined") return;
+    const flush = () => void controller.flushNow();
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") flush();
+    };
+    window.addEventListener("pagehide", flush);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("pagehide", flush);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [controller, flushOnHide]);
+  const restore = (0, import_react.useCallback)(() => {
+    const snapshot = recovery?.snapshot;
+    setRecovery(null);
+    setPendingRecovery(false);
+    return snapshot;
+  }, [recovery]);
+  const discard = (0, import_react.useCallback)(async () => {
+    if (controller) await controller.discardRecovery();
+    setRecovery(null);
+    setPendingRecovery(false);
+  }, [controller]);
+  const flushNow = (0, import_react.useCallback)(async () => {
+    await controller?.flushNow();
+  }, [controller]);
+  const markClean = (0, import_react.useCallback)(async () => {
+    revisionsRef.current?.markSaved();
+    await controller?.markClean();
+  }, [controller]);
+  const notifyChange = (0, import_react.useCallback)(() => revisionsRef.current?.bump(), []);
+  return { status, recovery, pendingRecovery, restore, discard, flushNow, markClean, notifyChange, controller };
+}
+
+// src/persistence/RecoveryPrompt.tsx
+var import_persistence2 = require("@pixerate/editor/persistence");
+var import_jsx_runtime = require("react/jsx-runtime");
+var RecoveryPrompt = ({
+  recovery,
+  onRestore,
+  onDiscard,
+  formatTime,
+  restoreLabel = "Restore",
+  discardLabel = "Discard",
+  className = ""
+}) => {
+  if (!recovery) return null;
+  const { name } = recovery.meta;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "alertdialog",
+      "aria-label": "Unsaved changes found",
+      "data-recovery-prompt": "",
+      className: `flex flex-wrap items-center gap-3 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1", children: [
+          (0, import_persistence2.formatRecoveryMessage)(recovery.meta, formatTime),
+          name ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "ml-1 text-xs text-muted-foreground", children: [
+            "(",
+            name,
+            ")"
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-recovery-restore": "",
+            onClick: onRestore,
+            className: "rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground hover:opacity-90",
+            children: restoreLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-recovery-discard": "",
+            onClick: onDiscard,
+            className: "rounded-md border border-border px-3 py-1 text-xs font-medium hover:bg-muted",
+            children: discardLabel
+          }
+        )
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RecoveryPrompt,
+  useAutosave
+});
+//# sourceMappingURL=index.cjs.map

package/dist/persistence/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/persistence/index.ts","../../src/persistence/useAutosave.ts","../../src/persistence/RecoveryPrompt.tsx"],"sourcesContent":["export * from './useAutosave';\nexport * from './RecoveryPrompt';\n","import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  createAutosaveController,\n  createRevisionTracker,\n  type AutosaveController,\n  type AutosaveRecovery,\n  type AutosaveStatusInfo,\n  type DirtyFlagSource,\n  type RevisionChangeSource,\n  type RevisionTracker,\n  type StorageAdapter,\n} from '@pixerate/editor/persistence';\n\nexport interface UseAutosaveOptions<T> {\n  storage: StorageAdapter;\n  /** Snapshot key (the meta lives at `<key>:meta`). */\n  key: string;\n  /** Reads the current document (the latest function is always used). */\n  getSnapshot: () => T;\n  serialize?: (snapshot: T) => string;\n  deserialize?: (text: string) => T;\n  /** Document name stored with the snapshot. */\n  name?: string;\n  /** Change notifications, e.g. a `HistoryManager`. */\n  history?: RevisionChangeSource;\n  /** Saved-vs-current flag, e.g. `useHistoryDirty().tracker` or a `bindDirtyToHistory` binding. */\n  dirty?: DirtyFlagSource;\n  interval?: number;\n  debounceMs?: number;\n  retryBaseMs?: number;\n  retryMaxMs?: number;\n  /**\n   * Whether the document has finished loading (default `true`). Snapshots start\n   * once this is true and any recovered snapshot was restored or discarded.\n   */\n  ready?: boolean;\n  /** Look for an earlier session's snapshot on mount (default `true`). */\n  recover?: boolean;\n  /** Write pending changes on `pagehide` and when the tab is hidden (default `true`). */\n  flushOnHide?: boolean;\n}\n\nexport interface UseAutosaveResult<T> {\n  status: AutosaveStatusInfo;\n  /** An earlier session's unsaved snapshot, until restored or discarded. */\n  recovery: AutosaveRecovery<T> | null;\n  /** True while the recovery check runs or a recovered snapshot awaits a decision. */\n  pendingRecovery: boolean;\n  /** Takes the recovered snapshot (apply it to the editor) and starts autosaving. */\n  restore: () => T | undefined;\n  /** Deletes the recovered snapshot and starts autosaving. */\n  discard: () => Promise<void>;\n  /** Writes pending changes now. */\n  flushNow: () => Promise<void>;\n  /** Call after an explicit save: marks the current revision saved and retires this session's snapshot. */\n  markClean: () => Promise<void>;\n  /** Records a change made outside `history`. */\n  notifyChange: () => void;\n  controller: AutosaveController<T> | null;\n}\n\nconst IDLE: AutosaveStatusInfo = {\n  status: 'idle',\n  error: null,\n  failures: 0,\n  nextAttemptAt: null,\n  lastSavedAt: null,\n  ready: false,\n};\n\n/**\n * Crash-recovery autosave bound to a history and dirty flag, with page\n * lifecycle flushing and a recovery check on mount (see\n * `createAutosaveController` in `@pixerate/editor/persistence`). Render\n * `<RecoveryPrompt>` with `recovery`, `restore` and `discard`.\n */\nexport function useAutosave<T>(options: UseAutosaveOptions<T>): UseAutosaveResult<T> {\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  const { storage, key, history, dirty } = options;\n  const recover = options.recover !== false;\n  const flushOnHide = options.flushOnHide !== false;\n  const ready = options.ready !== false;\n\n  const [controller, setController] = useState<AutosaveController<T> | null>(null);\n  const [status, setStatus] = useState<AutosaveStatusInfo>(IDLE);\n  const [recovery, setRecovery] = useState<AutosaveRecovery<T> | null>(null);\n  const [pendingRecovery, setPendingRecovery] = useState(recover);\n  const revisionsRef = useRef<RevisionTracker | null>(null);\n\n  useEffect(() => {\n    const revisions = createRevisionTracker({ history, dirty });\n    const o = optionsRef.current;\n    const instance = createAutosaveController<T>({\n      storage,\n      key,\n      getSnapshot: () => optionsRef.current.getSnapshot(),\n      serialize: o.serialize,\n      deserialize: o.deserialize,\n      name: () => optionsRef.current.name,\n      revision: revisions.revision,\n      savedRevision: revisions.savedRevision,\n      interval: o.interval,\n      debounceMs: o.debounceMs,\n      retryBaseMs: o.retryBaseMs,\n      retryMaxMs: o.retryMaxMs,\n    });\n    const unsubscribeStatus = instance.subscribe(setStatus);\n    const unsubscribeRevisions = revisions.subscribe(() => instance.notify());\n    revisionsRef.current = revisions;\n    setController(instance);\n    setStatus(instance.getStatus());\n\n    let active = true;\n    if (recover) {\n      setPendingRecovery(true);\n      instance\n        .checkRecovery()\n        .catch(() => null)\n        .then((found) => {\n          if (!active) return;\n          setRecovery(found);\n          setPendingRecovery(found !== null);\n        });\n    } else {\n      setRecovery(null);\n      setPendingRecovery(false);\n    }\n\n    return () => {\n      active = false;\n      unsubscribeStatus();\n      unsubscribeRevisions();\n      revisions.destroy();\n      instance.destroy();\n      if (revisionsRef.current === revisions) revisionsRef.current = null;\n    };\n  }, [storage, key, history, dirty, recover]);\n\n  useEffect(() => {\n    if (controller && ready && !pendingRecovery) controller.ready();\n  }, [controller, ready, pendingRecovery]);\n\n  useEffect(() => {\n    if (!controller || !flushOnHide || typeof window === 'undefined') return;\n    const flush = () => void controller.flushNow();\n    const onVisibility = () => {\n      if (document.visibilityState === 'hidden') flush();\n    };\n    window.addEventListener('pagehide', flush);\n    document.addEventListener('visibilitychange', onVisibility);\n    return () => {\n      window.removeEventListener('pagehide', flush);\n      document.removeEventListener('visibilitychange', onVisibility);\n    };\n  }, [controller, flushOnHide]);\n\n  const restore = useCallback(() => {\n    const snapshot = recovery?.snapshot;\n    setRecovery(null);\n    setPendingRecovery(false);\n    return snapshot;\n  }, [recovery]);\n\n  const discard = useCallback(async () => {\n    if (controller) await controller.discardRecovery();\n    setRecovery(null);\n    setPendingRecovery(false);\n  }, [controller]);\n\n  const flushNow = useCallback(async () => {\n    await controller?.flushNow();\n  }, [controller]);\n\n  const markClean = useCallback(async () => {\n    revisionsRef.current?.markSaved();\n    await controller?.markClean();\n  }, [controller]);\n\n  const notifyChange = useCallback(() => revisionsRef.current?.bump(), []);\n\n  return { status, recovery, pendingRecovery, restore, discard, flushNow, markClean, notifyChange, controller };\n}\n","import React from 'react';\nimport { formatRecoveryMessage, type RecoveryMeta } from '@pixerate/editor/persistence';\n\nexport interface RecoveryPromptProps {\n  /** `useAutosave().recovery`; nothing renders while it is `null`. */\n  recovery: { meta: RecoveryMeta } | null;\n  onRestore: () => void;\n  onDiscard: () => void;\n  /** Formats the snapshot time (default `toLocaleString`). */\n  formatTime?: (time: number) => string;\n  restoreLabel?: string;\n  discardLabel?: string;\n  className?: string;\n}\n\n/**\n * \"Restore unsaved changes from <time>?\" banner with Restore / Discard buttons\n * (Tailwind + theme tokens).\n */\nexport const RecoveryPrompt: React.FC<RecoveryPromptProps> = ({\n  recovery,\n  onRestore,\n  onDiscard,\n  formatTime,\n  restoreLabel = 'Restore',\n  discardLabel = 'Discard',\n  className = '',\n}) => {\n  if (!recovery) return null;\n  const { name } = recovery.meta;\n  return (\n    <div\n      role=\"alertdialog\"\n      aria-label=\"Unsaved changes found\"\n      data-recovery-prompt=\"\"\n      className={`flex flex-wrap items-center gap-3 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm ${className}`}\n    >\n      <span className=\"min-w-0 flex-1\">\n        {formatRecoveryMessage(recovery.meta, formatTime)}\n        {name ? <span className=\"ml-1 text-xs text-muted-foreground\">({name})</span> : null}\n      </span>\n      <button\n        type=\"button\"\n        data-recovery-restore=\"\"\n        onClick={onRestore}\n        className=\"rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground hover:opacity-90\"\n      >\n        {restoreLabel}\n      </button>\n      <button\n        type=\"button\"\n        data-recovery-discard=\"\"\n        onClick={onDiscard}\n        className=\"rounded-md border border-border px-3 py-1 text-xs font-medium hover:bg-muted\"\n      >\n        {discardLabel}\n      </button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyD;AACzD,yBAUO;AAkDP,IAAM,OAA2B;AAAA,EAC/B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EACV,eAAe;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AACT;AAQO,SAAS,YAAe,SAAsD;AACnF,QAAM,iBAAa,qBAAO,OAAO;AACjC,aAAW,UAAU;AACrB,QAAM,EAAE,SAAS,KAAK,SAAS,MAAM,IAAI;AACzC,QAAM,UAAU,QAAQ,YAAY;AACpC,QAAM,cAAc,QAAQ,gBAAgB;AAC5C,QAAM,QAAQ,QAAQ,UAAU;AAEhC,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAuC,IAAI;AAC/E,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,IAAI;AAC7D,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAqC,IAAI;AACzE,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,OAAO;AAC9D,QAAM,mBAAe,qBAA+B,IAAI;AAExD,8BAAU,MAAM;AACd,UAAM,gBAAY,0CAAsB,EAAE,SAAS,MAAM,CAAC;AAC1D,UAAM,IAAI,WAAW;AACrB,UAAM,eAAW,6CAA4B;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,aAAa,MAAM,WAAW,QAAQ,YAAY;AAAA,MAClD,WAAW,EAAE;AAAA,MACb,aAAa,EAAE;AAAA,MACf,MAAM,MAAM,WAAW,QAAQ;AAAA,MAC/B,UAAU,UAAU;AAAA,MACpB,eAAe,UAAU;AAAA,MACzB,UAAU,EAAE;AAAA,MACZ,YAAY,EAAE;AAAA,MACd,aAAa,EAAE;AAAA,MACf,YAAY,EAAE;AAAA,IAChB,CAAC;AACD,UAAM,oBAAoB,SAAS,UAAU,SAAS;AACtD,UAAM,uBAAuB,UAAU,UAAU,MAAM,SAAS,OAAO,CAAC;AACxE,iBAAa,UAAU;AACvB,kBAAc,QAAQ;AACtB,cAAU,SAAS,UAAU,CAAC;AAE9B,QAAI,SAAS;AACb,QAAI,SAAS;AACX,yBAAmB,IAAI;AACvB,eACG,cAAc,EACd,MAAM,MAAM,IAAI,EAChB,KAAK,CAAC,UAAU;AACf,YAAI,CAAC,OAAQ;AACb,oBAAY,KAAK;AACjB,2BAAmB,UAAU,IAAI;AAAA,MACnC,CAAC;AAAA,IACL,OAAO;AACL,kBAAY,IAAI;AAChB,yBAAmB,KAAK;AAAA,IAC1B;AAEA,WAAO,MAAM;AACX,eAAS;AACT,wBAAkB;AAClB,2BAAqB;AACrB,gBAAU,QAAQ;AAClB,eAAS,QAAQ;AACjB,UAAI,aAAa,YAAY,UAAW,cAAa,UAAU;AAAA,IACjE;AAAA,EACF,GAAG,CAAC,SAAS,KAAK,SAAS,OAAO,OAAO,CAAC;AAE1C,8BAAU,MAAM;AACd,QAAI,cAAc,SAAS,CAAC,gBAAiB,YAAW,MAAM;AAAA,EAChE,GAAG,CAAC,YAAY,OAAO,eAAe,CAAC;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,eAAe,OAAO,WAAW,YAAa;AAClE,UAAM,QAAQ,MAAM,KAAK,WAAW,SAAS;AAC7C,UAAM,eAAe,MAAM;AACzB,UAAI,SAAS,oBAAoB,SAAU,OAAM;AAAA,IACnD;AACA,WAAO,iBAAiB,YAAY,KAAK;AACzC,aAAS,iBAAiB,oBAAoB,YAAY;AAC1D,WAAO,MAAM;AACX,aAAO,oBAAoB,YAAY,KAAK;AAC5C,eAAS,oBAAoB,oBAAoB,YAAY;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,CAAC;AAE5B,QAAM,cAAU,0BAAY,MAAM;AAChC,UAAM,WAAW,UAAU;AAC3B,gBAAY,IAAI;AAChB,uBAAmB,KAAK;AACxB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAU,0BAAY,YAAY;AACtC,QAAI,WAAY,OAAM,WAAW,gBAAgB;AACjD,gBAAY,IAAI;AAChB,uBAAmB,KAAK;AAAA,EAC1B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAW,0BAAY,YAAY;AACvC,UAAM,YAAY,SAAS;AAAA,EAC7B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAY,0BAAY,YAAY;AACxC,iBAAa,SAAS,UAAU;AAChC,UAAM,YAAY,UAAU;AAAA,EAC9B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAe,0BAAY,MAAM,aAAa,SAAS,KAAK,GAAG,CAAC,CAAC;AAEvE,SAAO,EAAE,QAAQ,UAAU,iBAAiB,SAAS,SAAS,UAAU,WAAW,cAAc,WAAW;AAC9G;;;ACrLA,IAAAA,sBAAyD;AAsCzC;AApBT,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf,YAAY;AACd,MAAM;AACJ,MAAI,CAAC,SAAU,QAAO;AACtB,QAAM,EAAE,KAAK,IAAI,SAAS;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,wBAAqB;AAAA,MACrB,WAAW,+HAA+H,SAAS;AAAA,MAEnJ;AAAA,qDAAC,UAAK,WAAU,kBACb;AAAA,yDAAsB,SAAS,MAAM,UAAU;AAAA,UAC/C,OAAO,6CAAC,UAAK,WAAU,sCAAqC;AAAA;AAAA,YAAE;AAAA,YAAK;AAAA,aAAC,IAAU;AAAA,WACjF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,yBAAsB;AAAA,YACtB,SAAS;AAAA,YACT,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,yBAAsB;AAAA,YACtB,SAAS;AAAA,YACT,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_persistence"]}

package/dist/persistence/index.d.cts

@@ -0,0 +1,77 @@
+import { StorageAdapter, RevisionChangeSource, DirtyFlagSource, AutosaveStatusInfo, AutosaveRecovery, AutosaveController, RecoveryMeta } from '@pixerate/editor/persistence';
+import React__default from 'react';
+
+interface UseAutosaveOptions<T> {
+    storage: StorageAdapter;
+    /** Snapshot key (the meta lives at `<key>:meta`). */
+    key: string;
+    /** Reads the current document (the latest function is always used). */
+    getSnapshot: () => T;
+    serialize?: (snapshot: T) => string;
+    deserialize?: (text: string) => T;
+    /** Document name stored with the snapshot. */
+    name?: string;
+    /** Change notifications, e.g. a `HistoryManager`. */
+    history?: RevisionChangeSource;
+    /** Saved-vs-current flag, e.g. `useHistoryDirty().tracker` or a `bindDirtyToHistory` binding. */
+    dirty?: DirtyFlagSource;
+    interval?: number;
+    debounceMs?: number;
+    retryBaseMs?: number;
+    retryMaxMs?: number;
+    /**
+     * Whether the document has finished loading (default `true`). Snapshots start
+     * once this is true and any recovered snapshot was restored or discarded.
+     */
+    ready?: boolean;
+    /** Look for an earlier session's snapshot on mount (default `true`). */
+    recover?: boolean;
+    /** Write pending changes on `pagehide` and when the tab is hidden (default `true`). */
+    flushOnHide?: boolean;
+}
+interface UseAutosaveResult<T> {
+    status: AutosaveStatusInfo;
+    /** An earlier session's unsaved snapshot, until restored or discarded. */
+    recovery: AutosaveRecovery<T> | null;
+    /** True while the recovery check runs or a recovered snapshot awaits a decision. */
+    pendingRecovery: boolean;
+    /** Takes the recovered snapshot (apply it to the editor) and starts autosaving. */
+    restore: () => T | undefined;
+    /** Deletes the recovered snapshot and starts autosaving. */
+    discard: () => Promise<void>;
+    /** Writes pending changes now. */
+    flushNow: () => Promise<void>;
+    /** Call after an explicit save: marks the current revision saved and retires this session's snapshot. */
+    markClean: () => Promise<void>;
+    /** Records a change made outside `history`. */
+    notifyChange: () => void;
+    controller: AutosaveController<T> | null;
+}
+/**
+ * Crash-recovery autosave bound to a history and dirty flag, with page
+ * lifecycle flushing and a recovery check on mount (see
+ * `createAutosaveController` in `@pixerate/editor/persistence`). Render
+ * `<RecoveryPrompt>` with `recovery`, `restore` and `discard`.
+ */
+declare function useAutosave<T>(options: UseAutosaveOptions<T>): UseAutosaveResult<T>;
+
+interface RecoveryPromptProps {
+    /** `useAutosave().recovery`; nothing renders while it is `null`. */
+    recovery: {
+        meta: RecoveryMeta;
+    } | null;
+    onRestore: () => void;
+    onDiscard: () => void;
+    /** Formats the snapshot time (default `toLocaleString`). */
+    formatTime?: (time: number) => string;
+    restoreLabel?: string;
+    discardLabel?: string;
+    className?: string;
+}
+/**
+ * "Restore unsaved changes from <time>?" banner with Restore / Discard buttons
+ * (Tailwind + theme tokens).
+ */
+declare const RecoveryPrompt: React__default.FC<RecoveryPromptProps>;
+
+export { RecoveryPrompt, type RecoveryPromptProps, type UseAutosaveOptions, type UseAutosaveResult, useAutosave };

package/dist/persistence/index.d.ts

@@ -0,0 +1,77 @@
+import { StorageAdapter, RevisionChangeSource, DirtyFlagSource, AutosaveStatusInfo, AutosaveRecovery, AutosaveController, RecoveryMeta } from '@pixerate/editor/persistence';
+import React__default from 'react';
+
+interface UseAutosaveOptions<T> {
+    storage: StorageAdapter;
+    /** Snapshot key (the meta lives at `<key>:meta`). */
+    key: string;
+    /** Reads the current document (the latest function is always used). */
+    getSnapshot: () => T;
+    serialize?: (snapshot: T) => string;
+    deserialize?: (text: string) => T;
+    /** Document name stored with the snapshot. */
+    name?: string;
+    /** Change notifications, e.g. a `HistoryManager`. */
+    history?: RevisionChangeSource;
+    /** Saved-vs-current flag, e.g. `useHistoryDirty().tracker` or a `bindDirtyToHistory` binding. */
+    dirty?: DirtyFlagSource;
+    interval?: number;
+    debounceMs?: number;
+    retryBaseMs?: number;
+    retryMaxMs?: number;
+    /**
+     * Whether the document has finished loading (default `true`). Snapshots start
+     * once this is true and any recovered snapshot was restored or discarded.
+     */
+    ready?: boolean;
+    /** Look for an earlier session's snapshot on mount (default `true`). */
+    recover?: boolean;
+    /** Write pending changes on `pagehide` and when the tab is hidden (default `true`). */
+    flushOnHide?: boolean;
+}
+interface UseAutosaveResult<T> {
+    status: AutosaveStatusInfo;
+    /** An earlier session's unsaved snapshot, until restored or discarded. */
+    recovery: AutosaveRecovery<T> | null;
+    /** True while the recovery check runs or a recovered snapshot awaits a decision. */
+    pendingRecovery: boolean;
+    /** Takes the recovered snapshot (apply it to the editor) and starts autosaving. */
+    restore: () => T | undefined;
+    /** Deletes the recovered snapshot and starts autosaving. */
+    discard: () => Promise<void>;
+    /** Writes pending changes now. */
+    flushNow: () => Promise<void>;
+    /** Call after an explicit save: marks the current revision saved and retires this session's snapshot. */
+    markClean: () => Promise<void>;
+    /** Records a change made outside `history`. */
+    notifyChange: () => void;
+    controller: AutosaveController<T> | null;
+}
+/**
+ * Crash-recovery autosave bound to a history and dirty flag, with page
+ * lifecycle flushing and a recovery check on mount (see
+ * `createAutosaveController` in `@pixerate/editor/persistence`). Render
+ * `<RecoveryPrompt>` with `recovery`, `restore` and `discard`.
+ */
+declare function useAutosave<T>(options: UseAutosaveOptions<T>): UseAutosaveResult<T>;
+
+interface RecoveryPromptProps {
+    /** `useAutosave().recovery`; nothing renders while it is `null`. */
+    recovery: {
+        meta: RecoveryMeta;
+    } | null;
+    onRestore: () => void;
+    onDiscard: () => void;
+    /** Formats the snapshot time (default `toLocaleString`). */
+    formatTime?: (time: number) => string;
+    restoreLabel?: string;
+    discardLabel?: string;
+    className?: string;
+}
+/**
+ * "Restore unsaved changes from <time>?" banner with Restore / Discard buttons
+ * (Tailwind + theme tokens).
+ */
+declare const RecoveryPrompt: React__default.FC<RecoveryPromptProps>;
+
+export { RecoveryPrompt, type RecoveryPromptProps, type UseAutosaveOptions, type UseAutosaveResult, useAutosave };

package/dist/persistence/index.js

@@ -0,0 +1,9 @@
+import {
+  RecoveryPrompt,
+  useAutosave
+} from "../chunk-XWFU2CSG.js";
+export {
+  RecoveryPrompt,
+  useAutosave
+};
+//# sourceMappingURL=index.js.map

package/dist/persistence/index.js.map

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

package/dist/spreadsheet/index.cjs

@@ -269,11 +269,12 @@ var SpreadsheetContextMenu = ({ items, x, y, onClose }) => {
             type: "button",
             role: "menuitem",
             "data-action": item.id,
+            "data-checked": item.checked ? "" : void 0,
             disabled: item.disabled,
-            className: "block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
+            className: `block w-full px-3 py-1 text-left hover:bg-muted disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent ${item.checked ? "font-semibold" : ""}`,
             onClick: () => {
               onClose();
-              item.run();
+              (0, import_spreadsheet2.runSpreadsheetMenuItem)(item);
             },
             children: item.label
           }
@@ -583,6 +584,19 @@ function spillBorderStyle(range, row, col) {
     borderRight: col === range.endCol ? line : void 0
   };
 }
+function CellText({ cell }) {
+  const shown = (0, import_spreadsheet5.formatCellForDisplay)(cell);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
+      title: cell.error ? cell.errorMessage ?? cell.error : void 0,
+      "data-numeric": shown.numeric ? "" : void 0,
+      style: shown.numeric || shown.color ? { ...shown.numeric ? { textAlign: "right" } : {}, ...shown.color ? { color: (0, import_spreadsheet5.numberFormatColorToCss)(shown.color) } : {} } : void 0,
+      children: shown.text
+    }
+  );
+}
 var SpreadsheetEditor = ({
   state: externalState,
   readOnly = false,
@@ -1114,14 +1128,7 @@ var SpreadsheetEditor = ({
                               }
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormulaHints, { inputRef: cellInputRef, value: state.draftValue, onAccept: state.setDraftValue })
-                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                            "span",
-                            {
-                              className: `truncate block max-w-full ${cell.error ? "text-destructive font-semibold" : ""}`,
-                              title: cell.error ? cell.errorMessage ?? cell.error : void 0,
-                              children: cell.error || (cell.value ?? "")
-                            }
-                          ),
+                          ] }) : customCellRenderer ? customCellRenderer({ row, col, cell }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CellText, { cell }),
                           activeSpill && (0, import_spreadsheet5.rangeContains)(activeSpill.range, rIdx, cIdx) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", className: "spreadsheet-spill-border", style: spillBorderStyle(activeSpill.range, rIdx, cIdx) }),
                           showFillHandle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                             "div",