@statezero/core 0.2.37 → 0.2.39

package/dist/adaptors/vue/components/LayoutRenderer.js

@@ -0,0 +1,163 @@
+import { computed as y, provide as q, unref as m, inject as G, onMounted as T, resolveComponent as U, createElementBlock as d, openBlock as l, Fragment as v, createBlock as u, createCommentVNode as g, resolveDynamicComponent as i, normalizeClass as F, renderList as b, withCtx as z, createVNode as H, toDisplayString as M } from "vue";
+const N = {
+  key: 11,
+  class: "text-red-500 text-sm"
+}, I = {
+  __name: "LayoutRenderer",
+  props: {
+    // The layout element to render (root or nested)
+    layout: { type: Object, required: !0 },
+    // Schema with field definitions (input_properties/properties)
+    schema: { type: Object, default: () => ({}) },
+    // Component registry: { Control, Display, Alert, Label, Divider, Group, Tabs, ErrorBlock }
+    components: { type: Object, required: !0 },
+    // Form data (v-model for Controls)
+    formData: { type: Object, default: () => ({}) },
+    // Workflow context (for Display elements)
+    context: { type: Object, default: () => ({}) },
+    // Errors object - can be raw DRF response: { fieldName: ['error'], non_field_errors: ['global error'] }
+    // The renderer automatically extracts non_field_errors/__all__ for the ErrorBlock
+    errors: { type: Object, default: () => ({}) },
+    // Explicit non-field errors (optional override - if not provided, extracted from errors.non_field_errors)
+    nonFieldErrors: { type: Array, default: null },
+    // Whether this is the root renderer (internal)
+    isRoot: { type: Boolean, default: !0 }
+  },
+  emits: ["update:formData"],
+  setup(e, { emit: E }) {
+    const t = e, D = E, h = y(() => {
+      if (t.nonFieldErrors !== null)
+        return t.nonFieldErrors;
+      const n = t.errors?.non_field_errors || t.errors?.__all__;
+      return n ? Array.isArray(n) ? n.map((o) => typeof o == "string" ? o : o?.message ? o.message : String(o)) : [String(n)] : [];
+    }), L = y(() => t.components), j = y(() => t.schema), R = y(() => t.formData), A = y(() => t.context), S = y(() => t.errors);
+    t.isRoot && q("layoutRenderer", {
+      components: L,
+      schema: j,
+      formData: R,
+      context: A,
+      errors: S,
+      updateField: (n, o) => {
+        const a = m(R) || {};
+        D("update:formData", { ...a, [n]: o });
+      }
+    });
+    const s = t.isRoot ? null : G("layoutRenderer", null), r = y(() => t.isRoot ? t.components : s && m(s.components) || t.components), p = y(() => t.isRoot ? t.schema : s && m(s.schema) || t.schema), x = y(() => t.isRoot ? t.formData : s && m(s.formData) || t.formData), f = y(() => t.isRoot ? t.context : s && m(s.context) || t.context), B = y(() => t.isRoot ? t.errors : s && m(s.errors) || t.errors), O = t.isRoot ? (n, o) => D("update:formData", { ...t.formData, [n]: o }) : s?.updateField || (() => {
+    });
+    T(() => {
+      t.isRoot;
+    });
+    function w(n) {
+      try {
+        return new Function("formData", "context", `return ${n}`)(x.value, f.value);
+      } catch (o) {
+        return console.warn("[LayoutRenderer] Conditional eval failed:", n, o), !1;
+      }
+    }
+    function V(n) {
+      return (p.value?.properties || p.value?.input_properties || {})[n] || {};
+    }
+    function $(n) {
+      if (n === "non_field_errors" || n === "__all__") return [];
+      const o = B.value?.[n];
+      return o ? Array.isArray(o) ? o.map((a) => typeof a == "string" ? a : a?.message ? a.message : String(a)) : [String(o)] : [];
+    }
+    function C(n) {
+      if (!n) return;
+      const o = n.split(".");
+      let a = f.value;
+      for (const c of o) {
+        if (a == null) return;
+        a = a[c];
+      }
+      return a;
+    }
+    return (n, o) => {
+      const a = U("LayoutRenderer", !0);
+      return l(), d(v, null, [
+        e.isRoot && h.value.length > 0 && r.value.ErrorBlock ? (l(), u(i(r.value.ErrorBlock), {
+          key: 0,
+          errors: h.value
+        }, null, 8, ["errors"])) : g("", !0),
+        e.layout.type === "VerticalLayout" ? (l(), d("div", {
+          key: 1,
+          class: F(["sz-layout sz-layout-vertical", `sz-gap-${e.layout.gap || "md"}`])
+        }, [
+          (l(!0), d(v, null, b(e.layout.elements, (c, k) => (l(), u(a, {
+            key: k,
+            layout: c,
+            components: r.value,
+            "is-root": !1
+          }, null, 8, ["layout", "components"]))), 128))
+        ], 2)) : e.layout.type === "HorizontalLayout" ? (l(), d("div", {
+          key: 2,
+          class: F(["sz-layout sz-layout-horizontal", [`sz-gap-${e.layout.gap || "md"}`, `sz-align-${e.layout.align || "start"}`]])
+        }, [
+          (l(!0), d(v, null, b(e.layout.elements, (c, k) => (l(), u(a, {
+            key: k,
+            layout: c,
+            components: r.value,
+            "is-root": !1
+          }, null, 8, ["layout", "components"]))), 128))
+        ], 2)) : e.layout.type === "Group" ? (l(), u(i(r.value.Group), {
+          key: 3,
+          element: e.layout
+        }, {
+          default: z(() => [
+            e.layout.layout ? (l(), u(a, {
+              key: 0,
+              layout: e.layout.layout,
+              components: r.value,
+              "is-root": !1
+            }, null, 8, ["layout", "components"])) : g("", !0)
+          ]),
+          _: 1
+        }, 8, ["element"])) : e.layout.type === "Tabs" ? (l(), u(i(r.value.Tabs), {
+          key: 4,
+          element: e.layout
+        }, {
+          tab: z(({ tab: c }) => [
+            H(a, {
+              layout: c.layout,
+              components: r.value,
+              "is-root": !1
+            }, null, 8, ["layout", "components"])
+          ]),
+          _: 1
+        }, 8, ["element"])) : e.layout.type === "Conditional" ? (l(), d(v, { key: 5 }, [
+          w(e.layout.when) ? (l(), u(a, {
+            key: 0,
+            layout: e.layout.layout,
+            components: r.value,
+            "is-root": !1
+          }, null, 8, ["layout", "components"])) : g("", !0)
+        ], 64)) : e.layout.type === "Control" ? (l(), u(i(r.value.Control), {
+          key: 6,
+          element: e.layout,
+          "model-value": x.value[e.layout.field_name],
+          errors: $(e.layout.field_name),
+          context: f.value,
+          "form-data": x.value,
+          schema: V(e.layout.field_name),
+          "onUpdate:modelValue": o[0] || (o[0] = (c) => m(O)(e.layout.field_name, c))
+        }, null, 8, ["element", "model-value", "errors", "context", "form-data", "schema"])) : e.layout.type === "Display" ? (l(), u(i(r.value.Display), {
+          key: 7,
+          element: e.layout,
+          context: f.value,
+          value: C(e.layout.context_path)
+        }, null, 8, ["element", "context", "value"])) : e.layout.type === "Alert" ? (l(), u(i(r.value.Alert), {
+          key: 8,
+          element: e.layout,
+          context: f.value,
+          text: e.layout.text || C(e.layout.context_path)
+        }, null, 8, ["element", "context", "text"])) : e.layout.type === "Label" ? (l(), u(i(r.value.Label), {
+          key: 9,
+          element: e.layout
+        }, null, 8, ["element"])) : e.layout.type === "Divider" ? (l(), u(i(r.value.Divider), { key: 10 })) : (l(), d("div", N, " [LayoutRenderer] Unknown element type: " + M(e.layout.type), 1))
+      ], 64);
+    };
+  }
+};
+export {
+  I as default
+};

