@open-mercato/core 0.4.2-canary-ed15f2e753 → 0.4.2-canary-f075c3eb92

package/dist/modules/workflows/backend/definitions/create/page.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useRouter } from "next/navigation";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
@@ -15,8 +15,6 @@ import {
 } from "../../../components/formConfig.js";
 import { StepsEditor } from "../../../components/StepsEditor.js";
 import { TransitionsEditor } from "../../../components/TransitionsEditor.js";
-import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
-import { Zap } from "lucide-react";
 function CreateWorkflowDefinitionPage() {
   const router = useRouter();
   const t = useT();
@@ -40,27 +38,20 @@ function CreateWorkflowDefinitionPage() {
     () => createFormGroups(t, StepsEditor, TransitionsEditor),
     [t]
   );
-  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs(PageBody, { children: [
-    /* @__PURE__ */ jsxs(Alert, { variant: "info", className: "mb-6", children: [
-      /* @__PURE__ */ jsx(Zap, { className: "w-4 h-4" }),
-      /* @__PURE__ */ jsx(AlertTitle, { children: "Event Triggers" }),
-      /* @__PURE__ */ jsx(AlertDescription, { children: "After creating this workflow definition, you can configure event triggers to automatically start the workflow when specific events occur in the system." })
-    ] }),
-    /* @__PURE__ */ jsx(
-      CrudForm,
-      {
-        title: t("workflows.create.title"),
-        backHref: "/backend/definitions",
-        schema: workflowDefinitionFormSchema,
-        fields,
-        initialValues: defaultFormValues,
-        onSubmit: handleSubmit,
-        cancelHref: "/backend/definitions",
-        groups: formGroups,
-        submitLabel: t("workflows.form.create")
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
+    CrudForm,
+    {
+      title: t("workflows.create.title"),
+      backHref: "/backend/definitions",
+      schema: workflowDefinitionFormSchema,
+      fields,
+      initialValues: defaultFormValues,
+      onSubmit: handleSubmit,
+      cancelHref: "/backend/definitions",
+      groups: formGroups,
+      submitLabel: t("workflows.form.create")
+    }
+  ) }) });
 }
 export {
   CreateWorkflowDefinitionPage as default

package/dist/modules/workflows/backend/definitions/create/page.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/modules/workflows/backend/definitions/create/page.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { useRouter } from 'next/navigation'\nimport { Page, PageBody } from '@open-mercato/ui/backend/Page'\nimport { CrudForm } from '@open-mercato/ui/backend/CrudForm'\nimport { apiFetch } from '@open-mercato/ui/backend/utils/api'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  workflowDefinitionFormSchema,\n  createFormGroups,\n  createFieldDefinitions,\n  defaultFormValues,\n  buildWorkflowPayload,\n  type WorkflowDefinitionFormValues,\n} from '../../../components/formConfig'\nimport { StepsEditor } from '../../../components/StepsEditor'\nimport { TransitionsEditor } from '../../../components/TransitionsEditor'\nimport { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'\nimport { Zap } from 'lucide-react'\n\nexport default function CreateWorkflowDefinitionPage() {\n  const router = useRouter()\n  const t = useT()\n\n  const handleSubmit = async (values: WorkflowDefinitionFormValues) => {\n    const payload = buildWorkflowPayload(values)\n\n    const response = await apiFetch('/api/workflows/definitions', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(payload),\n    })\n\n    if (!response.ok) {\n      const error = await response.json()\n      throw new Error(error.error || t('workflows.errors.createFailed'))\n    }\n\n    const result = await response.json()\n    router.push(`/backend/definitions/${result.id}`)\n    router.refresh()\n  }\n\n  const fields = React.useMemo(() => createFieldDefinitions(t), [t])\n\n  const formGroups = React.useMemo(\n    () => createFormGroups(t, StepsEditor, TransitionsEditor),\n    [t]\n  )\n\n  return (\n    <Page>\n      <PageBody>\n        <Alert variant=\"info\" className=\"mb-6\">\n          <Zap className=\"w-4 h-4\" />\n          <AlertTitle>Event Triggers</AlertTitle>\n          <AlertDescription>\n            After creating this workflow definition, you can configure event triggers to automatically start the workflow when specific events occur in the system.\n          </AlertDescription>\n        </Alert>\n        <CrudForm\n          title={t('workflows.create.title')}\n          backHref=\"/backend/definitions\"\n          schema={workflowDefinitionFormSchema}\n          fields={fields}\n          initialValues={defaultFormValues}\n          onSubmit={handleSubmit}\n          cancelHref=\"/backend/definitions\"\n          groups={formGroups}\n          submitLabel={t('workflows.form.create')}\n        />\n      </PageBody>\n    </Page>\n  )\n}\n"],
-  "mappings": ";AAsDQ,SACE,KADF;AApDR,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAC1B,SAAS,MAAM,gBAAgB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,OAAO,kBAAkB,kBAAkB;AACpD,SAAS,WAAW;AAEL,SAAR,+BAAgD;AACrD,QAAM,SAAS,UAAU;AACzB,QAAM,IAAI,KAAK;AAEf,QAAM,eAAe,OAAO,WAAyC;AACnE,UAAM,UAAU,qBAAqB,MAAM;AAE3C,UAAM,WAAW,MAAM,SAAS,8BAA8B;AAAA,MAC5D,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,MAC9C,MAAM,KAAK,UAAU,OAAO;AAAA,IAC9B,CAAC;AAED,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,QAAQ,MAAM,SAAS,KAAK;AAClC,YAAM,IAAI,MAAM,MAAM,SAAS,EAAE,+BAA+B,CAAC;AAAA,IACnE;AAEA,UAAM,SAAS,MAAM,SAAS,KAAK;AACnC,WAAO,KAAK,wBAAwB,OAAO,EAAE,EAAE;AAC/C,WAAO,QAAQ;AAAA,EACjB;AAEA,QAAM,SAAS,MAAM,QAAQ,MAAM,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC;AAEjE,QAAM,aAAa,MAAM;AAAA,IACvB,MAAM,iBAAiB,GAAG,aAAa,iBAAiB;AAAA,IACxD,CAAC,CAAC;AAAA,EACJ;AAEA,SACE,oBAAC,QACC,+BAAC,YACC;AAAA,yBAAC,SAAM,SAAQ,QAAO,WAAU,QAC9B;AAAA,0BAAC,OAAI,WAAU,WAAU;AAAA,MACzB,oBAAC,cAAW,4BAAc;AAAA,MAC1B,oBAAC,oBAAiB,qKAElB;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,wBAAwB;AAAA,QACjC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,QACA,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAW;AAAA,QACX,QAAQ;AAAA,QACR,aAAa,EAAE,uBAAuB;AAAA;AAAA,IACxC;AAAA,KACF,GACF;AAEJ;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { useRouter } from 'next/navigation'\nimport { Page, PageBody } from '@open-mercato/ui/backend/Page'\nimport { CrudForm } from '@open-mercato/ui/backend/CrudForm'\nimport { apiFetch } from '@open-mercato/ui/backend/utils/api'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  workflowDefinitionFormSchema,\n  createFormGroups,\n  createFieldDefinitions,\n  defaultFormValues,\n  buildWorkflowPayload,\n  type WorkflowDefinitionFormValues,\n} from '../../../components/formConfig'\nimport { StepsEditor } from '../../../components/StepsEditor'\nimport { TransitionsEditor } from '../../../components/TransitionsEditor'\n\nexport default function CreateWorkflowDefinitionPage() {\n  const router = useRouter()\n  const t = useT()\n\n  const handleSubmit = async (values: WorkflowDefinitionFormValues) => {\n    const payload = buildWorkflowPayload(values)\n\n    const response = await apiFetch('/api/workflows/definitions', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify(payload),\n    })\n\n    if (!response.ok) {\n      const error = await response.json()\n      throw new Error(error.error || t('workflows.errors.createFailed'))\n    }\n\n    const result = await response.json()\n    router.push(`/backend/definitions/${result.id}`)\n    router.refresh()\n  }\n\n  const fields = React.useMemo(() => createFieldDefinitions(t), [t])\n\n  const formGroups = React.useMemo(\n    () => createFormGroups(t, StepsEditor, TransitionsEditor),\n    [t]\n  )\n\n  return (\n    <Page>\n      <PageBody>\n        <CrudForm\n          title={t('workflows.create.title')}\n          backHref=\"/backend/definitions\"\n          schema={workflowDefinitionFormSchema}\n          fields={fields}\n          initialValues={defaultFormValues}\n          onSubmit={handleSubmit}\n          cancelHref=\"/backend/definitions\"\n          groups={formGroups}\n          submitLabel={t('workflows.form.create')}\n        />\n      </PageBody>\n    </Page>\n  )\n}\n"],
+  "mappings": ";AAoDQ;AAlDR,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAC1B,SAAS,MAAM,gBAAgB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAEnB,SAAR,+BAAgD;AACrD,QAAM,SAAS,UAAU;AACzB,QAAM,IAAI,KAAK;AAEf,QAAM,eAAe,OAAO,WAAyC;AACnE,UAAM,UAAU,qBAAqB,MAAM;AAE3C,UAAM,WAAW,MAAM,SAAS,8BAA8B;AAAA,MAC5D,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAmB;AAAA,MAC9C,MAAM,KAAK,UAAU,OAAO;AAAA,IAC9B,CAAC;AAED,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,QAAQ,MAAM,SAAS,KAAK;AAClC,YAAM,IAAI,MAAM,MAAM,SAAS,EAAE,+BAA+B,CAAC;AAAA,IACnE;AAEA,UAAM,SAAS,MAAM,SAAS,KAAK;AACnC,WAAO,KAAK,wBAAwB,OAAO,EAAE,EAAE;AAC/C,WAAO,QAAQ;AAAA,EACjB;AAEA,QAAM,SAAS,MAAM,QAAQ,MAAM,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC;AAEjE,QAAM,aAAa,MAAM;AAAA,IACvB,MAAM,iBAAiB,GAAG,aAAa,iBAAiB;AAAA,IACxD,CAAC,CAAC;AAAA,EACJ;AAEA,SACE,oBAAC,QACC,8BAAC,YACC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,wBAAwB;AAAA,MACjC,UAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA,eAAe;AAAA,MACf,UAAU;AAAA,MACV,YAAW;AAAA,MACX,QAAQ;AAAA,MACR,aAAa,EAAE,uBAAuB;AAAA;AAAA,EACxC,GACF,GACF;AAEJ;",
   "names": []
 }

