@nadicodeai/design-system 12.1.76 → 12.1.78

package/AGENTS.md

@@ -5,8 +5,8 @@ every component, website section and product screen builds on. React components
 belong to `@nadicodeai/ui`; `examples/` contains rendered specimens.
 
 - Design and CSS changes: the relevant section of `DESIGN.md`.
-- Placement: this package and `@nadicodeai/ui` hold the Foundation and what at
-  least two products use; what one product alone needs lives in that product.
+- Placement: `../ui/AGENTS.md`. Every reusable component lives in
+  `@nadicodeai/ui`, even while one product alone uses it.
 - Terms: `GLOSSARY.md`. Static consumption: `README.md`.
 - React consumption: `../ui/README.md`.
 - Visual checks: `playwright.visual.config.ts` and `tests/visual/`, run by

package/DESIGN.md

@@ -227,12 +227,12 @@ spacing:
 
 ## Overview
 
-This file is nadicode's design system and its only design authority. The tokens above are the values; the sections below are the rules for applying them. Every component in `@nadicodeai/ui`, every website section, and every screen in the Portal and in Nadia builds on it. Another document may say how one product applies a rule, and links here for the rule; it never restates one. A rule that is missing here is added here first.
+This file is nadicode's design system and its only design authority. The tokens above are the values; the sections below are the rules for applying them. Every component in `@nadicodeai/ui`, every website section, and every screen in the Portal, Nadia and Alveare builds on it. Another document may say how one product applies a rule, and links here for the rule; it never restates one. A rule that is missing here is added here first.
 
 nadicode puts AI Agents to work inside small and mid-sized companies. Its sites and products read as a technology company with a real product: the interface is neutral and exact, the product is shown working, and colour and depth give the page its energy. Three ideas carry every screen:
 
 - **Neutral structure.** Chrome, controls and text sit on an achromatic spine, so a desaturated screen loses nothing structural. The strongest contrast on a screen belongs to the action.
-- **Colour as stage.** The five identity hues are full-strength grounds for sections, stages behind product views and glass, and the colour of Agents. They carry the brand; they never decorate a control.
+- **Colour as stage.** The five identity hues appear at full strength only in the places "Colour as stage" lists, the colour of Agents among them, and never as a section's ground. They carry the brand; they never decorate a control.
 - **Real depth.** Surfaces sit at four heights. A 1 px edge shows the height in both modes, with a faint shadow under it. Glass floats over colour and moving Agents.
 
 The products are still: only Agents move on their own. The website moves with purpose: the product at work, Agents and its few shader objects ("Motion").
@@ -254,7 +254,7 @@ The neutral spine carries grounds, chrome, text and every control: `{colors.ink}
 
 ### Colour as stage
 
-The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has one job: the first stripe of Nadia's ribbon.
+The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has two jobs: the first stripe of Nadia's ribbon, and a band of a company's card foil ("Company card").
 
 The hues appear at full strength and flat, with no tints, steps, gradients or hover variants, in these places. The one exception is the website's shader objects, each the material of one object and never a section's ground: the threads she holds, a fan of lines in her stripes from her orb to her colleagues, on black; Alveare's hive, cells that light in its hues as the work passes; and the company card's holographic foil ("Company card"). Stripes and cells stay pure bands of their hues, never a colour between two of them. Ruled by the founder on 27 September 2026: "shaders are not backgrounds all over the place".
 
@@ -329,7 +329,7 @@ Geist and Geist Mono are the two families. The twelve tokens are named by role,
 | `{typography.code}` | Tool calls, snippets, traces. |
 | `{typography.label-mono}` | Opaque identifiers, codes and mono eyebrows; never a person's, Agent's or computer's display name. |
 
-A token has one size at every width; nothing is sized in `vw` or `vh`. Only the three display tokens carry negative tracking. Card, panel and section titles are sentence-case Geist. The website and the CSS components name the tokens through the `nc-type-*` classes; product UI in `@nadicodeai/ui`, the Portal and Nadia sizes text with Tailwind's `text-xs`, `text-sm` and `text-base`, which match `caption`, `body-sm` and `body-md` in size.
+A token has one size at every width; nothing is sized in `vw` or `vh`. Only the three display tokens carry negative tracking. Card, panel and section titles are sentence-case Geist. The website and the CSS components name the tokens by role, through the `nc-type-*` classes or the theme's `text-<token>` utilities (`text-display-md`); product UI in `@nadicodeai/ui`, the Portal and Nadia sizes text with Tailwind's `text-xs`, `text-sm` and `text-base`, which match `caption`, `body-sm` and `body-md` in size.
 
 ### The website's text
 
@@ -421,7 +421,7 @@ Product UI sits on one continuous workspace ground, `{colors.material-workspace}
 | Outlined | `{colors.material-solid}` | None; one `line` border | A flat panel: fact cells inside a record, the website's explanatory cards. |
 | Plain | `{colors.material-solid}` | None | A structural card with no edge of its own. |
 
