@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/dist/modules/workflows/components/fields/MappingArrayEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/workflows/components/fields/MappingArrayEditor.tsx"],
-  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { ChevronDown, Plus, Trash2 } from 'lucide-react'\nimport type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'\n\n/**\n * Mapping definition structure for SubWorkflow input/output\n */\nexport interface Mapping {\n  key: string\n  value: string\n}\n\ninterface MappingArrayEditorProps extends CrudCustomFieldRenderProps {\n  value: Mapping[]\n  label?: string\n  description?: string\n}\n\n/**\n * MappingArrayEditor - Custom field component for managing SubWorkflow input/output mappings\n *\n * Provides an interface to add, edit, and remove key-value pair mappings.\n * Values support template expressions like {{context.foo}} for dynamic data binding.\n *\n * Used by NodeEditDialog (SubWorkflow type only)\n */\nexport function MappingArrayEditor({\n  id,\n  value = [],\n  error,\n  setValue,\n  disabled,\n  label: labelProp,\n  description: descriptionProp,\n}: MappingArrayEditorProps) {\n  const t = useT()\n  const { confirm, ConfirmDialogElement } = useConfirmDialog()\n  const label = labelProp ?? t('workflows.fieldEditors.mappings.label')\n  const description = descriptionProp ?? t('workflows.fieldEditors.mappings.description')\n  const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set())\n\n  const mappings = Array.isArray(value) ? value : []\n\n  const toggleExpanded = (index: number) => {\n    const newExpanded = new Set(expandedIndices)\n    if (newExpanded.has(index)) {\n      newExpanded.delete(index)\n    } else {\n      newExpanded.add(index)\n    }\n    setExpandedIndices(newExpanded)\n  }\n\n  const addMapping = () => {\n    const newMapping: Mapping = {\n      key: `key_${Date.now()}`,\n      value: '',\n    }\n    const newMappings = [...mappings, newMapping]\n    setValue(newMappings)\n\n    // Auto-expand the newly added mapping\n    const newExpanded = new Set(expandedIndices)\n    newExpanded.add(mappings.length)\n    setExpandedIndices(newExpanded)\n  }\n\n  const removeMapping = async (index: number) => {\n    const confirmed = await confirm({\n      title: t('workflows.fieldEditors.mappings.removeMapping'),\n      text: t('workflows.fieldEditors.mappings.confirmRemove'),\n      variant: 'destructive',\n    })\n    if (!confirmed) return\n\n    const newMappings = mappings.filter((_, i) => i !== index)\n    setValue(newMappings)\n\n    // Remove from expanded set\n    const newExpanded = new Set(expandedIndices)\n    newExpanded.delete(index)\n    setExpandedIndices(newExpanded)\n  }\n\n  const updateMapping = (index: number, field: keyof Mapping, fieldValue: string) => {\n    const updated = [...mappings]\n    updated[index] = { ...updated[index], [field]: fieldValue }\n    setValue(updated)\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <Label className=\"text-sm font-semibold\">{label} ({mappings.length})</Label>\n          <p className=\"text-xs text-muted-foreground mt-0.5\">\n            {description}\n          </p>\n          {error && <p className=\"text-xs text-status-error-text mt-1\">{error}</p>}\n        </div>\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          onClick={addMapping}\n          disabled={disabled}\n          className=\"w-full sm:w-auto\"\n        >\n          <Plus className=\"size-3 mr-1\" />\n          {t('workflows.fieldEditors.mappings.addMapping')}\n        </Button>\n      </div>\n\n      {mappings.length === 0 ? (\n        <div className=\"p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border\">\n          {t('workflows.fieldEditors.mappings.emptyState')}\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          {mappings.map((mapping, index) => {\n            const isExpanded = expandedIndices.has(index)\n            return (\n              <div key={index} className=\"border border-gray-200 rounded-lg bg-gray-50\">\n                {/* Collapsed Header */}\n                <button\n                  type=\"button\"\n                  onClick={() => toggleExpanded(index)}\n                  disabled={disabled}\n                  className=\"w-full px-4 py-3 text-left flex items-center justify-between hover:bg-gray-100 transition-colors rounded-t-lg disabled:opacity-50\"\n                >\n                  <div className=\"flex-1\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-sm font-semibold text-gray-900\">\n                        {mapping.key || `Mapping ${index + 1}`}\n                      </span>\n                    </div>\n                    <p className=\"text-xs text-gray-600 mt-1 font-mono truncate\">\n                      {mapping.value ? (\n                        <>\n                          <span className=\"text-gray-400\">=</span> {mapping.value}\n                        </>\n                      ) : (\n                        <span className=\"text-gray-400 italic\">{t('workflows.common.noValueSet')}</span>\n                      )}\n                    </p>\n                  </div>\n                  <ChevronDown\n                    className={`w-5 h-5 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n                  />\n                </button>\n\n                {/* Expanded Content */}\n                {isExpanded && (\n                  <div className=\"px-4 pb-4 space-y-3 border-t border-gray-200 bg-white\">\n                    {/* Key Field */}\n                    <div className=\"pt-3\">\n                      <Label htmlFor={`${id}-${index}-key`} className=\"text-xs font-medium mb-1\">\n                        {t('workflows.fieldEditors.mappings.key')} *\n                      </Label>\n                      <Input\n                        id={`${id}-${index}-key`}\n                        type=\"text\"\n                        value={mapping.key}\n                        onChange={(e) => updateMapping(index, 'key', e.target.value)}\n                        placeholder={t('workflows.fieldEditors.mappings.keyPlaceholder')}\n                        className=\"text-xs\"\n                        disabled={disabled}\n                      />\n                      <p className=\"text-xs text-muted-foreground mt-0.5\">\n                        {t('workflows.fieldEditors.mappings.keyHint')}\n                      </p>\n                    </div>\n\n                    {/* Value Field */}\n                    <div>\n                      <Label htmlFor={`${id}-${index}-value`} className=\"text-xs font-medium mb-1\">\n                        {t('workflows.fieldEditors.mappings.value')} *\n                      </Label>\n                      <Input\n                        id={`${id}-${index}-value`}\n                        type=\"text\"\n                        value={mapping.value}\n                        onChange={(e) => updateMapping(index, 'value', e.target.value)}\n                        placeholder={t('workflows.fieldEditors.mappings.valuePlaceholder')}\n                        className=\"text-xs font-mono\"\n                        disabled={disabled}\n                      />\n                      <p className=\"text-xs text-muted-foreground mt-0.5\">\n                        {t('workflows.fieldEditors.mappings.valueHint')}\n                      </p>\n                    </div>\n\n                    {/* Delete Button */}\n                    <div className=\"border-t border-gray-200 pt-3\">\n                      <Button\n                        type=\"button\"\n                        variant=\"destructive\"\n                        size=\"sm\"\n                        onClick={() => removeMapping(index)}\n                        disabled={disabled}\n                      >\n                        <Trash2 className=\"size-4 mr-1\" />\n                        {t('workflows.fieldEditors.mappings.removeMapping')}\n                      </Button>\n                    </div>\n                  </div>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      )}\n      {ConfirmDialogElement}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { ChevronDown, Plus, Trash2 } from 'lucide-react'\nimport type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'\nimport type { LedgerEntry } from '../../lib/context-ledger'\nimport { VariablePickerButton } from './VariablePickerButton'\nimport { ledgerDropTargetProps } from './ledgerDropTarget'\n\n/**\n * Mapping definition structure for SubWorkflow input/output\n */\nexport interface Mapping {\n  key: string\n  value: string\n}\n\ninterface MappingArrayEditorProps extends CrudCustomFieldRenderProps {\n  value: Mapping[]\n  label?: string\n  description?: string\n  variablePicker?: boolean\n  ledgerEntries?: LedgerEntry[]\n}\n\n/**\n * MappingArrayEditor - Custom field component for managing SubWorkflow input/output mappings\n *\n * Provides an interface to add, edit, and remove key-value pair mappings.\n *\n * INPUT mapping values are bare parent-context dot paths \u2014 `mapInputData` in\n * `lib/step-handler.ts` resolves each value with `getNestedValue` against the\n * parent context, with no `{{}}` interpolation. Hosts that edit input mappings\n * opt into the ledger-fed variable picker with `variablePicker` +\n * `ledgerEntries`; the picker inserts bare paths (`insertMode=\"bare\"`).\n *\n * OUTPUT mapping values reference the CHILD workflow's context, which the\n * parent ledger cannot describe \u2014 hosts MUST NOT enable the picker there (a\n * wrong picker is worse than none), so output rows stay plain inputs.\n *\n * Used by NodeEditDialog (SubWorkflow type only)\n */\nexport function MappingArrayEditor({\n  id,\n  value = [],\n  error,\n  setValue,\n  disabled,\n  label: labelProp,\n  description: descriptionProp,\n  variablePicker = false,\n  ledgerEntries,\n}: MappingArrayEditorProps) {\n  const t = useT()\n  const { confirm, ConfirmDialogElement } = useConfirmDialog()\n  const label = labelProp ?? t('workflows.fieldEditors.mappings.label')\n  const description = descriptionProp ?? t('workflows.fieldEditors.mappings.description')\n  const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set())\n\n  const mappings = Array.isArray(value) ? value : []\n\n  const toggleExpanded = (index: number) => {\n    const newExpanded = new Set(expandedIndices)\n    if (newExpanded.has(index)) {\n      newExpanded.delete(index)\n    } else {\n      newExpanded.add(index)\n    }\n    setExpandedIndices(newExpanded)\n  }\n\n  const addMapping = () => {\n    const newMapping: Mapping = {\n      key: `key_${Date.now()}`,\n      value: '',\n    }\n    const newMappings = [...mappings, newMapping]\n    setValue(newMappings)\n\n    // Auto-expand the newly added mapping\n    const newExpanded = new Set(expandedIndices)\n    newExpanded.add(mappings.length)\n    setExpandedIndices(newExpanded)\n  }\n\n  const removeMapping = async (index: number) => {\n    const confirmed = await confirm({\n      title: t('workflows.fieldEditors.mappings.removeMapping'),\n      text: t('workflows.fieldEditors.mappings.confirmRemove'),\n      variant: 'destructive',\n    })\n    if (!confirmed) return\n\n    const newMappings = mappings.filter((_, i) => i !== index)\n    setValue(newMappings)\n\n    // Remove from expanded set\n    const newExpanded = new Set(expandedIndices)\n    newExpanded.delete(index)\n    setExpandedIndices(newExpanded)\n  }\n\n  const updateMapping = (index: number, field: keyof Mapping, fieldValue: string) => {\n    const updated = [...mappings]\n    updated[index] = { ...updated[index], [field]: fieldValue }\n    setValue(updated)\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <Label className=\"text-sm font-semibold\">{label} ({mappings.length})</Label>\n          <p className=\"text-xs text-muted-foreground mt-0.5\">\n            {description}\n          </p>\n          {error && <p className=\"text-xs text-status-error-text mt-1\">{error}</p>}\n        </div>\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          onClick={addMapping}\n          disabled={disabled}\n          className=\"w-full sm:w-auto\"\n        >\n          <Plus className=\"size-3 mr-1\" />\n          {t('workflows.fieldEditors.mappings.addMapping')}\n        </Button>\n      </div>\n\n      {mappings.length === 0 ? (\n        <div className=\"p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border\">\n          {t('workflows.fieldEditors.mappings.emptyState')}\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          {mappings.map((mapping, index) => {\n            const isExpanded = expandedIndices.has(index)\n            return (\n              <div key={index} className=\"border border-gray-200 rounded-lg bg-gray-50\">\n                {/* Collapsed Header */}\n                <button\n                  type=\"button\"\n                  onClick={() => toggleExpanded(index)}\n                  disabled={disabled}\n                  className=\"w-full px-4 py-3 text-left flex items-center justify-between hover:bg-gray-100 transition-colors rounded-t-lg disabled:opacity-50\"\n                >\n                  <div className=\"flex-1\">\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-sm font-semibold text-gray-900\">\n                        {mapping.key || `Mapping ${index + 1}`}\n                      </span>\n                    </div>\n                    <p className=\"text-xs text-gray-600 mt-1 font-mono truncate\">\n                      {mapping.value ? (\n                        <>\n                          <span className=\"text-gray-400\">=</span> {mapping.value}\n                        </>\n                      ) : (\n                        <span className=\"text-gray-400 italic\">{t('workflows.common.noValueSet')}</span>\n                      )}\n                    </p>\n                  </div>\n                  <ChevronDown\n                    className={`w-5 h-5 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n                  />\n                </button>\n\n                {/* Expanded Content */}\n                {isExpanded && (\n                  <div className=\"px-4 pb-4 space-y-3 border-t border-gray-200 bg-white\">\n                    {/* Key Field */}\n                    <div className=\"pt-3\">\n                      <Label htmlFor={`${id}-${index}-key`} className=\"text-xs font-medium mb-1\">\n                        {t('workflows.fieldEditors.mappings.key')} *\n                      </Label>\n                      <Input\n                        id={`${id}-${index}-key`}\n                        type=\"text\"\n                        value={mapping.key}\n                        onChange={(e) => updateMapping(index, 'key', e.target.value)}\n                        placeholder={t('workflows.fieldEditors.mappings.keyPlaceholder')}\n                        className=\"text-xs\"\n                        disabled={disabled}\n                      />\n                      <p className=\"text-xs text-muted-foreground mt-0.5\">\n                        {t('workflows.fieldEditors.mappings.keyHint')}\n                      </p>\n                    </div>\n\n                    {/* Value Field */}\n                    <div>\n                      <Label htmlFor={`${id}-${index}-value`} className=\"text-xs font-medium mb-1\">\n                        {t('workflows.fieldEditors.mappings.value')} *\n                      </Label>\n                      <div className=\"flex items-center gap-1\">\n                        <Input\n                          id={`${id}-${index}-value`}\n                          type=\"text\"\n                          value={mapping.value}\n                          onChange={(e) => updateMapping(index, 'value', e.target.value)}\n                          placeholder={t('workflows.fieldEditors.mappings.valuePlaceholder')}\n                          className=\"flex-1 text-xs font-mono\"\n                          disabled={disabled}\n                          {...ledgerDropTargetProps({\n                            value: mapping.value,\n                            onValueChange: (nextValue) => updateMapping(index, 'value', nextValue),\n                            insertMode: variablePicker ? 'bare' : 'template',\n                            disabled,\n                          })}\n                        />\n                        {variablePicker && (\n                          <VariablePickerButton\n                            targetId={`${id}-${index}-value`}\n                            value={mapping.value}\n                            onValueChange={(nextValue) => updateMapping(index, 'value', nextValue)}\n                            ledgerEntries={ledgerEntries}\n                            insertMode=\"bare\"\n                            disabled={disabled}\n                          />\n                        )}\n                      </div>\n                      <p className=\"text-xs text-muted-foreground mt-0.5\">\n                        {t('workflows.fieldEditors.mappings.valueHint')}\n                      </p>\n                    </div>\n\n                    {/* Delete Button */}\n                    <div className=\"border-t border-border pt-3\">\n                      <Button\n                        type=\"button\"\n                        variant=\"destructive-outline\"\n                        size=\"sm\"\n                        onClick={() => removeMapping(index)}\n                        disabled={disabled}\n                      >\n                        <Trash2 className=\"size-4 mr-1\" />\n                        {t('workflows.fieldEditors.mappings.removeMapping')}\n                      </Button>\n                    </div>\n                  </div>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      )}\n      {ConfirmDialogElement}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/workflows/components/fields/PortFieldArrayEditor.js

@@ -0,0 +1,206 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+import { ChevronDown, Plus, Trash2 } from "lucide-react";
+const PORT_TYPES = ["text", "number", "boolean", "select", "date"];
+function PortFieldArrayEditor({
+  id,
+  value,
+  onChange,
+  disabled,
+  addLabelKey,
+  emptyLabelKey
+}) {
+  const t = useT();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const [expandedIndices, setExpandedIndices] = useState(/* @__PURE__ */ new Set());
+  const ports = Array.isArray(value) ? value : [];
+  const toggleExpanded = (index) => {
+    const next = new Set(expandedIndices);
+    if (next.has(index)) next.delete(index);
+    else next.add(index);
+    setExpandedIndices(next);
+  };
+  const addPort = () => {
+    const newPort = {
+      name: `field_${ports.length + 1}`,
+      type: "text",
+      label: "",
+      required: false
+    };
+    onChange([...ports, newPort]);
+    const next = new Set(expandedIndices);
+    next.add(ports.length);
+    setExpandedIndices(next);
+  };
+  const removePort = async (index) => {
+    const confirmed = await confirm({
+      title: t("workflows.ports.remove"),
+      text: t("workflows.ports.confirmRemove"),
+      variant: "destructive"
+    });
+    if (!confirmed) return;
+    onChange(ports.filter((_, i) => i !== index));
+    const next = new Set(expandedIndices);
+    next.delete(index);
+    setExpandedIndices(next);
+  };
+  const updatePort = (index, key, fieldValue) => {
+    const updated = ports.map((port, i) => i === index ? { ...port, [key]: fieldValue } : port);
+    onChange(updated);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: addPort, disabled, children: [
+      /* @__PURE__ */ jsx(Plus, { className: "size-3 mr-1" }),
+      t(addLabelKey)
+    ] }) }),
+    ports.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border border-border", children: t(emptyLabelKey) }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: ports.map((port, index) => {
+      const isExpanded = expandedIndices.has(index);
+      return /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-lg bg-muted/40", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            onClick: () => toggleExpanded(index),
+            disabled,
+            className: "w-full h-auto px-4 py-3 justify-between hover:bg-muted/70",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 text-left", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: port.label || port.name }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: t(`workflows.ports.types.${port.type}`) }),
+                  port.required && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: t("workflows.ports.required") })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 font-mono truncate", children: port.name })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: `size-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-180" : ""}`
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 space-y-3 border-t border-border bg-background", children: [
+          /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-${index}-name`, className: "text-xs font-medium mb-1", children: [
+              t("workflows.ports.name"),
+              " *"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${id}-${index}-name`,
+                type: "text",
+                value: port.name,
+                onChange: (e) => updatePort(index, "name", e.target.value),
+                className: "text-xs font-mono",
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.ports.nameHint") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-${index}-label`, className: "text-xs font-medium mb-1", children: [
+              t("workflows.ports.label"),
+              " *"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${id}-${index}-label`,
+                type: "text",
+                value: port.label,
+                onChange: (e) => updatePort(index, "label", e.target.value),
+                className: "text-xs",
+                disabled
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(Label, { htmlFor: `${id}-${index}-type`, className: "text-xs font-medium mb-1", children: [
+              t("workflows.ports.type"),
+              " *"
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: port.type,
+                onValueChange: (next) => updatePort(index, "type", next),
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { id: `${id}-${index}-type`, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: PORT_TYPES.map((portType) => /* @__PURE__ */ jsx(SelectItem, { value: portType, children: t(`workflows.ports.types.${portType}`) }, portType)) })
+                ]
+              }
+            )
+          ] }),
+          port.type === "select" && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${index}-options`, className: "text-xs font-medium mb-1", children: t("workflows.ports.options") }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${id}-${index}-options`,
+                type: "text",
+                value: port.options?.join(", ") || "",
+                onChange: (e) => updatePort(
+                  index,
+                  "options",
+                  e.target.value.split(",").map((option) => option.trim()).filter(Boolean)
+                ),
+                className: "text-xs",
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: t("workflows.ports.optionsHint") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: `${id}-${index}-required`,
+                checked: port.required,
+                onCheckedChange: (checked) => updatePort(index, "required", checked === true),
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${index}-required`, className: "text-xs font-medium cursor-pointer", children: t("workflows.ports.required") })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-3", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              onClick: () => removePort(index),
+              disabled,
+              "aria-label": t("workflows.ports.remove"),
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+            }
+          ) })
+        ] })
+      ] }, index);
+    }) }),
+    ConfirmDialogElement
+  ] });
+}
+export {
+  PortFieldArrayEditor
+};
+//# sourceMappingURL=PortFieldArrayEditor.js.map

