@almadar/ui 4.28.0 → 4.29.1

package/dist/avl/index.cjs

@@ -29334,6 +29334,8 @@ var init_Form = __esm({
       const [collapsedSections, setCollapsedSections] = React118__namespace.default.useState(
         /* @__PURE__ */ new Set()
       );
+      const [submitError, setSubmitError] = React118__namespace.default.useState(null);
+      const formRef = React118__namespace.default.useRef(null);
       const formMode = props.mode;
       const mountedRef = React118__namespace.default.useRef(false);
       if (!mountedRef.current) {
@@ -29459,6 +29461,7 @@ var init_Form = __esm({
       };
       const handleSubmit = (e) => {
         e.preventDefault();
+        setSubmitError(null);
         debug("forms", "submit-enter", {
           mode: formMode,
           submitEvent,
@@ -29476,6 +29479,37 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onSubmit}`, payload);
         }
       };
+      const handleInvalid = (e) => {
+        const target = e.target;
+        const fieldName = target.getAttribute("data-field-name") ?? target.name ?? "";
+        const fieldMessage = target.validationMessage || "Invalid value";
+        debug("forms", "invalid", { mode: formMode, fieldName, fieldMessage });
+        queueMicrotask(() => {
+          const form = formRef.current;
+          if (!form) return;
+          const invalidEls = Array.from(
+            form.querySelectorAll(
+              ":invalid"
+            )
+          );
+          if (invalidEls.length === 0) return;
+          const missing = invalidEls.map(
+            (el) => el.getAttribute("data-field-name") ?? el.name ?? ""
+          );
+          const messages = invalidEls.map((el) => ({
+            field: el.getAttribute("data-field-name") ?? el.name ?? "",
+            message: el.validationMessage
+          }));
+          const summary = missing.length === 1 ? `${missing[0]}: ${messages[0]?.message}` : `Please fix ${missing.length} fields: ${missing.join(", ")}`;
+          setSubmitError(summary);
+          eventBus.emit("UI:VALIDATION_FAILED", {
+            submitEvent,
+            missing,
+            messages,
+            summary
+          });
+        });
+      };
       const handleCancel = () => {
         eventBus.emit(`UI:${cancelEvent}`);
         eventBus.emit("UI:CLOSE");
@@ -29579,7 +29613,8 @@ var init_Form = __esm({
           "data-field-name": fieldName,
           required: field.required,
           disabled: isLoading,
-          placeholder: field.placeholder
+          placeholder: field.placeholder,
+          pattern: field.pattern
         };
         switch (inputType) {
           case "checkbox":
@@ -29675,7 +29710,9 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "email",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName, e.target.value),
+                minLength: field.min,
+                maxLength: field.max
               }
             );
           case "url":
@@ -29685,7 +29722,9 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "url",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName, e.target.value),
+                minLength: field.min,
+                maxLength: field.max
               }
             );
           case "password":
@@ -29695,7 +29734,9 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "password",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName, e.target.value),
+                minLength: field.min,
+                maxLength: field.max
               }
             );
           case "text":
@@ -29708,8 +29749,7 @@ var init_Form = __esm({
                 value: String(currentValue),
                 onChange: (e) => handleChange(fieldName, e.target.value),
                 minLength: field.min,
-                maxLength: field.max,
-                pattern: field.pattern
+                maxLength: field.max
               }
             );
         }
@@ -29717,12 +29757,14 @@ var init_Form = __esm({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "form",
         {
-          noValidate: true,
+          ref: formRef,
           "data-pattern": "form-section",
           className: cn(layoutStyles[layout], gapStyles8[gap], className),
           onSubmit: handleSubmit,
+          onInvalid: handleInvalid,
           ...props,
           children: [
+            submitError && /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "error", className: "mb-4", children: submitError }),
             error && /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "error", className: "mb-4", children: error.message || t("error.occurred") }),
             sectionElements && sectionElements.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: gap === "sm" ? "sm" : gap === "lg" ? "lg" : "md", children: sectionElements }),
             schemaFields,
@@ -49603,6 +49645,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     }
     console.log("[TraitStateMachine] Subscribing to events:", Array.from(allEvents));
     const unsubscribes = [];
+    const subscribedBusKeys = /* @__PURE__ */ new Set();
     for (const binding of traitBindings) {
       const traitName = binding.trait.name;
       const orbitalName = orbitalsByTrait?.[traitName];
@@ -49613,6 +49656,8 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           continue;
         }
         const selfBusKey = `UI:${orbitalName}.${traitName}.${eventKey}`;
+        if (subscribedBusKeys.has(selfBusKey)) continue;
+        subscribedBusKeys.add(selfBusKey);
         crossTraitLog.debug("self:subscribe", { traitName, busKey: selfBusKey, eventKey });
         const unsub = eventBus.on(selfBusKey, (event) => {
           if (event.source && event.source.dispatched) {
@@ -50433,6 +50478,11 @@ function formatPayloadTooltip(fields) {
   );
   return `{ ${parts.join(", ")} }`;
 }
+function entityNameOf(ref) {
+  if (!ref) return void 0;
+  if (typeof ref === "string") return ref;
+  return "name" in ref ? ref.name : void 0;
+}
 var ScreenSizeContext = React118.createContext("tablet");
 var PatternSelectionContext = React118.createContext({ selected: null, select: () => {
 } });
@@ -50473,19 +50523,116 @@ function buildOrbitalSchema(fullSchema, orbitalName) {
   if (!orbital) return fullSchema;
   return { ...fullSchema, name: `${fullSchema.name}__${orbitalName}`, orbitals: [orbital] };
 }
-function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEvent, fromState, toState) {
+function generateMockPayload(payloadSchema, schema, linkedEntity, mockData) {
+  const payload = {};
+  if (!payloadSchema || payloadSchema.length === 0) return payload;
+  const entityNames = /* @__PURE__ */ new Set();
+  for (const orb of schema.orbitals ?? []) {
+    const name = entityNameOf(orb.entity);
+    if (name) entityNames.add(name);
+  }
+  const linkedRows = linkedEntity ? mockData?.[linkedEntity] ?? [] : [];
+  const linkedFirstRow = linkedRows[0];
+  const valueForType = (rawType, entityType) => {
+    const type = rawType.replace(/!$/, "").trim();
+    const arrayMatch = /^\[\s*(\w+)\s*\]$/.exec(type);
+    if (arrayMatch) {
+      return mockData?.[arrayMatch[1]] ?? linkedRows;
+    }
+    if (type === "array") return linkedRows;
+    if (type === "entity") {
+      const target = entityType && mockData?.[entityType] ? entityType : linkedEntity;
+      return (target && mockData?.[target]?.[0]) ?? linkedFirstRow ?? {};
+    }
+    if (entityNames.has(type)) {
+      return mockData?.[type]?.[0] ?? linkedFirstRow ?? {};
+    }
+    switch (type) {
+      case "string":
+        return "Sample";
+      case "number":
+        return 1;
+      case "boolean":
+        return false;
+      case "object":
+        return {};
+      case "date":
+      case "datetime":
+      case "timestamp":
+        return (/* @__PURE__ */ new Date()).toISOString();
+      default:
+        return void 0;
+    }
+  };
+  const setByPath = (target, path, value) => {
+    const parts = path.split(".");
+    let cur = target;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const k = parts[i];
+      const next = cur[k];
+      if (next === null || typeof next !== "object" || Array.isArray(next)) {
+        cur[k] = {};
+      }
+      cur = cur[k];
+    }
+    cur[parts[parts.length - 1]] = value;
+  };
+  for (const field of payloadSchema) {
+    let value = valueForType(field.type, field.entityType);
+    if (linkedFirstRow !== void 0 && field.name.includes(".") && (typeof value === "string" || typeof value === "number" || typeof value === "boolean")) {
+      const tail = field.name.split(".").pop();
+      const fromRow = linkedFirstRow[tail];
+      if (fromRow !== void 0) value = fromRow;
+    }
+    setByPath(payload, field.name, value);
+  }
+  return payload;
+}
+function substitutePayloadBindings(effects, payload) {
+  const isPayloadObject = (v) => v !== null && typeof v === "object" && !Array.isArray(v) && !(v instanceof Date);
+  const getByPath = (path) => {
+    let cur = payload;
+    for (const k of path.split(".")) {
+      if (!isPayloadObject(cur)) return void 0;
+      cur = cur[k];
+    }
+    return cur;
+  };
+  const replaceValue = (v) => {
+    if (typeof v === "string" && v.startsWith("@payload.")) {
+      const resolved = getByPath(v.slice("@payload.".length));
+      return resolved === void 0 ? v : resolved;
+    }
+    if (Array.isArray(v)) return v.map(replaceValue);
+    if (v && typeof v === "object" && !(v instanceof Date)) {
+      const out = {};
+      for (const [k, inner] of Object.entries(v)) {
+        out[k] = replaceValue(inner);
+      }
+      return out;
+    }
+    return v;
+  };
+  const tree = JSON.parse(JSON.stringify(effects));
+  const substituted = replaceValue(tree);
+  return substituted;
+}
+function findEmitContract(trait, event) {
+  return trait.emits?.find((e) => e.event === event);
+}
+function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEvent, fromState, toState, mockData) {
   const orbital = (fullSchema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return fullSchema;
   const clonedOrbital = JSON.parse(JSON.stringify(orbital));
   const traits2 = clonedOrbital.traits ?? [];
   for (let ti = 0; ti < traits2.length; ti++) {
     const trait = traits2[ti];
-    if (typeof trait === "string" || !("stateMachine" in trait)) continue;
+    if (!core.isInlineTrait(trait)) continue;
     const traitObj = trait;
     if (traitObj.name !== traitName) continue;
     const sm = traitObj.stateMachine;
     if (!sm) continue;
-    const allTransitions = sm.transitions;
+    const allTransitions = sm.transitions ?? [];
     const targetTransition = fromState && toState ? allTransitions.find((t) => t.event === transitionEvent && t.from === fromState && t.to === toState) ?? allTransitions.find((t) => t.event === transitionEvent) : allTransitions.find((t) => t.event === transitionEvent);
     if (!targetTransition?.effects) continue;
     const renderUIEffects = [];
@@ -50495,14 +50642,22 @@ function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEve
       }
     }
     if (renderUIEffects.length === 0) continue;
-    const rewrittenSm = {
+    const linkedEntity = traitObj.linkedEntity ?? entityNameOf(clonedOrbital.entity);
+    const emitContract = findEmitContract(traitObj, transitionEvent);
+    const mockPayload = generateMockPayload(
+      emitContract?.payloadSchema,
+      fullSchema,
+      linkedEntity,
+      mockData
+    );
+    const seededEffects = substitutePayloadBindings(renderUIEffects, mockPayload);
+    traitObj.stateMachine = {
       states: [{ name: "preview", isInitial: true }],
       events: [{ key: "INIT", name: "INIT" }],
-      transitions: [{ from: "preview", to: "preview", event: "INIT", effects: renderUIEffects }]
+      transitions: [{ from: "preview", to: "preview", event: "INIT", effects: seededEffects }]
     };
-    traits2[ti].stateMachine = rewrittenSm;
-    traits2[ti].emits = [];
-    traits2[ti].listens = [];
+    traitObj.emits = [];
+    traitObj.listens = [];
     break;
   }
   const targetTrait = traits2.find((t) => {
@@ -50568,11 +50723,12 @@ var OrbPreviewNodeInner = (props) => {
         data.traitName,
         data.transitionEvent,
         data.fromState,
-        data.toState
+        data.toState,
+        data._mockData
       );
     }
     return buildOrbitalSchema(fullSchema, data.orbitalName);
-  }, [data._fullSchema, data.orbitalName, data.traitName, data.transitionEvent, data.fromState, data.toState, isExpanded]);
+  }, [data._fullSchema, data._mockData, data.orbitalName, data.traitName, data.transitionEvent, data.fromState, data.toState, isExpanded]);
   const handleContentClick = React118.useCallback((e) => {
     e.stopPropagation();
     const target = e.target;

package/dist/avl/index.js

@@ -30,7 +30,7 @@ import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff.js'
 import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js';
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
-import { FieldTypeSchema, isEntityCall, schemaToIR, getPage, isCircuitEvent, isInlineTrait } from '@almadar/core';
+import { FieldTypeSchema, isInlineTrait, isEntityCall, schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
@@ -29288,6 +29288,8 @@ var init_Form = __esm({
       const [collapsedSections, setCollapsedSections] = React118__default.useState(
         /* @__PURE__ */ new Set()
       );
+      const [submitError, setSubmitError] = React118__default.useState(null);
+      const formRef = React118__default.useRef(null);
       const formMode = props.mode;
       const mountedRef = React118__default.useRef(false);
       if (!mountedRef.current) {
@@ -29413,6 +29415,7 @@ var init_Form = __esm({
       };
       const handleSubmit = (e) => {
         e.preventDefault();
+        setSubmitError(null);
         debug("forms", "submit-enter", {
           mode: formMode,
           submitEvent,
@@ -29430,6 +29433,37 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onSubmit}`, payload);
         }
       };
+      const handleInvalid = (e) => {
+        const target = e.target;
+        const fieldName = target.getAttribute("data-field-name") ?? target.name ?? "";
+        const fieldMessage = target.validationMessage || "Invalid value";
+        debug("forms", "invalid", { mode: formMode, fieldName, fieldMessage });
+        queueMicrotask(() => {
+          const form = formRef.current;
+          if (!form) return;
+          const invalidEls = Array.from(
+            form.querySelectorAll(
+              ":invalid"
+            )
+          );
+          if (invalidEls.length === 0) return;
+          const missing = invalidEls.map(
+            (el) => el.getAttribute("data-field-name") ?? el.name ?? ""
+          );
+          const messages = invalidEls.map((el) => ({
+            field: el.getAttribute("data-field-name") ?? el.name ?? "",
+            message: el.validationMessage
+          }));
+          const summary = missing.length === 1 ? `${missing[0]}: ${messages[0]?.message}` : `Please fix ${missing.length} fields: ${missing.join(", ")}`;
+          setSubmitError(summary);
+          eventBus.emit("UI:VALIDATION_FAILED", {
+            submitEvent,
+            missing,
+            messages,
+            summary
+          });
+        });
+      };
       const handleCancel = () => {
         eventBus.emit(`UI:${cancelEvent}`);
         eventBus.emit("UI:CLOSE");
@@ -29533,7 +29567,8 @@ var init_Form = __esm({
           "data-field-name": fieldName,
           required: field.required,
           disabled: isLoading,
-          placeholder: field.placeholder
+          placeholder: field.placeholder,
+          pattern: field.pattern
         };
         switch (inputType) {
           case "checkbox":
@@ -29629,7 +29664,9 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "email",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName, e.target.value),
+                minLength: field.min,
+                maxLength: field.max
               }
             );
           case "url":
@@ -29639,7 +29676,9 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "url",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName, e.target.value),
+                minLength: field.min,
+                maxLength: field.max
               }
             );
           case "password":
