0 && paginatedData.every((item: T, index: number) => selectedKeys.has(getRowKey(item, index))) } onChange={handleSelectAll} className="rounded border-[var(--border-color)]" />	column.sortable && handleSort(column.sortKey ?? column.key)} > {column.label} {renderSortIcon(column)}


e.stopPropagation()}> handleSelectRow(rowKey)} className="rounded border-[var(--border-color)]" />	{column.render ? column.render(item, globalIndex) : formatCellValue(getNestedValue(item, column.key), column.key)}

0 && paginatedData.every((item: T, index: number) => selectedKeys.has(getRowKey(item, index))) } onChange={handleSelectAll} className="rounded border-[var(--border-color)]" />

column.sortable && handleSort(column.sortKey ?? column.key)} >

{column.label} {renderSortIcon(column)}

e.stopPropagation()}> handleSelectRow(rowKey)} className="rounded border-[var(--border-color)]" />

{column.render ? column.render(item, globalIndex) : formatCellValue(getNestedValue(item, column.key), column.key)}

{label && ( {label} {required && *} )}

onChange(e.target.value === '' ? null : e.target.value)}
        className="w-full px-3 py-2 text-sm resize-none overflow-hidden rounded-[var(--radius-input,0.375rem)] border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)] focus:border-transparent disabled:opacity-60 disabled:cursor-not-allowed"
      />
      <div className="flex items-center justify-between gap-2">
        {error ? <p role="alert" className="text-xs text-[var(--color-danger-500)]">{error}</p> : <span />}
        <span className="text-xs text-[var(--text-muted)] tabular-nums">{maxLength ? length + ' / ' + maxLength : String(length)}</span>
      </div>
    </div>
  );
}
`;
}

/**
 * Switch — theme-compliant on/off toggle (replaces the bare `<input type=
 * "checkbox">` the form emitted for booleans). One click flips it. Value
 * contract: boolean.
 */
function switchComponent(): string {
  return `${HEADER}
import { useMemo } from 'react';

export interface SwitchProps {
  /** Current on/off state. */
  value: boolean;
  /** Receives the new state. */
  onChange: (value: boolean) => void;
  /** Visible label above the toggle. */
  label?: string;
  disabled?: boolean;
  /** Validation message rendered under the toggle. */
  error?: string;
}

export function Switch({ value, onChange, label, disabled = false, error }: SwitchProps) {
  const inputId = useMemo(() => 'switch-' + Math.random().toString(36).slice(2, 9), []);
  const track = 'relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-500)] disabled:opacity-60 disabled:cursor-not-allowed ' + (value ? 'bg-[var(--color-accent-500)]' : 'bg-[var(--border-color)]');
  const thumb = 'inline-block h-5 w-5 transform rounded-full bg-[var(--bg-card)] shadow-[var(--shadow-card)] transition-transform ' + (value ? 'translate-x-5' : 'translate-x-0.5');

return (
    <div className="flex flex-col gap-1.5">
      {label && (
        <label htmlFor={inputId} className="text-sm font-medium text-[var(--text-primary)]">{label}</label>
      )}
      <button
        id={inputId}
        type="button"
        role="switch"
        aria-checked={value}
        aria-invalid={Boolean(error)}
        disabled={disabled}
        onClick={() => onChange(!value)}
        className={track}
      >
        <span className={thumb} />
      </button>
      {error && <p role="alert" className="text-xs text-[var(--color-danger-500)]">{error}</p>}
    </div>
  );
}
`;
}

/**
 * SegmentedControl — theme-compliant inline radio group for low-cardinality
 * enums (≤ ~4 options): every choice is visible so picking one is a single
 * click (vs. a 2-click `<select>`). Drop-in for the same `{ options, value }`
 * shape as EnumSelect. Value contract: the selected option value string.
 */
function segmentedControlComponent(): string {
  return `${HEADER}
import { useMemo } from 'react';

export interface SegmentedOption {
  value: string;
  label: string;
}

export interface SegmentedControlProps {
  options: SegmentedOption[];
  /** Selected option value, or null when nothing is picked yet. */
  value: string | null;
  /** Receives the picked value (a radio group can't be emptied via the UI). */
  onChange: (value: string) => void;
  /** Visible label above the control. */
  label?: string;
  required?: boolean;
  disabled?: boolean;
  /** Validation message rendered under the control. */
  error?: string;
}

