@open-mercato/core 0.6.6-develop.6089.1.a7ed560528 → 0.6.6-develop.6121.1.5797a901b3

package/src/modules/translations/api/put/locales.ts

@@ -1,7 +1,11 @@
 import { NextResponse } from 'next/server'
 import { z } from 'zod'
-import { resolveTranslationsRouteContext } from '@open-mercato/core/modules/translations/api/context'
+import { resolveTranslationsRouteContext, resolveTranslationsActorId } from '@open-mercato/core/modules/translations/api/context'
 import { CrudHttpError, isCrudHttpError } from '@open-mercato/shared/lib/crud/errors'
+import {
+  runCrudMutationGuardAfterSuccess,
+  validateCrudMutationGuard,
+} from '@open-mercato/shared/lib/crud/mutation-guard'
 import { isValidIso639 } from '@open-mercato/shared/lib/i18n/iso639'
 import type { ModuleConfigService } from '@open-mercato/core/modules/configs/lib/module-config-service'
 import type { OpenApiMethodDoc, OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
@@ -23,9 +27,39 @@ async function PUT(req: Request) {
     const body = bodySchema.parse(await req.json())
     const uniqueLocales = [...new Set(body.locales.map((l) => l.toLowerCase().trim()))]
 
+    const guardUserId = resolveTranslationsActorId(context.auth)
+    const guardResult = await validateCrudMutationGuard(context.container, {
+      tenantId: context.tenantId,
+      organizationId: context.organizationId,
+      userId: guardUserId,
+      resourceKind: 'translations.locales',
+      resourceId: 'supported_locales',
+      operation: 'custom',
+      requestMethod: req.method,
+      requestHeaders: req.headers,
+      mutationPayload: { locales: uniqueLocales },
+    })
+    if (guardResult && !guardResult.ok) {
+      return NextResponse.json(guardResult.body, { status: guardResult.status })
+    }
+
     const configService = context.container.resolve('moduleConfigService') as ModuleConfigService
     await configService.setValue('translations', 'supported_locales', uniqueLocales)
 
+    if (guardResult?.ok && guardResult.shouldRunAfterSuccess) {
+      await runCrudMutationGuardAfterSuccess(context.container, {
+        tenantId: context.tenantId,
+        organizationId: context.organizationId,
+        userId: guardUserId,
+        resourceKind: 'translations.locales',
+        resourceId: 'supported_locales',
+        operation: 'custom',
+        requestMethod: req.method,
+        requestHeaders: req.headers,
+        metadata: guardResult.metadata ?? null,
+      })
+    }
+
     return NextResponse.json({ locales: uniqueLocales })
   } catch (err) {
     if (isCrudHttpError(err)) {

package/src/modules/workflows/backend/definitions/visual-editor/page.tsx

@@ -6,10 +6,10 @@ import { NodeEditDialog } from '../../../components/NodeEditDialog'
 import { EdgeEditDialog } from '../../../components/EdgeEditDialog'
 import { NodeEditDialogCrudForm } from '../../../components/NodeEditDialogCrudForm'
 import { EdgeEditDialogCrudForm } from '../../../components/EdgeEditDialogCrudForm'
-import { Node, Edge, addEdge, Connection, applyNodeChanges, applyEdgeChanges, NodeChange, EdgeChange } from '@xyflow/react'
+import type { Node, Edge, Connection } from '@xyflow/react'
 import { useState, useCallback, useEffect } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { graphToDefinition, definitionToGraph, validateWorkflowGraph, generateStepId, generateTransitionId, ValidationError } from '../../../lib/graph-utils'
+import { graphToDefinition, definitionToGraph, validateWorkflowGraph, generateStepId, generateTransitionId, appendWorkflowEdge, ValidationError } from '../../../lib/graph-utils'
 import { performDeleteEdgeFlow, performDeleteNodeFlow } from '../../../lib/visual-editor-delete-flow'
 import { workflowDefinitionDataSchema } from '../../../data/validators'
 import { Page } from '@open-mercato/ui/backend/Page'
@@ -169,16 +169,18 @@ export default function VisualEditorPage() {
     loadDefinition()
   }, [definitionId])
 
-  // Handle node changes from ReactFlow
-  const handleNodesChange = useCallback((changes: NodeChange[]) => {
+  // Handle node changes from ReactFlow. The lazy graph applies React Flow's
+  // change reducers internally (#3169) and hands back the resolved nodes, so
+  // this page never imports the @xyflow/react runtime.
+  const handleNodesChange = useCallback((nextNodes: Node[]) => {
     if (isCodeOnly) return
-    setNodes((nds) => applyNodeChanges(changes, nds))
+    setNodes(nextNodes)
   }, [isCodeOnly])
 
-  // Handle edge changes from ReactFlow
-  const handleEdgesChange = useCallback((changes: EdgeChange[]) => {
+  // Handle edge changes from ReactFlow (resolved edges from the lazy graph).
+  const handleEdgesChange = useCallback((nextEdges: Edge[]) => {
     if (isCodeOnly) return
-    setEdges((eds) => applyEdgeChanges(changes, eds))
+    setEdges(nextEdges)
   }, [isCodeOnly])
 
   // Handle adding new node from palette
@@ -285,7 +287,7 @@ export default function VisualEditorPage() {
       },
     }
 
-    setEdges((eds) => addEdge(newEdge, eds))
+    setEdges((eds) => appendWorkflowEdge(eds, newEdge))
   }, [])
 
   // Validate workflow

package/src/modules/workflows/backend/instances/[id]/page.tsx

@@ -18,7 +18,7 @@ import { WorkflowLegend } from '../../../components/WorkflowLegend'
 import { MobileInstanceOverview } from '../../../components/mobile/MobileInstanceOverview'
 import { useIsMobile } from '@open-mercato/ui/hooks/useIsMobile'
 import { definitionToGraph } from '../../../lib/graph-utils'
-import { Node } from '@xyflow/react'
+import type { Node } from '@xyflow/react'
 import { RecordNotFoundState, ErrorMessage } from '@open-mercato/ui/backend/detail'
 
 export default function WorkflowInstanceDetailPage({ params }: { params?: { id?: string } }) {

package/src/modules/workflows/components/EdgeEditDialog.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import {Edge} from '@xyflow/react'
+import type {Edge} from '@xyflow/react'
 import {useEffect, useState} from 'react'
 import {
   Dialog,

package/src/modules/workflows/components/EdgeEditDialogCrudForm.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Edge } from '@xyflow/react'
+import type { Edge } from '@xyflow/react'
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@open-mercato/ui/primitives/dialog'
 import { Badge } from '@open-mercato/ui/primitives/badge'

package/src/modules/workflows/components/NodeEditDialog.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import {Node} from '@xyflow/react'
+import type {Node} from '@xyflow/react'
 import {useEffect, useState} from 'react'
 import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle} from '@open-mercato/ui/primitives/dialog'
 import {Button} from '@open-mercato/ui/primitives/button'

package/src/modules/workflows/components/NodeEditDialogCrudForm.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Node } from '@xyflow/react'
+import type { Node } from '@xyflow/react'
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@open-mercato/ui/primitives/dialog'
 import { Badge } from '@open-mercato/ui/primitives/badge'

package/src/modules/workflows/components/WorkflowGraph.tsx

@@ -8,8 +8,8 @@ import { Spinner } from '@open-mercato/ui/primitives/spinner'
 export interface WorkflowGraphProps {
   initialNodes?: Node[]
   initialEdges?: Edge[]
-  onNodesChange?: (changes: any[]) => void
-  onEdgesChange?: (changes: any[]) => void
+  onNodesChange?: (nodes: Node[]) => void
+  onEdgesChange?: (edges: Edge[]) => void
   onNodeClick?: (event: React.MouseEvent, node: Node) => void
   onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void
   onConnect?: (connection: Connection) => void

package/src/modules/workflows/components/WorkflowGraphImpl.tsx

@@ -2,7 +2,7 @@
 
 import '@xyflow/react/dist/style.css'
 
-import { useCallback, useMemo, useEffect, useState } from 'react'
+import { useCallback, useMemo, useEffect, useRef, useState } from 'react'
 import {
   ReactFlow,
   Node,
@@ -15,7 +15,11 @@ import {
   useNodesState,
   useEdgesState,
   addEdge,
+  applyNodeChanges,
+  applyEdgeChanges,
   Connection,
+  NodeChange,
+  EdgeChange,
   ConnectionMode,
   MarkerType,
 } from '@xyflow/react'
@@ -30,8 +34,8 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 export interface WorkflowGraphImplProps {
   initialNodes?: Node[]
   initialEdges?: Edge[]
-  onNodesChange?: (changes: any[]) => void
-  onEdgesChange?: (changes: any[]) => void
+  onNodesChange?: (nodes: Node[]) => void
+  onEdgesChange?: (edges: Edge[]) => void
   onNodeClick?: (event: React.MouseEvent, node: Node) => void
   onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void
   onConnect?: (connection: Connection) => void
@@ -53,8 +57,16 @@ export default function WorkflowGraphImpl({
   height = '600px',
 }: WorkflowGraphImplProps) {
   const t = useT()
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+  const [nodes, setNodes] = useNodesState(initialNodes)
+  const [edges, setEdges] = useEdgesState(initialEdges)
+
+  // Track the latest committed graph so the change reducers can run inside the
+  // lazy boundary (#3169) and forward the already-applied arrays to the parent,
+  // keeping React Flow's runtime out of the editor page chunk.
+  const latestNodesRef = useRef(nodes)
+  latestNodesRef.current = nodes
+  const latestEdgesRef = useRef(edges)
+  latestEdgesRef.current = edges
 
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
@@ -105,23 +117,25 @@ export default function WorkflowGraphImpl({
   )
 
   const handleNodesChange = useCallback(
-    (changes: any) => {
-      onNodesChange(changes)
+    (changes: NodeChange[]) => {
+      const nextNodes = applyNodeChanges(changes, latestNodesRef.current)
+      setNodes(nextNodes)
       if (onNodesChangeProp) {
-        onNodesChangeProp(changes)
+        onNodesChangeProp(nextNodes)
       }
     },
-    [onNodesChange, onNodesChangeProp]
+    [setNodes, onNodesChangeProp]
   )
 
   const handleEdgesChange = useCallback(
-    (changes: any) => {
-      onEdgesChange(changes)
+    (changes: EdgeChange[]) => {
+      const nextEdges = applyEdgeChanges(changes, latestEdgesRef.current)
+      setEdges(nextEdges)
       if (onEdgesChangeProp) {
-        onEdgesChangeProp(changes)
+        onEdgesChangeProp(nextEdges)
       }
     },
-    [onEdgesChange, onEdgesChangeProp]
+    [setEdges, onEdgesChangeProp]
   )
 
   const nodeTypes = useMemo(

package/src/modules/workflows/components/mobile/MobileVisualEditor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import type { Node, Edge, NodeChange, EdgeChange, Connection } from '@xyflow/react'
+import type { Node, Edge, Connection } from '@xyflow/react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Dialog,
@@ -21,8 +21,8 @@ export interface MobileVisualEditorProps {
   isSaving: boolean
   nodes: Node[]
   edges: Edge[]
-  onNodesChange: (changes: NodeChange[]) => void
-  onEdgesChange: (changes: EdgeChange[]) => void
+  onNodesChange: (nodes: Node[]) => void
+  onEdgesChange: (edges: Edge[]) => void
   onNodeClick: (event: React.MouseEvent, node: Node) => void
   onEdgeClick: (event: React.MouseEvent, edge: Edge) => void
   onConnect: (connection: Connection) => void

package/src/modules/workflows/frontend/checkout-demo/deriveCurrentStep.ts

@@ -0,0 +1,12 @@
+/**
+ * Derives the current workflow step from the running instance's `currentStepId`
+ * and the available workflow steps. This is a pure function of its inputs so the
+ * checkout demo can compute it during render instead of mirroring it into state.
+ */
+export function deriveCurrentStep<TStep extends { stepId: string }>(
+  currentStepId: string | undefined,
+  steps: TStep[],
+): TStep | null {
+  if (!currentStepId) return null
+  return steps.find((step) => step.stepId === currentStepId) ?? null
+}

package/src/modules/workflows/frontend/checkout-demo/page.tsx

@@ -14,6 +14,7 @@ import {
 import Link from 'next/link'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { deriveCurrentStep } from './deriveCurrentStep'
 
 interface CartItem {
   id: string // Product UUID
@@ -62,8 +63,6 @@ export default function CheckoutDemoPage() {
   const [advancing, setAdvancing] = useState(false)
   const [result, setResult] = useState<WorkflowResult | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const [currentStep, setCurrentStep] = useState<StepInfo | null>(null)
-  const [availableSteps, setAvailableSteps] = useState<StepInfo[]>([])
   const [formData, setFormData] = useState<Record<string, any>>({})
   const [submittingTask, setSubmittingTask] = useState(false)
   const [taskError, setTaskError] = useState<string | null>(null)
@@ -270,21 +269,8 @@ export default function CheckoutDemoPage() {
     { stepId: 'end', stepName: 'Complete', stepType: 'END', description: 'Checkout completed' },
   ]
 
-  // Update current step and available steps when result changes
-  useEffect(() => {
-    if (result?.currentStepId) {
-      const current = workflowSteps.find(s => s.stepId === result.currentStepId)
-      setCurrentStep(current || null)
-
-      // Find next available steps (simple - just show next step)
-      const currentIndex = workflowSteps.findIndex(s => s.stepId === result.currentStepId)
-      if (currentIndex >= 0 && currentIndex < workflowSteps.length - 1) {
-        setAvailableSteps([workflowSteps[currentIndex + 1]])
-      } else {
-        setAvailableSteps([])
-      }
-    }
-  }, [result])
+  // Current step derived from the running instance and the workflow steps
+  const currentStep = deriveCurrentStep(result?.currentStepId, workflowSteps)
 
   // Add initial delay before polling for user tasks when workflow becomes PAUSED
   // This reduces race condition where API returns before background execution completes
@@ -1490,8 +1476,6 @@ export default function CheckoutDemoPage() {
                     onClick={() => {
                       setResult(null)
                       setError(null)
-                      setCurrentStep(null)
-                      setAvailableSteps([])
                     }}
                     variant="outline"
                     className="w-full"
@@ -1515,8 +1499,6 @@ export default function CheckoutDemoPage() {
                   onClick={() => {
                     setResult(null)
                     setError(null)
-                    setCurrentStep(null)
-                    setAvailableSteps([])
                   }}
                   className="w-full mt-6"
                 >
@@ -1773,8 +1755,6 @@ export default function CheckoutDemoPage() {
                     onClick={() => {
                       setResult(null)
                       setError(null)
-                      setCurrentStep(null)
-                      setAvailableSteps([])
                     }}
                     variant="outline"
                     className="w-full"

package/src/modules/workflows/lib/graph-utils.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from '@xyflow/react'
+import type { Node, Edge } from '@xyflow/react'
 import type { WorkflowDefinition } from '../data/entities'
 
 /**
@@ -659,3 +659,23 @@ export function generateTransitionId(fromStepId: string, toStepId: string): stri
   const id = `e_${fromStepId}_${toStepId}`
   return sanitizeId(id)
 }
+
+/**
+ * Append a new edge to the list, skipping duplicate connections.
+ *
+ * A plain-data replacement for React Flow's `addEdge` so the visual editor
+ * page does not pull the `@xyflow/react` runtime out of its lazy boundary
+ * (#3169). Mirrors `addEdge`'s dedup rule: an edge is dropped when one with
+ * the same source/target endpoints (and handles) already exists.
+ */
+export function appendWorkflowEdge(edges: Edge[], edge: Edge): Edge[] {
+  const isDuplicate = edges.some(
+    (existing) =>
+      existing.source === edge.source &&
+      existing.target === edge.target &&
+      // Match addEdge: empty-string and nullish handles are equivalent.
+      (existing.sourceHandle || null) === (edge.sourceHandle || null) &&
+      (existing.targetHandle || null) === (edge.targetHandle || null),
+  )
+  return isDuplicate ? edges : [...edges, edge]
+}