@nadicodeai/design-system 12.1.86 → 12.1.88

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** 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.
+**Product views on the website** preserve the real interface. Nadia uses captures of the running application, with the unchanged full-size image linked and capture provenance recorded in the repository, following the founder's 12 October correction of invented UI. Portal and Alveare may use inert scenes built from real components with fictional example data recorded in the repository. 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:
 
@@ -736,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. |
@@ -867,7 +868,7 @@ A recognised app, platform or model maker is drawn with its genuine mark beside
 
 ### Product views
 
-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.
+Website product views follow "Product views on the website" in [Elevation & Depth](#elevation--depth): authentic captures or real-component scenes, with provenance recorded in the repository. 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
 
@@ -924,7 +925,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 - 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 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 show authentic captures or real-component scenes as "Product views on the website" specifies, with provenance recorded in the repository. 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/GLOSSARY.md

@@ -58,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, Nadia or Alveare on the website, built from the real components with example data marked as example.
+An authentic capture or inert fragment of the Portal, Nadia or Alveare on the website. Capture provenance and fictional data are recorded internally; production notes do not appear on the public page.
 
 **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/package.json

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