export function SegmentedControl({ options, value, onChange, label, required = false, disabled = false, error }: SegmentedControlProps) {
  const labelId = useMemo(() => 'segmented-' + Math.random().toString(36).slice(2, 9), []);

return (
    <div className="flex flex-col gap-1.5">
      {label && (
        <span id={labelId} className="text-sm font-medium text-[var(--text-primary)]">
          {label}
          {required && <span className="ml-0.5 text-[var(--color-danger-500)]" aria-label="required">*</span>}
        </span>
      )}
      <div
        role="radiogroup"
        aria-labelledby={label ? labelId : undefined}
        aria-required={required}
        className="flex w-full gap-0.5 rounded-[var(--radius-input,0.375rem)] border border-[var(--border-color)] bg-[var(--bg-card)] p-0.5"
      >
        {options.map((opt) => {
          const isSel = opt.value === value;
          const cls = 'flex-1 px-3 py-1.5 text-sm text-center rounded-[var(--radius-input,0.375rem)] transition-colors disabled:opacity-60 disabled:cursor-not-allowed ' + (isSel ? 'bg-[var(--color-accent-500)] text-[var(--text-inverse)] font-medium' : 'text-[var(--text-primary)] hover:bg-[var(--bg-hover)]');
          return (
            <button
              key={opt.value}
              type="button"
              role="radio"
              aria-checked={isSel}
              disabled={disabled}
              onClick={() => onChange(opt.value)}
              className={cls}
            >
              {opt.label}
            </button>
          );
        })}
      </div>
      {error && <p role="alert" className="text-xs text-[var(--color-danger-500)]">{error}</p>}
    </div>
  );
}
`;
}

/**
 * TabStrip — the detail-page tab-bar container (two-layer 'underlined tabs'
 * structure, audit DEV-UI-027): the bottom divider lives on this OUTER div and
 * the INNER scrollable row carries -mb-px so the active trigger's border-b-2
 * overlaps (replaces) the divider. On overflow the row scrolls horizontally
 * with the scrollbar hidden; chevron nudge buttons appear only on the side(s)
 * that can still scroll — no scrollbar under the tabs, ever. Children are the
 * <button role="tab"> triggers scaffold-component emits inline (so their
 * PermissionGuard wrapping, i18n labels and id="tab-*" contract stay in the
 * page). LTR-only: shipped locales are fr/en/it/de — scrollLeft signs in RTL
 * are untested.
 */
function tabStripComponent(): string {
  return `${HEADER}
import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { ChevronLeft, ChevronRight } from 'lucide-react';

export interface TabStripProps {
  /** aria-label of the tablist row. */
  label: string;
  /** Active trigger key — each change scrolls the selected trigger into view. */
  activeKey?: string;
  /** The <button role="tab"> triggers. */
  children: ReactNode;
}

