@stonecrop/nuxt 0.13.14 → 0.14.0

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

@@ -0,0 +1,353 @@
+<template>
+	<div class="fields-panel">
+		<!-- Shared by every row's component input; the id is instance-scoped so two mounted panels
+			 cannot collide. -->
+		<datalist :id="componentListId">
+			<option v-for="c in CANONICAL_COMPONENTS" :key="c" :value="c" />
+		</datalist>
+		<!--
+			ATable owns the frame (header, filter row, list-expansion chrome). We override #body to
+			keep the per-row #content property form and to bind every cell straight to the source via
+			update() — ATable never calls setCellData/handleRowAction, so it never mutates the
+			projection. After a structural edit (add/delete/move/duplicate) we collapse all rows via
+			the exposed store, so ATable's index-keyed expand state can't outlive a reorder — without
+			remounting, which would also drop the active filter.
+		-->
+		<ATable v-if="hasFields" ref="tableRef" :columns="FIELD_COLUMNS" :rows="fieldProjection" :config="FIELD_CONFIG">
+			<template #body="{ data: store }">
+				<ARow
+					v-for="row in store.filteredRows"
+					:key="row.__realIndex"
+					:row-index="row.originalIndex"
+					:store="store"
+					@row:action="onRowAction">
+					<template #default>
+						<td>
+							<input
+								type="text"
+								:value="row.fieldname"
+								:disabled="isLocked(row.__field)"
+								:class="{ locked: isLocked(row.__field) }"
+								@input="update(row.__realIndex, 'fieldname', value($event))" />
+						</td>
+						<td>
+							<input
+								type="text"
+								:value="row.label"
+								@input="update(row.__realIndex, 'label', value($event) || void 0)" />
+						</td>
+						<td>
+							<!--
+								`component` is an open axis — naming a custom component is how an app renders a
+								field Stonecrop ships no widget for — so this suggests the canonical set rather
+								than restricting to it. A <select> would show a blank box for any custom
+								component and make new ones unauthorable. Not frozen for introspected fields:
+								the widget is an authoring choice, not a database fact (see ValueField.source).
+							-->
+							<input
+								type="text"
+								:value="row.component"
+								:list="componentListId"
+								@input="update(row.__realIndex, 'component', value($event) || void 0)" />
+						</td>
+						<td class="center">
+							<input
+								type="checkbox"
+								:checked="bool(row.required)"
+								:disabled="isLocked(row.__field)"
+								@change="update(row.__realIndex, 'required', checked($event) || void 0)" />
+						</td>
+						<td>
+							<span class="badge" :class="isLocked(row.__field) ? 'badge-introspected' : 'badge-manual'">
+								{{ isLocked(row.__field) ? "introspected" : "manual" }}
+							</span>
+						</td>
+					</template>
+					<template #content>
+						<div class="field-detail">
+							<label v-for="p in TEXT_PROPS" :key="p.key" class="field-prop">
+								<span>{{ p.label }}</span>
+								<input
+									type="text"
+									:value="str(row.__field[p.key])"
+									:disabled="!!p.identity && isLocked(row.__field)"
+									@input="update(row.__realIndex, p.key, value($event) || void 0)" />
+							</label>
+							<label v-for="p in SELECT_PROPS" :key="p.key" class="field-prop">
+								<span>{{ p.label }}</span>
+								<select
+									:value="str(row.__field[p.key])"
+									:disabled="!!p.identity && isLocked(row.__field)"
+									@change="update(row.__realIndex, p.key, value($event) || void 0)">
+									<option value="">—</option>
+									<option v-for="o in p.options" :key="o" :value="o">{{ o }}</option>
+								</select>
+							</label>
+							<label v-for="p in BOOL_PROPS" :key="p.key" class="field-prop field-prop-inline">
+								<input
+									type="checkbox"
+									:checked="bool(row.__field[p.key])"
+									:disabled="!!p.identity && isLocked(row.__field)"
+									@change="update(row.__realIndex, p.key, checked($event) || void 0)" />
+								<span>{{ p.label }}</span>
+							</label>
+							<label v-for="p in JSON_PROPS" :key="p.key" class="field-prop field-prop-wide">
+								<span>{{ p.label }} <em>(JSON — smart controls pending)</em></span>
+								<input
+									type="text"
+									:value="jsonStr(row.__field[p.key])"
+									:disabled="!!p.identity && isLocked(row.__field)"
+									:class="{ 'json-invalid': jsonErrors[`${row.__realIndex}:${p.key}`] }"
+									@change="updateJson(row.__realIndex, p.key, value($event))" />
+							</label>
+							<label class="field-prop field-prop-wide">
+								<span>Validation message</span>
+								<input
+									type="text"
+									:value="str(validationMessage(row.__field))"
+									@input="updateValidation(row.__realIndex, value($event))" />
+							</label>
+						</div>
+						<div v-if="isLocked(row.__field)" class="field-detail-actions">
+							<span class="locked-note">
+								Identity (id, primary key, required, options, cardinality, link target) is read-only — this field
+								mirrors a database column. Component is yours to choose.
+							</span>
+						</div>
+					</template>
+				</ARow>
+			</template>
+		</ATable>
+		<p v-else class="fields-empty">No fields yet.</p>
+		<div class="fields-add">
+			<button class="btn-add" type="button" @click="addField">+ Add field</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ATable, ARow } from "@stonecrop/atable";
+import { CANONICAL_COMPONENTS } from "@stonecrop/schema";
+import { computed, nextTick, ref, useId } from "vue";
+const componentListId = useId();
+const TEXT_PROPS = [
+  { key: "doctype", label: "Link target", identity: true },
+  { key: "width", label: "Width" },
+  { key: "mask", label: "Mask" },
+  { key: "format", label: "Format" },
+  { key: "language", label: "Code language" }
+];
+const SELECT_PROPS = [
+  { key: "align", label: "Align", options: ["left", "center", "right", "start", "end"] },
+  { key: "mode", label: "Mode", options: ["edit", "read", "display"] },
+  {
+    key: "cardinality",
+    label: "Cardinality",
+    options: ["atMostOne", "one", "noneOrMany", "atLeastOne"],
+    identity: true
+  }
+];
+const BOOL_PROPS = [
+  { key: "readOnly", label: "Read only" },
+  { key: "hidden", label: "Hidden" },
+  { key: "edit", label: "Editable in table" },
+  { key: "primaryKey", label: "Primary key", identity: true },
+  { key: "computed", label: "Computed (no DB column)" }
+];
+const JSON_PROPS = [
+  { key: "options", label: "Options", identity: true },
+  { key: "default", label: "Default" }
+];
+const FIELD_COLUMNS = [
+  { name: "fieldname", label: "ID", sortable: false, filterable: true },
+  { name: "label", label: "Label", sortable: false },
+  { name: "component", label: "Component", sortable: false, filterable: true, filterType: "select" },
+  { name: "required", label: "Required", sortable: false, align: "center" },
+  { name: "source", label: "Source", sortable: false, filterable: true, filterType: "select" }
+];
+const FIELD_CONFIG = {
+  view: "list-expansion",
+  fullWidth: true,
+  rowActions: {
+    enabled: true,
+    forceDropdown: true,
+    position: "before-index",
+    actions: {
+      moveUp: { enabled: true, label: "Move up", disabled: (rowIndex) => rowIndex === 0 },
+      moveDown: {
+        enabled: true,
+        label: "Move down",
+        disabled: (rowIndex, store) => rowIndex === store.rows.length - 1
+      },
+      duplicate: { enabled: true, label: "Duplicate" },
+      insertAbove: { enabled: true, label: "Insert above" },
+      insertBelow: { enabled: true, label: "Insert below" },
+      delete: {
+        enabled: true,
+        label: "Delete",
+        disabled: (rowIndex, store) => isLocked(store.rows[rowIndex]?.__field ?? {})
+      }
+    }
+  }
+};
+const props = defineProps({
+  modelValue: { type: Array, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+function isValueField(f) {
+  if (typeof f.kind === "string") return f.kind === "field";
+  return !("schema" in f) && !("columns" in f);
+}
+function isLocked(f) {
+  return f.source === "introspected";
+}
+const valueFieldRows = computed(() => {
+  const out = [];
+  props.modelValue.forEach((f, realIndex) => {
+    if (isValueField(f)) out.push({ field: f, realIndex, rowIndex: out.length });
+  });
+  return out;
+});
+const hasFields = computed(() => valueFieldRows.value.length > 0);
+const fieldProjection = computed(
+  () => valueFieldRows.value.map((r) => ({
+    fieldname: str(r.field.fieldname),
+    label: str(r.field.label),
+    component: str(r.field.component),
+    required: r.field.required === true,
+    source: isLocked(r.field) ? "introspected" : "manual",
+    __realIndex: r.realIndex,
+    __field: r.field
+  }))
+);
+const tableRef = ref();
+function collapseAllRows() {
+  const store = tableRef.value?.store;
+  if (!store) return;
+  store.display.forEach((d, i) => {
+    if (d.expanded) store.toggleRowExpand(i);
+  });
+}
+function update(realIndex, key, val) {
+  emit(
+    "update:modelValue",
+    props.modelValue.map((f, i) => i === realIndex ? setOrDelete(f, key, val) : f)
+  );
+}
+function setOrDelete(field, key, val) {
+  if (val === void 0) {
+    const { [key]: _omit, ...rest } = field;
+    return rest;
+  }
+  return { ...field, [key]: val };
+}
+const jsonErrors = ref({});
+function jsonStr(v) {
+  return v === void 0 ? "" : JSON.stringify(v);
+}
+function updateJson(realIndex, key, raw) {
+  const errKey = `${realIndex}:${key}`;
+  if (raw.trim() === "") {
+    jsonErrors.value[errKey] = false;
+    update(realIndex, key, void 0);
+    return;
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    jsonErrors.value[errKey] = false;
+    update(realIndex, key, parsed);
+  } catch {
+    jsonErrors.value[errKey] = true;
+  }
+}
+function validationMessage(field) {
+  const v = field.validation;
+  if (v && typeof v === "object" && "errorMessage" in v)
+    return String(v.errorMessage ?? "");
+  return "";
+}
+function updateValidation(realIndex, message) {
+  update(realIndex, "validation", message ? { errorMessage: message } : void 0);
+}
+function addField() {
+  const base = { kind: "field", fieldname: uniqueName(), component: "ATextInput", label: "New Field" };
+  emit("update:modelValue", [...props.modelValue, base]);
+  void nextTick(collapseAllRows);
+}
+function insertField(at) {
+  const base = { kind: "field", fieldname: uniqueName(), component: "ATextInput", label: "New Field" };
+  const next = props.modelValue.slice();
+  next.splice(at, 0, base);
+  emit("update:modelValue", next);
+  void nextTick(collapseAllRows);
+}
+function onRowAction(type, rowIndex) {
+  const realIndex = fieldProjection.value[rowIndex]?.__realIndex;
+  if (realIndex === void 0) return;
+  if (type === "moveUp") moveField(realIndex, -1);
+  else if (type === "moveDown") moveField(realIndex, 1);
+  else if (type === "duplicate") duplicateField(realIndex);
+  else if (type === "delete") removeField(realIndex);
+  else if (type === "insertAbove") insertField(realIndex);
+  else if (type === "insertBelow") insertField(realIndex + 1);
+}
+function uniqueName() {
+  const existing = new Set(props.modelValue.map((f) => String(f.fieldname ?? "")));
+  let name = "new_field";
+  let n = 1;
+  while (existing.has(name)) name = `new_field_${++n}`;
+  return name;
+}
+function removeField(realIndex) {
+  emit(
+    "update:modelValue",
+    props.modelValue.filter((_, i) => i !== realIndex)
+  );
+  void nextTick(collapseAllRows);
+}
+function duplicateField(realIndex) {
+  const original = props.modelValue[realIndex];
+  if (!original) return;
+  const { source: _source, ...rest } = original;
+  const existing = new Set(props.modelValue.map((f) => String(f.fieldname ?? "")));
+  const baseName = `${String(rest.fieldname ?? "field")}_copy`;
+  let fieldname = baseName;
+  let n = 1;
+  while (existing.has(fieldname)) fieldname = `${baseName}_${++n}`;
+  const clone = { ...rest, fieldname };
+  const next = props.modelValue.slice();
+  next.splice(realIndex + 1, 0, clone);
+  emit("update:modelValue", next);
+  void nextTick(collapseAllRows);
+}
+function moveField(realIndex, dir) {
+  const rows = valueFieldRows.value;
+  const pos = rows.findIndex((r) => r.realIndex === realIndex);
+  const target = rows[pos + dir];
+  if (!target) return;
+  const next = props.modelValue.slice();
+  const a = next[realIndex];
+  const b = next[target.realIndex];
+  if (a === void 0 || b === void 0) return;
+  next[realIndex] = b;
+  next[target.realIndex] = a;
+  emit("update:modelValue", next);
+  void nextTick(collapseAllRows);
+}
+function value(e) {
+  return e.target.value;
+}
+function checked(e) {
+  return e.target.checked;
+}
+function str(v) {
+  return v == null ? "" : String(v);
+}
+function bool(v) {
+  return v === true;
+}
+</script>
+
+<style scoped>
+.fields-panel{padding:.5em 1em}.fields-panel :deep(.atable-row>td){border-top:1px solid var(--sc-row-border-color,#e5e7eb);padding:var(--sc-atable-row-padding,.125rem) .75em;vertical-align:middle}.fields-panel :deep(input[type=text]),.fields-panel :deep(select){border:1px solid var(--sc-gray-20,#d1d5db);border-radius:3px;font-family:inherit;font-size:inherit;padding:.25em .5em;width:100%}.fields-panel :deep(input.locked),.fields-panel :deep(select.locked){background:var(--sc-gray-10,#f3f4f6);color:#6b7280;cursor:not-allowed}.fields-panel :deep(input.json-invalid){background:#fef2f2;border-color:#f87171}.center{text-align:center}.badge{border-radius:9999px;display:inline-block;font-size:.75rem;font-weight:500;padding:.125em .5em}.badge-manual{background:#dcfce7;color:#166534}.badge-introspected{background:#e0e7ff;color:#3730a3}.field-detail{display:grid;gap:.75rem 1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));padding:.75rem 1rem}.field-prop{color:var(--sc-header-text-color,#374151);display:flex;flex-direction:column;font-size:.75rem;gap:.25rem}.field-prop-inline{align-items:center;flex-direction:row;gap:.5rem}.field-prop-wide{grid-column:1/-1}.field-detail-actions{align-items:center;display:flex;gap:1rem;justify-content:space-between;padding:0 1rem .75rem}.locked-note{color:#6b7280;font-size:.75rem;font-style:italic}.btn-add{background:none;border:1px dashed var(--sc-gray-20,#d1d5db);border-radius:4px;color:var(--sc-blue-40,#2563eb);cursor:pointer;font-size:.875rem;margin-top:.5rem;padding:.4em 1em}.fields-empty{color:#9ca3af;font-style:italic;padding:1rem 0}
+</style>

package/dist/runtime/app/components/DocBuilderFieldsPanel.vue.d.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;

package/dist/runtime/app/components/docbuilderActions.d.ts

@@ -0,0 +1,62 @@
+import type { ActionDefinition, TriggerDefinition, WorkflowMeta } from '@stonecrop/schema';
+/**
+ * Pure projection + write helpers backing {@link DocBuilderActionsPanel}. Extracted from the SFC
+ * so they are unit-testable in a plain node environment — the panel itself embeds a Monaco editor
+ * (`ACodeEditor`) that cannot mount in the nuxt package's DOM-less test env, so its wiring is
+ * browser-verified while this logic is covered by `nuxt/test/docbuilderActions.test.ts`.
+ *
+ * The panel authors two sibling maps at once: `workflow.actions` (Transitions + stateless Commands,
+ * created via the graph) and `workflow.triggers` (field-validation Triggers, created here). Both are
+ * projected into one table; writes are routed back to the correct map, always preserving the other.
+ */
+export type RowKind = 'transition' | 'self-transition' | 'command' | 'trigger';
+/** A single table row — column scalars ATable renders via `row[name]`, plus `__`-prefixed backrefs. */
+export interface ActionRow {
+    key: string;
+    label: string;
+    type: 'Transition' | 'Self-transition' | 'Command' | 'Trigger';
+    kind: RowKind;
+    /** Comma-joined fire-set for Triggers; `'—'` for actions (they don't fire on field edits). */
+    on: string;
+    allowedStates: string;
+    nextState: string;
+    __key: string;
+    __kind: RowKind;
+    __action?: ActionDefinition;
+    __trigger?: TriggerDefinition;
+}
+/** Join a Trigger's `on` fire-set for display. */
+export declare function formatOn(on: string[] | undefined): string;
+/** Parse the `on` text input (comma-separated fieldnames) into a trimmed, empty-free array. */
+export declare function parseOnInput(value: string): string[];
+/**
+ * Project both sibling maps into one row list — action rows first, then trigger rows. The `kind`
+ * discriminant drives the Type badge and routes cell edits (a Trigger can never be mistaken for a
+ * Transition/Command because it comes from a different map, not a `stateless` guess).
+ */
+export declare function projectWorkflowRows(workflow: WorkflowMeta | undefined): ActionRow[];
+/** The lowest-numbered `triggerN` key not already present — deterministic (no RNG). */
+export declare function nextTriggerKey(triggers: Record<string, TriggerDefinition> | undefined): string;
+/** The lowest-numbered `commandN` key not already present in the actions map — deterministic. */
+export declare function nextCommandKey(actions: Record<string, ActionDefinition> | undefined): string;
+/** Write one field of an existing action, preserving every other action and the whole triggers map. */
+export declare function writeActionField(workflow: WorkflowMeta, key: string, field: string, value: unknown): WorkflowMeta;
+/** Write one field of an existing trigger, preserving every other trigger and the whole actions map. */
+export declare function writeTriggerField(workflow: WorkflowMeta, key: string, field: string, value: unknown): WorkflowMeta;
+/** Append an empty Trigger under a fresh `triggerN` key, seeding a workflow when there is none yet. */
+export declare function addTrigger(workflow: WorkflowMeta | undefined): WorkflowMeta;
+/**
+ * Append a stateless Command under a fresh `commandN` key, seeding a workflow when there is none yet.
+ * Unlike a Trigger, a Command needs a non-empty label — `ActionDefinition.label` is `.min(1)`, so an
+ * empty seed would fail doctype validation the instant it is added. It carries no `allowedStates`, so
+ * it is available in every state; per-state scoping is not authored here (deferred to the graph).
+ */
+export declare function addCommand(workflow: WorkflowMeta | undefined): WorkflowMeta;
+/** Remove a Trigger, preserving every other trigger and the whole actions map. */
+export declare function removeTrigger(workflow: WorkflowMeta, key: string): WorkflowMeta;
+/**
+ * Remove an action from the actions map, preserving every other action and the triggers map. Used to
+ * delete a Command from the panel — Transitions are never removed this way (they are graph-owned; you
+ * delete a Transition by removing its edges), so the caller must guard by `kind`.
+ */
+export declare function removeAction(workflow: WorkflowMeta, key: string): WorkflowMeta;

package/dist/runtime/app/components/docbuilderActions.js

@@ -0,0 +1,87 @@
+const NA = "\u2014";
+export function formatOn(on) {
+  return (on ?? []).join(", ");
+}
+export function parseOnInput(value) {
+  return value.split(",").map((part) => part.trim()).filter(Boolean);
+}
+export function projectWorkflowRows(workflow) {
+  const actionRows = Object.entries(workflow?.actions ?? {}).map(([key, action]) => {
+    const kind = action.selfTransition ? "self-transition" : action.stateless ? "command" : "transition";
+    const type = action.selfTransition ? "Self-transition" : action.stateless ? "Command" : "Transition";
+    return {
+      key,
+      label: action.label ?? "",
+      type,
+      kind,
+      on: NA,
+      allowedStates: action.allowedStates?.join(", ") ?? "(all states)",
+      // Only a plain Transition has a target state; self-transitions stay put, Commands are stateless.
+      nextState: kind === "transition" ? action.nextState ?? "" : NA,
+      __key: key,
+      __kind: kind,
+      __action: action
+    };
+  });
+  const triggerRows = Object.entries(workflow?.triggers ?? {}).map(([key, trigger]) => ({
+    key,
+    label: trigger.label ?? "",
+    type: "Trigger",
+    kind: "trigger",
+    on: formatOn(trigger.on),
+    allowedStates: NA,
+    nextState: NA,
+    __key: key,
+    __kind: "trigger",
+    __trigger: trigger
+  }));
+  return [...actionRows, ...triggerRows];
+}
+export function nextTriggerKey(triggers) {
+  let n = 1;
+  while (triggers && `trigger${n}` in triggers) n++;
+  return `trigger${n}`;
+}
+export function nextCommandKey(actions) {
+  let n = 1;
+  while (actions && `command${n}` in actions) n++;
+  return `command${n}`;
+}
+export function writeActionField(workflow, key, field, value) {
+  const actions = workflow.actions ?? {};
+  return {
+    ...workflow,
+    actions: { ...actions, [key]: { ...actions[key], [field]: value } }
+  };
+}
+export function writeTriggerField(workflow, key, field, value) {
+  const triggers = workflow.triggers ?? {};
+  return {
+    ...workflow,
+    triggers: { ...triggers, [key]: { ...triggers[key], [field]: value } }
+  };
+}
+export function addTrigger(workflow) {
+  const triggers = workflow?.triggers ?? {};
+  const key = nextTriggerKey(triggers);
+  return {
+    ...workflow,
+    triggers: { ...triggers, [key]: { label: "", on: [], clientHandler: "" } }
+  };
+}
+export function addCommand(workflow) {
+  const actions = workflow?.actions ?? {};
+  const key = nextCommandKey(actions);
+  return {
+    ...workflow,
+    actions: { ...actions, [key]: { label: "New Command", stateless: true, clientHandler: "" } }
+  };
+}
+export function removeTrigger(workflow, key) {
+  const { [key]: _removed, ...rest } = workflow.triggers ?? {};
+  return { ...workflow, triggers: rest };
+}
+export function removeAction(workflow, key) {
+  const { [key]: _removed, ...rest } = workflow.actions ?? {};
+  return { ...workflow, actions: rest };
+}

package/dist/runtime/app/composables/useClientAction.d.ts

@@ -0,0 +1,30 @@
+import type { ActionEventPayload } from '@stonecrop/desktop';
+/**
+ * Result of dispatching an action to its server handler.
+ */
+export type ActionDispatchResult = {
+    success: boolean;
+    data: unknown;
+    error: string | null;
+};
+/**
+ * Shared executor for doctype action clicks. A host's Desktop `@action` handler delegates
+ * here so every host runs the same logic from one definition:
+ *
+ * - If the clicked action carries a `clientHandler`, run it. The handler **owns
+ *   orchestration** — it calls `runAction` itself when it needs the server, navigates via
+ *   `router`, reads `record`, or queries `graphql`. It supersedes the default dispatch.
+ * - Otherwise dispatch the action to its server `handler` (the pre-existing behavior),
+ *   so actions without a `clientHandler` are unchanged.
+ *
+ * `runAction` is the only blessed write: it dispatches **and** writes the returned record
+ * back into HST, keeping the store consistent — the same invariant the host handler
+ * previously upheld inline (`addRecord(result.data)` after dispatch).
+ *
+ * The composable owns the `[{ id, data }]` argument envelope every server handler reads
+ * (`const [{ id }] = args`), so an authored handler calls `runAction('Assign')` without
+ * knowing that shape; an optional second argument is merged in for handlers needing more.
+ */
+export declare function useClientAction(): {
+    run: (payload: ActionEventPayload) => Promise<void>;
+};

package/dist/runtime/app/composables/useClientAction.js

@@ -0,0 +1,51 @@
+import { executeClientHandler, useStonecrop } from "@stonecrop/stonecrop";
+import { useRouter } from "vue-router";
+function notifyActionError(message) {
+  console.error("Action failed:", message);
+  if (typeof window !== "undefined") window.alert(message);
+}
+export function useClientAction() {
+  const { stonecrop } = useStonecrop();
+  const router = useRouter();
+  async function dispatchAndWriteback(doctypeSlug, recordId, data, action, extra) {
+    const sc = stonecrop.value;
+    if (!sc) return { success: false, data: null, error: "Stonecrop is not initialized" };
+    const doctype = sc.registry.getDoctype(doctypeSlug);
+    if (!doctype) return { success: false, data: null, error: `Unknown doctype: ${doctypeSlug}` };
+    const result = await sc.dispatchAction(doctype, action, [{ id: recordId, data, ...extra ?? {} }]);
+    if (result.success && result.data && recordId) {
+      sc.addRecord(doctypeSlug, recordId, result.data);
+    }
+    return result;
+  }
+  async function run(payload) {
+    const sc = stonecrop.value;
+    if (!sc) return;
+    const { name, doctype: doctypeSlug, recordId, data } = payload;
+    const doctype = sc.registry.getDoctype(doctypeSlug);
+    const workflow = doctype?.workflow;
+    const clientHandler = workflow?.actions?.[name]?.clientHandler;
+    try {
+      if (!clientHandler) {
+        const result = await dispatchAndWriteback(doctypeSlug, recordId, data, name);
+        if (!result.success) notifyActionError(result.error ?? `Action "${name}" failed`);
+        return;
+      }
+      const record = sc.getRecordById(doctypeSlug, recordId)?.get("") ?? data;
+      const runAction = (action, extra) => dispatchAndWriteback(doctypeSlug, recordId, data, action, extra);
+      const graphql = {
+        query(query, variables) {
+          const client = sc.getClient();
+          if (!client?.query) {
+            return Promise.reject(new Error("The configured data client does not support graphql.query"));
+          }
+          return client.query(query, variables);
+        }
+      };
+      await executeClientHandler(clientHandler, { router, record, runAction, graphql });
+    } catch (error) {
+      notifyActionError(error instanceof Error ? error.message : String(error));
+    }
+  }
+  return { run };
+}