create-appraisejs 0.3.1-alpha.0 → 0.3.1-alpha.1

package/templates/starter/src/assets/icons/empty-tube.tsx

@@ -1,23 +1,23 @@
-import { cn } from '@/lib/utils'
-
-const EmptyTube = ({ className }: { className?: string }) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={cn('lucide lucide-test-tube-icon lucide-test-tube', className)}
-    >
-      <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
-      <path d="M8.5 2h7" />
-    </svg>
-  )
-}
-
-export default EmptyTube
+import { cn } from '@/lib/utils'
+
+const EmptyTube = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('lucide lucide-test-tube-icon lucide-test-tube', className)}
+    >
+      <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
+      <path d="M8.5 2h7" />
+    </svg>
+  )
+}
+
+export default EmptyTube

package/templates/starter/src/assets/icons/tube-plus.tsx

@@ -1,29 +1,29 @@
-import { cn } from '@/lib/utils'
-
-export const TubePlus = ({ className }: { className?: string }) => {
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className={cn('lucide', className)}
-      >
-        {/* Empty tube icon */}
-        <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
-        <path d="M8.5 2h7" />
-        {/* Half-filled level indicator */}
-        <line x1="10.5" y1="15.5" x2="13.5" y2="15.5" />
-        {/* Plus icon - positioned at bottom right */}
-        <line x1="17.5" y1="19.5" x2="21.5" y2="19.5" strokeWidth="1.5" />
-        <line x1="19.5" y1="17.5" x2="19.5" y2="21.5" strokeWidth="1.5" />
-      </svg>
-    </>
-  )
-}
+import { cn } from '@/lib/utils'
+
+export const TubePlus = ({ className }: { className?: string }) => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn('lucide', className)}
+      >
+        {/* Empty tube icon */}
+        <path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5c-1.4 0-2.5-1.1-2.5-2.5V2" />
+        <path d="M8.5 2h7" />
+        {/* Half-filled level indicator */}
+        <line x1="10.5" y1="15.5" x2="13.5" y2="15.5" />
+        {/* Plus icon - positioned at bottom right */}
+        <line x1="17.5" y1="19.5" x2="21.5" y2="19.5" strokeWidth="1.5" />
+        <line x1="19.5" y1="17.5" x2="19.5" y2="21.5" strokeWidth="1.5" />
+      </svg>
+    </>
+  )
+}

package/templates/starter/src/components/data-visualization/info-card.tsx

