@json-render/vue 0.9.1

package/dist/index.js

@@ -0,0 +1,1913 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ActionProvider: () => ActionProvider,
+  ConfirmDialog: () => ConfirmDialog,
+  JSONUIProvider: () => JSONUIProvider,
+  Renderer: () => Renderer,
+  RepeatScopeProvider: () => RepeatScopeProvider,
+  StateProvider: () => StateProvider,
+  ValidationProvider: () => ValidationProvider,
+  VisibilityProvider: () => VisibilityProvider,
+  buildSpecFromParts: () => buildSpecFromParts,
+  createRenderer: () => createRenderer,
+  createStateStore: () => import_core8.createStateStore,
+  defineRegistry: () => defineRegistry,
+  flatToTree: () => flatToTree,
+  getTextFromParts: () => getTextFromParts,
+  schema: () => schema,
+  useAction: () => useAction,
+  useActions: () => useActions,
+  useBoundProp: () => useBoundProp,
+  useChatUI: () => useChatUI,
+  useFieldValidation: () => useFieldValidation,
+  useIsVisible: () => useIsVisible,
+  useJsonRenderMessage: () => useJsonRenderMessage,
+  useOptionalValidation: () => useOptionalValidation,
+  useRepeatScope: () => useRepeatScope,
+  useStateBinding: () => useStateBinding,
+  useStateStore: () => useStateStore,
+  useStateValue: () => useStateValue,
+  useUIStream: () => useUIStream,
+  useValidation: () => useValidation,
+  useVisibility: () => useVisibility
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/composables/state.ts
+var import_vue = require("vue");
+var import_core = require("@json-render/core");
+var import_store_utils = require("@json-render/core/store-utils");
+var STATE_KEY = /* @__PURE__ */ Symbol("json-render:state");
+var StateProvider = (0, import_vue.defineComponent)({
+  name: "StateProvider",
+  props: {
+    store: {
+      type: Object,
+      default: void 0
+    },
+    initialState: {
+      type: Object,
+      default: void 0
+    },
+    onStateChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const isControlled = !!props.store;
+    const internalStore = !isControlled ? (0, import_core.createStateStore)(props.initialState ?? {}) : null;
+    const store = props.store ?? internalStore;
+    const state = (0, import_vue.shallowRef)(store.getSnapshot());
+    const unsubscribe = store.subscribe(() => {
+      state.value = store.getSnapshot();
+    });
+    (0, import_vue.onUnmounted)(unsubscribe);
+    if (!isControlled) {
+      let prevFlat = props.initialState && Object.keys(props.initialState).length > 0 ? (0, import_store_utils.flattenToPointers)(props.initialState) : {};
+      (0, import_vue.watch)(
+        () => props.initialState,
+        (newInitialState) => {
+          if (!newInitialState) return;
+          const nextFlat = Object.keys(newInitialState).length > 0 ? (0, import_store_utils.flattenToPointers)(newInitialState) : {};
+          const allKeys = /* @__PURE__ */ new Set([
+            ...Object.keys(prevFlat),
+            ...Object.keys(nextFlat)
+          ]);
+          const updates = {};
+          for (const key of allKeys) {
+            if (prevFlat[key] !== nextFlat[key]) {
+              updates[key] = key in nextFlat ? nextFlat[key] : void 0;
+            }
+          }
+          prevFlat = nextFlat;
+          if (Object.keys(updates).length > 0) {
+            store.update(updates);
+          }
+        }
+      );
+    }
+    const onStateChangeRef = (0, import_vue.ref)(props.onStateChange);
+    (0, import_vue.watch)(
+      () => props.onStateChange,
+      (fn) => {
+        onStateChangeRef.value = fn;
+      }
+    );
+    const get = (path) => store.get(path);
+    const getSnapshot = () => store.getSnapshot();
+    const set = (path, value) => {
+      const prev = store.getSnapshot();
+      store.set(path, value);
+      if (!isControlled && store.getSnapshot() !== prev) {
+        onStateChangeRef.value?.([{ path, value }]);
+      }
+    };
+    const update = (updates) => {
+      const prev = store.getSnapshot();
+      store.update(updates);
+      if (!isControlled && store.getSnapshot() !== prev) {
+        const changes = [];
+        for (const [path, value] of Object.entries(updates)) {
+          if ((0, import_core.getByPath)(prev, path) !== value) {
+            changes.push({ path, value });
+          }
+        }
+        if (changes.length > 0) {
+          onStateChangeRef.value?.(changes);
+        }
+      }
+    };
+    (0, import_vue.provide)(STATE_KEY, {
+      state,
+      get,
+      set,
+      update,
+      getSnapshot
+    });
+    return () => slots.default?.();
+  }
+});
+function useStateStore() {
+  const ctx = (0, import_vue.inject)(STATE_KEY);
+  if (!ctx) {
+    throw new Error("useStateStore must be used within a StateProvider");
+  }
+  return ctx;
+}
+function useStateValue(path) {
+  const { state } = useStateStore();
+  return (0, import_vue.computed)(() => (0, import_core.getByPath)(state.value, path));
+}
+function useStateBinding(path) {
+  const { state, set } = useStateStore();
+  const value = (0, import_vue.computed)(() => (0, import_core.getByPath)(state.value, path));
+  const setValue = (newValue) => set(path, newValue);
+  return [value, setValue];
+}
+
+// src/composables/visibility.ts
+var import_vue2 = require("vue");
+var import_core2 = require("@json-render/core");
+var VISIBILITY_KEY = /* @__PURE__ */ Symbol("json-render:visibility");
+var VisibilityProvider = (0, import_vue2.defineComponent)({
+  name: "VisibilityProvider",
+  setup(_, { slots }) {
+    const { state } = useStateStore();
+    const ctx = (0, import_vue2.computed)(() => ({
+      stateModel: state.value
+    }));
+    const isVisible = (condition) => (0, import_core2.evaluateVisibility)(condition, ctx.value);
+    (0, import_vue2.provide)(VISIBILITY_KEY, { isVisible, ctx });
+    return () => slots.default?.();
+  }
+});
+function useVisibility() {
+  const ctx = (0, import_vue2.inject)(VISIBILITY_KEY);
+  if (!ctx) {
+    throw new Error("useVisibility must be used within a VisibilityProvider");
+  }
+  return ctx;
+}
+function useIsVisible(condition) {
+  const { ctx } = useVisibility();
+  return (0, import_vue2.computed)(() => (0, import_core2.evaluateVisibility)(condition, ctx.value));
+}
+
+// src/composables/actions.ts
+var import_vue4 = require("vue");
+var import_core4 = require("@json-render/core");
+
+// src/composables/validation.ts
+var import_vue3 = require("vue");
+var import_core3 = require("@json-render/core");
+var VALIDATION_KEY = /* @__PURE__ */ Symbol("json-render:validation");
+function dynamicArgsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    const va = a[key];
+    const vb = b[key];
+    if (va === vb) continue;
+    if (typeof va === "object" && va !== null && typeof vb === "object" && vb !== null) {
+      const sa = va.$state;
+      const sb = vb.$state;
+      if (typeof sa === "string" && sa === sb) continue;
+    }
+    return false;
+  }
+  return true;
+}
+function validationConfigEqual(a, b) {
+  if (a === b) return true;
+  if (a.validateOn !== b.validateOn) return false;
+  const ac = a.checks ?? [];
+  const bc = b.checks ?? [];
+  if (ac.length !== bc.length) return false;
+  for (let i = 0; i < ac.length; i++) {
+    const ca = ac[i];
+    const cb = bc[i];
+    if (ca.type !== cb.type) return false;
+    if (ca.message !== cb.message) return false;
+    if (!dynamicArgsEqual(ca.args, cb.args)) return false;
+  }
+  return true;
+}
+var ValidationProvider = (0, import_vue3.defineComponent)({
+  name: "ValidationProvider",
+  props: {
+    customFunctions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { slots }) {
+    const { state } = useStateStore();
+    const fieldStates = (0, import_vue3.ref)({});
+    const fieldConfigs = (0, import_vue3.ref)({});
+    const registerField = (path, config) => {
+      const existing = fieldConfigs.value[path];
+      if (existing && validationConfigEqual(existing, config)) return;
+      fieldConfigs.value = { ...fieldConfigs.value, [path]: config };
+    };
+    const validate = (path, config) => {
+      const currentState = state.value;
+      const segments = path.split("/").filter(Boolean);
+      let value = currentState;
+      for (const seg of segments) {
+        if (value != null && typeof value === "object") {
+          value = value[seg];
+        } else {
+          value = void 0;
+          break;
+        }
+      }
+      const result = (0, import_core3.runValidation)(config, {
+        value,
+        stateModel: currentState,
+        customFunctions: props.customFunctions
+      });
+      fieldStates.value = {
+        ...fieldStates.value,
+        [path]: {
+          touched: fieldStates.value[path]?.touched ?? true,
+          validated: true,
+          result
+        }
+      };
+      return result;
+    };
+    const touch = (path) => {
+      fieldStates.value = {
+        ...fieldStates.value,
+        [path]: {
+          ...fieldStates.value[path],
+          touched: true,
+          validated: fieldStates.value[path]?.validated ?? false,
+          result: fieldStates.value[path]?.result ?? null
+        }
+      };
+    };
+    const clear = (path) => {
+      const { [path]: _, ...rest } = fieldStates.value;
+      fieldStates.value = rest;
+    };
+    const validateAll = () => {
+      let allValid = true;
+      for (const [path, config] of Object.entries(fieldConfigs.value)) {
+        const result = validate(path, config);
+        if (!result.valid) {
+          allValid = false;
+        }
+      }
+      return allValid;
+    };
+    (0, import_vue3.provide)(VALIDATION_KEY, {
+      get customFunctions() {
+        return props.customFunctions;
+      },
+      get fieldStates() {
+        return fieldStates.value;
+      },
+      validate,
+      touch,
+      clear,
+      validateAll,
+      registerField
+    });
+    return () => slots.default?.();
+  }
+});
+function useOptionalValidation() {
+  return (0, import_vue3.inject)(
+    VALIDATION_KEY,
+    null
+  ) ?? null;
+}
+function useValidation() {
+  const ctx = (0, import_vue3.inject)(VALIDATION_KEY);
+  if (!ctx) {
+    throw new Error("useValidation must be used within a ValidationProvider");
+  }
+  return ctx;
+}
+function useFieldValidation(path, config) {
+  const ctx = useValidation();
+  (0, import_vue3.onMounted)(() => {
+    if (path && config) {
+      ctx.registerField(path, config);
+    }
+  });
+  (0, import_vue3.onUnmounted)(() => {
+    ctx.clear(path);
+  });
+  const defaultState = {
+    touched: false,
+    validated: false,
+    result: null
+  };
+  return {
+    state: (0, import_vue3.computed)(() => ctx.fieldStates[path] ?? defaultState),
+    validate: () => ctx.validate(path, config ?? { checks: [] }),
+    touch: () => ctx.touch(path),
+    clear: () => ctx.clear(path),
+    errors: (0, import_vue3.computed)(() => ctx.fieldStates[path]?.result?.errors ?? []),
+    isValid: (0, import_vue3.computed)(() => ctx.fieldStates[path]?.result?.valid ?? true)
+  };
+}
+
+// src/composables/actions.ts
+var idCounter = 0;
+function generateUniqueId() {
+  idCounter += 1;
+  return `${Date.now()}-${idCounter}`;
+}
+function deepResolveValue(value, get) {
+  if (value === null || value === void 0) return value;
+  if (value === "$id") {
+    return generateUniqueId();
+  }
+  if (typeof value === "object" && !Array.isArray(value)) {
+    const obj = value;
+    const keys = Object.keys(obj);
+    if (keys.length === 1 && typeof obj.$state === "string") {
+      return get(obj.$state);
+    }
+    if (keys.length === 1 && "$id" in obj) {
+      return generateUniqueId();
+    }
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => deepResolveValue(item, get));
+  }
+  if (typeof value === "object") {
+    const resolved = {};
+    for (const [key, val] of Object.entries(value)) {
+      resolved[key] = deepResolveValue(val, get);
+    }
+    return resolved;
+  }
+  return value;
+}
+var ACTIONS_KEY = /* @__PURE__ */ Symbol("json-render:actions");
+var ActionProvider = (0, import_vue4.defineComponent)({
+  name: "ActionProvider",
+  props: {
+    handlers: {
+      type: Object,
+      default: () => ({})
+    },
+    navigate: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const { get, set, getSnapshot } = useStateStore();
+    const validation = useOptionalValidation();
+    const handlers = (0, import_vue4.ref)(props.handlers ?? {});
+    const loadingActions = (0, import_vue4.ref)(/* @__PURE__ */ new Set());
+    const pendingConfirmation = (0, import_vue4.ref)(null);
+    (0, import_vue4.watch)(
+      () => props.handlers,
+      (newHandlers) => {
+        if (newHandlers) handlers.value = newHandlers;
+      }
+    );
+    const registerHandler = (name, handler) => {
+      handlers.value = { ...handlers.value, [name]: handler };
+    };
+    const execute = async (binding) => {
+      const resolved = (0, import_core4.resolveAction)(binding, getSnapshot());
+      if (resolved.action === "setState" && resolved.params) {
+        const statePath = resolved.params.statePath;
+        const value = resolved.params.value;
+        if (statePath) {
+          set(statePath, value);
+        }
+        return;
+      }
+      if (resolved.action === "pushState" && resolved.params) {
+        const statePath = resolved.params.statePath;
+        const rawValue = resolved.params.value;
+        if (statePath) {
+          const resolvedValue = deepResolveValue(rawValue, get);
+          const arr = get(statePath) ?? [];
+          set(statePath, [...arr, resolvedValue]);
+          const clearStatePath = resolved.params.clearStatePath;
+          if (clearStatePath) {
+            set(clearStatePath, "");
+          }
+        }
+        return;
+      }
+      if (resolved.action === "removeState" && resolved.params) {
+        const statePath = resolved.params.statePath;
+        const index = resolved.params.index;
+        if (statePath !== void 0 && index !== void 0) {
+          const arr = get(statePath) ?? [];
+          set(
+            statePath,
+            arr.filter((_, i) => i !== index)
+          );
+        }
+        return;
+      }
+      if (resolved.action === "validateForm") {
+        const validateAll = validation?.validateAll;
+        if (!validateAll) {
+          console.warn(
+            "validateForm action was dispatched but no ValidationProvider is connected. Ensure ValidationProvider is rendered inside the provider tree."
+          );
+          return;
+        }
+        const valid = validateAll();
+        const errors = {};
+        for (const [path, fs] of Object.entries(validation.fieldStates)) {
+          if (fs.result && !fs.result.valid) {
+            errors[path] = fs.result.errors;
+          }
+        }
+        const statePath = resolved.params?.statePath || "/formValidation";
+        set(statePath, { valid, errors });
+        return;
+      }
+      if (resolved.action === "push" && resolved.params) {
+        const screen = resolved.params.screen;
+        if (screen) {
+          const currentScreen = get("/currentScreen");
+          const navStack = get("/navStack") ?? [];
+          if (currentScreen) {
+            set("/navStack", [...navStack, currentScreen]);
+          } else {
+            set("/navStack", [...navStack, ""]);
+          }
+          set("/currentScreen", screen);
+        }
+        return;
+      }
+      if (resolved.action === "pop") {
+        const navStack = get("/navStack") ?? [];
+        if (navStack.length > 0) {
+          const previousScreen = navStack[navStack.length - 1];
+          set("/navStack", navStack.slice(0, -1));
+          if (previousScreen) {
+            set("/currentScreen", previousScreen);
+          } else {
+            set("/currentScreen", void 0);
+          }
+        }
+        return;
+      }
+      const handler = handlers.value[resolved.action];
+      if (!handler) {
+        console.warn(`No handler registered for action: ${resolved.action}`);
+        return;
+      }
+      if (resolved.confirm) {
+        await new Promise((resolve, reject) => {
+          pendingConfirmation.value = {
+            action: resolved,
+            handler,
+            resolve: () => {
+              pendingConfirmation.value = null;
+              resolve();
+            },
+            reject: () => {
+              pendingConfirmation.value = null;
+              reject(new Error("Action cancelled"));
+            }
+          };
+        });
+        const addLoading2 = new Set(loadingActions.value);
+        addLoading2.add(resolved.action);
+        loadingActions.value = addLoading2;
+        try {
+          await (0, import_core4.executeAction)({
+            action: resolved,
+            handler,
+            setState: set,
+            navigate: props.navigate,
+            executeAction: async (name) => {
+              const subBinding = { action: name };
+              await execute(subBinding);
+            }
+          });
+        } finally {
+          const removeLoading = new Set(loadingActions.value);
+          removeLoading.delete(resolved.action);
+          loadingActions.value = removeLoading;
+        }
+        return;
+      }
+      const addLoading = new Set(loadingActions.value);
+      addLoading.add(resolved.action);
+      loadingActions.value = addLoading;
+      try {
+        await (0, import_core4.executeAction)({
+          action: resolved,
+          handler,
+          setState: set,
+          navigate: props.navigate,
+          executeAction: async (name) => {
+            const subBinding = { action: name };
+            await execute(subBinding);
+          }
+        });
+      } finally {
+        const removeLoading = new Set(loadingActions.value);
+        removeLoading.delete(resolved.action);
+        loadingActions.value = removeLoading;
+      }
+    };
+    const confirm = () => pendingConfirmation.value?.resolve();
+    const cancel = () => pendingConfirmation.value?.reject();
+    (0, import_vue4.provide)(ACTIONS_KEY, {
+      get handlers() {
+        return handlers.value;
+      },
+      get loadingActions() {
+        return loadingActions.value;
+      },
+      get pendingConfirmation() {
+        return pendingConfirmation.value;
+      },
+      execute,
+      confirm,
+      cancel,
+      registerHandler
+    });
+    return () => slots.default?.();
+  }
+});
+function useActions() {
+  const ctx = (0, import_vue4.inject)(ACTIONS_KEY);
+  if (!ctx) {
+    throw new Error("useActions must be used within an ActionProvider");
+  }
+  return ctx;
+}
+function useAction(binding) {
+  const ctx = useActions();
+  return {
+    execute: () => ctx.execute(binding),
+    isLoading: (0, import_vue4.computed)(() => ctx.loadingActions.has(binding.action))
+  };
+}
+var ConfirmDialog = (0, import_vue4.defineComponent)({
+  name: "ConfirmDialog",
+  props: {
+    confirm: {
+      type: Object,
+      required: true
+    },
+    onConfirm: {
+      type: Function,
+      required: true
+    },
+    onCancel: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => {
+      const isDanger = props.confirm.variant === "danger";
+      return (0, import_vue4.h)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: "0",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: "50"
+          },
+          onClick: props.onCancel
+        },
+        [
+          (0, import_vue4.h)(
+            "div",
+            {
+              style: {
+                backgroundColor: "white",
+                borderRadius: "8px",
+                padding: "24px",
+                maxWidth: "400px",
+                width: "100%",
+                boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1)"
+              },
+              onClick: (e) => e.stopPropagation()
+            },
+            [
+              (0, import_vue4.h)(
+                "h3",
+                {
+                  style: {
+                    margin: "0 0 8px 0",
+                    fontSize: "18px",
+                    fontWeight: "600"
+                  }
+                },
+                props.confirm.title
+              ),
+              (0, import_vue4.h)(
+                "p",
+                {
+                  style: { margin: "0 0 24px 0", color: "#6b7280" }
+                },
+                props.confirm.message
+              ),
+              (0, import_vue4.h)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "12px",
+                    justifyContent: "flex-end"
+                  }
+                },
+                [
+                  (0, import_vue4.h)(
+                    "button",
+                    {
+                      style: {
+                        padding: "8px 16px",
+                        borderRadius: "6px",
+                        border: "1px solid #d1d5db",
+                        backgroundColor: "white",
+                        cursor: "pointer"
+                      },
+                      onClick: props.onCancel
+                    },
+                    props.confirm.cancelLabel ?? "Cancel"
+                  ),
+                  (0, import_vue4.h)(
+                    "button",
+                    {
+                      style: {
+                        padding: "8px 16px",
+                        borderRadius: "6px",
+                        border: "none",
+                        backgroundColor: isDanger ? "#dc2626" : "#3b82f6",
+                        color: "white",
+                        cursor: "pointer"
+                      },
+                      onClick: props.onConfirm
+                    },
+                    props.confirm.confirmLabel ?? "Confirm"
+                  )
+                ]
+              )
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/composables/repeat-scope.ts
+var import_vue5 = require("vue");
+var REPEAT_SCOPE_KEY = /* @__PURE__ */ Symbol("json-render:repeat-scope");
+var RepeatScopeProvider = (0, import_vue5.defineComponent)({
+  name: "RepeatScopeProvider",
+  props: {
+    item: {
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    basePath: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    (0, import_vue5.provide)(REPEAT_SCOPE_KEY, props);
+    return () => slots.default?.();
+  }
+});
+function useRepeatScope() {
+  return (0, import_vue5.inject)(
+    REPEAT_SCOPE_KEY,
+    null
+  ) ?? null;
+}
+
+// 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({
+          /** 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()),
+          /** 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(),
+        /** Example prop values used in prompt examples (auto-generated from Zod schema if omitted) */
+        example: s.any()
+      }),
+      /** Action definitions (optional) */
+      actions: s.map({
+        /** Zod schema for action params */
+        params: s.zod(),
+        /** Description for AI generation hints */
+        description: s.string()
+      })
+    })
+  }),
+  {
+    builtInActions: [
+      {
+        name: "setState",
+        description: "Update a value in the state model at the given statePath. Params: { statePath: string, value: any }"
+      },
+      {
+        name: "pushState",
+        description: 'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.'
+      },
+      {
+        name: "removeState",
+        description: "Remove an item from an array in state by index. Params: { statePath: string, index: number }"
+      },
+      {
+        name: "validateForm",
+        description: "Validate all registered form fields and write the result to state. Params: { statePath?: string }. Defaults to /formValidation. Result: { valid: boolean, errors: Record<string, string[]> }."
+      }
+    ],
+    defaultRules: [
+      // Element integrity
+      "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
+      "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
+      // Field placement
+      'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/tab","eq":"home"},"children":[...]}.',
+      'CRITICAL: The "on" field goes on the ELEMENT object, NOT inside "props". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',
+      // State and data
+      "When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).",
+      'When building repeating content backed by a state array (e.g. posts, products, items), use the "repeat" field on a container element. Example: { "type": "<ContainerComponent>", "props": {}, "repeat": { "statePath": "/posts", "key": "id" }, "children": ["post-card"] }. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use { "$item": "field" } to read a field from the current item, and { "$index": true } for the current array index. For two-way binding to an item field use { "$bindItem": "completed" }. Do NOT hardcode individual elements for each array item.',
+      // Design quality
+      "Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.",
+      "For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.",
+      "Always include realistic, professional-looking sample data. For blogs include 3-4 posts with varied titles, authors, dates, categories. For products include names, prices, images. Never leave data empty."
+    ]
+  }
+);
+
+// src/index.ts
+var import_core8 = require("@json-render/core");
+
+// src/hooks.ts
+var import_vue6 = require("vue");
+var import_core6 = require("@json-render/core");
+function parseLine(line) {
+  try {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("//")) {
+      return null;
+    }
+    const parsed = JSON.parse(trimmed);
+    if (parsed.__meta === "usage") {
+      return {
+        type: "usage",
+        usage: {
+          promptTokens: parsed.promptTokens ?? 0,
+          completionTokens: parsed.completionTokens ?? 0,
+          totalTokens: parsed.totalTokens ?? 0
+        }
+      };
+    }
+    return { type: "patch", patch: parsed };
+  } catch {
+    return null;
+  }
+}
+function setSpecValue(newSpec, path, value) {
+  if (path === "/root") {
+    newSpec.root = value;
+    return;
+  }
+  if (path === "/state") {
+    newSpec.state = value;
+    return;
+  }
+  if (path.startsWith("/state/")) {
+    if (!newSpec.state) newSpec.state = {};
+    const statePath = path.slice("/state".length);
+    (0, import_core6.setByPath)(newSpec.state, statePath, value);
+    return;
+  }
+  if (path.startsWith("/elements/")) {
+    const pathParts = path.slice("/elements/".length).split("/");
+    const elementKey = pathParts[0];
+    if (!elementKey) return;
+    if (pathParts.length === 1) {
+      newSpec.elements[elementKey] = value;
+    } else {
+      const element = newSpec.elements[elementKey];
+      if (element) {
+        const propPath = "/" + pathParts.slice(1).join("/");
+        const newElement = { ...element };
+        (0, import_core6.setByPath)(
+          newElement,
+          propPath,
+          value
+        );
+        newSpec.elements[elementKey] = newElement;
+      }
+    }
+  }
+}
+function removeSpecValue(newSpec, path) {
+  if (path === "/state") {
+    delete newSpec.state;
+    return;
+  }
+  if (path.startsWith("/state/") && newSpec.state) {
+    const statePath = path.slice("/state".length);
+    (0, import_core6.removeByPath)(newSpec.state, statePath);
+    return;
+  }
+  if (path.startsWith("/elements/")) {
+    const pathParts = path.slice("/elements/".length).split("/");
+    const elementKey = pathParts[0];
+    if (!elementKey) return;
+    if (pathParts.length === 1) {
+      const { [elementKey]: _, ...rest } = newSpec.elements;
+      newSpec.elements = rest;
+    } else {
+      const element = newSpec.elements[elementKey];
+      if (element) {
+        const propPath = "/" + pathParts.slice(1).join("/");
+        const newElement = { ...element };
+        (0, import_core6.removeByPath)(
+          newElement,
+          propPath
+        );
+        newSpec.elements[elementKey] = newElement;
+      }
+    }
+  }
+}
+function getSpecValue(spec, path) {
+  if (path === "/root") return spec.root;
+  if (path === "/state") return spec.state;
+  if (path.startsWith("/state/") && spec.state) {
+    const statePath = path.slice("/state".length);
+    return (0, import_core6.getByPath)(spec.state, statePath);
+  }
+  return (0, import_core6.getByPath)(spec, path);
+}
+function applyPatch(spec, patch) {
+  const newSpec = {
+    ...spec,
+    elements: { ...spec.elements },
+    ...spec.state ? { state: { ...spec.state } } : {}
+  };
+  switch (patch.op) {
+    case "add":
+    case "replace": {
+      setSpecValue(newSpec, patch.path, patch.value);
+      break;
+    }
+    case "remove": {
+      removeSpecValue(newSpec, patch.path);
+      break;
+    }
+    case "move": {
+      if (!patch.from) break;
+      const moveValue = getSpecValue(newSpec, patch.from);
+      removeSpecValue(newSpec, patch.from);
+      setSpecValue(newSpec, patch.path, moveValue);
+      break;
+    }
+    case "copy": {
+      if (!patch.from) break;
+      const copyValue = getSpecValue(newSpec, patch.from);
+      setSpecValue(newSpec, patch.path, copyValue);
+      break;
+    }
+    case "test": {
+      break;
+    }
+  }
+  return newSpec;
+}
+function useUIStream({
+  api,
+  onComplete,
+  onError
+}) {
+  const spec = (0, import_vue6.shallowRef)(null);
+  const isStreaming = (0, import_vue6.ref)(false);
+  const error = (0, import_vue6.ref)(null);
+  const usage = (0, import_vue6.ref)(null);
+  const rawLines = (0, import_vue6.ref)([]);
+  const onCompleteRef = (0, import_vue6.ref)(onComplete);
+  const onErrorRef = (0, import_vue6.ref)(onError);
+  let abortController = null;
+  const clear = () => {
+    spec.value = null;
+    error.value = null;
+    usage.value = null;
+    rawLines.value = [];
+  };
+  const send = async (prompt, context) => {
+    abortController?.abort();
+    abortController = new AbortController();
+    isStreaming.value = true;
+    error.value = null;
+    usage.value = null;
+    rawLines.value = [];
+    const previousSpec = context?.previousSpec;
+    let currentSpec = previousSpec && previousSpec.root ? { ...previousSpec, elements: { ...previousSpec.elements } } : { root: "", elements: {} };
+    spec.value = currentSpec;
+    try {
+      const response = await fetch(api, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          prompt,
+          context,
+          currentSpec
+        }),
+        signal: abortController.signal
+      });
+      if (!response.ok) {
+        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) {
+        throw new Error("No response body");
+      }
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed) continue;
+          const result = parseLine(trimmed);
+          if (!result) continue;
+          if (result.type === "usage") {
+            usage.value = result.usage;
+          } else {
+            rawLines.value = [...rawLines.value, trimmed];
+            currentSpec = applyPatch(currentSpec, result.patch);
+            spec.value = { ...currentSpec };
+          }
+        }
+      }
+      if (buffer.trim()) {
+        const trimmed = buffer.trim();
+        const result = parseLine(trimmed);
+        if (result) {
+          if (result.type === "usage") {
+            usage.value = result.usage;
+          } else {
+            rawLines.value = [...rawLines.value, trimmed];
+            currentSpec = applyPatch(currentSpec, result.patch);
+            spec.value = { ...currentSpec };
+          }
+        }
+      }
+      onCompleteRef.value?.(currentSpec);
+    } catch (err) {
+      if (err.name === "AbortError") {
+        return;
+      }
+      const resolvedError = err instanceof Error ? err : new Error(String(err));
+      error.value = resolvedError;
+      onErrorRef.value?.(resolvedError);
+    } finally {
+      isStreaming.value = false;
+    }
+  };
+  (0, import_vue6.onUnmounted)(() => {
+    abortController?.abort();
+  });
+  return {
+    spec,
+    isStreaming,
+    error,
+    usage,
+    rawLines,
+    send,
+    clear
+  };
+}
+function flatToTree(elements) {
+  const elementMap = {};
+  let root = "";
+  for (const element of elements) {
+    elementMap[element.key] = {
+      type: element.type,
+      props: element.props,
+      children: [],
+      visible: element.visible
+    };
+  }
+  for (const element of elements) {
+    if (element.parentKey) {
+      const parent = elementMap[element.parentKey];
+      if (parent) {
+        if (!parent.children) {
+          parent.children = [];
+        }
+        parent.children.push(element.key);
+      }
+    } else {
+      root = element.key;
+    }
+  }
+  return { root, elements: elementMap };
+}
+function useBoundProp(propValue, bindingPath) {
+  const { set } = useStateStore();
+  return [
+    propValue,
+    (value) => {
+      if (bindingPath) set(bindingPath, value);
+    }
+  ];
+}
+function isSpecDataPart(data) {
+  if (typeof data !== "object" || data === null) return false;
+  const obj = data;
+  switch (obj.type) {
+    case "patch":
+      return typeof obj.patch === "object" && obj.patch !== null;
+    case "flat":
+    case "nested":
+      return typeof obj.spec === "object" && obj.spec !== null;
+    default:
+      return false;
+  }
+}
+function buildSpecFromParts(parts) {
+  const spec = { root: "", elements: {} };
+  let hasSpec = false;
+  for (const part of parts) {
+    if (part.type === import_core6.SPEC_DATA_PART_TYPE) {
+      if (!isSpecDataPart(part.data)) continue;
+      const payload = part.data;
+      if (payload.type === "patch") {
+        hasSpec = true;
+        (0, import_core6.applySpecPatch)(spec, payload.patch);
+      } else if (payload.type === "flat") {
+        hasSpec = true;
+        Object.assign(spec, payload.spec);
+      } else if (payload.type === "nested") {
+        hasSpec = true;
+        const flat = (0, import_core6.nestedToFlat)(payload.spec);
+        Object.assign(spec, flat);
+      }
+    }
+  }
+  return hasSpec ? spec : null;
+}
+function getTextFromParts(parts) {
+  return parts.filter(
+    (p) => p.type === "text" && typeof p.text === "string"
+  ).map((p) => p.text.trim()).filter(Boolean).join("\n\n");
+}
+function useJsonRenderMessage(parts) {
+  const partsRef = (0, import_vue6.isRef)(parts) ? parts : (0, import_vue6.ref)(parts);
+  const spec = (0, import_vue6.computed)(() => buildSpecFromParts(partsRef.value));
+  const text = (0, import_vue6.computed)(() => getTextFromParts(partsRef.value));
+  const hasSpec = (0, import_vue6.computed)(
+    () => spec.value !== null && Object.keys(spec.value.elements || {}).length > 0
+  );
+  return { spec, text, hasSpec };
+}
+var chatMessageIdCounter = 0;
+function generateChatId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  chatMessageIdCounter += 1;
+  return `msg-${Date.now()}-${chatMessageIdCounter}`;
+}
+function useChatUI({
+  api,
+  onComplete,
+  onError
+}) {
+  const messages = (0, import_vue6.ref)([]);
+  const isStreaming = (0, import_vue6.ref)(false);
+  const error = (0, import_vue6.ref)(null);
+  const onCompleteRef = (0, import_vue6.ref)(onComplete);
+  const onErrorRef = (0, import_vue6.ref)(onError);
+  let abortController = null;
+  const clear = () => {
+    messages.value = [];
+    error.value = null;
+  };
+  const send = async (text) => {
+    if (!text.trim()) return;
+    abortController?.abort();
+    abortController = new AbortController();
+    const userMessage = {
+      id: generateChatId(),
+      role: "user",
+      text: text.trim(),
+      spec: null
+    };
+    const assistantId = generateChatId();
+    const assistantMessage = {
+      id: assistantId,
+      role: "assistant",
+      text: "",
+      spec: null
+    };
+    messages.value = [...messages.value, userMessage, assistantMessage];
+    isStreaming.value = true;
+    error.value = null;
+    const historyForApi = [
+      ...messages.value.filter((m) => m.id !== assistantId).map((m) => ({ role: m.role, content: m.text })),
+      { role: "user", content: text.trim() }
+    ];
+    let accumulatedText = "";
+    let currentSpec = { root: "", elements: {} };
+    let hasSpec = false;
+    try {
+      const response = await fetch(api, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ messages: historyForApi }),
+        signal: abortController.signal
+      });
+      if (!response.ok) {
+        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) {
+        throw new Error("No response body");
+      }
+      const decoder = new TextDecoder();
+      const parser = (0, import_core6.createMixedStreamParser)({
+        onPatch(patch) {
+          hasSpec = true;
+          (0, import_core6.applySpecPatch)(currentSpec, patch);
+          messages.value = messages.value.map(
+            (m) => m.id === assistantId ? {
+              ...m,
+              spec: {
+                root: currentSpec.root,
+                elements: { ...currentSpec.elements },
+                ...currentSpec.state ? { state: { ...currentSpec.state } } : {}
+              }
+            } : m
+          );
+        },
+        onText(line) {
+          accumulatedText += (accumulatedText ? "\n" : "") + line;
+          messages.value = messages.value.map(
+            (m) => m.id === assistantId ? { ...m, text: accumulatedText } : m
+          );
+        }
+      });
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        parser.push(decoder.decode(value, { stream: true }));
+      }
+      parser.flush();
+      const finalMessage = {
+        id: assistantId,
+        role: "assistant",
+        text: accumulatedText,
+        spec: hasSpec ? {
+          root: currentSpec.root,
+          elements: { ...currentSpec.elements },
+          ...currentSpec.state ? { state: { ...currentSpec.state } } : {}
+        } : null
+      };
+      onCompleteRef.value?.(finalMessage);
+    } catch (err) {
+      if (err.name === "AbortError") {
+        return;
+      }
+      const resolvedError = err instanceof Error ? err : new Error(String(err));
+      error.value = resolvedError;
+      messages.value = messages.value.filter(
+        (m) => m.id !== assistantId || m.text.length > 0
+      );
+      onErrorRef.value?.(resolvedError);
+    } finally {
+      isStreaming.value = false;
+    }
+  };
+  (0, import_vue6.onUnmounted)(() => {
+    abortController?.abort();
+  });
+  return {
+    messages,
+    isStreaming,
+    error,
+    send,
+    clear
+  };
+}
+
+// src/renderer.ts
+var import_vue7 = require("vue");
+var import_core7 = require("@json-render/core");
+var EMPTY_FUNCTIONS = {};
+var FUNCTIONS_KEY = /* @__PURE__ */ Symbol("json-render:functions");
+var FunctionsProvider = (0, import_vue7.defineComponent)({
+  name: "FunctionsProvider",
+  props: {
+    functions: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const fns = (0, import_vue7.computed)(() => props.functions ?? EMPTY_FUNCTIONS);
+    (0, import_vue7.provide)(FUNCTIONS_KEY, fns);
+    return () => slots.default?.();
+  }
+});
+function useFunctions() {
+  return (0, import_vue7.inject)(
+    FUNCTIONS_KEY,
+    (0, import_vue7.computed)(() => EMPTY_FUNCTIONS)
+  );
+}
+var ElementErrorBoundary = (0, import_vue7.defineComponent)({
+  name: "ElementErrorBoundary",
+  props: {
+    elementType: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    const hasError = (0, import_vue7.ref)(false);
+    (0, import_vue7.onErrorCaptured)((error) => {
+      console.error(
+        `[json-render] Rendering error in <${props.elementType}>:`,
+        error
+      );
+      hasError.value = true;
+      return false;
+    });
+    return () => {
+      if (hasError.value) return null;
+      return slots.default?.();
+    };
+  }
+});
+async function resolveAndExecuteBindings(actionBindings, ctx, getSnapshot, execute, cancelled) {
+  for (const b of actionBindings) {
+    if (cancelled?.()) break;
+    if (!b.params) {
+      await execute(b);
+      if (cancelled?.()) break;
+      continue;
+    }
+    const liveCtx = {
+      ...ctx,
+      stateModel: getSnapshot()
+    };
+    const resolved = {};
+    for (const [key, val] of Object.entries(b.params)) {
+      resolved[key] = (0, import_core7.resolveActionParam)(val, liveCtx);
+    }
+    await execute({ ...b, params: resolved });
+    if (cancelled?.()) break;
+  }
+}
+var ElementRenderer = (0, import_vue7.defineComponent)({
+  name: "JsonRenderElement",
+  props: {
+    element: {
+      type: Object,
+      required: true
+    },
+    spec: {
+      type: Object,
+      required: true
+    },
+    registry: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: void 0
+    },
+    fallback: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const repeatScope = useRepeatScope();
+    const { ctx: visibilityCtx } = useVisibility();
+    const { execute } = useActions();
+    const { getSnapshot, state: watchState } = useStateStore();
+    const functions = useFunctions();
+    const fullCtx = (0, import_vue7.computed)(() => {
+      const base = repeatScope ? {
+        ...visibilityCtx.value,
+        repeatItem: repeatScope.item,
+        repeatIndex: repeatScope.index,
+        repeatBasePath: repeatScope.basePath
+      } : { ...visibilityCtx.value };
+      base.functions = functions.value;
+      return base;
+    });
+    const emitEvent = async (eventName) => {
+      const binding = props.element.on?.[eventName];
+      if (!binding) return;
+      const actionBindings = Array.isArray(binding) ? binding : [binding];
+      await resolveAndExecuteBindings(
+        actionBindings,
+        fullCtx.value,
+        getSnapshot,
+        execute
+      );
+    };
+    const onEvent = (eventName) => {
+      const binding = props.element.on?.[eventName];
+      if (!binding) {
+        return { emit: () => {
+        }, shouldPreventDefault: false, bound: false };
+      }
+      const actionBindings = Array.isArray(binding) ? binding : [binding];
+      const shouldPreventDefault = actionBindings.some((b) => b.preventDefault);
+      return {
+        emit: () => {
+          void emitEvent(eventName);
+        },
+        shouldPreventDefault,
+        bound: true
+      };
+    };
+    const watchedValues = (0, import_vue7.computed)(() => {
+      const cfg = props.element.watch;
+      if (!cfg) return void 0;
+      const values = {};
+      for (const path of Object.keys(cfg)) {
+        values[path] = (0, import_core7.getByPath)(watchState.value, path);
+      }
+      return values;
+    });
+    (0, import_vue7.watch)(
+      watchedValues,
+      (current, prev, onCleanup) => {
+        const cfg = props.element.watch;
+        if (!cfg || !current) return;
+        let cancelled = false;
+        onCleanup(() => {
+          cancelled = true;
+        });
+        const paths = Object.keys(cfg);
+        void (async () => {
+          for (const path of paths) {
+            if (cancelled) break;
+            if (prev && current[path] === prev[path]) continue;
+            const binding = cfg[path];
+            if (!binding) continue;
+            const bindings = Array.isArray(binding) ? binding : [binding];
+            await resolveAndExecuteBindings(
+              bindings,
+              fullCtx.value,
+              getSnapshot,
+              execute,
+              () => cancelled
+            );
+          }
+        })().catch(console.error);
+      },
+      { deep: true }
+    );
+    return () => {
+      const ctx = fullCtx.value;
+      const isVisible = props.element.visible === void 0 ? true : (0, import_core7.evaluateVisibility)(props.element.visible, ctx);
+      if (!isVisible) return null;
+      const rawProps = props.element.props;
+      const elementBindings = (0, import_core7.resolveBindings)(rawProps, ctx);
+      const resolvedProps = (0, import_core7.resolveElementProps)(rawProps, ctx);
+      const resolvedElement = resolvedProps !== props.element.props ? { ...props.element, props: resolvedProps } : props.element;
+      const Component = props.registry[resolvedElement.type] ?? props.fallback;
+      if (!Component) {
+        console.warn(
+          `[json-render] No renderer for component type: ${resolvedElement.type}`
+        );
+        return null;
+      }
+      const childrenVNodes = resolvedElement.repeat ? (0, import_vue7.h)(RepeatChildren, {
+        element: resolvedElement,
+        spec: props.spec,
+        registry: props.registry,
+        loading: props.loading,
+        fallback: props.fallback
+      }) : resolvedElement.children?.map((childKey) => {
+        const childElement = props.spec.elements[childKey];
+        if (!childElement) {
+          if (!props.loading) {
+            console.warn(
+              `[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`
+            );
+          }
+          return null;
+        }
+        return (0, import_vue7.h)(ElementRenderer, {
+          key: childKey,
+          element: childElement,
+          spec: props.spec,
+          registry: props.registry,
+          loading: props.loading,
+          fallback: props.fallback
+        });
+      }).filter((n) => n !== null) ?? void 0;
+      return (0, import_vue7.h)(
+        ElementErrorBoundary,
+        { elementType: resolvedElement.type },
+        {
+          default: () => (0, import_vue7.h)(
+            Component,
+            {
+              element: resolvedElement,
+              emit: emitEvent,
+              on: onEvent,
+              bindings: elementBindings,
+              loading: props.loading
+            },
+            { default: () => childrenVNodes }
+          )
+        }
+      );
+    };
+  }
+});
+var RepeatChildren = (0, import_vue7.defineComponent)({
+  name: "JsonRenderRepeatChildren",
+  props: {
+    element: {
+      type: Object,
+      required: true
+    },
+    spec: {
+      type: Object,
+      required: true
+    },
+    registry: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: void 0
+    },
+    fallback: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { state } = useStateStore();
+    return () => {
+      const repeat = props.element.repeat;
+      if (!repeat?.statePath) return null;
+      const statePath = repeat.statePath;
+      const raw = (0, import_core7.getByPath)(state.value, statePath);
+      const items = Array.isArray(raw) ? raw : [];
+      return items.map((itemValue, index) => {
+        const key = repeat.key && typeof itemValue === "object" && itemValue !== null ? String(
+          itemValue[repeat.key] ?? index
+        ) : String(index);
+        return (0, import_vue7.h)(
+          RepeatScopeProvider,
+          { key, item: itemValue, index, basePath: `${statePath}/${index}` },
+          {
+            default: () => props.element.children?.map((childKey) => {
+              const childElement = props.spec.elements[childKey];
+              if (!childElement) {
+                if (!props.loading) {
+                  console.warn(
+                    `[json-render] Missing element "${childKey}" referenced as child of "${props.element.type}" (repeat). This element will not render.`
+                  );
+                }
+                return null;
+              }
+              return (0, import_vue7.h)(ElementRenderer, {
+                key: childKey,
+                element: childElement,
+                spec: props.spec,
+                registry: props.registry,
+                loading: props.loading,
+                fallback: props.fallback
+              });
+            }).filter((n) => n !== null) ?? null
+          }
+        );
+      });
+    };
+  }
+});
+var Renderer = (0, import_vue7.defineComponent)({
+  name: "JsonRenderer",
+  props: {
+    spec: {
+      type: Object,
+      default: null
+    },
+    registry: {
+      type: Object,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: void 0
+    },
+    fallback: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    return () => {
+      if (!props.spec?.root) return null;
+      const rootElement = props.spec.elements[props.spec.root];
+      if (!rootElement) return null;
+      return (0, import_vue7.h)(ElementRenderer, {
+        element: rootElement,
+        spec: props.spec,
+        registry: props.registry,
+        loading: props.loading,
+        fallback: props.fallback
+      });
+    };
+  }
+});
+var ConfirmationDialogManager = (0, import_vue7.defineComponent)({
+  name: "ConfirmationDialogManager",
+  setup() {
+    const { pendingConfirmation, confirm, cancel } = useActions();
+    return () => {
+      if (!pendingConfirmation?.action.confirm) return null;
+      return (0, import_vue7.h)(ConfirmDialog, {
+        confirm: pendingConfirmation.action.confirm,
+        onConfirm: confirm,
+        onCancel: cancel
+      });
+    };
+  }
+});
+var JSONUIProvider = (0, import_vue7.defineComponent)({
+  name: "JSONUIProvider",
+  props: {
+    registry: {
+      type: Object,
+      required: true
+    },
+    store: {
+      type: Object,
+      default: void 0
+    },
+    initialState: {
+      type: Object,
+      default: void 0
+    },
+    handlers: {
+      type: Object,
+      default: void 0
+    },
+    navigate: {
+      type: Function,
+      default: void 0
+    },
+    validationFunctions: {
+      type: Object,
+      default: void 0
+    },
+    functions: {
+      type: Object,
+      default: void 0
+    },
+    onStateChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    return () => (0, import_vue7.h)(
+      StateProvider,
+      {
+        store: props.store,
+        initialState: props.initialState,
+        onStateChange: props.onStateChange
+      },
+      {
+        default: () => (0, import_vue7.h)(VisibilityProvider, null, {
+          default: () => (0, import_vue7.h)(
+            ValidationProvider,
+            { customFunctions: props.validationFunctions },
+            {
+              default: () => (0, import_vue7.h)(
+                ActionProvider,
+                { handlers: props.handlers, navigate: props.navigate },
+                {
+                  default: () => (0, import_vue7.h)(
+                    FunctionsProvider,
+                    { functions: props.functions },
+                    {
+                      default: () => [
+                        slots.default?.(),
+                        (0, import_vue7.h)(ConfirmationDialogManager)
+                      ]
+                    }
+                  )
+                }
+              )
+            }
+          )
+        })
+      }
+    );
+  }
+});
+function defineRegistry(_catalog, options) {
+  const registry = {};
+  if (options.components) {
+    for (const [name, componentFn] of Object.entries(options.components)) {
+      registry[name] = (0, import_vue7.defineComponent)({
+        name: `JsonRenderRegistry_${name}`,
+        props: {
+          element: {
+            type: Object,
+            required: true
+          },
+          emit: {
+            type: Function,
+            required: true
+          },
+          on: {
+            type: Function,
+            required: true
+          },
+          bindings: {
+            type: Object,
+            default: void 0
+          },
+          loading: {
+            type: Boolean,
+            default: void 0
+          }
+        },
+        setup(registryProps, { slots }) {
+          return () => componentFn({
+            props: registryProps.element.props,
+            children: slots.default?.(),
+            emit: registryProps.emit,
+            on: registryProps.on,
+            bindings: registryProps.bindings,
+            loading: registryProps.loading
+          });
+        }
+      });
+    }
+  }
+  const actionMap = options.actions ? Object.entries(options.actions) : [];
+  const handlers = (getSetState, getState) => {
+    const result = {};
+    for (const [name, actionFn] of actionMap) {
+      result[name] = async (params) => {
+        const setState = getSetState();
+        const state = getState();
+        if (setState) {
+          await actionFn(params, setState, state);
+        }
+      };
+    }
+    return result;
+  };
+  const executeAction2 = async (actionName, params, setState, state = {}) => {
+    const entry = actionMap.find(([name]) => name === actionName);
+    if (entry) {
+      await entry[1](params, setState, state);
+    } else {
+      console.warn(`Unknown action: ${actionName}`);
+    }
+  };
+  return { registry, handlers, executeAction: executeAction2 };
+}
+function createRenderer(catalog, components) {
+  const registry = components;
+  return (0, import_vue7.defineComponent)({
+    name: "CatalogRenderer",
+    props: {
+      spec: {
+        type: Object,
+        default: null
+      },
+      store: {
+        type: Object,
+        default: void 0
+      },
+      state: {
+        type: Object,
+        default: void 0
+      },
+      onAction: {
+        type: Function,
+        default: void 0
+      },
+      onStateChange: {
+        type: Function,
+        default: void 0
+      },
+      functions: {
+        type: Object,
+        default: void 0
+      },
+      loading: {
+        type: Boolean,
+        default: void 0
+      },
+      fallback: {
+        type: Object,
+        default: void 0
+      }
+    },
+    setup(rendererProps) {
+      return () => {
+        const actionHandlers = rendererProps.onAction ? new Proxy(
+          {},
+          {
+            get: (_target, prop) => {
+              return (params) => rendererProps.onAction(prop, params);
+            },
+            has: () => true
+          }
+        ) : void 0;
+        return (0, import_vue7.h)(
+          StateProvider,
+          {
+            store: rendererProps.store,
+            initialState: rendererProps.state,
+            onStateChange: rendererProps.onStateChange
+          },
+          {
+            default: () => (0, import_vue7.h)(VisibilityProvider, null, {
+              default: () => (0, import_vue7.h)(ValidationProvider, null, {
+                default: () => (0, import_vue7.h)(
+                  ActionProvider,
+                  { handlers: actionHandlers },
+                  {
+                    default: () => (0, import_vue7.h)(
+                      FunctionsProvider,
+                      { functions: rendererProps.functions },
+                      {
+                        default: () => [
+                          (0, import_vue7.h)(Renderer, {
+                            spec: rendererProps.spec,
+                            registry,
+                            loading: rendererProps.loading,
+                            fallback: rendererProps.fallback
+                          }),
+                          (0, import_vue7.h)(ConfirmationDialogManager)
+                        ]
+                      }
+                    )
+                  }
+                )
+              })
+            })
+          }
+        );
+      };
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionProvider,
+  ConfirmDialog,
+  JSONUIProvider,
+  Renderer,
+  RepeatScopeProvider,
+  StateProvider,
+  ValidationProvider,
+  VisibilityProvider,
+  buildSpecFromParts,
+  createRenderer,
+  createStateStore,
+  defineRegistry,
+  flatToTree,
+  getTextFromParts,
+  schema,
+  useAction,
+  useActions,
+  useBoundProp,
+  useChatUI,
+  useFieldValidation,
+  useIsVisible,
+  useJsonRenderMessage,
+  useOptionalValidation,
+  useRepeatScope,
+  useStateBinding,
+  useStateStore,
+  useStateValue,
+  useUIStream,
+  useValidation,
+  useVisibility
+});
+//# sourceMappingURL=index.js.map