-**Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge is the floating recipe, whose inset top highlight and inner hairline show once the fill turns translucent, and a 5% monochrome grain keeps the blurred colour from banding. Glass may go where something behind it moves or carries colour:
+**Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge is the floating recipe, its 1 px ring and faint shadow, and a 5% monochrome grain keeps the blurred colour from banding. Glass may go where something behind it moves or carries colour:
 
 - floating chrome over our own content: popovers, selects, comboboxes, the menubar, navigation popups, the command palette and control bars, including a collection's toolbar over the rows that scroll under it (on a page whose rows never pass under it, the toolbar is the plain row, with no fill or edge of its own) and Nadia's chat bar over her conversation;
 - the website header as the page scrolls under it;
@@ -468,7 +468,7 @@ The easings are `emphasized`, `out-strong`, `in-out-strong` and `drawer`; the wa
 
 ## Components
 
-Every product builds from `@nadicodeai/ui`: stock shadcn components on Base UI, the chart kit, the assistant-ui conversation interface, and the compositions below. A component styles itself only through the roles and tokens in this file; it carries no raw colour, no `dark:` utility and no theme of its own. A page arranges and sizes a component and never restyles it: a new appearance is a typed variant or slot added to the component, and a missing composition is added to the package once two products need it. Visible controls always come from the package.
+Every product builds from `@nadicodeai/ui`: stock shadcn components on Base UI, the chart kit, the assistant-ui conversation interface, and the compositions below. A component styles itself only through the roles and tokens in this file; it carries no raw colour, no `dark:` utility and no theme of its own. A page arranges and sizes a component and never restyles it: a new appearance is a typed variant or slot added to the component, and a missing composition is added to the package, even while one product alone needs it. Visible controls always come from the package.
 
 ### Controls
 
@@ -508,7 +508,7 @@ A status is one Badge: a mark and a word in one of five tones, so it reads witho
 | Amber | Waiting on a person's decision | `{colors.warning-soft}` / `{colors.warning-deep}` |
 | Blue | A step in motion | `{colors.info-soft}` / `{colors.info-deep}` |
 
-Both products draw every status with the one `StatusBadge` in `@nadicodeai/ui`, which owns the tones and their marks; each app keeps only its value-to-tone map in one module, and nothing else chooses a status colour. A status never moves.
+The Portal, Nadia and Alveare draw every status with the one `StatusBadge` in `@nadicodeai/ui`, which owns the tones and their marks; each app keeps only its value-to-tone map in one module, and nothing else chooses a status colour. A status never moves.
 
 ### System activity
 
@@ -545,6 +545,7 @@ An Agent is its orb, in every product; there is no other Agent picture. An orb i
 - **States.** Idle turns at its form's own pace and breathes. Working and thinking move with their cue, the ribbon around working and three dots above thinking, waiting holds, blocked makes one interrupted effort and stops, and done celebrates once and settles back into idle. A surface that only knows a machine checked in draws idle. No state draws a circle around the orb, and a label names the state wherever the exact state matters.
 - **Status and ambient.** An orb that stands for an Agent shows its real state. An orb in decorative artwork, such as a sign-in picture, takes ambient motion: its form moves at its own pace with no state pose or cue, and it claims no activity.
 - **Reduced motion.** Movement stops; a thinking or working orb breathes between full ink and 0.45 opacity so busy still reads as busy, and an ambient orb holds still.
+- **In a conversation.** Her states are the conversation's own: the orb in its header follows them, and every mark of her activity in the thread is her own orb in her real state, never another Agent's figure, a spinner, a ticker or a pulse. Her steps and tool calls hold still and say in words what they do or did, with a tool's kind as a decorative icon beside the words and no state of its own; a system wait inside the thread is the waiting line ("System activity"), the outcome of a step or a request is the `StatusBadge`, and a failed turn is the `MessageNotice`. Ruled by the owner on 11 October 2026: the Agent's states are the chat's default states, not random icons.
 
 Text sits beside an orb, never on it.
 
@@ -558,7 +559,7 @@ The sign-up page draws the account being made as the company's card: one object
 
 ### Identity marks
 