package/dist/adaptors/vue/components/defaults/AlertElement.js

@@ -0,0 +1,31 @@
+import { createElementBlock as o, openBlock as l, normalizeClass as c, createElementVNode as s, toDisplayString as n } from "vue";
+const i = { class: "flex-shrink-0" }, a = { class: "text-sm" }, g = {
+  __name: "AlertElement",
+  props: {
+    element: { type: Object, required: !0 },
+    context: { type: Object, default: () => ({}) },
+    text: { type: String, default: "" }
+  },
+  setup(e) {
+    const t = {
+      info: "bg-blue-500/10 border-blue-500/20 text-blue-400",
+      warning: "bg-yellow-500/10 border-yellow-500/20 text-yellow-400",
+      error: "bg-red-500/10 border-red-500/20 text-red-400",
+      success: "bg-green-500/10 border-green-500/20 text-green-400"
+    }, r = {
+      info: "ℹ️",
+      warning: "⚠️",
+      error: "❌",
+      success: "✓"
+    };
+    return (d, b) => (l(), o("div", {
+      class: c(["flex items-start gap-3 p-3 rounded-lg border", t[e.element.severity] || t.info])
+    }, [
+      s("span", i, n(r[e.element.severity] || r.info), 1),
+      s("p", a, n(e.text), 1)
+    ], 2));
+  }
+};
+export {
+  g as default
+};

package/dist/adaptors/vue/components/defaults/DisplayElement.js

