@nadicodeai/ui 12.1.154 → 12.1.156

package/dist/components/chart-bar-horizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAoCjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA+GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"chart-bar-horizontal.d.ts","sourceRoot":"","sources":["../../src/components/chart-bar-horizontal.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AA8CjC,iBAAS,UAAU,CAAC,IAAI,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM;;;EAqCrF;AAED;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,cAAsC,EACtC,aAAa,EACb,UAAU,EACV,IAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,gBAAgB,GAAG,YAAY,CAAC,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,+BA+GA;AAED,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/chart-bar-horizontal.js

@@ -10,13 +10,18 @@ const NEGATIVE_KEY = "__negative";
 const POSITIVE_BAR_COLOR = "var(--success)";
 const NEGATIVE_BAR_COLOR = "var(--destructive)";
 const TWO_LINE_ROW_HEIGHT = 28;
+/**
+ * Recharts measures a label's words in a span in the page's body, with only the
+ * tick's own `style`, so the label carries the size it is drawn at.
+ */
+const CATEGORY_FONT_SIZE = "var(--nc-type-caption-font-size)";
 /**
  * Recharts keeps only SVG attributes from a `tick` object, so `maxLines` reaches
  * its `Text` only through a tick it renders.
  */
 function CategoryTick({ payload, ...props }) {
     const rowHeight = Number(props.height) / props.visibleTicksCount;
-    return (_jsx(Text, { ...props, maxLines: rowHeight >= TWO_LINE_ROW_HEIGHT ? 2 : 1, children: payload.value }));
+    return (_jsx(Text, { ...props, maxLines: rowHeight >= TWO_LINE_ROW_HEIGHT ? 2 : 1, style: { fontSize: CATEGORY_FONT_SIZE }, children: payload.value }));
 }
 /** About one 12 px character, and the bounds that keep a long name readable without starving the bars. */
 const CATEGORY_CHAR_WIDTH = 6.6;

package/dist/components/entry-scene.d.ts

@@ -24,6 +24,8 @@ export type EntrySceneProps = {
     presence?: ReactNode;
     /** Which view is open. A failure quiets the picture; it is never removed. */
     view?: string;
+    /** Shown inside a page or a drawer rather than filling the window: its corners round as a card's do. */
+    contained?: boolean;
     className?: string;
     /** The message, the actions, the progress line and the stage list. */
     children?: ReactNode;
@@ -34,13 +36,13 @@ export type EntrySceneProps = {
  * group. The screen is black in every theme.
  *
  * @family Compositions
- * @when Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things.
+ * @when Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things; the top of every Nadia pairing drawer, contained at 16:9 with only its short status.
  * @instead The Portal's entry pages are its funnel frame with the shared entry header; Alveare Server's entry is the HiveScene; a wait inside the product is a WaitingLine.
  * @behaviour It holds no state and decides nothing: which view is open, the words and when the screen ends belong to whoever mounts it. Required: the picture, the wordmark and the heading, because every entry screen has all three; a screen that leaves one out does not compile. It fills a box of the window's own shape (`aspectRatio`), so the picture's figure stands on the window's floor (`pictureFeet`). A failure quiets the picture and never removes it. Its children stand in order: the message, the actions, the progress line, the stage list.
  * @words The heading names the surface and is never seen. Instructions and status are one plain sentence that changes only when the real stage changes ("Loading your tools").
  * @access One level-1 heading for the screen, read but not shown; a message that reports work in progress is a status.
  */
-export declare function EntryScene({ aspectRatio, minHeight, picture, pictureFeet, wordmark, title, presence, view, className, children, }: EntrySceneProps): import("react").JSX.Element;
+export declare function EntryScene({ aspectRatio, minHeight, picture, pictureFeet, wordmark, title, presence, view, contained, className, children, }: EntrySceneProps): import("react").JSX.Element;
 /**
  * What the screen is doing, said plainly. `lines` reserves the room a longer
  * translation needs, so nothing below it moves between stages.

package/dist/components/entry-scene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entry-scene.d.ts","sourceRoot":"","sources":["../../src/components/entry-scene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAA0B,EAC1B,SAAS,EACT,OAAO,EACP,WAAiB,EACjB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAuBjB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAY,EACZ,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAWA;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhG;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BAYA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAaA;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,aAAa,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA"}
+{"version":3,"file":"entry-scene.d.ts","sourceRoot":"","sources":["../../src/components/entry-scene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,OAAO,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wGAAwG;IACxG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAA0B,EAC1B,SAAS,EACT,OAAO,EACP,WAAiB,EACjB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAiB,EACjB,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAwBjB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAY,EACZ,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAWA;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAEhG;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BAYA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAaA;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,aAAa,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,cAAc,CAAA;KAAE,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA"}

package/dist/components/entry-scene.js

@@ -6,14 +6,14 @@ import { cn } from "../lib/utils.js";
  * group. The screen is black in every theme.
  *
  * @family Compositions
- * @when Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things.
+ * @when Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things; the top of every Nadia pairing drawer, contained at 16:9 with only its short status.
  * @instead The Portal's entry pages are its funnel frame with the shared entry header; Alveare Server's entry is the HiveScene; a wait inside the product is a WaitingLine.
  * @behaviour It holds no state and decides nothing: which view is open, the words and when the screen ends belong to whoever mounts it. Required: the picture, the wordmark and the heading, because every entry screen has all three; a screen that leaves one out does not compile. It fills a box of the window's own shape (`aspectRatio`), so the picture's figure stands on the window's floor (`pictureFeet`). A failure quiets the picture and never removes it. Its children stand in order: the message, the actions, the progress line, the stage list.
  * @words The heading names the surface and is never seen. Instructions and status are one plain sentence that changes only when the real stage changes ("Loading your tools").
  * @access One level-1 heading for the screen, read but not shown; a message that reports work in progress is a status.
  */
-export function EntryScene({ aspectRatio = "1220 / 800", minHeight, picture, pictureFeet = 906, wordmark, title, presence, view, className, children, }) {
-    return (_jsx("div", { "data-slot": "entry-scene", className: cn("nc-entry-scene", className), 
+export function EntryScene({ aspectRatio = "1220 / 800", minHeight, picture, pictureFeet = 906, wordmark, title, presence, view, contained = false, className, children, }) {
+    return (_jsx("div", { "data-slot": "entry-scene", className: cn("nc-entry-scene", contained && "rounded-lg", className), "data-contained": contained || undefined, 
         // SAFETY: CSSProperties lists only standard properties; React sets each `--` custom property key here through style.setProperty.
         style: {
             aspectRatio,

package/dist/components/pairing-code.d.ts

@@ -1,27 +1,33 @@
 import type * as React from "react";
 export type PairingCodeProps = Omit<React.ComponentProps<"div">, "children" | "role"> & {
-    /** The digits both screens show, such as "4821"; a leading zero is a digit. */
+    /** The characters the code holds, such as "4821" or "5QTH-LMWG"; a leading zero is a digit, and a "-" separates groups. */
     code: string;
     /** What the code is, in the person's language; a screen reader reads it before the digits. */
     label: string;
+    /** The code can no longer be used: it stays in view, dimmed, while the caller says why beside it. */
+    expired?: boolean;
 };
 /**
- * The 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.
+ * The short code a person reads on one screen to pair it with another: compared
+ * between two screens, such as the four digits Nadia and Alveare Server both
+ * show while a Nadia asks to join, or typed on another device, such as the
+ * code WhatsApp asks for to link a device by its phone number.
  *
- * Each digit stands in its own cell, large enough to compare from across a
+ * Each character stands in its own cell, large enough to read from across a
  * desk. The caller places it.
  *
  * @family Data
  * @when Pairing two devices or apps a person can see side by side: the four digits Nadia and
- * Alveare Server both show while a Nadia asks to join.
- * @instead A code a person types is `InputOTP`. A link another device scans is `QrCode`.
- * @behaviour Each digit in its own cell at `heading-lg` with tabular figures, large enough to
- * compare from across a desk. A leading zero is a digit. It only shows a code and takes no input.
+ * Alveare Server both show while a Nadia asks to join; or a code the person types on another
+ * device, such as WhatsApp's linking code ("5QTH-LMWG") they type on the phone under Linked devices.
+ * @instead A code a person types into this screen is `InputOTP`. A link another device scans is `QrCode`.
+ * @behaviour Each character in its own cell at `heading-lg` with tabular figures, large enough to
+ * read from across a desk. A leading zero is a digit. A "-" is a narrow separator between groups,
+ * not a cell. An `expired` code stays in place, dimmed, so the person sees which code lapsed while
+ * the caller says so under it. It only shows a code and takes no input.
  * @words The label says what the code is: *Pairing code*.
- * @access `role="img"` named by the label and the digits read one by one.
+ * @access `role="img"` named by the label and the characters read one by one, the groups apart.
  */
-declare function PairingCode({ code, label, className, ...props }: PairingCodeProps): React.JSX.Element;
+declare function PairingCode({ code, label, expired, className, ...props }: PairingCodeProps): React.JSX.Element;
 export { PairingCode };
 //# sourceMappingURL=pairing-code.d.ts.map

package/dist/components/pairing-code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pairing-code.d.ts","sourceRoot":"","sources":["../../src/components/pairing-code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACtF,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAsB1E;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"pairing-code.d.ts","sourceRoot":"","sources":["../../src/components/pairing-code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACtF,2HAA2H;IAC3H,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAe,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAmC3F;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/pairing-code.js

@@ -1,24 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 /**
- * The 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.
+ * The short code a person reads on one screen to pair it with another: compared
+ * between two screens, such as the four digits Nadia and Alveare Server both
+ * show while a Nadia asks to join, or typed on another device, such as the
+ * code WhatsApp asks for to link a device by its phone number.
  *
- * Each digit stands in its own cell, large enough to compare from across a
+ * Each character stands in its own cell, large enough to read from across a
  * desk. The caller places it.
  *
  * @family Data
  * @when Pairing two devices or apps a person can see side by side: the four digits Nadia and
- * Alveare Server both show while a Nadia asks to join.
- * @instead A code a person types is `InputOTP`. A link another device scans is `QrCode`.
- * @behaviour Each digit in its own cell at `heading-lg` with tabular figures, large enough to
- * compare from across a desk. A leading zero is a digit. It only shows a code and takes no input.
+ * Alveare Server both show while a Nadia asks to join; or a code the person types on another
+ * device, such as WhatsApp's linking code ("5QTH-LMWG") they type on the phone under Linked devices.
+ * @instead A code a person types into this screen is `InputOTP`. A link another device scans is `QrCode`.
+ * @behaviour Each character in its own cell at `heading-lg` with tabular figures, large enough to
+ * read from across a desk. A leading zero is a digit. A "-" is a narrow separator between groups,
+ * not a cell. An `expired` code stays in place, dimmed, so the person sees which code lapsed while
+ * the caller says so under it. It only shows a code and takes no input.
  * @words The label says what the code is: *Pairing code*.
- * @access `role="img"` named by the label and the digits read one by one.
+ * @access `role="img"` named by the label and the characters read one by one, the groups apart.
  */
-function PairingCode({ code, label, className, ...props }) {
-    const digits = [...code];
-    return (_jsx("div", { ...props, "aria-label": `${label}: ${digits.join(" ")}`, className: cn("flex gap-2", className), "data-slot": "pairing-code", role: "img", children: digits.map((digit, place) => (_jsx("span", { "aria-hidden": "true", className: "grid h-16 w-12 place-items-center rounded-sm border border-border text-heading-lg text-foreground tabular-nums", "data-slot": "pairing-code-digit", children: digit }, place))) }));
+function PairingCode({ code, label, expired = false, className, ...props }) {
+    const groups = code.split("-").map((group) => [...group]);
+    return (_jsx("div", { ...props, "aria-label": `${label}: ${groups.map((group) => group.join(" ")).join(", ")}`, className: cn("flex items-center gap-2", expired && "opacity-50", className), "data-expired": expired || undefined, "data-slot": "pairing-code", role: "img", children: groups.map((group, groupPlace) => [
+            groupPlace > 0 ? (_jsx("span", { "aria-hidden": "true", className: "text-heading-lg text-muted-foreground", "data-slot": "pairing-code-separator", children: "-" }, `separator-${groupPlace}`)) : null,
+            ...group.map((digit, place) => (_jsx("span", { "aria-hidden": "true", className: "grid h-16 w-12 place-items-center rounded-sm border border-border text-heading-lg text-foreground tabular-nums", "data-slot": "pairing-code-digit", children: digit }, `${groupPlace}-${place}`))),
+        ]) }));
 }
 export { PairingCode };

package/dist/showcase/usage.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}

package/dist/showcase/usage.generated.js

@@ -96,7 +96,7 @@ export const USAGE = [
         module: "entry-scene",
         family: "Compositions",
         summary: "Nadia's entry screen, contained: the approved picture of the surface behind, the wordmark at the upper left, Nadia's ribbon and her words centred as one group. The screen is black in every theme.",
-        when: "Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things.",
+        when: "Nadia's installer and the desktop's sign-in, start, update and failure screens, which paint the same screen; a page that shows that screen beside other things; the top of every Nadia pairing drawer, contained at 16:9 with only its short status.",
         instead: "The Portal's entry pages are its funnel frame with the shared entry header; Alveare Server's entry is the HiveScene; a wait inside the product is a WaitingLine.",
         behaviour: "It holds no state and decides nothing: which view is open, the words and when the screen ends belong to whoever mounts it. Required: the picture, the wordmark and the heading, because every entry screen has all three; a screen that leaves one out does not compile. It fills a box of the window's own shape (`aspectRatio`), so the picture's figure stands on the window's floor (`pictureFeet`). A failure quiets the picture and never removes it. Its children stand in order: the message, the actions, the progress line, the stage list.",
         words: 'The heading names the surface and is never seen. Instructions and status are one plain sentence that changes only when the real stage changes ("Loading your tools").',
@@ -1118,12 +1118,12 @@ export const USAGE = [
         name: "PairingCode",
         module: "pairing-code",
         family: "Data",
-        summary: "The 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.",
-        when: "Pairing two devices or apps a person can see side by side: the four digits Nadia and Alveare Server both show while a Nadia asks to join.",
-        instead: "A code a person types is `InputOTP`. A link another device scans is `QrCode`.",
-        behaviour: "Each digit in its own cell at `heading-lg` with tabular figures, large enough to compare from across a desk. A leading zero is a digit. It only shows a code and takes no input.",
+        summary: "The short code a person reads on one screen to pair it with another: compared between two screens, such as the four digits Nadia and Alveare Server both show while a Nadia asks to join, or typed on another device, such as the code WhatsApp asks for to link a device by its phone number.",
+        when: 'Pairing two devices or apps a person can see side by side: the four digits Nadia and Alveare Server both show while a Nadia asks to join; or a code the person types on another device, such as WhatsApp\'s linking code ("5QTH-LMWG") they type on the phone under Linked devices.',
+        instead: "A code a person types into this screen is `InputOTP`. A link another device scans is `QrCode`.",
+        behaviour: 'Each character in its own cell at `heading-lg` with tabular figures, large enough to read from across a desk. A leading zero is a digit. A "-" is a narrow separator between groups, not a cell. An `expired` code stays in place, dimmed, so the person sees which code lapsed while the caller says so under it. It only shows a code and takes no input.',
         words: "The label says what the code is: *Pairing code*.",
-        access: '`role="img"` named by the label and the digits read one by one.',
+        access: '`role="img"` named by the label and the characters read one by one, the groups apart.',
     },
     {
         name: "Progress",

package/dist/styles/components.css

@@ -616,6 +616,14 @@
   }
 }
 
+/*
+ * Contained, the scene is a card: the words wrap within its middle so a long
+ * status never reaches the picture's figure at the left.
+ */
+.nc-entry-scene[data-contained] .nc-entry-body {
+  max-width: 56%;
+}
+
 /*
  * Alveare's entry scene, the hive (`components/hive-scene.tsx`), in the
  * composition of Nadia's entry screen: the app's picture on a black ground and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.154",
+  "version": "12.1.156",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,7 +84,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.3",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.154",
+    "@nadicodeai/design-system": "12.1.156",
     "@tanstack/react-table": "^9.3.1",
     "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",