feat(PBI-49): add BEM sub-element data-debug-id to components/backlog/*

components/backlog/backlog-card.tsx

@@ -42,7 +42,7 @@ export const BacklogCard = forwardRef<HTMLDivElement, BacklogCardProps>(function
       {...debugProps('backlog-card', 'BacklogCard', 'components/backlog/backlog-card.tsx')}
     >
       <div className="flex items-start justify-between gap-2">
-        <p className="text-sm leading-snug line-clamp-2 flex-1">{title}</p>
+        <p className="text-sm leading-snug line-clamp-2 flex-1" {...debugProps('backlog-card__title')}>{title}</p>
         {code && <CodeBadge code={code} className="shrink-0 mt-0.5" />}
       </div>
       {(badge || actions) && (

components/backlog/empty-panel.tsx

@@ -17,7 +17,7 @@ interface EmptyPanelProps {
 export function EmptyPanel({ title, message, action }: EmptyPanelProps) {
   return (
     <div className="p-8 text-center text-muted-foreground space-y-3" {...debugProps('empty-panel', 'EmptyPanel', 'components/backlog/empty-panel.tsx')}>
-      {title && <p className="text-sm font-medium text-foreground">{title}</p>}
+      {title && <p className="text-sm font-medium text-foreground" {...debugProps('empty-panel__title')}>{title}</p>}
       <p className="text-sm">{message}</p>
       {action && (
         <DemoTooltip show={action.disabled ?? false}>
@@ -26,6 +26,7 @@ export function EmptyPanel({ title, message, action }: EmptyPanelProps) {
             variant="outline"
             disabled={action.disabled}
             onClick={action.disabled ? undefined : action.onClick}
+            {...debugProps('empty-panel__cta')}
           >
             {action.label}
           </Button>

components/backlog/pbi-dialog.tsx

@@ -170,6 +170,7 @@ export function PbiDialog({ state, onClose, isDemo = false }: PbiDialogProps) {
                   disabled={isDemo}
                   aria-invalid={!!fieldError('title')}
                   className={fieldError('title') ? 'border-error' : ''}
+                  {...debugProps('pbi-dialog__title')}
                 />
                 {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
               </div>
@@ -209,7 +210,7 @@ export function PbiDialog({ state, onClose, isDemo = false }: PbiDialogProps) {
                 Annuleren
               </Button>
               <DemoTooltip show={isDemo}>
-                <Button type="submit" form="pbi-form" disabled={pending || isDemo}>
+                <Button type="submit" form="pbi-form" disabled={pending || isDemo} {...debugProps('pbi-dialog__submit')}>
                   {pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
                 </Button>
               </DemoTooltip>

components/backlog/pbi-list.tsx

@@ -392,7 +392,7 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
 
   return (
     <div className="flex flex-col h-full" {...debugProps('pbi-list', 'PbiList', 'components/backlog/pbi-list.tsx')}>
-      <div className="flex items-center justify-end gap-2 px-4 py-2 border-b border-border bg-surface-container-low shrink-0">
+      <div className="flex items-center justify-end gap-2 px-4 py-2 border-b border-border bg-surface-container-low shrink-0" {...debugProps('pbi-list__header')}>
         {filterPriority !== 'all' && (
           <button
             onClick={() => setFilterPriority('all')}
@@ -552,7 +552,7 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
               items={filtered.map(p => p.id)}
               strategy={verticalListSortingStrategy}
             >
-              <div className="p-3 flex flex-col gap-2">
+              <div className="p-3 flex flex-col gap-2" {...debugProps('pbi-list__items')}>
                 {filtered.map(pbi => (
                   <SortablePbiRow
                     key={pbi.id}

components/backlog/story-dialog.tsx

@@ -221,6 +221,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                       disabled={isDemo}
                       aria-invalid={!!fieldError('title')}
                       className={fieldError('title') ? 'border-error' : ''}
+                      {...debugProps('story-dialog__title')}
                     />
                     {fieldError('title') && <p className="text-xs text-error">{fieldError('title')}</p>}
                   </div>
@@ -319,7 +320,7 @@ export function StoryDialog({ state, onClose, isDemo = false }: StoryDialogProps
                   Annuleren
                 </Button>
                 <DemoTooltip show={isDemo}>
-                  <Button type="submit" form="story-form" disabled={pending || isDemo}>
+                  <Button type="submit" form="story-form" disabled={pending || isDemo} {...debugProps('story-dialog__submit')}>
                     {pending ? '…' : isEdit ? 'Opslaan' : 'Aanmaken'}
                   </Button>
                 </DemoTooltip>

components/backlog/story-panel.tsx

@@ -261,7 +261,7 @@ export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
         }
       />
 
-      <div className="flex-1 overflow-y-auto p-4">
+      <div className="flex-1 overflow-y-auto p-4" {...debugProps('story-panel__tasks')}>
         {selectedPbiId === null ? (
           <EmptyPanel message="Selecteer een PBI om de stories te bekijken." />
         ) : rawStories.length === 0 ? (

components/backlog/task-panel.tsx

@@ -153,6 +153,7 @@ export function TaskPanel({ isDemo, closePath }: TaskPanelProps) {
           if (!selectedStoryId) return
           router.push(`${closePath}?newTask=1&storyId=${selectedStoryId}`)
         }}
+        {...debugProps('task-panel__actions')}
       >
         + Nieuwe taak
       </Button>