@stonecrop/nuxt 0.13.14 → 0.15.0

package/README.md

@@ -77,22 +77,22 @@ Create a JSON schema in `/doctypes/task.json`:
 {
   "name": "task",
   "label": "Task",
-  "schema": [
+  "fields": [
     {
       "fieldname": "title",
       "label": "Title",
-      "fieldtype": "Data",
+      "component": "ATextInput",
       "required": true
     },
     {
       "fieldname": "description",
       "label": "Description",
-      "fieldtype": "Text"
+      "component": "ATextarea"
     },
     {
       "fieldname": "completed",
       "label": "Completed",
-      "fieldtype": "Check"
+      "component": "ACheckbox"
     }
   ]
 }
@@ -219,13 +219,11 @@ export default defineNuxtConfig({
 
     // Enable DocBuilder for visual schema editing
     docbuilder: false,
-  },
 
-  // Import Stonecrop theme
-  css: [
-    '@stonecrop/themes/default/default.css',
-    // or your custom theme
-  ]
+    // The default theme (@stonecrop/themes/default.css) loads automatically.
+    // Override it, or set `false` to bring your own:
+    // theme: '@stonecrop/themes/dark.css',
+  },
 })
 ```
 
@@ -237,6 +235,7 @@ export default defineNuxtConfig({
 | `routeStrategy` | `RouteStrategyFn` | Custom function receiving all parsed doctypes; returns a `NuxtPage[]`. Takes priority over `pageComponent`. |
 | `docbuilder` | `boolean` | Enable the DocBuilder feature at `/docbuilder`. Defaults to `false`. |
 | `doctypesDir` | `string` | Override the doctypes directory path. Defaults to `doctypes/` inside `srcDir`. |
+| `theme` | `string \| false` | Base theme stylesheet loaded into the host app (supplies the `--sc-*` CSS variables). Defaults to `'@stonecrop/themes/default.css'`; set `false` to load none and bring your own. |
 
 If neither `pageComponent` nor `routeStrategy` is configured the module logs a warning and skips doctype route registration.
 
@@ -375,10 +374,8 @@ export default defineNuxtPlugin(() => {
 | `stonecrop` | `Stonecrop \| undefined` | The Stonecrop instance (undefined if not ready) |
 | `isReady` | `boolean` | `true` when both registry and stonecrop are available |
 | `registerClient(client)` | `(client: DataClient) => void` | Set the data client for record fetching. Throws if stonecrop not available. |
-| `getClient()` | `() => DataClient \| undefined` | Get the currently configured client. |
 | `registerMeta(fn)` | `(fn: (ctx) => Doctype) => void` | Set the `getMeta` function on the Registry. Throws if registry not available. |
 | `registerDoctype(doctype)` | `(doctype: Doctype) => void` | Pre-load a doctype into the Registry. Throws if registry not available. |
-| `dispatchAction(...)` | `Promise<{ success, data, error }>` | Dispatch an action via the configured client. |
 
 ## `useStonecropRegistry()` — Using the Framework in Components
 
@@ -460,12 +457,8 @@ const taskMachine = createMachine({
 
 ## Examples
 
-Check out the [playground](./playground) for an example featuring:
-- Permission management system (RBAC)
-- DocType builder with visual state machine editor
-- Complex nested forms with relationships
-- Table views with inline editing
-- HST state visualization
+- **[playground](./playground)** — the default example: doctypes introspected from a live public GraphQL API with the `stonecrop-schema generate` CLI, browsed through the Desktop shell, and refined in the built-in DocBuilder (provenance-locked introspected fields, plus hand-authored workflow fixtures for the graph editor). `npm run dev` runs it.
+- **[fullstack](./fullstack)** — the middleware core on the app's own GraphQL server (grafserv + guarded workflow transitions over in-memory storage, no database). `npm run dev:full` runs it.
 
 
 ## Contribution
@@ -531,7 +524,7 @@ npx stonecrop-nuxt init
 cd /path/to/stonecrop/nuxt
 npm pack
 cd /tmp/my-test-app
-npm install /path/to/stonecrop/nuxt/stonecrop-nuxt-0.6.3.tgz
+npm install /path/to/stonecrop/nuxt/stonecrop-nuxt-<version>.tgz
 npx stonecrop-nuxt init
 ```
 