@@ -0,0 +1,44 @@
+import { createElementBlock as t, openBlock as n, createCommentVNode as c, createElementVNode as o, toDisplayString as l, Fragment as s } from "vue";
+const m = { class: "space-y-1" }, u = {
+  key: 0,
+  class: "block text-sm font-medium text-muted-foreground"
+}, i = { class: "text-sm" }, r = { key: 0 }, y = {
+  key: 1,
+  class: "text-muted-foreground italic"
+}, x = {
+  key: 1,
+  class: "px-2 py-1 bg-muted rounded font-mono text-sm"
+}, f = {
+  key: 2,
+  class: "flex items-center gap-2"
+}, v = { class: "flex-1 px-2 py-1 bg-muted rounded font-mono text-xs truncate" }, b = { class: "text-xs text-muted-foreground ml-2" }, k = {
+  __name: "DisplayElement",
+  props: {
+    element: { type: Object, required: !0 },
+    context: { type: Object, default: () => ({}) },
+    value: { default: null }
+  },
+  setup(e) {
+    return (d, a) => (n(), t("div", m, [
+      e.element.label ? (n(), t("label", u, l(e.element.label), 1)) : c("", !0),
+      o("div", i, [
+        !e.element.display_component || e.element.display_component === "text" ? (n(), t(s, { key: 0 }, [
+          e.value !== null && e.value !== void 0 ? (n(), t("span", r, l(e.value), 1)) : (n(), t("span", y, "—"))
+        ], 64)) : e.element.display_component === "code" ? (n(), t("code", x, l(e.value), 1)) : e.element.display_component === "copy-url" ? (n(), t("div", f, [
+          o("code", v, l(e.value), 1),
+          o("button", {
+            type: "button",
+            class: "px-2 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90",
+            onClick: a[0] || (a[0] = (p) => d.navigator.clipboard.writeText(e.value))
+          }, " Copy ")
+        ])) : (n(), t(s, { key: 3 }, [
+          o("span", null, l(e.value), 1),
+          o("span", b, "(" + l(e.element.display_component) + ")", 1)
+        ], 64))
+      ])
+    ]));
+  }
+};
+export {
+  k as default
+};

package/dist/adaptors/vue/components/defaults/DividerElement.js

@@ -0,0 +1,10 @@
+import { createElementBlock as e, openBlock as r } from "vue";
+const t = { class: "border-t border-border my-2" }, s = {
+  __name: "DividerElement",
+  setup(o) {
+    return (c, _) => (r(), e("hr", t));
+  }
+};
+export {
+  s as default
+};

package/dist/adaptors/vue/components/defaults/ErrorBlock.js

@@ -0,0 +1,24 @@
+import { createElementBlock as e, createCommentVNode as d, openBlock as r, createElementVNode as o, Fragment as l, renderList as c, toDisplayString as i } from "vue";
+const m = {
+  key: 0,
+  class: "flex items-start gap-3 p-3 rounded-lg border bg-red-500/10 border-red-500/20"
+}, p = { class: "space-y-1" }, g = {
+  __name: "ErrorBlock",
+  props: {
+    errors: { type: Array, required: !0 }
+  },
+  setup(t) {
+    return (u, s) => t.errors.length > 0 ? (r(), e("div", m, [
+      s[0] || (s[0] = o("span", { class: "flex-shrink-0 text-red-400" }, "❌", -1)),
+      o("div", p, [
+        (r(!0), e(l, null, c(t.errors, (n, a) => (r(), e("p", {
+          key: a,
+          class: "text-sm text-red-400"
+        }, i(n), 1))), 128))
+      ])
+    ])) : d("", !0);
+  }
+};
+export {
+  g as default
+};

package/dist/adaptors/vue/components/defaults/GroupElement.js

@@ -0,0 +1,41 @@
+import { ref as a, createElementBlock as o, openBlock as s, createElementVNode as t, withDirectives as m, normalizeClass as u, createCommentVNode as c, toDisplayString as n, renderSlot as p, vShow as f } from "vue";
+const v = { class: "border border-border rounded-lg overflow-hidden" }, h = { class: "flex items-center justify-between" }, b = { class: "font-medium" }, g = {
+  key: 0,
+  class: "text-sm text-muted-foreground mt-0.5"
+}, _ = {
+  key: 0,
+  class: "text-muted-foreground"
+}, x = { class: "p-4" }, C = {
+  __name: "GroupElement",
+  props: {
+    element: { type: Object, required: !0 }
+  },
+  setup(e) {
+    const r = e, l = a(r.element.collapsed || !1);
+    function i() {
+      r.element.collapsible && (l.value = !l.value);
+    }
+    return (d, y) => (s(), o("div", v, [
+      t("div", {
+        class: u(["px-4 py-3 bg-muted/50", { "cursor-pointer hover:bg-muted/70": e.element.collapsible }]),
+        onClick: i
+      }, [
+        t("div", h, [
+          t("div", null, [
+            t("h4", b, n(e.element.label), 1),
+            e.element.description ? (s(), o("p", g, n(e.element.description), 1)) : c("", !0)
+          ]),
+          e.element.collapsible ? (s(), o("span", _, n(l.value ? "▶" : "▼"), 1)) : c("", !0)
+        ])
+      ], 2),
+      m(t("div", x, [
+        p(d.$slots, "default")
+      ], 512), [
+        [f, !l.value]
+      ])
+    ]));
+  }
+};
+export {
+  C as default
+};

package/dist/adaptors/vue/components/defaults/LabelElement.js

@@ -0,0 +1,21 @@
+import { createElementBlock as n, openBlock as a, normalizeClass as o, toDisplayString as r } from "vue";
+const i = {
+  __name: "LabelElement",
+  props: {
+    element: { type: Object, required: !0 }
+  },
+  setup(e) {
+    const t = {
+      heading: "text-lg font-semibold",
+      subheading: "text-base font-medium text-muted-foreground",
+      body: "text-sm",
+      caption: "text-xs text-muted-foreground"
+    };
+    return (s, l) => (a(), n("p", {
+      class: o(t[e.element.variant] || t.body)
+    }, r(e.element.text), 3));
+  }
+};
+export {
+  i as default
+};

