@nomosui/react 0.6.0 → 0.8.0

package/dist/types/components/composer/composer.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Le composeur d'un message (ADR 0032) : une zone de saisie qui grandit, `Entrée` envoie,
+ * `Maj+Entrée` passe à la ligne, et la garde IME protège les compositions en cours. Le
+ * cœur est **piloté par props** (valeur + `onChange`), comme un contrôle de formulaire : il
+ * ne possède aucun état (ADR 0015). Les libellés viennent de l'app.
+ */
+export type ComposerProps = {
+    /** La valeur courante, possédée par l'app. */
+    value: string;
+    /** Appelé à chaque frappe avec la nouvelle valeur. */
+    onChange?: (value: string) => void;
+    /** Appelé sur `Entrée` ou au clic sur l'action d'envoi. */
+    onSubmit?: () => void;
+    /** Appelé au clic sur l'action d'arrêt, quand une réponse est en cours. */
+    onStop?: () => void;
+    /** Une réponse est en cours : l'action devient « arrêter ». */
+    busy?: boolean;
+    /** Le texte indicatif de la zone de saisie. */
+    placeholder: string;
+    /** Le libellé accessible de l'action d'envoi. */
+    sendLabel: string;
+    /** Le libellé accessible de l'action d'arrêt. */
+    stopLabel: string;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+export declare function Composer({ value, onChange, onSubmit, onStop, busy, placeholder, sendLabel, stopLabel, className, }: ComposerProps): import("react").JSX.Element;

package/dist/types/components/composer/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du composeur (ADR 0005, 0032). Contrôlé par props, sans état : l'app
+ * possède la valeur, le cœur la mise en forme et la garde clavier.
+ */
+export declare const composerManifest: ComponentManifest;

package/dist/types/components/conversation/conversation.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+/**
+ * La fenêtre d'une conversation (ADR 0032) : une région `log` vivante, ancrée en bas.
+ * Le cœur possède le défilement (rester au bas quand un message arrive, revenir au bas à
+ * la demande) ; l'app fournit le contenu et l'état vide. Aucune hauteur propre : l'app la
+ * pose par `className`.
+ */
+export type ConversationProps = {
+    /** Les messages, fournis par l'app. */
+    children?: ReactNode;
+    /** Ce qu'on montre tant qu'il n'y a rien, injecté par l'app. */
+    empty?: ReactNode;
+    /** Le nom accessible de la région de conversation. */
+    label?: string;
+    /** Le libellé du bouton « revenir en bas » ; absent, le bouton n'apparaît pas. */
+    scrollToBottomLabel?: string;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+export declare function Conversation({ children, empty, label, scrollToBottomLabel, className, }: ConversationProps): import("react").JSX.Element;

package/dist/types/components/conversation/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste de la fenêtre de conversation (ADR 0005, 0032). Le cœur possède le
+ * défilement et la région `log` ; l'app le contenu, l'état vide et la hauteur.
+ */
+export declare const conversationManifest: ComponentManifest;

package/dist/types/components/field/field.d.ts

@@ -1,8 +1,24 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+/**
+ * Les attributs que `Field` pose sur son contrôle : `aria-describedby` vers l'aide ou
+ * l'erreur, `aria-invalid` en erreur. Le contrôle les consomme : la valeur du `Field`
+ * l'emporte sur celle de l'appelant pour `aria-invalid`, et l'appelant garde son propre
+ * `aria-describedby`, tenu à côté de celui du `Field`.
+ */
+export type FieldControlAria = {
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+};
+/**
+ * Ce que le contrôle d'un `Field` reçoit : vide hors d'un `Field`, donc un contrôle
+ * reste testable seul, sans provider (ADR 0015).
+ */
+export declare function useFieldControl(): FieldControlAria;
 /**
  * L'emplacement d'un champ : le libellé, le contrôle (fourni par l'appelant) et, dessous,
  * soit le message d'erreur, soit l'aide. **Aucun moteur** : l'app décide de l'état, de la
- * validation et du texte (ADR 0015). Le cœur ne fait que disposer.
+ * validation et du texte (ADR 0015). Le cœur ne fait que disposer — mais il porte
+ * l'association ARIA entre le contrôle et son message.
  */
 export type FieldProps = {
     label?: ReactNode;

package/dist/types/components/input/input.d.ts

@@ -2,5 +2,6 @@ import type { ComponentProps } from 'react';
 /**
  * Le champ de saisie du cœur : un `<input>` stylé par les tokens. Il n'impose aucune
  * validation ni aucun état d'app — l'appelant passe ses props HTML et ses classes.
+ * Dans un `Field`, il exprime l'erreur (`aria-invalid`, `aria-describedby`).
  */
-export declare function Input({ className, type, ...props }: ComponentProps<'input'>): import("react").JSX.Element;
+export declare function Input({ className, type, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }: ComponentProps<'input'>): import("react").JSX.Element;

package/dist/types/components/message/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste du message (ADR 0005, 0032). Le cœur possède le placement et le ton ;
+ * le contenu arrive en **parts**, et `renderPart` laisse l'app décider du rendu.
+ */
+export declare const messageManifest: ComponentManifest;

package/dist/types/components/message/message.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from 'react';
+import type { ChatPart, ChatRole } from '../../features/chat/types';
+/**
+ * Un message d'une conversation (ADR 0032) : un rôle, une suite ordonnée de **parts**, et
+ * des emplacements injectés (avatar, actions, horodatage). Le placement (aligné à droite
+ * pour l'utilisateur, à gauche sinon) et le ton viennent du cœur ; le **contenu** vient
+ * de l'app, part par part. `renderPart` prime sur le rendu par défaut : markdown,
+ * coloration, artefact métier restent côté app (ADR 0002).
+ */
+export type MessageProps = {
+    /** Qui parle : décide de l'alignement et du ton. */
+    role: ChatRole;
+    /** Les fragments de contenu, dans l'ordre. */
+    parts: ChatPart[];
+    /** Le rendu d'une part, fourni par l'app ; absent, le cœur rend un défaut neutre. */
+    renderPart?: (part: ChatPart) => ReactNode;
+    /** L'avatar, injecté par l'app. */
+    avatar?: ReactNode;
+    /** Les actions du message (copier, réessayer), injectées par l'app. */
+    actions?: ReactNode;
+    /** L'horodatage déjà formaté, injecté par l'app. */
+    timestamp?: ReactNode;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+export declare function Message({ role, parts, renderPart, avatar, actions, timestamp, className, }: MessageProps): import("react").JSX.Element;

package/dist/types/components/textarea/textarea.d.ts

@@ -1,3 +1,6 @@
 import type { ComponentProps } from 'react';
-/** Un champ de saisie multiligne, stylé par les tokens. Rien d'autre que les props HTML. */
-export declare function Textarea({ className, ...props }: ComponentProps<'textarea'>): import("react").JSX.Element;
+/**
+ * Un champ de saisie multiligne, stylé par les tokens. Rien d'autre que les props HTML —
+ * plus, dans un `Field`, l'association ARIA avec le message d'erreur ou d'aide.
+ */
+export declare function Textarea({ className, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }: ComponentProps<'textarea'>): import("react").JSX.Element;

package/dist/types/components/timeline/timeline.d.ts

@@ -4,16 +4,30 @@ import type { HTMLAttributes } from 'react';
  * Présentation seule — l'ordre, le format de `at` et le texte viennent de l'appelant.
  * Aucune donnée d'app, aucun état.
  */
-export type TimelineItem = {
+type TimelineItemBase = {
     id: string;
     /** La date/l'heure déjà formatée, fournie par l'appelant. */
     at: string;
     label: string;
     detail?: string;
 };
+/**
+ * L'état du point est une **intention** (`done` par défaut, `past` grisé), comme le
+ * `tone` d'`Alert` — pas une couleur. La couleur seule ne suffit pas (WCAG) : un point
+ * `past` porte obligatoirement `stateLabel`, le texte accessible fourni par l'app (le
+ * cœur n'a pas d'i18n).
+ */
+export type TimelineItem = TimelineItemBase & ({
+    state?: 'done';
+    stateLabel?: string;
+} | {
+    state: 'past';
+    stateLabel: string;
+});
 export type TimelineProps = HTMLAttributes<HTMLOListElement> & {
     items: TimelineItem[];
     /** Le nom accessible de la frise ; le cœur n'a pas d'i18n. */
     ariaLabel?: string;
 };
 export declare function Timeline({ items, ariaLabel, className, ...props }: TimelineProps): import("react").JSX.Element;
+export {};

package/dist/types/components/typing-indicator/manifest.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentManifest } from '../../catalogue/contract';
+/**
+ * Le manifeste de l'indicateur de frappe (ADR 0005). Une brique de présentation seule :
+ * le libellé vient de l'app, le cœur ne porte aucun mot.
+ */
+export declare const typingIndicatorManifest: ComponentManifest;

package/dist/types/components/typing-indicator/typing-indicator.d.ts

@@ -0,0 +1,12 @@
+/**
+ * L'indicateur de frappe : trois points qui attendent la réponse de l'assistant. Le
+ * libellé est injecté (l'app le traduit) et porté par une région `status` vivante — le
+ * cœur n'invente aucun mot (ADR 0015, 0032).
+ */
+export type TypingIndicatorProps = {
+    /** Le texte accessible annoncé par le lecteur d'écran. */
+    label: string;
+    /** Les classes de l'appelant, fusionnées après celles du cœur. */
+    className?: string;
+};
+export declare function TypingIndicator({ label, className }: TypingIndicatorProps): import("react").JSX.Element;

package/dist/types/composites/index.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from 'react';
+/**
+ * Les **scènes composites** (ADR 0019) : plusieurs briques du catalogue assemblées en une
+ * vue qui a du sens pour un agent — un formulaire complet, une carte de statut. Elles ne
+ * sont pas au catalogue des composants : ce sont des **rendus**, servis comme vues MCP
+ * Apps (`ui://nomos/composite/<nom>`) et exposés sur la surface publique JS (ADR 0031).
+ * Aucune n'écrit ni ne possède d'état, et leurs défauts sont neutres : la copie se
+ * **injecte par props** (ADR 0002).
+ */
+export type Composite = {
+    name: string;
+    title: string;
+    summary: string;
+    /** Rend la scène pour des données propres à la scène (ADR 0023) ; sans données, son rendu par défaut. */
+    render: (props?: Record<string, unknown>) => ReactElement;
+};
+export declare const composites: Composite[];
+export declare const compositeNames: string[];
+export declare function findComposite(name: string): Composite;

package/dist/types/features/chat/index.d.ts

@@ -0,0 +1,3 @@
+export { useChatThread } from './use-chat-thread';
+export type { ChatThread, UseChatThreadOptions } from './use-chat-thread';
+export type { ChatDelta, ChatLabels, ChatMessage, ChatMessageStatus, ChatPart, ChatRole, ChatSendInput, ChatStatus, ChatTransport, } from './types';

package/dist/types/features/chat/types.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Le contrat d'une conversation, côté cœur (ADR 0032).
+ *
+ * Le cœur **structure** la conversation et possède sa machine à états ; il ne possède
+ * ni le transport, ni l'appel au modèle, ni la persistance, ni l'erreur (ADR 0018).
+ * L'app injecte un `ChatTransport` — une seule fonction `send` — et le cœur l'ignore :
+ * une edge function, un pipeline, un mock local sont la même couture.
+ *
+ * Un message porte des **parts**, pas une chaîne : un signal structuré (« le brouillon
+ * est prêt », un artefact d'extraction, un résultat d'outil) est une part de premier
+ * ordre que la surface rend, jamais un sentinelle pêchée dans la prose.
+ */
+/** Qui parle. `tool` porte le résultat d'un outil, pas un tour de conversation. */
+export type ChatRole = 'user' | 'assistant' | 'system' | 'tool';
+/** Un fragment de contenu d'un message. */
+export type ChatPart = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'reasoning';
+    text: string;
+    state?: 'streaming' | 'done';
+} | {
+    type: 'tool';
+    name: string;
+    state: 'pending' | 'running' | 'success' | 'error';
+    input?: unknown;
+    output?: unknown;
+    /** Le libellé affiché ; absent, l'app décide quoi montrer du `name`. */
+    label?: string;
+} | {
+    type: 'data';
+    name: string;
+    payload: unknown;
+};
+/** L'état d'un message : `streaming` tant que des deltas arrivent, `done` sinon. */
+export type ChatMessageStatus = 'streaming' | 'done' | 'error';
+/** Un message : un rôle et une suite ordonnée de parts, jamais une chaîne seule. */
+export type ChatMessage = {
+    id: string;
+    role: ChatRole;
+    parts: ChatPart[];
+    status?: ChatMessageStatus;
+    /** Format l'app : ISO ou epoch, le cœur ne l'interprète pas (il ne l'affiche pas). */
+    createdAt?: string | number;
+};
+/**
+ * Un incrément de réponse. Le transport est **streaming-ready** (ADR 0032) : un
+ * transport par requête/réponse rend un unique `message`, un transport qui streame
+ * rend des `text-delta` et des `part` que le contrôleur assemble.
+ */
+export type ChatDelta = {
+    kind: 'text-delta';
+    text: string;
+} | {
+    kind: 'part';
+    part: ChatPart;
+} | {
+    kind: 'message';
+    message: ChatMessage;
+} | {
+    kind: 'error';
+    error: string;
+};
+/** Ce qu'un envoi reçoit : le texte de l'utilisateur et le signal d'annulation. */
+export type ChatSendInput = {
+    text: string;
+    signal: AbortSignal;
+};
+/**
+ * La couture unique que l'app fournit. `send` rend un flux de deltas **ou** un message
+ * complet ; le contrôleur normalise les deux. Le cœur n'appelle jamais de modèle, ne
+ * connaît aucun endpoint et ne voit aucune erreur réseau (ADR 0018).
+ */
+export type ChatTransport = {
+    send: (input: ChatSendInput) => AsyncIterable<ChatDelta> | Promise<ChatMessage>;
+};
+/** L'état de la conversation, du point de vue de la surface. */
+export type ChatStatus = 'idle' | 'submitted' | 'streaming' | 'error';
+/**
+ * Les libellés et textes accessibles, tous injectés par l'app : le cœur n'invente aucun
+ * mot (ADR 0015). `roleNames` nomme les rôles pour les lecteurs d'écran.
+ */
+export type ChatLabels = {
+    composerPlaceholder: string;
+    send: string;
+    stop: string;
+    retry: string;
+    regenerate: string;
+    empty: string;
+    scrollToBottom: string;
+    typing: string;
+    roleNames?: Partial<Record<ChatRole, string>>;
+};

package/dist/types/features/chat/use-chat-thread.d.ts

@@ -0,0 +1,30 @@
+import type { ChatMessage, ChatStatus, ChatTransport } from './types';
+/**
+ * Le contrôleur d'un fil de conversation : l'analogue de `FacetedDataTable` pour le chat
+ * (ADR 0032). Il possède la **machine à états** — ajout optimiste du tour utilisateur,
+ * assemblage des deltas, annulation, réessai, erreur — et **rien du transport** : l'app
+ * injecte un `ChatTransport`, le cœur l'ignore (ADR 0018).
+ *
+ * Sans dépendance, testable seul : le transport d'un test est une fonction asynchrone.
+ */
+export type UseChatThreadOptions = {
+    transport: ChatTransport;
+    /** Les messages déjà connus (reprise d'un fil côté serveur, par exemple). */
+    initialMessages?: ChatMessage[];
+};
+export type ChatThread = {
+    messages: ChatMessage[];
+    status: ChatStatus;
+    error: string | null;
+    /** Envoie le tour de l'utilisateur et assemble la réponse. Ignore un texte vide. */
+    send: (text: string) => void;
+    /** Annule la réponse en cours ; la part déjà reçue reste. */
+    stop: () => void;
+    /** Relance le dernier tour de l'utilisateur (après une erreur). */
+    retry: () => void;
+    /** Relance le dernier tour de l'utilisateur en écartant la réponse précédente. */
+    regenerate: () => void;
+    /** Remplace le fil entier (reprise, navigation entre conversations). */
+    replace: (messages: ChatMessage[]) => void;
+};
+export declare function useChatThread({ transport, initialMessages, }: UseChatThreadOptions): ChatThread;

package/dist/types/index.d.ts

@@ -134,6 +134,9 @@ export type { ToastProps } from './components/toast/toast';
 export { toastManifest } from './components/toast/manifest';
 export { ToastProvider, useToast } from './features/toast';
 export type { ToastApi, ToastOptions } from './features/toast';
+export { useChatThread } from './features/chat';
+export type { ChatThread, UseChatThreadOptions } from './features/chat';
+export type { ChatDelta, ChatLabels, ChatMessage, ChatMessageStatus, ChatPart, ChatRole, ChatSendInput, ChatStatus, ChatTransport, } from './features/chat';
 export { SelectionTree, Tree } from './components/tree/tree';
 export type { SelectionTreeProps, TreeProps, TreeNode } from './components/tree/tree';
 export { treeManifest } from './components/tree/manifest';
@@ -149,10 +152,24 @@ export { ratingManifest } from './components/rating/manifest';
 export { Timeline } from './components/timeline/timeline';
 export type { TimelineItem, TimelineProps } from './components/timeline/timeline';
 export { timelineManifest } from './components/timeline/manifest';
+export { Conversation } from './components/conversation/conversation';
+export type { ConversationProps } from './components/conversation/conversation';
+export { conversationManifest } from './components/conversation/manifest';
+export { Message } from './components/message/message';
+export type { MessageProps } from './components/message/message';
+export { messageManifest } from './components/message/manifest';
+export { Composer } from './components/composer/composer';
+export type { ComposerProps } from './components/composer/composer';
+export { composerManifest } from './components/composer/manifest';
+export { TypingIndicator } from './components/typing-indicator/typing-indicator';
+export type { TypingIndicatorProps } from './components/typing-indicator/typing-indicator';
+export { typingIndicatorManifest } from './components/typing-indicator/manifest';
 export { catalogue, componentNames, findComponent, validateCatalogue } from './catalogue/registry';
 export type { CatalogueEntry } from './catalogue/registry';
 export { componentManifestSchema } from './catalogue/contract';
 export type { ComponentManifest, ComponentProp, ComponentUsage, ComponentVariant, } from './catalogue/contract';
+export { composites, compositeNames, findComposite } from './composites';
+export type { Composite } from './composites';
 export { cn } from './lib/cn';
 export { TONES, toneClasses } from './lib/tone';
 export type { Tone } from './lib/tone';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nomosui/react",
   "private": false,
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "An app-agnostic design system, built in public: a core of tokens and components exposed to humans and agents.",
   "repository": {
@@ -51,6 +51,7 @@
     "build:package": "node scripts/build-package.mjs",
     "prepublishOnly": "npm run build:package",
     "smoke:consumer": "node scripts/smoke-consumer.mjs",
+    "dev:preview": "NOMOS_LOCAL=1 npm --prefix site run dev -- --port 5177 --open /chat.html",
     "changeset": "changeset",
     "release": "changeset publish"
   },