@@ -1,70 +1,56 @@
-import React from 'react'
-import { Card, CardContent } from '../ui/card'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
-
-const InfoCard = ({
-  showHighlightGroup,
-  highlight,
-  legend,
-  defaultText,
-  icon,
-}: {
-  showHighlightGroup: boolean
-  highlight: string
-  legend: string
-  defaultText: string
-  icon: React.ReactNode
-}) => {
-  // Dynamic text size based on highlight text length
-  const getHighlightTextSize = (text: string) => {
-    const length = text.length
-    if (length <= 3) return 'text-2xl'
-    if (length <= 6) return 'text-xl'
-    if (length <= 10) return 'text-lg'
-    if (length <= 15) return 'text-base'
-    return 'text-sm'
-  }
-
-  return (
-    <>
-      <Card className="flex w-[10vw] max-w-[20rem] items-center bg-inherit">
-        <CardContent className="p-2">
-          <div className="flex items-center gap-4 text-primary">
-            {showHighlightGroup ? (
-              <>
-                {icon}
-                <div className="flex h-full flex-col">
-                  <div className="flex h-full items-center text-xs text-muted-foreground">{legend}</div>
-                  <div
-                    className={`mr-2 h-full items-center font-mono text-primary ${getHighlightTextSize(highlight)} ${
-                      highlight.length > 15 ? 'w-[6rem] overflow-hidden text-ellipsis whitespace-nowrap' : ''
-                    }`}
-                  >
-                    {highlight.length > 15 ? (
-                      <>
-                        <TooltipProvider>
-                          <Tooltip delayDuration={200}>
-                            <TooltipTrigger asChild>
-                              <span>{highlight}</span>
-                            </TooltipTrigger>
-                            <TooltipContent>{highlight}</TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      </>
-                    ) : (
-                      highlight
-                    )}
-                  </div>
-                </div>
-              </>
-            ) : (
-              <div className="flex items-center text-xs text-muted-foreground">{defaultText}</div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    </>
-  )
-}
-
-export default InfoCard
+import React from 'react'
+import { Card, CardContent } from '../ui/card'
+
+const InfoCard = ({
+  showHighlightGroup,
+  highlight,
+  legend,
+  defaultText,
+  icon,
+}: {
+  showHighlightGroup: boolean
+  highlight: string
+  legend: string
+  defaultText: string
+  icon: React.ReactNode
+}) => {
+  // Dynamic text size based on highlight text length
+  const getHighlightTextSize = (text: string) => {
+    const length = text.length
+    if (length <= 3) return 'text-2xl'
+    if (length <= 6) return 'text-xl'
+    if (length <= 10) return 'text-lg'
+    if (length <= 15) return 'text-base'
+    return 'text-sm'
+  }
+
+  return (
+    <>
+      <Card className="flex min-w-40 max-w-80 items-center bg-inherit">
+        <CardContent className="min-w-0 p-2">
+          <div className="flex min-w-0 items-center gap-4 text-primary">
+            {showHighlightGroup ? (
+              <>
+                <div className="shrink-0">{icon}</div>
+                <div className="flex h-full min-w-0 flex-col">
+                  <div className="flex h-full items-center text-xs text-muted-foreground">{legend}</div>
+                  <div
+                    className={`h-full min-w-0 items-center break-words font-mono text-primary ${getHighlightTextSize(
+                      highlight,
+                    )}`}
+                  >
+                    {highlight}
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className="flex items-center text-xs text-muted-foreground">{defaultText}</div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  )
+}
+
+export default InfoCard

package/templates/starter/src/components/data-visualization/info-grid.tsx

@@ -1,22 +1,22 @@
-import React from 'react'
-import InfoCard from './info-card'
-
-interface InfoCards {
-  showHighlightGroup: boolean
-  highlight: string
-  legend: string
-  defaultText: string
-  icon: React.ReactNode
-}
-
-const InfoGrid = ({ infoCards }: { infoCards: InfoCards[] }) => {
-  return (
-    <div className="my-4 flex flex-wrap gap-4">
-      {infoCards.map(card => (
-        <InfoCard key={card.legend} {...card} />
-      ))}
-    </div>
-  )
-}
-
-export default InfoGrid
+import React from 'react'
+import InfoCard from './info-card'
+
+interface InfoCards {
+  showHighlightGroup: boolean
+  highlight: string
+  legend: string
+  defaultText: string
+  icon: React.ReactNode
+}
+
+const InfoGrid = ({ infoCards }: { infoCards: InfoCards[] }) => {
+  return (
+    <div className="my-4 flex flex-wrap gap-4">
+      {infoCards.map(card => (
+        <InfoCard key={card.legend} {...card} />
+      ))}
+    </div>
+  )
+}
+
+export default InfoGrid

package/templates/starter/src/components/diagram/add-node-prompt-node.tsx

@@ -18,7 +18,7 @@ export const AddNodePromptNode = memo(function AddNodePromptNode({
   onOpenAddNode,
 }: AddNodePromptNodeComponentProps) {
   return (
-    <BaseNode selected={selected} className="max-w-80 border-dashed border-muted-foreground/50 bg-muted/30 px-4 py-3">
+    <BaseNode selected={selected} className="border-muted-foreground/50 bg-muted/30 max-w-80 border-dashed px-4 py-3">
       <p className="mb-3 text-sm text-muted-foreground">No steps yet. Add your first node to build the flow.</p>
       <Button type="button" className={cn('nodrag w-full')} variant="outline" onClick={onOpenAddNode}>
         Add node

package/templates/starter/src/components/diagram/dynamic-parameters-helpers.ts

@@ -68,7 +68,9 @@ export function getInitialSelectedLocatorGroups(
   initialParameterValues: DynamicParameterInput[] | undefined,
   locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>,
 ) {
-  const initialValueMap = Object.fromEntries((initialParameterValues ?? []).map(parameter => [parameter.name, parameter]))
+  const initialValueMap = Object.fromEntries(
+    (initialParameterValues ?? []).map(parameter => [parameter.name, parameter]),
+  )
 
   return Object.fromEntries(
     templateStepParams.flatMap(parameter => {
@@ -141,8 +143,7 @@ export function formatDynamicParameterValues(
         formattedValue = value !== undefined && value !== null ? String(value) : ''
         break
       case StepParameterType.DATE:
-        formattedValue =
-          value instanceof Date && !Number.isNaN(value.getTime()) ? format(value, 'PPP') : ''
+        formattedValue = value instanceof Date && !Number.isNaN(value.getTime()) ? format(value, 'PPP') : ''
         break
       case StepParameterType.BOOLEAN:
         formattedValue = value !== undefined && value !== null ? String(value) : ''

package/templates/starter/src/components/diagram/dynamic-parameters.test.tsx

@@ -26,7 +26,10 @@ const { inlineSaveResult } = vi.hoisted(() => ({
 
 vi.mock('@/app/(base)/locators/create/create-locator-workspace', () => ({
   __esModule: true,
-  default: ({ onSaveSuccess, onClose }: {
+  default: ({
+    onSaveSuccess,
+    onClose,
+  }: {
     onSaveSuccess?: (result: InlineLocatorSaveResult) => void
     onClose?: () => void
   }) => (

package/templates/starter/src/components/diagram/dynamic-parameters.tsx

@@ -80,7 +80,6 @@ function DynamicFormFields({
   onChange,
   initialParameterValues,
 }: DynamicFormFieldsProps & React.RefAttributes<DynamicFormFieldsRef>) {
-
   const resetKey = useMemo(() => {
     return JSON.stringify({
       params: templateStepParams.map(p => ({ name: p.name, type: p.type })),

package/templates/starter/src/components/diagram/flow-diagram-block-dialog.test.tsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FlowDiagramBlockDialog } from './flow-diagram-block-dialog'
+
+describe('FlowDiagramBlockDialog', () => {
+  it('renders the create action with a save icon', () => {
+    render(
+      <FlowDiagramBlockDialog
+        open={true}
+        onOpenChange={vi.fn()}
+        editingBlockId={null}
+        blockName="Login flow"
+        onBlockNameChange={vi.fn()}
+        onSubmit={vi.fn()}
+      />,
+    )
+
+    const createButton = screen.getByRole('button', { name: 'Create' })
+
+    expect(createButton).toBeInTheDocument()
+    expect(createButton.querySelector('svg')).toBeInTheDocument()
+  })
+})

package/templates/starter/src/components/diagram/flow-diagram-block-dialog.tsx

@@ -10,6 +10,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
+import { Save } from 'lucide-react'
 
 type FlowDiagramBlockDialogProps = {
   open: boolean
@@ -47,7 +48,8 @@ export function FlowDiagramBlockDialog({
         />
         <DialogFooter>
           <Button type="button" onClick={onSubmit}>
-            {editingBlockId ? 'Rename' : 'Create'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{editingBlockId ? 'Rename' : 'Create'}</span>
           </Button>
         </DialogFooter>
       </DialogContent>

package/templates/starter/src/components/diagram/flow-diagram-connection-guards.ts

@@ -1,4 +1,12 @@
-import { addEdge, type Connection, type Edge, type Node, type EdgeChange, type NodeChange, type OnConnect } from '@xyflow/react'
+import {
+  addEdge,
+  type Connection,
+  type Edge,
+  type Node,
+  type EdgeChange,
+  type NodeChange,
+  type OnConnect,
+} from '@xyflow/react'
 import {
   determineStartNodeIds,
   isAddNodePromptNode,
@@ -27,18 +35,24 @@ export function filterBlockedEdgeChanges(
 
   return {
     blockedDeleteIds,
-    allowedChanges: changes.filter(change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id)),
+    allowedChanges: changes.filter(
+      change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id),
+    ),
   }
 }
 
 export function filterBlockedNodeChanges(changes: NodeChange[], flowBlockMembership: Map<string, string>) {
   const blockedDeleteIds = new Set(
-    changes.flatMap(change => (change.type === 'remove' && change.id && flowBlockMembership.has(change.id) ? [change.id] : [])),
+    changes.flatMap(change =>
+      change.type === 'remove' && change.id && flowBlockMembership.has(change.id) ? [change.id] : [],
+    ),
   )
 
   return {
     blockedDeleteIds,
-    allowedChanges: changes.filter(change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id)),
+    allowedChanges: changes.filter(
+      change => change.type !== 'remove' || !change.id || !blockedDeleteIds.has(change.id),
+    ),
   }
 }
 
@@ -92,8 +106,12 @@ export function syncFlowNodePresentationMetadata(
     const isFirstNode = startNodeIds.has(node.id)
     const hasOutgoingConnection = nextEdges.some(edge => edge.source === node.id)
     const currentIsFirstNode = Boolean((node.data as { isFirstNode?: boolean }).isFirstNode)
-    const currentHasOutgoingConnection = Boolean((node.data as { hasOutgoingConnection?: boolean }).hasOutgoingConnection)
-    const currentIsConnectionInProgress = Boolean((node.data as { isConnectionInProgress?: boolean }).isConnectionInProgress)
+    const currentHasOutgoingConnection = Boolean(
+      (node.data as { hasOutgoingConnection?: boolean }).hasOutgoingConnection,
+    )
+    const currentIsConnectionInProgress = Boolean(
+      (node.data as { isConnectionInProgress?: boolean }).isConnectionInProgress,
+    )
     const currentIsSearchHighlighted = Boolean((node.data as { isSearchHighlighted?: boolean }).isSearchHighlighted)
     const isDeleteDisabled = flowBlockMembership.has(node.id)
     const currentIsDeleteDisabled = Boolean((node.data as { isDeleteDisabled?: boolean }).isDeleteDisabled)

package/templates/starter/src/components/diagram/flow-diagram-helpers.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 
 import {
   buildFlowNodeData,
+  buildNodeFormData,
   createAddNodePromptNode,
   determineNodeOrders,
   determineStartNodeIds,
@@ -119,6 +120,32 @@ describe('flow-diagram helpers', () => {
     expect(nodeData.isMissingParams).toBe(true)
   })
 
+  it('clears missing parameter state when mandatory values are supplied', () => {
+    const nodeData = buildNodeFormData(
+      {
+        label: 'Step',
+        gherkinStep: 'Given step',
+        parameters: [{ name: 'locator', value: 'Submit', type: StepParameterType.STRING, order: 1 }],
+        templateStepId: 'step-1',
+      },
+      [],
+      [
+        {
+          id: 'param-1',
+          name: 'locator',
+          type: StepParameterType.STRING,
+          order: 1,
+          isMandatory: true,
+          templateStepId: 'step-1',
+        } as never,
+      ],
+      false,
+      false,
+    )
+
+    expect(nodeData.isMissingParams).toBeUndefined()
+  })
+
   it('recomputes node orders and isolated nodes correctly', () => {
     const orders = determineNodeOrders(
       [

package/templates/starter/src/components/diagram/flow-diagram-node-search.tsx

@@ -37,72 +37,72 @@ export function FlowDiagramNodeSearch({
 }: FlowDiagramNodeSearchProps) {
   return (
     <LazyMotion features={domAnimation} strict>
-    <div className="relative flex items-start gap-2" data-node-search-root="true">
-      <AnimatePresence>
-        {isSearchOpen ? (
-          <motion.div
-            className="flex flex-col items-end"
-            initial={{ opacity: 0, x: 14, scale: 0.98 }}
-            animate={{ opacity: 1, x: 0, scale: 1 }}
-            exit={{ opacity: 0, x: 14, scale: 0.98 }}
-            transition={{ duration: 0.18, ease: 'easeOut' }}
-          >
-            <Input
-              ref={searchInputRef}
-              aria-label="Search nodes"
-              value={searchQuery}
-              onChange={event => onSearchQueryChange(event.target.value)}
-              placeholder="Search labels..."
-              className="border-border/70 bg-background/95 h-9 w-56 shadow-md backdrop-blur"
-            />
-            <AnimatePresence>
-              {shouldShowSearchSuggestions ? (
-                <motion.div
-                  className="border-border/70 mt-2 w-64 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-xl"
-                  initial={{ opacity: 0, y: -6 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -6 }}
-                  transition={{ duration: 0.16, ease: 'easeOut' }}
-                >
-                  {nodeSearchResults.length > 0 ? (
-                    <div className="max-h-64 overflow-y-auto py-1">
-                      {nodeSearchResults.map(result => (
-                        <button
-                          key={result.id}
-                          type="button"
-                          className="block w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none"
-                          onClick={() => onSelectResult(result.id)}
-                        >
-                          {result.label}
-                        </button>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="px-3 py-2 text-sm text-muted-foreground">No matching labels</div>
-                  )}
-                </motion.div>
-              ) : null}
-            </AnimatePresence>
-          </motion.div>
-        ) : null}
-      </AnimatePresence>
-      <TooltipProvider delayDuration={0}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              onClick={onToggleSearch}
-              aria-label={isSearchOpen ? 'Close node search' : 'Search nodes'}
+      <div className="relative flex items-start gap-2" data-node-search-root="true">
+        <AnimatePresence>
+          {isSearchOpen ? (
+            <motion.div
+              className="flex flex-col items-end"
+              initial={{ opacity: 0, x: 14, scale: 0.98 }}
+              animate={{ opacity: 1, x: 0, scale: 1 }}
+              exit={{ opacity: 0, x: 14, scale: 0.98 }}
+              transition={{ duration: 0.18, ease: 'easeOut' }}
             >
-              {isSearchOpen ? <X /> : <Search />}
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">{isSearchOpen ? 'Close search' : 'Search nodes'}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
+              <Input
+                ref={searchInputRef}
+                aria-label="Search nodes"
+                value={searchQuery}
+                onChange={event => onSearchQueryChange(event.target.value)}
+                placeholder="Search labels..."
+                className="border-border/70 bg-background/95 h-9 w-56 shadow-md backdrop-blur"
+              />
+              <AnimatePresence>
+                {shouldShowSearchSuggestions ? (
+                  <motion.div
+                    className="border-border/70 mt-2 w-64 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-xl"
+                    initial={{ opacity: 0, y: -6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -6 }}
+                    transition={{ duration: 0.16, ease: 'easeOut' }}
+                  >
+                    {nodeSearchResults.length > 0 ? (
+                      <div className="max-h-64 overflow-y-auto py-1">
+                        {nodeSearchResults.map(result => (
+                          <button
+                            key={result.id}
+                            type="button"
+                            className="block w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none"
+                            onClick={() => onSelectResult(result.id)}
+                          >
+                            {result.label}
+                          </button>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="px-3 py-2 text-sm text-muted-foreground">No matching labels</div>
+                    )}
+                  </motion.div>
+                ) : null}
+              </AnimatePresence>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                onClick={onToggleSearch}
+                aria-label={isSearchOpen ? 'Close node search' : 'Search nodes'}
+              >
+                {isSearchOpen ? <X /> : <Search />}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">{isSearchOpen ? 'Close search' : 'Search nodes'}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
     </LazyMotion>
   )
 }

package/templates/starter/src/components/diagram/flow-diagram-toolbar.tsx

@@ -67,9 +67,7 @@ export function FlowDiagramToolbar({
                 {isGroupingSelectionMode ? <Boxes /> : <MousePointer2 />}
               </Button>
             </TooltipTrigger>
-            <TooltipContent side="bottom">
-              {isGroupingSelectionMode ? 'Selection mode' : 'Create block'}
-            </TooltipContent>
+            <TooltipContent side="bottom">{isGroupingSelectionMode ? 'Selection mode' : 'Create block'}</TooltipContent>
           </Tooltip>
         </TooltipProvider>
       ) : null}

package/templates/starter/src/components/diagram/flow-diagram-view.tsx

@@ -2,13 +2,7 @@
 
 /* eslint-disable react-hooks/refs -- The composite view model forwards refs without reading `.current` during render. */
 
-import {
-  Background,
-  ConnectionMode,
-  Controls,
-  ReactFlow,
-  type DefaultEdgeOptions,
-} from '@xyflow/react'
+import { Background, ConnectionMode, Controls, ReactFlow, type DefaultEdgeOptions } from '@xyflow/react'
 import { FlowDiagramBlockDialog } from './flow-diagram-block-dialog'
 import { FlowDiagramBlockOverlays } from './flow-diagram-block-overlays'
 import { FlowDiagramGroupingHints } from './flow-diagram-grouping-hints'

package/templates/starter/src/components/diagram/flow-node-data-helpers.ts

@@ -117,6 +117,6 @@ export function buildNodeFormData(
     ...formData,
     icon,
     isFirstNode,
-    isMissingParams,
+    isMissingParams: isMissingParams ? (true as const) : undefined,
   }
 }