@nadicodeai/design-system 0.19.2 → 0.21.0

package/AGENTS.md

@@ -38,7 +38,7 @@ Handoff gate: `npm run lint:design && npm run lint && npm run build && npm run t
 - `DESIGN.md` `## Components` is the semantic component catalog; CSS is its implementation, and `tests/guards/component-contract-matches-css.test.ts` derives the two-way fence without a copied inventory.
 - `DESIGN.md` stays contract-only and spec-shaped: check `npm exec --package=@google/design.md -- design.md spec` before changing YAML fields; exact reusable values go in YAML, application guidance in prose; add a non-spec YAML field only when repo code or a test reads it (spec-shape don'ts: `DESIGN.md` "Do's and Don'ts").
 - Seams and grids are computed, single-owner, never eyeballed (doctrine home: `DESIGN.md` "## Layout" and "Seam Ownership").
-- External references are source-first: read live DOM/CSSOM rules before authoring; screenshots verify, they never author. Map every imported behavior to `DESIGN.md` or an explicit user approval, ask when the contract leaves a decision open, and never import reference mood, polarity, decoration, or animation uninvited. Stop and re-read source before a second visual patch to the same component.
-- Name everything as NadicodeAI-owned primitives; source brands (Vercel, Attio) appear only in reference notes, never in names, comments, or contracts.
+- Authoring is contract-first: a visual behavior comes from `DESIGN.md`, from our own shipped surfaces, or from an explicit user approval — never from another product's rendered output (ADR 0047). Screenshots verify, they never author. Ask when the contract leaves a decision open, and stop and re-read `DESIGN.md` before a second visual patch to the same component.
+- Name everything as NadicodeAI-owned primitives. A source brand appears only in a `../docs/adr/` decision record, as the history of what once inspired a choice; never in a name, a comment, a contract, or any living design document (ADR 0047).
 - Any change to package-consumed output ends with an explicit release decision, a version bump or a `[no-publish]` commit marker (enforced by the pre-push release gate; procedure: `../docs/internal/npm-publishing.md`).
 - The deleted `design-canvas/` prototypes live only in git history. `src/css/motion.css` owns shared runtime motion primitives, while `src/js/chat-autoplay.js` is the single allowed runtime JS enhancer; never reconstruct the prototypes or add a second runtime JS surface.

package/DESIGN.md

@@ -399,7 +399,7 @@ Do not delete a color because the current website kernel does not consume it. Pr
 
 ### Meter and bullet grammar
 
-- **Meter and bullet grammar**: cap and included-usage bars carry a positional threshold tick at the product-configured warning fraction (80% is the common default; the fraction is a consumer input, never a constant of this contract) and a cap tick at 100%. Overflow renders as a distinct segment continuing past the cap tick, never clamped away. Severity state tokens (`{colors.state-*}`) reinforce position, never act as the sole signal. The current value reads at the bar tip. Every meter carries an accessible name, and its `aria` values clamp to the meter maximum.
+- **Meter and bullet grammar**: cap and included-usage bars carry a positional threshold tick at the product-configured warning fraction (80% is the common default; the fraction is a consumer input, never a constant of this contract) and a cap tick at 100%. Overflow renders as a distinct segment continuing past the cap tick, never clamped away. Severity state tokens (`{colors.state-*}`) reinforce position, never act as the sole signal. The current value reads at the bar tip. Every meter carries an accessible name, and its `aria` values clamp to the meter maximum. A meter has two scales. At panel scale the grammar above holds whole. At row scale — a meter inside a membership row, shown only once the value is already past the warning rung — it is a warning rather than a gauge: it drops both ticks and the tip value for a percent and a thin bar on one line, because a row cannot encode position legibly and the reader is asking how close the wall is, not how many. The overflow segment and the accessible name survive at both scales; the words a caption would have printed live in that name.
 
 ### Mark specs
 
@@ -419,7 +419,7 @@ Do not delete a color because the current website kernel does not consume it. Pr
 
 ## Typography
 
-Geist Sans carries all narrative and interface copy, including the entity-status `status-tag` family. Geist Mono is reserved for eyebrows, labels, run-state `state-tag` labels, code, traces, and small technical metadata.
+Geist Sans and Geist Mono are the two families. Each token below carries its own — `caption-mono` and `code` are Geist Mono, every other token is Geist Sans — and its Use column says what that token is for. The register law that decides which family a given string takes, and what a card, panel, or section title therefore takes, is stated once in `## Components` → **`label-mono`**.
 
 All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not use viewport-scaled type (no `vw`/`vh` font sizing): use fixed token sizes stepped by breakpoint-specific rules when a headline must grow. The two large display tiers carry a small negative tracking — `display-xl` at `-1.5px` and `display-lg` at `-1px` — so large type reads optically tight; this is a display-heading-only exception and every non-display tier stays at `0px`.
 
@@ -439,7 +439,7 @@ All body, title, caption, and code typography uses `letterSpacing: 0px`. Do not
 | `{typography.body-sm-strong}` | 14px | 500    | 20px        | Emphasised secondary copy and compact labels.                              |
 | `{typography.caption}`        | 12px | 400    | 16px        | Footer secondary lines and badge labels.                                   |
 | `{typography.caption-strong}` | 12px | 500    | 16px        | Entity-status `status-tag` labels.                                         |
-| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, labels, run-state `state-tag` labels.                            |
+| `{typography.caption-mono}`   | 12px | 500    | 16px        | Eyebrows, identifiers and code, run-state `state-tag` labels.              |
 | `{typography.code}`           | 13px | 400    | 20px        | Tool calls, snippets, traces.                                              |
 | `{typography.button-lg}`      | 16px | 500    | 24px        | Marketing-scale button labels.                                             |
 | `{typography.button-md}`      | 14px | 500    | 18px        | Standard button and control labels.                                        |
@@ -584,7 +584,7 @@ Interface CSS components provide small metadata, label, and link chrome. They in
 
 Interactive CSS components must expose a visible `:focus-visible` state using the `{spacing.focus-ring-width}` full-opacity `{colors.focus-ring}` / `{colors.dark-focus-ring}` role with no offset. Do not remove outlines without that contrast-safe equivalent.
 
-**`label-mono`** — mono eyebrow/label text for section labels and low-priority metadata.
+**`label-mono`** — mono eyebrow text, identifiers and code, and low-priority metadata. The mono register marks what the machine owns, not what a heading says, so a card, panel, or section title never takes it: titles are sentence-case sans.
 
 **`badge-secondary`** — small rounded metadata badge for "New", "Beta", "Live", or similar labels.
 
@@ -745,6 +745,8 @@ The NadicodeAI logo has three approved forms:
 2. **Mark.** The two interlocked rounded-square links may stand alone where space is tight: favicons, app icons, avatars, watermarks, stamps, and compact navigation. A containing link or control names NadicodeAI when the mark is used without visible text.
 3. **Wordmark.** The NadicodeAI letterforms may stand alone where the name must read by itself, including document headers and editorial layouts.
 
+Other companies' marks are not NadicodeAI company logos and are not governed by anything in this section. They are generated identity images owned by `@nadicodeai/ui/components/brand-icons`, decided in [`docs/adr/0042-third-party-brand-marks-are-generated-identity-images.md`](../docs/adr/0042-third-party-brand-marks-are-generated-identity-images.md). A third-party mark never enters a NadicodeAI logo form, composition, or clear-space measurement.
+
 Nadia's portrait and generated imagery are not NadicodeAI company logos. Their identity and selection rules live in [`brand/visual-design/NADIA-VISUAL-IDENTITY.md`](../brand/visual-design/NADIA-VISUAL-IDENTITY.md); editorial imagery routes through [`brand/visual-design/EDITORIAL-ILLUSTRATION.md`](../brand/visual-design/EDITORIAL-ILLUSTRATION.md). This contract owns only the package delivery interface.
 
 The approved transparent Nadia master ships at `assets/nadia-solid-surface`.

package/README.md

@@ -14,7 +14,7 @@ Import the complete CSS module once:
 
 That interface includes the generated tokens, mode aliases, semantic role maps, page geometry, type utilities, motion primitives, and framework-agnostic CSS components. Apply `.dark` to the document root or to a scoped static composition to select dark mode. The generation and cascade mechanics live only in [`DESIGN.md`, "CSS Architecture & Token Pipeline"](./DESIGN.md#css-architecture--token-pipeline).
 
-Geist and Geist Mono (SIL Open Font License 1.1) are optional package assets. A static consumer that does not supply its own font loading can import the `@font-face` shim:
+That interface also registers the brand typeface. Geist and Geist Mono (SIL Open Font License 1.1) ship with the package, and the CSS module declares their `@font-face` rules and loads the woff2 files from package paths, so no consumer supplies its own font loading. The `@font-face` shim stays exported for a consumer that wants the faces without the CSS module:
 
 ```css
 @import "@nadicodeai/design-system/assets/fonts/geist.css";
@@ -100,8 +100,7 @@ accessibility contract.
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- Geist + Geist Mono, then the bundle -->
-    <link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system/assets/fonts/geist.css" />
+    <!-- One stylesheet: tokens, geometry, components, and the brand typeface -->
     <link rel="stylesheet" href="https://unpkg.com/@nadicodeai/design-system/css" />
     <!-- In a bundler, prefer a CSS entry: @import "@nadicodeai/design-system/css"; -->
   </head>

package/dist/css/assets/fonts/OFL.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2023 Vercel, in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/css/index.css

@@ -1,5 +1,43 @@
 @layer tokens, theme, reset, foundation, motion, layout, primitives, components;
 
+/* src/assets/fonts/geist.css */
+/*!
+ * Geist & Geist Mono — SIL Open Font License 1.1
+ * © 2023 Vercel, in collaboration with basement.studio
+ * Source: https://github.com/vercel/geist-font. The full licence ships as
+ * OFL.txt beside the font files this stylesheet points at.
+ * Marked as a legal comment so the attribution survives into the bundled
+ * public artifact that ships those files.
+ */
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/Geist-Variable.woff2) format("woff2");
+}
+@font-face {
+  font-family: "Geist";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/Geist-Italic.woff2) format("woff2");
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/GeistMono-Variable.woff2) format("woff2");
+}
+@font-face {
+  font-family: "Geist Mono";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(./assets/fonts/files/GeistMono-Italic.woff2) format("woff2");
+}
+
 /* src/css/tokens.generated.css */
 @layer tokens {
   :root {
@@ -875,8 +913,6 @@
       opacity: 0;
       transform: none;
     }
-    .nc-transition-paint,
-    .nc-transition-opacity,
     .nc-transition-transform {
       transition: none;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.19.2",
+  "version": "0.21.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -154,6 +154,7 @@
     "generate:favicons": "tsx scripts/generate-favicons.ts",
     "lint:design": "design.md lint DESIGN.md",
     "lint": "eslint --max-warnings=0",
+    "typecheck": "tsc -p tsconfig.json",
     "test": "vitest run",
     "test:visual": "playwright test --config playwright.visual.config.ts",
     "prepublishOnly": "npm run build"

package/src/assets/fonts/geist.css

@@ -1,7 +1,10 @@
-/*
+/*!
  * Geist & Geist Mono — SIL Open Font License 1.1
  * © 2023 Vercel, in collaboration with basement.studio
- * Source: https://github.com/vercel/geist-font (see ./OFL.txt).
+ * Source: https://github.com/vercel/geist-font. The full licence ships as
+ * OFL.txt beside the font files this stylesheet points at.
+ * Marked as a legal comment so the attribution survives into the bundled
+ * public artifact that ships those files.
  */
 
 @font-face {