-A recognised app, platform or model maker is drawn with its genuine mark beside its readable name, in a tile that owns the box; an unknown one keeps its name and a text monogram, never a guessed logo. The tile is 24 px, the size a 40 px table row holds, wherever a mark names a row; a mark grows only where it stands for the object itself, as on its card or at the head of its page, and there every surface of that object draws it at one size. A mark identifies and never replaces the label, and its colour identifies the maker, never a connection's health. Marks are used nominatively, to name a platform, an integration or a provider, never next to wording that implies endorsement. A brand mark never stands in for a UI icon, and a UI icon never stands in for a brand. A Library skill is drawn with its line icon on a `card` tile with a hairline `border`, the tile an app mark sits in, and a plugin with its line icon on the `info-soft` tile (`CatalogTile`), at 40 px in a row and 64 px at the head of its page, so the tile's ground says which kind it is; the icon is one of the catalog's fixed set, never a brand mark, and an app keeps its brand mark. In a chart, a model is named by its label, and marks stay out of legends.
+A recognised app, platform or model maker is drawn with its genuine mark beside its readable name, in a tile that owns the box; an unknown one keeps its name and a text monogram, never a guessed logo. The tile is 24 px, the size a 48 px table row holds, wherever a mark names a row; a mark grows only where it stands for the object itself, as on its card or at the head of its page, and there every surface of that object draws it at one size. A mark identifies and never replaces the label, and its colour identifies the maker, never a connection's health. Marks are used nominatively, to name a platform, an integration or a provider, never next to wording that implies endorsement. A brand mark never stands in for a UI icon, and a UI icon never stands in for a brand. A Library skill is drawn with its line icon on a `card` tile with a hairline `border`, the tile an app mark sits in, and a plugin with its line icon on the `info-soft` tile (`CatalogTile`), at 40 px in a row and 64 px at the head of its page, so the tile's ground says which kind it is; the icon is one of the catalog's fixed set, never a brand mark, and an app keeps its brand mark. In a chart, a model is named by its label, and marks stay out of legends.
 
 ### Product views
 
@@ -605,9 +606,9 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 | Website | `apps/website/docs/design-doctrine.md` | `register.website.layout` | A light page; a black section scopes `.dark` for the product views in it |
 | Portal | `apps/portal/docs/information-architecture.md` and `apps/portal/docs/design-doctrine.md` | None | System, light or dark, on the `.dark` class |
 | Nadia | `apps/nadia/docs/design-doctrine.md` | None | System by default, light or dark, on the `.dark` class |
-| Alveare | `apps/alveare/docs/design-doctrine.md` | None | Light or dark, on Buzz's own theme pair |
+| Alveare | `apps/alveare/docs/design-doctrine.md` | None | System, light or dark, on Buzz's own theme pair |
 
-- **Website.** The page grammar is "The website column": full-bleed sections on white, soft, black and colour grounds, alternating, with product views floating on them. Its cards are outlined; its product views take their real heights.
+- **Website.** The page grammar is "The website column": full-bleed sections on white, soft and black grounds, alternating, with product views on them. Its cards are outlined; its product views take their real heights.
 - **Portal.** A product shell on the workspace ground, built from the page compositions and the package components, with `globals.css` giving every elevated surface its tone.
 - **Nadia.** Nadia draws her own window through Hermes's `window.shell` area, inside Hermes's app, which owns Tailwind and its own surface layering. Nadia's theme paints Hermes's roles with the shared `semantic` roles and core radii, and imports `@nadicodeai/ui/components.css` with the design system's host stylesheet, so the package components render with the same recipes and glass. The window follows the operating system's material where the system composites it. Hermes answers reduced motion by cutting every transition and animation; Nadia's stylesheet gives her own parts, the package overlays, the entry screen and the waiting line, the reduced-motion policy in "Motion" back.
   Her conversation is one centred column of `56rem` holding her replies, the person's messages and the chat bar: her reply is plain text across the column, only the person's message is a bubble, on the `raised` step at the column's trailing edge, and the chat bar floats over the messages as the lightest step, in glass. The selected Agent row carries the sidebar's selected fill, as the Agents list draws it.
@@ -615,8 +616,8 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 
 ## Do's and Don'ts
 
-- Do keep the brand still: only Agents, and the product at work, move. Don't animate sections, pictures or scrolling.
-- Do use the identity hues at full strength as grounds, stages and Agents, with the text pole that clears AA. Don't tint them, grade them, or paint a control, chrome or a status with them.
+- Do keep the brand still: only Agents, the product at work and the website's shader objects move. Don't animate sections, pictures or scrolling.
+- Do use the identity hues at full strength in the places "Colour as stage" lists, with the text pole that clears AA. Don't tint them, grade them, or paint a control, chrome or a status with them.
 - Do choose a surface's height by its physical role, and let its edge and faint shadow show it in both modes. Don't add a border, ring or second shadow to an elevated surface.
 - Do put glass on floating chrome over colour or motion. Don't make content glass, or put glass over a plain ground.
 - Do show the product with its real components. Don't use screenshots, device frames or invented interfaces.
