@nomosui/react 0.6.0 → 0.7.0

package/SKILL.md

@@ -27,7 +27,8 @@ pour expliquer une brique, elle appartient à l'app, pas au cœur.
 - **Recueillir ou montrer une note** → `Rating` : interactif seulement si l'app fournit
   `onValueChange`, sinon un affichage.
 - **Lister des événements datés** → `Timeline` (frise, présentation seule ; le format de
-  la date vient de l'app).
+  la date vient de l'app). Un point porte un état — `done` (défaut) ou `past` (grisé) —
+  et un `past` exige un `stateLabel` fourni par l'app : la couleur seule ne suffit pas.
 - **Nommer un contrôle iconique, glisser une aide courte** → `Tooltip` en famille (un
   `TooltipProvider` autour de plusieurs, `Tooltip`, `TooltipTrigger`, `TooltipContent`).
   Jamais pour une information essentielle : elle n'est ni au clavier seul ni au tactile.
@@ -225,7 +226,10 @@ aplati par mode) et `nomos://component/<nom>` (le manifeste).
 Au-delà du manifeste, chaque brique a une **vue** servie en `ui://nomos/<nom>` — un
 document auto-suffisant (`text/html;profile=mcp-app`) que l'hôte rend dans un iframe
 sandboxé. Une **scène composite** (`ui://nomos/composite/<nom>`) assemble plusieurs
-briques en un écran qui a du sens (un formulaire, une carte de statut).
+briques en un écran qui a du sens (un formulaire, une carte de statut). Les scènes
+sont aussi exportées sur la surface publique JS (`composites`, `compositeNames`,
+`findComposite`, ADR 0031) : le serveur MCP et le site rendent la **même** source,
+et leur copie par défaut est neutre — elle s'injecte par props.
 
 La vue **émet des intentions** (`ready`, `select`, `change`, `error`) et ne mute jamais
 l'état : l'hôte décide. Il lui pousse l'apparence (`set-view` : thème, densité) et les

package/dist/index.js

@@ -5778,35 +5778,47 @@ function Timeline({ items, ariaLabel, className, ...props }) {
 		"aria-label": ariaLabel,
 		className: cn("relative flex flex-col", className),
 		...props,
-		children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
-			className: "relative flex gap-3 pb-4 last:pb-0",
-			children: [
-				index < items.length - 1 ? /* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "absolute left-1 top-4 h-full w-px bg-border"
-				}) : null,
-				/* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "relative z-10 mt-1 size-2.5 shrink-0 rounded-full bg-primary ring-4 ring-background"
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "min-w-0",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-wrap items-baseline gap-x-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-sm font-medium",
-							children: item.label
-						}), /* @__PURE__ */ jsx("time", {
-							className: "font-mono text-xs text-muted-foreground",
-							children: item.at
-						})]
-					}), item.detail ? /* @__PURE__ */ jsx("p", {
-						className: "text-xs text-muted-foreground",
-						children: item.detail
-					}) : null]
-				})
-			]
-		}, item.id))
+		children: items.map((item, index) => {
+			const state = item.state ?? "done";
+			return /* @__PURE__ */ jsxs("li", {
+				className: "relative flex gap-3 pb-4 last:pb-0",
+				children: [
+					index < items.length - 1 ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						"data-rail": true,
+						className: "absolute left-1 top-2 -bottom-2 w-px bg-border"
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						"data-state": state,
+						className: cn("relative z-10 mt-1 size-2.5 shrink-0 rounded-full ring-4 ring-background", state === "past" ? "bg-muted-foreground" : "bg-primary")
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-baseline gap-x-2",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-sm font-medium",
+									children: item.label
+								}),
+								item.stateLabel ? /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: item.stateLabel
+								}) : null,
+								/* @__PURE__ */ jsx("time", {
+									className: "font-mono text-xs text-muted-foreground",
+									children: item.at
+								})
+							]
+						}), item.detail ? /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground",
+							children: item.detail
+						}) : null]
+					})
+				]
+			}, item.id);
+		})
 	});
 }
 //#endregion
@@ -5835,7 +5847,9 @@ var timelineManifest = {
 			{
 				id: "c",
 				at: "2026-09-30 18:05",
-				label: "sync triage"
+				label: "sync triage",
+				state: "past",
+				stateLabel: "passé"
 			}
 		]
 	},