package/dist/modules/workflows/components/fields/PortFieldArrayEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/workflows/components/fields/PortFieldArrayEditor.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@open-mercato/ui/primitives/select'\nimport { ChevronDown, Plus, Trash2 } from 'lucide-react'\nimport type { PortField, PortFieldType } from '../../data/validators'\n\n/** The five business-friendly port types surfaced in the Schema Builder. */\nconst PORT_TYPES: PortFieldType[] = ['text', 'number', 'boolean', 'select', 'date']\n\nexport interface PortFieldArrayEditorProps {\n  id: string\n  value: PortField[]\n  onChange: (next: PortField[]) => void\n  disabled?: boolean\n  /** i18n key for the \"add port\" button label. */\n  addLabelKey: string\n  /** i18n key for the empty-state message. */\n  emptyLabelKey: string\n}\n\n/**\n * PortFieldArrayEditor \u2014 add / edit / remove a list of sub-workflow port fields.\n *\n * Mirrors the proven UserTask `FormFieldArrayEditor` UX (expandable cards with\n * name / label / type / required) but is scoped to the five port types and the\n * `PortField` shape, and uses DS-compliant primitives and semantic tokens.\n * Presentational: state is owned by the parent (SchemaBuilderDialog).\n */\nexport function PortFieldArrayEditor({\n  id,\n  value,\n  onChange,\n  disabled,\n  addLabelKey,\n  emptyLabelKey,\n}: PortFieldArrayEditorProps) {\n  const t = useT()\n  const { confirm, ConfirmDialogElement } = useConfirmDialog()\n  const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set())\n\n  const ports = Array.isArray(value) ? value : []\n\n  const toggleExpanded = (index: number) => {\n    const next = new Set(expandedIndices)\n    if (next.has(index)) next.delete(index)\n    else next.add(index)\n    setExpandedIndices(next)\n  }\n\n  const addPort = () => {\n    const newPort: PortField = {\n      name: `field_${ports.length + 1}`,\n      type: 'text',\n      label: '',\n      required: false,\n    }\n    onChange([...ports, newPort])\n    const next = new Set(expandedIndices)\n    next.add(ports.length)\n    setExpandedIndices(next)\n  }\n\n  const removePort = async (index: number) => {\n    const confirmed = await confirm({\n      title: t('workflows.ports.remove'),\n      text: t('workflows.ports.confirmRemove'),\n      variant: 'destructive',\n    })\n    if (!confirmed) return\n    onChange(ports.filter((_, i) => i !== index))\n    const next = new Set(expandedIndices)\n    next.delete(index)\n    setExpandedIndices(next)\n  }\n\n  const updatePort = (index: number, key: keyof PortField, fieldValue: unknown) => {\n    const updated = ports.map((port, i) => (i === index ? { ...port, [key]: fieldValue } : port))\n    onChange(updated)\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"flex justify-end\">\n        <Button type=\"button\" size=\"sm\" onClick={addPort} disabled={disabled}>\n          <Plus className=\"size-3 mr-1\" />\n          {t(addLabelKey)}\n        </Button>\n      </div>\n\n      {ports.length === 0 ? (\n        <div className=\"p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border border-border\">\n          {t(emptyLabelKey)}\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          {ports.map((port, index) => {\n            const isExpanded = expandedIndices.has(index)\n            return (\n              <div key={index} className=\"border border-border rounded-lg bg-muted/40\">\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  onClick={() => toggleExpanded(index)}\n                  disabled={disabled}\n                  className=\"w-full h-auto px-4 py-3 justify-between hover:bg-muted/70\"\n                >\n                  <div className=\"flex-1 min-w-0 text-left\">\n                    <div className=\"flex flex-wrap items-center gap-2\">\n                      <span className=\"text-sm font-semibold text-foreground truncate\">\n                        {port.label || port.name}\n                      </span>\n                      <Badge variant=\"secondary\" className=\"text-xs\">\n                        {t(`workflows.ports.types.${port.type}`)}\n                      </Badge>\n                      {port.required && (\n                        <Badge variant=\"outline\" className=\"text-xs\">\n                          {t('workflows.ports.required')}\n                        </Badge>\n                      )}\n                    </div>\n                    <p className=\"text-xs text-muted-foreground mt-1 font-mono truncate\">{port.name}</p>\n                  </div>\n                  <ChevronDown\n                    className={`size-4 text-muted-foreground transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n                  />\n                </Button>\n\n                {isExpanded && (\n                  <div className=\"px-4 pb-4 space-y-3 border-t border-border bg-background\">\n                    <div className=\"pt-3\">\n                      <Label htmlFor={`${id}-${index}-name`} className=\"text-xs font-medium mb-1\">\n                        {t('workflows.ports.name')} *\n                      </Label>\n                      <Input\n                        id={`${id}-${index}-name`}\n                        type=\"text\"\n                        value={port.name}\n                        onChange={(e) => updatePort(index, 'name', e.target.value)}\n                        className=\"text-xs font-mono\"\n                        disabled={disabled}\n                      />\n                      <p className=\"text-xs text-muted-foreground mt-0.5\">{t('workflows.ports.nameHint')}</p>\n                    </div>\n\n                    <div>\n                      <Label htmlFor={`${id}-${index}-label`} className=\"text-xs font-medium mb-1\">\n                        {t('workflows.ports.label')} *\n                      </Label>\n                      <Input\n                        id={`${id}-${index}-label`}\n                        type=\"text\"\n                        value={port.label}\n                        onChange={(e) => updatePort(index, 'label', e.target.value)}\n                        className=\"text-xs\"\n                        disabled={disabled}\n                      />\n                    </div>\n\n                    <div>\n                      <Label htmlFor={`${id}-${index}-type`} className=\"text-xs font-medium mb-1\">\n                        {t('workflows.ports.type')} *\n                      </Label>\n                      <Select\n                        value={port.type}\n                        onValueChange={(next) => updatePort(index, 'type', next)}\n                        disabled={disabled}\n                      >\n                        <SelectTrigger id={`${id}-${index}-type`}>\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          {PORT_TYPES.map((portType) => (\n                            <SelectItem key={portType} value={portType}>\n                              {t(`workflows.ports.types.${portType}`)}\n                            </SelectItem>\n                          ))}\n                        </SelectContent>\n                      </Select>\n                    </div>\n\n                    {port.type === 'select' && (\n                      <div>\n                        <Label htmlFor={`${id}-${index}-options`} className=\"text-xs font-medium mb-1\">\n                          {t('workflows.ports.options')}\n                        </Label>\n                        <Input\n                          id={`${id}-${index}-options`}\n                          type=\"text\"\n                          value={port.options?.join(', ') || ''}\n                          onChange={(e) =>\n                            updatePort(\n                              index,\n                              'options',\n                              e.target.value\n                                .split(',')\n                                .map((option) => option.trim())\n                                .filter(Boolean),\n                            )\n                          }\n                          className=\"text-xs\"\n                          disabled={disabled}\n                        />\n                        <p className=\"text-xs text-muted-foreground mt-0.5\">{t('workflows.ports.optionsHint')}</p>\n                      </div>\n                    )}\n\n                    <div className=\"flex items-center gap-2\">\n                      <Checkbox\n                        id={`${id}-${index}-required`}\n                        checked={port.required}\n                        onCheckedChange={(checked) => updatePort(index, 'required', checked === true)}\n                        disabled={disabled}\n                      />\n                      <Label htmlFor={`${id}-${index}-required`} className=\"text-xs font-medium cursor-pointer\">\n                        {t('workflows.ports.required')}\n                      </Label>\n                    </div>\n\n                    <div className=\"border-t border-border pt-3\">\n                      <IconButton\n                        type=\"button\"\n                        variant=\"ghost\"\n                        onClick={() => removePort(index)}\n                        disabled={disabled}\n                        aria-label={t('workflows.ports.remove')}\n                      >\n                        <Trash2 className=\"size-4\" />\n                      </IconButton>\n                    </div>\n                  </div>\n                )}\n              </div>\n            )\n          })}\n        </div>\n      )}\n      {ConfirmDialogElement}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/workflows/components/fields/RolesMultiSelect.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { TagsInput } from "@open-mercato/ui/backend/inputs/TagsInput";
+function RolesMultiSelect({ id, value, onChange, disabled }) {
+  const t = useT();
+  const [lookupFailed, setLookupFailed] = React.useState(false);
+  const loadRoleSuggestions = React.useCallback(async (query) => {
+    const params = new URLSearchParams({ page: "1", pageSize: "100" });
+    const trimmedQuery = typeof query === "string" ? query.trim() : "";
+    if (trimmedQuery) params.set("search", trimmedQuery);
+    try {
+      const call = await apiCall(
+        `/api/auth/roles?${params.toString()}`,
+        // The roles lookup is optional: editors without auth.roles.list fall back
+        // to free-text entry, so suppress the global forbidden/unauthorized
+        // redirect handling (and its toast) for this call.
+        { headers: { "x-om-forbidden-redirect": "0", "x-om-unauthorized-redirect": "0" } },
+        { fallback: { items: [] } }
+      );
+      if (!call.ok || !Array.isArray(call.result?.items)) {
+        setLookupFailed(true);
+        return [];
+      }
+      setLookupFailed(false);
+      const names = call.result.items.map((item) => typeof item?.name === "string" ? item.name.trim() : "").filter((name) => name.length > 0);
+      return Array.from(new Set(names)).map((name) => ({ value: name, label: name }));
+    } catch {
+      setLookupFailed(true);
+      return [];
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { id, children: [
+    /* @__PURE__ */ jsx(
+      TagsInput,
+      {
+        value,
+        onChange,
+        disabled,
+        allowCustomValues: true,
+        loadSuggestions: loadRoleSuggestions,
+        placeholder: t("workflows.rolesSelect.placeholder")
+      }
+    ),
+    lookupFailed ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: t("workflows.rolesSelect.lookupUnavailable") }) : null
+  ] });
+}
+export {
+  RolesMultiSelect
+};
+//# sourceMappingURL=RolesMultiSelect.js.map