export function TabStrip({ label, activeKey, children }: TabStripProps) {
  const { t } = useTranslation('common');
  const rowRef = useRef<HTMLDivElement>(null);
  const [canLeft, setCanLeft] = useState(false);
  const [canRight, setCanRight] = useState(false);

// ±1px epsilon: zoom / subpixel rounding can leave scrollLeft just short of
  // the true edge, which would otherwise pin an arrow on forever.
  const measure = useCallback(() => {
    const el = rowRef.current;
    if (!el) return;
    setCanLeft(el.scrollLeft > 1);
    setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
  }, []);

useEffect(() => {
    const el = rowRef.current;
    if (!el) return;
    measure();
    el.addEventListener('scroll', measure, { passive: true });
    if (typeof ResizeObserver === 'undefined') return () => el.removeEventListener('scroll', measure);
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    return () => {
      el.removeEventListener('scroll', measure);
      ro.disconnect();
    };
  }, [measure]);

// Deep link (?tab= targeting an off-screen trigger) — bring the active one
  // into view. block:'nearest' keeps the page from jumping vertically; optional
  // chaining because jsdom implements neither scrollIntoView nor scrollBy.
  useEffect(() => {
    rowRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
  }, [activeKey]);

const nudge = (dir: -1 | 1) => {
    const el = rowRef.current;
    if (!el) return;
    el.scrollBy?.({ left: dir * Math.round(el.clientWidth * 0.66), behavior: 'smooth' });
  };

// tabIndex={-1}: the arrows are a pointer affordance — keyboard users tab
  // through the triggers themselves and the browser scrolls focus into view.
  const arrowCls = 'absolute top-1/2 -translate-y-1/2 z-10 p-1 rounded-full border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-secondary)] shadow-[var(--shadow-card)] hover:text-[var(--text-primary)]';

return (
    <div className="relative border-b border-[var(--border-color)] mb-6">
      {canLeft && (
        <button
          type="button"
          tabIndex={-1}
          aria-label={t('tabStrip.scrollLeft', { defaultValue: 'Scroll tabs left' })}
          onClick={() => nudge(-1)}
          className={\`left-0 \${arrowCls}\`}
        >
          <ChevronLeft className="w-4 h-4" />
        </button>
      )}
      <div
        ref={rowRef}
        role="tablist"
        aria-label={label}
        className="flex gap-1 -mb-px overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        {children}
      </div>
      {canRight && (
        <button
          type="button"
          tabIndex={-1}
          aria-label={t('tabStrip.scrollRight', { defaultValue: 'Scroll tabs right' })}
          onClick={() => nudge(1)}
          className={\`right-0 \${arrowCls}\`}
        >
          <ChevronRight className="w-4 h-4" />
        </button>
      )}
    </div>
  );
}
`;
}

function localeFile(locale: typeof LOCALES[number]): GeneratedFile {
  // I18N_STRINGS[locale] is already namespaced (entityLookup / dateInput /
  // enumSelect / multiSelect); deep-merge-json preserves sibling namespaces.
  return {
    path: `src/i18n/locales/${locale}/common.json`,
    content: JSON.stringify(I18N_STRINGS[locale], null, 2) + '\n',
    strategy: 'deep-merge-json',
  };
}

function customActionDialogComponent(): string {
  return `${HEADER}
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { EntityLookup } from './EntityLookup';

/** One parameter the custom action collects before firing. */
export interface CustomActionParam {
  /** Payload key sent to the backend (camelCase). */
  name: string;
  type: 'text' | 'textarea' | 'number' | 'date' | 'lookup' | 'file' | 'select';
  label: string;
  required?: boolean;
  /** type:lookup — EntityLookup endpoint resolving the FK target. */
  apiEndpoint?: string;
  /** type:file — accept filter (e.g. '.pdf,.docx'). */
  accept?: string;
  /** type:select — static option set. */
  options?: { value: string; label: string }[];
}

export interface CustomActionDialogProps {
  open: boolean;
  title: string;
  params: CustomActionParam[];
  submitLabel: string;
  /** Receives the assembled payload (param name → value; File for type:file). */
  onSubmit: (payload: Record<string, unknown>) => void | Promise<void>;
  onClose: () => void;
}

/**
 * Generic parameter-collection modal for a custom action (transfer target picker,
 * document upload, …). Renders one control per param, validates required fields,
 * and hands the assembled payload to onSubmit. Theme-token styled; editable.
 */
export function CustomActionDialog({ open, title, params, submitLabel, onSubmit, onClose }: CustomActionDialogProps) {
  const { t } = useTranslation('common');
  const [values, setValues] = useState<Record<string, unknown>>({});
  const [submitting, setSubmitting] = useState(false);
  if (!open) return null;
  const set = (name: string, v: unknown) => setValues((s) => ({ ...s, [name]: v }));
  const isEmpty = (v: unknown) => v === undefined || v === null || v === '';
  const missing = params.filter((p) => p.required && isEmpty(values[p.name]));
  const handleSubmit = async () => {
    if (missing.length > 0) return;
    setSubmitting(true);
    try {
      await onSubmit(values);
      setValues({});
    } finally {
      setSubmitting(false);
    }
  };
  const fieldClass = 'block w-full rounded-[var(--radius-input)] border border-[var(--border-color)] bg-[var(--bg-input)] px-3 py-2 text-sm text-[var(--text-primary)]';
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" role="dialog" aria-modal="true">
      <div className="w-full max-w-md rounded-[var(--radius-card)] bg-[var(--bg-surface)] p-6 shadow-[var(--shadow-overlay)]">
        <h2 className="mb-4 text-lg font-semibold text-[var(--text-primary)]">{title}</h2>
        <div className="space-y-4">
          {params.map((p) => {
            const label = (
              <span className="mb-1 block text-sm font-medium text-[var(--text-secondary)]">
                {p.label}{p.required ? ' *' : ''}
              </span>
            );
            if (p.type === 'lookup' && p.apiEndpoint) {
              return (
                <EntityLookup
                  key={p.name}
                  apiEndpoint={p.apiEndpoint}
                  value={(values[p.name] as string | null) ?? null}
                  onChange={(id) => set(p.name, id)}
                  label={p.label}
                  required={p.required}
                />
              );
            }
            if (p.type === 'file') {
              return (
                <label key={p.name} className="block">
                  {label}
                  <input type="file" accept={p.accept} onChange={(e) => set(p.name, e.target.files?.[0] ?? null)} className="block w-full text-sm text-[var(--text-primary)]" />
                </label>
              );
            }
            if (p.type === 'select') {
              return (
                <label key={p.name} className="block">
                  {label}
                  <select value={(values[p.name] as string) ?? ''} onChange={(e) => set(p.name, e.target.value)} className={fieldClass}>
                    <option value="" disabled>{t('actions.select', { defaultValue: '—' })}</option>
                    {(p.options ?? []).map((o) => (
                      <option key={o.value} value={o.value}>{o.label}</option>
                    ))}
                  </select>
                </label>
              );
            }
            if (p.type === 'textarea') {
              return (
                <label key={p.name} className="block">
                  {label}
                  <textarea rows={3} value={(values[p.name] as string) ?? ''} onChange={(e) => set(p.name, e.target.value)} className={fieldClass} />
                </label>
              );
            }
            return (
              <label key={p.name} className="block">
                {label}
                <input
                  type={p.type === 'number' ? 'number' : p.type === 'date' ? 'date' : 'text'}
                  value={(values[p.name] as string) ?? ''}
                  onChange={(e) => set(p.name, e.target.value)}
                  className={fieldClass}
                />
              </label>
            );
          })}
        </div>
        <div className="mt-6 flex justify-end gap-2">
          <button type="button" onClick={onClose} className="btn btn-secondary">
            {t('actions.cancel', { defaultValue: 'Cancel' })}
          </button>
          <button type="button" onClick={() => { void handleSubmit(); }} disabled={submitting || missing.length > 0} className="btn btn-primary disabled:opacity-50">
            {submitLabel}
          </button>
        </div>
      </div>
    </div>
  );
}
`;
}

/**
 * SectionCard — the titled category card every sectioned form/detail body is
 * made of (« Identité », « Contrat », « Temps de travail »…). Owns the card
 * chrome (tokens only) and the read-first edit affordance: when `editable`,
 * a per-section "Modifier"/"Terminer" toggle renders in the header and the
 * `editing` state draws the accent border + halo. Fully CONTROLLED and i18n-
 * agnostic: the page owns the editing state and resolves every label
 * (t('<entity>.form.editSection') / doneSection) — the primitive renders.
 * Testid contract (UAT + ui-test drivers): the toggle carries
 * `section-edit-<key>` in read mode and `section-done-<key>` while editing.
 */
function sectionCardComponent(): string {
  return `${HEADER}
import type { ReactNode } from 'react';

export interface SectionCardProps {
  /** Section title, already i18n-resolved by the page. Absent → sober card without a header. */
  title?: string;
  /** One-line description rendered under the title (i18n-resolved). */
  description?: string;
  /** Show the per-section edit toggle (read-first edit forms). */
  editable?: boolean;
  /** Controlled editing state — the page owns it. */
  editing?: boolean;
  onToggleEdit?: () => void;
  /** Toggle label while the section is in READ mode (e.g. « Modifier »). */
  editLabel?: string;
  /** Toggle label while the section is EDITING (e.g. « Terminer »). */
  doneLabel?: string;
  /** Stable section key — drives the toggle's data-testid (section-edit-<key>). */
  sectionKey?: string;
  children: ReactNode;
}

export function SectionCard({
  title,
  description,
  editable = false,
  editing = false,
  onToggleEdit,
  editLabel,
  doneLabel,
  sectionKey = 'default',
  children,
}: SectionCardProps) {
  const borderCls = editable && editing
    ? 'border-[var(--color-accent-600)] shadow-[var(--shadow-overlay)]'
    : 'border-[var(--border-color)]';
  const showHeader = Boolean(title) || editable;
  return (
    <section className={\`rounded-[var(--radius-card)] border \${borderCls} bg-[var(--bg-card)] p-6 space-y-4\`}>
      {showHeader && (
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1">
            {title && (
              <h2 className="text-sm font-semibold uppercase tracking-wide text-[var(--text-secondary)]">{title}</h2>
            )}
            {description && (
              <p className="text-sm text-[var(--text-secondary)]">{description}</p>
            )}
          </div>
          {editable && (
            <button
              type="button"
              data-testid={editing ? \`section-done-\${sectionKey}\` : \`section-edit-\${sectionKey}\`}
              onClick={onToggleEdit}
              className="btn btn-secondary shrink-0 text-sm"
            >
              {editing ? doneLabel : editLabel}
            </button>
          )}
        </div>
      )}
      {children}
    </section>
  );
}
`;
}

/**
 * Skeleton — theme-compliant loading placeholder (pulse block). Composed by
 * DataTable (skeleton rows while loading) and StatCard; usable standalone for
 * any custom loading layout. Pure presentation: no colors outside tokens.
 */
function skeletonComponent(): string {
  return `${HEADER}
export interface SkeletonProps {
  /** Tailwind sizing/rounding utilities (e.g. 'h-4 w-3/4'). */
  className?: string;
}

export function Skeleton({ className = 'h-4 w-full' }: SkeletonProps) {
  return (
    <span
      aria-hidden="true"
      className={\`block animate-pulse rounded bg-[var(--bg-muted)] \${className}\`}
    />
  );
}

export default Skeleton;
`;
}

/**
 * EmptyState — the "nothing here yet" panel: icon + title + optional
 * description + optional CTA slot. DataTable renders it for an empty result;
 * pages can compose it directly for richer, business-worded empty states
 * (the wording stays i18n-resolved by the caller).
 */
function emptyStateComponent(): string {
  return `${HEADER}
import type { ReactNode } from 'react';

export interface EmptyStateProps {
  /** Illustration icon (typically the page's lucide icon). */
  icon?: ReactNode;
  /** Main line — what is empty (already i18n-resolved). */
  title: string;
  /** Secondary line — why / what to do about it. */
  description?: string;
  /** CTA slot (e.g. the create button, already permission-gated by the caller). */
  action?: ReactNode;
  className?: string;
}

export function EmptyState({ icon, title, description, action, className = '' }: EmptyStateProps) {
  return (
    <div className={\`flex flex-col items-center justify-center gap-1 py-10 px-4 text-center \${className}\`}>
      {icon && (
        <div className="mb-2 text-[var(--text-secondary)] opacity-50 [&_svg]:w-10 [&_svg]:h-10">{icon}</div>
      )}
      <p className="text-sm font-medium text-[var(--text-primary)]">{title}</p>
      {description && <p className="max-w-sm text-sm text-[var(--text-secondary)]">{description}</p>}
      {action && <div className="mt-3">{action}</div>}
    </div>
  );
}

export default EmptyState;
`;
}

/**
 * Badge — the reusable status pill. Replaces the pill markup the page
 * generator used to inline (non-themable, invisible to audits): tones map to
 * the theme's status tokens, 'neutral' matches the historical negative pill,
 * 'success' the positive one — visual parity with the inlined era.
 */
function badgeComponent(): string {
  return `${HEADER}
import type { ReactNode } from 'react';

const TONE_CLASSES: Record<BadgeTone, string> = {
  neutral: 'bg-[var(--bg-hover)] text-[var(--text-secondary)] border-[var(--border-color)]',
  success: 'bg-[var(--success-bg)] text-[var(--success-text)] border-[var(--success-border)]',
  warning: 'bg-[var(--warning-bg)] text-[var(--warning-text)] border-[var(--warning-border)]',
  error: 'bg-[var(--error-bg)] text-[var(--error-text)] border-[var(--error-border)]',
  info: 'bg-[var(--info-bg)] text-[var(--info-text)] border-[var(--info-border)]',
  accent: 'bg-[var(--accent-bg)] text-[var(--accent-text)] border-[var(--accent-border)]',
};

export interface BadgeProps {
  tone?: BadgeTone;
  className?: string;
  children: ReactNode;
}

export function Badge({ tone = 'neutral', className = '', children }: BadgeProps) {
  return (
    <span
      className={\`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border \${TONE_CLASSES[tone]} \${className}\`}
    >
      {children}
    </span>
  );
}

export default Badge;
`;
}

/**
 * StatCard — KPI tile for the CONTENT zone (list KPI-row, section homes,
 * detail summaries). Visual sibling of the dashboard KpiCard but lives in
 * ui-primitives: dashboard-primitives are only scaffolded when a dashboard
 * exists, while any list/home page may render stats. Reads the same --kpi-*
 * tokens so both render as one system.
 */
function statCardComponent(): string {
  return `${HEADER}
import type { ReactNode } from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { Skeleton } from '@/components/ui/Skeleton';

export interface StatCardProps {
  /** Small caption above the value (already i18n-resolved). */
  label: string;
  /** The headline figure. */
  value: ReactNode;
  /** Optional lucide icon rendered in a soft accent square. */
  icon?: ReactNode;
  /** Secondary line under the value (period, unit, comparison…). */
  hint?: string;
  /** Trend direction — colors the trendLabel with the kpi trend tokens. */
  trend?: 'up' | 'down';
  trendLabel?: string;
  /** Skeleton the value while the figure loads. */
  loading?: boolean;
  className?: string;
}

export function StatCard({ label, value, icon, hint, trend, trendLabel, loading = false, className = '' }: StatCardProps) {
  return (
    <div className={\`rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-card)] p-4 \${className}\`}>
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 space-y-1">
          <p className="text-xs font-medium uppercase tracking-wide text-[var(--kpi-label,var(--text-secondary))]">{label}</p>
          {loading ? (
            <Skeleton className="h-7 w-20" />
          ) : (
            <p className="text-2xl font-semibold tabular-nums text-[var(--kpi-value,var(--text-primary))] truncate">{value}</p>
          )}
          {(hint || (trend && trendLabel)) && (
            <p className="flex items-center gap-1 text-xs text-[var(--text-secondary)]">
              {trend === 'up' && <TrendingUp className="w-3.5 h-3.5 text-[var(--kpi-trend-up,var(--success-text))]" />}
              {trend === 'down' && <TrendingDown className="w-3.5 h-3.5 text-[var(--kpi-trend-down,var(--error-text))]" />}
              {trend && trendLabel && (
                <span className={trend === 'up' ? 'text-[var(--kpi-trend-up,var(--success-text))]' : 'text-[var(--kpi-trend-down,var(--error-text))]'}>
                  {trendLabel}
                </span>
              )}
              {hint && <span>{hint}</span>}
            </p>
          )}
        </div>
        {icon && (
          <div className="shrink-0 rounded-[var(--radius-input)] bg-[var(--accent-bg)] p-2 text-[var(--accent-text)] [&_svg]:w-5 [&_svg]:h-5">
            {icon}
          </div>
        )}
      </div>
    </div>
  );
}

export default StatCard;
`;
}

export function generate(spec: ScaffoldUiPrimitivesInput): GeneratedFile[] {
  return [
    { path: 'src/components/ui/EntityLookup.tsx', content: entityLookupComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/CustomActionDialog.tsx', content: customActionDialogComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/DateInput.tsx', content: dateInputComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/EnumSelect.tsx', content: enumSelectComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/RowActionsMenu.tsx', content: rowActionsMenuComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/HeaderActionsMenu.tsx', content: headerActionsMenuComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/MultiSelect.tsx', content: multiSelectComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/SegmentedControl.tsx', content: segmentedControlComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/Textarea.tsx', content: textareaComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/Switch.tsx', content: switchComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/TruncatedText.tsx', content: truncatedTextComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/DataTable.tsx', content: dataTableComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/tableRepresentation.ts', content: tableRepresentationModule(), strategy: 'overwrite' },
    { path: 'src/components/ui/ResponsiveDataTable.tsx', content: responsiveDataTableComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/useColumnVisibility.ts', content: useColumnVisibilityModule(), strategy: 'overwrite' },
    { path: 'src/components/ui/useKanbanColumnPrefs.ts', content: useKanbanColumnPrefsModule(), strategy: 'overwrite' },
    { path: 'src/components/ui/useModuleAvailability.ts', content: useModuleAvailabilityModule(spec), strategy: 'overwrite' },
    { path: 'src/components/ui/ColumnPicker.tsx', content: columnPickerComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/FilterBar.tsx', content: filterBarComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/TabStrip.tsx', content: tabStripComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/SectionCard.tsx', content: sectionCardComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/useListState.ts', content: useListStateModule(), strategy: 'overwrite' },
    { path: 'src/components/ui/SavedViewsMenu.tsx', content: savedViewsMenuComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/Skeleton.tsx', content: skeletonComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/EmptyState.tsx', content: emptyStateComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/Badge.tsx', content: badgeComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/StatCard.tsx', content: statCardComponent(), strategy: 'overwrite' },
    { path: 'src/components/ui/SmartCodeField.tsx', content: smartCodeFieldComponent(), strategy: 'overwrite' },
    ...LOCALES.map(localeFile),
  ];
}

/**
 * SmartCodeField — the CREATE-form code field of a coded entity declared
 * « surchargeable à la création » (pagespec codedEntity.supplied). Faithful
 * client adaptation of the socle's SmartCodeField/useCodeSuggestion pair
 * (NOT exported by @atlashub/smartstack — only `api` is), self-contained:
 * wire types + debounce + suggestion hook + field in one editable file.
 *
 * ONE deliberate deviation from the socle: in Sequential mode the socle only
 * shows the info line; HERE a « saisir manuellement » toggle opens a manual
 * input — this primitive is only injected when the BA sanctioned supplied
 * codes, and the import/backfill case is exactly a sequential-pattern entity
 * arriving WITH its number. The deferred unique-index collision risk of that
 * path is the BA-side warn (supplied + {SEQ}, PRD-132/DM-017).
 */
function smartCodeFieldComponent(): string {
  return `${HEADER}
import { useCallback, useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import { api } from '@atlashub/smartstack';
import { Info, Loader2, PenLine, RefreshCw, Undo2, Wand2 } from 'lucide-react';

// ── Wire types — mirror of the socle's /api/codes contract ──────────────────
export type CodeSuggestionMode = 'Sequential' | 'Derived';

export interface CodeFieldDto {
  codeKey: string;
  mode: CodeSuggestionMode;
  effectiveFormat: string;
  /** Input keys suggestions need — the form watches these fields. */
  requiredFields: string[];
  /** True when the form should render an editable code field (Derived mode). */
  acceptsUserCode: boolean;
  suggestedMaxLength: number | null;
  /** The next code the engine would allocate (peeked ESTIMATE, never reserved). */
  sampleNext: string | null;
}

export interface CodeSuggestionDto {
  codeKey: string | null;
  mode: CodeSuggestionMode;
  effectiveFormat: string;
  candidates: string[];
  requiredFields: string[];
  missingFields: string[];
  notes: string[];
}

function useDebounce<T>(value: T, ms: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = window.setTimeout(() => setDebounced(value), ms);
    return () => window.clearTimeout(timer);
  }, [value, ms]);
  return debounced;
}

export type CodeSuggestionStatus = 'idle' | 'loading' | 'ready' | 'error';
export type CodeOrigin = 'auto' | 'manual';

interface UseCodeSuggestionOptions {
  codeKey: string;
  inputs: Record<string, string | null>;
  enabled?: boolean;
  onSuggested?: (code: string) => void;
}

const DEBOUNCE_MS = 400;
const BATCH = 5;

/**
 * Deterministic code-suggestion state (no AI): loads the server's field
 * verdict once, then — Derived mode, while the user has not typed — keeps one
 * suggestion applied from the watched inputs. A late response never
 * overwrites a manual value (request-id supersede).
 */
export function useCodeSuggestion({ codeKey, inputs, enabled = true, onSuggested }: UseCodeSuggestionOptions) {
  const [field, setField] = useState<CodeFieldDto | null>(null);
  const [fieldResolved, setFieldResolved] = useState(false);
  const [status, setStatus] = useState<CodeSuggestionStatus>('idle');
  const [candidates, setCandidates] = useState<string[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const [origin, setOrigin] = useState<CodeOrigin>('auto');

const requestIdRef = useRef(0);
  const originRef = useRef<CodeOrigin>('auto');
  originRef.current = origin;
  const onSuggestedRef = useRef(onSuggested);
  onSuggestedRef.current = onSuggested;

const inputsKey = useMemo(() => JSON.stringify(inputs), [inputs]);
  const debouncedInputsKey = useDebounce(inputsKey, DEBOUNCE_MS);

const missingInputs = useMemo(() => {
    if (!field) return [];
    return field.requiredFields.filter((name) => {
      const value = inputs[name];
      return value === undefined || value === null || value.trim() === '';
    });
  }, [field, inputs]);

useEffect(() => {
    if (!enabled || !codeKey) {
      setFieldResolved(true);
      return;
    }
    let cancelled = false;
    const controller = new AbortController();
    void (async () => {
      try {
        const dto = await api.get<CodeFieldDto>(
          \`/api/codes/\${encodeURIComponent(codeKey)}/field\`,
          { signal: controller.signal },
        );
        if (!cancelled) setField(dto);
      } catch {
        // Unknown key or transient failure → render nothing; the save-time
        // engine still allocates.
        if (!cancelled) setField(null);
      } finally {
        if (!cancelled) setFieldResolved(true);
      }
    })();
    return () => { cancelled = true; controller.abort(); };
  }, [codeKey, enabled]);

useEffect(() => {
    if (!enabled || !field?.acceptsUserCode) return;
    if (originRef.current !== 'auto') return;
    const parsed = JSON.parse(debouncedInputsKey) as Record<string, string | null>;
    const missing = field.requiredFields.some((name) => {
      const value = parsed[name];
      return value === undefined || value === null || value.trim() === '';
    });
    if (missing) {
      setCandidates([]);
      setActiveIndex(0);
      setStatus('idle');
      return;
    }
    void runSuggest([], true);
  }, [enabled, field, debouncedInputsKey, runSuggest]);

const applyIndex = useCallback((index: number) => {
    setActiveIndex(index);
    setOrigin('auto');
    const code = candidates[index];
    if (code) onSuggestedRef.current?.(code);
  }, [candidates]);

// A regenerate/fetchMore batch landed past the old list: apply the first new
  // candidate (auto mode only).
  const lastLenRef = useRef(0);
  useEffect(() => {
    if (candidates.length > lastLenRef.current && lastLenRef.current > 0
      && activeIndex >= lastLenRef.current && originRef.current === 'auto') {
      const idx = lastLenRef.current;
      setActiveIndex(idx);
      const code = candidates[idx];
      if (code) onSuggestedRef.current?.(code);
    }
    lastLenRef.current = candidates.length;
  }, [candidates, activeIndex]);

return {
    field, fieldResolved, status, candidates, activeIndex, origin, missingInputs,
    regenerate, pickCandidate: applyIndex, fetchMore, setManual, resumeAuto,
  };
}

export interface SmartCodeFieldProps {
  /** The entity's code key (e.g. \`crm.budget\`) — pagespec codedEntity.codeKey. */
  readonly codeKey: string;
  /** Watched field inputs feeding the derived tokens (e.g. \`{ label: name }\`). */
  readonly inputs: Record<string, string | null>;
  /** Controlled code value — the FORM owns it and sends it in its create payload. */
  readonly value: string;
  readonly onChange: (code: string) => void;
  readonly disabled?: boolean;
  /** Server-side error to show under the field (e.g. "code already in use"). */
  readonly error?: string | null;
  readonly id?: string;
  readonly className?: string;
}

/**
 * Code field for the CREATION form of a coded entity — CREATE mode only,
 * codes are immutable after creation. Driven by the server's verdict:
 * Derived pattern → editable suggestion-backed input; Sequential pattern →
 * info line + a manual-entry toggle (import/backfill); unknown key → nothing.
 * Deterministic, NO AI — hence Wand2/RefreshCw, never Sparkles.
 */
export function SmartCodeField({
  codeKey, inputs, value, onChange, disabled = false, error = null, id, className = '',
}: SmartCodeFieldProps): ReactElement | null {
  const { t } = useTranslation('common');
  const [showProposals, setShowProposals] = useState(false);
  const [sequentialManual, setSequentialManual] = useState(false);

const {
    field, fieldResolved, status, candidates, activeIndex, origin, missingInputs,
    regenerate, pickCandidate, fetchMore, setManual, resumeAuto,
  } = useCodeSuggestion({ codeKey, inputs, enabled: !disabled, onSuggested: onChange });

const inputId = id ?? \`smart-code-\${codeKey.replace(/[^a-z0-9]+/gi, '-')}\`;

const onManualChange = useCallback((next: string) => {
    setManual();
    onChange(next);
  }, [onChange, setManual]);

const pick = useCallback((candidate: string, index: number) => {
    pickCandidate(index);
    onChange(candidate);
    setShowProposals(false);
  }, [onChange, pickCandidate]);

if (!fieldResolved || !field) return null;

// Sequential pattern: info line, plus the sanctioned manual-entry toggle —
  // when OFF the form sends NO code (the engine allocates).
  if (!field.acceptsUserCode) {
    if (!sequentialManual) {
      return (
        <div className={\`flex items-center gap-2 text-sm text-[var(--text-tertiary)] \${className}\`}>
          <Info className="w-4 h-4 flex-shrink-0" />
          <span>
            {t('smartCode.autoInfo', { defaultValue: 'Assigned automatically at save' })}
            {field.sampleNext && (
              <>
                {' — '}
                <code className="font-mono text-[var(--text-secondary)]">
                  {t('smartCode.autoExample', { code: field.sampleNext, defaultValue: 'e.g. {{code}}' })}
                </code>
              </>
            )}
          </span>
          <button
            type="button"
            onClick={() => setSequentialManual(true)}
            disabled={disabled}
            data-testid="smart-code-manual-toggle"
            className="inline-flex items-center gap-1 text-xs text-[var(--text-secondary)] underline-offset-2 hover:underline disabled:opacity-40"
          >
            <PenLine className="w-3 h-3" />
            {t('smartCode.enterManually', { defaultValue: 'Enter a code (import/backfill)' })}
          </button>
        </div>
      );
    }
    return (
      <div className={\`space-y-1.5 \${className}\`}>
        <label htmlFor={inputId} className="flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)]">
          <PenLine className="w-3.5 h-3.5 text-[var(--text-tertiary)]" />
          {t('smartCode.label', { defaultValue: 'Code' })}
        </label>
        <div className="flex items-center gap-1.5">
          <input
            id={inputId}
            type="text"
            value={value}
            onChange={(e) => onChange(e.target.value)}
            disabled={disabled}
            maxLength={field.suggestedMaxLength ?? 100}
            className={\`input font-mono flex-1 min-w-0 \${error ? 'border-[var(--error-border)]' : ''}\`}
            aria-invalid={Boolean(error)}
            aria-describedby={error ? \`\${inputId}-error\` : undefined}
            autoComplete="off"
            spellCheck={false}
          />
          <button
            type="button"
            onClick={() => { setSequentialManual(false); onChange(''); }}
            disabled={disabled}
            title={t('smartCode.backToAutoInfo', { defaultValue: 'Back to automatic assignment' })}
            aria-label={t('smartCode.backToAutoInfo', { defaultValue: 'Back to automatic assignment' })}
            className="p-2 rounded-[var(--radius-button)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40"
          >
            <Undo2 className="w-4 h-4" />
          </button>
        </div>
        {error && (
          <p id={\`\${inputId}-error\`} className="text-xs text-[var(--error-text)]">{error}</p>
        )}
      </div>
    );
  }

const loading = status === 'loading';
  const hasCandidates = candidates.length > 0;

return (
    <div className={\`space-y-1.5 \${className}\`}>
      <label htmlFor={inputId} className="flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)]">
        <Wand2 className="w-3.5 h-3.5 text-[var(--text-tertiary)]" />
        {t('smartCode.label', { defaultValue: 'Code' })}
        {origin === 'manual' && (
          <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-[var(--bg-secondary)] text-[var(--text-tertiary)]">
            <PenLine className="w-3 h-3" />{t('smartCode.manualBadge', { defaultValue: 'Manual' })}
          </span>
        )}
      </label>

<div className="flex items-center gap-1.5">
        <input
          id={inputId}
          type="text"
          value={value}
          onChange={(e) => onManualChange(e.target.value)}
          disabled={disabled}
          maxLength={field.suggestedMaxLength ?? 100}
          className={\`input font-mono flex-1 min-w-0 \${error ? 'border-[var(--error-border)]' : ''}\`}
          aria-invalid={Boolean(error)}
          aria-describedby={error ? \`\${inputId}-error\` : undefined}
          autoComplete="off"
          spellCheck={false}
        />
        {origin === 'manual' ? (
          <button
            type="button"
            onClick={resumeAuto}
            disabled={disabled}
            title={t('smartCode.backToAuto', { defaultValue: 'Back to suggestion' })}
            aria-label={t('smartCode.backToAuto', { defaultValue: 'Back to suggestion' })}
            className="p-2 rounded-[var(--radius-button)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40"
          >
            <Undo2 className="w-4 h-4" />
          </button>
        ) : (
          <button
            type="button"
            onClick={regenerate}
            disabled={disabled || loading || missingInputs.length > 0}
            title={t('smartCode.regenerate', { defaultValue: 'Suggest another code' })}
            aria-label={t('smartCode.regenerate', { defaultValue: 'Suggest another code' })}
            className="p-2 rounded-[var(--radius-button)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40"
          >
            {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
          </button>
        )}
        <button
          type="button"
          onClick={() => setShowProposals((prev) => !prev)}
          disabled={disabled || (!hasCandidates && missingInputs.length > 0)}
          aria-expanded={showProposals}
          className="px-2.5 py-2 rounded-[var(--radius-button)] border border-[var(--border-color)] text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40 whitespace-nowrap"
        >
          {t('smartCode.moreSuggestions', { defaultValue: 'More proposals' })}
        </button>
      </div>

{error && (
        <p id={\`\${inputId}-error\`} className="text-xs text-[var(--error-text)]">{error}</p>
      )}

{missingInputs.length > 0 && !error && (
        <p className="text-xs text-[var(--text-tertiary)]">
          {t('smartCode.missingFields', { fields: missingInputs.join(', '), defaultValue: 'Fill in first: {{fields}}' })}
        </p>
      )}

{status === 'error' && (
        <p className="text-xs text-[var(--text-tertiary)]">
          {t('smartCode.loadFailed', { defaultValue: 'Suggestions unavailable — the engine still allocates at save.' })}
        </p>
      )}

{/* Proposals strip — in-flow on purpose: modals with internal scroll would clip a popover. */}
      {showProposals && hasCandidates && (
        <div
          role="listbox"
          aria-label={t('smartCode.suggestions', { defaultValue: 'Code proposals' })}
          className="flex flex-wrap items-center gap-1.5 p-2 rounded-[var(--radius-card)] border border-[var(--border-color)] bg-[var(--bg-secondary)]"
        >
          {candidates.map((candidate, index) => {
            const selected = origin === 'auto' && index === activeIndex && candidate === value;
            return (
              <button
                key={candidate}
                type="button"
                role="option"
                aria-selected={selected}
                onClick={() => pick(candidate, index)}
                className={\`px-2 py-1 rounded font-mono text-xs transition-colors \${selected
                  ? 'bg-[var(--color-accent-600)] text-white'
                  : 'bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-color)] hover:bg-[var(--bg-hover)]'}\`}
              >
                {candidate}
              </button>
            );
          })}
          <button
            type="button"
            onClick={fetchMore}
            disabled={loading}
            className="px-2 py-1 rounded text-xs text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] disabled:opacity-40 inline-flex items-center gap-1"
          >
            {loading ? <Loader2 className="w-3 h-3 animate-spin" /> : <RefreshCw className="w-3 h-3" />}
            {t('smartCode.proposeOthers', { defaultValue: 'Propose others' })}
          </button>
        </div>
      )}
    </div>
  );
}
`;
}