@prometheus-ags/prometheus-entity-management 1.1.0 → 1.2.1

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { create, createStore, useStore } from 'zustand';
 import { subscribeWithSelector, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
-import React5, { createContext, useSyncExternalStore, useMemo, useRef, useCallback, useEffect, useState, useContext, useId } from 'react';
+import React6, { createContext, useMemo, useSyncExternalStore, useRef, useCallback, useEffect, useState, useContext, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useShallow } from 'zustand/react/shallow';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { Search, X, Loader2, RefreshCw, ChevronLeft, ChevronRight, Pencil, Trash2 } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/graph.ts
 var EMPTY_IDS = [];
@@ -288,6 +288,8 @@ function applySelection(row, select) {
 }
 
 // src/graph-actions.ts
+var graphActionListeners = /* @__PURE__ */ new Set();
+var graphActionReplayers = /* @__PURE__ */ new Map();
 function createGraphTransaction() {
   const baseline = cloneGraphData();
   let closed = false;
@@ -355,22 +357,53 @@ function createGraphTransaction() {
   return tx;
 }
 function createGraphAction(opts) {
+  if (opts.key) {
+    graphActionReplayers.set(opts.key, async (record) => {
+      const tx = createGraphTransaction();
+      try {
+        const result = await opts.run(tx, record.input);
+        tx.commit();
+        return result;
+      } catch (error) {
+        tx.rollback();
+        throw error;
+      }
+    });
+  }
   return async (input) => {
     const tx = createGraphTransaction();
+    const record = opts.key ? {
+      id: `${opts.key}:${Date.now()}`,
+      key: opts.key,
+      input: structuredClone(input),
+      enqueuedAt: (/* @__PURE__ */ new Date()).toISOString()
+    } : null;
     try {
+      if (record) emitGraphActionEvent({ type: "enqueued", record });
       opts.optimistic?.(tx, input);
       const result = await opts.run(tx, input);
       opts.onSuccess?.(result, input, tx);
       tx.commit();
+      if (record) emitGraphActionEvent({ type: "settled", record });
       return result;
     } catch (error) {
       tx.rollback();
       const normalized = error instanceof Error ? error : new Error(String(error));
+      if (record) emitGraphActionEvent({ type: "settled", record });
       opts.onError?.(normalized, input);
       throw normalized;
     }
   };
 }
+function subscribeGraphActionEvents(listener) {
+  graphActionListeners.add(listener);
+  return () => graphActionListeners.delete(listener);
+}
+async function replayRegisteredGraphAction(record) {
+  const replayer = graphActionReplayers.get(record.key);
+  if (!replayer) throw new Error(`No graph action registered for key "${record.key}"`);
+  return replayer(record);
+}
 function cloneGraphData(source = useGraphStore.getState()) {
   return {
     entities: structuredClone(source.entities),
@@ -380,6 +413,9 @@ function cloneGraphData(source = useGraphStore.getState()) {
     lists: structuredClone(source.lists)
   };
 }
+function emitGraphActionEvent(event) {
+  for (const listener of graphActionListeners) listener(event);
+}
 
 // src/graph-effects.ts
 function createGraphEffect(opts) {
@@ -439,6 +475,213 @@ function defaultIsEqual(previousValue, nextValue) {
   return JSON.stringify(previousValue) === JSON.stringify(nextValue);
 }
 
+// src/object-path.ts
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function getValueAtPath(source, path) {
+  if (!path) return source;
+  const segments = path.split(".").filter(Boolean);
+  let current = source;
+  for (const segment of segments) {
+    if (!isObject(current) && !Array.isArray(current)) return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+function setValueAtPath(source, path, value) {
+  const segments = path.split(".").filter(Boolean);
+  if (segments.length === 0) return source;
+  const clone = structuredClone(source);
+  let current = clone;
+  for (let index = 0; index < segments.length - 1; index += 1) {
+    const segment = segments[index];
+    const next = current[segment];
+    if (!isObject(next)) current[segment] = {};
+    current = current[segment];
+  }
+  current[segments[segments.length - 1]] = value;
+  return clone;
+}
+function collectDirtyPaths(current, original, prefix = "", acc = /* @__PURE__ */ new Set()) {
+  if (isObject(current) && isObject(original)) {
+    const keys = /* @__PURE__ */ new Set([...Object.keys(current), ...Object.keys(original)]);
+    for (const key of keys) {
+      const nextPrefix = prefix ? `${prefix}.${key}` : key;
+      collectDirtyPaths(current[key], original[key], nextPrefix, acc);
+    }
+    return acc;
+  }
+  if (JSON.stringify(current) !== JSON.stringify(original) && prefix) acc.add(prefix);
+  return acc;
+}
+var schemaRegistry = /* @__PURE__ */ new Map();
+function registerEntityJsonSchema(config) {
+  const key = registryKey(config.entityType, config.field, config.schemaId);
+  schemaRegistry.set(key, config);
+}
+function registerRuntimeSchema(config) {
+  registerEntityJsonSchema(config);
+}
+function getEntityJsonSchema(opts) {
+  const exact = schemaRegistry.get(registryKey(opts.entityType, opts.field, opts.schemaId));
+  if (exact) return exact;
+  if (opts.field) {
+    const byField = schemaRegistry.get(registryKey(opts.entityType, opts.field));
+    if (byField) return byField;
+  }
+  if (opts.schemaId) {
+    const byId = schemaRegistry.get(registryKey(opts.entityType, void 0, opts.schemaId));
+    if (byId) return byId;
+  }
+  for (const schema of schemaRegistry.values()) {
+    if (schema.entityType !== opts.entityType) continue;
+    if (opts.field && schema.field !== opts.field) continue;
+    return schema;
+  }
+  return null;
+}
+function useSchemaEntityFields(opts) {
+  return useMemo(() => {
+    const schema = opts.schema ?? getEntityJsonSchema(opts)?.schema;
+    if (!schema) return [];
+    return buildEntityFieldsFromSchema({ schema, rootField: opts.rootField ?? opts.field });
+  }, [opts.entityType, opts.field, opts.rootField, opts.schemaId, opts.schema]);
+}
+function buildEntityFieldsFromSchema(opts) {
+  return buildSchemaFields(opts.schema, opts.rootField ?? "", "");
+}
+function exportGraphSnapshotWithSchemas(opts) {
+  return JSON.stringify(
+    {
+      scope: opts.scope,
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      data: opts.data,
+      schemas: opts.schemas.filter(Boolean)
+    },
+    null,
+    opts.pretty === false ? 0 : 2
+  );
+}
+function escapeHtml(input) {
+  return input.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function renderMarkdownToHtml(value) {
+  const escaped = escapeHtml(value);
+  const blocks = escaped.split(/\n{2,}/).map((block) => block.trim()).filter(Boolean);
+  return blocks.map((block) => renderMarkdownBlock(block)).join("");
+}
+function MarkdownFieldRenderer({ value, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: renderMarkdownToHtml(value ?? "") }
+    }
+  );
+}
+function MarkdownFieldEditor({
+  value,
+  onChange,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        className: "w-full min-h-[120px] rounded-md border bg-muted/50 px-3 py-2 text-sm resize-y focus:outline-none focus:ring-1 focus:ring-ring transition-colors"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md border bg-background px-3 py-2", children: /* @__PURE__ */ jsx(MarkdownFieldRenderer, { value, className: "prose prose-sm max-w-none" }) })
+  ] });
+}
+function createMarkdownDetailRenderer(field) {
+  return (value, entity) => /* @__PURE__ */ jsx(MarkdownFieldRenderer, { value: String(value ?? getValueAtPath(entity, field) ?? ""), className: "prose prose-sm max-w-none" });
+}
+function buildSchemaFields(schema, pathPrefix, schemaPathPrefix) {
+  if (schema.type === "object" && schema.properties) {
+    const entries = Object.entries(schema.properties).sort(([, left], [, right]) => {
+      const l = left["x-display-order"] ?? Number.MAX_SAFE_INTEGER;
+      const r = right["x-display-order"] ?? Number.MAX_SAFE_INTEGER;
+      return l - r;
+    });
+    return entries.flatMap(([key, childSchema]) => {
+      if (childSchema["x-hidden"]) return [];
+      const field = pathPrefix ? `${pathPrefix}.${key}` : key;
+      const schemaPath = schemaPathPrefix ? `${schemaPathPrefix}.${key}` : key;
+      if (childSchema.type === "object" && childSchema.properties) {
+        return buildSchemaFields(childSchema, field, schemaPath);
+      }
+      return [schemaField(field, schemaPath, childSchema, schema.required?.includes(key) ?? false)];
+    });
+  }
+  return [];
+}
+function schemaField(field, schemaPath, schema, required) {
+  const type = inferFieldType(schema);
+  const descriptor = {
+    field,
+    label: schema.title ?? humanize(field.split(".").pop() ?? field),
+    type,
+    required,
+    hint: schema.description,
+    schemaPath,
+    schema,
+    componentHint: schema["x-a2ui-component"]
+  };
+  if (schema.enum) {
+    descriptor.options = schema.enum.map((value) => ({
+      value: String(value),
+      label: String(value)
+    }));
+  }
+  if (type === "markdown") {
+    descriptor.render = createMarkdownDetailRenderer(field);
+  }
+  return descriptor;
+}
+function inferFieldType(schema) {
+  const forced = schema["x-field-type"];
+  if (forced === "markdown") return "markdown";
+  if (schema.format === "markdown") return "markdown";
+  if (schema.enum) return "enum";
+  const type = Array.isArray(schema.type) ? schema.type[0] : schema.type;
+  switch (type) {
+    case "boolean":
+      return "boolean";
+    case "integer":
+    case "number":
+      return "number";
+    case "string":
+      if (schema.format === "email") return "email";
+      if (schema.format === "uri" || schema.format === "url") return "url";
+      if (schema.format === "date" || schema.format === "date-time") return "date";
+      return "text";
+    case "array":
+    case "object":
+      return "json";
+    default:
+      return "text";
+  }
+}
+function registryKey(entityType, field, schemaId) {
+  return `${entityType}::${field ?? "*"}::${schemaId ?? "*"}`;
+}
+function humanize(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function renderMarkdownBlock(block) {
+  if (block.startsWith("# ")) return `<h1>${renderInlineMarkdown(block.slice(2))}</h1>`;
+  if (block.startsWith("## ")) return `<h2>${renderInlineMarkdown(block.slice(3))}</h2>`;
+  return `<p>${renderInlineMarkdown(block).replaceAll("\n", "<br/>")}</p>`;
+}
+function renderInlineMarkdown(block) {
+  return block.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+}
+
 // src/ai-interop.ts
 function exportGraphSnapshot(opts) {
   const payload = {
@@ -455,6 +698,216 @@ function createGraphTool(handler) {
     exportGraphSnapshot
   });
 }
+function createSchemaGraphTool(handler) {
+  return (input) => handler(input, {
+    store: useGraphStore.getState(),
+    queryOnce,
+    exportGraphSnapshot,
+    getEntityJsonSchema,
+    exportGraphSnapshotWithSchemas
+  });
+}
+var DEFAULT_STORAGE_KEY = "prometheus:graph";
+var useGraphSyncStatusStore = create((set) => ({
+  status: {
+    phase: "idle",
+    isOnline: true,
+    isSynced: true,
+    pendingActions: 0,
+    lastHydratedAt: null,
+    lastPersistedAt: null,
+    storageKey: null,
+    error: null
+  },
+  setStatus: (status) => set((state) => ({
+    status: {
+      ...state.status,
+      ...status
+    }
+  }))
+}));
+var pendingActions = /* @__PURE__ */ new Map();
+function useGraphSyncStatus() {
+  return useGraphSyncStatusStore((state) => state.status);
+}
+async function persistGraphToStorage(opts) {
+  const payload = {
+    version: 1,
+    snapshot: cloneGraphSnapshot(),
+    pendingActions: opts.pendingActions ?? Array.from(pendingActions.values())
+  };
+  const json = JSON.stringify(payload);
+  await opts.storage.set(opts.key, json);
+  const persistedAt = (/* @__PURE__ */ new Date()).toISOString();
+  useGraphSyncStatusStore.getState().setStatus({
+    lastPersistedAt: persistedAt,
+    storageKey: opts.key,
+    pendingActions: payload.pendingActions.length
+  });
+  return {
+    ok: true,
+    key: opts.key,
+    bytes: json.length,
+    persistedAt
+  };
+}
+async function hydrateGraphFromStorage(opts) {
+  const raw = await opts.storage.get(opts.key);
+  if (!raw) {
+    return {
+      ok: false,
+      key: opts.key,
+      hydratedAt: null,
+      entityCounts: {},
+      error: "No persisted graph snapshot found"
+    };
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    useGraphStore.setState(parsed.snapshot);
+    pendingActions.clear();
+    for (const action of parsed.pendingActions ?? []) pendingActions.set(action.id, action);
+    const hydratedAt = (/* @__PURE__ */ new Date()).toISOString();
+    useGraphSyncStatusStore.getState().setStatus({
+      lastHydratedAt: hydratedAt,
+      storageKey: opts.key,
+      pendingActions: pendingActions.size,
+      error: null
+    });
+    return {
+      ok: true,
+      key: opts.key,
+      hydratedAt,
+      entityCounts: Object.fromEntries(
+        Object.entries(parsed.snapshot.entities).map(([type, entities]) => [type, Object.keys(entities).length])
+      ),
+      pendingActions: Array.from(pendingActions.values())
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    useGraphSyncStatusStore.getState().setStatus({
+      phase: "error",
+      error: message,
+      storageKey: opts.key
+    });
+    return {
+      ok: false,
+      key: opts.key,
+      hydratedAt: null,
+      entityCounts: {},
+      error: message
+    };
+  }
+}
+function startLocalFirstGraph(opts) {
+  const key = opts.key ?? DEFAULT_STORAGE_KEY;
+  const persistDebounceMs = opts.persistDebounceMs ?? 50;
+  const statusStore = useGraphSyncStatusStore.getState();
+  statusStore.setStatus({
+    phase: "hydrating",
+    storageKey: key,
+    isOnline: opts.onlineSource?.getIsOnline() ?? getDefaultOnlineSource().getIsOnline(),
+    isSynced: pendingActions.size === 0,
+    error: null
+  });
+  let persistTimer = null;
+  const schedulePersist = () => {
+    if (persistTimer) clearTimeout(persistTimer);
+    persistTimer = setTimeout(() => {
+      void persistGraphToStorage({ storage: opts.storage, key });
+    }, persistDebounceMs);
+  };
+  const graphUnsub = useGraphStore.subscribe(() => {
+    schedulePersist();
+  });
+  const actionUnsub = subscribeGraphActionEvents((event) => {
+    if (event.type === "enqueued") pendingActions.set(event.record.id, event.record);
+    if (event.type === "settled") pendingActions.delete(event.record.id);
+    useGraphSyncStatusStore.getState().setStatus({
+      pendingActions: pendingActions.size,
+      isSynced: pendingActions.size === 0
+    });
+    schedulePersist();
+  });
+  const onlineSource = opts.onlineSource ?? getDefaultOnlineSource();
+  const onlineUnsub = onlineSource.subscribe((online) => {
+    useGraphSyncStatusStore.getState().setStatus({
+      isOnline: online,
+      phase: online ? "ready" : "offline"
+    });
+  });
+  const ready = (async () => {
+    const hydrated = await hydrateGraphFromStorage({ storage: opts.storage, key });
+    if (opts.replayPendingActions && hydrated.ok && pendingActions.size > 0) {
+      useGraphSyncStatusStore.getState().setStatus({
+        phase: "syncing",
+        isSynced: false
+      });
+      for (const action of Array.from(pendingActions.values())) {
+        await replayRegisteredGraphAction(action);
+        pendingActions.delete(action.id);
+      }
+      await persistGraphToStorage({ storage: opts.storage, key });
+    }
+    const online = onlineSource.getIsOnline();
+    useGraphSyncStatusStore.getState().setStatus({
+      phase: online ? "ready" : "offline",
+      isOnline: online,
+      isSynced: pendingActions.size === 0,
+      pendingActions: pendingActions.size
+    });
+  })();
+  return {
+    ready,
+    dispose() {
+      graphUnsub();
+      actionUnsub();
+      onlineUnsub();
+      if (persistTimer) clearTimeout(persistTimer);
+    },
+    async persistNow() {
+      await persistGraphToStorage({ storage: opts.storage, key });
+    },
+    hydrate() {
+      return hydrateGraphFromStorage({ storage: opts.storage, key });
+    },
+    getStatus() {
+      return useGraphSyncStatusStore.getState().status;
+    }
+  };
+}
+function cloneGraphSnapshot() {
+  const state = useGraphStore.getState();
+  return {
+    entities: structuredClone(state.entities),
+    patches: structuredClone(state.patches),
+    entityStates: structuredClone(state.entityStates),
+    syncMetadata: structuredClone(state.syncMetadata),
+    lists: structuredClone(state.lists)
+  };
+}
+function getDefaultOnlineSource() {
+  if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
+    return {
+      getIsOnline: () => window.navigator.onLine,
+      subscribe: (listener) => {
+        const onlineHandler = () => listener(true);
+        const offlineHandler = () => listener(false);
+        window.addEventListener("online", onlineHandler);
+        window.addEventListener("offline", offlineHandler);
+        return () => {
+          window.removeEventListener("online", onlineHandler);
+          window.removeEventListener("offline", offlineHandler);
+        };
+      }
+    };
+  }
+  return {
+    getIsOnline: () => true,
+    subscribe: () => () => {
+    }
+  };
+}
 
 // src/engine.ts
 function serializeKey(key) {
@@ -721,10 +1174,11 @@ function useEntity(opts) {
   fetchRef.current = opts.fetch;
   const normalizeRef = useRef(opts.normalize);
   normalizeRef.current = opts.normalize;
-  const data = useStore(useGraphStore, useShallow((state) => {
+  const dataSelector = useCallback((state) => {
     if (!id) return null;
     return state.readEntitySnapshot(type, id);
-  }));
+  }, [id, type]);
+  const data = useStore(useGraphStore, useShallow(dataSelector));
   const entityState = useStore(useGraphStore, useCallback(
     (state) => state.entityStates[`${type}:${id}`] ?? EMPTY_ENTITY_STATE,
     [type, id]
@@ -757,13 +1211,11 @@ function useEntityList(opts) {
   const normalizeRef = useRef(opts.normalize);
   normalizeRef.current = opts.normalize;
   const listState = useStore(useGraphStore, useCallback((state) => state.lists[key] ?? EMPTY_LIST_STATE, [key]));
-  const items = useStore(
-    useGraphStore,
-    useShallow((state) => {
-      const ids = state.lists[key]?.ids ?? EMPTY_IDS;
-      return ids.map((id) => state.readEntitySnapshot(type, id)).filter((x) => x !== null);
-    })
-  );
+  const itemsSelector = useCallback((state) => {
+    const ids = state.lists[key]?.ids ?? EMPTY_IDS;
+    return ids.map((id) => state.readEntitySnapshot(type, id)).filter((x) => x !== null);
+  }, [key, type]);
+  const items = useStore(useGraphStore, useShallow(itemsSelector));
   const doFetch = useCallback((params = {}) => {
     if (!enabled) return;
     fetchList({ type, queryKey, mode, fetch: fetchRef.current, normalize: normalizeRef.current }, params, getEngineOptions(), false);
@@ -1436,15 +1888,15 @@ function useEntityView(opts) {
 }
 
 // src/crud/relations.ts
-var schemaRegistry = /* @__PURE__ */ new Map();
+var schemaRegistry2 = /* @__PURE__ */ new Map();
 function registerSchema(schema) {
-  schemaRegistry.set(schema.type, schema);
+  schemaRegistry2.set(schema.type, schema);
 }
 function getSchema(type) {
-  return schemaRegistry.get(type) ?? null;
+  return schemaRegistry2.get(type) ?? null;
 }
 function cascadeInvalidation(ctx) {
-  const schema = schemaRegistry.get(ctx.type);
+  const schema = schemaRegistry2.get(ctx.type);
   if (!schema) return;
   const store = useGraphStore.getState();
   if (schema.globalListKeys) for (const key of schema.globalListKeys) store.invalidateLists(key);
@@ -1471,7 +1923,7 @@ function cascadeInvalidation(ctx) {
       }
     }
   }
-  for (const [, otherSchema] of schemaRegistry) {
+  for (const [, otherSchema] of schemaRegistry2) {
     if (!otherSchema.relations) continue;
     for (const [, rel] of Object.entries(otherSchema.relations)) {
       if (rel.targetType !== ctx.type) continue;
@@ -1480,7 +1932,7 @@ function cascadeInvalidation(ctx) {
   }
 }
 function readRelations(type, entity) {
-  const schema = schemaRegistry.get(type);
+  const schema = schemaRegistry2.get(type);
   if (!schema?.relations) return {};
   const store = useGraphStore.getState();
   const result = {};
@@ -1541,7 +1993,7 @@ function useEntityCRUD(opts) {
   useEffect(() => {
     if (detail) setEditBuffer({ ...detail });
   }, [selectedId]);
-  const setField = useCallback((field, value) => setEditBuffer((prev) => ({ ...prev, [field]: value })), []);
+  const setField = useCallback((field, value) => setEditBuffer((prev) => setValueAtPath(prev, String(field), value)), []);
   const setFields = useCallback((fields) => setEditBuffer((prev) => ({ ...prev, ...fields })), []);
   const resetBuffer = useCallback(() => {
     const current = selectedId ? useGraphStore.getState().readEntity(type, selectedId) : null;
@@ -1549,10 +2001,7 @@ function useEntityCRUD(opts) {
   }, [type, selectedId]);
   const dirty = useMemo(() => {
     if (!detail) return { changed: /* @__PURE__ */ new Set(), isDirty: false };
-    const changed = /* @__PURE__ */ new Set();
-    for (const key of Object.keys(editBuffer)) {
-      if (JSON.stringify(editBuffer[key]) !== JSON.stringify(detail[key])) changed.add(key);
-    }
+    const changed = collectDirtyPaths(editBuffer, detail);
     return { changed, isDirty: changed.size > 0 };
   }, [editBuffer, detail]);
   const startEdit = useCallback((id) => {
@@ -1609,7 +2058,7 @@ function useEntityCRUD(opts) {
   const [createBuffer, setCreateBuffer] = useState({ ...createDefaults });
   const [isCreating, setIsCreating] = useState(false);
   const [createError, setCreateError] = useState(null);
-  const setCreateField = useCallback((field, value) => setCreateBuffer((prev) => ({ ...prev, [field]: value })), []);
+  const setCreateField = useCallback((field, value) => setCreateBuffer((prev) => setValueAtPath(prev, String(field), value)), []);
   const setCreateFields = useCallback((fields) => setCreateBuffer((prev) => ({ ...prev, ...fields })), []);
   const resetCreateBuffer = useCallback(() => setCreateBuffer({ ...optsRef.current.createDefaults ?? {} }), []);
   const startCreate = useCallback(() => {
@@ -1622,7 +2071,7 @@ function useEntityCRUD(opts) {
     setMode("list");
     setCreateError(null);
   }, [resetCreateBuffer]);
-  const create2 = useCallback(async () => {
+  const create3 = useCallback(async () => {
     if (!onCreate) return null;
     setIsCreating(true);
     setCreateError(null);
@@ -1696,7 +2145,7 @@ function useEntityCRUD(opts) {
       setIsDeleting(false);
     }
   }, [type, selectedId, listQueryKey, clearSelectionAfterDelete]);
-  return { mode, setMode, list, selectedId, select, openDetail, detail: detail ?? null, detailIsLoading, detailError: detailError ?? null, relations, editBuffer, setField, setFields, resetBuffer, dirty, startEdit, cancelEdit, save, isSaving, saveError, applyOptimistic, createBuffer, setCreateField, setCreateFields, resetCreateBuffer, startCreate, cancelCreate, create: create2, isCreating, createError, deleteEntity, isDeleting, deleteError, isEditing: mode === "edit" || mode === "create" };
+  return { mode, setMode, list, selectedId, select, openDetail, detail: detail ?? null, detailIsLoading, detailError: detailError ?? null, relations, editBuffer, setField, setFields, resetBuffer, dirty, startEdit, cancelEdit, save, isSaving, saveError, applyOptimistic, createBuffer, setCreateField, setCreateFields, resetCreateBuffer, startCreate, cancelCreate, create: create3, isCreating, createError, deleteEntity, isDeleting, deleteError, isEditing: mode === "edit" || mode === "create" };
 }
 
 // src/adapters/realtime-manager.ts
@@ -2744,7 +3193,7 @@ function EntityTable({ viewResult, columns, getRowId = (r) => String(r.id), sele
   ] });
 }
 function Sheet({ open, onClose, title, subtitle, children, footer, width = "w-[480px]" }) {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -2780,6 +3229,8 @@ function FieldControl({ descriptor, value, onChange, entity, readonly }) {
       return /* @__PURE__ */ jsx("input", { type: "number", value: String(value ?? ""), onChange: (e) => onChange(e.target.valueAsNumber), placeholder: descriptor.placeholder, className: base });
     case "textarea":
       return /* @__PURE__ */ jsx("textarea", { value: String(value ?? ""), onChange: (e) => onChange(e.target.value), placeholder: descriptor.placeholder, className: "w-full min-h-[80px] rounded-md border bg-muted/50 px-3 py-2 text-sm resize-none focus:outline-none focus:ring-1 focus:ring-ring transition-colors" });
+    case "markdown":
+      return /* @__PURE__ */ jsx(MarkdownFieldEditor, { value: String(value ?? ""), onChange: (nextValue) => onChange(nextValue), placeholder: descriptor.placeholder });
     case "date":
       return /* @__PURE__ */ jsx("input", { type: "date", value: value ? new Date(value).toISOString().split("T")[0] : "", onChange: (e) => onChange(e.target.value ? new Date(e.target.value).toISOString() : null), className: base });
     case "boolean":
@@ -2799,12 +3250,35 @@ function FieldControl({ descriptor, value, onChange, entity, readonly }) {
         !value && /* @__PURE__ */ jsx("option", { value: "", children: "Select\u2026" }),
         (descriptor.options ?? []).map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
       ] });
+    case "json":
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: value != null ? JSON.stringify(value, null, 2) : "",
+          onChange: (event) => {
+            const nextValue = event.target.value;
+            try {
+              onChange(nextValue ? JSON.parse(nextValue) : null);
+            } catch {
+              onChange(nextValue);
+            }
+          },
+          placeholder: descriptor.placeholder,
+          className: "w-full min-h-[120px] rounded-md border bg-muted/50 px-3 py-2 text-sm font-mono resize-y focus:outline-none focus:ring-1 focus:ring-ring transition-colors"
+        }
+      );
     default:
       return /* @__PURE__ */ jsx("input", { value: String(value ?? ""), onChange: (e) => onChange(e.target.value), className: base });
   }
 }
+function FieldReadonlyValue({ descriptor, value, entity }) {
+  if (descriptor.render) return /* @__PURE__ */ jsx(Fragment, { children: descriptor.render(value, entity) });
+  if (descriptor.type === "markdown") return /* @__PURE__ */ jsx(MarkdownFieldRenderer, { value: String(value ?? ""), className: "prose prose-sm max-w-none py-1" });
+  if (descriptor.type === "json") return /* @__PURE__ */ jsx("pre", { className: "text-xs py-1 whitespace-pre-wrap break-words", children: JSON.stringify(value ?? null, null, 2) });
+  return /* @__PURE__ */ jsx("p", { className: "text-sm py-1", children: value != null && value !== "" ? String(value) : "\u2014" });
+}
 function EntityDetailSheet({ crud, fields, title = "Details", description, children, showEditButton = true, showDeleteButton = true, deleteConfirmMessage = "This action cannot be undone." }) {
-  const [confirmDelete, setConfirmDelete] = React5.useState(false);
+  const [confirmDelete, setConfirmDelete] = React6.useState(false);
   const open = crud.mode === "detail" && !!crud.selectedId;
   const entity = crud.detail;
   const resolvedTitle = entity && typeof title === "function" ? title(entity) : String(title);
@@ -2828,8 +3302,7 @@ function EntityDetailSheet({ crud, fields, title = "Details", description, child
         entity && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
           fields.map((f) => /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium text-muted-foreground uppercase tracking-wide mb-1", children: f.label }),
-            /* @__PURE__ */ jsx(FieldControl, { descriptor: f, value: entity[f.field], onChange: () => {
-            }, entity, readonly: true })
+            /* @__PURE__ */ jsx(FieldReadonlyValue, { descriptor: f, value: getValueAtPath(entity, f.field), entity })
           ] }, f.field)),
           children && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "border-t my-1" }),
@@ -2899,13 +3372,14 @@ function EntityFormSheet({ crud, fields, createTitle = "Create", editTitle = "Ed
         error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 rounded-md bg-destructive/10 border border-destructive/20 text-xs text-destructive", children: error }),
         visibleFields.map((f) => {
           const isDirty = !isCreate && crud.dirty.changed.has(f.field);
+          const currentValue = getValueAtPath(buf, f.field);
           return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
             /* @__PURE__ */ jsxs("label", { className: cn("text-xs font-medium", isDirty ? "text-primary" : "text-muted-foreground"), children: [
               f.label,
               f.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-0.5", children: "*" }),
               isDirty && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-[10px] font-normal opacity-70", children: "modified" })
             ] }),
-            /* @__PURE__ */ jsx(FieldControl, { descriptor: f, value: buf[f.field], onChange: (v) => setField(f.field, v), entity: buf, readonly: f.readonlyOnEdit && isEdit }),
+            /* @__PURE__ */ jsx(FieldControl, { descriptor: f, value: currentValue, onChange: (v) => setField(f.field, v), entity: buf, readonly: f.readonlyOnEdit && isEdit }),
             f.hint && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: f.hint })
           ] }, f.field);
         })
@@ -4106,9 +4580,9 @@ function createSelectionStore() {
 function useSelectionStore(store, selector) {
   return useStore(store, selector);
 }
-var SelectionContext = React5.createContext(null);
+var SelectionContext = React6.createContext(null);
 function useSelectionContext() {
-  const store = React5.useContext(SelectionContext);
+  const store = React6.useContext(SelectionContext);
   if (!store) throw new Error("useSelectionContext must be used within a SelectionContext.Provider");
   return store;
 }
@@ -5023,7 +5497,7 @@ function useTableStorageAdapter() {
 function useTableRealtimeMode() {
   return useContext(TableStorageContext).realtimeMode;
 }
-var Table = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+var Table = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -5032,11 +5506,11 @@ var Table = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-muted/60", className), ...props }));
+var TableHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-muted/60", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("bg-background", className), ...props }));
+var TableBody = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("bg-background", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -5045,7 +5519,7 @@ var TableFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -5057,7 +5531,7 @@ var TableRow = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -5069,7 +5543,7 @@ var TableHead = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -5081,7 +5555,7 @@ var TableCell = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -6600,7 +7074,7 @@ function ChevronsRightIcon({ className }) {
   ] });
 }
 function EmptyState({ config, isFiltered = false, className }) {
-  if (React5.isValidElement(config)) {
+  if (React6.isValidElement(config)) {
     return /* @__PURE__ */ jsx(Fragment, { children: config });
   }
   const cfg = config ?? {};
@@ -8000,13 +8474,13 @@ function selectionColumn2() {
     enableFiltering: false,
     enableHiding: false,
     enableResizing: false,
-    header: ({ table }) => React5.createElement("input", {
+    header: ({ table }) => React6.createElement("input", {
       type: "checkbox",
       checked: table.getIsAllPageRowsSelected(),
       onChange: table.getToggleAllPageRowsSelectedHandler(),
       className: "h-4 w-4 rounded border-primary text-primary focus:ring-ring"
     }),
-    cell: ({ row }) => React5.createElement("input", {
+    cell: ({ row }) => React6.createElement("input", {
       type: "checkbox",
       checked: row.getIsSelected(),
       onChange: row.getToggleSelectedHandler(),
@@ -8142,7 +8616,7 @@ function enumColumn2(options) {
       const opt = options.options.find((o) => o.value === val);
       if (!opt) return val;
       if (opt.badgeClassName) {
-        return React5.createElement(
+        return React6.createElement(
           "span",
           {
             className: `inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium capitalize ${opt.badgeClassName}`
@@ -8150,7 +8624,7 @@ function enumColumn2(options) {
           opt.label
         );
       }
-      return React5.createElement(
+      return React6.createElement(
         "span",
         {
           className: "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
@@ -8187,6 +8661,6 @@ function actionsColumn2() {
   };
 }
 
-export { ActionButtonRow, ActionDropdown, ColumnPresetDialog, DataTable, DataTableColumnHeader, DataTableFilter, DataTablePagination, DataTableToolbar, ElectricSQLAdapter as ElectricSQLPresetAdapter, EmptyState, EntityDetailSheet, EntityFormSheet, EntityListView, EntityTable, FilterPresetDialog, GQLClient, GalleryView, InlineCellEditor, InlineItemEditor, ListView, MemoryAdapter, MultiSelectBar, PresetPicker, InlineCellEditor2 as PureInlineCellEditor, RealtimeManager, RestApiAdapter, SelectionContext, Sheet, SortHeader, SupabaseRealtimeAdapter as SupabasePresetAdapter, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStorageProvider, ViewModeSwitcher, ZustandPersistAdapter, actionsColumn, applyView, booleanColumn, cascadeInvalidation, checkCompleteness, compareEntities, configureEngine, createConvexAdapter, createElectricAdapter, createGQLClient, createGraphAction, createGraphEffect, createGraphQLSubscriptionAdapter, createGraphTool, createGraphTransaction, createPresetStore, createPrismaEntityConfig, createRow, createSelectionStore, createSupabaseRealtimeAdapter, createWebSocketAdapter, dateColumn, dedupe, deleteAction, editAction, enumColumn, executeGQL, exportGraphSnapshot, fetchEntity, fetchList, flattenClauses, getCoreRowModel2 as getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginatedRowModel, getRealtimeManager, getSchema, getSelectedRowModel, getSortedRowModel2 as getSortedRowModel, hasCustomPredicates, matchesFilter, matchesSearch, normalizeGQLResponse, numberColumn, prismaRelationsToSchema, actionsColumn2 as pureActionsColumn, booleanColumn2 as pureBooleanColumn, dateColumn2 as pureDateColumn, enumColumn2 as pureEnumColumn, numberColumn2 as pureNumberColumn, selectionColumn2 as pureSelectionColumn, textColumn2 as pureTextColumn, queryOnce, readRelations, registerSchema, resetRealtimeManager, selectGraph, selectionColumn, serializeKey, startGarbageCollector, stopGarbageCollector, textColumn, toGraphQLVariables, toPrismaInclude, toPrismaOrderBy, toPrismaWhere, toRestParams, toSQLClauses, useEntity, useEntityAugment, useEntityCRUD, useEntityList, useEntityMutation, useEntityView, useGQLEntity, useGQLList, useGQLMutation, useGQLSubscription, useGraphDevTools, useGraphStore, useLocalFirst, usePGliteQuery, useSelectionContext, useSelectionStore, useSuspenseEntity, useSuspenseEntityList, useTable, useTablePresets, useTableRealtimeMode, useTableStorageAdapter, viewAction };
+export { ActionButtonRow, ActionDropdown, ColumnPresetDialog, DataTable, DataTableColumnHeader, DataTableFilter, DataTablePagination, DataTableToolbar, ElectricSQLAdapter as ElectricSQLPresetAdapter, EmptyState, EntityDetailSheet, EntityFormSheet, EntityListView, EntityTable, FilterPresetDialog, GQLClient, GalleryView, InlineCellEditor, InlineItemEditor, ListView, MarkdownFieldEditor, MarkdownFieldRenderer, MemoryAdapter, MultiSelectBar, PresetPicker, InlineCellEditor2 as PureInlineCellEditor, RealtimeManager, RestApiAdapter, SelectionContext, Sheet, SortHeader, SupabaseRealtimeAdapter as SupabasePresetAdapter, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStorageProvider, ViewModeSwitcher, ZustandPersistAdapter, actionsColumn, applyView, booleanColumn, buildEntityFieldsFromSchema, cascadeInvalidation, checkCompleteness, compareEntities, configureEngine, createConvexAdapter, createElectricAdapter, createGQLClient, createGraphAction, createGraphEffect, createGraphQLSubscriptionAdapter, createGraphTool, createGraphTransaction, createPresetStore, createPrismaEntityConfig, createRow, createSchemaGraphTool, createSelectionStore, createSupabaseRealtimeAdapter, createWebSocketAdapter, dateColumn, dedupe, deleteAction, editAction, enumColumn, executeGQL, exportGraphSnapshot, exportGraphSnapshotWithSchemas, fetchEntity, fetchList, flattenClauses, getCoreRowModel2 as getCoreRowModel, getEntityJsonSchema, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginatedRowModel, getRealtimeManager, getSchema, getSelectedRowModel, getSortedRowModel2 as getSortedRowModel, hasCustomPredicates, hydrateGraphFromStorage, matchesFilter, matchesSearch, normalizeGQLResponse, numberColumn, persistGraphToStorage, prismaRelationsToSchema, actionsColumn2 as pureActionsColumn, booleanColumn2 as pureBooleanColumn, dateColumn2 as pureDateColumn, enumColumn2 as pureEnumColumn, numberColumn2 as pureNumberColumn, selectionColumn2 as pureSelectionColumn, textColumn2 as pureTextColumn, queryOnce, readRelations, registerEntityJsonSchema, registerRuntimeSchema, registerSchema, renderMarkdownToHtml, resetRealtimeManager, selectGraph, selectionColumn, serializeKey, startGarbageCollector, startLocalFirstGraph, stopGarbageCollector, textColumn, toGraphQLVariables, toPrismaInclude, toPrismaOrderBy, toPrismaWhere, toRestParams, toSQLClauses, useEntity, useEntityAugment, useEntityCRUD, useEntityList, useEntityMutation, useEntityView, useGQLEntity, useGQLList, useGQLMutation, useGQLSubscription, useGraphDevTools, useGraphStore, useGraphSyncStatus, useLocalFirst, usePGliteQuery, useSchemaEntityFields, useSelectionContext, useSelectionStore, useSuspenseEntity, useSuspenseEntityList, useTable, useTablePresets, useTableRealtimeMode, useTableStorageAdapter, viewAction };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map