package/dist/modules/workflows/components/fields/RolesMultiSelect.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/workflows/components/fields/RolesMultiSelect.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { TagsInput, type TagsInputOption } from '@open-mercato/ui/backend/inputs/TagsInput'\n\ntype RoleListResponse = {\n  items?: Array<{ id?: string | null; name?: string | null }>\n}\n\nexport type RolesMultiSelectProps = {\n  id?: string\n  value: string[]\n  onChange: (next: string[]) => void\n  disabled?: boolean\n}\n\nexport function RolesMultiSelect({ id, value, onChange, disabled }: RolesMultiSelectProps) {\n  const t = useT()\n  const [lookupFailed, setLookupFailed] = React.useState(false)\n\n  const loadRoleSuggestions = React.useCallback(async (query?: string): Promise<TagsInputOption[]> => {\n    const params = new URLSearchParams({ page: '1', pageSize: '100' })\n    const trimmedQuery = typeof query === 'string' ? query.trim() : ''\n    if (trimmedQuery) params.set('search', trimmedQuery)\n    try {\n      const call = await apiCall<RoleListResponse>(\n        `/api/auth/roles?${params.toString()}`,\n        // The roles lookup is optional: editors without auth.roles.list fall back\n        // to free-text entry, so suppress the global forbidden/unauthorized\n        // redirect handling (and its toast) for this call.\n        { headers: { 'x-om-forbidden-redirect': '0', 'x-om-unauthorized-redirect': '0' } },\n        { fallback: { items: [] } },\n      )\n      if (!call.ok || !Array.isArray(call.result?.items)) {\n        setLookupFailed(true)\n        return []\n      }\n      setLookupFailed(false)\n      const names = call.result.items\n        .map((item) => (typeof item?.name === 'string' ? item.name.trim() : ''))\n        .filter((name) => name.length > 0)\n      return Array.from(new Set(names)).map((name) => ({ value: name, label: name }))\n    } catch {\n      setLookupFailed(true)\n      return []\n    }\n  }, [])\n\n  return (\n    <div id={id}>\n      <TagsInput\n        value={value}\n        onChange={onChange}\n        disabled={disabled}\n        allowCustomValues\n        loadSuggestions={loadRoleSuggestions}\n        placeholder={t('workflows.rolesSelect.placeholder')}\n      />\n      {lookupFailed ? (\n        <p className=\"text-xs text-muted-foreground mt-1\">\n          {t('workflows.rolesSelect.lookupUnavailable')}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n"],
+  "mappings": ";AAmDI,SACE,KADF;AAjDJ,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,iBAAuC;AAazC,SAAS,iBAAiB,EAAE,IAAI,OAAO,UAAU,SAAS,GAA0B;AACzF,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,QAAM,sBAAsB,MAAM,YAAY,OAAO,UAA+C;AAClG,UAAM,SAAS,IAAI,gBAAgB,EAAE,MAAM,KAAK,UAAU,MAAM,CAAC;AACjE,UAAM,eAAe,OAAO,UAAU,WAAW,MAAM,KAAK,IAAI;AAChE,QAAI,aAAc,QAAO,IAAI,UAAU,YAAY;AACnD,QAAI;AACF,YAAM,OAAO,MAAM;AAAA,QACjB,mBAAmB,OAAO,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,QAIpC,EAAE,SAAS,EAAE,2BAA2B,KAAK,8BAA8B,IAAI,EAAE;AAAA,QACjF,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,EAAE;AAAA,MAC5B;AACA,UAAI,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ,KAAK,QAAQ,KAAK,GAAG;AAClD,wBAAgB,IAAI;AACpB,eAAO,CAAC;AAAA,MACV;AACA,sBAAgB,KAAK;AACrB,YAAM,QAAQ,KAAK,OAAO,MACvB,IAAI,CAAC,SAAU,OAAO,MAAM,SAAS,WAAW,KAAK,KAAK,KAAK,IAAI,EAAG,EACtE,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC;AACnC,aAAO,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,KAAK,EAAE;AAAA,IAChF,QAAQ;AACN,sBAAgB,IAAI;AACpB,aAAO,CAAC;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,SAAI,IACH;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,mBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,aAAa,EAAE,mCAAmC;AAAA;AAAA,IACpD;AAAA,IACC,eACC,oBAAC,OAAE,WAAU,sCACV,YAAE,yCAAyC,GAC9C,IACE;AAAA,KACN;AAEJ;",
+  "names": []
+}

package/dist/modules/workflows/components/fields/RouteOrderEditor.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ArrowDown, ArrowUp, CornerDownLeft, GripVertical } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
+import { Badge } from "@open-mercato/ui/primitives/badge";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { SwitchField } from "@open-mercato/ui/primitives/switch-field";
+import {
+  applyDerivedPriorities,
+  moveRoute
+} from "../../lib/route-priority.js";
+function RouteOrderEditor({ id, value, setValue, disabled }) {
+  const t = useT();
+  const entries = Array.isArray(value) ? value : [];
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  const commitOrder = (next) => {
+    setValue(applyDerivedPriorities(next));
+  };
+  const move = (fromIndex, toIndex) => {
+    if (disabled) return;
+    commitOrder(moveRoute(entries, fromIndex, toIndex));
+  };
+  const setPriority = (transitionId, raw) => {
+    const parsed = Number.parseInt(raw, 10);
+    setValue(
+      entries.map(
+        (entry) => entry.transitionId === transitionId ? { ...entry, priority: Number.isFinite(parsed) ? Math.max(0, Math.min(9999, parsed)) : 0 } : entry
+      )
+    );
+  };
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(Alert, { variant: "info", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("workflows.routeOrder.empty") }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-testid": "route-order-editor", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("workflows.routeOrder.hint") }),
+    /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-2", children: entries.map((entry, index) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        draggable: !disabled,
+        onDragStart: () => setDraggingIndex(index),
+        onDragEnd: () => setDraggingIndex(null),
+        onDragOver: (event) => {
+          if (draggingIndex === null) return;
+          event.preventDefault();
+        },
+        onDrop: (event) => {
+          event.preventDefault();
+          if (draggingIndex === null) return;
+          move(draggingIndex, index);
+          setDraggingIndex(null);
+        },
+        className: "flex items-center gap-2 rounded-md border border-border bg-card p-2",
+        "data-testid": `route-order-row-${entry.transitionId}`,
+        children: [
+          /* @__PURE__ */ jsx(GripVertical, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: entry.label || entry.transitionId }),
+              entry.isOtherwise ? /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 text-xs", children: [
+                /* @__PURE__ */ jsx(CornerDownLeft, { className: "size-3", "aria-hidden": "true" }),
+                t("workflows.routeChips.otherwise")
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.routeOrder.target", { stepId: entry.toStepId }) })
+          ] }),
+          showAdvanced ? /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-${entry.transitionId}-priority`, className: "text-xs text-muted-foreground", children: t("workflows.edgeEditor.priority") }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${id}-${entry.transitionId}-priority`,
+                type: "number",
+                className: "w-20 text-xs",
+                value: String(entry.priority),
+                onChange: (event) => setPriority(entry.transitionId, event.target.value),
+                disabled
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: entry.priority }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled || index === 0,
+                "aria-label": t("workflows.routeOrder.moveUp"),
+                onClick: () => move(index, index - 1),
+                children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled || index === entries.length - 1,
+                "aria-label": t("workflows.routeOrder.moveDown"),
+                onClick: () => move(index, index + 1),
+                children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
+              }
+            )
+          ] })
+        ]
+      },
+      entry.transitionId
+    )) }),
+    /* @__PURE__ */ jsx(
+      SwitchField,
+      {
+        id: `${id}-advanced`,
+        label: t("workflows.routeOrder.showPriorityNumbers"),
+        checked: showAdvanced,
+        onCheckedChange: setShowAdvanced,
+        disabled
+      }
+    )
+  ] });
+}
+export {
+  RouteOrderEditor
+};
+//# sourceMappingURL=RouteOrderEditor.js.map

