feat(story-dialog): conform aan dialog-pattern + AlertDialog delete

Story 4 van PBI "Alle dialogen conform docs/patterns/dialog.md".

- lib/schemas/story.ts — gedeeld zod-schema
- actions/stories.ts — code+fieldErrors voor 422; code: 403 voor auth/demo
- StoryDialog adopt useDirtyCloseGuard, useDialogSubmitShortcut,
  entityDialog* layout-classes
- Inline delete-confirm vervangen door AlertDialog (§10.4)
- docs/specs/dialogs/story.md — gaps weggewerkt; alleen bewuste
  afwijkingen blijven (header met badges, geen char-counter)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

actions/stories.ts

@@ -3,18 +3,20 @@
 import { revalidatePath } from 'next/cache'
 import { cookies } from 'next/headers'
 import { getIronSession } from 'iron-session'
-import { z } from 'zod'
 import { prisma } from '@/lib/prisma'
 import { SessionData, sessionOptions } from '@/lib/session'
 import { getAccessibleProduct, productAccessFilter } from '@/lib/product-access'
 import { requireProductWriter } from '@/lib/auth'
-import { isValidCode, MAX_CODE_LENGTH, normalizeCode } from '@/lib/code'
+import { isValidCode, normalizeCode } from '@/lib/code'
 import { createWithCodeRetry, generateNextStoryCode } from '@/lib/code-server'
+import { createStorySchema, updateStorySchema } from '@/lib/schemas/story'
 
 async function getSession() {
   return getIronSession<SessionData>(await cookies(), sessionOptions)
 }
 
+type StoryFieldErrors = Record<string, string[]>
+
 async function verifyStoryAccess(storyId: string, userId: string) {
   return prisma.story.findFirst({
     where: { id: storyId, product: productAccessFilter(userId) },
@@ -26,31 +28,10 @@ function hasDuplicateIds(ids: string[]) {
   return new Set(ids).size !== ids.length
 }
 
-const codeField = z.string().max(MAX_CODE_LENGTH).optional()
-
-const createStorySchema = z.object({
-  pbiId: z.string(),
-  productId: z.string(),
-  code: codeField,
-  title: z.string().min(1, 'Titel is verplicht').max(200),
-  description: z.string().max(2000).optional(),
-  acceptance_criteria: z.string().max(2000).optional(),
-  priority: z.coerce.number().int().min(1).max(4),
-})
-
-const updateStorySchema = z.object({
-  id: z.string(),
-  code: codeField,
-  title: z.string().min(1, 'Titel is verplicht').max(200),
-  description: z.string().max(2000).optional(),
-  acceptance_criteria: z.string().max(2000).optional(),
-  priority: z.coerce.number().int().min(1).max(4),
-})
-
 export async function createStoryAction(_prevState: unknown, formData: FormData) {
   const session = await getSession()
-  if (!session.userId) return { error: 'Niet ingelogd' }
-  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+  if (!session.userId) return { error: 'Niet ingelogd', code: 403 }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus', code: 403 }
 
   const parsed = createStorySchema.safeParse({
     pbiId: formData.get('pbiId'),
@@ -61,20 +42,36 @@ export async function createStoryAction(_prevState: unknown, formData: FormData)
     acceptance_criteria: formData.get('acceptance_criteria') || undefined,
     priority: formData.get('priority') ?? 2,
   })
-  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors }
+  if (!parsed.success) {
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: parsed.error.flatten().fieldErrors as StoryFieldErrors,
+    }
+  }
 
   const pbi = await prisma.pbi.findFirst({
     where: { id: parsed.data.pbiId, product: productAccessFilter(session.userId) },
   })
-  if (!pbi) return { error: 'PBI niet gevonden' }
+  if (!pbi) return { error: 'PBI niet gevonden', code: 403 }
 
   const manualCode = normalizeCode(parsed.data.code)
   if (manualCode !== null && !isValidCode(manualCode)) {
-    return { error: { code: ['Code mag alleen letters, cijfers, punten, koppeltekens of underscores bevatten'] } }
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: { code: ['Alleen letters, cijfers, punten, koppeltekens of underscores'] } as StoryFieldErrors,
+    }
   }
   if (manualCode) {
     const dup = await prisma.story.findFirst({ where: { product_id: pbi.product_id, code: manualCode } })
-    if (dup) return { error: { code: ['Deze code is al in gebruik binnen dit product'] } }
+    if (dup) {
+      return {
+        error: 'Validatie mislukt',
+        code: 422,
+        fieldErrors: { code: ['Deze code is al in gebruik binnen dit product'] } as StoryFieldErrors,
+      }
+    }
   }
 
   const last = await prisma.story.findFirst({
@@ -107,7 +104,11 @@ export async function createStoryAction(_prevState: unknown, formData: FormData)
           (code) => insert(code),
         )
   } catch {
-    return { error: { code: ['Kon geen unieke code genereren — probeer opnieuw'] } }
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: { code: ['Kon geen unieke code genereren — probeer opnieuw'] } as StoryFieldErrors,
+    }
   }
 
   revalidatePath(`/products/${pbi.product_id}`)
