@nadicodeai/design-system 12.1.85 → 12.1.87

package/DESIGN.md

@@ -571,7 +571,7 @@ Content stays solid: cards, KPIs, tables, chat, forms, and dialog, sheet and dra
 
 Related membership collections share one tabbed workspace: Members, Invitations and, where supported, Teams. One collection is visible at a time and its selection is retained in the URL.
 
-**Product views on the website** are the product itself, built from the real components with example data that is labelled as such; never a screenshot, a device mockup or an invented interface. A product window takes the raised height on its ground; a card that overlaps it floats; in a black section it renders in dark mode.
+**Product views on the website** preserve the real interface. Nadia uses captures of the running application, with demonstration content labelled and the unchanged full-size image linked, following the founder's 12 October correction of invented UI. Portal and Alveare may use inert scenes built from real components with labelled example data. Never invent interface controls or frame a view in a device mockup. A product window takes the raised height on its ground; a card that overlaps it floats. Live components use dark mode in a black section; captures preserve the application's captured theme.
 
 Absence follows its container. The Portal uses plain operational empty states throughout: no collection illustrations, a solid boundary for a page or region, and the same spacing and typography for first use, no data, and no results. Other products may use the illustrated register with a dashed boundary. In every product, an empty state inside a card is unframed, because the card already owns the edge. `EmptyState` (`@nadicodeai/ui/components/empty-state`) is the only owner of an absence: nothing else draws one, and its `scope` (`page`, `region` or `card`) sets that frame. A collection's `DataTable` takes the same props as `empty`. Its kind determines the message and recovery; presentation determines whether first-use artwork is present:
 
@@ -594,6 +594,8 @@ UI text stays static: no shimmer, typing, scrambling, pulsing or animated dots.
 
 Only Agents move on their own. The interface answers a person's action, briefly, and stops: motion follows the action, grows from the element that was pressed, and settles, within 300 ms; sheets and drawers that follow the pointer take their own durations. Keyboard actions and anything used a hundred times a day are instant. While a person waits for something they asked for, one waiting line moves and nothing else ("System activity"). On the website three things move: Agents, the product at work, and the shader objects. A product scene runs the real components through their states in beats while it is half in view, rests on the finished work, loops, stops off-screen, and holds the finished work under reduced motion; a part of a scene arrives with `.nc-arrive`: it holds its place from the start and comes into focus there on the message-arrival timing, so a playing scene never shifts the page. The threads, the hive and the card's foil move at their own slow pace; each stops off-screen and holds one frame under reduced motion. Words never move, and there is no parallax, scroll reveal of text, marquee or shimmer. Ruled by the founder on 26 September 2026: a Stripe-grade product site, with shaders adjusted to the art direction and the products shown working.
 
+The homepage figures have one owner-requested exception: a slight lean in response to a fine pointer, with no autonomous loop and no movement under reduced motion. Architecture and words stay still. Other illustrative pictures remain still.
+
 The default transition in every product is `confirm`, 180 ms, `out-strong`. Under reduced motion, movement stops and paint continues: transforms and keyframed movement go to their end state, and opacity and colour transitions stay, because a fade or a colour change is the state change itself. A component never answers reduced motion by turning every transition off.
 
 | Token | Use |
@@ -734,6 +736,7 @@ These shared components also follow the same foundations, although Geist does no
 | `AspectRatio` | Stable layout for real media while it loads. Supply a meaningful ratio and correct media alternative; the wrapper creates neither playback controls nor a device-frame component. |
 | `Form`, Field parts and form adapters | Connect actual validation to controls, help and errors. Use the field owner that matches the existing form engine; preserve values through recoverable failure. Do not change the form engine during visual styling. |
 | `DirectionProvider` | Direction context when the product supports right-to-left content. Keep reading and focus order meaningful; direction does not translate strings or change locale by itself. |
+| `PairingCode` | A short code two screens show at once so a person can tell they are talking to each other, such as the four digits Nadia and Alveare Server both show while a Nadia asks to join. Each digit stands in its own cell at `{typography.heading-lg}` with tabular figures, large enough to compare from across a desk, and assistive technology reads the label, then the digits one by one. It only shows a code: a code a person types is `InputOTP`. |
 | `QrCode` | A real scannable value with a readable fallback and an alternative action when scanning is unavailable. Keep secrets out of accessible labels and show expiry or invalidity from actual state. |
 | `FileDiff` | Existing code-change comparison, with file identity and additions/removals explained. A diff is not a general code editor or JSON viewer. Preserve exact source and the established conversation/tool owner. |
 | Chart kit and `KpiCard` | Choose the reading through [Data Visualization](#data-visualization), then use its shared chart owner with units, period, legend and accessible data. Geometry never decides business thresholds. |
@@ -865,7 +868,7 @@ A recognised app, platform or model maker is drawn with its genuine mark beside
 
 ### Product views
 
-A product view on the website is a live, inert fragment of the product built from its real components, captioned, with example data marked as example ("Elevation & Depth"). It takes its product's register: the Nadia window shows her Agents on the left and the selected conversation on the right; the Portal shows its sidebar and the page. A view is cropped to what it shows, never scaled below legibility, and never framed in a device.
+Website product views follow "Product views on the website" in [Elevation & Depth](#elevation--depth): authentic captures or real-component scenes, with demonstration content identified. Preserve the product's register and interface. Crop to the detail being explained; retain an original-image link for captures and never frame a view in a device.
 
 ### CSS components
 
@@ -918,11 +921,11 @@ 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, the product at work and the website's shader objects move. Don't animate sections, pictures or scrolling.
+- 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, apart from the bounded homepage figure response in Motion.
 - 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 content that scrolls or moves under it. 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.
+- Do show authentic captures or real-component scenes as "Product views on the website" specifies, with demonstration content identified. Don't use device frames or invented interfaces.
 - Do give each thing the corner its role takes on the scale ("Shapes"). Don't give a higher surface a bigger corner.
 - Do give every line one owner, and draw focus only with the focus outline.
 - Do say a status with a Badge tone, a mark and a word. Don't use colour alone or a bare dot.

package/package.json

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