@json-render/react 0.1.0 → 0.4.0

package/dist/index.js

@@ -37,8 +37,11 @@ __export(index_exports, {
   Renderer: () => Renderer,
   ValidationProvider: () => ValidationProvider,
   VisibilityProvider: () => VisibilityProvider,
+  createRenderer: () => createRenderer,
   createRendererFromCatalog: () => createRendererFromCatalog,
+  elementTreeSchema: () => elementTreeSchema,
   flatToTree: () => flatToTree,
+  schema: () => schema,
   useAction: () => useAction,
   useActions: () => useActions,
   useData: () => useData,
@@ -64,10 +67,17 @@ function DataProvider({
   children
 }) {
   const [data, setData] = (0, import_react.useState)(initialData);
-  const get = (0, import_react.useCallback)(
-    (path) => (0, import_core.getByPath)(data, path),
-    [data]
-  );
+  const initialDataJsonRef = (0, import_react.useRef)(JSON.stringify(initialData));
+  (0, import_react.useEffect)(() => {
+    const newJson = JSON.stringify(initialData);
+    if (newJson !== initialDataJsonRef.current) {
+      initialDataJsonRef.current = newJson;
+      if (initialData && Object.keys(initialData).length > 0) {
+        setData((prev) => ({ ...prev, ...initialData }));
+      }
+    }
+  }, [initialData]);
+  const get = (0, import_react.useCallback)((path) => (0, import_core.getByPath)(data, path), [data]);
   const set = (0, import_react.useCallback)(
     (path, value2) => {
       setData((prev) => {
@@ -112,12 +122,12 @@ function useData() {
   return ctx;
 }
 function useDataValue(path) {
-  const { get } = useData();
-  return get(path);
+  const { data } = useData();
+  return (0, import_core.getByPath)(data, path);
 }
 function useDataBinding(path) {
-  const { get, set } = useData();
-  const value = get(path);
+  const { data, set } = useData();
+  const value = (0, import_core.getByPath)(data, path);
   const setValue = (0, import_react.useCallback)(
     (newValue) => set(path, newValue),
     [path, set]
@@ -175,9 +185,12 @@ function ActionProvider({
   const [handlers, setHandlers] = (0, import_react3.useState)(initialHandlers);
   const [loadingActions, setLoadingActions] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
   const [pendingConfirmation, setPendingConfirmation] = (0, import_react3.useState)(null);
-  const registerHandler = (0, import_react3.useCallback)((name, handler) => {
-    setHandlers((prev) => ({ ...prev, [name]: handler }));
-  }, []);
+  const registerHandler = (0, import_react3.useCallback)(
+    (name, handler) => {
+      setHandlers((prev) => ({ ...prev, [name]: handler }));
+    },
+    []
+  );
   const execute = (0, import_react3.useCallback)(
     async (action) => {
       const resolved = (0, import_core3.resolveAction)(action, data);
@@ -260,7 +273,15 @@ function ActionProvider({
       cancel,
       registerHandler
     }),
-    [handlers, loadingActions, pendingConfirmation, execute, confirm, cancel, registerHandler]
+    [
+      handlers,
+      loadingActions,
+      pendingConfirmation,
+      execute,
+      confirm,
+      cancel,
+      registerHandler
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ActionContext.Provider, { value, children });
 }
@@ -277,7 +298,11 @@ function useAction(action) {
   const executeAction2 = (0, import_react3.useCallback)(() => execute(action), [execute, action]);
   return { execute: executeAction2, isLoading };
 }
-function ConfirmDialog({ confirm, onConfirm, onCancel }) {
+function ConfirmDialog({
+  confirm,
+  onConfirm,
+  onCancel
+}) {
   const isDanger = confirm.variant === "danger";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
@@ -386,9 +411,12 @@ function ValidationProvider({
   const { data, authState } = useData();
   const [fieldStates, setFieldStates] = (0, import_react4.useState)({});
   const [fieldConfigs, setFieldConfigs] = (0, import_react4.useState)({});
-  const registerField = (0, import_react4.useCallback)((path, config) => {
-    setFieldConfigs((prev) => ({ ...prev, [path]: config }));
-  }, []);
+  const registerField = (0, import_react4.useCallback)(
+    (path, config) => {
+      setFieldConfigs((prev) => ({ ...prev, [path]: config }));
+    },
+    []
+  );
   const validate = (0, import_react4.useCallback)(
     (path, config) => {
       const value2 = data[path.split("/").filter(Boolean).join(".")];
@@ -447,7 +475,15 @@ function ValidationProvider({
       validateAll,
       registerField
     }),
-    [customFunctions, fieldStates, validate, touch, clear, validateAll, registerField]
+    [
+      customFunctions,
+      fieldStates,
+      validate,
+      touch,
+      clear,
+      validateAll,
+      registerField
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ValidationContext.Provider, { value, children });
 }
@@ -492,11 +528,58 @@ function useFieldValidation(path, config) {
   };
 }
 
+// src/schema.ts
+var import_core5 = require("@json-render/core");
+var schema = (0, import_core5.defineSchema)((s) => ({
+  // What the AI-generated SPEC looks like
+  spec: s.object({
+    /** Root element key */
+    root: s.string(),
+    /** Flat map of elements by key */
+    elements: s.record(
+      s.object({
+        /** Unique key for this element */
+        key: s.string(),
+        /** Component type from catalog */
+        type: s.ref("catalog.components"),
+        /** Component props */
+        props: s.propsOf("catalog.components"),
+        /** Child element keys (flat reference) */
+        children: s.array(s.string()),
+        /** Parent element key (null for root) */
+        parentKey: s.string(),
+        /** Visibility condition */
+        visible: s.any()
+      })
+    )
+  }),
+  // What the CATALOG must provide
+  catalog: s.object({
+    /** Component definitions */
+    components: s.map({
+      /** Zod schema for component props */
+      props: s.zod(),
+      /** Slots for this component. Use ['default'] for children, or named slots like ['header', 'footer'] */
+      slots: s.array(s.string()),
+      /** Description for AI generation hints */
+      description: s.string()
+    }),
+    /** Action definitions (optional) */
+    actions: s.map({
+      /** Zod schema for action params */
+      params: s.zod(),
+      /** Description for AI generation hints */
+      description: s.string()
+    })
+  })
+}));
+var elementTreeSchema = schema;
+
 // src/renderer.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ElementRenderer({
   element,
-  tree,
+  spec,
   registry,
   loading,
   fallback
@@ -512,7 +595,7 @@ function ElementRenderer({
     return null;
   }
   const children = element.children?.map((childKey) => {
-    const childElement = tree.elements[childKey];
+    const childElement = spec.elements[childKey];
     if (!childElement) {
       return null;
     }
@@ -520,7 +603,7 @@ function ElementRenderer({
       ElementRenderer,
       {
         element: childElement,
-        tree,
+        spec,
         registry,
         loading,
         fallback
@@ -528,21 +611,13 @@ function ElementRenderer({
       childKey
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Component,
-    {
-      element,
-      onAction: execute,
-      loading,
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { element, onAction: execute, loading, children });
 }
-function Renderer({ tree, registry, loading, fallback }) {
-  if (!tree || !tree.root) {
+function Renderer({ spec, registry, loading, fallback }) {
+  if (!spec || !spec.root) {
     return null;
   }
-  const rootElement = tree.elements[tree.root];
+  const rootElement = spec.elements[spec.root];
   if (!rootElement) {
     return null;
   }
@@ -550,7 +625,7 @@ function Renderer({ tree, registry, loading, fallback }) {
     ElementRenderer,
     {
       element: rootElement,
-      tree,
+      spec,
       registry,
       loading,
       fallback
@@ -599,10 +674,50 @@ function createRendererFromCatalog(_catalog, registry) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { ...props, registry });
   };
 }
+function createRenderer(catalog, components) {
+  const registry = components;
+  return function CatalogRenderer({
+    spec,
+    data,
+    onAction,
+    onDataChange,
+    loading,
+    authState,
+    fallback
+  }) {
+    const actionHandlers = onAction ? {
+      __default__: (params) => {
+        const actionName = params.__actionName__;
+        const actionParams = params.__actionParams__;
+        return onAction(actionName, actionParams);
+      }
+    } : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      DataProvider,
+      {
+        initialData: data,
+        authState,
+        onDataChange,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisibilityProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ValidationProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
+  };
+}
 
 // src/hooks.ts
 var import_react5 = require("react");
-var import_core5 = require("@json-render/core");
+var import_core6 = require("@json-render/core");
 function parsePatchLine(line) {
   try {
     const trimmed = line.trim();
@@ -614,29 +729,33 @@ function parsePatchLine(line) {
     return null;
   }
 }
-function applyPatch(tree, patch) {
-  const newTree = { ...tree, elements: { ...tree.elements } };
+function applyPatch(spec, patch) {
+  const newSpec = { ...spec, elements: { ...spec.elements } };
   switch (patch.op) {
     case "set":
     case "add":
     case "replace": {
       if (patch.path === "/root") {
-        newTree.root = patch.value;
-        return newTree;
+        newSpec.root = patch.value;
+        return newSpec;
       }
       if (patch.path.startsWith("/elements/")) {
         const pathParts = patch.path.slice("/elements/".length).split("/");
         const elementKey = pathParts[0];
-        if (!elementKey) return newTree;
+        if (!elementKey) return newSpec;
         if (pathParts.length === 1) {
-          newTree.elements[elementKey] = patch.value;
+          newSpec.elements[elementKey] = patch.value;
         } else {
-          const element = newTree.elements[elementKey];
+          const element = newSpec.elements[elementKey];
           if (element) {
             const propPath = "/" + pathParts.slice(1).join("/");
             const newElement = { ...element };
-            (0, import_core5.setByPath)(newElement, propPath, patch.value);
-            newTree.elements[elementKey] = newElement;
+            (0, import_core6.setByPath)(
+              newElement,
+              propPath,
+              patch.value
+            );
+            newSpec.elements[elementKey] = newElement;
           }
         }
       }
@@ -646,26 +765,26 @@ function applyPatch(tree, patch) {
       if (patch.path.startsWith("/elements/")) {
         const elementKey = patch.path.slice("/elements/".length).split("/")[0];
         if (elementKey) {
-          const { [elementKey]: _, ...rest } = newTree.elements;
-          newTree.elements = rest;
+          const { [elementKey]: _, ...rest } = newSpec.elements;
+          newSpec.elements = rest;
         }
       }
       break;
     }
   }
-  return newTree;
+  return newSpec;
 }
 function useUIStream({
   api,
   onComplete,
   onError
 }) {
-  const [tree, setTree] = (0, import_react5.useState)(null);
+  const [spec, setSpec] = (0, import_react5.useState)(null);
   const [isStreaming, setIsStreaming] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
   const abortControllerRef = (0, import_react5.useRef)(null);
   const clear = (0, import_react5.useCallback)(() => {
-    setTree(null);
+    setSpec(null);
     setError(null);
   }, []);
   const send = (0, import_react5.useCallback)(
@@ -674,8 +793,9 @@ function useUIStream({
       abortControllerRef.current = new AbortController();
       setIsStreaming(true);
       setError(null);
-      let currentTree = { root: "", elements: {} };
-      setTree(currentTree);
+      const previousSpec = context?.previousSpec;
+      let currentSpec = previousSpec && previousSpec.root ? { ...previousSpec, elements: { ...previousSpec.elements } } : { root: "", elements: {} };
+      setSpec(currentSpec);
       try {
         const response = await fetch(api, {
           method: "POST",
@@ -683,12 +803,22 @@ function useUIStream({
           body: JSON.stringify({
             prompt,
             context,
-            currentTree
+            currentSpec
           }),
           signal: abortControllerRef.current.signal
         });
         if (!response.ok) {
-          throw new Error(`HTTP error: ${response.status}`);
+          let errorMessage = `HTTP error: ${response.status}`;
+          try {
+            const errorData = await response.json();
+            if (errorData.message) {
+              errorMessage = errorData.message;
+            } else if (errorData.error) {
+              errorMessage = errorData.error;
+            }
+          } catch {
+          }
+          throw new Error(errorMessage);
         }
         const reader = response.body?.getReader();
         if (!reader) {
@@ -705,19 +835,19 @@ function useUIStream({
           for (const line of lines) {
             const patch = parsePatchLine(line);
             if (patch) {
-              currentTree = applyPatch(currentTree, patch);
-              setTree({ ...currentTree });
+              currentSpec = applyPatch(currentSpec, patch);
+              setSpec({ ...currentSpec });
             }
           }
         }
         if (buffer.trim()) {
           const patch = parsePatchLine(buffer);
           if (patch) {
-            currentTree = applyPatch(currentTree, patch);
-            setTree({ ...currentTree });
+            currentSpec = applyPatch(currentSpec, patch);
+            setSpec({ ...currentSpec });
           }
         }
-        onComplete?.(currentTree);
+        onComplete?.(currentSpec);
       } catch (err) {
         if (err.name === "AbortError") {
           return;
@@ -737,7 +867,7 @@ function useUIStream({
     };
   }, []);
   return {
-    tree,
+    spec,
     isStreaming,
     error,
     send,
@@ -780,8 +910,11 @@ function flatToTree(elements) {
   Renderer,
   ValidationProvider,
   VisibilityProvider,
+  createRenderer,
   createRendererFromCatalog,
+  elementTreeSchema,
   flatToTree,
+  schema,
   useAction,
   useActions,
   useData,