@statezero/core 0.2.36 → 0.2.38

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

@@ -0,0 +1,166 @@
+import { computed as c, provide as q, unref as m, inject as G, onMounted as T, resolveComponent as U, createElementBlock as d, openBlock as r, Fragment as v, createBlock as y, 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 = c(() => {
+      var l, a;
+      if (t.nonFieldErrors !== null)
+        return t.nonFieldErrors;
+      const n = ((l = t.errors) == null ? void 0 : l.non_field_errors) || ((a = t.errors) == null ? void 0 : a.__all__);
+      return n ? Array.isArray(n) ? n.map((o) => typeof o == "string" ? o : o != null && o.message ? o.message : String(o)) : [String(n)] : [];
+    }), L = c(() => t.components), A = c(() => t.schema), R = c(() => t.formData), S = c(() => t.context), j = c(() => t.errors);
+    t.isRoot && q("layoutRenderer", {
+      components: L,
+      schema: A,
+      formData: R,
+      context: S,
+      errors: j,
+      updateField: (n, l) => {
+        const a = m(R) || {};
+        D("update:formData", { ...a, [n]: l });
+      }
+    });
+    const s = t.isRoot ? null : G("layoutRenderer", null), u = c(() => t.isRoot ? t.components : s && m(s.components) || t.components), p = c(() => t.isRoot ? t.schema : s && m(s.schema) || t.schema), x = c(() => t.isRoot ? t.formData : s && m(s.formData) || t.formData), f = c(() => t.isRoot ? t.context : s && m(s.context) || t.context), B = c(() => t.isRoot ? t.errors : s && m(s.errors) || t.errors), O = t.isRoot ? (n, l) => D("update:formData", { ...t.formData, [n]: l }) : (s == null ? void 0 : s.updateField) || (() => {
+    });
+    T(() => {
+      t.isRoot;
+    });
+    function w(n) {
+      try {
+        return new Function("formData", "context", `return ${n}`)(x.value, f.value);
+      } catch (l) {
+        return console.warn("[LayoutRenderer] Conditional eval failed:", n, l), !1;
+      }
+    }
+    function V(n) {
+      var a, o;
+      return (((a = p.value) == null ? void 0 : a.properties) || ((o = p.value) == null ? void 0 : o.input_properties) || {})[n] || {};
+    }
+    function $(n) {
+      var a;
+      if (n === "non_field_errors" || n === "__all__") return [];
+      const l = (a = B.value) == null ? void 0 : a[n];
+      return l ? Array.isArray(l) ? l.map((o) => typeof o == "string" ? o : o != null && o.message ? o.message : String(o)) : [String(l)] : [];
+    }
+    function C(n) {
+      if (!n) return;
+      const l = n.split(".");
+      let a = f.value;
+      for (const o of l) {
+        if (a == null) return;
+        a = a[o];
+      }
+      return a;
+    }
+    return (n, l) => {
+      const a = U("LayoutRenderer", !0);
+      return r(), d(v, null, [
+        e.isRoot && h.value.length > 0 && u.value.ErrorBlock ? (r(), y(i(u.value.ErrorBlock), {
+          key: 0,
+          errors: h.value
+        }, null, 8, ["errors"])) : g("", !0),
+        e.layout.type === "VerticalLayout" ? (r(), d("div", {
+          key: 1,
+          class: F(["sz-layout sz-layout-vertical", `sz-gap-${e.layout.gap || "md"}`])
+        }, [
+          (r(!0), d(v, null, b(e.layout.elements, (o, k) => (r(), y(a, {
+            key: k,
+            layout: o,
+            components: u.value,
+            "is-root": !1
+          }, null, 8, ["layout", "components"]))), 128))
+        ], 2)) : e.layout.type === "HorizontalLayout" ? (r(), d("div", {
+          key: 2,
+          class: F(["sz-layout sz-layout-horizontal", [`sz-gap-${e.layout.gap || "md"}`, `sz-align-${e.layout.align || "start"}`]])
+        }, [
+          (r(!0), d(v, null, b(e.layout.elements, (o, k) => (r(), y(a, {
+            key: k,
+            layout: o,
+            components: u.value,
+            "is-root": !1
+          }, null, 8, ["layout", "components"]))), 128))
+        ], 2)) : e.layout.type === "Group" ? (r(), y(i(u.value.Group), {
+          key: 3,
+          element: e.layout
+        }, {
+          default: z(() => [
+            e.layout.layout ? (r(), y(a, {
+              key: 0,
+              layout: e.layout.layout,
+              components: u.value,
+              "is-root": !1
+            }, null, 8, ["layout", "components"])) : g("", !0)
+          ]),
+          _: 1
+        }, 8, ["element"])) : e.layout.type === "Tabs" ? (r(), y(i(u.value.Tabs), {
+          key: 4,
+          element: e.layout
+        }, {
+          tab: z(({ tab: o }) => [
+            H(a, {
+              layout: o.layout,
+              components: u.value,
+              "is-root": !1
+            }, null, 8, ["layout", "components"])
+          ]),
+          _: 1
+        }, 8, ["element"])) : e.layout.type === "Conditional" ? (r(), d(v, { key: 5 }, [
+          w(e.layout.when) ? (r(), y(a, {
+            key: 0,
+            layout: e.layout.layout,
+            components: u.value,
+            "is-root": !1
+          }, null, 8, ["layout", "components"])) : g("", !0)
+        ], 64)) : e.layout.type === "Control" ? (r(), y(i(u.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": l[0] || (l[0] = (o) => m(O)(e.layout.field_name, o))
+        }, null, 8, ["element", "model-value", "errors", "context", "form-data", "schema"])) : e.layout.type === "Display" ? (r(), y(i(u.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" ? (r(), y(i(u.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" ? (r(), y(i(u.value.Label), {
+          key: 9,
+          element: e.layout
+        }, null, 8, ["element"])) : e.layout.type === "Divider" ? (r(), y(i(u.value.Divider), { key: 10 })) : (r(), 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statezero/core",
-  "version": "0.2.36",
+  "version": "0.2.38",
   "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": "./src/adaptors/vue/components/layout.css",
-    "./vue/layout.tailwind.css": "./src/adaptors/vue/components/layout.tailwind.css",
+    "./vue/layout.css": "./dist/adaptors/vue/components/layout.css",
     "./testing": {
       "import": "./dist/testing.js",
       "require": "./dist/testing.js"
@@ -42,7 +41,9 @@
     "generate:test-apps": "ts-node scripts/generate-test-apps.js",
     "test:adaptors": "playwright test tests/adaptors",
     "test:coverage": "vitest run --coverage",
-    "build": "tsc",
+    "build": "tsc && npm run build:vue && npm run copy-css",
+    "build:vue": "vite build --config vite.vue.config.ts",
+    "copy-css": "cp src/adaptors/vue/components/*.css dist/adaptors/vue/components/",
     "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",
@@ -75,8 +76,6 @@
   },
   "files": [
     "dist",
-    "src/adaptors/vue/components/layout.css",
-    "src/adaptors/vue/components/layout.tailwind.css",
     "LICENSE",
     "README.md"
   ],
@@ -122,6 +121,8 @@
     "rimraf": "^5.0.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3",
+    "vite": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.2.0",
     "vitest": "^3.0.5",
     "vue": "^3.2.0"
   },

package/dist/actions/backend1/django_app/calculate-hash.d.ts

@@ -1,57 +0,0 @@
-/**
- * Calculate hash of input text (demonstrates string processing)
- *
- * @param string text - Text to hash
- * @param 'md5' | 'sha1' | 'sha256' algorithm - Hash algorithm to use
- * @param {Object} [axiosOverrides] - Allows overriding Axios request parameters.
- * @returns {Promise<Object>} A promise that resolves with the action's result.
- */
-export function calculateHash(text: any, algorithm?: string, axiosOverrides?: Object): Promise<Object>;
-export namespace calculateHash {
-    let actionName: string;
-    let title: string;
-    let app: string;
-    let permissions: string[];
-    let configKey: string;
-}
-/**
- * Zod schema for the input of calculateHash.
- * NOTE: This is an object schema for validating the data payload.
- */
-export const calculateHashInputSchema: z.ZodObject<{
-    text: z.ZodString;
-    algorithm: z.ZodDefault<z.ZodOptional<z.ZodEnum<["md5", "sha1", "sha256"]>>>;
-}, "strip", z.ZodTypeAny, {
-    algorithm: "md5" | "sha1" | "sha256";
-    text: string;
-}, {
-    text: string;
-    algorithm?: "md5" | "sha1" | "sha256" | undefined;
-}>;
-/**
- * Zod schema for the response of calculateHash.
- */
-export const calculateHashResponseSchema: z.ZodObject<{
-    original_text: z.ZodString;
-    algorithm: z.ZodString;
-    hash: z.ZodString;
-    text_length: z.ZodNumber;
-    processed_by: z.ZodString;
-    processed_at: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    original_text: string;
-    algorithm: string;
-    hash: string;
-    text_length: number;
-    processed_by: string;
-    processed_at: string;
-}, {
-    original_text: string;
-    algorithm: string;
-    hash: string;
-    text_length: number;
-    processed_by: string;
-    processed_at: string;
-}>;
-export default calculateHash;
-import { z } from 'zod';

package/dist/actions/backend1/django_app/calculate-hash.js

@@ -1,80 +0,0 @@
-/**
- * This file was auto-generated. Do not make direct changes to the file.
- * Action: Calculate Hash
- * App: django_app
- */
-import axios from 'axios';
-import { z } from 'zod';
-import { configInstance, parseStateZeroError, serializeActionPayload } from '../../../../src';
-import actionSchema from './calculate-hash.schema.json' assert { type: 'json' };
-/**
- * Zod schema for the input of calculateHash.
- * NOTE: This is an object schema for validating the data payload.
- */
-export const calculateHashInputSchema = z.object({ text: z.string(),
-    algorithm: z.enum(["md5", "sha1", "sha256"]).optional().default("sha256") });
-/**
- * Zod schema for the response of calculateHash.
- */
-export const calculateHashResponseSchema = z.object({ original_text: z.string(),
-    algorithm: z.string(),
-    hash: z.string(),
-    text_length: z.number().int(),
-    processed_by: z.string(),
-    processed_at: z.string().datetime({ message: "Invalid ISO 8601 datetime string" }) });
-/**
- * Calculate hash of input text (demonstrates string processing)
- *
- * @param string text - Text to hash
- * @param 'md5' | 'sha1' | 'sha256' algorithm - Hash algorithm to use
- * @param {Object} [axiosOverrides] - Allows overriding Axios request parameters.
- * @returns {Promise<Object>} A promise that resolves with the action's result.
- */
-export async function calculateHash(text, algorithm = "sha256", axiosOverrides = {}) {
-    // Construct the data payload from the function arguments
-    const rawPayload = {
-        text,
-        algorithm
-    };
-    // Serialize payload - handles model instances (extracts PK), files, dates, etc.
-    const payload = serializeActionPayload(rawPayload, actionSchema.input_properties);
-    const config = configInstance.getConfig();
-    const backend = config.backendConfigs['backend1'];
-    if (!backend) {
-        throw new Error(`No backend configuration found for key: backend1`);
-    }
-    const baseUrl = backend.API_URL.replace(/\/+$/, '');
-    const actionUrl = `${baseUrl}/actions/calculate_hash/`;
-    const headers = backend.getAuthHeaders ? backend.getAuthHeaders() : {};
-    try {
-        const response = await axios.post(actionUrl, payload, {
-            headers: { 'Content-Type': 'application/json', ...headers },
-            ...axiosOverrides,
-        });
-        return calculateHashResponseSchema.parse(response.data);
-    }
-    catch (error) {
-        if (error instanceof z.ZodError) {
-            throw new Error(`Calculate Hash failed: Invalid response from server. Details: ${error.message}`);
-        }
-        if (error.response && error.response.data) {
-            const parsedError = parseStateZeroError(error.response.data);
-            if (Error.captureStackTrace) {
-                Error.captureStackTrace(parsedError, calculateHash);
-            }
-            throw parsedError;
-        }
-        else if (error.request) {
-            throw new Error(`Calculate Hash failed: No response received from server.`);
-        }
-        else {
-            throw new Error(`Calculate Hash failed: ${error.message}`);
-        }
-    }
-}
-export default calculateHash;
-calculateHash.actionName = 'calculate_hash';
-calculateHash.title = 'Calculate Hash';
-calculateHash.app = 'django_app';
-calculateHash.permissions = ['ValidatedIsAuthenticated'];
-calculateHash.configKey = 'backend1';