@@ -629,7 +630,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 
 ## Token extension
 
-The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Everything else is authored in the one `json design-tokens` fence below, in the W3C design-tokens format: `core.material` (the scrim and glass values), `core.elevation` (four recipes per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. How the build turns this file into CSS and token files is described in `packages/design-system/README.md`.
+The YAML front matter holds the four groups the DESIGN.md format defines: colors, typography, rounded and spacing. Everything else is authored in the one `json design-tokens` fence below, in the W3C design-tokens format: `core.material` (the scrim and glass values), `core.elevation` (four recipes per mode), `core.motion` (durations and easings), `semantic` (the shared colour roles and radius) and `register.website` (the website column). An alias is written `{core.color.canvas}`. In CSS a token is `--nc-<name>`, an elevation is reached only through `nc-elevation-<height>`, and Tailwind names the values through the `nc-` and `nadicode-` namespaces. How the build turns this file into CSS and token files is described in `packages/design-system/README.md`.
 
 ```json design-tokens
 {

package/GLOSSARY.md

@@ -18,14 +18,11 @@ _Avoid_: Theme, skin
 The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour belongs to the Identity palette, the semantic feedback roles and the chart palette.
 
 **Identity palette**:
-The brand's colour: five full-strength hues, cobalto, verde, arancio, giallo and rosso, with the white and ink poles type sits on. They appear flat as website section grounds, stages, accents on the website, Agents, the logo and imagery, and never on a control.
+The brand's colour: five full-strength hues, cobalto, verde, arancio, giallo and rosso, with the white and ink poles type sits on. They appear flat behind glass, as accents on the website, in Agents, objects, the logo and imagery, and never as a website section's ground or on a control.
 _Avoid_: Swatch, theme color, Agent identity palette
 
 **Identity plane**:
-A flat surface painted edge to edge in one Identity palette hue, such as a website section's ground, a stage, or a field in an image.
-
-**Stage**:
-The Identity palette ground behind a floating product view, which glass over it shows through.
+A flat surface painted edge to edge in one Identity palette hue, such as a field in an image.
 
 ### Structure and surfaces
 
@@ -61,7 +58,7 @@ The identity of one Agent across products: one of seven forms in one chosen colo
 _Avoid_: Agent glyph, Agent avatar, Agent visual
 
 **Product view**:
-A live, inert fragment of the Portal or Nadia on the website, built from the real components with example data marked as example.
+A live, inert fragment of the Portal, Nadia or Alveare on the website, built from the real components with example data marked as example.
 
 **System activity**:
 What a person sees while the system does work they asked for: a pending label, then one waiting line, a counted progress line, or still skeletons. It never takes an orb, because an orb means an Agent.

package/README.md

@@ -56,11 +56,11 @@ The clear-space, minimum-size, accessibility, background, and prohibited-use rul
 
 ## Data-only consumption
 
-A consumer that generates its own theme takes the token files and the assets. The Nadia desktop app's theme script reads `tokens/dtcg-resolved` this way, and its desktop imports `css/tokens` and `css/host` rather than the complete bundle.
+A consumer that generates its own theme takes the token files and the assets. The Nadia desktop app's theme script reads `tokens/dtcg-resolved` this way, and its desktop imports `css/host` rather than the complete bundle.
 
 Pin an exact version, never a range: the DTCG group paths are the interface, and a new group arrives in a minor. `npm view @nadicodeai/design-system version` reports the published one.
 
-Two token files ship, both rooted at `nadicode`: `nadicode.core.*` is the foundation, `nadicode.semantic.*` the shared colour roles per mode, and `nadicode.register.<product>.*` one product's own values:
+Two DTCG token files ship, both rooted at `nadicode`: `nadicode.core.*` is the foundation, `nadicode.semantic.*` the shared colour roles per mode, and `nadicode.register.<product>.*` one product's own values:
 
 | Import | What it holds | What it is for |
 | --- | --- | --- |
@@ -129,7 +129,7 @@ fresh build, and `tests/guards/` holds the structural checks on every output.
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- One stylesheet: tokens, geometry, components, and the brand typeface -->
-    <link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system/css" />
+    <link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system@<version>/dist/css/index.css" />
     <!-- In a bundler, prefer a CSS entry: @import "@nadicodeai/design-system/css"; -->
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.76",
+  "version": "12.1.78",
   "type": "module",
   "publishConfig": {
     "access": "public"