package/dist/adaptors/vue/components/defaults/TabsElement.js

@@ -0,0 +1,38 @@
+import { ref as b, createElementBlock as t, openBlock as r, createElementVNode as a, Fragment as c, renderList as u, normalizeClass as m, toDisplayString as d, withDirectives as p, renderSlot as v, vShow as f } from "vue";
+const y = { class: "flex border-b border-border" }, _ = ["onClick"], h = { class: "pt-4" }, E = {
+  __name: "TabsElement",
+  props: {
+    element: { type: Object, required: !0 }
+  },
+  setup(o) {
+    const n = b(o.element.default_tab || 0);
+    function i(l) {
+      n.value = l;
+    }
+    return (l, x) => (r(), t("div", null, [
+      a("div", y, [
+        (r(!0), t(c, null, u(o.element.tabs, (s, e) => (r(), t("button", {
+          key: e,
+          type: "button",
+          class: m(["px-4 py-2 text-sm font-medium transition-colors", [
+            n.value === e ? "text-primary border-b-2 border-primary -mb-px" : "text-muted-foreground hover:text-foreground"
+          ]]),
+          onClick: (g) => i(e)
+        }, d(s.label), 11, _))), 128))
+      ]),
+      a("div", h, [
+        (r(!0), t(c, null, u(o.element.tabs, (s, e) => p((r(), t("div", { key: e }, [
+          v(l.$slots, "tab", {
+            tab: s,
+            index: e
+          })
+        ], 512)), [
+          [f, n.value === e]
+        ])), 128))
+      ])
+    ]));
+  }
+};
+export {
+  E as default
+};

package/dist/adaptors/vue/components/defaults/index.js

@@ -4,13 +4,13 @@
  * These are minimal, unstyled implementations that follow the contracts.
  * Users can use these as-is or as reference for custom implementations.
  */
-export { default as AlertElement } from './AlertElement.vue';
-export { default as LabelElement } from './LabelElement.vue';
-export { default as DividerElement } from './DividerElement.vue';
-export { default as DisplayElement } from './DisplayElement.vue';
-export { default as GroupElement } from './GroupElement.vue';
-export { default as TabsElement } from './TabsElement.vue';
-export { default as ErrorBlock } from './ErrorBlock.vue';
+export { default as AlertElement } from './AlertElement.js';
+export { default as LabelElement } from './LabelElement.js';
+export { default as DividerElement } from './DividerElement.js';
+export { default as DisplayElement } from './DisplayElement.js';
+export { default as GroupElement } from './GroupElement.js';
+export { default as TabsElement } from './TabsElement.js';
+export { default as ErrorBlock } from './ErrorBlock.js';
 /**
  * Create a default components registry (without Control - user must provide)
  *

package/dist/adaptors/vue/components/index.js

@@ -2,6 +2,6 @@
  * Vue components for StateZero
  */
 // Main layout renderer
-export { default as LayoutRenderer } from './LayoutRenderer.vue';
+export { default as LayoutRenderer } from './LayoutRenderer.js';
 // Default component implementations
 export { AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from './defaults/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statezero/core",
-  "version": "0.2.37",
+  "version": "0.2.39",
   "type": "module",
   "module": "ESNext",
   "description": "The type-safe frontend client for StateZero - connect directly to your backend models with zero boilerplate",
@@ -26,8 +26,7 @@
       "import": "./dist/vue-entry.js",
       "require": "./dist/vue-entry.js"
     },
-    "./vue/layout.css": "./dist/adaptors/vue/components/layout.css",
-    "./vue/layout.tailwind.css": "./dist/adaptors/vue/components/layout.tailwind.css",
+    "./vue/layout.css": "./src/adaptors/vue/components/layout.css",
     "./testing": {
       "import": "./dist/testing.js",
       "require": "./dist/testing.js"
@@ -42,8 +41,7 @@
     "generate:test-apps": "ts-node scripts/generate-test-apps.js",
     "test:adaptors": "playwright test tests/adaptors",
     "test:coverage": "vitest run --coverage",
-    "build": "tsc && npm run copy-vue",
-    "copy-vue": "cp -r src/adaptors/vue/components/*.vue dist/adaptors/vue/components/ && cp -r src/adaptors/vue/components/defaults/*.vue dist/adaptors/vue/components/defaults/ && cp src/adaptors/vue/components/*.css dist/adaptors/vue/components/",
+    "build": "tsc && vite build",
     "parse-queries": "node scripts/perfect-query-parser.js",
     "sync": "node src/cli/index.js sync",
     "sync:dev": "npx cross-env NODE_ENV=test npm run sync",
@@ -76,6 +74,7 @@
   },
   "files": [
     "dist",
+    "src/adaptors/vue/components/layout.css",
     "LICENSE",
     "README.md"
   ],
@@ -114,6 +113,7 @@
     "@types/node": "^22.13.1",
     "@types/react": "^18.3.18",
     "@types/yargs": "^17.0.32",
