devmethod-ai 0.1.0 → 0.3.0

package/docs/missions/workflow-0.3-reviews/interface/review.json

@@ -0,0 +1,255 @@
+{
+  "format": 1,
+  "id": "REVIEW-UI-1",
+  "title": "Review de l’interface DevMethod",
+  "project": "DevMethod",
+  "mission": "workflow-0.3",
+  "tickets": [
+    {
+      "id": "PR-19",
+      "title": "Livraison du workflow et de la review",
+      "url": "https://github.com/montassarkhalloufi/DevMethod/pull/19"
+    }
+  ],
+  "date": "2026-09-13",
+  "scope": [
+    "Format de review, rendu sécurisé, navigation clavier/mobile et exports du candidat en cours."
+  ],
+  "exclusions": [
+    "Audit exhaustif WCAG avec lecteur d’écran",
+    "Exécution native du workflow conversationnel sur les trois hôtes"
+  ],
+  "revision": {
+    "commit": "8d7cd3584c891c04d983f85279e14a2070ab621d + working changes",
+    "dirty": [
+      "src/review-app.ts",
+      "src/review-model.ts",
+      "src/review-cli.ts",
+      "src/review.ts",
+      "src/review-ui.css",
+      "src/cli.ts"
+    ]
+  },
+  "technologies": [
+    {
+      "name": "TypeScript",
+      "version": "5.9.3",
+      "detectedFrom": "package-lock.json"
+    },
+    {
+      "name": "Node.js",
+      "version": "24.18.0 local / >=22 package",
+      "detectedFrom": "node --version / package.json"
+    }
+  ],
+  "sources": [
+    {
+      "id": "WAI-TABS",
+      "title": "Tabs Pattern",
+      "kind": "documentation",
+      "publisher": "W3C WAI",
+      "technology": "ARIA / DOM",
+      "version": "APG consulted 2026-09-13",
+      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/",
+      "consultedAt": "2026-09-13",
+      "access": "consulted",
+      "usage": "Clavier, focus et association des onglets/panneaux.",
+      "compatibility": "Guide de conception ; ne certifie pas une conformité WCAG complète.",
+      "provenance": "Page du site officiel W3C consultée pendant cette session."
+    }
+  ],
+  "checks": [
+    {
+      "id": "UI-KEYBOARD",
+      "title": "Clavier et retour mobile",
+      "domain": "Interface",
+      "kind": "manual",
+      "status": "passed",
+      "result": "Focus après correction et conservation des filtres observés.",
+      "reason": null,
+      "evidenceIds": [
+        "E-FOCUS-AFTER"
+      ],
+      "revision": "8d7cd3584c891c04d983f85279e14a2070ab621d + working changes",
+      "targets": [
+        "finding-selection",
+        "tabs"
+      ]
+    },
+    {
+      "id": "UI-EXPORT",
+      "title": "Contenu de l’export HTML",
+      "domain": "Interface",
+      "kind": "manual",
+      "status": "passed",
+      "result": "Résultats, état de sélection et empreinte CSP vérifiés dans le dernier export Chrome.",
+      "reason": null,
+      "evidenceIds": [
+        "E-EXPORT"
+      ],
+      "revision": "8d7cd3584c891c04d983f85279e14a2070ab621d + working changes",
+      "targets": [
+        "export"
+      ]
+    },
+    {
+      "id": "UI-REOPEN",
+      "title": "Réouverture file://",
+      "domain": "Interface",
+      "kind": "manual",
+      "status": "blocked",
+      "result": "Non vérifiée dans le navigateur automatisé.",
+      "reason": "La politique de l’outil interdit cette navigation ; aucun contournement effectué.",
+      "evidenceIds": [],
+      "revision": "8d7cd3584c891c04d983f85279e14a2070ab621d + working changes",
+      "targets": [
+        "export"
+      ]
+    },
+    {
+      "id": "SEC-REDACTION",
+      "title": "Masquage des formats courants",
+      "domain": "Confidentialité",
+      "kind": "automated",
+      "status": "passed",
+      "result": "Régression Bearer, variable préfixée et valeur entre guillemets réussie.",
+      "reason": null,
+      "evidenceIds": [
+        "E-REDACTION"
+      ],
+      "revision": "fa84208 + redaction working changes",
+      "targets": [
+        "review-redaction"
+      ]
+    }
+  ],
+  "findings": [
+    {
+      "id": "FOCUS-01",
+      "title": "La sélection d’un constat perdait le focus clavier",
+      "domain": "Accessibilité",
+      "severity": "moderate",
+      "severityReason": "La navigation clavier quittait le contenu attendu et rendait la poursuite du parcours difficile.",
+      "confidence": "confirmed",
+      "resolution": "resolved",
+      "location": {
+        "path": "src/review-app.ts",
+        "line": null,
+        "component": "Sélection du constat et gestion de hashchange"
+      },
+      "trigger": "Activer un constat avec Enter quand le fragment de lien doit changer.",
+      "expected": "Le focus arrive sur le titre du détail et permet de poursuivre au clavier.",
+      "observed": "Avant correction, le rendu immédiat était suivi d’un deuxième rendu lors de hashchange ; le titre focalisé était remplacé.",
+      "impact": "L’utilisateur au clavier perdait son point de navigation.",
+      "reproduction": [
+        "Activer R-01 avec Enter depuis la liste.",
+        "Inspecter le focus après le changement du fragment."
+      ],
+      "evidenceIds": [
+        "E-FOCUS-BEFORE"
+      ],
+      "correction": "Mettre à jour le fragment avec history.pushState, rendre une seule fois, puis focaliser le titre. Restaurer aussi le focus après un changement d’onglet.",
+      "tradeoffs": "Écouter popstate séparément pour les navigations historiques.",
+      "sourceIds": [
+        "WAI-TABS"
+      ],
+      "ticketIds": [
+        "PR-19"
+      ],
+      "verification": "Enter conserve le focus sur detail-title ; ArrowRight cible Correction ; le retour mobile restaure la liste filtrée.",
+      "resolutionEvidenceIds": [
+        "E-FOCUS-AFTER"
+      ],
+      "targets": [
+        "finding-selection",
+        "tabs"
+      ]
+    },
+    {
+      "id": "REDACT-01",
+      "title": "Certains formats courants d’identifiants étaient partiellement masqués",
+      "domain": "Confidentialité",
+      "severity": "major",
+      "severityReason": "Un rapport distribué pouvait conserver une valeur sensible dans un header standard ou un champ entre guillemets. Aucun identifiant réel n’a été exposé dans ce test.",
+      "confidence": "confirmed",
+      "resolution": "resolved",
+      "location": {
+        "path": "src/review-model.ts",
+        "line": null,
+        "component": "redactReviewText"
+      },
+      "trigger": "Importer une preuve contenant un header Bearer ou une valeur sensible avec espaces.",
+      "expected": "Masquer la valeur complète des formats courants pris en charge.",
+      "observed": "La première règle arrêtait le masquage au premier espace et ne reconnaissait pas certains préfixes de variables.",
+      "impact": "Risque de divulguer une valeur sensible dans une copie de rapport si la revue de confidentialité ne la détecte pas.",
+      "reproduction": [
+        "Utiliser exclusivement les cas synthétiques du test de régression du masquage."
+      ],
+      "evidenceIds": [
+        "E-REDACTION"
+      ],
+      "correction": "Reconnaître les schémas Bearer/Basic, les valeurs entre guillemets et les clés préfixées avant de produire la copie distribuée.",
+      "tradeoffs": "Le masquage reste heuristique ; la confidentialité des images et des formats inconnus exige une inspection avant partage.",
+      "sourceIds": [],
+      "ticketIds": [
+        "PR-19"
+      ],
+      "verification": "Les valeurs synthétiques de ces trois formats sont absentes de sanitizedReview ; le document original reste inchangé.",
+      "resolutionEvidenceIds": [
+        "E-REDACTION"
+      ],
+      "targets": [
+        "review-redaction"
+      ]
+    }
+  ],
+  "evidence": [
+    {
+      "id": "E-FOCUS-BEFORE",
+      "title": "Observation réelle avant correction",
+      "kind": "log",
+      "content": "Navigateur intégré, 2026-09-13 : activation clavier du constat R-01 puis lecture du focus. Résultat observé : document.activeElement.id vide après le second rendu déclenché par hashchange. Le lien direct devenait #finding=R-01. Observation manuelle de cette session, pas un journal de test CI.",
+      "url": null,
+      "image": null
+    },
+    {
+      "id": "E-FOCUS-AFTER",
+      "title": "Vérification réelle après correction",
+      "kind": "log",
+      "content": "Navigateur intégré, 2026-09-13 : Enter sur le constat => focus detail-title. ArrowRight sur Preuve => focus detail-content-correction. En mobile 390x844, retour => focus sur le constat choisi ; query=silencieux et confidence=confirmed conservés ; aucun débordement horizontal.",
+      "url": null,
+      "image": null
+    },
+    {
+      "id": "E-EXPORT",
+      "title": "Export Chrome inspecté sur disque",
+      "kind": "text",
+      "content": "Le dernier export Chrome possède review format 1, uiState.selected=R-01, filters.query=silencieux et section=correction. Les données ont été validées et l’empreinte SHA-256 du programme correspond à la CSP. Réouverture navigateur file:// non exécutée : politique de l’outil.",
+      "url": null,
+      "image": null
+    },
+    {
+      "id": "E-REDACTION",
+      "title": "Régression automatisée du masquage des identifiants",
+      "kind": "log",
+      "content": "Cas synthétiques : header Authorization avec Bearer, variable NPM_TOKEN et mot de passe entre guillemets contenant des espaces. Avant correction, la règle masquait seulement une partie de certaines valeurs. Le test dédié vérifie maintenant que les trois valeurs synthétiques sont totalement absentes de la source distribuée. Exécuté dans npm test : réussite.",
+      "url": null,
+      "image": null
+    }
+  ],
+  "limits": [
+    "La réouverture directe file:// est bloquée par la politique du navigateur de test ; elle n’est pas annoncée comme vérifiée.",
+    "Les tests de format ne prouvent ni la vérité des preuves fournies ni le comportement d’un agent de review.",
+    "Le mode d’ouverture final reste à choisir avant publication."
+  ],
+  "policy": {
+    "blockingSeverities": [
+      "critical",
+      "major",
+      "moderate"
+    ],
+    "requireAllChecks": true,
+    "rationale": "Corriger les défauts confirmés affectant le parcours et vérifier les contrôles de livraison avant publication."
+  },
+  "summary": "Le défaut de focus observé a été corrigé et revérifié. La validation de livraison reste incomplète, avec ses limites explicites."
+}