@@ -116,8 +117,8 @@ export async function createStoryAction(_prevState: unknown, formData: FormData)
 
 export async function updateStoryAction(_prevState: unknown, formData: FormData) {
   const session = await getSession()
-  if (!session.userId) return { error: 'Niet ingelogd' }
-  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus' }
+  if (!session.userId) return { error: 'Niet ingelogd', code: 403 }
+  if (session.isDemo) return { error: 'Niet beschikbaar in demo-modus', code: 403 }
 
   const parsed = updateStorySchema.safeParse({
     id: formData.get('id'),
@@ -127,20 +128,36 @@ export async function updateStoryAction(_prevState: unknown, formData: FormData)
     acceptance_criteria: formData.get('acceptance_criteria') || undefined,
     priority: formData.get('priority'),
   })
-  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors }
+  if (!parsed.success) {
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: parsed.error.flatten().fieldErrors as StoryFieldErrors,
+    }
+  }
 
   const story = await verifyStoryAccess(parsed.data.id, session.userId)
-  if (!story) return { error: 'Story niet gevonden' }
+  if (!story) return { error: 'Story niet gevonden', code: 403 }
 
   const code = normalizeCode(parsed.data.code)
   if (code !== null && !isValidCode(code)) {
-    return { error: { code: ['Code mag alleen letters, cijfers, punten, koppeltekens of underscores bevatten'] } }
+    return {
+      error: 'Validatie mislukt',
+      code: 422,
+      fieldErrors: { code: ['Alleen letters, cijfers, punten, koppeltekens of underscores'] } as StoryFieldErrors,
+    }
   }
   if (code) {
     const dup = await prisma.story.findFirst({
       where: { product_id: story.product_id, code, NOT: { id: parsed.data.id } },
     })
-    if (dup) return { error: { code: ['Deze code is al in gebruik binnen dit product'] } }
+    if (dup) {
+      return {
+        error: 'Validatie mislukt',
+        code: 422,
+        fieldErrors: { code: ['Deze code is al in gebruik binnen dit product'] } as StoryFieldErrors,
+      }
+    }
   }
 
   await prisma.story.update({

components/backlog/story-dialog.tsx

@@ -1,17 +1,24 @@
 'use client'
 
 import { useEffect, useRef, useState, useTransition } from 'react'
-import { Markdown } from '@/components/markdown'
 import { useActionState } from 'react'
-import { useFormStatus } from 'react-dom'
+import { Markdown } from '@/components/markdown'
 import { toast } from 'sonner'
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
   DialogTitle,
-  DialogClose,
 } from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
@@ -19,6 +26,16 @@ import { Badge } from '@/components/ui/badge'
 import { PrioritySelect, PRIORITY_LABELS, PRIORITY_COLORS } from '@/components/shared/priority-select'
 import { StoryLog } from '@/components/shared/story-log'
 import { DemoTooltip } from '@/components/shared/demo-tooltip'
+import {
+  useDirtyCloseGuard,
+  DirtyCloseGuardDialog,
+} from '@/components/shared/use-dirty-close-guard'
+import { useDialogSubmitShortcut } from '@/components/shared/use-dialog-submit-shortcut'
+import {
+  entityDialogContentClasses,
+  entityDialogFooterClasses,
+  entityDialogHeaderClasses,
+} from '@/components/shared/entity-dialog-layout'
 import { createStoryAction, updateStoryAction, deleteStoryAction, getStoryLogsAction } from '@/actions/stories'
 import { cn } from '@/lib/utils'
 import type { Story } from './story-panel'
@@ -33,6 +50,14 @@ interface StoryDialogProps {
   isDemo?: boolean
 }
 
+interface ActionResult {
+  success?: boolean
+  error?: string
+  code?: number
+  fieldErrors?: Record<string, string[]>
+  story?: unknown
+}
+
 const STATUS_COLORS: Record<string, string> = {
   OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30',
   IN_SPRINT: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30',
@@ -44,15 +69,6 @@ const STATUS_LABELS: Record<string, string> = {
   DONE: 'Klaar',
 }
 
-function SubmitButton({ label, disabled }: { label: string; disabled?: boolean }) {
-  const { pending } = useFormStatus()
-  return (
-    <Button type="submit" disabled={disabled || pending}>
-      {pending ? '…' : label}
-    </Button>
-  )
-}
-
 export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps) {
   const isEdit = state?.mode === 'edit'
   const story = isEdit ? (state as Extract<StoryDialogState, { mode: 'edit' }>).story : null
@@ -62,52 +78,50 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [isDeleting, startDeleteTransition] = useTransition()
   const [logs, setLogs] = useState<Awaited<ReturnType<typeof getStoryLogsAction>> | null>(null)
+  const [dirty, setDirty] = useState(false)
+  const formRef = useRef<HTMLFormElement>(null)
 
   useEffect(() => {
     if (!state) return
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setConfirmDelete(false)
+    setDirty(false)
     if (state.mode === 'edit') {
-       
       setPriority(state.story.priority)
-       
       setLogs(null)
       getStoryLogsAction(state.story.id).then(setLogs)
     } else {
-       
       setPriority(state.defaultPriority ?? 2)
     }
   }, [state])
 
-  const [createResult, createAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await createStoryAction(_prev, fd)
+  const [createResult, createAction, createPending] = useActionState<ActionResult | undefined, FormData>(
+    async (_prev, fd) => {
+      const result = await createStoryAction(_prev, fd) as ActionResult
       if (result?.success) { toast.success('Story aangemaakt'); onClose() }
-      else if (typeof result?.error === 'string') toast.error(result.error)
+      else if (result?.code !== 422 && result?.error) toast.error(result.error)
       return result
     },
-    undefined
+    undefined,
   )
 
-  const [updateResult, updateAction] = useActionState(
-    async (_prev: unknown, fd: FormData) => {
-      const result = await updateStoryAction(_prev, fd)
+  const [updateResult, updateAction, updatePending] = useActionState<ActionResult | undefined, FormData>(
+    async (_prev, fd) => {
+      const result = await updateStoryAction(_prev, fd) as ActionResult
       if (result?.success) { toast.success('Story opgeslagen'); onClose() }
-      else if (typeof result?.error === 'string') toast.error(result.error)
+      else if (result?.code !== 422 && result?.error) toast.error(result.error)
       return result
     },
-    undefined
+    undefined,
   )
 
-  const fieldError = (field: string) => {
-    const result = isEdit ? updateResult : createResult
-    const err = result?.error
-    if (!err || typeof err === 'string') return undefined
-    return (err as Record<string, string[]>)[field]?.[0]
-  }
+  const pending = isEdit ? updatePending : createPending
+  const activeResult = isEdit ? updateResult : createResult
+  const fieldError = (field: string) => activeResult?.fieldErrors?.[field]?.[0]
 
   function handleDelete() {
     if (!story) return
+    setConfirmDelete(false)
     startDeleteTransition(async () => {
       const result = await deleteStoryAction(story.id)
       if (result && 'error' in result) toast.error(result.error ?? 'Verwijderen mislukt')
@@ -121,49 +135,61 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
     if (state) setTimeout(() => titleRef.current?.focus(), 50)
   }, [state])
 
+  const closeGuard = useDirtyCloseGuard(dirty, onClose)
+  const handleKeyDown = useDialogSubmitShortcut(() => formRef.current?.requestSubmit())
+
   const showForm = !isDemo || !isEdit
 
   return (
-    <Dialog open={!!state} onOpenChange={(open) => { if (!open) onClose() }}>
-      <DialogContent className="sm:max-w-lg flex flex-col gap-0 p-0 max-h-[90vh] overflow-hidden">
-        <DialogHeader className="px-5 pt-5 pb-4 border-b border-border shrink-0 pr-14">
-          <div className="flex items-start gap-2">
-            <DialogTitle className="flex-1">{isEdit ? story!.title : 'Nieuwe story'}</DialogTitle>
-            {isEdit && story!.code && (
-              <span className="font-mono text-[11px] text-muted-foreground border border-border rounded-md bg-surface-container px-1.5 py-0.5 shrink-0 mt-0.5">
-                {story!.code}
-              </span>
+    <>
+      <Dialog open={!!state} onOpenChange={(open) => { if (!open) closeGuard.attemptClose() }}>
+        <DialogContent
+          showCloseButton={false}
+          onKeyDown={handleKeyDown}
+          className={entityDialogContentClasses}
+        >
+          <div className={cn(entityDialogHeaderClasses, 'flex-col items-stretch gap-1')}>
+            <div className="flex items-start gap-2">
+              <DialogTitle className="flex-1 text-xl font-semibold">
+                {isEdit ? story!.title : 'Nieuwe story'}
+              </DialogTitle>
+              {isEdit && story!.code && (
+                <span className="font-mono text-[11px] text-muted-foreground border border-border rounded-md bg-surface-container px-1.5 py-0.5 shrink-0 mt-0.5">
+                  {story!.code}
+                </span>
+              )}
+            </div>
+            {isEdit && (
+              <div className="flex gap-2">
+                <Badge className={cn('text-xs border', PRIORITY_COLORS[priority])}>
+                  {PRIORITY_LABELS[priority]}
+                </Badge>
+                <Badge className={cn('text-xs border', STATUS_COLORS[story!.status])}>
+                  {STATUS_LABELS[story!.status]}
+                </Badge>
+              </div>
             )}
           </div>
-          {isEdit && (
-            <div className="flex gap-2 mt-1">
-              <Badge className={cn('text-xs border', PRIORITY_COLORS[priority])}>
-                {PRIORITY_LABELS[priority]}
-              </Badge>
-              <Badge className={cn('text-xs border', STATUS_COLORS[story!.status])}>
-                {STATUS_LABELS[story!.status]}
-              </Badge>
-            </div>
-          )}
-        </DialogHeader>
 
-        <form
-          key={isEdit ? story!.id : 'create'}
-          action={isEdit ? updateAction : createAction}
-          className="flex flex-col min-h-0 flex-1"
-        >
-          {isEdit && <input type="hidden" name="id" value={story!.id} />}
-          {!isEdit && (
-            <>
-              <input type="hidden" name="pbiId" value={createState_?.pbiId ?? ''} />
-              <input type="hidden" name="productId" value={createState_?.productId ?? ''} />
-            </>
-          )}
-          <input type="hidden" name="priority" value={priority} />
+          <form
+            ref={formRef}
+            id="story-form"
+            key={isEdit ? story!.id : 'create'}
+            action={isEdit ? updateAction : createAction}
+            onChange={() => setDirty(true)}
+            className="flex-1 overflow-y-auto"
+          >
+            {isEdit && <input type="hidden" name="id" value={story!.id} />}
+            {!isEdit && (
+              <>
+                <input type="hidden" name="pbiId" value={createState_?.pbiId ?? ''} />
+                <input type="hidden" name="productId" value={createState_?.productId ?? ''} />
+              </>
+            )}
+            <input type="hidden" name="priority" value={priority} />
 
-          <div className="flex-1 overflow-y-auto">
             {showForm ? (
-              <div className="p-5 space-y-4">
+              <div className="px-6 py-6 space-y-6">
                 <div className="grid grid-cols-[6rem_1fr] gap-3">
                   <div className="space-y-1.5">
                     <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Code</label>
@@ -172,18 +198,24 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                       defaultValue={story?.code ?? ''}
                       placeholder={isEdit ? '' : 'auto'}
                       maxLength={30}
+                      disabled={isDemo}
+                      aria-invalid={!!fieldError('code')}
                       className={cn('font-mono text-sm', fieldError('code') ? 'border-error' : '')}
                     />
                     {fieldError('code') && <p className="text-xs text-error">{fieldError('code')}</p>}
                   </div>
                   <div className="space-y-1.5">
-                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Titel</label>
+                    <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                      Titel <span className="text-error">*</span>
+                    </label>
                     <Input
                       ref={titleRef}
                       name="title"
                       defaultValue={story?.title ?? ''}
                       required
                       maxLength={200}
+                      disabled={isDemo}
+                      aria-invalid={!!fieldError('title')}
                       className={fieldError('title') ? 'border-error' : ''}
                     />
                     {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
@@ -192,7 +224,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
 
                 <div className="space-y-1.5">
                   <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Prioriteit</label>
-                  <PrioritySelect value={priority} onChange={setPriority} />
+                  <PrioritySelect value={priority} onChange={(v) => { setPriority(v); setDirty(true) }} />
                 </div>
 
                 <div className="space-y-1.5">
@@ -204,6 +236,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                     rows={3}
                     defaultValue={story?.description ?? ''}
                     placeholder="Als… wil ik… zodat…"
+                    disabled={isDemo}
                     className="resize-none"
                   />
                 </div>
@@ -217,18 +250,13 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                     rows={3}
                     defaultValue={story?.acceptance_criteria ?? ''}
                     placeholder="- Gegeven… Als… Dan…"
+                    disabled={isDemo}
                     className="resize-none"
                   />
                 </div>
-
-                {typeof (isEdit ? updateResult?.error : createResult?.error) === 'string' && (
-                  <p className="text-xs text-error">
-                    {String(isEdit ? updateResult?.error : createResult?.error)}
-                  </p>
-                )}
               </div>
             ) : (
-              <div className="p-5 space-y-4">
+              <div className="px-6 py-6 space-y-6">
                 {story?.description && (
                   <div>
                     <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">Omschrijving</p>
@@ -245,7 +273,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
             )}
 
             {isEdit && (
-              <div className="px-5 py-4 border-t border-border">
+              <div className="px-6 py-4 border-t border-outline-variant">
                 <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-3">Activiteitenlog</p>
                 {logs && 'logs' in logs && logs.logs ? (
                   <StoryLog
@@ -262,49 +290,59 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                 )}
               </div>
             )}
-          </div>
+          </form>
 
-          {isEdit && (
-            <div className="px-5 py-3 border-t border-border shrink-0">
-              {!isDemo && confirmDelete ? (
-                <div className="flex items-center gap-2">
-                  <span className="text-xs text-muted-foreground flex-1">
-                    Weet je het zeker? Taken worden ook verwijderd.
-                  </span>
-                  <Button type="button" variant="destructive" size="sm" disabled={isDeleting} onClick={handleDelete}>
-                    {isDeleting ? 'Bezig…' : 'Verwijderen'}
-                  </Button>
-                  <Button type="button" variant="ghost" size="sm" onClick={() => setConfirmDelete(false)}>
-                    Annuleren
-                  </Button>
-                </div>
-              ) : (
+          <div className={entityDialogFooterClasses}>
+            <div className="flex items-center justify-between gap-2">
+              {isEdit ? (
                 <DemoTooltip show={isDemo}>
                   <Button
                     type="button"
-                    variant="ghost"
-                    size="sm"
-                    className="text-error hover:bg-error/10"
-                    disabled={isDemo}
-                    onClick={() => !isDemo && setConfirmDelete(true)}
+                    variant="destructive"
+                    disabled={isDemo || isDeleting || pending}
+                    onClick={() => setConfirmDelete(true)}
                   >
-                    Story verwijderen
+                    Verwijderen
                   </Button>
                 </DemoTooltip>
+              ) : (
+                <div />
               )}
+              <div className="flex gap-2">
+                <Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
+                  Annuleren
+                </Button>
+                <DemoTooltip show={isDemo}>
+                  <Button type="submit" form="story-form" disabled={pending || isDemo}>
+                    {pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
+                  </Button>
+                </DemoTooltip>
+              </div>
             </div>
-          )}
-
-          <div className="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0 rounded-b-xl bg-muted/50">
-            <DialogClose render={<Button type="button" variant="outline" />}>
-              Annuleren
-            </DialogClose>
-            <DemoTooltip show={isDemo}>
-              <SubmitButton label={isEdit ? 'Opslaan' : 'Aanmaken'} disabled={isDemo} />
-            </DemoTooltip>
           </div>
-        </form>
-      </DialogContent>
-    </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      <DirtyCloseGuardDialog guard={closeGuard} />
+
+      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
+        <AlertDialogContent size="sm">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Story verwijderen</AlertDialogTitle>
+            <AlertDialogDescription>
+              Weet je het zeker? Bijbehorende taken worden ook verwijderd. Dit kan niet ongedaan worden.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setConfirmDelete(false)}>
+              Annuleren
+            </AlertDialogCancel>
+            <AlertDialogAction variant="destructive" disabled={isDeleting} onClick={handleDelete}>
+              {isDeleting ? 'Bezig…' : 'Verwijderen'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   )
 }

docs/INDEX.md

@@ -25,7 +25,7 @@ Auto-generated on 2026-05-04 from front-matter and headings.
 |---|---|---|
 | [PbiDialog Profiel](./specs/dialogs/pbi.md) | active | 2026-05-04 |
 | [ProductDialog Profiel](./specs/dialogs/product.md) | active | 2026-05-04 |
-| [StoryDialog Profiel](./specs/dialogs/story.md) | active | 2026-05-03 |
+| [StoryDialog Profiel](./specs/dialogs/story.md) | active | 2026-05-04 |
 | [TaskDialog Profiel](./specs/dialogs/task.md) | active | 2026-05-03 |
 | [Scrum4Me — Functionele Specificatie](./specs/functional.md) | active | 2026-05-03 |
 | [DevPlanner — User Personas](./specs/personas.md) | active | 2026-05-03 |

docs/specs/dialogs/story.md

@@ -3,7 +3,7 @@ title: "StoryDialog Profiel"
 status: active
 audience: [ai-agent, contributor]
 language: nl
-last_updated: 2026-05-03
+last_updated: 2026-05-04
 ---
 
 # StoryDialog Profiel
@@ -104,19 +104,17 @@ In edit-mode wordt onder het form een `<StoryLog>`-paneel getoond met de chronol
 
 Dit is een **read-only side-panel** en valt binnen de uitzondering die de generieke spec § 13 maakt voor `<StoryLog>`-style activity-rendering.
 
-### Delete-flow (afwijking van generieke spec)
+### Delete-flow
 
-Generieke spec § 10.4 vereist een **`AlertDialog`** voor delete-confirmatie. StoryDialog gebruikt in plaats daarvan een **inline-confirm** in dezelfde footer-rij:
-
-```
-[ Weet je het zeker? Taken worden ook verwijderd.   [Verwijderen]  [Annuleren] ]
-```
-
-Een `AlertDialog` zou een tweede modale laag toevoegen die in deze context onhandig voelt (de dialog zelf is al een interruptive overlay). De inline-confirm is een **bewuste afwijking** van de generieke spec.
+Volgt generieke spec § 10.4: klik op "Verwijderen" opent een `AlertDialog` ("Story verwijderen — bijbehorende taken worden ook verwijderd"). Bevestigen roept `deleteStoryAction` aan.
 
 ### Form-state via `useActionState`
 
-Net als PbiDialog gebruikt StoryDialog `useActionState` + `useFormStatus`, niet `react-hook-form`. Dit is een toegestaan alternatief volgens de generieke spec § 2.
+Net als PbiDialog gebruikt StoryDialog `useActionState`, niet `react-hook-form`. Pending-state komt uit de derde return-waarde (`useActionState[2]`). Dit is een toegestaan alternatief volgens de generieke spec § 2.
+
+### Dirty-tracking handmatig
+
+Geen `react-hook-form`, dus `dirty` wordt op `true` gezet bij de eerste `onChange` op het form en bij wijzigingen van de hidden-state (`priority`). De `useDirtyCloseGuard` hook gebruikt deze boolean om Esc/Cancel/backdrop te beschermen.
 
 ### `key`-prop op `<form>`
 
@@ -132,16 +130,10 @@ Het `<form>` heeft `key={isEdit ? story!.id : 'create'}` — reset native form-s
 
 ---
 
-## Bekende gaps t.o.v. generieke spec
+## Bewuste afwijkingen van generieke spec
 
-> Deze items wijken af van `docs/patterns/dialog.md` en horen in een vervolg-PR rechtgezet (niet onderdeel van de huidige docs-introductie).
-
-- ❌ **Geen dirty-close-guard** — Esc / backdrop / Cancel sluiten direct, ook met onopgeslagen wijzigingen. Generieke spec § 8.1 vereist een AlertDialog bij `isDirty`.
-- ❌ **Geen Cmd/Ctrl+Enter shortcut** — alleen klik op submit-knop.
-- ❌ **Geen char-counter / markdown-hint** op description / acceptance_criteria — bewust weggelaten, maar verdient expliciete bevestiging als design-keuze.
-- ⚠️ **Inline-delete-confirm** in plaats van AlertDialog (zie § Speciale gedragingen). Bewuste afwijking; de generieke spec mag deze variant expliciet toestaan, of dit profile moet als precedent gelden voor toekomstige dialogen.
-- ⚠️ **Header-layout** met meerdere badges wijkt af van de sobere header in § 4. Bewuste afwijking — context-zwaar bij story-wisselen.
-- ⚠️ **Layout wijkt af** van de generieke responsive-tabel: `sm:max-w-lg` met eigen `max-h-[90vh]` + `flex flex-col` i.p.v. de exacte `max-w-[50vw]` / `90vw` / full-screen-progressie uit § 4.
+- ⚠️ **Header-layout** met meerdere badges wijkt af van de sobere header in § 4. Bewuste keuze — story-context (priority + status) wil je direct zichtbaar bij record-wisselen.
+- ❌ **Geen char-counter / markdown-hint** op description / acceptance_criteria — bewust weggelaten omdat stories meestal één zin lang zijn.
 
 ---
 

lib/schemas/story.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod'
+import { MAX_CODE_LENGTH } from '@/lib/code'
+
+const codeField = z.string().max(MAX_CODE_LENGTH).optional()
+
+export const createStorySchema = z.object({
+  pbiId: z.string(),
+  productId: z.string(),
+  code: codeField,
+  title: z.string().min(1, 'Titel is verplicht').max(200),
+  description: z.string().max(2000).optional(),
+  acceptance_criteria: z.string().max(2000).optional(),
+  priority: z.coerce.number().int().min(1).max(4),
+})
+
+export const updateStorySchema = z.object({
+  id: z.string(),
+  code: codeField,
+  title: z.string().min(1, 'Titel is verplicht').max(200),
+  description: z.string().max(2000).optional(),
+  acceptance_criteria: z.string().max(2000).optional(),
+  priority: z.coerce.number().int().min(1).max(4),
+})
+
+export type CreateStoryInput = z.infer<typeof createStorySchema>
+export type UpdateStoryInput = z.infer<typeof updateStorySchema>