+    "@vitejs/plugin-vue": "^6.0.4",
     "@vitest/coverage-v8": "^3.0.5",
     "fake-indexeddb": "^6.0.0",
     "fast-glob": "^3.3.3",
@@ -121,6 +121,7 @@
     "rimraf": "^5.0.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3",
+    "vite": "^7.3.1",
     "vitest": "^3.0.5",
     "vue": "^3.2.0"
   },

package/dist/adaptors/vue/components/LayoutRenderer.vue

@@ -1,361 +0,0 @@
-<script setup>
-import { computed, provide, inject, onMounted, unref } from 'vue'
-
-/**
- * LayoutRenderer - Renders a statezero layout tree
- *
- * Expects a components registry with implementations for each element type.
- * Components must follow contracts (validated at mount time).
- */
-
-const props = defineProps({
-  // The layout element to render (root or nested)
-  layout: { type: Object, required: true },
-
-  // Schema with field definitions (input_properties/properties)
-  schema: { type: Object, default: () => ({}) },
-
-  // Component registry: { Control, Display, Alert, Label, Divider, Group, Tabs, ErrorBlock }
-  components: { type: Object, required: true },
-
-  // Form data (v-model for Controls)
-  formData: { type: Object, default: () => ({}) },
-
-  // Workflow context (for Display elements)
-  context: { type: Object, default: () => ({}) },
-
-  // Errors object - can be raw DRF response: { fieldName: ['error'], non_field_errors: ['global error'] }
-  // The renderer automatically extracts non_field_errors/__all__ for the ErrorBlock
-  errors: { type: Object, default: () => ({}) },
-
-  // Explicit non-field errors (optional override - if not provided, extracted from errors.non_field_errors)
-  nonFieldErrors: { type: Array, default: null },
-
-  // Whether this is the root renderer (internal)
-  isRoot: { type: Boolean, default: true }
-})
-
-const emit = defineEmits(['update:formData'])
-
-// Extract non-field errors from the errors object (DRF format)
-// Supports both "non_field_errors" and "__all__" keys
-const extractedNonFieldErrors = computed(() => {
-  // If explicit nonFieldErrors prop provided, use it
-  if (props.nonFieldErrors !== null) {
-    return props.nonFieldErrors
-  }
-  // Otherwise extract from errors object
-  const nfe = props.errors?.non_field_errors || props.errors?.__all__
-  if (!nfe) return []
-  if (Array.isArray(nfe)) {
-    return nfe.map(err => {
-      if (typeof err === 'string') return err
-      if (err?.message) return err.message
-      return String(err)
-    })
-  }
-  return [String(nfe)]
-})
-
-const rootComponents = computed(() => props.components)
-const rootSchema = computed(() => props.schema)
-const rootFormData = computed(() => props.formData)
-const rootContext = computed(() => props.context)
-const rootErrors = computed(() => props.errors)
-
-// Provide context to nested renderers
-if (props.isRoot) {
-  provide('layoutRenderer', {
-    components: rootComponents,
-    schema: rootSchema,
-    formData: rootFormData,
-    context: rootContext,
-    errors: rootErrors,
-    updateField: (fieldName, value) => {
-      const currentFormData = unref(rootFormData) || {}
-      emit('update:formData', { ...currentFormData, [fieldName]: value })
-    }
-  })
-}
-
-// Inject from parent if not root
-const injected = props.isRoot ? null : inject('layoutRenderer', null)
-const components = computed(() => props.isRoot ? props.components : (injected ? (unref(injected.components) || props.components) : props.components))
-const schema = computed(() => props.isRoot ? props.schema : (injected ? (unref(injected.schema) || props.schema) : props.schema))
-const formData = computed(() => props.isRoot ? props.formData : (injected ? (unref(injected.formData) || props.formData) : props.formData))
-const context = computed(() => props.isRoot ? props.context : (injected ? (unref(injected.context) || props.context) : props.context))
-const errors = computed(() => props.isRoot ? props.errors : (injected ? (unref(injected.errors) || props.errors) : props.errors))
-const updateField = props.isRoot
-  ? (fieldName, value) => emit('update:formData', { ...props.formData, [fieldName]: value })
-  : injected?.updateField || (() => {})
-
-// Contract definitions for component validation
-//
-// Control: Polymorphic form field component (like AutoField)
-//   - Should check element.display_component for custom component override
-//   - Should use schema (type/format) to determine default field rendering
-//   - Receives: element (includes field_name, display_component, label, extra, etc.)
-//              modelValue, errors (array), context, formData, schema (field schema)
-//   - Emits: update:modelValue
-//
-// Display: Read-only component for showing context values
-//   - Receives: element (includes context_path, label, display_component), context, value (resolved)
-//   - No v-model binding, just displays value
-//
-const CONTRACTS = {
-  Control: {
-    props: ['element', 'modelValue', 'errors', 'context', 'formData', 'schema'],
-    emits: ['update:modelValue']
-  },
-  Display: {
-    props: ['element', 'context', 'value'],
-    emits: []
-  },
-  Alert: {
-    props: ['element', 'context', 'text'],
-    emits: []
-  },
-  Label: {
-    props: ['element'],
-    emits: []
-  },
-  Divider: {
-    props: [],
-    emits: []
-  },
-  Group: {
-    props: ['element'],
-    emits: []
-  },
-  Tabs: {
-    props: ['element'],
-    emits: []
-  },
-  ErrorBlock: {
-    props: ['errors'],
-    emits: []
-  }
-}
-
-// Validate components on mount (dev warning only)
-function validateComponents(comps) {
-  for (const [type, component] of Object.entries(comps)) {
-    const contract = CONTRACTS[type]
-    if (!contract) continue
-    if (!component) {
-      console.warn(`[LayoutRenderer] Missing component for type: ${type}`)
-      continue
-    }
-
-    // Get component props (handle different formats)
-    let componentProps = []
-    if (component.props) {
-      if (Array.isArray(component.props)) {
-        componentProps = component.props
-      } else if (typeof component.props === 'object') {
-        componentProps = Object.keys(component.props)
-      }
-    }
-
-    // Get component emits
-    let componentEmits = []
-    if (component.emits) {
-      if (Array.isArray(component.emits)) {
-        componentEmits = component.emits
-      } else if (typeof component.emits === 'object') {
-        componentEmits = Object.keys(component.emits)
-      }
-    }
-
-    // Check required props
-    for (const prop of contract.props) {
-      if (!componentProps.includes(prop)) {
-        console.warn(`[LayoutRenderer] ${type} component missing required prop: "${prop}"`)
-      }
-    }
-
-    // Check required emits
-    for (const emitName of contract.emits) {
-      if (!componentEmits.includes(emitName)) {
-        console.warn(`[LayoutRenderer] ${type} component missing required emit: "${emitName}"`)
-      }
-    }
-  }
-}
-
-onMounted(() => {
-  if (props.isRoot && import.meta.env?.DEV) {
-    validateComponents(props.components)
-  }
-})
-
-// Evaluate conditional expressions
-function evalCondition(expr) {
-  try {
-    return new Function('formData', 'context', `return ${expr}`)(formData.value, context.value)
-  } catch (e) {
-    console.warn('[LayoutRenderer] Conditional eval failed:', expr, e)
-    return false
-  }
-}
-
-// Get field schema from schema.properties or schema.input_properties
-function getFieldSchema(fieldName) {
-  const props = schema.value?.properties || schema.value?.input_properties || {}
-  return props[fieldName] || {}
-}
-
-// Get errors for a specific field (excludes non_field_errors/__all__)
-function getFieldErrors(fieldName) {
-  if (fieldName === 'non_field_errors' || fieldName === '__all__') return []
-  const fieldErrors = errors.value?.[fieldName]
-  if (!fieldErrors) return []
-  // Normalize to array of strings (DRF can return array of strings or objects with message)
-  if (Array.isArray(fieldErrors)) {
-    return fieldErrors.map(err => {
-      if (typeof err === 'string') return err
-      if (err?.message) return err.message
-      return String(err)
-    })
-  }
-  return [String(fieldErrors)]
-}
-
-// Resolve context path (dot notation) to value
-function resolveContextPath(path) {
-  if (!path) return undefined
-  const parts = path.split('.')
-  let value = context.value
-  for (const part of parts) {
-    if (value === null || value === undefined) return undefined
-    value = value[part]
-  }
-  return value
-}
-
-</script>
-
-<template>
-  <!-- ErrorBlock at root level -->
-  <component
-    v-if="isRoot && extractedNonFieldErrors.length > 0 && components.ErrorBlock"
-    :is="components.ErrorBlock"
-    :errors="extractedNonFieldErrors"
-  />
-
-  <!-- VerticalLayout -->
-  <div
-    v-if="layout.type === 'VerticalLayout'"
-    class="sz-layout sz-layout-vertical"
-    :class="`sz-gap-${layout.gap || 'md'}`"
-  >
-    <LayoutRenderer
-      v-for="(child, i) in layout.elements"
-      :key="i"
-      :layout="child"
-      :components="components"
-      :is-root="false"
-    />
-  </div>
-
-  <!-- HorizontalLayout -->
-  <div
-    v-else-if="layout.type === 'HorizontalLayout'"
-    class="sz-layout sz-layout-horizontal"
-    :class="[`sz-gap-${layout.gap || 'md'}`, `sz-align-${layout.align || 'start'}`]"
-  >
-    <LayoutRenderer
-      v-for="(child, i) in layout.elements"
-      :key="i"
-      :layout="child"
-      :components="components"
-      :is-root="false"
-    />
-  </div>
-
-  <!-- Group -->
-  <component
-    v-else-if="layout.type === 'Group'"
-    :is="components.Group"
-    :element="layout"
-  >
-    <LayoutRenderer
-      v-if="layout.layout"
-      :layout="layout.layout"
-      :components="components"
-      :is-root="false"
-    />
-  </component>
-
-  <!-- Tabs -->
-  <component
-    v-else-if="layout.type === 'Tabs'"
-    :is="components.Tabs"
-    :element="layout"
-  >
-    <template #tab="{ tab }">
-      <LayoutRenderer
-        :layout="tab.layout"
-        :components="components"
-        :is-root="false"
-      />
-    </template>
-  </component>
-
-  <!-- Conditional -->
-  <LayoutRenderer
-    v-else-if="layout.type === 'Conditional' && evalCondition(layout.when)"
-    :layout="layout.layout"
-    :components="components"
-    :is-root="false"
-  />
-
-  <!-- Control (form field) -->
-  <component
-    v-else-if="layout.type === 'Control'"
-    :is="components.Control"
-    :element="layout"
-    :model-value="formData[layout.field_name]"
-    :errors="getFieldErrors(layout.field_name)"
-    :context="context"
-    :form-data="formData"
-    :schema="getFieldSchema(layout.field_name)"
-    @update:model-value="updateField(layout.field_name, $event)"
-  />
-
-  <!-- Display -->
-  <component
-    v-else-if="layout.type === 'Display'"
-    :is="components.Display"
-    :element="layout"
-    :context="context"
-    :value="resolveContextPath(layout.context_path)"
-  />
-
-  <!-- Alert -->
-  <component
-    v-else-if="layout.type === 'Alert'"
-    :is="components.Alert"
-    :element="layout"
-    :context="context"
-    :text="layout.text || resolveContextPath(layout.context_path)"
-  />
-
-  <!-- Label -->
-  <component
-    v-else-if="layout.type === 'Label'"
-    :is="components.Label"
-    :element="layout"
-  />
-
-  <!-- Divider -->
-  <component
-    v-else-if="layout.type === 'Divider'"
-    :is="components.Divider"
-  />
-
-  <!-- Unknown type warning -->
-  <div v-else class="text-red-500 text-sm">
-    [LayoutRenderer] Unknown element type: {{ layout.type }}
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/AlertElement.vue