package/bin/init.mjs

@@ -10,11 +10,14 @@
 import { defineCommand, runMain } from 'citty'
 import consola from 'consola'
 import { createJiti } from 'jiti'
+import { readFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { dirname, join } from 'node:path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
+const { version } = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf8'))
+
 // Use jiti to load TypeScript CLI code
 const jiti = createJiti(import.meta.url, {
 	interopDefault: true,
@@ -26,7 +29,7 @@ const { runInstaller } = await jiti.import(join(__dirname, '..', 'src', 'cli', '
 const main = defineCommand({
 	meta: {
 		name: 'stonecrop-nuxt',
-		version: '0.6.3',
+		version,
 		description: 'Install Stonecrop modules into your Nuxt project',
 	},
 	subCommands: {

package/dist/module.d.mts

@@ -76,6 +76,16 @@ interface ModuleOptions {
      * ```
      */
     routeStrategy?: RouteStrategyFn;
+    /**
+     * Base theme stylesheet loaded into the host app. Provides the `--sc-*` CSS variables,
+     * applies the document font, and normalizes form controls / code to inherit it. Defaults
+     * to Stonecrop's default theme. Set to `false` to load no theme (bring your own), or pass
+     * a different theme's module specifier / path (e.g. `'@stonecrop/themes/dark.css'`).
+     *
+     * The Stonecrop component packages are theme-agnostic — they consume `--sc-*` variables
+     * but never bundle a theme — so the host must supply one; the module does that here.
+     */
+    theme?: string | false;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@stonecrop/nuxt",
   "configKey": "stonecrop",
-  "version": "0.13.14",
+  "version": "0.15.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { existsSync, realpathSync } from 'node:fs';
 import { readdir, readFile } from 'node:fs/promises';
 import { dirname, extname } from 'node:path';
-import { createResolver, defineNuxtModule, useLogger, addVitePlugin, addLayout, extendPages, addServerHandler, addPlugin, addImportsDir } from '@nuxt/kit';
+import { createResolver, defineNuxtModule, useLogger, addVitePlugin, addLayout, extendPages, addServerHandler, addComponent, addPlugin, addImportsDir } from '@nuxt/kit';
 
 function createSymlinkedPackagesPlugin(options) {
   const { rootDir, packages, logger } = options;
@@ -66,7 +66,8 @@ const module$1 = defineNuxtModule({
   defaults: (_nuxt) => {
     return {
       docbuilder: false,
-      doctypesDir: "doctypes"
+      doctypesDir: "doctypes",
+      theme: "@stonecrop/themes/default.css"
     };
   },
   async setup(options, nuxt) {
@@ -78,6 +79,10 @@ const module$1 = defineNuxtModule({
       }
     }
     logger.log("Added Stonecrop packages to build.transpile for SSR CSS handling");
+    if (options.theme && !nuxt.options.css.includes(options.theme)) {
+      nuxt.options.css.unshift(options.theme);
+      logger.log(`Added Stonecrop theme to app CSS: ${options.theme}`);
+    }
     nuxt.hook("nitro:config", (config) => {
       config.externals = config.externals || {};
       config.externals.inline = config.externals.inline || [];
@@ -104,11 +109,11 @@ const module$1 = defineNuxtModule({
       ...nuxt.options.runtimeConfig.stonecrop ?? {},
       doctypesDir
     };
+    const doctypes = [];
     if (existsSync(doctypesDir)) {
       try {
         const dirContents = await readdir(doctypesDir);
         const schemas = dirContents.filter((file) => extname(file) === ".json");
-        const doctypes = [];
         for (const schema of schemas) {
           try {
             const schemaPath = resolve(doctypesDir, schema);
@@ -120,60 +125,19 @@ const module$1 = defineNuxtModule({
               logger.error(`Failed to parse schema file '${schema}':`, parseError);
               continue;
             }
-            const schemaFields = schemaData.schema || schemaData.fields;
-            if (!schemaFields) {
-              logger.warn(`Schema file '${schema}' missing 'schema' or 'fields' property, skipping`);
+            if (!schemaData.fields) {
+              logger.warn(`Schema file '${schema}' missing 'fields' property, skipping`);
               continue;
             }
             doctypes.push({
               fileName: schema.replace(".json", ""),
               data: schemaData,
-              fields: schemaFields
+              fields: schemaData.fields
             });
           } catch (schemaError) {
             logger.error(`Error processing schema '${schema}':`, schemaError);
           }
         }
-        extendPages((pages) => {
-          const pagePaths = pages.map((page) => page.path);
-          if (!pagePaths.includes("/")) {
-            pages.unshift({
-              name: "stonecrop-home",
-              path: "/",
-              file: homepage
-            });
-            logger.log("Added Stonecrop home page at /");
-          } else {
-            logger.log("Skipping Stonecrop home page: root page already exists");
-          }
-          let generatedPages = [];
-          if (options.routeStrategy) {
-            generatedPages = options.routeStrategy(doctypes);
-          } else if (options.pageComponent) {
-            const componentPath = resolve(appDir, options.pageComponent);
-            generatedPages = doctypes.map(({ fileName, data, fields }) => {
-              const slug = data.slug || fileName.toLowerCase();
-              return {
-                name: `stonecrop-${fileName}`,
-                path: `/${slug}`,
-                file: componentPath,
-                meta: { schema: fields, doctype: data }
-              };
-            });
-          } else {
-            logger.warn(
-              "No routeStrategy or pageComponent configured \u2014 doctype routes will not be registered. Set pageComponent to a page path or provide a routeStrategy function."
-            );
-          }
-          for (const page of generatedPages) {
-            if (!pagePaths.includes(page.path)) {
-              pages.unshift(page);
-              logger.log(`Added route: ${page.path} (${page.name})`);
-            } else {
-              logger.warn(`Route ${page.path} already exists, skipping ${page.name}`);
-            }
-          }
-        });
       } catch (doctypeError) {
         logger.error("Error setting up doctype pages:", doctypeError);
         if (nuxt.options.dev) {
@@ -183,20 +147,93 @@ const module$1 = defineNuxtModule({
         }
       }
     }
-    if (options.docbuilder) {
+    extendPages((pages) => {
+      const pagePaths = pages.map((page) => page.path);
+      if (!pagePaths.includes("/")) {
+        pages.unshift({
+          name: "stonecrop-home",
+          path: "/",
+          file: homepage
+        });
+        logger.log("Added Stonecrop home page at /");
+      } else {
+        logger.log("Skipping Stonecrop home page: root page already exists");
+      }
+      let generatedPages = [];
+      if (options.routeStrategy) {
+        generatedPages = options.routeStrategy(doctypes);
+      } else if (options.pageComponent) {
+        const componentPath = resolve(appDir, options.pageComponent);
+        generatedPages = doctypes.map(({ fileName, data, fields }) => {
+          const slug = data.slug || fileName.toLowerCase();
+          return {
+            name: `stonecrop-${fileName}`,
+            path: `/${slug}`,
+            file: componentPath,
+            meta: { schema: fields, doctype: data }
+          };
+        });
+      } else {
+        logger.warn(
+          "No routeStrategy or pageComponent configured \u2014 doctype routes will not be registered. Set pageComponent to a page path or provide a routeStrategy function."
+        );
+      }
+      for (const page of generatedPages) {
+        if (!pagePaths.includes(page.path)) {
+          pages.unshift(page);
+          logger.log(`Added route: ${page.path} (${page.name})`);
+        } else {
+          logger.warn(`Route ${page.path} already exists, skipping ${page.name}`);
+        }
+      }
+    });
+    if (options.docbuilder && process.env.NODE_ENV === "development") {
       logger.log("DocBuilder enabled, adding routes and handlers");
+      nuxt.options.css.push("@vue-flow/core/dist/style.css");
+      nuxt.options.css.push("@vue-flow/core/dist/theme-default.css");
+      nuxt.options.css.push("@stonecrop/node-editor/styles");
+      nuxt.options.css.push("@stonecrop/desktop/styles");
+      nuxt.options.vite.optimizeDeps = nuxt.options.vite.optimizeDeps || {};
+      nuxt.options.vite.optimizeDeps.include = nuxt.options.vite.optimizeDeps.include || [];
+      for (const dep of ["@stonecrop/code-editor", "@stonecrop/schema"]) {
+        if (!nuxt.options.vite.optimizeDeps.include.includes(dep)) {
+          nuxt.options.vite.optimizeDeps.include.push(dep);
+        }
+      }
+      nuxt.options.vite.optimizeDeps.force = true;
+      nuxt.options.vite.plugins = nuxt.options.vite.plugins || [];
+      nuxt.options.vite.plugins.push({
+        name: "stonecrop:docbuilder-suppress-doctype-reload",
+        handleHotUpdate(ctx) {
+          if (ctx.file.startsWith(doctypesDir)) return [];
+        }
+      });
+      const { createRequire } = await import('node:module');
+      const { resolve: nodeResolve } = await import('node:path');
+      const req = createRequire(import.meta.url);
+      const monacoMinPath = nodeResolve(req.resolve("monaco-editor/package.json"), "../min");
+      nuxt.hook("nitro:config", (nitroConfig) => {
+        nitroConfig.publicAssets = nitroConfig.publicAssets ?? [];
+        nitroConfig.publicAssets.push({
+          dir: monacoMinPath,
+          baseURL: "/stonecrop-monaco",
+          maxAge: 60 * 60 * 24 * 365
+        });
+      });
       const docBuilderIndex = resolve("runtime/app/pages/DocBuilderIndex.vue");
       const docBuilderDetail = resolve("runtime/app/pages/DocBuilderDetail.vue");
       extendPages((pages) => {
         pages.push({
           name: "docbuilder-index",
           path: "/docbuilder",
-          file: docBuilderIndex
+          file: docBuilderIndex,
+          meta: { layout: false }
         });
         pages.push({
           name: "docbuilder-detail",
           path: "/docbuilder/:doctype",
-          file: docBuilderDetail
+          file: docBuilderDetail,
+          meta: { layout: false }
         });
         logger.log("Added DocBuilder pages at /docbuilder");
       });
@@ -220,6 +257,10 @@ const module$1 = defineNuxtModule({
         handler: resolve(handlersDir, "save.post")
       });
       logger.log("Added DocBuilder API handlers at /api/_stonecrop/docbuilder/");
+      addComponent({
+        name: "DocBuilderActionsPanel",
+        filePath: resolve("runtime/app/components/DocBuilderActionsPanel.vue")
+      });
     }
     const pluginPath = resolve("./runtime/plugin");
     try {

package/dist/runtime/app/components/DocBuilderActionsPanel.d.vue.ts

@@ -0,0 +1,59 @@
+import type { WorkflowMeta } from '@stonecrop/schema';
+type __VLS_Props = {
+    modelValue: WorkflowMeta | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        states?: string[] | undefined;
+        actions?: Record<string, {
+            label: string;
+            requiredFields?: string[] | undefined;
+            allowedStates?: string[] | undefined;
+            nextState?: string | undefined;
+            stateless?: boolean | undefined;
+            selfTransition?: boolean | undefined;
+            clientHandler?: string | undefined;
+        }> | undefined;
+        triggers?: Record<string, {
+            on: string[];
+            clientHandler: string;
+            label?: string | undefined;
+        }> | undefined;
+        layout?: Record<string, {
+            position?: {
+                x: number;
+                y: number;
+            } | undefined;
+            targetPosition?: "left" | "right" | "top" | "bottom" | undefined;
+            sourcePosition?: "left" | "right" | "top" | "bottom" | undefined;
+        }> | undefined;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        states?: string[] | undefined;
+        actions?: Record<string, {
+            label: string;
+            requiredFields?: string[] | undefined;
+            allowedStates?: string[] | undefined;
+            nextState?: string | undefined;
+            stateless?: boolean | undefined;
+            selfTransition?: boolean | undefined;
+            clientHandler?: string | undefined;
+        }> | undefined;
+        triggers?: Record<string, {
+            on: string[];
+            clientHandler: string;
+            label?: string | undefined;
+        }> | undefined;
+        layout?: Record<string, {
+            position?: {
+                x: number;
+                y: number;
+            } | undefined;
+            targetPosition?: "left" | "right" | "top" | "bottom" | undefined;
+            sourcePosition?: "left" | "right" | "top" | "bottom" | undefined;
+        }> | undefined;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/DocBuilderActionsPanel.vue

@@ -0,0 +1,175 @@
+<template>
+	<div class="actions-panel">
+		<ATable v-if="hasRows" :columns="ACTION_COLUMNS" :rows="rows" :config="{ view: 'list-expansion', fullWidth: true }">
+			<!--
+				ATable owns the frame (header, filter row, expansion chrome). We override #body to keep
+				the per-row #content editor and to bind cells straight to the source via the write helpers
+				— ATable never calls setCellData/handleRowAction, so it never mutates the projection it renders.
+			-->
+			<template #body="{ data: store }">
+				<ARow v-for="row in store.filteredRows" :key="String(row.__key)" :row-index="row.originalIndex" :store="store">
+					<template #default>
+						<td>
+							<!-- A Transition is named on its edge in the graph (single source of truth), so its
+								name is read-only here; Commands and Triggers have no graph, so they're named here. -->
+							<span
+								v-if="row.kind === 'transition' || row.kind === 'self-transition'"
+								class="cell-readonly"
+								:title="TRANSITION_NAME_HINT">
+								{{ row.label }}
+							</span>
+							<input
+								v-else
+								type="text"
+								:value="row.label"
+								placeholder="Name"
+								@input="onFieldInput(row, 'label', $event.target.value)" />
+						</td>
+						<td>
+							<span class="badge" :class="`badge-${row.kind}`">
+								{{ row.type }}
+							</span>
+						</td>
+					</template>
+					<template #content>
+						<div class="row-detail">
+							<!-- Type-specific fields live here so the collapsed row keeps to the common columns. -->
+							<div v-if="row.kind === 'trigger'" class="detail-field">
+								<label class="detail-label">On (fields)</label>
+								<input
+									type="text"
+									:value="onDisplay(row)"
+									placeholder="fields, comma-separated"
+									@input="onOnInput(row, $event.target.value)" />
+							</div>
+							<template v-else>
+								<div class="detail-field">
+									<label class="detail-label">Allowed States</label>
+									<span class="detail-value">{{ row.allowedStates }}</span>
+								</div>
+								<div v-if="row.kind === 'transition'" class="detail-field">
+									<label class="detail-label">Next State</label>
+									<span class="detail-value">{{ row.nextState }}</span>
+								</div>
+							</template>
+
+							<div class="client-handler-editor">
+								<label class="handler-label">Client Handler (JS)</label>
+								<ACodeEditor
+									:model-value="(row.__action ?? row.__trigger)?.clientHandler ?? ''"
+									:extra-libs="row.kind === 'trigger' ? TRIGGER_API_STUBS : INJECTED_API_STUBS"
+									:libs="EDITOR_LIBS"
+									:vs-path="VS_PATH"
+									:options="row.kind === 'trigger' ? TRIGGER_EDITOR_OPTIONS : EDITOR_OPTIONS"
+									language="javascript"
+									height="200px"
+									@update:model-value="onFieldInput(row, 'clientHandler', $event)" />
+							</div>
+
+							<!-- Transitions and self-transitions are graph-owned — removed by deleting their
+								edges (a self-loop is an edge too), not here. -->
+							<button
+								v-if="row.kind !== 'transition' && row.kind !== 'self-transition'"
+								type="button"
+								class="remove-row"
+								@click="onRemoveRow(row)">
+								Remove {{ row.kind }}
+							</button>
+						</div>
+					</template>
+				</ARow>
+			</template>
+		</ATable>
+		<p v-else class="actions-empty">
+			No actions or triggers yet. Draw transitions in the workflow graph above, or add a command or trigger below.
+		</p>
+		<div class="panel-footer">
+			<button type="button" class="add-row" @click="onAddCommand">+ Add Command</button>
+			<button type="button" class="add-row" @click="onAddTrigger">+ Add Trigger</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ATable, ARow } from "@stonecrop/atable";
+import { ACodeEditor } from "@stonecrop/code-editor";
+import { computed, reactive } from "vue";
+import {
+  addCommand,
+  addTrigger,
+  parseOnInput,
+  projectWorkflowRows,
+  removeAction,
+  removeTrigger,
+  writeActionField,
+  writeTriggerField
+} from "./docbuilderActions";
+const TRANSITION_NAME_HINT = "Rename this transition on its edge in the workflow graph above";
+const INJECTED_API_STUBS = `
+declare const router: {
+  push(to: string | object): Promise<void>
+  replace(to: string | object): Promise<void>
+  back(): void
+  forward(): void
+}
+declare function runAction(action: string, args?: Record<string, unknown>): Promise<{ success: boolean; data: unknown; error: string | null }>
+declare const graphql: {
+  query(query: string, variables?: Record<string, unknown>): Promise<unknown>
+}
+declare const record: Record<string, unknown>
+`;
+const TRIGGER_API_STUBS = `
+declare const record: Record<string, unknown>
+declare const value: unknown
+declare function setError(field: string, message: string): void
+`;
+const VS_PATH = "/stonecrop-monaco/vs";
+const EDITOR_OPTIONS = {
+  placeholder: "e.g.  await runAction('Submit');  router.push(`/issue/${record.id}`)"
+};
+const TRIGGER_EDITOR_OPTIONS = {
+  placeholder: "e.g.  if (value < 0) setError('amount', 'Must be positive')"
+};
+const EDITOR_LIBS = ["es2020"];
+const ACTION_COLUMNS = [
+  { name: "label", label: "Label", sortable: false },
+  { name: "type", label: "Type", sortable: false, filterable: true, filterType: "select" }
+];
+const props = defineProps({
+  modelValue: { type: null, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const rows = computed(() => projectWorkflowRows(props.modelValue));
+const hasRows = computed(() => rows.value.length > 0);
+function onFieldInput(row, field, value) {
+  if (!props.modelValue) return;
+  const next = row.kind === "trigger" ? writeTriggerField(props.modelValue, row.__key, field, value) : writeActionField(props.modelValue, row.__key, field, value);
+  emit("update:modelValue", next);
+}
+const onDrafts = reactive({});
+function onDisplay(row) {
+  const draft = onDrafts[row.__key];
+  return draft ?? row.on;
+}
+function onOnInput(row, value) {
+  if (!props.modelValue) return;
+  onDrafts[row.__key] = value;
+  emit("update:modelValue", writeTriggerField(props.modelValue, row.__key, "on", parseOnInput(value)));
+}
+function onAddTrigger() {
+  emit("update:modelValue", addTrigger(props.modelValue));
+}
+function onAddCommand() {
+  emit("update:modelValue", addCommand(props.modelValue));
+}
+function onRemoveRow(row) {
+  if (!props.modelValue) return;
+  onDrafts[row.__key] = void 0;
+  const next = row.kind === "trigger" ? removeTrigger(props.modelValue, row.__key) : removeAction(props.modelValue, row.__key);
+  emit("update:modelValue", next);
+}
+</script>
+
+<style scoped>
+.actions-panel{padding:.5em 1em}.actions-panel :deep(.atable-row>td){border-top:1px solid var(--sc-row-border-color,#e5e7eb);padding:var(--sc-atable-row-padding,.25rem) .75em;vertical-align:middle}.actions-panel :deep(input[type=text]){border:1px solid var(--sc-gray-20,#d1d5db);border-radius:3px;font-family:inherit;font-size:inherit;padding:.25em .5em;width:100%}.actions-panel :deep(input[type=text]:focus){border-color:var(--sc-blue-40,#3b82f6);outline:none}.cell-readonly{color:var(--sc-gray-60,#4b5563);cursor:default}.badge{border-radius:9999px;display:inline-block;font-size:.75rem;font-weight:500;padding:.125em .5em}.badge-transition{background:#dbeafe;color:#1e40af}.badge-self-transition{background:#fef3c7;color:#92400e}.badge-command{background:#f3e8ff;color:#6b21a8}.badge-trigger{background:#dcfce7;color:#166534}.actions-empty{color:#9ca3af;font-style:italic;padding:1rem 0;text-align:center}.panel-footer{display:flex;gap:.5rem;padding:.75rem 0 .25rem}.add-row{background:var(--sc-blue-40,#3b82f6);border:none;border-radius:.4rem;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:500;padding:.4em .9em}.row-detail{gap:.75rem}.detail-field,.row-detail{display:flex;flex-direction:column}.detail-field{gap:.25rem}.detail-label{color:var(--sc-header-text-color,#374151);font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.detail-value{color:var(--sc-gray-60,#4b5563);font-size:.8125rem}.client-handler-editor{display:flex;flex-direction:column;gap:.5rem}.handler-label{color:var(--sc-header-text-color,#374151);font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.remove-row{align-self:flex-start;background:none;border:1px solid #fca5a5;border-radius:.3rem;color:#b91c1c;cursor:pointer;font-size:.75rem;padding:.3em .75em}
+</style>

package/dist/runtime/app/components/DocBuilderActionsPanel.vue.d.ts

@@ -0,0 +1,59 @@
+import type { WorkflowMeta } from '@stonecrop/schema';
+type __VLS_Props = {
+    modelValue: WorkflowMeta | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        states?: string[] | undefined;
+        actions?: Record<string, {
+            label: string;
+            requiredFields?: string[] | undefined;
+            allowedStates?: string[] | undefined;
+            nextState?: string | undefined;
+            stateless?: boolean | undefined;
+            selfTransition?: boolean | undefined;
+            clientHandler?: string | undefined;
+        }> | undefined;
+        triggers?: Record<string, {
+            on: string[];
+            clientHandler: string;
+            label?: string | undefined;
+        }> | undefined;
+        layout?: Record<string, {
+            position?: {
+                x: number;
+                y: number;
+            } | undefined;
+            targetPosition?: "left" | "right" | "top" | "bottom" | undefined;
+            sourcePosition?: "left" | "right" | "top" | "bottom" | undefined;
+        }> | undefined;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        states?: string[] | undefined;
+        actions?: Record<string, {
+            label: string;
+            requiredFields?: string[] | undefined;
+            allowedStates?: string[] | undefined;
+            nextState?: string | undefined;
+            stateless?: boolean | undefined;
+            selfTransition?: boolean | undefined;
+            clientHandler?: string | undefined;
+        }> | undefined;
+        triggers?: Record<string, {
+            on: string[];
+            clientHandler: string;
+            label?: string | undefined;
+        }> | undefined;
+        layout?: Record<string, {
+            position?: {
+                x: number;
+                y: number;
+            } | undefined;
+            targetPosition?: "left" | "right" | "top" | "bottom" | undefined;
+            sourcePosition?: "left" | "right" | "top" | "bottom" | undefined;
+        }> | undefined;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/DocBuilderFieldsPanel.d.vue.ts

@@ -0,0 +1,11 @@
+type Field = Record<string, unknown>;
+type __VLS_Props = {
+    modelValue: Field[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Field[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Field[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;