form-snapshots 1.0.6

package/dist/index.js

@@ -0,0 +1,1421 @@
+"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);
+
+// form-snapshots/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FormSnapshotTable: () => FormSnapshotTable,
+  FormSnapshotsClient: () => FormSnapshotsClient,
+  FormSnapshotsDevtools: () => FormSnapshotsDevtools,
+  FormSnapshotsProvider: () => FormSnapshotsProvider,
+  db: () => db,
+  useFormSnapshots: () => useFormSnapshots,
+  useFormSnapshotsConfig: () => useFormSnapshotsConfig,
+  useFormSnapshotsList: () => useFormSnapshotsList,
+  useObjectFormSnapshots: () => useObjectFormSnapshots,
+  useRHFFormSnapshots: () => useRHFFormSnapshots
+});
+module.exports = __toCommonJS(index_exports);
+
+// form-snapshots/hooks/use-form-snapshots.ts
+var import_react2 = require("react");
+
+// form-snapshots/client.ts
+var FormSnapshotsClient = class {
+  constructor(params) {
+    this.storage = params.storage;
+    this.formName = params.formName;
+    this.snapshotsLimit = params.snapshotsLimit;
+  }
+  async initSession() {
+    const now = Date.now();
+    const cutoff = now - this.snapshotsLimit;
+    await this.storage.pruneOlderThan(cutoff);
+    const existing = await this.storage.findActiveSession(this.formName);
+    if (existing) return existing;
+    return this.storage.createSession(this.formName, {});
+  }
+  async saveSnapshot(sessionId, snapshot) {
+    await this.storage.updateSession(sessionId, {
+      data: JSON.stringify(snapshot),
+      updatedAt: Date.now()
+    });
+  }
+  async markSubmitted(sessionId) {
+    await this.storage.updateSession(sessionId, {
+      submitted: true,
+      updatedAt: Date.now()
+    });
+  }
+  async deleteSession(sessionId) {
+    if (typeof this.storage.deleteSession === "function") {
+      await this.storage.deleteSession(sessionId);
+    }
+  }
+  async setSubmissionResult(params) {
+    const { sessionId, statusCode, errorMessage } = params;
+    await this.storage.updateSession(sessionId, {
+      statusCode: statusCode ?? null,
+      errorMessage: errorMessage ?? null,
+      updatedAt: Date.now()
+    });
+  }
+  async getLatestSnapshot() {
+    const latest = await this.storage.getLatestSession(this.formName);
+    if (!latest) return null;
+    return JSON.parse(latest.data);
+  }
+  async openNewSessionFromSnapshot(snapshot) {
+    return this.storage.createSession(this.formName, snapshot);
+  }
+};
+
+// form-snapshots/local-db/db.ts
+var import_dexie = require("dexie");
+var db = new import_dexie.Dexie("FormSnapshotsDatabase");
+db.version(1).stores({
+  formSessions: "++id, formName, createdAt, submitted, [formName+createdAt]"
+});
+db.version(2).stores({
+  formSessions: "++id, formName, createdAt, updatedAt, submitted, [formName+createdAt]"
+});
+
+// form-snapshots/dexie-storage.ts
+function mapToBase(session) {
+  return {
+    id: session.id,
+    formName: session.formName,
+    data: session.data,
+    createdAt: session.createdAt,
+    updatedAt: session.updatedAt,
+    submitted: session.submitted,
+    statusCode: session.statusCode ?? null,
+    errorMessage: session.errorMessage ?? null
+  };
+}
+var DexieFormSnapshotsStorage = class {
+  async findActiveSession(formName) {
+    const existing = await db.formSessions.where("formName").equals(formName).filter((s) => !s.submitted).last();
+    return existing ? mapToBase(existing) : null;
+  }
+  async createSession(formName, snapshot) {
+    const now = Date.now();
+    const id = await db.formSessions.add({
+      formName,
+      data: JSON.stringify(snapshot),
+      createdAt: now,
+      updatedAt: now,
+      submitted: false,
+      statusCode: null,
+      errorMessage: null
+    });
+    const created = await db.formSessions.get(id);
+    if (!created) {
+      throw new Error("Failed to create form session");
+    }
+    return mapToBase(created);
+  }
+  async updateSession(id, patch) {
+    await db.formSessions.update(id, patch);
+  }
+  async getLatestSession(formName) {
+    const sessions = await db.formSessions.where("formName").equals(formName).sortBy("updatedAt");
+    const latest = sessions[sessions.length - 1];
+    return latest ? mapToBase(latest) : null;
+  }
+  async listSessions(formName) {
+    const sessions = await db.formSessions.where("formName").equals(formName).sortBy("updatedAt");
+    return sessions.map(mapToBase);
+  }
+  async pruneOlderThan(cutoffMs) {
+    await db.formSessions.where("createdAt").below(cutoffMs).delete();
+  }
+  async deleteSession(id) {
+    await db.formSessions.delete(id);
+  }
+};
+
+// form-snapshots/dom-snapshot.ts
+function toStringValue(val) {
+  if (val == null) return "";
+  if (typeof val === "object") return JSON.stringify(val);
+  return String(val);
+}
+function applyValueToInput(input, val) {
+  if (input instanceof HTMLInputElement) {
+    if (input.type === "checkbox") {
+      input.checked = Boolean(val);
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+      return;
+    }
+    if (input.type === "radio") {
+      input.checked = input.value === val;
+      if (input.checked) input.dispatchEvent(new Event("change", { bubbles: true }));
+      return;
+    }
+  }
+  input.value = toStringValue(val);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function restoreSnapshotToForm(form, snapshot) {
+  for (const el of Array.from(form.elements)) {
+    const input = el;
+    if (!input.name || !(input.name in snapshot)) continue;
+    applyValueToInput(input, snapshot[input.name]);
+  }
+}
+function snapshotFromDOMForm(form) {
+  const snapshot = {};
+  for (const el of Array.from(form.elements)) {
+    const input = el;
+    if (!input.name) continue;
+    readInputIntoSnapshot(input, snapshot);
+  }
+  return snapshot;
+}
+function readInputIntoSnapshot(input, snapshot) {
+  if (input instanceof HTMLInputElement) {
+    if (input.type === "checkbox") {
+      snapshot[input.name] = input.checked;
+    } else if (input.type === "radio") {
+      if (input.checked) snapshot[input.name] = input.value;
+    } else if (input.type !== "file") {
+      snapshot[input.name] = input.value;
+    }
+  } else {
+    snapshot[input.name] = input.value;
+  }
+}
+
+// form-snapshots/context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormSnapshotsConfigContext = (0, import_react.createContext)(
+  void 0
+);
+function FormSnapshotsProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormSnapshotsConfigContext.Provider, { value: value ?? {}, children });
+}
+function useFormSnapshotsConfig() {
+  return (0, import_react.useContext)(FormSnapshotsConfigContext) ?? {};
+}
+
+// form-snapshots/hooks/use-form-snapshots.ts
+function applyExcludeFields(snapshot, excludeFields) {
+  if (!excludeFields || excludeFields.length === 0) return snapshot;
+  function pruneByPrefix(obj, paths, parentPath = "") {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      const path = parentPath ? `${parentPath}.${key}` : key;
+      const isExcluded = paths.some(
+        (p) => path === p || path.startsWith(`${p}.`)
+      );
+      if (isExcluded) {
+        continue;
+      }
+      if (value && typeof value === "object" && !Array.isArray(value)) {
+        result[key] = pruneByPrefix(
+          value,
+          paths,
+          path
+        );
+        continue;
+      }
+      result[key] = value;
+    }
+    return result;
+  }
+  return pruneByPrefix(snapshot, excludeFields);
+}
+function useFormSnapshots(formName, options) {
+  const { snapshotsLimit, getValues, applyValues, excludeFields, discardOnSubmit } = options ?? {};
+  const formRef = (0, import_react2.useRef)(null);
+  const sessionIdRef = (0, import_react2.useRef)(null);
+  const lastSubmittedSessionIdRef = (0, import_react2.useRef)(null);
+  const clientRef = (0, import_react2.useRef)(null);
+  const [isSubmitted, setIsSubmitted] = (0, import_react2.useState)(false);
+  const storageRef = (0, import_react2.useRef)(null);
+  const {
+    defaultSnapshotsLimit,
+    excludeFields: globalExcludeFields,
+    discardOnSubmit: globalDiscardOnSubmit
+  } = useFormSnapshotsConfig();
+  const effectiveSnapshotsLimit = snapshotsLimit ?? defaultSnapshotsLimit ?? 24 * 60 * 60 * 1e3;
+  const effectiveDiscardOnSubmit = typeof discardOnSubmit === "boolean" ? discardOnSubmit : globalDiscardOnSubmit ?? false;
+  const mergedExcludeFields = globalExcludeFields || excludeFields ? Array.from(
+    /* @__PURE__ */ new Set([...globalExcludeFields ?? [], ...excludeFields ?? []])
+  ) : void 0;
+  const getValuesRef = (0, import_react2.useRef)(getValues);
+  const applyValuesRef = (0, import_react2.useRef)(applyValues);
+  (0, import_react2.useEffect)(() => {
+    getValuesRef.current = getValues;
+  }, [getValues]);
+  (0, import_react2.useEffect)(() => {
+    applyValuesRef.current = applyValues;
+  }, [applyValues]);
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    async function init() {
+      if (!storageRef.current) {
+        storageRef.current = new DexieFormSnapshotsStorage();
+      }
+      const client = new FormSnapshotsClient({
+        storage: storageRef.current,
+        formName,
+        snapshotsLimit: effectiveSnapshotsLimit
+      });
+      clientRef.current = client;
+      const session = await client.initSession();
+      if (cancelled) return;
+      sessionIdRef.current = session.id;
+      if (session.data && session.data !== "{}") {
+        requestAnimationFrame(() => {
+          if (cancelled) return;
+          const snapshot = JSON.parse(session.data);
+          if (applyValuesRef.current) {
+            applyValuesRef.current(snapshot);
+          } else if (formRef.current) {
+            restoreSnapshotToForm(formRef.current, snapshot);
+          }
+        });
+      }
+    }
+    init();
+    return () => {
+      cancelled = true;
+    };
+  }, [formName, effectiveSnapshotsLimit]);
+  const handleBlur = (0, import_react2.useCallback)(() => {
+    const sessionId = sessionIdRef.current;
+    if (sessionId === null) return;
+    let snapshot;
+    if (getValuesRef.current) {
+      snapshot = getValuesRef.current();
+    } else {
+      const form = formRef.current;
+      if (!form) return;
+      snapshot = snapshotFromDOMForm(form);
+    }
+    snapshot = applyExcludeFields(snapshot, mergedExcludeFields);
+    if (!clientRef.current) return;
+    clientRef.current.saveSnapshot(sessionId, snapshot);
+  }, []);
+  const clearFormState = (0, import_react2.useCallback)(() => {
+    if (applyValuesRef.current) {
+      applyValuesRef.current({});
+    } else if (formRef.current) {
+      formRef.current.reset();
+    }
+  }, []);
+  const wrapSubmit = (0, import_react2.useCallback)(
+    (userSubmit) => (e) => {
+      e.preventDefault();
+      handleBlur();
+      const sessionId = sessionIdRef.current;
+      const client = clientRef.current;
+      if (sessionId !== null && client) {
+        if (effectiveDiscardOnSubmit) {
+          client.deleteSession(sessionId);
+          lastSubmittedSessionIdRef.current = null;
+        } else {
+          client.markSubmitted(sessionId);
+          lastSubmittedSessionIdRef.current = sessionId;
+        }
+        sessionIdRef.current = null;
+      }
+      if (effectiveDiscardOnSubmit) {
+        clearFormState();
+      }
+      setIsSubmitted(true);
+      userSubmit?.(e);
+    },
+    [handleBlur, clearFormState, effectiveDiscardOnSubmit]
+  );
+  const markSubmitResult = (0, import_react2.useCallback)(
+    async (params) => {
+      const client = clientRef.current;
+      const sessionId = lastSubmittedSessionIdRef.current;
+      if (!client || sessionId == null) return;
+      await client.setSubmissionResult({
+        sessionId,
+        statusCode: params.statusCode,
+        errorMessage: params.errorMessage
+      });
+    },
+    []
+  );
+  const wrapSubmitAsync = (0, import_react2.useCallback)(
+    (userSubmit) => async (e) => {
+      e.preventDefault();
+      handleBlur();
+      const sessionId = sessionIdRef.current;
+      const client = clientRef.current;
+      if (sessionId !== null && client) {
+        if (effectiveDiscardOnSubmit) {
+          await client.deleteSession(sessionId);
+          lastSubmittedSessionIdRef.current = null;
+        } else {
+          await client.markSubmitted(sessionId);
+          lastSubmittedSessionIdRef.current = sessionId;
+        }
+        sessionIdRef.current = null;
+      }
+      if (effectiveDiscardOnSubmit) {
+        clearFormState();
+      }
+      setIsSubmitted(true);
+      if (!userSubmit) return;
+      try {
+        const result = await userSubmit(e);
+        if (result && typeof result === "object") {
+          await markSubmitResult({
+            statusCode: "statusCode" in result ? result.statusCode : null,
+            errorMessage: "errorMessage" in result ? result.errorMessage : null
+          });
+        }
+      } catch (error) {
+        console.error("wrapSubmitAsync userSubmit error:", error);
+      }
+    },
+    [handleBlur, markSubmitResult, clearFormState, effectiveDiscardOnSubmit]
+  );
+  const restoreLatest = (0, import_react2.useCallback)(async () => {
+    if (!clientRef.current) return;
+    const snapshot = await clientRef.current.getLatestSnapshot();
+    if (!snapshot) return;
+    if (applyValuesRef.current) {
+      applyValuesRef.current(snapshot);
+    } else {
+      if (!formRef.current) return;
+      restoreSnapshotToForm(formRef.current, snapshot);
+    }
+    const newSession = await clientRef.current.openNewSessionFromSnapshot(
+      snapshot
+    );
+    sessionIdRef.current = newSession.id;
+    setIsSubmitted(false);
+  }, []);
+  return {
+    formRef,
+    handleBlur,
+    wrapSubmit,
+    wrapSubmitAsync,
+    restoreLatest,
+    isSubmitted,
+    markSubmitResult
+  };
+}
+
+// form-snapshots/hooks/use-form-snapshots-list.ts
+var import_dexie_react_hooks = require("dexie-react-hooks");
+function useFormSnapshotsList(formName, options) {
+  const {
+    onlySubmitted = false,
+    onlySuccessful = false,
+    maxAgeMs,
+    limit
+  } = options ?? {};
+  const items = (0, import_dexie_react_hooks.useLiveQuery)(async () => {
+    const now = Date.now();
+    const cutoff = maxAgeMs ? now - maxAgeMs : void 0;
+    let query = db.formSessions.where("formName").equals(formName);
+    let sessions = await query.toArray();
+    if (onlySubmitted) {
+      sessions = sessions.filter((s) => s.submitted);
+    }
+    if (onlySuccessful) {
+      sessions = sessions.filter((s) => {
+        if (s.statusCode == null) return false;
+        return s.statusCode >= 200 && s.statusCode < 300;
+      });
+    }
+    if (cutoff != null) {
+      sessions = sessions.filter((s) => s.createdAt >= cutoff);
+    }
+    sessions.sort((a, b) => b.updatedAt - a.updatedAt);
+    if (typeof limit === "number") {
+      sessions = sessions.slice(0, limit);
+    }
+    return sessions.map((s) => ({
+      id: s.id,
+      formName: s.formName,
+      createdAt: s.createdAt,
+      updatedAt: s.updatedAt,
+      submitted: s.submitted,
+      statusCode: s.statusCode ?? null,
+      errorMessage: s.errorMessage ?? null,
+      ageMs: now - s.updatedAt
+    }));
+  }, [formName, onlySubmitted, onlySuccessful, maxAgeMs, limit]);
+  const isLoading = items === void 0;
+  return { items: items ?? [], isLoading };
+}
+
+// form-snapshots/devtools.tsx
+var import_react4 = require("react");
+var import_dexie_react_hooks2 = require("dexie-react-hooks");
+
+// form-snapshots/snapshot-table.tsx
+var import_react3 = require("react");
+
+// form-snapshots/styles.ts
+var STYLE_ID = "form-snapshots-styles";
+var SNAPSHOT_TABLE_CSS = `:root {
+  /* light \u2013 neutral-like palette */
+  --fs-st-border: #e5e5e5;           /* neutral-200 */
+  --fs-st-border-soft: #d4d4d4;      /* neutral-300 */
+  --fs-st-header-bg: #f5f5f5;        /* neutral-100 */
+  --fs-st-key-text: #737373;         /* neutral-500 */
+  --fs-st-muted-text: #737373;       /* neutral-500 */
+  --fs-st-muted-strong: #a3a3a3;     /* neutral-400 */
+  --fs-st-chip-bg: #e5e5e5;          /* neutral-200 */
+  --fs-st-chip-text: #171717;        /* neutral-900 */
+  --fs-st-object-bg: #f5f5f5;        /* neutral-100 */
+  --fs-st-badge-true-bg: rgba(22, 163, 74, 0.1);
+  --fs-st-badge-true-text: #166534;
+  --fs-st-badge-false-border: #d4d4d4;
+  --fs-st-badge-false-text: #525252; /* neutral-600 */
+  --fs-st-text-main: #171717;        /* neutral-900 */
+}
+
+html.dark {
+  /* dark \u2013 neutral-900/950 style */
+  --fs-st-border: #404040;           /* neutral-700 */
+  --fs-st-border-soft: #262626;      /* neutral-800 */
+  --fs-st-header-bg: #171717;        /* neutral-900 */
+  --fs-st-key-text: #a3a3a3;         /* neutral-400 */
+  --fs-st-muted-text: #a3a3a3;       /* neutral-400 */
+  --fs-st-muted-strong: #737373;     /* neutral-500 */
+  --fs-st-chip-bg: #262626;          /* neutral-800 */
+  --fs-st-chip-text: #f5f5f5;        /* neutral-100 */
+  --fs-st-object-bg: #0a0a0a;        /* neutral-950ish */
+  --fs-st-badge-true-bg: rgba(22, 163, 74, 0.25);
+  --fs-st-badge-true-text: #bbf7d0;
+  --fs-st-badge-false-border: #404040;
+  --fs-st-badge-false-text: #e5e5e5; /* neutral-200 */
+  --fs-st-text-main: #f5f5f5;        /* neutral-100 */
+}
+.fs-snapshot-wrapper {
+  border-radius: 6px;
+  border: 1px solid var(--fs-st-border);
+  overflow: hidden;
+  color: var(--fs-st-text-main);
+}
+
+.fs-snapshot-table {
+  width: 100%;
+  font-size: 12px;
+  border-collapse: collapse;
+}
+
+.fs-snapshot-header-row {
+  border-bottom: 1px solid var(--fs-st-border);
+  background: var(--fs-st-header-bg);
+}
+
+.fs-snapshot-header-cell {
+  padding: 4px 6px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--fs-st-muted-text);
+}
+
+.fs-snapshot-row {
+  border-bottom: 1px solid var(--fs-st-border-soft);
+}
+
+.fs-snapshot-row:last-child {
+  border-bottom: none;
+}
+
+.fs-snapshot-key {
+  padding: 4px 6px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-size: 10px;
+  color: var(--fs-st-key-text);
+  vertical-align: top;
+}
+
+.fs-snapshot-value {
+  padding: 4px 6px;
+  vertical-align: top;
+}
+
+.fs-snapshot-empty {
+  font-size: 12px;
+  color: var(--fs-st-muted-text);
+  font-style: italic;
+}
+
+.fs-snapshot-muted {
+  color: var(--fs-st-muted-strong);
+  font-style: italic;
+}
+
+.fs-snapshot-text {
+  word-break: break-all;
+}
+
+.fs-snapshot-array {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.fs-snapshot-chip {
+  background: var(--fs-st-chip-bg);
+  color: var(--fs-st-chip-text);
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 999px;
+}
+
+.fs-snapshot-object {
+  max-height: 128px;
+  overflow: auto;
+  border-radius: 4px;
+  background: var(--fs-st-object-bg);
+  padding: 4px;
+  font-size: 10px;
+}
+
+.fs-snapshot-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 10px;
+}
+
+.fs-snapshot-badge-true {
+  background: var(--fs-st-badge-true-bg);
+  color: var(--fs-st-badge-true-text);
+}
+
+.fs-snapshot-badge-false {
+  background: transparent;
+  color: var(--fs-st-badge-false-text);
+  border: 1px solid var(--fs-st-badge-false-border);
+}
+`;
+var DEVTOOLS_CSS = `:root {
+  /* light mode \u2013 Tailwind neutral-ish */
+  --fs-dev-bg-surface: rgba(250, 250, 250, 0.95); /* neutral-50 */
+  --fs-dev-bg-panel: rgba(250, 250, 250, 0.98);   /* neutral-50 */
+  --fs-dev-bg-header: #f5f5f5;                    /* neutral-100 */
+  --fs-dev-bg-header-muted: #f5f5f5;
+  --fs-dev-bg-toggle-count: #e5e5e5;              /* neutral-200 */
+  --fs-dev-bg-close-hover: #e5e5e5;               /* neutral-200 */
+  --fs-dev-bg-tag: #e5e5e5;                       /* neutral-200 */
+  --fs-dev-bg-status: #e5e5e5;                    /* neutral-200 */
+  --fs-dev-bg-snapshot: #f5f5f5;                  /* neutral-100 */
+
+  --fs-dev-border-strong: #e5e5e5;                /* neutral-200 */
+  --fs-dev-border-subtle: #e5e5e5;                /* neutral-200 */
+  --fs-dev-border-soft: #d4d4d4;                  /* neutral-300 */
+  --fs-dev-border-snapshot: #d4d4d4;              /* neutral-300 */
+
+  --fs-dev-text-primary: #171717;                 /* neutral-900 */
+  --fs-dev-text-muted: #737373;                   /* neutral-500 */
+  --fs-dev-text-soft: #525252;                    /* neutral-600 */
+  --fs-dev-text-error: #b91c1c;
+
+  --fs-dev-badge-success-bg: rgba(22, 163, 74, 0.1);
+  --fs-dev-badge-success-text: #166534;
+  --fs-dev-badge-warn-bg: rgba(217, 119, 6, 0.12);
+  --fs-dev-badge-warn-text: #92400e;
+
+  --fs-dev-shadow-toggle: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --fs-dev-shadow-toggle-hover: 0 2px 6px rgba(0, 0, 0, 0.12);
+  --fs-dev-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+html.dark .fs-color-scheme-root:root,
+html.dark {
+  /* dark mode \u2013 neutral-900/950 style */
+  --fs-dev-bg-surface: rgba(23, 23, 23, 0.95);    /* neutral-900 */
+  --fs-dev-bg-panel: rgba(23, 23, 23, 0.98);      /* neutral-900 */
+  --fs-dev-bg-header: #171717;                    /* neutral-900 */
+  --fs-dev-bg-header-muted: #171717;
+  --fs-dev-bg-toggle-count: #262626;              /* neutral-800 */
+  --fs-dev-bg-close-hover: #404040;              /* neutral-700 */
+  --fs-dev-bg-tag: #262626;                       /* neutral-800 */
+  --fs-dev-bg-status: #171717;                    /* neutral-900 */
+  --fs-dev-bg-snapshot: #0a0a0a;                  /* neutral-950ish */
+
+  --fs-dev-border-strong: #404040;                /* neutral-700 */
+  --fs-dev-border-subtle: #262626;                /* neutral-800 */
+  --fs-dev-border-soft: #262626;                  /* neutral-800 */
+  --fs-dev-border-snapshot: #404040;              /* neutral-700 */
+
+  --fs-dev-text-primary: #fafafa;                 /* neutral-50 */
+  --fs-dev-text-muted: #a3a3a3;                   /* neutral-400 */
+  --fs-dev-text-soft: #d4d4d4;                    /* neutral-300 */
+  --fs-dev-text-error: #fecaca;
+
+  --fs-dev-badge-success-bg: rgba(22, 163, 74, 0.25);
+  --fs-dev-badge-success-text: #bbf7d0;
+  --fs-dev-badge-warn-bg: rgba(217, 119, 6, 0.3);
+  --fs-dev-badge-warn-text: #fed7aa;
+
+  --fs-dev-shadow-toggle: 0 1px 3px rgba(0, 0, 0, 0.6);
+  --fs-dev-shadow-toggle-hover: 0 2px 6px rgba(0, 0, 0, 0.7);
+  --fs-dev-shadow-panel: 0 20px 40px rgba(0, 0, 0, 0.8);
+}
+.fs-devtools-toggle {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 9999;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 999px;
+  border: 1px solid var(--fs-dev-border-strong);
+  background: var(--fs-dev-bg-surface);
+  padding: 4px 8px;
+  font-size: 12px;
+  color: var(--fs-dev-text-soft);
+  box-shadow: var(--fs-dev-shadow-toggle);
+  cursor: pointer;
+}
+
+.fs-devtools-toggle:hover {
+  box-shadow: var(--fs-dev-shadow-toggle-hover);
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-toggle-count {
+  margin-left: 4px;
+  border-radius: 999px;
+  background: var(--fs-dev-bg-toggle-count);
+  padding: 0 4px;
+  font-size: 10px;
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-panel {
+  position: fixed;
+  bottom: 56px;
+  overflow: hidden;
+  right: 16px;
+  z-index: 9999;
+  width: 420px;
+  max-height: 60vh;
+  border-radius: 12px;
+  color: var(--fs-dev-text-primary);
+  border: 1px solid var(--fs-dev-border-strong);
+  background: var(--fs-dev-bg-panel);
+  box-shadow: var(--fs-dev-shadow-panel);
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+.fs-devtools-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--fs-dev-border-subtle);
+  background: var(--fs-dev-bg-header);
+}
+
+.fs-devtools-header-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.fs-devtools-header-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.fs-devtools-header-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-header-subtitle {
+  font-size: 11px;
+  color: var(--fs-dev-text-muted);
+}
+
+.fs-devtools-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fs-devtools-clear {
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  border: 1px solid var(--fs-dev-border-subtle);
+  background: transparent;
+  color: var(--fs-dev-text-muted);
+  cursor: pointer;
+}
+
+.fs-devtools-clear:hover:enabled {
+  background: var(--fs-dev-bg-close-hover);
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-clear:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.fs-devtools-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 4px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--fs-dev-text-muted);
+}
+
+.fs-devtools-close:hover {
+  background: var(--fs-dev-bg-close-hover);
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-filters {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--fs-dev-border-subtle);
+}
+
+.fs-devtools-select {
+  flex: 1;
+  border-radius: 4px;
+  border: 1px solid var(--fs-dev-border-strong);
+  background: var(--fs-dev-bg-panel);
+  padding: 2px 6px;
+  font-size: 12px;
+}
+
+.fs-devtools-filter-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--fs-dev-text-muted);
+}
+
+.fs-devtools-body {
+  flex: 1;
+  overflow: auto;
+}
+
+.fs-devtools-empty {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--fs-dev-text-muted);
+}
+
+.fs-devtools-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--fs-dev-border-soft);
+}
+
+.fs-devtools-item {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--fs-dev-border-soft);
+}
+
+.fs-devtools-item-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.fs-devtools-item-main {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.fs-devtools-item-text {
+  min-width: 0;
+}
+
+.fs-devtools-item-tags {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fs-devtools-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  background: var(--fs-dev-bg-tag);
+  padding: 2px 6px;
+  font-size: 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-id {
+  font-size: 10px;
+  color: var(--fs-dev-text-muted);
+}
+
+.fs-devtools-meta {
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--fs-dev-text-muted);
+}
+
+.fs-devtools-delete {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 11px;
+  color: var(--fs-dev-text-soft);
+  cursor: pointer;
+}
+
+.fs-devtools-delete:hover {
+  text-decoration: underline;
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-badge {
+  border-radius: 999px;
+  padding: 2px 6px;
+  font-size: 10px;
+}
+
+.fs-devtools-badge-success {
+  background: var(--fs-dev-badge-success-bg);
+  color: var(--fs-dev-badge-success-text);
+}
+
+.fs-devtools-badge-warn {
+  background: var(--fs-dev-badge-warn-bg);
+  color: var(--fs-dev-badge-warn-text);
+}
+
+.fs-devtools-status {
+  border-radius: 999px;
+  background: var(--fs-dev-bg-status);
+  padding: 2px 6px;
+  font-size: 10px;
+  color: var(--fs-dev-text-primary);
+}
+
+.fs-devtools-error {
+  margin-left: 8px;
+  max-width: 40%;
+  font-size: 11px;
+  color: var(--fs-dev-text-error);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fs-devtools-snapshot {
+  margin-top: 6px;
+  border-radius: 6px;
+  background: var(--fs-dev-bg-snapshot);
+  font-size: 12px;
+}
+`;
+function ensureFormSnapshotsStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.type = "text/css";
+  style.appendChild(
+    document.createTextNode(`${SNAPSHOT_TABLE_CSS}
+
+${DEVTOOLS_CSS}`)
+  );
+  (document.head || document.documentElement).appendChild(style);
+}
+
+// form-snapshots/snapshot-table.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function isPrimitive(val) {
+  return val === null || val === void 0 || typeof val === "string" || typeof val === "number" || typeof val === "boolean";
+}
+var snapshotCache = /* @__PURE__ */ new Map();
+function parseSnapshot(data) {
+  const cached = snapshotCache.get(data);
+  if (cached) return cached;
+  let snapshot = {};
+  try {
+    snapshot = JSON.parse(data);
+  } catch {
+    snapshot = {};
+  }
+  const parsed = {
+    snapshot,
+    fieldCount: Object.keys(snapshot).length
+  };
+  snapshotCache.set(data, parsed);
+  return parsed;
+}
+function FormSnapshotTable({
+  data,
+  emptyMessage = "No data captured yet.",
+  className
+}) {
+  ensureFormSnapshotsStyles();
+  const { snapshot, fieldCount } = (0, import_react3.useMemo)(() => parseSnapshot(data), [data]);
+  if (fieldCount === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "fs-snapshot-empty", children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: [
+        "fs-snapshot-wrapper",
+        className
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("table", { className: "fs-snapshot-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { className: "fs-snapshot-header-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "fs-snapshot-header-cell", children: "Field" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "fs-snapshot-header-cell", children: "Value" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: Object.entries(snapshot).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "tr",
+          {
+            className: "fs-snapshot-row",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "fs-snapshot-key", children: key }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "fs-snapshot-value", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SnapshotValueCell, { value }) })
+            ]
+          },
+          key
+        )) })
+      ] })
+    }
+  );
+}
+function SnapshotValueCell({ value }) {
+  if (isPrimitive(value)) {
+    if (value === null || value === void 0 || value === "") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fs-snapshot-muted", children: "\u2014" });
+    }
+    if (typeof value === "boolean") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          className: value ? "fs-snapshot-badge fs-snapshot-badge-true" : "fs-snapshot-badge fs-snapshot-badge-false",
+          children: String(value)
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fs-snapshot-text", children: String(value) });
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fs-snapshot-muted", children: "\u2014" });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fs-snapshot-array", children: value.map((v, idx) => (
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "span",
+        {
+          className: "fs-snapshot-chip",
+          children: String(v)
+        },
+        idx
+      )
+    )) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "fs-snapshot-object", children: JSON.stringify(value, null, 2) });
+}
+
+// form-snapshots/devtools.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_meta = {};
+function formatDateShort(ms) {
+  return new Intl.DateTimeFormat("en-GB", {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(new Date(ms));
+}
+function formatAge(ms) {
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (days > 0) return `${days}d ${hours % 24}h`;
+  if (hours > 0) return `${hours}h ${minutes % 60}m`;
+  if (minutes > 0) return `${minutes}m`;
+  return `${seconds}s`;
+}
+function FormSnapshotsDevtools() {
+  ensureFormSnapshotsStyles();
+  const isProd = typeof import_meta !== "undefined" && import_meta.env?.PROD;
+  if (isProd) {
+    return null;
+  }
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [selectedForm, setSelectedForm] = (0, import_react4.useState)("all");
+  const [onlySubmitted, setOnlySubmitted] = (0, import_react4.useState)(false);
+  const [onlyErrors, setOnlyErrors] = (0, import_react4.useState)(false);
+  const [expandedId, setExpandedId] = (0, import_react4.useState)(null);
+  const [isClearing, setIsClearing] = (0, import_react4.useState)(false);
+  const sessions = (0, import_dexie_react_hooks2.useLiveQuery)(() => {
+    return db.formSessions.toCollection().sortBy("updatedAt").then((all) => all.reverse());
+  }, []);
+  const now = Date.now();
+  const formNames = (0, import_react4.useMemo)(() => {
+    if (!sessions) return [];
+    return Array.from(new Set(sessions.map((s) => s.formName))).sort();
+  }, [sessions]);
+  const filtered = (0, import_react4.useMemo)(() => {
+    if (!sessions) return [];
+    return sessions.filter((s) => {
+      if (selectedForm !== "all" && s.formName !== selectedForm) {
+        return false;
+      }
+      if (onlySubmitted && !s.submitted) {
+        return false;
+      }
+      if (onlyErrors && (s.statusCode == null || s.statusCode < 400)) {
+        return false;
+      }
+      return true;
+    });
+  }, [sessions, selectedForm, onlySubmitted, onlyErrors]);
+  const handleDeleteSession = async (id) => {
+    try {
+      await db.formSessions.delete(id);
+    } catch (error) {
+      console.error("Failed to delete form session", error);
+    }
+  };
+  const handleClearAll = async () => {
+    if (!sessions || sessions.length === 0) return;
+    setIsClearing(true);
+    try {
+      const ids = sessions.map((s) => s.id);
+      await db.formSessions.bulkDelete(ids);
+    } catch (error) {
+      console.error("Failed to clear form sessions", error);
+    } finally {
+      setIsClearing(false);
+    }
+  };
+  const total = sessions?.length ?? 0;
+  if (!sessions || sessions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: "fs-devtools-toggle",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HistoryIcon, { style: { width: 12, height: 12 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Form Snapshot Devtools" }),
+          total > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fs-devtools-toggle-count", children: total })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-panel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-header-left", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HistoryIcon, { style: { width: 14, height: 14 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-header-text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fs-devtools-header-title", children: "Form Snapshot Devtools" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fs-devtools-header-subtitle", children: [
+              filtered.length,
+              " / ",
+              total,
+              " session"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-header-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClearAll,
+              className: "fs-devtools-clear",
+              disabled: isClearing || !sessions || sessions.length === 0,
+              children: "Clear all"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen(false),
+              className: "fs-devtools-close",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon, { style: { width: 12, height: 12 } })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-filters", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FilterIcon, { style: { width: 12, height: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "select",
+          {
+            className: "fs-devtools-select",
+            value: selectedForm,
+            onChange: (e) => setSelectedForm(e.target.value),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "all", children: "All forms" }),
+              formNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: name, children: name }, name))
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fs-devtools-filter-label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: onlySubmitted,
+              onChange: (e) => setOnlySubmitted(e.target.checked)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "submitted" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "fs-devtools-filter-label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: onlyErrors,
+              onChange: (e) => setOnlyErrors(e.target.checked)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "errors" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fs-devtools-body", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fs-devtools-empty", children: "No sessions match the selected filters." }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "fs-devtools-list", children: filtered.map((s) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "li",
+        {
+          className: "fs-devtools-item",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setExpandedId(
+                  (current) => current === s.id ? null : s.id
+                ),
+                className: "fs-devtools-item-toggle",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-item-main", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChevronDownIcon,
+                      {
+                        style: {
+                          width: 12,
+                          height: 12,
+                          transform: expandedId === s.id ? "rotate(0deg)" : "rotate(-90deg)",
+                          transition: "transform 120ms ease-out"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-item-text", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-item-tags", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fs-devtools-tag", children: s.formName }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fs-devtools-id", children: [
+                          "#",
+                          s.id
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fs-devtools-meta", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: formatDateShort(s.updatedAt) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+                          "\xB7 ",
+                          formatAge(now - s.updatedAt),
+                          " ago"
+                        ] }),
+                        s.submitted ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fs-devtools-badge fs-devtools-badge-success", children: "submitted" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fs-devtools-badge fs-devtools-badge-warn", children: "in progress" }),
+                        s.statusCode != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fs-devtools-status", children: [
+                          "status ",
+                          s.statusCode
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            className: "fs-devtools-delete",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              void handleDeleteSession(s.id);
+                            },
+                            children: "Delete"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  typeof s.errorMessage === "string" && s.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fs-devtools-error", children: s.errorMessage })
+                ]
+              }
+            ),
+            expandedId === s.id && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fs-devtools-snapshot", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              FormSnapshotTable,
+              {
+                data: s.data,
+                emptyMessage: "This session does not contain any field data yet."
+              }
+            ) })
+          ]
+        },
+        s.id
+      )) }) })
+    ] })
+  ] });
+}
+function HistoryIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 3v6h6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3.05 13A9 9 0 1 0 9 3.05" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 7v5l3 3" })
+      ]
+    }
+  );
+}
+function XIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function FilterIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
+    }
+  );
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+
+// form-snapshots/adapters.ts
+function useRHFFormSnapshots(formName, form, options) {
+  return useFormSnapshots(formName, {
+    ...options,
+    getValues: () => form.getValues(),
+    applyValues: (snap) => form.reset(snap)
+  });
+}
+function useObjectFormSnapshots(formName, state, setState, options) {
+  return useFormSnapshots(formName, {
+    ...options,
+    getValues: () => state,
+    applyValues: (snap) => setState(snap)
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormSnapshotTable,
+  FormSnapshotsClient,
+  FormSnapshotsDevtools,
+  FormSnapshotsProvider,
+  db,
+  useFormSnapshots,
+  useFormSnapshotsConfig,
+  useFormSnapshotsList,
+  useObjectFormSnapshots,
+  useRHFFormSnapshots
+});
+//# sourceMappingURL=index.js.map