@@ -29649,7 +29688,9 @@ var init_Form = __esm({
                 ...commonProps,
                 type: "password",
                 value: String(currentValue),
-                onChange: (e) => handleChange(fieldName, e.target.value)
+                onChange: (e) => handleChange(fieldName, e.target.value),
+                minLength: field.min,
+                maxLength: field.max
               }
             );
           case "text":
@@ -29662,8 +29703,7 @@ var init_Form = __esm({
                 value: String(currentValue),
                 onChange: (e) => handleChange(fieldName, e.target.value),
                 minLength: field.min,
-                maxLength: field.max,
-                pattern: field.pattern
+                maxLength: field.max
               }
             );
         }
@@ -29671,12 +29711,14 @@ var init_Form = __esm({
       return /* @__PURE__ */ jsxs(
         "form",
         {
-          noValidate: true,
+          ref: formRef,
           "data-pattern": "form-section",
           className: cn(layoutStyles[layout], gapStyles8[gap], className),
           onSubmit: handleSubmit,
+          onInvalid: handleInvalid,
           ...props,
           children: [
+            submitError && /* @__PURE__ */ jsx(Alert, { variant: "error", className: "mb-4", children: submitError }),
             error && /* @__PURE__ */ jsx(Alert, { variant: "error", className: "mb-4", children: error.message || t("error.occurred") }),
             sectionElements && sectionElements.length > 0 && /* @__PURE__ */ jsx(VStack, { gap: gap === "sm" ? "sm" : gap === "lg" ? "lg" : "md", children: sectionElements }),
             schemaFields,
@@ -49557,6 +49599,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     }
     console.log("[TraitStateMachine] Subscribing to events:", Array.from(allEvents));
     const unsubscribes = [];
+    const subscribedBusKeys = /* @__PURE__ */ new Set();
     for (const binding of traitBindings) {
       const traitName = binding.trait.name;
       const orbitalName = orbitalsByTrait?.[traitName];
@@ -49567,6 +49610,8 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           continue;
         }
         const selfBusKey = `UI:${orbitalName}.${traitName}.${eventKey}`;
+        if (subscribedBusKeys.has(selfBusKey)) continue;
+        subscribedBusKeys.add(selfBusKey);
         crossTraitLog.debug("self:subscribe", { traitName, busKey: selfBusKey, eventKey });
         const unsub = eventBus.on(selfBusKey, (event) => {
           if (event.source && event.source.dispatched) {
@@ -50387,6 +50432,11 @@ function formatPayloadTooltip(fields) {
   );
   return `{ ${parts.join(", ")} }`;
 }
+function entityNameOf(ref) {
+  if (!ref) return void 0;
+  if (typeof ref === "string") return ref;
+  return "name" in ref ? ref.name : void 0;
+}
 var ScreenSizeContext = createContext("tablet");
 var PatternSelectionContext = createContext({ selected: null, select: () => {
 } });
@@ -50427,19 +50477,116 @@ function buildOrbitalSchema(fullSchema, orbitalName) {
   if (!orbital) return fullSchema;
   return { ...fullSchema, name: `${fullSchema.name}__${orbitalName}`, orbitals: [orbital] };
 }
-function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEvent, fromState, toState) {
+function generateMockPayload(payloadSchema, schema, linkedEntity, mockData) {
+  const payload = {};
+  if (!payloadSchema || payloadSchema.length === 0) return payload;
+  const entityNames = /* @__PURE__ */ new Set();
+  for (const orb of schema.orbitals ?? []) {
+    const name = entityNameOf(orb.entity);
+    if (name) entityNames.add(name);
+  }
+  const linkedRows = linkedEntity ? mockData?.[linkedEntity] ?? [] : [];
+  const linkedFirstRow = linkedRows[0];
+  const valueForType = (rawType, entityType) => {
+    const type = rawType.replace(/!$/, "").trim();
+    const arrayMatch = /^\[\s*(\w+)\s*\]$/.exec(type);
+    if (arrayMatch) {
+      return mockData?.[arrayMatch[1]] ?? linkedRows;
+    }
+    if (type === "array") return linkedRows;
+    if (type === "entity") {
+      const target = entityType && mockData?.[entityType] ? entityType : linkedEntity;
+      return (target && mockData?.[target]?.[0]) ?? linkedFirstRow ?? {};
+    }
+    if (entityNames.has(type)) {
+      return mockData?.[type]?.[0] ?? linkedFirstRow ?? {};
+    }
+    switch (type) {
+      case "string":
+        return "Sample";
+      case "number":
+        return 1;
+      case "boolean":
+        return false;
+      case "object":
+        return {};
+      case "date":
+      case "datetime":
+      case "timestamp":
+        return (/* @__PURE__ */ new Date()).toISOString();
+      default:
+        return void 0;
+    }
+  };
+  const setByPath = (target, path, value) => {
+    const parts = path.split(".");
+    let cur = target;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const k = parts[i];
+      const next = cur[k];
+      if (next === null || typeof next !== "object" || Array.isArray(next)) {
+        cur[k] = {};
+      }
+      cur = cur[k];
+    }
+    cur[parts[parts.length - 1]] = value;
+  };
+  for (const field of payloadSchema) {
+    let value = valueForType(field.type, field.entityType);
+    if (linkedFirstRow !== void 0 && field.name.includes(".") && (typeof value === "string" || typeof value === "number" || typeof value === "boolean")) {
+      const tail = field.name.split(".").pop();
+      const fromRow = linkedFirstRow[tail];
+      if (fromRow !== void 0) value = fromRow;
+    }
+    setByPath(payload, field.name, value);
+  }
+  return payload;
+}
+function substitutePayloadBindings(effects, payload) {
+  const isPayloadObject = (v) => v !== null && typeof v === "object" && !Array.isArray(v) && !(v instanceof Date);
+  const getByPath = (path) => {
+    let cur = payload;
+    for (const k of path.split(".")) {
+      if (!isPayloadObject(cur)) return void 0;
+      cur = cur[k];
+    }
+    return cur;
+  };
+  const replaceValue = (v) => {
+    if (typeof v === "string" && v.startsWith("@payload.")) {
+      const resolved = getByPath(v.slice("@payload.".length));
+      return resolved === void 0 ? v : resolved;
+    }
+    if (Array.isArray(v)) return v.map(replaceValue);
+    if (v && typeof v === "object" && !(v instanceof Date)) {
+      const out = {};
+      for (const [k, inner] of Object.entries(v)) {
+        out[k] = replaceValue(inner);
+      }
+      return out;
+    }
+    return v;
+  };
+  const tree = JSON.parse(JSON.stringify(effects));
+  const substituted = replaceValue(tree);
+  return substituted;
+}
+function findEmitContract(trait, event) {
+  return trait.emits?.find((e) => e.event === event);
+}
+function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEvent, fromState, toState, mockData) {
   const orbital = (fullSchema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return fullSchema;
   const clonedOrbital = JSON.parse(JSON.stringify(orbital));
   const traits2 = clonedOrbital.traits ?? [];
   for (let ti = 0; ti < traits2.length; ti++) {
     const trait = traits2[ti];
-    if (typeof trait === "string" || !("stateMachine" in trait)) continue;
+    if (!isInlineTrait(trait)) continue;
     const traitObj = trait;
     if (traitObj.name !== traitName) continue;
     const sm = traitObj.stateMachine;
     if (!sm) continue;
-    const allTransitions = sm.transitions;
+    const allTransitions = sm.transitions ?? [];
     const targetTransition = fromState && toState ? allTransitions.find((t) => t.event === transitionEvent && t.from === fromState && t.to === toState) ?? allTransitions.find((t) => t.event === transitionEvent) : allTransitions.find((t) => t.event === transitionEvent);
     if (!targetTransition?.effects) continue;
     const renderUIEffects = [];
@@ -50449,14 +50596,22 @@ function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEve
       }
     }
     if (renderUIEffects.length === 0) continue;
-    const rewrittenSm = {
+    const linkedEntity = traitObj.linkedEntity ?? entityNameOf(clonedOrbital.entity);
+    const emitContract = findEmitContract(traitObj, transitionEvent);
+    const mockPayload = generateMockPayload(
+      emitContract?.payloadSchema,
+      fullSchema,
+      linkedEntity,
+      mockData
+    );
+    const seededEffects = substitutePayloadBindings(renderUIEffects, mockPayload);
+    traitObj.stateMachine = {
       states: [{ name: "preview", isInitial: true }],
       events: [{ key: "INIT", name: "INIT" }],
-      transitions: [{ from: "preview", to: "preview", event: "INIT", effects: renderUIEffects }]
+      transitions: [{ from: "preview", to: "preview", event: "INIT", effects: seededEffects }]
     };
-    traits2[ti].stateMachine = rewrittenSm;
-    traits2[ti].emits = [];
-    traits2[ti].listens = [];
+    traitObj.emits = [];
+    traitObj.listens = [];
     break;
   }
   const targetTrait = traits2.find((t) => {
@@ -50522,11 +50677,12 @@ var OrbPreviewNodeInner = (props) => {
         data.traitName,
         data.transitionEvent,
         data.fromState,
-        data.toState
+        data.toState,
+        data._mockData
       );
     }
     return buildOrbitalSchema(fullSchema, data.orbitalName);
-  }, [data._fullSchema, data.orbitalName, data.traitName, data.transitionEvent, data.fromState, data.toState, isExpanded]);
+  }, [data._fullSchema, data._mockData, data.orbitalName, data.traitName, data.transitionEvent, data.fromState, data.toState, isExpanded]);
   const handleContentClick = useCallback((e) => {
     e.stopPropagation();
     const target = e.target;