@@ -1,38 +0,0 @@
-<script setup>
-/**
- * Default Alert element for LayoutRenderer
- *
- * Contract:
- * - props: element, context, text
- * - emits: none
- */
-defineProps({
-  element: { type: Object, required: true },
-  context: { type: Object, default: () => ({}) },
-  text: { type: String, default: '' }
-})
-
-const severityClasses = {
-  info: 'bg-blue-500/10 border-blue-500/20 text-blue-400',
-  warning: 'bg-yellow-500/10 border-yellow-500/20 text-yellow-400',
-  error: 'bg-red-500/10 border-red-500/20 text-red-400',
-  success: 'bg-green-500/10 border-green-500/20 text-green-400'
-}
-
-const severityIcons = {
-  info: 'ℹ️',
-  warning: '⚠️',
-  error: '❌',
-  success: '✓'
-}
-</script>
-
-<template>
-  <div
-    class="flex items-start gap-3 p-3 rounded-lg border"
-    :class="severityClasses[element.severity] || severityClasses.info"
-  >
-    <span class="flex-shrink-0">{{ severityIcons[element.severity] || severityIcons.info }}</span>
-    <p class="text-sm">{{ text }}</p>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/DisplayElement.vue

@@ -1,57 +0,0 @@
-<script setup>
-/**
- * Default Display element for LayoutRenderer
- *
- * Renders context data in a display-only format.
- * For custom rendering, use element.display_component and register custom components.
- *
- * Contract:
- * - props: element, context, value
- * - emits: none
- */
-defineProps({
-  element: { type: Object, required: true },
-  context: { type: Object, default: () => ({}) },
-  value: { default: null }
-})
-</script>
-
-<template>
-  <div class="space-y-1">
-    <label v-if="element.label" class="block text-sm font-medium text-muted-foreground">
-      {{ element.label }}
-    </label>
-    <div class="text-sm">
-      <!-- Default text display -->
-      <template v-if="!element.display_component || element.display_component === 'text'">
-        <span v-if="value !== null && value !== undefined">{{ value }}</span>
-        <span v-else class="text-muted-foreground italic">—</span>
-      </template>
-
-      <!-- Code display -->
-      <template v-else-if="element.display_component === 'code'">
-        <code class="px-2 py-1 bg-muted rounded font-mono text-sm">{{ value }}</code>
-      </template>
-
-      <!-- Copy URL display -->
-      <template v-else-if="element.display_component === 'copy-url'">
-        <div class="flex items-center gap-2">
-          <code class="flex-1 px-2 py-1 bg-muted rounded font-mono text-xs truncate">{{ value }}</code>
-          <button
-            type="button"
-            class="px-2 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90"
-            @click="navigator.clipboard.writeText(value)"
-          >
-            Copy
-          </button>
-        </div>
-      </template>
-
-      <!-- Fallback for unknown display_component -->
-      <template v-else>
-        <span>{{ value }}</span>
-        <span class="text-xs text-muted-foreground ml-2">({{ element.display_component }})</span>
-      </template>
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/DividerElement.vue

