@bagelink/vue 1.15.178 → 1.15.182

package/dist/types/TableSchema.d.ts

@@ -1,4 +1,4 @@
-import { BglFormSchemaT } from '..';
+import { BglFormSchemaT, IconType } from '..';
 import { MaybeRefOrGetter, ComputedRef } from 'vue';
 export type SortDirectionsT = 'ASC' | 'DESC';
 export type EmitOrderT = `${string} ${SortDirectionsT}`;
@@ -16,6 +16,12 @@ export interface TableSchemaProps<T extends {
         handle?: string;
     };
     onLastItemVisible?: () => void;
+    /** Icon for the built-in empty state (default: 'inbox'). Pass 'none' to hide. */
+    emptyIcon?: IconType | 'none';
+    /** Title for the built-in empty state (default: 'No results'). */
+    emptyTitle?: string;
+    /** Description shown under the empty-state title. */
+    emptyDescription?: string;
 }
 export interface SortingOptions {
     onSort: (field: string, direction: SortDirectionsT) => void;

package/dist/types/TableSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableSchema.d.ts","sourceRoot":"","sources":["../../src/types/TableSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAExD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE;IAC1F,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,MAAM,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,cAAc;IAC9B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC5C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,IAAI,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAA;IAC3B,MAAM,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB"}
+{"version":3,"file":"TableSchema.d.ts","sourceRoot":"","sources":["../../src/types/TableSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAExD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE;IAC1F,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,MAAM,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAA;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,iFAAiF;IACjF,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC7B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,cAAc;IAC9B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC5C,IAAI,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACtB,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,IAAI,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAA;IAC3B,MAAM,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAA;IACpC,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.178",
+  "version": "1.15.182",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Card.vue

@@ -27,7 +27,7 @@ const props = defineProps<{
 	thin?: boolean
 	outline?: boolean
 	h100?: boolean
-	to?: string
+	to?: import('vue-router').RouteLocationRaw
 	href?: string
 	overflowX?: boolean
 	overflowY?: boolean

package/src/components/dataTable/DataTable.vue

@@ -4,6 +4,7 @@ import type { SetupContext } from 'vue'
 import type { TableSchemaProps } from '../../types/TableSchema'
 import type { DraggableEvent } from '../draggable/useDraggable'
 import {
+	EmptyState,
 	Icon,
 	keyToLabel,
 	Loading
@@ -146,6 +147,9 @@ watch(
 )
 
 const showLoading = computed(() => loading.value)
+
+// Show the empty state only once loading has settled and there are no rows.
+const isEmpty = computed(() => !showLoading.value && computedData.value.length === 0)
 </script>
 
 <template>
@@ -198,6 +202,15 @@ const showLoading = computed(() => loading.value)
 					<tr v-if="props.onLastItemVisible !== undefined" ref="lastItemEl" style="height: 1px;" />
 				</tbody>
 			</table>
+			<!-- Built-in empty state (overridable via the #empty slot) -->
+			<slot v-if="isEmpty" name="empty">
+				<EmptyState
+					:icon="props.emptyIcon ?? 'inbox'"
+					:title="props.emptyTitle ?? 'No results'"
+					:description="props.emptyDescription"
+					compact
+				/>
+			</slot>
 		</div>
 	</div>
 </template>

package/src/components/form/inputs/ArrayInput.vue

@@ -51,15 +51,24 @@ const itemLabelPrefix = computed(() => {
 const IDENTIFIER_FIELDS = ['title', 'name', 'label', 'displayName', 'display_name', 'heading', 'caption', 'text']
 const IMAGE_FIELDS = ['image', 'thumbnail', 'avatar', 'photo', 'picture', 'profilePic', 'profile_pic', 'icon', 'logo']
 
+/** Rich-text fields often store HTML; collapse to plain text for the collapsed row label. */
+function toPlainText(value: string): string {
+	if (!value.includes('<') && !value.includes('&')) return value.trim()
+	const doc = new DOMParser().parseFromString(value, 'text/html')
+	return (doc.body.textContent || '').replace(/\s+/g, ' ').trim()
+}
+
 function getItemIdentifier(item: T): string | null {
 	if (typeof item === 'string' && item.trim().length > 0) {
-		return item.trim()
+		const plain = toPlainText(item)
+		return plain.length > 0 ? plain : null
 	}
 	if (item !== null && item !== undefined && typeof item === 'object') {
 		for (const field of IDENTIFIER_FIELDS) {
 			const val = (item as Record<string, unknown>)[field]
 			if (typeof val === 'string' && val.trim().length > 0) {
-				return val.trim()
+				const plain = toPlainText(val)
+				if (plain.length > 0) return plain
 			}
 		}
 	}

package/src/form-flow/FlowDesigner.vue

@@ -0,0 +1,462 @@
+<script setup lang="ts">
+/**
+ * FlowDesigner — visual builder for a decision-tree multi-step FormStructure.
+ *
+ * Left: an SVG canvas of draggable step nodes connected by conditional edges.
+ * Right: an inspector for the selected step (title/key + field editor) or the
+ * selected edge (SCIM condition + priority via reordering).
+ *
+ * v-model is the FormStructure (see ./structure.ts). Single-node structures are
+ * valid and behave as single-step forms at runtime; deleting down to one node
+ * (and removing edges) collapses back automatically — there is no mode flag.
+ */
+
+import type { FormStep, FormStructure, StepEdge } from './structure'
+import { computed, ref } from 'vue'
+import { fieldsToSchema, schemaToFields, type FormField } from './schema-fields'
+import FlowEdge, { type Point } from './FlowEdge.vue'
+import FlowNode from './FlowNode.vue'
+import { edgesFrom, entryStepKey } from './structure'
+
+export interface Props {
+	modelValue: FormStructure
+}
+const props = defineProps<Props>()
+const emit = defineEmits<{ 'update:modelValue': [value: FormStructure] }>()
+
+// --- selection state ---
+const selectedStepKey = ref<string | null>(null)
+const selectedEdgeIdx = ref<number | null>(null)
+
+// --- helpers to emit an updated structure immutably ---
+function patch(next: Partial<FormStructure>) {
+	emit('update:modelValue', { ...props.modelValue, ...next })
+}
+
+const NODE_W = 180
+const NODE_H = 72
+
+const structure = computed(() => props.modelValue)
+const startKey = computed(() => entryStepKey(structure.value))
+
+function stepByKey(key: string): FormStep | undefined {
+	return structure.value.steps.find(s => s.key === key)
+}
+
+function outAnchor(step: FormStep): Point {
+	return { x: (step.x ?? 0) + NODE_W, y: (step.y ?? 0) + NODE_H / 2 }
+}
+function inAnchor(step: FormStep): Point {
+	return { x: step.x ?? 0, y: (step.y ?? 0) + NODE_H / 2 }
+}
+
+/** Resolved geometry for each edge (skips edges whose endpoints vanished). */
+const edgeGeoms = computed(() => {
+	return structure.value.transitions.map((e, idx) => {
+		const from = stepByKey(e.from)
+		const to = stepByKey(e.to)
+		if (!from || !to) return null
+		// priority = 1-based position among edges sharing the same source.
+		const siblings = edgesFrom(structure.value, e.from)
+		const priority = siblings.indexOf(e) + 1
+		return { idx, edge: e, from: outAnchor(from), to: inAnchor(to), priority }
+	}).filter((x): x is NonNullable<typeof x> => x != null)
+})
+
+// --- step CRUD ---
+
+function uniqueKey(base = 'step'): string {
+	const keys = new Set(structure.value.steps.map(s => s.key))
+	let i = structure.value.steps.length + 1
+	let key = `${base}_${i}`
+	while (keys.has(key)) key = `${base}_${++i}`
+	return key
+}
+
+function addStep(): void {
+	const key = uniqueKey()
+	const nth = structure.value.steps.length
+	const step: FormStep = {
+		key,
+		title: `Step ${nth + 1}`,
+		schema: { type: 'object', properties: {} },
+		x: 60 + (nth % 4) * 220,
+		y: 60 + Math.floor(nth / 4) * 160,
+	}
+	patch({ steps: [...structure.value.steps, step] })
+	selectStep(key)
+}
+
+function removeStep(key: string): void {
+	patch({
+		steps: structure.value.steps.filter(s => s.key !== key),
+		transitions: structure.value.transitions.filter(e => e.from !== key && e.to !== key),
+		startId: structure.value.startId === key ? null : structure.value.startId,
+	})
+	if (selectedStepKey.value === key) selectedStepKey.value = null
+}
+
+function moveStep(key: string, pos: { x: number, y: number }): void {
+	patch({
+		steps: structure.value.steps.map(s => (s.key === key ? { ...s, x: pos.x, y: pos.y } : s)),
+	})
+}
+
+function selectStep(key: string): void {
+	selectedStepKey.value = key
+	selectedEdgeIdx.value = null
+}
+
+function setStart(key: string): void {
+	patch({ startId: key })
+}
+
+function updateStepMeta(key: string, meta: Partial<Pick<FormStep, 'key' | 'title'>>): void {
+	// Renaming a key rewires edges + startId to keep the graph consistent.
+	const oldKey = key
+	const newKey = meta.key?.trim()
+	patch({
+		steps: structure.value.steps.map(s => (s.key === oldKey
+			? { ...s, ...meta, key: newKey || s.key }
+			: s)),
+		transitions: newKey && newKey !== oldKey
+			? structure.value.transitions.map(e => ({
+				...e,
+				from: e.from === oldKey ? newKey : e.from,
+				to: e.to === oldKey ? newKey : e.to,
+			}))
+			: structure.value.transitions,
+		startId: newKey && structure.value.startId === oldKey ? newKey : structure.value.startId,
+	})
+	if (newKey && newKey !== oldKey) selectedStepKey.value = newKey
+}
+
+// --- edge drawing ---
+
+const pendingEdge = ref<{ from: string, cursor: Point } | null>(null)
+
+function beginEdge(key: string, _ev: PointerEvent): void {
+	const from = stepByKey(key)
+	if (!from) return
+	pendingEdge.value = { from: key, cursor: outAnchor(from) }
+	window.addEventListener('pointermove', onEdgeDragMove)
+	window.addEventListener('pointerup', onEdgeDragUp, { once: true })
+}
+
+function onEdgeDragMove(ev: PointerEvent): void {
+	if (!pendingEdge.value) return
+	const rect = canvasRef.value?.getBoundingClientRect()
+	if (!rect) return
+	pendingEdge.value = {
+		...pendingEdge.value,
+		cursor: { x: ev.clientX - rect.left, y: ev.clientY - rect.top },
+	}
+}
+
+function onEdgeDragUp(): void {
+	window.removeEventListener('pointermove', onEdgeDragMove)
+	// If released over a node, completeEdge() already ran via pointerenter.
+	pendingEdge.value = null
+}
+
+function completeEdge(targetKey: string): void {
+	const pending = pendingEdge.value
+	if (!pending || pending.from === targetKey) return
+	const exists = structure.value.transitions.some(
+		e => e.from === pending.from && e.to === targetKey,
+	)
+	if (!exists) {
+		const edge: StepEdge = { from: pending.from, to: targetKey, condition: null }
+		patch({ transitions: [...structure.value.transitions, edge] })
+		selectEdge(structure.value.transitions.length)
+	}
+	pendingEdge.value = null
+}
+
+function cancelEdge(): void {
+	pendingEdge.value = null
+}
+
+// --- edge editing ---
+
+function selectEdge(idx: number): void {
+	selectedEdgeIdx.value = idx
+	selectedStepKey.value = null
+}
+
+function removeEdge(idx: number): void {
+	patch({ transitions: structure.value.transitions.filter((_, i) => i !== idx) })
+	if (selectedEdgeIdx.value === idx) selectedEdgeIdx.value = null
+}
+
+function updateEdgeCondition(idx: number, c: string): void {
+	patch({
+		transitions: structure.value.transitions.map((e, i) => (i === idx ? { ...e, condition: c || null } : e)),
+	})
+}
+
+/** Reorder an edge among its same-source siblings to change match priority. */
+function reprioritizeEdge(idx: number, dir: -1 | 1): void {
+	const list = [...structure.value.transitions]
+	const edge = list[idx]
+	if (!edge) return
+	const siblingIdxs = list
+		.map((e, i) => (e.from === edge.from ? i : -1))
+		.filter(i => i >= 0)
+	const pos = siblingIdxs.indexOf(idx)
+	const swapWith = siblingIdxs[pos + dir]
+	if (swapWith == null) return
+	;[list[idx], list[swapWith]] = [list[swapWith], list[idx]]
+	patch({ transitions: list })
+	selectedEdgeIdx.value = swapWith
+}
+
+// --- inspector: selected step field editor ---
+
+const selectedStep = computed(() => (selectedStepKey.value ? stepByKey(selectedStepKey.value) : undefined))
+const selectedEdge = computed(() => (selectedEdgeIdx.value != null ? structure.value.transitions[selectedEdgeIdx.value] : undefined))
+
+const stepFields = computed<FormField[]>({
+	get() {
+		return selectedStep.value ? schemaToFields(selectedStep.value.schema as any) : []
+	},
+	set(fields) {
+		if (!selectedStepKey.value) return
+		const schema = fieldsToSchema(fields)
+		patch({
+			steps: structure.value.steps.map(s => (s.key === selectedStepKey.value ? { ...s, schema } : s)),
+		})
+	},
+})
+
+function addField(): void {
+	const fields = [...stepFields.value]
+	const n = fields.length + 1
+	fields.push({ id: `f${Date.now()}`, key: `field_${n}`, type: 'text', label: `Field ${n}` })
+	stepFields.value = fields
+}
+
+function updateField(i: number, patchField: Partial<FormField>): void {
+	const fields = stepFields.value.map((f, idx) => (idx === i ? { ...f, ...patchField } : f))
+	stepFields.value = fields
+}
+
+function removeField(i: number): void {
+	stepFields.value = stepFields.value.filter((_, idx) => idx !== i)
+}
+
+const canvasRef = ref<HTMLElement | null>(null)
+
+const FIELD_TYPES: FormField['type'][] = [
+	'text', 'textarea', 'number', 'email', 'phone', 'url',
+	'select', 'radio', 'checkbox', 'toggle', 'date', 'file',
+]
+</script>
+
+<template>
+	<div class="flow-designer">
+		<!-- Canvas -->
+		<div
+			ref="canvasRef"
+			class="fd-canvas"
+			@click="selectedStepKey = null; selectedEdgeIdx = null"
+			@pointerup="cancelEdge"
+		>
+			<div class="fd-toolbar">
+				<button type="button" class="fd-add" @click.stop="addStep">+ Add step</button>
+				<span class="fd-hint">Drag the blue handle between steps to branch</span>
+			</div>
+
+			<svg class="fd-edges" @click="selectedEdgeIdx = null">
+				<defs>
+					<marker
+						id="ffp-arrow" viewBox="0 0 10 10" refX="9" refY="5"
+						markerWidth="7" markerHeight="7" orient="auto-start-reverse"
+					>
+						<path d="M 0 0 L 10 5 L 0 10 z" fill="#94a3b8" />
+					</marker>
+				</defs>
+
+				<FlowEdge
+					v-for="g in edgeGeoms"
+					:key="g.idx"
+					:from="g.from"
+					:to="g.to"
+					:condition="g.edge.condition"
+					:priority="g.priority"
+					:selected="selectedEdgeIdx === g.idx"
+					@select="selectEdge(g.idx)"
+					@remove="removeEdge(g.idx)"
+				/>
+
+				<!-- Edge being drawn -->
+				<path
+					v-if="pendingEdge"
+					class="fd-pending"
+					:d="`M ${pendingEdge.cursor.x} ${pendingEdge.cursor.y} l 0 0`"
+				/>
+			</svg>
+
+			<FlowNode
+				v-for="s in structure.steps"
+				:key="s.key"
+				:step="s"
+				:selected="selectedStepKey === s.key"
+				:is-start="startKey === s.key"
+				@move="moveStep(s.key, $event)"
+				@select="selectStep(s.key)"
+				@set-start="setStart(s.key)"
+				@remove="removeStep(s.key)"
+				@start-edge="beginEdge(s.key, $event)"
+				@end-edge="completeEdge(s.key)"
+			/>
+
+			<div v-if="structure.steps.length === 0" class="fd-empty">
+				<p>No steps yet.</p>
+				<button type="button" class="fd-add" @click.stop="addStep">+ Add your first step</button>
+			</div>
+		</div>
+
+		<!-- Inspector -->
+		<aside class="fd-inspector">
+			<!-- Step inspector -->
+			<template v-if="selectedStep">
+				<h3 class="fd-insp-title">Step</h3>
+				<label class="fd-label">Title
+					<input
+						class="fd-input"
+						:value="selectedStep.title"
+						@input="updateStepMeta(selectedStep.key, { title: ($event.target as HTMLInputElement).value })"
+					>
+				</label>
+				<label class="fd-label">Key
+					<input
+						class="fd-input fd-mono"
+						:value="selectedStep.key"
+						@change="updateStepMeta(selectedStep.key, { key: ($event.target as HTMLInputElement).value })"
+					>
+				</label>
+
+				<div class="fd-fields-head">
+					<span>Fields</span>
+					<button type="button" class="fd-mini" @click="addField">+ Field</button>
+				</div>
+
+				<div v-for="(f, i) in stepFields" :key="f.id" class="fd-field-row">
+					<input
+						class="fd-input fd-mono fd-field-key"
+						:value="f.key"
+						placeholder="key"
+						@input="updateField(i, { key: ($event.target as HTMLInputElement).value })"
+					>
+					<select
+						class="fd-input fd-field-type"
+						:value="f.type"
+						@change="updateField(i, { type: ($event.target as HTMLSelectElement).value as any })"
+					>
+						<option v-for="t in FIELD_TYPES" :key="t" :value="t">{{ t }}</option>
+					</select>
+					<label class="fd-req" title="Required">
+						<input
+							type="checkbox"
+							:checked="f.required"
+							@change="updateField(i, { required: ($event.target as HTMLInputElement).checked })"
+						>req
+					</label>
+					<button type="button" class="fd-del" @click="removeField(i)">×</button>
+				</div>
+				<p v-if="stepFields.length === 0" class="fd-muted">No fields on this step.</p>
+			</template>
+
+			<!-- Edge inspector -->
+			<template v-else-if="selectedEdge">
+				<h3 class="fd-insp-title">Transition</h3>
+				<p class="fd-muted fd-mono">{{ selectedEdge.from }} → {{ selectedEdge.to }}</p>
+
+				<label class="fd-label">Condition (SCIM)
+					<input
+						class="fd-input fd-mono"
+						:value="selectedEdge.condition ?? ''"
+						placeholder='e.g. plan eq "pro"'
+						@input="updateEdgeCondition(selectedEdgeIdx!, ($event.target as HTMLInputElement).value)"
+					>
+				</label>
+				<p class="fd-muted">
+					Empty = always taken (fallback). Edges are evaluated top-to-bottom;
+					first match wins.
+				</p>
+
+				<div class="fd-prio">
+					<button type="button" class="fd-mini" @click="reprioritizeEdge(selectedEdgeIdx!, -1)">▲ Higher priority</button>
+					<button type="button" class="fd-mini" @click="reprioritizeEdge(selectedEdgeIdx!, 1)">▼ Lower priority</button>
+				</div>
+				<button type="button" class="fd-del-btn" @click="removeEdge(selectedEdgeIdx!)">Delete transition</button>
+			</template>
+
+			<!-- Nothing selected -->
+			<template v-else>
+				<h3 class="fd-insp-title">Flow</h3>
+				<p class="fd-muted">
+					{{ structure.steps.length }} step(s), {{ structure.transitions.length }} transition(s).
+				</p>
+				<p class="fd-muted">Select a step or transition to edit it.</p>
+			</template>
+		</aside>
+	</div>
+</template>
+
+<style scoped>
+.flow-designer { display: flex; height: 100%; min-height: 480px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
+
+.fd-canvas {
+	position: relative;
+	flex: 1;
+	background:
+		linear-gradient(90deg, #f8fafc 1px, transparent 1px) 0 0 / 20px 20px,
+		linear-gradient(#f8fafc 1px, transparent 1px) 0 0 / 20px 20px,
+		#fff;
+	overflow: auto;
+}
+.fd-toolbar {
+	position: sticky; top: 0; left: 0; z-index: 3;
+	display: flex; align-items: center; gap: 12px;
+	padding: 8px 12px; background: rgba(255,255,255,0.9); border-bottom: 1px solid #f1f5f9;
+}
+.fd-hint { font-size: 11px; color: #94a3b8; }
+.fd-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
+.fd-edges :deep(.flow-edge) { pointer-events: all; }
+.fd-pending { stroke: var(--primary-color, #007bff); stroke-dasharray: 4 3; fill: none; }
+
+.fd-empty {
+	position: absolute; inset: 0; display: flex; flex-direction: column;
+	align-items: center; justify-content: center; gap: 12px; color: #94a3b8;
+}
+.fd-add {
+	padding: 6px 12px; border: 1px solid var(--primary-color, #007bff);
+	background: var(--primary-color, #007bff); color: white;
+	border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px;
+}
+
+.fd-inspector {
+	width: 280px; flex: none; padding: 16px; border-left: 1px solid #e2e8f0;
+	background: #fff; overflow-y: auto;
+}
+.fd-insp-title { margin: 0 0 12px; font-size: 14px; }
+.fd-label { display: block; font-size: 12px; color: #475569; margin-bottom: 10px; }
+.fd-input {
+	display: block; width: 100%; margin-top: 4px; padding: 6px 8px;
+	border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; box-sizing: border-box;
+}
+.fd-mono { font-family: ui-monospace, monospace; }
+.fd-muted { font-size: 11px; color: #94a3b8; }
+
+.fd-fields-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; font-size: 12px; font-weight: 600; }
+.fd-field-row { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
+.fd-field-key { flex: 1; }
+.fd-field-type { flex: none; width: 84px; }
+.fd-req { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: #64748b; }
+.fd-mini { border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
+.fd-del { border: none; background: transparent; color: #ef4444; cursor: pointer; font-size: 15px; line-height: 1; }
+.fd-prio { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
+.fd-del-btn { width: 100%; padding: 6px; border: 1px solid #fecaca; background: #fef2f2; color: #ef4444; border-radius: 6px; cursor: pointer; font-size: 12px; }
+</style>

package/src/form-flow/FlowEdge.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+/**
+ * FlowEdge — an SVG connector between two nodes in the FlowDesigner, with an
+ * inline SCIM condition label. Rendered inside the designer's <svg> layer.
+ *
+ * Edges are directed (from -> to). The first edge (in declared order) whose
+ * condition passes wins at runtime, so an unconditional edge is the fallback.
+ */
+
+import { computed } from 'vue'
+
+export interface Point { x: number, y: number }
+
+export interface Props {
+	from: Point
+	to: Point
+	condition?: string | null
+	/** Declared priority (1-based) shown as a small badge. */
+	priority?: number
+	selected?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+	select: []
+	remove: []
+}>()
+
+// Cubic bezier with horizontal control handles for a clean left-to-right flow.
+const path = computed(() => {
+	const { from, to } = props
+	const dx = Math.max(40, Math.abs(to.x - from.x) * 0.5)
+	return `M ${from.x} ${from.y} C ${from.x + dx} ${from.y}, ${to.x - dx} ${to.y}, ${to.x} ${to.y}`
+})
+
+const mid = computed(() => ({
+	x: (props.from.x + props.to.x) / 2,
+	y: (props.from.y + props.to.y) / 2,
+}))
+
+const label = computed(() => {
+	const c = props.condition?.trim()
+	return c && c.length ? c : 'always'
+})
+</script>
+
+<template>
+	<g class="flow-edge" :class="{ selected }" @click.stop="emit('select')">
+		<!-- Wide invisible hit-area for easier selection. -->
+		<path :d="path" class="edge-hit" fill="none" stroke="transparent" stroke-width="14" />
+		<path
+			:d="path"
+			class="edge-line"
+			fill="none"
+			marker-end="url(#ffp-arrow)"
+		/>
+		<foreignObject :x="mid.x - 70" :y="mid.y - 14" width="140" height="28" class="edge-label-fo">
+			<div class="edge-label" :class="{ fallback: label === 'always' }" :title="label">
+				<span v-if="priority != null" class="edge-prio">{{ priority }}</span>
+				<span class="edge-cond">{{ label }}</span>
+				<button v-if="selected" type="button" class="edge-del" @click.stop="emit('remove')">×</button>
+			</div>
+		</foreignObject>
+	</g>
+</template>
+
+<style scoped>
+.edge-line {
+	stroke: #94a3b8;
+	stroke-width: 2;
+	transition: stroke 0.15s;
+}
+.flow-edge:hover .edge-line,
+.flow-edge.selected .edge-line {
+	stroke: var(--primary-color, #007bff);
+}
+.flow-edge { cursor: pointer; }
+.edge-label-fo { overflow: visible; }
+.edge-label {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 140px;
+	padding: 2px 6px;
+	font-size: 11px;
+	line-height: 1.4;
+	background: white;
+	border: 1px solid #cbd5e1;
+	border-radius: 999px;
+	color: #334155;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.edge-label.fallback { color: #94a3b8; font-style: italic; }
+.edge-cond { overflow: hidden; text-overflow: ellipsis; }
+.edge-prio {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 14px; height: 14px;
+	border-radius: 50%;
+	background: var(--primary-color, #007bff);
+	color: white;
+	font-size: 9px;
+	flex: none;
+}
+.edge-del {
+	border: none;
+	background: transparent;
+	color: #ef4444;
+	font-size: 14px;
+	line-height: 1;
+	cursor: pointer;
+	padding: 0 2px;
+}
+</style>