@@ -5846,7 +5860,7 @@ var timelineManifest = {
 			type: "TimelineItem[]",
 			required: true,
 			check: "accepted",
-			description: "Les événements : `id`, `at` (date déjà formatée), `label`, `detail?`."
+			description: "Les événements : `id`, `at` (date déjà formatée), `label`, `detail?`, `state?` (`done` par défaut, `past` grisé) et `stateLabel?` (le texte accessible de l'état, obligatoire pour `past` — la couleur seule ne suffit pas)."
 		},
 		{
 			name: "ariaLabel",
@@ -5863,15 +5877,23 @@ var timelineManifest = {
 			description: "Les classes de l'appelant, fusionnées après celles du composant."
 		}
 	],
-	usages: [{
-		when: "montrer une suite d’événements récents (synchronisations, déploiements)",
-		use: "<Timeline items={events} ariaLabel={t.timeline.label} />",
-		avoid: "faire formater la date par le cœur : le format appartient à l’app"
-	}, {
-		when: "un seul événement, sans suite",
-		use: "une ligne simple, pas une frise",
-		avoid: "une frise d’un seul point, qui suggère une chronologie inexistante"
-	}]
+	usages: [
+		{
+			when: "montrer une suite d’événements récents (synchronisations, déploiements)",
+			use: "<Timeline items={events} ariaLabel={t.timeline.label} />",
+			avoid: "faire formater la date par le cœur : le format appartient à l’app"
+		},
+		{
+			when: "un seul événement, sans suite",
+			use: "une ligne simple, pas une frise",
+			avoid: "une frise d’un seul point, qui suggère une chronologie inexistante"
+		},
+		{
+			when: "marquer un point comme passé",
+			use: "state: 'past' avec un stateLabel fourni par l’app (ex. « passé »)",
+			avoid: "se fier à la couleur seule : le point est aria-hidden, l’état doit être lu"
+		}
+	]
 };
 //#endregion
 //#region src/catalogue/contract.ts
@@ -6271,6 +6293,102 @@ function findComponent(name) {
 	return entry;
 }
 //#endregion