@@ -1,13 +0,0 @@
-<script setup>
-/**
- * Default Divider element for LayoutRenderer
- *
- * Contract:
- * - props: none required
- * - emits: none
- */
-</script>
-
-<template>
-  <hr class="border-t border-border my-2" />
-</template>

package/dist/adaptors/vue/components/defaults/ErrorBlock.vue

@@ -1,28 +0,0 @@
-<script setup>
-/**
- * Default ErrorBlock element for LayoutRenderer
- *
- * Displays non-field errors (global form errors).
- *
- * Contract:
- * - props: errors (array of error strings)
- * - emits: none
- */
-defineProps({
-  errors: { type: Array, required: true }
-})
-</script>
-
-<template>
-  <div
-    v-if="errors.length > 0"
-    class="flex items-start gap-3 p-3 rounded-lg border bg-red-500/10 border-red-500/20"
-  >
-    <span class="flex-shrink-0 text-red-400">❌</span>
-    <div class="space-y-1">
-      <p v-for="(error, i) in errors" :key="i" class="text-sm text-red-400">
-        {{ error }}
-      </p>
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/GroupElement.vue

@@ -1,53 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-/**
- * Default Group element for LayoutRenderer
- *
- * A labeled section container. Children are rendered via default slot.
- *
- * Contract:
- * - props: element
- * - emits: none
- * - slot: default (for nested layout content)
- */
-const props = defineProps({
-  element: { type: Object, required: true }
-})
-
-const isCollapsed = ref(props.element.collapsed || false)
-
-function toggleCollapse() {
-  if (props.element.collapsible) {
-    isCollapsed.value = !isCollapsed.value
-  }
-}
-</script>
-
-<template>
-  <div class="border border-border rounded-lg overflow-hidden">
-    <!-- Header -->
-    <div
-      class="px-4 py-3 bg-muted/50"
-      :class="{ 'cursor-pointer hover:bg-muted/70': element.collapsible }"
-      @click="toggleCollapse"
-    >
-      <div class="flex items-center justify-between">
-        <div>
-          <h4 class="font-medium">{{ element.label }}</h4>
-          <p v-if="element.description" class="text-sm text-muted-foreground mt-0.5">
-            {{ element.description }}
-          </p>
-        </div>
-        <span v-if="element.collapsible" class="text-muted-foreground">
-          {{ isCollapsed ? '▶' : '▼' }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Content -->
-    <div v-show="!isCollapsed" class="p-4">
-      <slot />
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/defaults/LabelElement.vue

@@ -1,25 +0,0 @@
-<script setup>
-/**
- * Default Label element for LayoutRenderer
- *
- * Contract:
- * - props: element
- * - emits: none
- */
-defineProps({
-  element: { type: Object, required: true }
-})
-
-const variantClasses = {
-  heading: 'text-lg font-semibold',
-  subheading: 'text-base font-medium text-muted-foreground',
-  body: 'text-sm',
-  caption: 'text-xs text-muted-foreground'
-}
-</script>
-
-<template>
-  <p :class="variantClasses[element.variant] || variantClasses.body">
-    {{ element.text }}
-  </p>
-</template>

package/dist/adaptors/vue/components/defaults/TabsElement.vue

@@ -1,54 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-/**
- * Default Tabs element for LayoutRenderer
- *
- * A tabbed container. Tab content is rendered via scoped slot.
- *
- * Contract:
- * - props: element
- * - emits: none
- * - slot: #tab="{ tab }" (for rendering each tab's content)
- */
-const props = defineProps({
-  element: { type: Object, required: true }
-})
-
-const activeTab = ref(props.element.default_tab || 0)
-
-function selectTab(index) {
-  activeTab.value = index
-}
-</script>
-
-<template>
-  <div>
-    <!-- Tab buttons -->
-    <div class="flex border-b border-border">
-      <button
-        v-for="(tab, index) in element.tabs"
-        :key="index"
-        type="button"
-        class="px-4 py-2 text-sm font-medium transition-colors"
-        :class="[
-          activeTab === index
-            ? 'text-primary border-b-2 border-primary -mb-px'
-            : 'text-muted-foreground hover:text-foreground'
-        ]"
-        @click="selectTab(index)"
-      >
-        {{ tab.label }}
-      </button>
-    </div>
-
-    <!-- Tab content -->
-    <div class="pt-4">
-      <template v-for="(tab, index) in element.tabs" :key="index">
-        <div v-show="activeTab === index">
-          <slot name="tab" :tab="tab" :index="index" />
-        </div>
-      </template>
-    </div>
-  </div>
-</template>

package/dist/adaptors/vue/components/layout.tailwind.css

@@ -1,51 +0,0 @@
-/**
- * StateZero Layout Renderer - Tailwind CSS Styles
- *
- * Import this file if you're using Tailwind CSS:
- *   import '@statezero/core/vue/layout.tailwind.css'
- *
- * This maps sz-* classes to Tailwind utilities via @apply.
- */
-
-/* Layout containers */
-.sz-layout {
-  @apply flex;
-}
-
-.sz-layout-vertical {
-  @apply flex-col;
-}
-
-.sz-layout-horizontal {
-  @apply flex-row;
-}
-
-/* Gap utilities */
-.sz-gap-sm {
-  @apply gap-2;
-}
-
-.sz-gap-md {
-  @apply gap-4;
-}
-
-.sz-gap-lg {
-  @apply gap-6;
-}
-
-/* Horizontal alignment */
-.sz-align-start {
-  @apply items-start;
-}
-
-.sz-align-center {
-  @apply items-center;
-}
-
-.sz-align-end {
-  @apply items-end;
-}
-
-.sz-align-stretch {
-  @apply items-stretch;
-}