package/dist/modules/workflows/backend/definitions/create/page.meta.js

@@ -18,7 +18,7 @@ const metadata = {
   pageOrder: 100,
   icon: createIcon,
   breadcrumb: [
-    { label: "Workflows", labelKey: "workflows.module.name", href: "/backend/definitions" },
+    { label: "Workflows", labelKey: "workflows.module.name", href: "/backend/workflows/definitions" },
     { label: "Create", labelKey: "workflows.common.create" }
   ]
 };

package/dist/modules/workflows/backend/definitions/create/page.meta.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/modules/workflows/backend/definitions/create/page.meta.ts"],
-  "sourcesContent": ["import React from 'react'\n\nconst createIcon = React.createElement(\n  'svg',\n  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },\n  React.createElement('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' }),\n  React.createElement('polyline', { points: '14 2 14 8 20 8' }),\n  React.createElement('line', { x1: 12, y1: 13, x2: 12, y2: 19 }),\n  React.createElement('line', { x1: 9, y1: 16, x2: 15, y2: 16 })\n)\n\nexport const metadata = {\n  requireAuth: true,\n  requireFeatures: ['workflows.create'],\n  pageTitle: 'Create Workflow Definition',\n  pageTitleKey: 'workflows.create.title',\n  pageGroup: 'Workflows',\n  pageGroupKey: 'workflows.module.name',\n  pagePriority: 10,\n  pageOrder: 100,\n  icon: createIcon,\n  breadcrumb: [\n    { label: 'Workflows', labelKey: 'workflows.module.name', href: '/backend/definitions' },\n    { label: 'Create', labelKey: 'workflows.common.create' },\n  ],\n}\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,MAAM,aAAa,MAAM;AAAA,EACvB;AAAA,EACA,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,QAAQ,gBAAgB,aAAa,EAAE;AAAA,EACpG,MAAM,cAAc,QAAQ,EAAE,GAAG,6DAA6D,CAAC;AAAA,EAC/F,MAAM,cAAc,YAAY,EAAE,QAAQ,iBAAiB,CAAC;AAAA,EAC5D,MAAM,cAAc,QAAQ,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;AAAA,EAC9D,MAAM,cAAc,QAAQ,EAAE,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;AAC/D;AAEO,MAAM,WAAW;AAAA,EACtB,aAAa;AAAA,EACb,iBAAiB,CAAC,kBAAkB;AAAA,EACpC,WAAW;AAAA,EACX,cAAc;AAAA,EACd,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AAAA,IACV,EAAE,OAAO,aAAa,UAAU,yBAAyB,MAAM,uBAAuB;AAAA,IACtF,EAAE,OAAO,UAAU,UAAU,0BAA0B;AAAA,EACzD;AACF;",
+  "sourcesContent": ["import React from 'react'\n\nconst createIcon = React.createElement(\n  'svg',\n  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },\n  React.createElement('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' }),\n  React.createElement('polyline', { points: '14 2 14 8 20 8' }),\n  React.createElement('line', { x1: 12, y1: 13, x2: 12, y2: 19 }),\n  React.createElement('line', { x1: 9, y1: 16, x2: 15, y2: 16 })\n)\n\nexport const metadata = {\n  requireAuth: true,\n  requireFeatures: ['workflows.create'],\n  pageTitle: 'Create Workflow Definition',\n  pageTitleKey: 'workflows.create.title',\n  pageGroup: 'Workflows',\n  pageGroupKey: 'workflows.module.name',\n  pagePriority: 10,\n  pageOrder: 100,\n  icon: createIcon,\n  breadcrumb: [\n    { label: 'Workflows', labelKey: 'workflows.module.name', href: '/backend/workflows/definitions' },\n    { label: 'Create', labelKey: 'workflows.common.create' },\n  ],\n}\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,MAAM,aAAa,MAAM;AAAA,EACvB;AAAA,EACA,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,QAAQ,gBAAgB,aAAa,EAAE;AAAA,EACpG,MAAM,cAAc,QAAQ,EAAE,GAAG,6DAA6D,CAAC;AAAA,EAC/F,MAAM,cAAc,YAAY,EAAE,QAAQ,iBAAiB,CAAC;AAAA,EAC5D,MAAM,cAAc,QAAQ,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;AAAA,EAC9D,MAAM,cAAc,QAAQ,EAAE,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC;AAC/D;AAEO,MAAM,WAAW;AAAA,EACtB,aAAa;AAAA,EACb,iBAAiB,CAAC,kBAAkB;AAAA,EACpC,WAAW;AAAA,EACX,cAAc;AAAA,EACd,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AAAA,IACV,EAAE,OAAO,aAAa,UAAU,yBAAyB,MAAM,iCAAiC;AAAA,IAChG,EAAE,OAAO,UAAU,UAAU,0BAA0B;AAAA,EACzD;AACF;",
   "names": []
 }

package/dist/modules/workflows/backend/definitions/visual-editor/page.js

@@ -33,7 +33,6 @@ import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
 import { CircleQuestionMark, Info, PanelTopClose, PanelTopOpen, Play, Save, Trash2 } from "lucide-react";
 import { NODE_TYPE_ICONS, NODE_TYPE_COLORS, NODE_TYPE_LABELS } from "../../../lib/node-type-icons.js";
-import { DefinitionTriggersEditor } from "../../../components/DefinitionTriggersEditor.js";
 function VisualEditorPage() {
   const t = useT();
   const router = useRouter();
@@ -59,7 +58,6 @@ function VisualEditorPage() {
   const [icon, setIcon] = useState("");
   const [effectiveFrom, setEffectiveFrom] = useState("");
   const [effectiveTo, setEffectiveTo] = useState("");
-  const [triggers, setTriggers] = useState([]);
   useEffect(() => {
     const loadDefinition = async () => {
       if (!definitionId) {
@@ -87,7 +85,6 @@ function VisualEditorPage() {
         const graph = definitionToGraph(definition.definition);
         setNodes(graph.nodes);
         setEdges(graph.edges);
-        setTriggers(definition.definition?.triggers || []);
         flash("Workflow loaded successfully", "success");
       } catch (error) {
         console.error("Error loading workflow definition:", error);
@@ -212,11 +209,7 @@ function VisualEditorPage() {
       flash(`Cannot save: ${criticalErrors.length} validation error(s) found. Please fix them first.`, "error");
       return;
     }
-    const graphDefinition = graphToDefinition(nodes, edges, { includePositions: true });
-    const definitionData = {
-      ...graphDefinition,
-      triggers: triggers.length > 0 ? triggers : void 0
-    };
+    const definitionData = graphToDefinition(nodes, edges, { includePositions: true });
     const schemaResult = workflowDefinitionDataSchema.safeParse(definitionData);
     if (!schemaResult.success) {
       const firstIssue = schemaResult.error.issues[0];
@@ -272,7 +265,7 @@ function VisualEditorPage() {
     } finally {
       setIsSaving(false);
     }
-  }, [nodes, edges, workflowId, workflowName, description, version, enabled, category, tags, triggers, definitionId, router]);
+  }, [nodes, edges, workflowId, workflowName, description, version, enabled, category, tags, definitionId, router]);
   const handleTest = useCallback(() => {
     const errors = validateWorkflowGraph(nodes, edges);
     const criticalErrors = errors.filter((e) => e.type === "error");
@@ -375,7 +368,6 @@ function VisualEditorPage() {
     setIcon("");
     setEffectiveFrom("");
     setEffectiveTo("");
-    setTriggers([]);
     setShowClearConfirm(false);
     flash("Canvas cleared", "success");
   }, []);
@@ -474,152 +466,142 @@ function VisualEditorPage() {
         )
       ] })
     ] }) }),