+//#region src/composites/index.tsx
+var composites = [
+	{
+		name: "form",
+		title: "Form",
+		summary: "An end-to-end form — a grid of fields and actions — assembled from the core bricks.",
+		render: (props = {}) => /* @__PURE__ */ jsx("div", {
+			style: {
+				maxWidth: 640,
+				margin: "0 auto",
+				padding: 16
+			},
+			children: /* @__PURE__ */ jsxs(Form, {
+				columns: 2,
+				actions: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, { children: String(props.submitLabel ?? "Save") })] }),
+				children: [/* @__PURE__ */ jsx(Field, {
+					label: "Name",
+					htmlFor: "scene-form-name",
+					children: /* @__PURE__ */ jsx(Input, {
+						id: "scene-form-name",
+						defaultValue: String(props.name ?? "Item 42")
+					})
+				}), /* @__PURE__ */ jsx(Field, {
+					label: "Score",
+					htmlFor: "scene-form-score",
+					hint: "from 1 to 5",
+					children: /* @__PURE__ */ jsx(NumberField, {
+						id: "scene-form-score",
+						min: 1,
+						max: 5,
+						defaultValue: "3",
+						"aria-label": "score"
+					})
+				})]
+			})
+		})
+	},
+	{
+		name: "status",
+		title: "Status card",
+		summary: "A status: a card, a state badge and a gap banner.",
+		render: (props = {}) => /* @__PURE__ */ jsx("div", {
+			style: {
+				maxWidth: 640,
+				margin: "0 auto",
+				padding: 16,
+				display: "flex",
+				flexDirection: "column",
+				gap: 12
+			},
+			children: /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsx(CardTitle, { children: String(props.product ?? "Product") }), /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					children: String(props.status ?? "available")
+				})]
+			}) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Alert, {
+				tone: "warning",
+				title: "missing signals",
+				children: String(props.gap ?? "Monitoring: token not configured — a gap, not a zero.")
+			}) })] })
+		})
+	},
+	{
+		name: "overlay",
+		title: "Overlay",
+		summary: "An open panel: the scrim, the stacking and the motion come from the tokens (ADR 0027).",
+		render: (props = {}) => /* @__PURE__ */ jsx("div", {
+			style: { padding: 16 },
+			children: /* @__PURE__ */ jsxs(Sheet, {
+				open: true,
+				children: [/* @__PURE__ */ jsx(SheetTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, { children: String(props.trigger ?? "Open") })
+				}), /* @__PURE__ */ jsx(SheetContent, {
+					side: props.side ?? "right",
+					children: /* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, { children: String(props.title ?? "Panel") }), /* @__PURE__ */ jsx(SheetDescription, { children: String(props.body ?? "A floating layer served as a view.") })] })
+				})]
+			})
+		})
+	}
+];
+var compositeNames = composites.map((composite) => composite.name);
+function findComposite(name) {
+	const composite = composites.find((candidate) => candidate.name === name);
+	if (!composite) throw new Error(`Scènes : composite introuvable : \`${name}\` (connues : ${compositeNames.join(", ")}).`);
+	return composite;
+}
+//#endregion
 //#region src/tokens/build.mjs
 /**
 * La dérivation des tokens : une source JSON, deux rendus (ADR 0004).
@@ -6632,4 +6750,4 @@ var tokensResource = {
 	}
 };
 //#endregion
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, Code, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CompactMeter, CopyButton, Counter, DataTablePagination, DataTableToolbar, Dialog, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FacetFilter, FacetedDataTable, Field, Fieldset, Footer, Form, Freshness, Heading, Input, Kicker, Label, Link, Meter, Navbar, NumberField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Rating, ScrollArea, ScrollBar, SearchField, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectionTree, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Switch, TONES, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Timeline, Toast, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, accordionManifest, alertDialogManifest, alertManifest, avatarManifest, badgeManifest, badgeVariants, badgeVariantsConfig, buttonManifest, buttonVariants, buttonVariantsConfig, cardManifest, catalogue, checkboxManifest, chipManifest, cn, codeBlockManifest, codeManifest, collapsibleManifest, componentManifestSchema, componentNames, copyButtonManifest, copyButtonVariantsConfig, counterManifest, dataTableFeatures, dataTablePaginationManifest, dataTableToolbarManifest, dialogManifest, dropdownMenuManifest, emptyStateManifest, facetFilterManifest, fieldManifest, fieldsetManifest, findComponent, footerManifest, formManifest, freshnessManifest, headingManifest, headingVariants, headingVariantsConfig, inputManifest, kickerManifest, kickerVariantsConfig, labelManifest, linkManifest, meterManifest, navbarManifest, numberFieldManifest, popoverManifest, progressBarManifest, radioManifest, ratingManifest, renderCss, resolveSkin, scrollAreaManifest, searchFieldManifest, selectManifest, separatorManifest, sheetManifest, skeletonManifest, switchManifest, tableManifest, tabsManifest, textManifest, textVariants, textVariantsConfig, textareaManifest, timelineManifest, toastManifest, toggleGroupManifest, toggleManifest, toggleVariants, toggleVariantsConfig, tokensResource, toneClasses, tooltipManifest, treeManifest, useToast, validateCatalogue };
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, Code, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CompactMeter, CopyButton, Counter, DataTablePagination, DataTableToolbar, Dialog, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FacetFilter, FacetedDataTable, Field, Fieldset, Footer, Form, Freshness, Heading, Input, Kicker, Label, Link, Meter, Navbar, NumberField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Rating, ScrollArea, ScrollBar, SearchField, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectionTree, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Switch, TONES, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Timeline, Toast, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, accordionManifest, alertDialogManifest, alertManifest, avatarManifest, badgeManifest, badgeVariants, badgeVariantsConfig, buttonManifest, buttonVariants, buttonVariantsConfig, cardManifest, catalogue, checkboxManifest, chipManifest, cn, codeBlockManifest, codeManifest, collapsibleManifest, componentManifestSchema, componentNames, compositeNames, composites, copyButtonManifest, copyButtonVariantsConfig, counterManifest, dataTableFeatures, dataTablePaginationManifest, dataTableToolbarManifest, dialogManifest, dropdownMenuManifest, emptyStateManifest, facetFilterManifest, fieldManifest, fieldsetManifest, findComponent, findComposite, footerManifest, formManifest, freshnessManifest, headingManifest, headingVariants, headingVariantsConfig, inputManifest, kickerManifest, kickerVariantsConfig, labelManifest, linkManifest, meterManifest, navbarManifest, numberFieldManifest, popoverManifest, progressBarManifest, radioManifest, ratingManifest, renderCss, resolveSkin, scrollAreaManifest, searchFieldManifest, selectManifest, separatorManifest, sheetManifest, skeletonManifest, switchManifest, tableManifest, tabsManifest, textManifest, textVariants, textVariantsConfig, textareaManifest, timelineManifest, toastManifest, toggleGroupManifest, toggleManifest, toggleVariants, toggleVariantsConfig, tokensResource, toneClasses, tooltipManifest, treeManifest, useToast, validateCatalogue };