@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/AppShellLiveSessionDrawer.tsx

@@ -0,0 +1,394 @@
+"use client";
+
+import Link from "next/link";
+import { useLayoutEffect, useMemo, useState } from "react";
+import { usePathname } from "next/navigation";
+import { Check, ChevronLeft, ChevronRight, Circle, LayoutDashboard, Timer } from "lucide-react";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import { useSmoothStopwatchDisplayMs } from "@/components/dashboard/useSmoothStopwatchMs";
+import { useKronoFocusLiveSeconds } from "@/components/dashboard/useKronoFocusLiveSeconds";
+import { dashboardStrings, type DashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { formatStopwatchMs, formatWallDurationMs, taskTitleForDisplay } from "@/lib/taskParsing";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+
+type LiveTask = {
+  id?: string;
+  name?: string;
+  isDone?: boolean;
+  manualTaskTimerPaused?: boolean;
+  activeSubtaskTimerId?: string;
+  durationMs?: number;
+  subtasks?: Array<{ id?: string; title?: string; done?: boolean; durationMs?: number }>;
+};
+
+type LiveShape = {
+  sessionId?: string;
+  sessionName?: string;
+  archived?: boolean;
+  endAt?: string | null;
+  isPaused?: boolean;
+  sessionDurationMinutes?: number;
+  activeTasks?: LiveTask[];
+  activeTask?: LiveTask | null;
+  language?: string;
+  kronoFocus?: {
+    mode: "work" | "break" | "longBreak";
+    status: "idle" | "running" | "paused";
+    timeLeftSeconds: number;
+    kronoFocusDeadlineAtMs?: number;
+    linkedTaskId?: string;
+    linkedTaskName?: string;
+  };
+};
+
+function kfPhaseLabel(dt: DashboardStrings, mode: "work" | "break" | "longBreak" | undefined): string {
+  if (mode === "break") {
+    return dt.breakMode;
+  }
+  if (mode === "longBreak") {
+    return dt.longBreakMode;
+  }
+  return dt.appShellLiveDrawerKronoFocusPhaseWork;
+}
+
+/** Même format que le bandeau KronoFocus du tableau de bord (temps restant). */
+function kfCountdownHMS(totalSec: number): string {
+  const s = Math.max(0, Math.floor(totalSec));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
+}
+
+function truncateDrawerLabel(s: string, max: number): string {
+  const t = s.trim();
+  if (t.length <= max) {
+    return t;
+  }
+  return `${t.slice(0, max - 1)}…`;
+}
+
+function runningTasksFromLive(live: LiveShape | undefined): LiveTask[] {
+  if (!live) {
+    return [];
+  }
+  const raw =
+    Array.isArray(live.activeTasks) && live.activeTasks.length > 0
+      ? live.activeTasks
+      : live.activeTask
+        ? [live.activeTask]
+        : [];
+  return raw.filter((t) => t && !t.isDone && !t.manualTaskTimerPaused);
+}
+
+function subtaskTitleFor(task: LiveTask, subId: string): string | undefined {
+  const list = task.subtasks;
+  if (!Array.isArray(list)) {
+    return undefined;
+  }
+  const row = list.find((s) => String(s.id) === subId);
+  const t = row?.title;
+  return typeof t === "string" && t.trim() !== "" ? t.trim() : undefined;
+}
+
+function DrawerSubtaskRow({
+  sub,
+  isTracking,
+}: Readonly<{
+  sub: { id?: string; title?: string; done?: boolean; durationMs?: number };
+  isTracking: boolean;
+}>) {
+  const label = typeof sub.title === "string" ? sub.title.trim() : "";
+  const baseMs = Math.max(0, Math.floor(Number(sub.durationMs) || 0));
+  const displayMs = useSmoothStopwatchDisplayMs(baseMs, isTracking);
+  const timeStr = formatStopwatchMs(displayMs);
+  const done = sub.done === true;
+
+  return (
+    <li className="flex min-w-0 items-baseline justify-between gap-1.5 py-0.5">
+      <span className="flex min-w-0 items-center gap-1">
+        {done ? (
+          <Check className="size-3 shrink-0 text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} aria-hidden />
+        ) : (
+          <Circle
+            className={`size-2.5 shrink-0 ${isTracking ? "text-emerald-600 dark:text-emerald-400" : "text-zinc-400 dark:text-zinc-500"}`}
+            strokeWidth={2}
+            aria-hidden
+          />
+        )}
+        <span
+          className={`min-w-0 truncate ${done ? "text-zinc-500 line-through dark:text-zinc-500" : "text-zinc-700 dark:text-zinc-300"}`}
+        >
+          {label || "—"}
+        </span>
+      </span>
+      <span
+        className={`shrink-0 font-mono tabular-nums tracking-tight ${isTracking ? "font-semibold text-emerald-700 dark:text-emerald-400" : "text-zinc-500 dark:text-zinc-400"}`}
+      >
+        {timeStr}
+      </span>
+    </li>
+  );
+}
+
+function DrawerRunningTaskRow({
+  task,
+  subtaskTrackingLabel,
+  dashboardT,
+}: Readonly<{
+  task: LiveTask;
+  /** Libellé du suivi actif sur une sous-tâche (ligne de secours). */
+  subtaskTrackingLabel: string;
+  dashboardT: DashboardStrings;
+}>) {
+  const title = taskTitleForDisplay(typeof task.name === "string" ? task.name : "");
+  const subId = String(task.activeSubtaskTimerId ?? "").trim();
+  const subTitle = subId ? subtaskTitleFor(task, subId) : undefined;
+  const baseMs = Math.max(0, Math.floor(Number(task.durationMs) || 0));
+  /** Pendant un suivi sous-tâche, le parent n’a pas de segment principal : afficher la valeur persistée. */
+  const smoothMain = subId === "";
+  const displayMs = useSmoothStopwatchDisplayMs(baseMs, smoothMain);
+  const timeStr = formatStopwatchMs(displayMs);
+  const subs = Array.isArray(task.subtasks) ? task.subtasks : [];
+  const hasSubList = subs.length > 0;
+
+  return (
+    <li className="min-w-0 text-xs leading-snug">
+      <div className="flex min-w-0 items-baseline justify-between gap-2">
+        <span className="min-w-0 truncate font-medium text-zinc-800 dark:text-zinc-200">{title}</span>
+        <span
+          className={`shrink-0 font-mono text-xs tabular-nums tracking-tight ${smoothMain ? "font-semibold text-emerald-700 dark:text-emerald-400" : "text-zinc-600 dark:text-zinc-400"}`}
+          aria-live={smoothMain ? "polite" : "off"}
+        >
+          {timeStr}
+        </span>
+      </div>
+      {hasSubList ? (
+        <ul
+          className="mt-1.5 space-y-0.5 border-l border-zinc-200 pl-2 dark:border-zinc-600"
+          aria-label={dashboardT.subtasksHeading}
+        >
+          {subs.map((st) => {
+            const sid = String(st.id ?? "").trim();
+            return (
+              <DrawerSubtaskRow key={sid || String(st.title)} sub={st} isTracking={subId !== "" && subId === sid} />
+            );
+          })}
+        </ul>
+      ) : subTitle ? (
+        <span className="mt-1 block truncate border-l border-zinc-200 pl-2 text-zinc-500 dark:border-zinc-600 dark:text-zinc-400">
+          {subtaskTrackingLabel}: {subTitle}
+        </span>
+      ) : null}
+    </li>
+  );
+}
+
+export function AppShellLiveSessionDrawer() {
+  const pathname = usePathname();
+  const { payload } = useKronosysPayload();
+  const [collapsed, setCollapsed] = useState(false);
+
+  const onDashboardHome = pathname === "/";
+  const live = payload?.current as LiveShape | undefined;
+  const lang: Lang = live?.language === "fr" ? "fr" : "en";
+  const dt = dashboardStrings(lang);
+
+  const liveSid = typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+  const hasLiveSession = liveSid !== "" && live?.archived !== true;
+  const show = !onDashboardHome && Boolean(payload) && hasLiveSession;
+
+  const sessionWallMinutes = live?.sessionDurationMinutes ?? 0;
+  const wallClockMsBase = useMemo(
+    () => Math.max(0, Math.floor(sessionWallMinutes * 60_000)),
+    [sessionWallMinutes]
+  );
+  const sessionEnded = typeof live?.endAt === "string" && live.endAt.trim() !== "";
+  const smoothSessionWall =
+    liveSid !== "" &&
+    live?.archived !== true &&
+    !sessionEnded &&
+    live?.isPaused !== true;
+  const sessionWallDisplayMs = useSmoothStopwatchDisplayMs(wallClockMsBase, smoothSessionWall);
+
+  const runningTasks = useMemo(() => runningTasksFromLive(live), [live]);
+  const kf = live?.kronoFocus;
+  const kfSecs = useKronoFocusLiveSeconds(
+    kf?.timeLeftSeconds ?? 0,
+    kf?.status ?? "idle",
+    kf?.kronoFocusDeadlineAtMs
+  );
+  const kfActive = kf?.status === "running" || kf?.status === "paused";
+  const kfLinkedName =
+    typeof kf?.linkedTaskName === "string" && kf.linkedTaskName.trim() !== "" ? kf.linkedTaskName.trim() : "";
+  const hasActivity =
+    runningTasks.length > 0 || live?.isPaused === true || kfActive;
+
+  /** Réserve la largeur du tiroir sur le flux du `body` pour ne pas masquer le contenu (guide, etc.). */
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const body = document.body;
+    if (!show) {
+      body.style.paddingRight = "";
+      return () => {
+        body.style.paddingRight = "";
+      };
+    }
+    body.style.paddingRight = collapsed ? "2.75rem" : "min(18rem, 100vw)";
+    return () => {
+      body.style.paddingRight = "";
+    };
+  }, [show, collapsed]);
+
+  if (!show) {
+    return null;
+  }
+
+  const dashHref = withDashboardSessionParam("/", liveSid);
+  const sessionLabel =
+    typeof live?.sessionName === "string" && live.sessionName.trim() !== ""
+      ? live.sessionName.trim()
+      : liveSid.slice(0, 8);
+
+  const wallLabel = formatWallDurationMs(sessionWallDisplayMs);
+
+  /** Largeur ancrée au bord droit du viewport (pas de marge fantôme) ; sur très petit écran on ne dépasse pas l’écran. */
+  const panelWidth = collapsed ? "w-11" : "w-72 max-w-[min(18rem,100vw)]";
+
+  return (
+    <aside
+      data-kronosys-live-drawer=""
+      className={`fixed right-0 bottom-0 z-40 flex min-h-0 flex-col overflow-hidden rounded-l-xl border-l border-zinc-200 bg-white/95 shadow-[-6px_0_20px_-4px_rgba(0,0,0,0.08)] backdrop-blur-sm transition-[width] duration-200 dark:border-zinc-700 dark:bg-zinc-900/95 dark:shadow-[-6px_0_24px_-4px_rgba(0,0,0,0.35)] ${panelWidth} top-36 sm:top-32`}
+      aria-label={dt.appShellLiveDrawerAria}
+    >
+      <div className="flex shrink-0 items-center gap-1 border-b border-zinc-200 px-1 py-1.5 dark:border-zinc-700">
+        <button
+          type="button"
+          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800/80"
+          onClick={() => setCollapsed((c) => !c)}
+          title={collapsed ? dt.appShellLiveDrawerExpand : dt.appShellLiveDrawerCollapse}
+          aria-expanded={collapsed === false}
+          aria-label={collapsed ? dt.appShellLiveDrawerExpand : dt.appShellLiveDrawerCollapse}
+        >
+          {collapsed ? (
+            <ChevronLeft size={18} strokeWidth={2} className="shrink-0" aria-hidden />
+          ) : (
+            <ChevronRight size={18} strokeWidth={2} className="shrink-0" aria-hidden />
+          )}
+        </button>
+        {!collapsed ? (
+          <span className="min-w-0 flex-1 truncate text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+            {dt.appShellLiveDrawerTitle}
+          </span>
+        ) : null}
+        {hasActivity ? (
+          <span
+            className="mr-1 inline-flex size-2 shrink-0 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.7)]"
+            aria-hidden
+          />
+        ) : null}
+      </div>
+
+      {collapsed && kfActive ? (
+        <div
+          className="flex min-h-0 flex-1 flex-col items-center gap-1 border-t border-zinc-200 px-0.5 py-2 dark:border-zinc-700"
+          aria-label={dt.kronoFocusTitle}
+        >
+          <Timer className="shrink-0 text-violet-600 dark:text-violet-400" size={16} strokeWidth={2} aria-hidden />
+          <span
+            className="w-full max-w-[2.75rem] break-all text-center font-mono text-[0.58rem] font-semibold leading-tight tracking-tight text-violet-800 tabular-nums dark:text-violet-200"
+            aria-live="polite"
+          >
+            {kfCountdownHMS(kfSecs)}
+          </span>
+        </div>
+      ) : null}
+
+      {!collapsed ? (
+        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-3 py-3 text-sm text-zinc-800 dark:text-zinc-100">
+          {kfActive ? (
+            <section
+              className="rounded-lg border border-violet-400/55 bg-violet-50/90 p-3 shadow-sm dark:border-violet-600/45 dark:bg-violet-950/35"
+              aria-label={dt.kronoFocusTitle}
+            >
+              <p className="text-[0.65rem] font-semibold uppercase tracking-wide text-violet-800 dark:text-violet-300">
+                {dt.kronoFocusTitle}
+              </p>
+              <p className="mt-0.5 text-xs font-medium text-zinc-800 dark:text-zinc-200">
+                {kfPhaseLabel(dt, kf?.mode)}
+              </p>
+              <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">
+                {kf?.status === "running"
+                  ? dt.appShellLiveDrawerKronoFocusRunning
+                  : dt.appShellLiveDrawerKronoFocusPaused}
+              </p>
+              <p
+                className="mt-1.5 font-mono text-lg font-semibold tracking-tight text-violet-950 tabular-nums dark:text-violet-100"
+                aria-live="polite"
+              >
+                {kfCountdownHMS(kfSecs)}
+              </p>
+              {kfLinkedName ? (
+                <p className="mt-1.5 min-w-0 text-[0.65rem] leading-snug text-zinc-600 dark:text-zinc-400">
+                  <span className="font-medium text-zinc-500 dark:text-zinc-500">{dt.kronoFocusLinkedTaskIntro}</span>{" "}
+                  <span className="break-words">{truncateDrawerLabel(kfLinkedName, 120)}</span>
+                </p>
+              ) : null}
+            </section>
+          ) : null}
+
+          <div className="min-w-0">
+            <p className="truncate font-medium text-zinc-900 dark:text-zinc-50">{sessionLabel}</p>
+            <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">
+              <span className="font-medium text-zinc-500 dark:text-zinc-500">{dt.appShellLiveDrawerWallClock}</span>
+              {" · "}
+              <span
+                className={`tabular-nums ${smoothSessionWall ? "font-mono font-semibold text-emerald-700 dark:text-emerald-400" : "text-zinc-600 dark:text-zinc-400"}`}
+                aria-live={smoothSessionWall ? "polite" : "off"}
+              >
+                {wallLabel}
+              </span>
+            </p>
+            {live?.isPaused === true ? (
+              <p className="mt-1 text-xs font-medium text-amber-700 dark:text-amber-300">{dt.appShellLiveDrawerSessionPaused}</p>
+            ) : null}
+          </div>
+
+          <div className="min-w-0">
+            <p className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+              {dt.appShellLiveDrawerTasksHeading}
+            </p>
+            {runningTasks.length === 0 ? (
+              <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-500">{dt.appShellLiveDrawerNoRunningTasks}</p>
+            ) : (
+              <ul className="mt-1.5 space-y-2">
+                {runningTasks.map((t) => {
+                  const id = typeof t.id === "string" ? t.id : "";
+                  const title = taskTitleForDisplay(typeof t.name === "string" ? t.name : "");
+                  return (
+                    <DrawerRunningTaskRow
+                      key={id || title}
+                      task={t}
+                      subtaskTrackingLabel={dt.appShellLiveDrawerSubtaskTracking}
+                      dashboardT={dt}
+                    />
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+
+          <Link
+            href={dashHref}
+            className="mt-auto inline-flex items-center justify-center gap-2 rounded-lg border border-violet-400/60 bg-violet-50 px-3 py-2 text-xs font-medium text-violet-950 hover:bg-violet-100/90 dark:border-violet-600/50 dark:bg-violet-950/40 dark:text-violet-100 dark:hover:bg-violet-900/50"
+          >
+            <LayoutDashboard size={16} strokeWidth={2} className="shrink-0" aria-hidden />
+            {dt.appShellLiveDrawerOpenDashboard}
+          </Link>
+        </div>
+      ) : null}
+    </aside>
+  );
+}

package/components/dashboard/AppShellRouteNav.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import Link from "next/link";
+import { BarChart3, BookOpen, FileText, LayoutDashboard, Settings } from "lucide-react";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+
+const iconLinkClass =
+  "inline-flex size-10 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 transition hover:border-zinc-400 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800/80 dark:text-zinc-200 dark:hover:border-zinc-500 dark:hover:bg-zinc-800";
+
+const iconActiveClass =
+  "inline-flex size-10 items-center justify-center rounded-lg border border-violet-400/70 bg-violet-100/90 text-violet-950 dark:border-violet-600/60 dark:bg-violet-950/40 dark:text-violet-100";
+
+export type AppShellRouteNavLabels = {
+  dashboard: string;
+  reporting: string;
+  settings: string;
+  /** Guide d’utilisation in-app. */
+  guide: string;
+  /** Libellé infobulle / `aria-label` pour l’icône « licences » (page licences uniquement). */
+  licenses?: string;
+};
+
+export type AppShellRouteNavCurrent = "dashboard" | "reporting" | "settings" | "licenses" | "guide";
+
+type Props = Readonly<{
+  current: AppShellRouteNavCurrent;
+  labels: AppShellRouteNavLabels;
+  /** `aria-label` du `<nav>` (recommandé : chaîne localisée côté appelant). */
+  navAriaLabel: string;
+  className?: string;
+  /** Identifiant de session du tableau de bord (`?session=`) à conserver sur les liens internes. */
+  dashboardSessionId?: string | null;
+}>;
+
+export function AppShellRouteNav({
+  current,
+  labels,
+  navAriaLabel,
+  className,
+  dashboardSessionId,
+}: Props) {
+  const wrapClass = className ?? "flex flex-wrap items-center gap-1.5";
+  const dash = (path: string) => withDashboardSessionParam(path, dashboardSessionId);
+
+  if (current === "dashboard") {
+    return (
+      <nav className={wrapClass} aria-label={navAriaLabel}>
+        <Link
+          href={dash("/guide")}
+          className={iconLinkClass}
+          title={labels.guide}
+          aria-label={labels.guide}
+        >
+          <BookOpen size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </Link>
+        <Link
+          href={dash("/reporting")}
+          className={iconLinkClass}
+          title={labels.reporting}
+          aria-label={labels.reporting}
+        >
+          <BarChart3 size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </Link>
+        <Link
+          href={dash("/settings")}
+          className={iconLinkClass}
+          title={labels.settings}
+          aria-label={labels.settings}
+        >
+          <Settings size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </Link>
+      </nav>
+    );
+  }
+
+  const licensesTitle = labels.licenses ?? "Licenses";
+
+  return (
+    <nav className={wrapClass} aria-label={navAriaLabel}>
+      <Link href={dash("/")} className={iconLinkClass} title={labels.dashboard} aria-label={labels.dashboard}>
+        <LayoutDashboard size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+      </Link>
+
+      {current === "reporting" ? (
+        <span className={iconActiveClass} title={labels.reporting} aria-label={labels.reporting} aria-current="page">
+          <BarChart3 size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </span>
+      ) : (
+        <Link
+          href={dash("/reporting")}
+          className={iconLinkClass}
+          title={labels.reporting}
+          aria-label={labels.reporting}
+        >
+          <BarChart3 size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </Link>
+      )}
+
+      {current === "settings" ? (
+        <span className={iconActiveClass} title={labels.settings} aria-label={labels.settings} aria-current="page">
+          <Settings size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </span>
+      ) : (
+        <Link
+          href={dash("/settings")}
+          className={iconLinkClass}
+          title={labels.settings}
+          aria-label={labels.settings}
+        >
+          <Settings size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </Link>
+      )}
+
+      {current === "guide" ? (
+        <span className={iconActiveClass} title={labels.guide} aria-label={labels.guide} aria-current="page">
+          <BookOpen size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </span>
+      ) : (
+        <Link href={dash("/guide")} className={iconLinkClass} title={labels.guide} aria-label={labels.guide}>
+          <BookOpen size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </Link>
+      )}
+
+      {current === "licenses" ? (
+        <span className={iconActiveClass} title={licensesTitle} aria-label={licensesTitle} aria-current="page">
+          <FileText size={20} strokeWidth={2} className="shrink-0" aria-hidden />
+        </span>
+      ) : null}
+    </nav>
+  );
+}

package/components/dashboard/AppVersionStamp.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useKronosysPackageVersion } from "@/components/KronosysPackageVersionProvider";
+
+/** `ariaLabelTemplate` doit contenir `{version}` (remplacé par la valeur lue côté serveur dans le layout). */
+export function AppVersionStamp({ ariaLabelTemplate }: { ariaLabelTemplate: string }) {
+  const version = useKronosysPackageVersion();
+  return (
+    <span
+      className="tabular-nums text-zinc-500 dark:text-zinc-500"
+      aria-label={ariaLabelTemplate.replace("{version}", version)}
+    >
+      v{version}
+    </span>
+  );
+}

package/components/dashboard/DashboardCollapsibleSection.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import { useId, useState, type ReactNode } from "react";
+
+/**
+ * Carte tableau de bord repliable (repliée par défaut si `defaultExpanded` omis).
+ */
+export function DashboardCollapsibleSection({
+  title,
+  headerTrailing,
+  children,
+  defaultExpanded = false,
+  sectionAriaLabel,
+}: {
+  title: ReactNode;
+  headerTrailing?: ReactNode;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+  /** Libellé de la région pour les lecteurs d’écran (ex. titre de carte déjà présent ailleurs). */
+  sectionAriaLabel?: string;
+}) {
+  const [open, setOpen] = useState(defaultExpanded);
+  const contentId = useId();
+  const headingId = useId();
+
+  return (
+    <section
+      className="rounded-xl border border-zinc-200 bg-zinc-50/90 p-4 sm:p-5 dark:border-zinc-800 dark:bg-zinc-900/50"
+      aria-label={sectionAriaLabel}
+    >
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          id={headingId}
+          aria-expanded={open ? "true" : "false"}
+          aria-controls={contentId}
+          onClick={() => setOpen((v) => !v)}
+          className="flex min-w-0 flex-1 items-center gap-2 rounded-md py-0.5 text-left transition-colors hover:bg-zinc-200/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:hover:bg-zinc-800/40 dark:focus-visible:ring-offset-zinc-900"
+        >
+          <ChevronRight
+            className={`size-4 shrink-0 text-zinc-500 transition-transform duration-200 ${open ? "rotate-90" : ""}`}
+            strokeWidth={2}
+            aria-hidden
+          />
+          <span className="min-w-0">{title}</span>
+        </button>
+        {headerTrailing ? <div className="flex shrink-0 items-center gap-1">{headerTrailing}</div> : null}
+      </div>
+      {open ? (
+        <div id={contentId} className="mt-3" aria-labelledby={headingId}>
+          {children}
+        </div>
+      ) : null}
+    </section>
+  );
+}