@statezero/core 0.2.34 → 0.2.37

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

@@ -0,0 +1,361 @@
+<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

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,57 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,53 @@
+<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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,54 @@
+<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/defaults/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Create a default components registry (without Control - user must provide)
+ *
+ * @param {Object} options - Override specific components
+ * @returns {Object} Components registry for LayoutRenderer
+ */
+export function createDefaultComponents(options?: Object): Object;

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

@@ -0,0 +1,31 @@
+/**
+ * Default component implementations for LayoutRenderer
+ *
+ * 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';
+/**
+ * Create a default components registry (without Control - user must provide)
+ *
+ * @param {Object} options - Override specific components
+ * @returns {Object} Components registry for LayoutRenderer
+ */
+export function createDefaultComponents(options = {}) {
+    return {
+        Alert: AlertElement,
+        Label: LabelElement,
+        Divider: DividerElement,
+        Display: DisplayElement,
+        Group: GroupElement,
+        Tabs: TabsElement,
+        ErrorBlock: ErrorBlock,
+        ...options
+    };
+}

package/dist/adaptors/vue/components/index.d.ts

@@ -0,0 +1 @@
+export { AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from "./defaults/index.js";

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

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

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

@@ -0,0 +1,51 @@
+/**
+ * StateZero Layout Renderer - Base CSS Styles
+ *
+ * Import this file to get default styling for layout components:
+ *   import '@statezero/core/vue/layout.css'
+ *
+ * Or define your own styles targeting these class names.
+ */
+
+/* Layout containers */
+.sz-layout {
+  display: flex;
+}
+
+.sz-layout-vertical {
+  flex-direction: column;
+}
+
+.sz-layout-horizontal {
+  flex-direction: row;
+}
+
+/* Gap utilities */
+.sz-gap-sm {
+  gap: 0.5rem;
+}
+
+.sz-gap-md {
+  gap: 1rem;
+}
+
+.sz-gap-lg {
+  gap: 1.5rem;
+}
+
+/* Horizontal alignment */
+.sz-align-start {
+  align-items: flex-start;
+}
+
+.sz-align-center {
+  align-items: center;
+}
+
+.sz-align-end {
+  align-items: flex-end;
+}
+
+.sz-align-stretch {
+  align-items: stretch;
+}

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

@@ -0,0 +1,51 @@
+/**
+ * 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;
+}

package/dist/adaptors/vue/index.d.ts

@@ -1,2 +1,3 @@
 export { useQueryset, querysets } from "./composables.js";
 export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor } from "./reactivity.js";
+export { LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from "./components/index.js";

package/dist/adaptors/vue/index.js

@@ -1,2 +1,4 @@
 export { useQueryset, querysets } from './composables.js';
 export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor } from './reactivity.js';
+// Layout components
+export { LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from './components/index.js';

package/dist/vue-entry.d.ts

@@ -3,4 +3,13 @@ import { QuerySetAdaptor } from './adaptors/vue/index.js';
 import { MetricAdaptor } from './adaptors/vue/index.js';
 import { useQueryset } from './adaptors/vue/index.js';
 import { querysets } from './adaptors/vue/index.js';
-export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets };
+import { LayoutRenderer } from './adaptors/vue/index.js';
+import { AlertElement } from './adaptors/vue/index.js';
+import { LabelElement } from './adaptors/vue/index.js';
+import { DividerElement } from './adaptors/vue/index.js';
+import { DisplayElement } from './adaptors/vue/index.js';
+import { GroupElement } from './adaptors/vue/index.js';
+import { TabsElement } from './adaptors/vue/index.js';
+import { ErrorBlock } from './adaptors/vue/index.js';
+import { createDefaultComponents } from './adaptors/vue/index.js';
+export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets, LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents };

package/dist/vue-entry.js

@@ -1,2 +1,7 @@
 import { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets } from './adaptors/vue/index.js';
-export { ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets };
+import { LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents } from './adaptors/vue/index.js';
+export { 
+// Reactivity
+ModelAdaptor, QuerySetAdaptor, MetricAdaptor, useQueryset, querysets, 
+// Layout components
+LayoutRenderer, AlertElement, LabelElement, DividerElement, DisplayElement, GroupElement, TabsElement, ErrorBlock, createDefaultComponents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statezero/core",
-  "version": "0.2.34",
+  "version": "0.2.37",
   "type": "module",
   "module": "ESNext",
   "description": "The type-safe frontend client for StateZero - connect directly to your backend models with zero boilerplate",
@@ -26,11 +26,14 @@
       "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",
     "./testing": {
       "import": "./dist/testing.js",
       "require": "./dist/testing.js"
     },
-    "./dist/*": "./dist/*"
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
   },
   "scripts": {
     "test": "vitest run --config=vitest.base.config.ts",
@@ -39,7 +42,8 @@
     "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 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/",
     "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",