package/docs/missions/workflow-0.3.md

@@ -0,0 +1,17 @@
+# Workflow and review delivery — 0.3.0
+
+Owner: current implementation session. Authorized scope: improve explore, architecture, plan, mission ownership and review; deliver a functional browser review interface, package, PR, merge after checks, GitHub release and npm publication. Preserve approved design behavior, existing project conventions and user files. The user supplied a validated visual direction for the review screen; its example findings are not real evidence.
+
+This repository already uses single-file mission records, so retain that convention for this delivery. The user added the review scope before publication; PR #19 remains the same delivery. Existing checks for the earlier commit are historical, not validation of the added interface.
+
+## Executable scope and ownership
+
+- Workflow guidance and mission templates: implemented; evidence and migration details in [workflow validation](../WORKFLOW-0.3-VALIDATION.md) and [migration](../WORKFLOW-0.3.md).
+- Review record, derived report, browser interface and CLI: active. Acceptance: validated versioned records; consistent counters/filters; finding/check separation; evidence and official-source provenance; safe rendering; list/detail and direct links; export/reopen; explicit empty/invalid/partial/historical states; responsive keyboard use; distribution independent of the source checkout.
+- Delivery: [PR #19](https://github.com/montassarkhalloufi/DevMethod/pull/19). CI/package proofs belong in the PR and release record. The actual review results are owned by [review.json](workflow-0.3-reviews/interface/review.json), with a generated report; do not duplicate finding status here.
+
+Exclusions: whole-project dashboard, remote hosting, automatic discovery/installation/execution of third-party skills, automatic code review execution, arbitrary filesystem browsing, destructive migration, changes to the approved design workflow.
+
+Current architecture question: static self-contained HTML versus loopback server; recommended static report under the dependency-free offline contract, presented to the user before dependent implementation. Preserve their forthcoming choice/delegation in the relevant ADR.
+
+Next action: verify the final delegated offline-opening integration, merge and publish under current authorization. The user explicitly delegated the opening-mode choice on 2026-09-13; ADR 008 records the selected standalone HTML and optional OS opening command. Shared model, report/export, CLI presentation and browser UI are implemented. The file:// browser reopening limitation remains documented; do not bypass the browser tool policy or claim that check passed.

package/examples/clair-from-zero/AGENT-EVALUATION.md

@@ -0,0 +1,15 @@
+# Relevé de l’essai Clair
+
+Date : 2026-09-13. Dossier initial : kit fraîchement installé, aucune application. Source du produit : brief transmis par l’agent parent, dont la sélection détaillée des écrans est déléguée. Le relevé est une observation de cette exécution, pas une comparaison de méthodes.
+
+Les lectures initiales et décisions ont précédé le code. Exploration/cadrage/design/architecture/plan/readiness ont été groupés en une tranche standard CLAIR-1, puis implémentation, tests et revue locale. Le seul enregistrement courant est `docs/missions/clair.md`. Ce rapport est un instantané ; aucun document par étape. Aucun imagegen, réseau, dépendance ou sous-agent utilisé. Le kit est resté intact ; le profil adopté est dans la mission pour respecter cette contrainte.
+
+Fichiers lus : START_HERE.md, AGENTS.foundation.md, PROJECT_PROFILE.md, ENGINEERING_POLICY.template.md ; SKILL.md de project-foundation, design-to-code, scoped-delivery et decision-architecture ; références work-sizing, operating-commands, mission-context, visual-creation, ux-contract, verification-and-cost ; modèle scoped-delivery/assets/MISSION.md ; kit-manifest.json. CONTRIBUTING.md et AGENTS.md étaient absents. Les autres modules ont été découverts par inventaire, sans être chargés.
+
+Fichiers créés : app/index.html, app/styles.css, app/app.mjs, app/domain.mjs, app/storage.mjs, tests/domain.test.mjs, docs/missions/clair.md et ce rapport. Livré : page française responsive ivoire/encre/rouille, ajout titre/note, validation, toggle, trois filtres, suppression/annulation, localStorage versionné et validé, alerte d’échec persistante/réessai, réinitialisation explicite après erreur de lecture, départ vide et ajout de trois tâches de démonstration marquées fictives.
+
+Exécuté : `node --test tests/*.test.mjs` — 6 tests passés, 0 échec ; `node --check app/app.mjs` — passé. Vérification des hashes SHA-256 des fichiers du manifeste installé — aucune différence. Revue locale du code et des limites ; aucune installation ni ressource distante.
+
+Limites : cet agent n’a pas lancé de navigateur, capturé d’écran, testé l’interaction réelle ou vérifié le rendu mobile. Le parent en est chargé indépendamment. Les vérifications DOM/CSS effectuées sont des inspections du source. Aucune preuve d’intégration, de déploiement ou d’usage production. L’application conserve les priorités jusqu’à suppression ; aucune remise à zéro quotidienne ni synchronisation entre onglets. L’annulation porte sur la dernière suppression et disparaît après rechargement. La démo peut être ajoutée plusieurs fois volontairement.
+
+Lancer : `python3 -m http.server 8766 --bind 127.0.0.1 --directory app`. Prochaine commande méthode : `$project-foundation verify CLAIR-1`.

package/examples/clair-from-zero/MISSION.md

@@ -0,0 +1,41 @@
+# Clair — mission canonique
+
+2026-09-13, livraison standard, propriétaire : agent de réalisation.
+
+## Sources et profil adopté
+Le brief transmis par le parent fait autorité : application française locale, HTML/CSS/JS sans dépendances ni comptes, direction ivoire/encre/rouille et sérif ; choix détaillés délégués. Les fichiers du kit restent intacts, notamment PROJECT_PROFILE.md : ce paragraphe porte le profil adopté conformément à la contrainte de préservation. CONTRIBUTING.md et AGENTS.md sont absents. ENGINEERING_POLICY.template.md est un modèle ; le JavaScript demandé prend priorité sur sa recommandation TypeScript.
+
+Stack : modules JavaScript natifs, CSS, HTML ; Node pour les tests purs ; Python pour le serveur local. Commandes : `node --test tests/*.test.mjs` ; `python3 -m http.server 8766 --bind 127.0.0.1 --directory app`. Aucun déploiement, réseau, installation ou génération d’images autorisé. Données : titres, notes et état d’achèvement stockés sous clair.tasks.v1 dans localStorage, conservés jusqu’à suppression ou effacement du navigateur ; aucune synchronisation ni télémétrie.
+
+## Framing, design et architecture — décisions avant code
+Valeur : choisir et suivre les priorités du jour sans configuration. Direction existante explicite, choix d’écran délégué ; aucune image ou maquette séparée nécessaire. Prototype HTML final choisi comme support. Grand titre éditorial, date, compteur, liste principale et formulaire latéral ; mobile en une colonne avec formulaire avant la liste. Palette #f7f3eb, #292923, #97472f ; Georgia système et sans-sérif système. États : vide, filtres vides, tâches actives/terminées, validation, suppression/annulation, stockage indisponible/corrompu.
+
+Choix structurel dans le cadre délégué : module pur pour validation/transitions/schéma, adaptateur localStorage, contrôleur DOM. Une page monolithique serait plus courte mais rendrait les invariants difficiles à tester isolément. Aucun framework utile au périmètre. Les titres/notes ne deviennent jamais du HTML. Échec d’écriture : garder la session en mémoire et afficher une alerte persistante avec réessai ; erreur de lecture : ne pas écraser les données sans action explicite de réinitialisation. Suppression réversible de la dernière tâche, sans expiration temporelle. Pas de réinitialisation automatique à minuit.
+
+## Plan et readiness (avant implémentation)
+Une tranche CLAIR-1 couvre AC1 ajout titre/note et validation ; AC2 toggle/filtres ; AC3 suppression/annulation ; AC4 persistance/schema/erreurs ; AC5 vide + démo explicitement fictive ; AC6 responsive/clavier/focus. Contrats prêts, dépendances résolues. Tests prévus sur invariants et stockage ; vérification navigateur déléguée au parent et non revendiquée par cet agent. Limites de titre 160 caractères et note 500, données versionnées et validées à la lecture. Fin de périmètre après réalisation locale et tests ; pas de fonctionnalités hors brief.
+
+## Evidence et état
+État courant après vérification parent : CLAIR-1 réalisé et vérifié dans Chrome desktop/mobile. Les étapes explorations/cadrage/design/architecture/plan/readiness ont été groupées, pas de document par étape.
+
+## Résultat local et evidence — 2026-09-13
+CLAIR-1 réalisé dans `app/`. État lors du retour de l’agent : implémentation locale terminée, acceptation navigateur alors en attente. Aucun commit, PR ou déploiement.
+
+| Critère | Preuve exécutée | Résultat |
+|---|---|---|
+| AC1 | `node --test tests/*.test.mjs`, cas validation | passé : blanc, trim, bornes titre/note |
+| AC2 | même commande, toggle/filtres | passé : immutabilité et ordre |
+| AC3 | même commande, suppression/annulation | passé : position, ajout intermédiaire, absence et doublon |
+| AC4 | même commande, schéma/adapter | passé : round-trip Unicode, JSON invalide, version, types, IDs dupliqués, exceptions lecture/écriture |
+| AC5 | revue du contrôleur et HTML | démarrage vide sans données ; bouton de démo explicitement fictif, notes marquées ; navigateur non exécuté |
+| AC6 | revue CSS/DOM | labels, focus visible, annonces, règles 700/1000 px et réduction de mouvement présentes ; comportement/rendu navigateur non vérifiés |
+
+Commande `node --check app/app.mjs` passée. Six tests, zéro échec. Revue locale de ses propres fichiers : contenu utilisateur inséré via textContent, stockage traité au bord, aucune ressource distante, aucun secret, actions couvertes dans le contrôleur. Cette inspection ne démontre pas l'accessibilité complète. Vérification SHA-256 des fichiers installés contre kit-manifest.json : aucun changement. Aucun test navigateur réalisé par cet agent, aucune comparaison pixel ou audit automatique revendiqué.
+
+Prochaine action exacte : parent, exécuter la vérification desktop/mobile et des parcours de CLAIR-1 sur le serveur local. Commande méthode recommandée : `$project-foundation verify CLAIR-1`.
+
+## Vérification indépendante du parent
+
+Interactions Chrome vérifiées : vide, validation, ajout/note, toggle/filtres, rechargement, suppression/annulation, démo, saisie clavier, absence de débordement à 390px, échec de stockage avec conservation en mémoire et alerte. Captures desktop/mobile inspectées. Les animations sont désactivées pour les captures afin de ne pas photographier une barre de progression en transition. Aucun audit complet d’accessibilité.
+
+Constat méthode : l’agent avait conservé une ancienne ligne « implémentation en cours » avant son résultat final. Le parent l’a réconciliée ici ; ce besoin de correction empêche de présenter la tenue du statut comme entièrement autonome. Le rapport agent est un instantané historique. Prochaine action : aucune implémentation restante dans ce périmètre ; intégration et vidéo suivies dans le dépôt DevMethod.

package/examples/clair-from-zero/README.md

@@ -0,0 +1,24 @@
+# Clair — an actual from-zero DevMethod pilot
+
+Clair is a fictional French personal-priorities app created by a separate Codex subagent in a new directory containing only the installed DevMethod kit. The parent provided a bounded brief and delegated the detailed editorial visual choices. No application code or previous implementation was supplied. This is a same-host subagent test, not a fresh standalone Codex/Claude session or a comparative benchmark.
+
+## Run
+
+From this directory:
+
+```sh
+python3 -m http.server 8766 --bind 127.0.0.1 --directory app
+node --test tests/*.test.mjs
+```
+
+Open http://127.0.0.1:8766. Stop the server with Ctrl-C. No npm dependencies, backend, external fonts, account or provider key. Browser storage uses `clair.tasks.v1`. The application starts empty; its demo button explicitly adds fictional tasks. Delete/undo covers the last deletion and does not survive reload. There is no cross-tab synchronization or daily reset.
+
+## What was observed
+
+The implementing agent grouped framing, design, architecture, planning and readiness in one mission. It created five app files, a test file, one mission and the requested evaluation snapshot; all installed kit files retained their hashes. Six logic/storage tests passed. The parent then exercised the actual Chrome UI: blank validation, add/note, completion/filters, persistence, delete/undo, demo, keyboard submission, 390px overflow and write-failure recovery.
+
+[Agent report](AGENT-EVALUATION.md) is a historical observation. [Mission](MISSION.md) includes parent checks and disclosed limitations. A stale status sentence left by the implementing agent was reconciled by the parent; this was not perfect autonomous bookkeeping. The design was delegated, so this test does not repeat the user-choice/image steps of the separate [Lisière pilot](../visual-pilot/README.md).
+
+Browser check from the DevMethod repository root: `node examples/clair-from-zero/browser-check.cjs`, with Playwright and Chrome available. Set PLAYWRIGHT_MODULE to an installed Playwright module path when needed. It writes captures under docs/media/from-zero/captures and uses a temporary browser profile.
+
+[French video and transcript](../../docs/media/from-zero/README.md) show this app's actual interactions and separately identify the Lisière visual pilot. Neither demonstration establishes general code quality, production readiness, lower costs or superiority over BMAD.

package/examples/clair-from-zero/app/app.mjs

@@ -0,0 +1,69 @@
+import {createTask,toggleTask,removeTask,restoreTask,filterTasks} from './domain.mjs';
+import {readTasks,writeTasks} from './storage.mjs';
+const $ = selector => document.querySelector(selector);
+let tasks = [], filter = 'all', removed = null, readBlocked = false;
+const announce = message => { $('#announcement').textContent = message; };
+function showStorageError(message, blocked = false) {
+  $('#storage-alert').hidden = false; $('#storage-message').textContent = message;
+  $('#retry-storage').hidden = blocked; $('#reset-storage').hidden = !blocked;
+}
+try { tasks = readTasks(window.localStorage); }
+catch { readBlocked = true; showStorageError('Les données enregistrées ne peuvent pas être lues. Vos changements restent uniquement en mémoire. Pour protéger les données existantes, la sauvegarde est suspendue. Vous pouvez les effacer explicitement pour repartir avec cette liste.', true); }
+function save() {
+  if (readBlocked) return;
+  try { writeTasks(window.localStorage, tasks); $('#storage-alert').hidden = true; }
+  catch { showStorageError('La sauvegarde a échoué. Vos changements restent uniquement en mémoire et peuvent être perdus à la fermeture ou au rechargement. Libérez de l’espace ou autorisez le stockage, puis réessayez.'); }
+}
+function commit(message) { save(); render(); announce(message); }
+function setFilter(value) { filter = value; render(); }
+function render() {
+  const done = tasks.filter(task => task.done).length;
+  $('#total-count').textContent = String(tasks.length).padStart(2,'0');
+  $('#all-count').textContent = tasks.length; $('#active-count').textContent = tasks.length-done; $('#done-count').textContent = done;
+  $('#progress-label').textContent = tasks.length ? `${done} sur ${tasks.length} terminée${tasks.length > 1 ? 's' : ''}` : 'Un nouveau départ';
+  $('#progress-bar').style.width = `${tasks.length ? done/tasks.length*100 : 0}%`;
+  document.querySelectorAll('[data-filter]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.filter === filter)));
+  const visible = filterTasks(tasks, filter), list = $('#task-list'); list.replaceChildren();
+  for (const task of visible) {
+    const row = document.createElement('li'); row.className = `task${task.done?' done':''}`; row.dataset.id = task.id;
+    const check = document.createElement('button'); check.type = 'button'; check.className = 'task-check'; check.setAttribute('role','checkbox'); check.setAttribute('aria-checked', String(task.done)); check.setAttribute('aria-label', `${task.done?'Marquer à faire':'Terminer'} : ${task.title}`); check.textContent = task.done ? '✓' : '';
+    check.addEventListener('click', () => {
+      const position = visible.findIndex(item => item.id === task.id);
+      tasks = toggleTask(tasks, task.id); commit(task.done ? 'Priorité marquée à faire.' : 'Priorité terminée.');
+      const newRows = [...list.children], same = newRows.find(item => item.dataset.id === task.id);
+      (same?.querySelector('.task-check') || newRows[Math.min(position,newRows.length-1)]?.querySelector('.task-check') || $('#empty-add')).focus();
+    });
+    const content = document.createElement('div'), title = document.createElement('h3'); title.textContent = task.title; content.append(title);
+    if (task.note) { const note = document.createElement('p'); note.textContent = task.note; content.append(note); }
+    if (task.done) { const state = document.createElement('span'); state.className = 'task-state'; state.textContent = 'TERMINÉE'; content.append(state); }
+    const del = document.createElement('button'); del.type = 'button'; del.className = 'task-delete'; del.setAttribute('aria-label', `Supprimer : ${task.title}`);
+    del.innerHTML = '<svg viewBox="0 0 20 22" aria-hidden="true"><path d="M3 6h14M7 6V3h6v3M5 6l1 14h8l1-14M8 9v8M12 9v8"/></svg>';
+    del.addEventListener('click', () => { const result = removeTask(tasks, task.id); tasks = result.tasks; removed = result.removed; commit('Priorité supprimée. Vous pouvez annuler.'); $('#undo-button').focus(); });
+    row.append(check,content,del); list.append(row);
+  }
+  $('#empty-state').hidden = visible.length > 0;
+  if (!tasks.length) { $('#empty-title').textContent = 'Tout commence par une chose.'; $('#empty-copy').textContent = 'Qu’aimeriez-vous faire avancer aujourd’hui ? Ajoutez votre première priorité, même petite.'; $('#empty-add').textContent = 'Écrire ma première priorité ↗'; }
+  else if (filter === 'done') { $('#empty-title').textContent = 'Chaque chose en son temps.'; $('#empty-copy').textContent = 'Vos priorités terminées apparaîtront ici. Un petit pas suffit pour commencer.'; $('#empty-add').textContent = 'Voir les priorités à faire ↗'; }
+  else { $('#empty-title').textContent = 'De la place pour souffler.'; $('#empty-copy').textContent = 'Toutes vos priorités sont terminées. Savourez ce que vous avez fait aujourd’hui.'; $('#empty-add').textContent = 'Ajouter une nouvelle priorité ↗'; }
+  $('#undo-bar').hidden = !removed;
+}
+$('#task-form').addEventListener('submit', event => {
+  event.preventDefault();
+  try {
+    const task = createTask($('#task-title').value, $('#task-note').value, crypto.randomUUID());
+    tasks = [...tasks,task]; filter = 'all'; $('#task-form').reset(); $('#form-error').hidden = true; $('#task-title').removeAttribute('aria-invalid'); commit('Priorité ajoutée.'); $('#task-title').focus();
+  } catch (error) { $('#form-error').textContent = error.message; $('#form-error').hidden = false; $('#task-title').setAttribute('aria-invalid','true'); $('#task-title').focus(); }
+});
+$('#task-title').addEventListener('input', () => { if ($('#task-title').value.trim()) { $('#form-error').hidden = true; $('#task-title').removeAttribute('aria-invalid'); } });
+document.querySelectorAll('[data-filter]').forEach(button => button.addEventListener('click', () => { setFilter(button.dataset.filter); announce(`${filterTasks(tasks,filter).length} priorité(s) affichée(s).`); }));
+$('#empty-add').addEventListener('click', () => { if (tasks.length && filter === 'done') { setFilter('active'); $('[data-filter="active"]').focus(); } else { $('#task-title').focus(); $('#task-title').scrollIntoView({block:'center',behavior:'auto'}); } });
+$('#undo-button').addEventListener('click', () => { const id = removed?.task.id; tasks = restoreTask(tasks,removed); removed = null; filter = 'all'; commit('Suppression annulée.'); [...$('#task-list').children].find(row => row.dataset.id === id)?.querySelector('.task-check').focus(); });
+$('#dismiss-undo').addEventListener('click', () => { removed = null; render(); $('#priorities').focus(); });
+$('#demo-button').addEventListener('click', () => {
+  const examples = [['Lire quelques pages','Démo fictive · Un chapitre, un thé et le téléphone de côté.'],['Faire une promenade','Démo fictive · Vingt minutes sans itinéraire.'],['Écrire à une personne chère','Démo fictive · Juste quelques mots pour prendre des nouvelles.']];
+  tasks = [...tasks,...examples.map(([title,note]) => createTask(title,note,crypto.randomUUID()))]; filter = 'all'; commit('Trois priorités fictives ajoutées à la liste.');
+});
+$('#retry-storage').addEventListener('click', () => { save(); if ($('#storage-alert').hidden) { announce('Liste sauvegardée dans ce navigateur.'); $('#task-title').focus(); } });
+$('#reset-storage').addEventListener('click', () => { readBlocked = false; save(); if ($('#storage-alert').hidden) { announce('Les anciennes données ont été remplacées par la liste actuelle.'); $('#task-title').focus(); } });
+$('#today').textContent = new Intl.DateTimeFormat('fr-FR',{weekday:'long',day:'numeric',month:'long'}).format(new Date()).toLocaleUpperCase('fr-FR');
+render();

package/examples/clair-from-zero/app/domain.mjs

@@ -0,0 +1,30 @@
+export const TITLE_LIMIT = 160;
+export const NOTE_LIMIT = 500;
+export function createTask(title, note, id) {
+  if (typeof title !== 'string' || !title.trim()) throw new Error('Donnez un titre à votre priorité.');
+  if (title.trim().length > TITLE_LIMIT) throw new Error('Le titre est limité à 160 caractères.');
+  if (typeof note !== 'string' || note.trim().length > NOTE_LIMIT) throw new Error('La note est limitée à 500 caractères.');
+  return { id, title: title.trim(), note: note.trim(), done: false };
+}
+export function toggleTask(tasks, id) { return tasks.map(task => task.id === id ? {...task, done: !task.done} : task); }
+export function removeTask(tasks, id) {
+  const index = tasks.findIndex(task => task.id === id);
+  return { tasks: tasks.filter(task => task.id !== id), removed: index < 0 ? null : { task: tasks[index], index } };
+}
+export function restoreTask(tasks, removed) {
+  if (!removed || tasks.some(task => task.id === removed.task.id)) return tasks;
+  const result = [...tasks]; result.splice(Math.min(removed.index, result.length), 0, removed.task); return result;
+}
+export function filterTasks(tasks, filter) { return tasks.filter(task => filter === 'done' ? task.done : filter === 'active' ? !task.done : true); }
+export function decodeTasks(raw) {
+  if (raw === null) return [];
+  const data = JSON.parse(raw);
+  if (!data || data.version !== 1 || !Array.isArray(data.tasks)) throw new Error('Format de données inconnu.');
+  const ids = new Set();
+  for (const task of data.tasks) {
+    if (!task || typeof task.id !== 'string' || !task.id || ids.has(task.id) || typeof task.title !== 'string' || !task.title.trim() || task.title.length > TITLE_LIMIT || typeof task.note !== 'string' || task.note.length > NOTE_LIMIT || typeof task.done !== 'boolean') throw new Error('Données enregistrées illisibles.');
+    ids.add(task.id);
+  }
+  return data.tasks.map(({id, title, note, done}) => ({id, title, note, done}));
+}
+export function encodeTasks(tasks) { return JSON.stringify({version: 1, tasks}); }

package/examples/clair-from-zero/app/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="fr">
+<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#f7f3eb"><title>Clair — Place à l’essentiel</title><link rel="stylesheet" href="styles.css"><script type="module" src="app.mjs"></script></head>
+<body>
+<a class="skip" href="#priorities">Aller aux priorités</a>
+<div class="page">
+<header class="masthead"><a class="brand" href="./" aria-label="Clair, accueil">clair<span class="brand-dot">✳</span></a><span class="masthead-note">UN PEU MOINS. UN PEU MIEUX.</span><span class="edition">VOTRE ESPACE PERSONNEL</span></header>
+<main>
+<section class="hero" aria-labelledby="hero-title"><div><p class="eyebrow" id="today">LE FIL DU JOUR</p><h1 id="hero-title">Faire place<br>à <em>l’essentiel.</em></h1><p class="intro">Une journée, quelques priorités.<br>Gardez de la place pour ce qui compte vraiment.</p></div><div class="hero-aside" aria-hidden="true"><div class="sun"><i></i><i></i><i></i><i></i></div><p>Moins de bruit.<br>Plus de présence.</p><span>À VOTRE RYTHME</span></div></section>
+<div id="storage-alert" class="storage-alert" role="alert" hidden><p id="storage-message"></p><button type="button" id="retry-storage">Réessayer la sauvegarde</button><button type="button" id="reset-storage" hidden>Effacer les données illisibles</button></div>
+<div class="workspace">
+<section class="priorities" id="priorities" aria-labelledby="list-heading" tabindex="-1"><div class="section-heading"><h2 id="list-heading">Vos priorités</h2><span class="count" id="total-count">00</span></div><div class="list-toolbar"><div class="filters" role="group" aria-label="Filtrer les priorités"><button type="button" data-filter="all" aria-pressed="true">Toutes <span id="all-count">0</span></button><button type="button" data-filter="active" aria-pressed="false">À faire <span id="active-count">0</span></button><button type="button" data-filter="done" aria-pressed="false">Terminées <span id="done-count">0</span></button></div><span id="progress-label" class="progress-label">Un nouveau départ</span></div><div class="progress-track" aria-hidden="true"><div id="progress-bar"></div></div><ul id="task-list" aria-label="Liste des priorités"></ul><div id="empty-state" class="empty-state"><div class="empty-mark" aria-hidden="true">✳</div><h3 id="empty-title">Tout commence par une chose.</h3><p id="empty-copy">Qu’aimeriez-vous faire avancer aujourd’hui ?<br>Ajoutez votre première priorité, même petite.</p><button type="button" id="empty-add" class="text-button">Écrire ma première priorité <span aria-hidden="true">↗</span></button></div><div class="list-foot"><span id="list-note">Une petite liste. Une intention claire.</span><button type="button" id="demo-button">Charger une démo fictive <span aria-hidden="true">↗</span></button></div></section>
+<aside class="composer" aria-labelledby="form-heading"><p class="eyebrow">UNE CHOSE À LA FOIS</p><h2 id="form-heading">Qu’est-ce qui<br>compte <em>aujourd’hui ?</em></h2><form id="task-form" novalidate><label for="task-title">Votre priorité <span aria-hidden="true">*</span></label><input id="task-title" name="title" type="text" maxlength="160" placeholder="Par exemple, prendre le temps de lire" required aria-describedby="form-error" autocomplete="off"><label for="task-note">Une note <span class="optional">— facultatif</span></label><textarea id="task-note" name="note" maxlength="500" rows="3" placeholder="Un détail, une idée, un premier pas…"></textarea><p id="form-error" class="form-error" role="alert" hidden></p><button class="add-button" type="submit">Ajouter une priorité <span aria-hidden="true">+</span></button></form><p class="form-tip">Pas besoin de tout prévoir.<br>Commencez par ce qui vous tient à cœur.</p></aside>
+</div>
+</main>
+<footer><span class="footer-brand">clair</span><p>Vos priorités restent dans ce navigateur.<br>Aucun compte. Aucune synchronisation.</p><span class="footer-note">CHAQUE PETIT PAS COMPTE.</span></footer>
+</div>
+<div id="undo-bar" class="undo-bar" role="status" hidden><span>Priorité supprimée.</span><button type="button" id="undo-button">Annuler</button><button type="button" id="dismiss-undo" aria-label="Fermer la notification de suppression">×</button></div><div class="sr-only" id="announcement" role="status" aria-live="polite"></div>
+<noscript><p class="noscript">Activez JavaScript pour utiliser Clair. Aucune donnée n’est envoyée à un serveur.</p></noscript>
+</body></html>

package/examples/clair-from-zero/app/storage.mjs

@@ -0,0 +1,4 @@
+import { decodeTasks, encodeTasks } from './domain.mjs';
+export const STORAGE_KEY = 'clair.tasks.v1';
+export function readTasks(storage) { return decodeTasks(storage.getItem(STORAGE_KEY)); }
+export function writeTasks(storage, tasks) { storage.setItem(STORAGE_KEY, encodeTasks(tasks)); }