package/dist/modules/workflows/components/fields/RouteOrderEditor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/workflows/components/fields/RouteOrderEditor.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport { ArrowDown, ArrowUp, CornerDownLeft, GripVertical } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { SwitchField } from '@open-mercato/ui/primitives/switch-field'\nimport {\n  applyDerivedPriorities,\n  moveRoute,\n  type RouteOrderEntry,\n} from '../../lib/route-priority'\n\n/**\n * RouteOrderEditor \u2014 drag-to-reorder of a step's outgoing routes (spec section\n * 4.4). The list order IS the evaluation order; the priority number is derived\n * from it and demoted behind an advanced toggle, where it stays editable for\n * authors who need an exact value.\n *\n * Drag is an enhancement: every row also carries keyboard-reachable move-up /\n * move-down buttons, so reordering never depends on a pointer.\n */\n\nexport interface RouteOrderEditorProps {\n  id: string\n  value?: RouteOrderEntry[]\n  setValue: (next: RouteOrderEntry[]) => void\n  disabled?: boolean\n}\n\nexport function RouteOrderEditor({ id, value, setValue, disabled }: RouteOrderEditorProps) {\n  const t = useT()\n  const entries = Array.isArray(value) ? value : []\n  const [showAdvanced, setShowAdvanced] = useState(false)\n  const [draggingIndex, setDraggingIndex] = useState<number | null>(null)\n\n  const commitOrder = (next: RouteOrderEntry[]) => {\n    setValue(applyDerivedPriorities(next))\n  }\n\n  const move = (fromIndex: number, toIndex: number) => {\n    if (disabled) return\n    commitOrder(moveRoute(entries, fromIndex, toIndex))\n  }\n\n  const setPriority = (transitionId: string, raw: string) => {\n    const parsed = Number.parseInt(raw, 10)\n    setValue(\n      entries.map((entry) =>\n        entry.transitionId === transitionId\n          ? { ...entry, priority: Number.isFinite(parsed) ? Math.max(0, Math.min(9999, parsed)) : 0 }\n          : entry,\n      ),\n    )\n  }\n\n  if (entries.length === 0) {\n    return (\n      <Alert variant=\"info\">\n        <AlertDescription>\n          {t('workflows.routeOrder.empty')}\n        </AlertDescription>\n      </Alert>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\" data-testid=\"route-order-editor\">\n      <p className=\"text-xs text-muted-foreground\">\n        {t('workflows.routeOrder.hint')}\n      </p>\n\n      <ol className=\"flex flex-col gap-2\">\n        {entries.map((entry, index) => (\n          <li\n            key={entry.transitionId}\n            draggable={!disabled}\n            onDragStart={() => setDraggingIndex(index)}\n            onDragEnd={() => setDraggingIndex(null)}\n            onDragOver={(event) => {\n              if (draggingIndex === null) return\n              event.preventDefault()\n            }}\n            onDrop={(event) => {\n              event.preventDefault()\n              if (draggingIndex === null) return\n              move(draggingIndex, index)\n              setDraggingIndex(null)\n            }}\n            className=\"flex items-center gap-2 rounded-md border border-border bg-card p-2\"\n            data-testid={`route-order-row-${entry.transitionId}`}\n          >\n            <GripVertical className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n\n            <div className=\"min-w-0 flex-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"truncate text-sm font-medium\">\n                  {entry.label || entry.transitionId}\n                </span>\n                {entry.isOtherwise ? (\n                  <Badge variant=\"secondary\" className=\"gap-1 text-xs\">\n                    <CornerDownLeft className=\"size-3\" aria-hidden=\"true\" />\n                    {t('workflows.routeChips.otherwise')}\n                  </Badge>\n                ) : null}\n              </div>\n              <span className=\"text-xs text-muted-foreground\">\n                {t('workflows.routeOrder.target', { stepId: entry.toStepId })}\n              </span>\n            </div>\n\n            {showAdvanced ? (\n              <div className=\"flex shrink-0 items-center gap-1\">\n                <Label htmlFor={`${id}-${entry.transitionId}-priority`} className=\"text-xs text-muted-foreground\">\n                  {t('workflows.edgeEditor.priority')}\n                </Label>\n                <Input\n                  id={`${id}-${entry.transitionId}-priority`}\n                  type=\"number\"\n                  className=\"w-20 text-xs\"\n                  value={String(entry.priority)}\n                  onChange={(event) => setPriority(entry.transitionId, event.target.value)}\n                  disabled={disabled}\n                />\n              </div>\n            ) : (\n              <span className=\"shrink-0 font-mono text-xs text-muted-foreground\">{entry.priority}</span>\n            )}\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                disabled={disabled || index === 0}\n                aria-label={t('workflows.routeOrder.moveUp')}\n                onClick={() => move(index, index - 1)}\n              >\n                <ArrowUp className=\"size-4\" />\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                disabled={disabled || index === entries.length - 1}\n                aria-label={t('workflows.routeOrder.moveDown')}\n                onClick={() => move(index, index + 1)}\n              >\n                <ArrowDown className=\"size-4\" />\n              </Button>\n            </div>\n          </li>\n        ))}\n      </ol>\n\n      <SwitchField\n        id={`${id}-advanced`}\n        label={t('workflows.routeOrder.showPriorityNumbers')}\n        checked={showAdvanced}\n        onCheckedChange={setShowAdvanced}\n        disabled={disabled}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}