-    showMetadata && /* @__PURE__ */ jsxs("div", { className: "bg-white border-b border-gray-200 px-6 py-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase text-muted-foreground mb-4", children: "Workflow Metadata" }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "workflowId", className: "text-xs", children: "Workflow ID *" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "workflowId",
-                value: workflowId,
-                onChange: (e) => setWorkflowId(e.target.value),
-                placeholder: "checkout_workflow",
-                disabled: !!definitionId
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: definitionId ? "Cannot be changed when editing" : "Lowercase, numbers, hyphens, underscores" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "workflowName", className: "text-xs", children: "Workflow Name *" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "workflowName",
-                value: workflowName,
-                onChange: (e) => setWorkflowName(e.target.value),
-                placeholder: "Checkout Process"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "category", className: "text-xs", children: "Category" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "category",
-                value: category,
-                onChange: (e) => setCategory(e.target.value),
-                placeholder: "E-Commerce"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "col-span-3 space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "description", className: "text-xs", children: "Description" }),
-            /* @__PURE__ */ jsx(
-              Textarea,
-              {
-                id: "description",
-                value: description,
-                onChange: (e) => setDescription(e.target.value),
-                placeholder: "Describe the purpose of this workflow...",
-                rows: 2
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "version", className: "text-xs", children: "Version *" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "version",
-                type: "number",
-                value: version,
-                onChange: (e) => setVersion(parseInt(e.target.value) || 1),
-                min: 1,
-                disabled: !!definitionId
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Version number (increment for major changes)" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Enabled" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
-              /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  id: "enabled",
-                  checked: enabled,
-                  onCheckedChange: setEnabled
-                }
-              ),
-              /* @__PURE__ */ jsx(Label, { htmlFor: "enabled", className: "text-sm font-normal cursor-pointer", children: "Only enabled workflows can be started" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Tags" }),
-            /* @__PURE__ */ jsx(
-              TagsInput,
-              {
-                value: tags,
-                onChange: setTags,
-                placeholder: t("workflows.form.placeholders.tags")
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("workflows.form.descriptions.tags") })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "icon", className: "text-xs", children: "Icon" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "icon",
-                value: icon,
-                onChange: (e) => setIcon(e.target.value),
-                placeholder: "ShoppingCart"
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Icon name for visual identification" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveFrom", className: "text-xs", children: "Effective From" }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "effectiveFrom",
-                type: "date",
-                value: effectiveFrom,
-                onChange: (e) => setEffectiveFrom(e.target.value)
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Workflow becomes active from this date" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveTo", className: "text-xs", children: "Effective To" }),
+    showMetadata && /* @__PURE__ */ jsx("div", { className: "bg-white border-b border-gray-200 px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase text-muted-foreground mb-4", children: "Workflow Metadata" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "workflowId", className: "text-xs", children: "Workflow ID *" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "workflowId",
+              value: workflowId,
+              onChange: (e) => setWorkflowId(e.target.value),
+              placeholder: "checkout_workflow",
+              disabled: !!definitionId
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: definitionId ? "Cannot be changed when editing" : "Lowercase, numbers, hyphens, underscores" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "workflowName", className: "text-xs", children: "Workflow Name *" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "workflowName",
+              value: workflowName,
+              onChange: (e) => setWorkflowName(e.target.value),
+              placeholder: "Checkout Process"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "category", className: "text-xs", children: "Category" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "category",
+              value: category,
+              onChange: (e) => setCategory(e.target.value),
+              placeholder: "E-Commerce"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "col-span-3 space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "description", className: "text-xs", children: "Description" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "description",
+              value: description,
+              onChange: (e) => setDescription(e.target.value),
+              placeholder: "Describe the purpose of this workflow...",
+              rows: 2
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "version", className: "text-xs", children: "Version *" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "version",
+              type: "number",
+              value: version,
+              onChange: (e) => setVersion(parseInt(e.target.value) || 1),
+              min: 1,
+              disabled: !!definitionId
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Version number (increment for major changes)" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Enabled" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
             /* @__PURE__ */ jsx(
-              Input,
+              Switch,
               {
-                id: "effectiveTo",
-                type: "date",
-                value: effectiveTo,
-                onChange: (e) => setEffectiveTo(e.target.value)
+                id: "enabled",
+                checked: enabled,
+                onCheckedChange: setEnabled
               }
             ),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Workflow deactivates after this date" })
+            /* @__PURE__ */ jsx(Label, { htmlFor: "enabled", className: "text-sm font-normal cursor-pointer", children: "Only enabled workflows can be started" })
           ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Tags" }),
+          /* @__PURE__ */ jsx(
+            TagsInput,
+            {
+              value: tags,
+              onChange: setTags,
+              placeholder: t("workflows.form.placeholders.tags")
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("workflows.form.descriptions.tags") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "icon", className: "text-xs", children: "Icon" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "icon",
+              value: icon,
+              onChange: (e) => setIcon(e.target.value),
+              placeholder: "ShoppingCart"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Icon name for visual identification" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveFrom", className: "text-xs", children: "Effective From" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "effectiveFrom",
+              type: "date",
+              value: effectiveFrom,
+              onChange: (e) => setEffectiveFrom(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Workflow becomes active from this date" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "effectiveTo", className: "text-xs", children: "Effective To" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "effectiveTo",
+              type: "date",
+              value: effectiveTo,
+              onChange: (e) => setEffectiveTo(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Workflow deactivates after this date" })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx(
-        DefinitionTriggersEditor,
-        {
-          value: triggers,
-          onChange: setTriggers,
-          className: "mt-4"
-        }
-      )
-    ] }),
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsxs(PageBody, { className: "flex-1 flex overflow-hidden", children: [
       /* @__PURE__ */ jsx("div", { className: "w-88 bg-white border-r border-gray-200 p-6 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
         /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold uppercase text-muted-foreground mb-2", children: "Step Palette" }),