@json-render/core 0.5.1 → 0.6.0

package/dist/index.mjs

@@ -5,26 +5,26 @@ var DynamicValueSchema = z.union([
   z.number(),
   z.boolean(),
   z.null(),
-  z.object({ path: z.string() })
+  z.object({ $state: z.string() })
 ]);
 var DynamicStringSchema = z.union([
   z.string(),
-  z.object({ path: z.string() })
+  z.object({ $state: z.string() })
 ]);
 var DynamicNumberSchema = z.union([
   z.number(),
-  z.object({ path: z.string() })
+  z.object({ $state: z.string() })
 ]);
 var DynamicBooleanSchema = z.union([
   z.boolean(),
-  z.object({ path: z.string() })
+  z.object({ $state: z.string() })
 ]);
 function resolveDynamicValue(value, stateModel) {
   if (value === null || value === void 0) {
     return void 0;
   }
-  if (typeof value === "object" && "path" in value) {
-    return getByPath(stateModel, value.path);
+  if (typeof value === "object" && "$state" in value) {
+    return getByPath(stateModel, value.$state);
   }
   return value;
 }
@@ -171,7 +171,7 @@ function deepEqual(a, b) {
   if (aKeys.length !== bKeys.length) return false;
   return aKeys.every((key) => deepEqual(aObj[key], bObj[key]));
 }
-function findFormValue(fieldName, params, data) {
+function findFormValue(fieldName, params, state) {
   if (params?.[fieldName] !== void 0) {
     const val = params[fieldName];
     if (typeof val !== "string" || !val.includes(".")) {
@@ -188,19 +188,15 @@ function findFormValue(fieldName, params, data) {
       }
     }
   }
-  if (data) {
-    for (const key of Object.keys(data)) {
+  if (state) {
+    for (const key of Object.keys(state)) {
       if (key === fieldName || key.endsWith(`.${fieldName}`)) {
-        return data[key];
+        return state[key];
       }
     }
-    const prefixes = ["form", "newCustomer", "customer", ""];
-    for (const prefix of prefixes) {
-      const path = prefix ? `${prefix}/${fieldName}` : fieldName;
-      const val = getByPath(data, path);
-      if (val !== void 0) {
-        return val;
-      }
+    const val = getByPath(state, fieldName);
+    if (val !== void 0) {
+      return val;
     }
   }
   return void 0;
@@ -254,6 +250,44 @@ function applySpecStreamPatch(obj, patch) {
   }
   return obj;
 }
+function applySpecPatch(spec, patch) {
+  applySpecStreamPatch(spec, patch);
+  return spec;
+}
+function nestedToFlat(nested) {
+  const elements = {};
+  let counter = 0;
+  function walk(node) {
+    const key = `el-${counter++}`;
+    const { type, props, children: rawChildren, ...rest } = node;
+    const childKeys = [];
+    if (Array.isArray(rawChildren)) {
+      for (const child of rawChildren) {
+        if (child && typeof child === "object" && "type" in child) {
+          childKeys.push(walk(child));
+        }
+      }
+    }
+    const element = {
+      type: type ?? "unknown",
+      props: props ?? {},
+      children: childKeys
+    };
+    for (const [k, v] of Object.entries(rest)) {
+      if (k !== "state" && v !== void 0) {
+        element[k] = v;
+      }
+    }
+    elements[key] = element;
+    return key;
+  }
+  const root = walk(nested);
+  const spec = { root, elements };
+  if (nested.state && typeof nested.state === "object" && !Array.isArray(nested.state)) {
+    spec.state = nested.state;
+  }
+  return spec;
+}
 function compileSpecStream(stream, initial = {}) {
   const lines = stream.split("\n");
   const result = { ...initial };
@@ -316,129 +350,304 @@ function createSpecStreamCompiler(initial = {}) {
     }
   };
 }
+function createMixedStreamParser(callbacks) {
+  let buffer = "";
+  let inSpecFence = false;
+  function processLine(line) {
+    const trimmed = line.trim();
+    if (!inSpecFence && trimmed.startsWith("```spec")) {
+      inSpecFence = true;
+      return;
+    }
+    if (inSpecFence && trimmed === "```") {
+      inSpecFence = false;
+      return;
+    }
+    if (!trimmed) return;
+    if (inSpecFence) {
+      const patch2 = parseSpecStreamLine(trimmed);
+      if (patch2) {
+        callbacks.onPatch(patch2);
+      }
+      return;
+    }
+    const patch = parseSpecStreamLine(trimmed);
+    if (patch) {
+      callbacks.onPatch(patch);
+    } else {
+      callbacks.onText(line);
+    }
+  }
+  return {
+    push(chunk) {
+      buffer += chunk;
+      const lines = buffer.split("\n");
+      buffer = lines.pop() || "";
+      for (const line of lines) {
+        processLine(line);
+      }
+    },
+    flush() {
+      if (buffer.trim()) {
+        processLine(buffer);
+      }
+      buffer = "";
+    }
+  };
+}
+var SPEC_FENCE_OPEN = "```spec";
+var SPEC_FENCE_CLOSE = "```";
+function createJsonRenderTransform() {
+  let lineBuffer = "";
+  let currentTextId = "";
+  let buffering = false;
+  let inSpecFence = false;
+  function emitPatch(patch, controller) {
+    controller.enqueue({
+      type: SPEC_DATA_PART_TYPE,
+      data: { type: "patch", patch }
+    });
+  }
+  function flushBuffer(controller) {
+    if (!lineBuffer) return;
+    const trimmed = lineBuffer.trim();
+    if (inSpecFence) {
+      if (trimmed) {
+        const patch = parseSpecStreamLine(trimmed);
+        if (patch) emitPatch(patch, controller);
+      }
+      lineBuffer = "";
+      buffering = false;
+      return;
+    }
+    if (trimmed) {
+      const patch = parseSpecStreamLine(trimmed);
+      if (patch) {
+        emitPatch(patch, controller);
+      } else {
+        controller.enqueue({
+          type: "text-delta",
+          id: currentTextId,
+          delta: lineBuffer
+        });
+      }
+    } else {
+      controller.enqueue({
+        type: "text-delta",
+        id: currentTextId,
+        delta: lineBuffer
+      });
+    }
+    lineBuffer = "";
+    buffering = false;
+  }
+  function processCompleteLine(line, controller) {
+    const trimmed = line.trim();
+    if (!inSpecFence && trimmed.startsWith(SPEC_FENCE_OPEN)) {
+      inSpecFence = true;
+      return;
+    }
+    if (inSpecFence && trimmed === SPEC_FENCE_CLOSE) {
+      inSpecFence = false;
+      return;
+    }
+    if (inSpecFence) {
+      if (trimmed) {
+        const patch2 = parseSpecStreamLine(trimmed);
+        if (patch2) emitPatch(patch2, controller);
+      }
+      return;
+    }
+    if (!trimmed) {
+      controller.enqueue({
+        type: "text-delta",
+        id: currentTextId,
+        delta: "\n"
+      });
+      return;
+    }
+    const patch = parseSpecStreamLine(trimmed);
+    if (patch) {
+      emitPatch(patch, controller);
+    } else {
+      controller.enqueue({
+        type: "text-delta",
+        id: currentTextId,
+        delta: line + "\n"
+      });
+    }
+  }
+  return new TransformStream({
+    transform(chunk, controller) {
+      switch (chunk.type) {
+        case "text-start": {
+          currentTextId = chunk.id;
+          controller.enqueue(chunk);
+          break;
+        }
+        case "text-delta": {
+          const delta = chunk;
+          currentTextId = delta.id;
+          const text = delta.delta;
+          for (let i = 0; i < text.length; i++) {
+            const ch = text.charAt(i);
+            if (ch === "\n") {
+              if (buffering) {
+                processCompleteLine(lineBuffer, controller);
+                lineBuffer = "";
+                buffering = false;
+              } else {
+                if (!inSpecFence) {
+                  controller.enqueue({
+                    type: "text-delta",
+                    id: currentTextId,
+                    delta: "\n"
+                  });
+                }
+              }
+            } else if (lineBuffer.length === 0 && !buffering) {
+              if (inSpecFence || ch === "{" || ch === "`") {
+                buffering = true;
+                lineBuffer += ch;
+              } else {
+                controller.enqueue({
+                  type: "text-delta",
+                  id: currentTextId,
+                  delta: ch
+                });
+              }
+            } else if (buffering) {
+              lineBuffer += ch;
+            } else {
+              controller.enqueue({
+                type: "text-delta",
+                id: currentTextId,
+                delta: ch
+              });
+            }
+          }
+          break;
+        }
+        case "text-end": {
+          flushBuffer(controller);
+          controller.enqueue(chunk);
+          break;
+        }
+        default: {
+          controller.enqueue(chunk);
+          break;
+        }
+      }
+    },
+    flush(controller) {
+      flushBuffer(controller);
+    }
+  });
+}
+var SPEC_DATA_PART = "spec";
+var SPEC_DATA_PART_TYPE = `data-${SPEC_DATA_PART}`;
+function pipeJsonRender(stream) {
+  return stream.pipeThrough(
+    createJsonRenderTransform()
+  );
+}
 
 // src/visibility.ts
 import { z as z2 } from "zod";
-var DynamicNumberValueSchema = z2.union([
+var numericOrStateRef = z2.union([
   z2.number(),
-  z2.object({ path: z2.string() })
+  z2.object({ $state: z2.string() })
+]);
+var comparisonOps = {
+  eq: z2.unknown().optional(),
+  neq: z2.unknown().optional(),
+  gt: numericOrStateRef.optional(),
+  gte: numericOrStateRef.optional(),
+  lt: numericOrStateRef.optional(),
+  lte: numericOrStateRef.optional(),
+  not: z2.literal(true).optional()
+};
+var StateConditionSchema = z2.object({
+  $state: z2.string(),
+  ...comparisonOps
+});
+var ItemConditionSchema = z2.object({
+  $item: z2.string(),
+  ...comparisonOps
+});
+var IndexConditionSchema = z2.object({
+  $index: z2.literal(true),
+  ...comparisonOps
+});
+var SingleConditionSchema = z2.union([
+  StateConditionSchema,
+  ItemConditionSchema,
+  IndexConditionSchema
 ]);
-var LogicExpressionSchema = z2.lazy(
+var VisibilityConditionSchema = z2.lazy(
   () => z2.union([
-    z2.object({ and: z2.array(LogicExpressionSchema) }),
-    z2.object({ or: z2.array(LogicExpressionSchema) }),
-    z2.object({ not: LogicExpressionSchema }),
-    z2.object({ path: z2.string() }),
-    z2.object({ eq: z2.tuple([DynamicValueSchema, DynamicValueSchema]) }),
-    z2.object({ neq: z2.tuple([DynamicValueSchema, DynamicValueSchema]) }),
-    z2.object({
-      gt: z2.tuple([DynamicNumberValueSchema, DynamicNumberValueSchema])
-    }),
-    z2.object({
-      gte: z2.tuple([DynamicNumberValueSchema, DynamicNumberValueSchema])
-    }),
-    z2.object({
-      lt: z2.tuple([DynamicNumberValueSchema, DynamicNumberValueSchema])
-    }),
-    z2.object({
-      lte: z2.tuple([DynamicNumberValueSchema, DynamicNumberValueSchema])
-    })
+    z2.boolean(),
+    SingleConditionSchema,
+    z2.array(SingleConditionSchema),
+    z2.object({ $and: z2.array(VisibilityConditionSchema) }),
+    z2.object({ $or: z2.array(VisibilityConditionSchema) })
   ])
 );
-var VisibilityConditionSchema = z2.union([
-  z2.boolean(),
-  z2.object({ path: z2.string() }),
-  z2.object({ auth: z2.enum(["signedIn", "signedOut"]) }),
-  LogicExpressionSchema
-]);
-function evaluateLogicExpression(expr, ctx) {
-  const { stateModel } = ctx;
-  if ("and" in expr) {
-    return expr.and.every((subExpr) => evaluateLogicExpression(subExpr, ctx));
-  }
-  if ("or" in expr) {
-    return expr.or.some((subExpr) => evaluateLogicExpression(subExpr, ctx));
-  }
-  if ("not" in expr) {
-    return !evaluateLogicExpression(expr.not, ctx);
-  }
-  if ("path" in expr) {
-    const value = resolveDynamicValue({ path: expr.path }, stateModel);
-    return Boolean(value);
-  }
-  if ("eq" in expr) {
-    const [left, right] = expr.eq;
-    const leftValue = resolveDynamicValue(left, stateModel);
-    const rightValue = resolveDynamicValue(right, stateModel);
-    return leftValue === rightValue;
-  }
-  if ("neq" in expr) {
-    const [left, right] = expr.neq;
-    const leftValue = resolveDynamicValue(left, stateModel);
-    const rightValue = resolveDynamicValue(right, stateModel);
-    return leftValue !== rightValue;
-  }
-  if ("gt" in expr) {
-    const [left, right] = expr.gt;
-    const leftValue = resolveDynamicValue(
-      left,
-      stateModel
-    );
-    const rightValue = resolveDynamicValue(
-      right,
-      stateModel
-    );
-    if (typeof leftValue === "number" && typeof rightValue === "number") {
-      return leftValue > rightValue;
+function resolveComparisonValue(value, ctx) {
+  if (typeof value === "object" && value !== null) {
+    if ("$state" in value && typeof value.$state === "string") {
+      return getByPath(ctx.stateModel, value.$state);
     }
-    return false;
   }
-  if ("gte" in expr) {
-    const [left, right] = expr.gte;
-    const leftValue = resolveDynamicValue(
-      left,
-      stateModel
-    );
-    const rightValue = resolveDynamicValue(
-      right,
-      stateModel
-    );
-    if (typeof leftValue === "number" && typeof rightValue === "number") {
-      return leftValue >= rightValue;
-    }
-    return false;
+  return value;
+}
+function isItemCondition(cond) {
+  return "$item" in cond;
+}
+function isIndexCondition(cond) {
+  return "$index" in cond;
+}
+function resolveConditionValue(cond, ctx) {
+  if (isIndexCondition(cond)) {
+    return ctx.repeatIndex;
   }
-  if ("lt" in expr) {
-    const [left, right] = expr.lt;
-    const leftValue = resolveDynamicValue(
-      left,
-      stateModel
-    );
-    const rightValue = resolveDynamicValue(
-      right,
-      stateModel
-    );
-    if (typeof leftValue === "number" && typeof rightValue === "number") {
-      return leftValue < rightValue;
-    }
-    return false;
+  if (isItemCondition(cond)) {
+    if (ctx.repeatItem === void 0) return void 0;
+    return cond.$item === "" ? ctx.repeatItem : getByPath(ctx.repeatItem, cond.$item);
   }
-  if ("lte" in expr) {
-    const [left, right] = expr.lte;
-    const leftValue = resolveDynamicValue(
-      left,
-      stateModel
-    );
-    const rightValue = resolveDynamicValue(
-      right,
-      stateModel
-    );
-    if (typeof leftValue === "number" && typeof rightValue === "number") {
-      return leftValue <= rightValue;
-    }
-    return false;
+  return getByPath(ctx.stateModel, cond.$state);
+}
+function evaluateCondition(cond, ctx) {
+  const value = resolveConditionValue(cond, ctx);
+  let result;
+  if (cond.eq !== void 0) {
+    const rhs = resolveComparisonValue(cond.eq, ctx);
+    result = value === rhs;
+  } else if (cond.neq !== void 0) {
+    const rhs = resolveComparisonValue(cond.neq, ctx);
+    result = value !== rhs;
+  } else if (cond.gt !== void 0) {
+    const rhs = resolveComparisonValue(cond.gt, ctx);
+    result = typeof value === "number" && typeof rhs === "number" ? value > rhs : false;
+  } else if (cond.gte !== void 0) {
+    const rhs = resolveComparisonValue(cond.gte, ctx);
+    result = typeof value === "number" && typeof rhs === "number" ? value >= rhs : false;
+  } else if (cond.lt !== void 0) {
+    const rhs = resolveComparisonValue(cond.lt, ctx);
+    result = typeof value === "number" && typeof rhs === "number" ? value < rhs : false;
+  } else if (cond.lte !== void 0) {
+    const rhs = resolveComparisonValue(cond.lte, ctx);
+    result = typeof value === "number" && typeof rhs === "number" ? value <= rhs : false;
+  } else {
+    result = Boolean(value);
   }
-  return false;
+  return cond.not === true ? !result : result;
+}
+function isAndCondition(condition) {
+  return typeof condition === "object" && condition !== null && !Array.isArray(condition) && "$and" in condition;
+}
+function isOrCondition(condition) {
+  return typeof condition === "object" && condition !== null && !Array.isArray(condition) && "$or" in condition;
 }
 function evaluateVisibility(condition, ctx) {
   if (condition === void 0) {
@@ -447,74 +656,114 @@ function evaluateVisibility(condition, ctx) {
   if (typeof condition === "boolean") {
     return condition;
   }
-  if ("path" in condition && !("and" in condition) && !("or" in condition)) {
-    const value = resolveDynamicValue({ path: condition.path }, ctx.stateModel);
-    return Boolean(value);
+  if (Array.isArray(condition)) {
+    return condition.every((c) => evaluateCondition(c, ctx));
   }
-  if ("auth" in condition) {
-    const isSignedIn = ctx.authState?.isSignedIn ?? false;
-    if (condition.auth === "signedIn") {
-      return isSignedIn;
-    }
-    if (condition.auth === "signedOut") {
-      return !isSignedIn;
-    }
-    return false;
+  if (isAndCondition(condition)) {
+    return condition.$and.every((child) => evaluateVisibility(child, ctx));
+  }
+  if (isOrCondition(condition)) {
+    return condition.$or.some((child) => evaluateVisibility(child, ctx));
   }
-  return evaluateLogicExpression(condition, ctx);
+  return evaluateCondition(condition, ctx);
 }
 var visibility = {
   /** Always visible */
   always: true,
   /** Never visible */
   never: false,
-  /** Visible when path is truthy */
-  when: (path) => ({ path }),
-  /** Visible when signed in */
-  signedIn: { auth: "signedIn" },
-  /** Visible when signed out */
-  signedOut: { auth: "signedOut" },
-  /** AND multiple conditions */
-  and: (...conditions) => ({
-    and: conditions
-  }),
-  /** OR multiple conditions */
-  or: (...conditions) => ({
-    or: conditions
-  }),
-  /** NOT a condition */
-  not: (condition) => ({ not: condition }),
+  /** Visible when state path is truthy */
+  when: (path) => ({ $state: path }),
+  /** Visible when state path is falsy */
+  unless: (path) => ({ $state: path, not: true }),
   /** Equality check */
-  eq: (left, right) => ({
-    eq: [left, right]
+  eq: (path, value) => ({
+    $state: path,
+    eq: value
   }),
   /** Not equal check */
-  neq: (left, right) => ({
-    neq: [left, right]
+  neq: (path, value) => ({
+    $state: path,
+    neq: value
   }),
   /** Greater than */
-  gt: (left, right) => ({ gt: [left, right] }),
+  gt: (path, value) => ({
+    $state: path,
+    gt: value
+  }),
   /** Greater than or equal */
-  gte: (left, right) => ({ gte: [left, right] }),
+  gte: (path, value) => ({
+    $state: path,
+    gte: value
+  }),
   /** Less than */
-  lt: (left, right) => ({ lt: [left, right] }),
+  lt: (path, value) => ({
+    $state: path,
+    lt: value
+  }),
   /** Less than or equal */
-  lte: (left, right) => ({ lte: [left, right] })
+  lte: (path, value) => ({
+    $state: path,
+    lte: value
+  }),
+  /** AND multiple conditions */
+  and: (...conditions) => ({
+    $and: conditions
+  }),
+  /** OR multiple conditions */
+  or: (...conditions) => ({
+    $or: conditions
+  })
 };
 
 // src/props.ts
-function isPathExpression(value) {
-  return typeof value === "object" && value !== null && "$path" in value && typeof value.$path === "string";
+function isStateExpression(value) {
+  return typeof value === "object" && value !== null && "$state" in value && typeof value.$state === "string";
+}
+function isItemExpression(value) {
+  return typeof value === "object" && value !== null && "$item" in value && typeof value.$item === "string";
+}
+function isIndexExpression(value) {
+  return typeof value === "object" && value !== null && "$index" in value && value.$index === true;
+}
+function isBindStateExpression(value) {
+  return typeof value === "object" && value !== null && "$bindState" in value && typeof value.$bindState === "string";
+}
+function isBindItemExpression(value) {
+  return typeof value === "object" && value !== null && "$bindItem" in value && typeof value.$bindItem === "string";
 }
 function isCondExpression(value) {
   return typeof value === "object" && value !== null && "$cond" in value && "$then" in value && "$else" in value;
 }
+function resolveBindItemPath(itemPath, ctx) {
+  if (ctx.repeatBasePath == null) {
+    console.warn(`$bindItem used outside repeat scope: "${itemPath}"`);
+    return void 0;
+  }
+  if (itemPath === "") return ctx.repeatBasePath;
+  return ctx.repeatBasePath + "/" + itemPath;
+}
 function resolvePropValue(value, ctx) {
   if (value === null || value === void 0) {
     return value;
   }
-  if (isPathExpression(value)) {
-    return getByPath(ctx.stateModel, value.$path);
+  if (isStateExpression(value)) {
+    return getByPath(ctx.stateModel, value.$state);
+  }
+  if (isItemExpression(value)) {
+    if (ctx.repeatItem === void 0) return void 0;
+    return value.$item === "" ? ctx.repeatItem : getByPath(ctx.repeatItem, value.$item);
+  }
+  if (isIndexExpression(value)) {
+    return ctx.repeatIndex;
+  }
+  if (isBindStateExpression(value)) {
+    return getByPath(ctx.stateModel, value.$bindState);
+  }
+  if (isBindItemExpression(value)) {
+    const resolvedPath = resolveBindItemPath(value.$bindItem, ctx);
+    if (resolvedPath === void 0) return void 0;
+    return getByPath(ctx.stateModel, resolvedPath);
   }
   if (isCondExpression(value)) {
     const result = evaluateVisibility(value.$cond, ctx);
@@ -539,6 +788,31 @@ function resolveElementProps(props, ctx) {
   }
   return resolved;
 }
+function resolveBindings(props, ctx) {
+  let bindings;
+  for (const [key, value] of Object.entries(props)) {
+    if (isBindStateExpression(value)) {
+      if (!bindings) bindings = {};
+      bindings[key] = value.$bindState;
+    } else if (isBindItemExpression(value)) {
+      const resolved = resolveBindItemPath(value.$bindItem, ctx);
+      if (resolved !== void 0) {
+        if (!bindings) bindings = {};
+        bindings[key] = resolved;
+      }
+    }
+  }
+  return bindings;
+}
+function resolveActionParam(value, ctx) {
+  if (isItemExpression(value)) {
+    return resolveBindItemPath(value.$item, ctx);
+  }
+  if (isIndexExpression(value)) {
+    return ctx.repeatIndex;
+  }
+  return resolvePropValue(value, ctx);
+}
 
 // src/actions.ts
 import { z as z3 } from "zod";
@@ -591,7 +865,7 @@ function resolveAction(binding, stateModel) {
 }
 function interpolateString(template, stateModel) {
   return template.replace(/\$\{([^}]+)\}/g, (_, path) => {
-    const value = resolveDynamicValue({ path }, stateModel);
+    const value = resolveDynamicValue({ $state: path }, stateModel);
     return String(value ?? "");
   });
 }
@@ -649,14 +923,14 @@ var action = actionBinding;
 // src/validation.ts
 import { z as z4 } from "zod";
 var ValidationCheckSchema = z4.object({
-  fn: z4.string(),
+  type: z4.string(),
   args: z4.record(z4.string(), DynamicValueSchema).optional(),
   message: z4.string()
 });
 var ValidationConfigSchema = z4.object({
   checks: z4.array(ValidationCheckSchema).optional(),
   validateOn: z4.enum(["change", "blur", "submit"]).optional(),
-  enabled: LogicExpressionSchema.optional()
+  enabled: VisibilityConditionSchema.optional()
 });
 var builtInValidationFunctions = {
   /**
@@ -760,19 +1034,19 @@ function runValidationCheck(check2, ctx) {
       resolvedArgs[key] = resolveDynamicValue(argValue, stateModel);
     }
   }
-  const fn = builtInValidationFunctions[check2.fn] ?? customFunctions?.[check2.fn];
-  if (!fn) {
-    console.warn(`Unknown validation function: ${check2.fn}`);
+  const validationFn = builtInValidationFunctions[check2.type] ?? customFunctions?.[check2.type];
+  if (!validationFn) {
+    console.warn(`Unknown validation function: ${check2.type}`);
     return {
-      fn: check2.fn,
+      type: check2.type,
       valid: true,
       // Don't fail on unknown functions
       message: check2.message
     };
   }
-  const valid = fn(value, resolvedArgs);
+  const valid = validationFn(value, resolvedArgs);
   return {
-    fn: check2.fn,
+    type: check2.type,
     valid,
     message: check2.message
   };
@@ -781,9 +1055,8 @@ function runValidation(config, ctx) {
   const checks = [];
   const errors = [];
   if (config.enabled) {
-    const enabled = evaluateLogicExpression(config.enabled, {
-      stateModel: ctx.stateModel,
-      authState: ctx.authState
+    const enabled = evaluateVisibility(config.enabled, {
+      stateModel: ctx.stateModel
     });
     if (!enabled) {
       return { valid: true, errors: [], checks: [] };
@@ -806,45 +1079,45 @@ function runValidation(config, ctx) {
 }
 var check = {
   required: (message = "This field is required") => ({
-    fn: "required",
+    type: "required",
     message
   }),
   email: (message = "Invalid email address") => ({
-    fn: "email",
+    type: "email",
     message
   }),
   minLength: (min, message) => ({
-    fn: "minLength",
+    type: "minLength",
     args: { min },
     message: message ?? `Must be at least ${min} characters`
   }),
   maxLength: (max, message) => ({
-    fn: "maxLength",
+    type: "maxLength",
     args: { max },
     message: message ?? `Must be at most ${max} characters`
   }),
   pattern: (pattern, message = "Invalid format") => ({
-    fn: "pattern",
+    type: "pattern",
     args: { pattern },
     message
   }),
   min: (min, message) => ({
-    fn: "min",
+    type: "min",
     args: { min },
     message: message ?? `Must be at least ${min}`
   }),
   max: (max, message) => ({
-    fn: "max",
+    type: "max",
     args: { max },
     message: message ?? `Must be at most ${max}`
   }),
   url: (message = "Invalid URL") => ({
-    fn: "url",
+    type: "url",
     message
   }),
   matches: (otherPath, message = "Fields must match") => ({
-    fn: "matches",
-    args: { other: { path: otherPath } },
+    type: "matches",
+    args: { other: { $state: otherPath } },
     message
   })
 };
@@ -984,7 +1257,7 @@ function autoFixSpec(spec) {
     fixedElements[key] = fixed;
   }
   return {
-    spec: { root: spec.root, elements: fixedElements },
+    spec: { root: spec.root, elements: fixedElements, state: spec.state },
     fixes
   };
 }
@@ -1168,39 +1441,104 @@ function generatePrompt(catalog, options) {
   }
   const {
     system = "You are a UI generator that outputs JSON.",
-    customRules = []
+    customRules = [],
+    mode = "generate"
   } = options;
   const lines = [];
   lines.push(system);
   lines.push("");
-  lines.push("OUTPUT FORMAT:");
-  lines.push(
-    "Output JSONL (one JSON object per line) with patches to build a UI tree."
-  );
+  if (mode === "chat") {
+    lines.push("OUTPUT FORMAT (text + JSONL, RFC 6902 JSON Patch):");
+    lines.push(
+      "You respond conversationally. When generating UI, first write a brief explanation (1-3 sentences), then output JSONL patch lines wrapped in a ```spec code fence."
+    );
+    lines.push(
+      "The JSONL lines use RFC 6902 JSON Patch operations to build a UI tree. Always wrap them in a ```spec fence block:"
+    );
+    lines.push("  ```spec");
+    lines.push('  {"op":"add","path":"/root","value":"main"}');
+    lines.push(
+      '  {"op":"add","path":"/elements/main","value":{"type":"Card","props":{"title":"Hello"},"children":[]}}'
+    );
+    lines.push("  ```");
+    lines.push(
+      "If the user's message does not require a UI (e.g. a greeting or clarifying question), respond with text only \u2014 no JSONL."
+    );
+  } else {
+    lines.push("OUTPUT FORMAT (JSONL, RFC 6902 JSON Patch):");
+    lines.push(
+      "Output JSONL (one JSON object per line) using RFC 6902 JSON Patch operations to build a UI tree."
+    );
+  }
   lines.push(
-    "Each line is a JSON patch operation. Start with /root, then stream /elements and /state patches interleaved so the UI fills in progressively as it streams."
+    "Each line is a JSON patch operation (add, remove, replace). Start with /root, then stream /elements and /state patches interleaved so the UI fills in progressively as it streams."
   );
   lines.push("");
   lines.push("Example output (each line is a separate JSON object):");
   lines.push("");
-  lines.push(`{"op":"add","path":"/root","value":"blog"}
-{"op":"add","path":"/elements/blog","value":{"type":"Stack","props":{"direction":"vertical","gap":"md"},"children":["heading","posts-grid"]}}
-{"op":"add","path":"/elements/heading","value":{"type":"Heading","props":{"text":"Blog","level":"h1"},"children":[]}}
-{"op":"add","path":"/elements/posts-grid","value":{"type":"Grid","props":{"columns":2,"gap":"md"},"repeat":{"path":"/posts","key":"id"},"children":["post-card"]}}
-{"op":"add","path":"/elements/post-card","value":{"type":"Card","props":{"title":{"$path":"$item/title"}},"children":["post-meta"]}}
-{"op":"add","path":"/elements/post-meta","value":{"type":"Text","props":{"text":{"$path":"$item/author"},"variant":"muted"},"children":[]}}
-{"op":"add","path":"/state/posts","value":[]}
-{"op":"add","path":"/state/posts/0","value":{"id":"1","title":"Getting Started","author":"Jane","date":"Jan 15"}}
-{"op":"add","path":"/state/posts/1","value":{"id":"2","title":"Advanced Tips","author":"Bob","date":"Feb 3"}}
+  const allComponents = catalog.data.components;
+  const cn = catalog.componentNames;
+  const comp1 = cn[0] || "Component";
+  const comp2 = cn.length > 1 ? cn[1] : comp1;
+  const comp1Def = allComponents?.[comp1];
+  const comp2Def = allComponents?.[comp2];
+  const comp1Props = comp1Def ? getExampleProps(comp1Def) : {};
+  const comp2Props = comp2Def ? getExampleProps(comp2Def) : {};
+  const dynamicPropName = comp2Def?.props ? findFirstStringProp(comp2Def.props) : null;
+  const dynamicProps = dynamicPropName ? { ...comp2Props, [dynamicPropName]: { $item: "title" } } : comp2Props;
+  const exampleOutput = [
+    JSON.stringify({ op: "add", path: "/root", value: "main" }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/main",
+      value: {
+        type: comp1,
+        props: comp1Props,
+        children: ["child-1", "list"]
+      }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/child-1",
+      value: { type: comp2, props: comp2Props, children: [] }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/list",
+      value: {
+        type: comp1,
+        props: comp1Props,
+        repeat: { statePath: "/items", key: "id" },
+        children: ["item"]
+      }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/elements/item",
+      value: { type: comp2, props: dynamicProps, children: [] }
+    }),
+    JSON.stringify({ op: "add", path: "/state/items", value: [] }),
+    JSON.stringify({
+      op: "add",
+      path: "/state/items/0",
+      value: { id: "1", title: "First Item" }
+    }),
+    JSON.stringify({
+      op: "add",
+      path: "/state/items/1",
+      value: { id: "2", title: "Second Item" }
+    })
+  ].join("\n");
+  lines.push(`${exampleOutput}
 
-Note: state patches appear right after the elements that use them, so the UI fills in as it streams.`);
+Note: state patches appear right after the elements that use them, so the UI fills in as it streams. ONLY use component types from the AVAILABLE COMPONENTS list below.`);
   lines.push("");
   lines.push("INITIAL STATE:");
   lines.push(
-    "Specs include a /state field to seed the state model. Components with statePath read from and write to this state, and $path expressions read from it."
+    "Specs include a /state field to seed the state model. Components with { $bindState } or { $bindItem } read from and write to this state, and $state expressions read from it."
   );
   lines.push(
-    "CRITICAL: You MUST include state patches whenever your UI displays data via $path expressions, uses repeat to iterate over arrays, or uses statePath bindings. Without state, $path references resolve to nothing and repeat lists render zero items."
+    "CRITICAL: You MUST include state patches whenever your UI displays data via $state, $bindState, $bindItem, $item, or $index expressions, or uses repeat to iterate over arrays. Without state, these references resolve to nothing and repeat lists render zero items."
   );
   lines.push(
     "Output state patches right after the elements that reference them, so the UI fills in progressively as it streams."
@@ -1218,7 +1556,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     '  Initialize the array first if needed: {"op":"add","path":"/state/posts","value":[]}'
   );
   lines.push(
-    'When content comes from the state model, use { "$path": "/some/path" } dynamic props to display it instead of hardcoding the same value in both state and props. The state model is the single source of truth.'
+    'When content comes from the state model, use { "$state": "/some/path" } dynamic props to display it instead of hardcoding the same value in both state and props. The state model is the single source of truth.'
   );
   lines.push(
     "Include realistic sample data in state. For blogs: 3-4 posts with titles, excerpts, authors, dates. For product lists: 3-5 items with names, prices, descriptions. Never leave arrays empty."
@@ -1226,16 +1564,16 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("");
   lines.push("DYNAMIC LISTS (repeat field):");
   lines.push(
-    'Any element can have a top-level "repeat" field to render its children once per item in a state array: { "repeat": { "path": "/arrayPath", "key": "id" } }.'
+    'Any element can have a top-level "repeat" field to render its children once per item in a state array: { "repeat": { "statePath": "/arrayPath", "key": "id" } }.'
   );
   lines.push(
-    'The element itself renders once (as the container), and its children are expanded once per array item. "path" is the state array path. "key" is an optional field name on each item for stable React keys.'
+    'The element itself renders once (as the container), and its children are expanded once per array item. "statePath" is the state array path. "key" is an optional field name on each item for stable React keys.'
   );
   lines.push(
-    'Example: { "type": "Column", "props": { "gap": 8 }, "repeat": { "path": "/todos", "key": "id" }, "children": ["todo-item"] }'
+    `Example: ${JSON.stringify({ type: comp1, props: comp1Props, repeat: { statePath: "/todos", key: "id" }, children: ["todo-item"] })}`
   );
   lines.push(
-    'Inside children of a repeated element, use "$item/field" for per-item paths: statePath:"$item/completed", { "$path": "$item/title" }. Use "$index" for the current array index.'
+    'Inside children of a repeated element, use { "$item": "field" } to read a field from the current item, and { "$index": true } to get the current array index. For two-way binding to an item field use { "$bindItem": "completed" } on the appropriate prop.'
   );
   lines.push(
     "ALWAYS use the repeat field for lists backed by state arrays. NEVER hardcode individual elements for each array item."
@@ -1246,19 +1584,19 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("");
   lines.push("ARRAY STATE ACTIONS:");
   lines.push(
-    'Use action "pushState" to append items to arrays. Params: { path: "/arrayPath", value: { ...item }, clearPath: "/inputPath" }.'
+    'Use action "pushState" to append items to arrays. Params: { statePath: "/arrayPath", value: { ...item }, clearStatePath: "/inputPath" }.'
   );
   lines.push(
-    'Values inside pushState can contain { "path": "/statePath" } references to read current state (e.g. the text from an input field).'
+    'Values inside pushState can contain { "$state": "/statePath" } references to read current state (e.g. the text from an input field).'
   );
   lines.push(
     'Use "$id" inside a pushState value to auto-generate a unique ID.'
   );
   lines.push(
-    'Example: on: { "press": { "action": "pushState", "params": { "path": "/todos", "value": { "id": "$id", "title": { "path": "/newTodoText" }, "completed": false }, "clearPath": "/newTodoText" } } }'
+    'Example: on: { "press": { "action": "pushState", "params": { "statePath": "/todos", "value": { "id": "$id", "title": { "$state": "/newTodoText" }, "completed": false }, "clearStatePath": "/newTodoText" } } }'
   );
   lines.push(
-    `Use action "removeState" to remove items from arrays by index. Params: { path: "/arrayPath", index: N }. Inside a repeated element's children, use "$index" for the current item index.`
+    `Use action "removeState" to remove items from arrays by index. Params: { statePath: "/arrayPath", index: N }. Inside a repeated element's children, use { "$index": true } for the current item index. Action params support the same expressions as props: { "$item": "field" } resolves to the absolute state path, { "$index": true } resolves to the index number, and { "$state": "/path" } reads a value from state.`
   );
   lines.push(
     "For lists where users can add/remove items (todos, carts, etc.), use pushState and removeState instead of hardcoding with setState."
@@ -1268,7 +1606,7 @@ Note: state patches appear right after the elements that use them, so the UI fil
     'IMPORTANT: State paths use RFC 6901 JSON Pointer syntax (e.g. "/todos/0/title"). Do NOT use JavaScript-style dot notation (e.g. "/todos.length" is WRONG). To generate unique IDs for new items, use "$id" instead of trying to read array length.'
   );
   lines.push("");
-  const components = catalog.data.components;
+  const components = allComponents;
   if (components) {
     lines.push(`AVAILABLE COMPONENTS (${catalog.componentNames.length}):`);
     lines.push("");
@@ -1301,11 +1639,11 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("");
   lines.push("Example:");
   lines.push(
-    '  {"type":"Button","props":{"label":"Save"},"on":{"press":{"action":"setState","params":{"path":"/saved","value":true}}},"children":[]}'
+    `  ${JSON.stringify({ type: comp1, props: comp1Props, on: { press: { action: "setState", params: { statePath: "/saved", value: true } } }, children: [] })}`
   );
   lines.push("");
   lines.push(
-    'Action params can use dynamic path references to read from state: { "path": "/statePath" }.'
+    'Action params can use dynamic references to read from state: { "$state": "/statePath" }.'
   );
   lines.push(
     "IMPORTANT: Do NOT put action/actionParams inside props. Always use the `on` field for event bindings."
@@ -1313,62 +1651,141 @@ Note: state patches appear right after the elements that use them, so the UI fil
   lines.push("");
   lines.push("VISIBILITY CONDITIONS:");
   lines.push(
-    "Elements can have an optional `visible` field to conditionally show/hide based on data state. IMPORTANT: `visible` is a top-level field on the element object (sibling of type/props/children), NOT inside props."
+    "Elements can have an optional `visible` field to conditionally show/hide based on state. IMPORTANT: `visible` is a top-level field on the element object (sibling of type/props/children), NOT inside props."
+  );
+  lines.push(
+    `Correct: ${JSON.stringify({ type: comp1, props: comp1Props, visible: { $state: "/activeTab", eq: "home" }, children: ["..."] })}`
+  );
+  lines.push(
+    '- `{ "$state": "/path" }` - visible when state at path is truthy'
+  );
+  lines.push(
+    '- `{ "$state": "/path", "not": true }` - visible when state at path is falsy'
+  );
+  lines.push(
+    '- `{ "$state": "/path", "eq": "value" }` - visible when state equals value'
   );
   lines.push(
-    'Correct: {"type":"Column","props":{"gap":8},"visible":{"eq":[{"path":"/tab"},"home"]},"children":[...]}'
+    '- `{ "$state": "/path", "neq": "value" }` - visible when state does not equal value'
   );
   lines.push(
-    '- `{ "eq": [{ "path": "/statePath" }, "value"] }` - visible when state at path equals value'
+    '- `{ "$state": "/path", "gt": N }` / `gte` / `lt` / `lte` - numeric comparisons'
   );
   lines.push(
-    '- `{ "neq": [{ "path": "/statePath" }, "value"] }` - visible when state at path does not equal value'
+    "- Use ONE operator per condition (eq, neq, gt, gte, lt, lte). Do not combine multiple operators."
   );
-  lines.push('- `{ "path": "/statePath" }` - visible when path is truthy');
+  lines.push('- Any condition can add `"not": true` to invert its result');
   lines.push(
-    '- `{ "and": [...] }`, `{ "or": [...] }`, `{ "not": {...} }` - combine conditions'
+    "- `[condition, condition]` - all conditions must be true (implicit AND)"
+  );
+  lines.push(
+    '- `{ "$and": [condition, condition] }` - explicit AND (use when nesting inside $or)'
+  );
+  lines.push(
+    '- `{ "$or": [condition, condition] }` - at least one must be true (OR)'
   );
   lines.push("- `true` / `false` - always visible/hidden");
   lines.push("");
   lines.push(
-    "Use the Pressable component with on.press bound to setState to update state and drive visibility."
+    "Use a component with on.press bound to setState to update state and drive visibility."
   );
   lines.push(
-    'Example: A Pressable with on: { "press": { "action": "setState", "params": { "path": "/activeTab", "value": "home" } } } sets state, then a container with visible: { "eq": [{ "path": "/activeTab" }, "home"] } shows only when that tab is active.'
+    `Example: A ${comp1} with on: { "press": { "action": "setState", "params": { "statePath": "/activeTab", "value": "home" } } } sets state, then a container with visible: { "$state": "/activeTab", "eq": "home" } shows only when that tab is active.`
+  );
+  lines.push("");
+  lines.push(
+    'For tab patterns where the first/default tab should be visible when no tab is selected yet, use $or to handle both cases: visible: { "$or": [{ "$state": "/activeTab", "eq": "home" }, { "$state": "/activeTab", "not": true }] }. This ensures the first tab is visible both when explicitly selected AND when /activeTab is not yet set.'
   );
   lines.push("");
   lines.push("DYNAMIC PROPS:");
   lines.push(
-    "Any prop value can be a dynamic expression that resolves based on state. Two forms are supported:"
+    "Any prop value can be a dynamic expression that resolves based on state. Three forms are supported:"
   );
   lines.push("");
   lines.push(
-    '1. State binding: `{ "$path": "/statePath" }` - resolves to the value at that state path.'
+    '1. Read-only state: `{ "$state": "/statePath" }` - resolves to the value at that state path (one-way read).'
   );
   lines.push(
-    '   Example: `"color": { "$path": "/theme/primary" }` reads the color from state.'
+    '   Example: `"color": { "$state": "/theme/primary" }` reads the color from state.'
   );
   lines.push("");
   lines.push(
-    '2. Conditional: `{ "$cond": <condition>, "$then": <value>, "$else": <value> }` - evaluates the condition (same syntax as visibility conditions) and picks the matching value.'
+    '2. Two-way binding: `{ "$bindState": "/statePath" }` - resolves to the value at the state path AND enables write-back. Use on form input props (value, checked, pressed, etc.).'
+  );
+  lines.push(
+    '   Example: `"value": { "$bindState": "/form/email" }` binds the input value to /form/email.'
+  );
+  lines.push(
+    '   Inside repeat scopes: `"checked": { "$bindItem": "completed" }` binds to the current item\'s completed field.'
   );
+  lines.push("");
   lines.push(
-    '   Example: `"color": { "$cond": { "eq": [{ "path": "/activeTab" }, "home"] }, "$then": "#007AFF", "$else": "#8E8E93" }`'
+    '3. Conditional: `{ "$cond": <condition>, "$then": <value>, "$else": <value> }` - evaluates the condition (same syntax as visibility conditions) and picks the matching value.'
   );
   lines.push(
-    '   Example: `"name": { "$cond": { "eq": [{ "path": "/activeTab" }, "home"] }, "$then": "home", "$else": "home-outline" }`'
+    '   Example: `"color": { "$cond": { "$state": "/activeTab", "eq": "home" }, "$then": "#007AFF", "$else": "#8E8E93" }`'
   );
   lines.push("");
   lines.push(
-    "Use dynamic props instead of duplicating elements with opposing visible conditions when only prop values differ."
+    "Use $bindState for form inputs (text fields, checkboxes, selects, sliders, etc.) and $state for read-only data display. Inside repeat scopes, use $bindItem for form inputs bound to the current item. Use dynamic props instead of duplicating elements with opposing visible conditions when only prop values differ."
   );
   lines.push("");
+  const hasChecksComponents = allComponents ? Object.entries(allComponents).some(([, def]) => {
+    if (!def.props) return false;
+    const formatted = formatZodType(def.props);
+    return formatted.includes("checks");
+  }) : false;
+  if (hasChecksComponents) {
+    lines.push("VALIDATION:");
+    lines.push(
+      "Form components that accept a `checks` prop support client-side validation."
+    );
+    lines.push(
+      'Each check is an object: { "type": "<name>", "message": "...", "args": { ... } }'
+    );
+    lines.push("");
+    lines.push("Built-in validation types:");
+    lines.push("  - required \u2014 value must be non-empty");
+    lines.push("  - email \u2014 valid email format");
+    lines.push('  - minLength \u2014 minimum string length (args: { "min": N })');
+    lines.push('  - maxLength \u2014 maximum string length (args: { "max": N })');
+    lines.push('  - pattern \u2014 match a regex (args: { "pattern": "regex" })');
+    lines.push('  - min \u2014 minimum numeric value (args: { "min": N })');
+    lines.push('  - max \u2014 maximum numeric value (args: { "max": N })');
+    lines.push("  - numeric \u2014 value must be a number");
+    lines.push("  - url \u2014 valid URL format");
+    lines.push(
+      '  - matches \u2014 must equal another field (args: { "other": "value" })'
+    );
+    lines.push("");
+    lines.push("Example:");
+    lines.push(
+      '  "checks": [{ "type": "required", "message": "Email is required" }, { "type": "email", "message": "Invalid email" }]'
+    );
+    lines.push("");
+    lines.push(
+      "IMPORTANT: When using checks, the component must also have a { $bindState } or { $bindItem } on its value/checked prop for two-way binding."
+    );
+    lines.push(
+      "Always include validation checks on form inputs for a good user experience (e.g. required, email, minLength)."
+    );
+    lines.push("");
+  }
   lines.push("RULES:");
-  const baseRules = [
+  const baseRules = mode === "chat" ? [
+    "When generating UI, wrap all JSONL patches in a ```spec code fence - one JSON object per line inside the fence",
+    "Write a brief conversational response before any JSONL output",
+    'First set root: {"op":"add","path":"/root","value":"<root-key>"}',
+    'Then add each element: {"op":"add","path":"/elements/<key>","value":{...}}',
+    "Output /state patches right after the elements that use them, one per array item for progressive loading. REQUIRED whenever using $state, $bindState, $bindItem, $item, $index, or repeat.",
+    "ONLY use components listed above",
+    "Each element value needs: type, props, children (array of child keys)",
+    "Use unique keys for the element map entries (e.g., 'header', 'metric-1', 'chart-revenue')"
+  ] : [
     "Output ONLY JSONL patches - one JSON object per line, no markdown, no code fences",
     'First set root: {"op":"add","path":"/root","value":"<root-key>"}',
     'Then add each element: {"op":"add","path":"/elements/<key>","value":{...}}',
-    "Output /state patches right after the elements that use them, one per array item for progressive loading. REQUIRED whenever using $path, repeat, or statePath.",
+    "Output /state patches right after the elements that use them, one per array item for progressive loading. REQUIRED whenever using $state, $bindState, $bindItem, $item, $index, or repeat.",
     "ONLY use components listed above",
     "Each element value needs: type, props, children (array of child keys)",
     "Use unique keys for the element map entries (e.g., 'header', 'metric-1', 'chart-revenue')"
@@ -1380,6 +1797,101 @@ Note: state patches appear right after the elements that use them, so the UI fil
   });
   return lines.join("\n");
 }
+function getExampleProps(def) {
+  if (def.example && Object.keys(def.example).length > 0) {
+    return def.example;
+  }
+  if (def.props) {
+    return generateExamplePropsFromZod(def.props);
+  }
+  return {};
+}
+function generateExamplePropsFromZod(schema) {
+  if (!schema || !schema._def) return {};
+  const def = schema._def;
+  const typeName = getZodTypeName(schema);
+  if (typeName !== "ZodObject" && typeName !== "object") return {};
+  const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+  if (!shape) return {};
+  const result = {};
+  for (const [key, value] of Object.entries(shape)) {
+    const innerTypeName = getZodTypeName(value);
+    if (innerTypeName === "ZodOptional" || innerTypeName === "optional" || innerTypeName === "ZodNullable" || innerTypeName === "nullable") {
+      continue;
+    }
+    result[key] = generateExampleValue(value);
+  }
+  return result;
+}
+function generateExampleValue(schema) {
+  if (!schema || !schema._def) return "...";
+  const def = schema._def;
+  const typeName = getZodTypeName(schema);
+  switch (typeName) {
+    case "ZodString":
+    case "string":
+      return "example";
+    case "ZodNumber":
+    case "number":
+      return 0;
+    case "ZodBoolean":
+    case "boolean":
+      return true;
+    case "ZodLiteral":
+    case "literal":
+      return def.value;
+    case "ZodEnum":
+    case "enum": {
+      if (Array.isArray(def.values) && def.values.length > 0)
+        return def.values[0];
+      if (def.entries && typeof def.entries === "object") {
+        const values = Object.values(def.entries);
+        return values.length > 0 ? values[0] : "example";
+      }
+      return "example";
+    }
+    case "ZodOptional":
+    case "optional":
+    case "ZodNullable":
+    case "nullable":
+    case "ZodDefault":
+    case "default": {
+      const inner = def.innerType ?? def.wrapped;
+      return inner ? generateExampleValue(inner) : null;
+    }
+    case "ZodArray":
+    case "array":
+      return [];
+    case "ZodObject":
+    case "object":
+      return generateExamplePropsFromZod(schema);
+    case "ZodUnion":
+    case "union": {
+      const options = def.options;
+      return options && options.length > 0 ? generateExampleValue(options[0]) : "...";
+    }
+    default:
+      return "...";
+  }
+}
+function findFirstStringProp(schema) {
+  if (!schema || !schema._def) return null;
+  const def = schema._def;
+  const typeName = getZodTypeName(schema);
+  if (typeName !== "ZodObject" && typeName !== "object") return null;
+  const shape = typeof def.shape === "function" ? def.shape() : def.shape;
+  if (!shape) return null;
+  for (const [key, value] of Object.entries(shape)) {
+    const innerTypeName = getZodTypeName(value);
+    if (innerTypeName === "ZodOptional" || innerTypeName === "optional" || innerTypeName === "ZodNullable" || innerTypeName === "nullable") {
+      continue;
+    }
+    if (innerTypeName === "ZodString" || innerTypeName === "string") {
+      return key;
+    }
+  }
+  return null;
+}
 function getZodTypeName(schema) {
   if (!schema || !schema._def) return "";
   const def = schema._def;
@@ -1561,285 +2073,6 @@ Remember: Output /root first, then interleave /elements and /state patches so th
   );
   return parts.join("\n");
 }
-
-// src/catalog.ts
-import { z as z6 } from "zod";
-function createCatalog(config) {
-  const {
-    name = "unnamed",
-    components,
-    actions = {},
-    functions = {},
-    validation = "strict"
-  } = config;
-  const componentNames = Object.keys(components);
-  const actionNames = Object.keys(actions);
-  const functionNames = Object.keys(functions);
-  const componentSchemas = componentNames.map((componentName) => {
-    const def = components[componentName];
-    return z6.object({
-      type: z6.literal(componentName),
-      props: def.props,
-      children: z6.array(z6.string()).optional(),
-      visible: VisibilityConditionSchema.optional()
-    });
-  });
-  let elementSchema;
-  if (componentSchemas.length === 0) {
-    elementSchema = z6.object({
-      type: z6.string(),
-      props: z6.record(z6.string(), z6.unknown()),
-      children: z6.array(z6.string()).optional(),
-      visible: VisibilityConditionSchema.optional()
-    });
-  } else if (componentSchemas.length === 1) {
-    elementSchema = componentSchemas[0];
-  } else {
-    elementSchema = z6.discriminatedUnion("type", [
-      componentSchemas[0],
-      componentSchemas[1],
-      ...componentSchemas.slice(2)
-    ]);
-  }
-  const specSchema = z6.object({
-    root: z6.string(),
-    elements: z6.record(z6.string(), elementSchema)
-  });
-  return {
-    name,
-    componentNames,
-    actionNames,
-    functionNames,
-    validation,
-    components,
-    actions,
-    functions,
-    elementSchema,
-    specSchema,
-    hasComponent(type) {
-      return type in components;
-    },
-    hasAction(name2) {
-      return name2 in actions;
-    },
-    hasFunction(name2) {
-      return name2 in functions;
-    },
-    validateElement(element) {
-      const result = elementSchema.safeParse(element);
-      if (result.success) {
-        return { success: true, data: result.data };
-      }
-      return { success: false, error: result.error };
-    },
-    validateSpec(spec) {
-      const result = specSchema.safeParse(spec);
-      if (result.success) {
-        return { success: true, data: result.data };
-      }
-      return { success: false, error: result.error };
-    }
-  };
-}
-function generateCatalogPrompt(catalog) {
-  const lines = [
-    `# ${catalog.name} Component Catalog`,
-    "",
-    "## Available Components",
-    ""
-  ];
-  for (const name of catalog.componentNames) {
-    const def = catalog.components[name];
-    lines.push(`### ${String(name)}`);
-    if (def.description) {
-      lines.push(def.description);
-    }
-    lines.push("");
-  }
-  if (catalog.actionNames.length > 0) {
-    lines.push("## Available Actions");
-    lines.push("");
-    for (const name of catalog.actionNames) {
-      const def = catalog.actions[name];
-      lines.push(
-        `- \`${String(name)}\`${def.description ? `: ${def.description}` : ""}`
-      );
-    }
-    lines.push("");
-  }
-  lines.push("## Visibility Conditions");
-  lines.push("");
-  lines.push("Components can have a `visible` property:");
-  lines.push("- `true` / `false` - Always visible/hidden");
-  lines.push('- `{ "path": "/state/path" }` - Visible when path is truthy');
-  lines.push('- `{ "auth": "signedIn" }` - Visible when user is signed in');
-  lines.push('- `{ "and": [...] }` - All conditions must be true');
-  lines.push('- `{ "or": [...] }` - Any condition must be true');
-  lines.push('- `{ "not": {...} }` - Negates a condition');
-  lines.push('- `{ "eq": [a, b] }` - Equality check');
-  lines.push("");
-  lines.push("## Validation Functions");
-  lines.push("");
-  lines.push(
-    "Built-in: `required`, `email`, `minLength`, `maxLength`, `pattern`, `min`, `max`, `url`"
-  );
-  if (catalog.functionNames.length > 0) {
-    lines.push(`Custom: ${catalog.functionNames.map(String).join(", ")}`);
-  }
-  lines.push("");
-  return lines.join("\n");
-}
-function formatZodType2(schema, isOptional = false) {
-  const def = schema._def;
-  const typeName = def.typeName ?? "";
-  let result;
-  switch (typeName) {
-    case "ZodString":
-      result = "string";
-      break;
-    case "ZodNumber":
-      result = "number";
-      break;
-    case "ZodBoolean":
-      result = "boolean";
-      break;
-    case "ZodLiteral":
-      result = JSON.stringify(def.value);
-      break;
-    case "ZodEnum":
-      result = def.values.map((v) => `"${v}"`).join("|");
-      break;
-    case "ZodNativeEnum":
-      result = Object.values(def.values).map((v) => `"${v}"`).join("|");
-      break;
-    case "ZodArray":
-      result = def.type ? `Array<${formatZodType2(def.type)}>` : "Array<unknown>";
-      break;
-    case "ZodObject": {
-      if (!def.shape) {
-        result = "object";
-        break;
-      }
-      const shape = def.shape();
-      const props = Object.entries(shape).map(([key, value]) => {
-        const innerDef = value._def;
-        const innerOptional = innerDef.typeName === "ZodOptional" || innerDef.typeName === "ZodNullable";
-        return `${key}${innerOptional ? "?" : ""}: ${formatZodType2(value)}`;
-      }).join(", ");
-      result = `{ ${props} }`;
-      break;
-    }
-    case "ZodOptional":
-      return def.innerType ? formatZodType2(def.innerType, true) : "unknown?";
-    case "ZodNullable":
-      return def.innerType ? formatZodType2(def.innerType, true) : "unknown?";
-    case "ZodDefault":
-      return def.innerType ? formatZodType2(def.innerType, isOptional) : "unknown";
-    case "ZodUnion":
-      result = def.options ? def.options.map((opt) => formatZodType2(opt)).join("|") : "unknown";
-      break;
-    case "ZodNull":
-      result = "null";
-      break;
-    case "ZodUndefined":
-      result = "undefined";
-      break;
-    case "ZodAny":
-      result = "any";
-      break;
-    case "ZodUnknown":
-      result = "unknown";
-      break;
-    default:
-      result = "unknown";
-  }
-  return isOptional ? `${result}?` : result;
-}
-function extractPropsFromSchema(schema) {
-  const def = schema._def;
-  const typeName = def.typeName ?? "";
-  if (typeName !== "ZodObject" || !def.shape) {
-    return [];
-  }
-  const shape = def.shape();
-  return Object.entries(shape).map(([name, value]) => {
-    const innerDef = value._def;
-    const optional = innerDef.typeName === "ZodOptional" || innerDef.typeName === "ZodNullable";
-    return {
-      name,
-      type: formatZodType2(value),
-      optional
-    };
-  });
-}
-function formatPropsCompact(props) {
-  if (props.length === 0) return "{}";
-  const entries = props.map(
-    (p) => `${p.name}${p.optional ? "?" : ""}: ${p.type}`
-  );
-  return `{ ${entries.join(", ")} }`;
-}
-function generateSystemPrompt(catalog, options = {}) {
-  const {
-    system = "You are a UI generator that outputs JSONL (JSON Lines) patches.",
-    customRules = []
-  } = options;
-  const lines = [];
-  lines.push(system);
-  lines.push("");
-  const componentCount = catalog.componentNames.length;
-  lines.push(`AVAILABLE COMPONENTS (${componentCount}):`);
-  lines.push("");
-  for (const name of catalog.componentNames) {
-    const def = catalog.components[name];
-    const props = extractPropsFromSchema(def.props);
-    const propsStr = formatPropsCompact(props);
-    const hasChildrenStr = def.hasChildren ? " Has children." : "";
-    const descStr = def.description ? ` ${def.description}` : "";
-    lines.push(`- ${String(name)}: ${propsStr}${descStr}${hasChildrenStr}`);
-  }
-  lines.push("");
-  if (catalog.actionNames.length > 0) {
-    lines.push("AVAILABLE ACTIONS:");
-    lines.push("");
-    for (const name of catalog.actionNames) {
-      const def = catalog.actions[name];
-      lines.push(
-        `- ${String(name)}${def.description ? `: ${def.description}` : ""}`
-      );
-    }
-    lines.push("");
-  }
-  lines.push("OUTPUT FORMAT (JSONL, RFC 6902 JSON Patch):");
-  lines.push('{"op":"add","path":"/root","value":"element-key"}');
-  lines.push(
-    '{"op":"add","path":"/elements/key","value":{"type":"...","props":{...},"children":[...]}}'
-  );
-  lines.push('{"op":"remove","path":"/elements/key"}');
-  lines.push("");
-  lines.push("RULES:");
-  const baseRules = [
-    'First line sets /root to root element key: {"op":"add","path":"/root","value":"<key>"}',
-    'Add elements with /elements/{key}: {"op":"add","path":"/elements/<key>","value":{...}}',
-    "Remove elements with op:remove - also update the parent's children array to exclude the removed key",
-    "Children array contains string keys, not objects",
-    "Parent first, then children",
-    "Each element needs: type, props",
-    "ONLY use props listed above - never invent new props"
-  ];
-  const allRules = [...baseRules, ...customRules];
-  allRules.forEach((rule, i) => {
-    lines.push(`${i + 1}. ${rule}`);
-  });
-  lines.push("");
-  if (catalog.functionNames.length > 0) {
-    lines.push("CUSTOM VALIDATION FUNCTIONS:");
-    lines.push(catalog.functionNames.map(String).join(", "));
-    lines.push("");
-  }
-  lines.push("Generate JSONL:");
-  return lines.join("\n");
-}
 export {
   ActionBindingSchema,
   ActionConfirmSchema,
@@ -1850,35 +2083,39 @@ export {
   DynamicNumberSchema,
   DynamicStringSchema,
   DynamicValueSchema,
-  LogicExpressionSchema,
+  SPEC_DATA_PART,
+  SPEC_DATA_PART_TYPE,
   ValidationCheckSchema,
   ValidationConfigSchema,
   VisibilityConditionSchema,
   action,
   actionBinding,
   addByPath,
+  applySpecPatch,
   applySpecStreamPatch,
   autoFixSpec,
   buildUserPrompt,
   builtInValidationFunctions,
   check,
   compileSpecStream,
-  createCatalog,
+  createJsonRenderTransform,
+  createMixedStreamParser,
   createSpecStreamCompiler,
   defineCatalog,
   defineSchema,
-  evaluateLogicExpression,
   evaluateVisibility,
   executeAction,
   findFormValue,
   formatSpecIssues,
-  generateCatalogPrompt,
-  generateSystemPrompt,
   getByPath,
   interpolateString,
+  nestedToFlat,
   parseSpecStreamLine,
+  pipeJsonRender,
   removeByPath,
   resolveAction,
+  resolveActionParam,
+  resolveBindings,
   resolveDynamicValue,
   resolveElementProps,
   resolvePropValue,