pigment-mcp 0.8.0 → 0.11.0

package/cli.js

@@ -34493,7 +34493,7 @@ function resolveTokens(primitives, semantic) {
   for (const [path, token] of all) resolved.set(path, { value: resolveValue(token.value, /* @__PURE__ */ new Set([path])), type: token.type });
   return resolved;
 }
-var TemplateId, SemVer, Hex, AppId, Scenario, TemplateStatus, Manifest, DtcgType, DtcgToken, ComponentCategory, ComponentEntry, ComponentIndex, AUDIT_AREAS, AuditArea, Evidence, Signature, Analysis, RunRecord, GateResult, CriticScores, EvalReport, Registry;
+var TemplateId, SemVer, Hex, AppId, HoldoutAppId, RunAppId, Scenario, TemplateStatus, Manifest, DtcgType, DtcgToken, ComponentCategory, ComponentEntry, ComponentIndex, AUDIT_AREAS, AuditArea, Evidence, Signature, Analysis, RunRecord, GateResult, CriticFinding, score, CriticScores, EvalReport, Registry;
 var init_src = __esm({
   "../schema/src/index.ts"() {
     "use strict";
@@ -34502,6 +34502,8 @@ var init_src = __esm({
     SemVer = external_exports.string().regex(/^\d+\.\d+\.\d+(-[0-9a-z.-]+)?$/, "semantic version, e.g. 1.0.0 or 0.1.0-rc.1");
     Hex = external_exports.string().regex(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, "6 or 8 digit hex");
     AppId = external_exports.enum(["dashboard", "commerce", "blog", "settings"]);
+    HoldoutAppId = external_exports.enum(["landing", "docs"]);
+    RunAppId = external_exports.union([AppId, HoldoutAppId]);
     Scenario = external_exports.enum(["new", "existing", "ongoing"]);
     TemplateStatus = external_exports.enum(["draft", "candidate", "published", "deprecated"]);
     Manifest = external_exports.object({
@@ -34682,7 +34684,7 @@ var init_src = __esm({
       runId: external_exports.string(),
       template: TemplateId,
       version: SemVer,
-      app: AppId,
+      app: RunAppId,
       scenario: Scenario,
       agent: external_exports.enum(["claude", "codex"]),
       model: external_exports.string().optional(),
@@ -34700,17 +34702,33 @@ var init_src = __esm({
       threshold: external_exports.union([external_exports.number(), external_exports.string()]).optional(),
       detail: external_exports.string().optional()
     });
+    CriticFinding = external_exports.object({
+      severity: external_exports.enum(["blocker", "major", "minor"]),
+      /** Rubric area: referenceFidelity, crossAppConsistency, hierarchy, spacingRhythm, componentStates, polish, signature. */
+      area: external_exports.string(),
+      summary: external_exports.string(),
+      /** In how many of the evaluated samples it appears, and how many there were. */
+      samples: external_exports.number().int().min(0),
+      of: external_exports.number().int().min(1),
+      /** The spec's own wording or recipe causes it (a missing, ambiguous or contradictory rule). */
+      specCaused: external_exports.boolean().default(false),
+      evidence: external_exports.array(external_exports.string()).default([]),
+      /** A general rule that would prevent it in any product — never a fix tied to one demo app's screen or data. */
+      promptFix: external_exports.string().optional()
+    });
+    score = external_exports.number().min(0).max(5);
     CriticScores = external_exports.object({
-      referenceFidelity: external_exports.number().min(0).max(5).nullable(),
-      crossAppConsistency: external_exports.number().min(0).max(5),
-      hierarchy: external_exports.number().min(0).max(5),
-      spacingRhythm: external_exports.number().min(0).max(5),
-      componentStates: external_exports.number().min(0).max(5),
-      polish: external_exports.number().min(0).max(5),
-      /** Are the signature elements present across all four apps, placed per the application map, moving as specified? Null for packages without signatures. */
-      signature: external_exports.number().min(0).max(5).nullable().optional(),
-      notes: external_exports.array(external_exports.string()),
-      promptFixes: external_exports.array(external_exports.string()).describe("Concrete spec changes that would fix the observed problems")
+      /** Descriptive only (the verdict comes from findings). Older critic files gate on them. */
+      referenceFidelity: score.nullable().optional(),
+      crossAppConsistency: score.optional(),
+      hierarchy: score.optional(),
+      spacingRhythm: score.optional(),
+      componentStates: score.optional(),
+      polish: score.optional(),
+      signature: score.nullable().optional(),
+      findings: external_exports.array(CriticFinding).optional(),
+      notes: external_exports.array(external_exports.string()).default([]),
+      promptFixes: external_exports.array(external_exports.string()).default([]).describe("Concrete spec changes that would fix the observed problems")
     });
     EvalReport = external_exports.object({
       template: TemplateId,
@@ -34720,13 +34738,17 @@ var init_src = __esm({
       runs: external_exports.array(
         external_exports.object({
           runId: external_exports.string(),
-          app: AppId,
+          app: RunAppId,
           gates: external_exports.array(GateResult),
           metrics: external_exports.record(external_exports.string(), external_exports.number())
         })
       ),
       crossApp: external_exports.array(GateResult).default([]),
+      /** Measured layout defects (clipped or overlapping text, near-miss alignment, doubled rules, repeated drawings). */
+      layout: external_exports.array(external_exports.object({ app: RunAppId, runId: external_exports.string(), route: external_exports.string(), viewport: external_exports.string(), kind: external_exports.string(), where: external_exports.string(), detail: external_exports.string() })).optional(),
       critic: CriticScores.optional(),
+      /** Agent spend of this version and of its whole family (all candidates), for the record. */
+      cost: external_exports.object({ versionUsd: external_exports.number(), familyUsd: external_exports.number(), familyRuns: external_exports.number() }).optional(),
       verdict: external_exports.enum(["pass", "fail", "pending-review"]),
       reasons: external_exports.array(external_exports.string())
     });
@@ -34971,7 +34993,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@pigment/mcp",
-      version: "0.8.0",
+      version: "0.11.0",
       private: true,
       type: "module",
       description: "MCP server for Pigment design systems: tokens, rules, component specs and installation guides for your coding agent.",

package/content/registry.json

@@ -32,7 +32,7 @@
     },
     {
       "id": "night-cartridge",
-      "latest": "1.1.0",
+      "latest": "1.2.0",
       "versions": [
         {
           "version": "1.0.0",
@@ -45,6 +45,30 @@
           "status": "published",
           "publishedAt": "2026-10-15T04:49:09.540Z",
           "sha256": "a4e943cb722c1506dac7af6ab80341f3c28bbe1aef3184038d4a9cb863a06e30"
+        },
+        {
+          "version": "1.2.0",
+          "status": "published",
+          "publishedAt": "2026-10-18T13:46:07.189Z",
+          "sha256": "82dcfe93ef26940ddbb6a3d6bf15c4ab4539638de605ee9b206512e42a98ad63"
+        }
+      ]
+    },
+    {
+      "id": "graphite-blueprint",
+      "latest": "1.1.0",
+      "versions": [
+        {
+          "version": "1.0.0",
+          "status": "published",
+          "publishedAt": "2026-10-17T10:38:28.909Z",
+          "sha256": "0a34e9d7f81627182cd5fba1eb0c1aa758350479c5bed36adf2e5962386e49df"
+        },
+        {
+          "version": "1.1.0",
+          "status": "published",
+          "publishedAt": "2026-10-18T11:26:12.349Z",
+          "sha256": "f15b112756c795d50a806d53754f2946f3436bbb81a841154c6220da93139063"
         }
       ]
     }

package/content/shots.json

@@ -80,5 +80,51 @@
     "dashboard.mobileDark": "/showcase/night-cartridge/1.1.0/dashboard/home-mobile-dark.png",
     "settings.desktopDark": "/showcase/night-cartridge/1.1.0/settings/settings-profile-desktop-dark.png",
     "settings.mobileDark": "/showcase/night-cartridge/1.1.0/settings/settings-profile-mobile-dark.png"
+  },
+  "night-cartridge@1.2.0": {
+    "blog.desktopDark": "/showcase/night-cartridge/1.2.0/blog/home-desktop-dark.png",
+    "blog.mobileDark": "/showcase/night-cartridge/1.2.0/blog/home-mobile-dark.png",
+    "commerce.desktopDark": "/showcase/night-cartridge/1.2.0/commerce/home-desktop-dark.png",
+    "commerce.mobileDark": "/showcase/night-cartridge/1.2.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopDark": "/showcase/night-cartridge/1.2.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileDark": "/showcase/night-cartridge/1.2.0/dashboard/home-mobile-dark.png",
+    "settings.desktopDark": "/showcase/night-cartridge/1.2.0/settings/settings-profile-desktop-dark.png",
+    "settings.mobileDark": "/showcase/night-cartridge/1.2.0/settings/settings-profile-mobile-dark.png"
+  },
+  "graphite-blueprint@1.0.0": {
+    "blog.desktopLight": "/showcase/graphite-blueprint/1.0.0/blog/home-desktop-light.png",
+    "blog.desktopDark": "/showcase/graphite-blueprint/1.0.0/blog/home-desktop-dark.png",
+    "blog.mobileLight": "/showcase/graphite-blueprint/1.0.0/blog/home-mobile-light.png",
+    "blog.mobileDark": "/showcase/graphite-blueprint/1.0.0/blog/home-mobile-dark.png",
+    "commerce.desktopLight": "/showcase/graphite-blueprint/1.0.0/commerce/home-desktop-light.png",
+    "commerce.desktopDark": "/showcase/graphite-blueprint/1.0.0/commerce/home-desktop-dark.png",
+    "commerce.mobileLight": "/showcase/graphite-blueprint/1.0.0/commerce/home-mobile-light.png",
+    "commerce.mobileDark": "/showcase/graphite-blueprint/1.0.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopLight": "/showcase/graphite-blueprint/1.0.0/dashboard/home-desktop-light.png",
+    "dashboard.desktopDark": "/showcase/graphite-blueprint/1.0.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileLight": "/showcase/graphite-blueprint/1.0.0/dashboard/home-mobile-light.png",
+    "dashboard.mobileDark": "/showcase/graphite-blueprint/1.0.0/dashboard/home-mobile-dark.png",
+    "settings.desktopLight": "/showcase/graphite-blueprint/1.0.0/settings/settings-profile-desktop-light.png",
+    "settings.desktopDark": "/showcase/graphite-blueprint/1.0.0/settings/settings-profile-desktop-dark.png",
+    "settings.mobileLight": "/showcase/graphite-blueprint/1.0.0/settings/settings-profile-mobile-light.png",
+    "settings.mobileDark": "/showcase/graphite-blueprint/1.0.0/settings/settings-profile-mobile-dark.png"
+  },
+  "graphite-blueprint@1.1.0": {
+    "blog.desktopLight": "/showcase/graphite-blueprint/1.1.0/blog/home-desktop-light.png",
+    "blog.desktopDark": "/showcase/graphite-blueprint/1.1.0/blog/home-desktop-dark.png",
+    "blog.mobileLight": "/showcase/graphite-blueprint/1.1.0/blog/home-mobile-light.png",
+    "blog.mobileDark": "/showcase/graphite-blueprint/1.1.0/blog/home-mobile-dark.png",
+    "commerce.desktopLight": "/showcase/graphite-blueprint/1.1.0/commerce/home-desktop-light.png",
+    "commerce.desktopDark": "/showcase/graphite-blueprint/1.1.0/commerce/home-desktop-dark.png",
+    "commerce.mobileLight": "/showcase/graphite-blueprint/1.1.0/commerce/home-mobile-light.png",
+    "commerce.mobileDark": "/showcase/graphite-blueprint/1.1.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopLight": "/showcase/graphite-blueprint/1.1.0/dashboard/home-desktop-light.png",
+    "dashboard.desktopDark": "/showcase/graphite-blueprint/1.1.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileLight": "/showcase/graphite-blueprint/1.1.0/dashboard/home-mobile-light.png",
+    "dashboard.mobileDark": "/showcase/graphite-blueprint/1.1.0/dashboard/home-mobile-dark.png",
+    "settings.desktopLight": "/showcase/graphite-blueprint/1.1.0/settings/settings-profile-desktop-light.png",
+    "settings.desktopDark": "/showcase/graphite-blueprint/1.1.0/settings/settings-profile-desktop-dark.png",
+    "settings.mobileLight": "/showcase/graphite-blueprint/1.1.0/settings/settings-profile-mobile-light.png",
+    "settings.mobileDark": "/showcase/graphite-blueprint/1.1.0/settings/settings-profile-mobile-dark.png"
   }
 }

package/content/templates/graphite-blueprint/1.0.0/CHANGELOG.md

@@ -0,0 +1,77 @@
+# Changelog
+
+## 1.0.0
+
+First release of Graphite Blueprint: a near-black instrument panel. Graphite greys stacked in five steps,
+1px hairlines, pill controls and one indigo kept for focus and selection. The product's own interface is the
+main image, set on a softly lit stage; work in progress speaks in a 5x5 dot matrix and a passing shimmer, and
+explanations are drawn as isometric hairline blueprints with mono figure captions. Dark is the default, with a
+light mode in cool neutral greys.
+
+- Ten defining rules and a Never list: the ground covers most of every screen, text in four steps of grey,
+  indigo at most three times a screen, hairlines instead of shadows, pills and 8px panels.
+- Six signature recipes: the spotlit stage, the dot-matrix status glyph, isometric blueprints with marching
+  connectors, spec plates for items without a picture, the working shimmer, and the split section opener.
+- Motion in two speeds: state changes in 100 to 160ms, slow stepped loops only for work in progress, and every
+  loop frozen on a readable frame under reduced motion.
+- Layout rules for dense screens: side-by-side panels end together, tables keep a pinned first column on small
+  screens, and frames never nest more than two deep.
+- 13 specified components with designed states, Inter and Geist Mono (both openly licensed).
+
+## 0.1.0-rc.3
+
+Panels side by side now end on one line, pinned table columns on phones no longer cut the text beside them, and
+stores close with a statement over the dot field again. Spec plates have twice as many figures, so neighbouring cards
+no longer look alike.
+
+- Spotlit stage: "panels in one row align to their content" is replaced by "panels in one row end together": the chart
+  stage stretches to the row height (at least `size.stageMini`) or the list beside it is capped with "View all →";
+  no empty band inside a panel, no column ending more than `space.48` above its neighbour.
+- Applying the concept, dashboard: the chart and the activity list end on one line, otherwise the chart takes the full
+  row and activity goes below.
+- Table, small screens: the pinned column is opaque (`color.surface.default`, or `card` inside a card), with a 1px
+  `color.border.subtle` edge and a 16px fade over the scrolling cells; under `breakpoint.sm` secondary columns are
+  hidden instead of half-visible.
+- Applying the concept, closing: was "newsletter" only; now newsletter, store and blog list pages end with a two-tone
+  statement over the dot field (a store: its shipping or returns promise).
+- Spec plate: figure kinds 4 → 8 (bars, perspective grid, ringed sphere, square lattice added); neighbours in a grid
+  never share a kind (`specKinds`).
+- Blueprint: slab half-widths are rendered pixels, at least 40; slabs side by side get `size.blueprintMd` each, and a
+  narrow column shows one slab and the connector instead of four shrunk ones.
+- Text field: a failed submit shows the danger banner (hairline box, `color.status.dangerTint` wash, danger dot) on
+  every form, checkout included; never bare red text.
+- Verification: rows at 1440px end within 48px of each other; no table cell cut mid-letter at 390px.
+
+## 0.1.0-rc.2
+
+Rows and controls stay clickable, count badges are readable, captions describe the item, and frames no longer stack
+inside each other. Slab drawings have tighter corners, plate figures sit centred and connectors move.
+
+- Checkbox and radio: the row's hit area now comes from wrapping input and text in the `<label>` (or padding the
+  label), never from an overlay; controls inside a row or card with a stretched link get `position:relative;z-index:1`.
+- Never: nothing stacked above a native control; no stage inside a bordered card or frames nested more than two deep;
+  no copy that explains the system or how a drawing was made.
+- Badge: the count badge is its own `.count` class (16px, `color.action.primary` fill, `color.text.onAction`
+  numeral), never combined with the generic badge.
+- Spotlit stage: sits on the ground or in one hairline cell; a panel whose content is a quiet stage drops its border
+  and fill; panels in a row align to their content. The blog featured post is a wide plate, not a stage.
+- Blueprint: vertex rounding `r` 14% → 8% and `s` 7% → 5% of the half-width; every connector marches except a
+  stopped connection.
+- Spec plate: the fan figure is centred (origin at the tile's centre line, length 66 to 78); every figure stays inside
+  the central 78%; captions name the item.
+- Table: under `breakpoint.md` the first column keeps `white-space:nowrap` and `min-width:160px`, cells wrap to at
+  most 2 lines.
+- Verification: click each checkbox, radio and switch on the box itself, run the project's end-to-end tests (or say
+  they were not run), and check badge and count legibility in both modes.
+- Unused primitives `space.64`, `motion.easing.inOut` and `motion.distance.flow` removed.
+
+## 0.1.0-rc.1
+
+First candidate of Graphite Blueprint, derived from the reference study. Dark is canonical; light comes from the
+reference's documentation theme, with derived light versions of the stage, blueprint, spec plate and glyph.
+
+- Tokens: graphite ladder, four text steps, white-alpha hairlines, one indigo, light and dark semantics; tertiary text
+  and control outlines lifted for contrast.
+- Signature elements: spotlit stage (lit and quiet), dot-matrix glyph with dot field and meter, isometric hairline
+  blueprint, spec plate, working shimmer and live edges, split opener with two-tone voice and mono figures.
+- Thirteen components specified, empty state included.

package/content/templates/graphite-blueprint/1.0.0/agent/instructions.md

@@ -0,0 +1,38 @@
+## New project
+
+1. Inspect the stack; propose an installation plan and wait for approval. Ask which appearances the product supports. Both: tokens.css follows the device setting; a theme switch sets `data-theme` on `html` only if the product has or asks for one. One: dark (`<html data-theme="dark">`, `color-scheme: dark`) unless the user asks for light.
+2. Copy `dist/tokens.css` into global styles (or map `dist/tokens.json` into the theme); never retype values.
+3. Load Inter (variable, weights 400, 510 and 590) and Geist Mono 400 with `font-display:swap`. Root: body `color.surface.default`, `color.text.body`, sans `font.size.body`, `font.lineHeight.body`, `font.tracking.body`; headings primary; `pre, code, kbd, samp` mono; global `:focus-visible`; the reduced-motion block; `html, body{overflow-x:clip}`.
+4. Build the six signature elements first, as reusable pieces: `Stage` (lit and quiet), `DotGlyph` (with its pattern data), dot field and dot meter, `Blueprint` (`slab`, `link`), `SpecPlate` (with `specKinds`), shimmer, live edge, pulse and caret classes, `Opener`, `ScreenHead` and `.mono-label`. Review them (Verification) before any screen.
+5. Build the components with every state; place the signature elements per Applying the concept.
+6. Create `design-system/` with `VERSION` (system id and the spec's update date, e.g. `graphite-blueprint, updated 2026-01-31`), the tokens, and `components.md`: conventions, where each signature element is used, each blueprint's subject by screen.
+7. Add to `AGENTS.md` and `CLAUDE.md` (create if missing): "UI work follows design-system/ — read it before building screens."
+
+## Existing project
+
+1. Audit styling, components, routes and tests; propose a migration plan (what changes, what stays) and wait for approval. Ask about appearances as in New project.
+2. Map the tokens onto the existing variables (alias old names so nothing breaks mid-migration). A brand action color becomes `color.action.primary` (the inverse pill), never the accent.
+3. Build the signature elements, restyle one representative screen with them in place as a sample, and wait for review.
+4. Continue screen by screen, one commit each. Spinners become dot glyphs; missing images become spec plates. Never add delays, fake loading or working states, or a second `role="status"` region.
+5. Preserve routes, logic, API contracts, form fields and validation, test ids, text used by tests and accessibility attributes. Restyle existing markup; keep native inputs. 
+6. Finish with `design-system/` and the pointer lines from New project.
+
+## Ongoing development
+
+- Read `design-system/` first; use semantic tokens and existing components; no hard-coded colors, sizes, radii, shadows or durations.
+- Every new screen gets the signature elements its context calls for in Applying the concept; a screen without them is unfinished. 
+- Uncovered needs: compose from tokens and note it in `components.md`. Conflicting requests (colored primary, spinner, bold headings): present options.
+
+## Verification
+
+- Build and tests pass; no raw colors, sizes or radii outside the token files.
+- Review loop, two rounds or more: render each signature piece alone at 2x in dark and light (on a temporary route, removed before you finish, never committed); compare with its recipe: stage light peaking at the top edge and gone by 62%; 0.5px slab strokes, tight vertices (about 8%), faces hiding what is behind; distinct lit and unlit dots on a 3-unit pitch; plate figures centered, caption bottom-left. Note at least three differences, fix, render again.
+- Then each screen at 1440px and 390px, dark and light: no sideways scroll; at most 3 indigo uses; status and row actions visible; no bare `serif` or `monospace` text; frames at most two deep; captions name the item; every badge, chip and count (cart count too) legible at 2x; columns of a row end within 48px of each other (1440px); no table cell cut mid-letter at rest (390px).
+- Reduced motion (emulate the media feature): nothing loops, every glyph shows its rest frame, every block is final.
+- Tab through every screen: the indigo outline is always visible. Click each checkbox, radio and switch on the box itself, not its label. Run the project's end-to-end tests if the command exists; otherwise report they were not run.
+- Walk the ten rules and the Never list. Report files changed, what you could not apply, and your decisions.
+
+## Rollback
+
+- Each screen is its own commit and can be reverted alone.
+- Tokens, fonts, root setup and the signature pieces are separate commits, reverted last.

package/content/templates/graphite-blueprint/1.0.0/components/badge.md

@@ -0,0 +1,16 @@
+### Badge
+
+**Anatomy.** Height 20px, `radius.full`, padding 0 `space.8`, 1px `color.border.default`, transparent fill,
+`font.size.caption` sans 510 `color.text.body`; a leading 6px dot in the status hue (or a 12px status icon), gap
+`space.6`. Count badge: its own class, never combined with `.badge`; the numeral reads at 4.5:1 in both modes; on an
+icon button it sits inside the button (`position:absolute`, `pointer-events:none`):
+
+```css
+.count{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 var(--space-4);border:0;
+  border-radius:var(--radius-full);background:var(--color-action-primary);color:var(--color-text-on-action);
+  font:var(--font-weight-semibold) var(--font-size-micro)/1 var(--font-family-sans);font-variant-numeric:tabular-nums;}
+```
+
+**States.** Static by default. Interactive chips follow Interaction (filter chip). A running item gets the live edge
+on its badge only. Current: border `color.border.strong`.
+

package/content/templates/graphite-blueprint/1.0.0/components/button.md

@@ -0,0 +1,18 @@
+### Button
+
+**Use.** One inverse pill per region (form, dialog, header); secondary for the rest; ghost in toolbars and nav.
+
+**Anatomy.** Pill (`radius.full`), label `font.size.small` 510, sentence case, verb first, 1 to 3 words; optional
+trailing arrow or 16px icon, gap `space.6`. Sizes: `size.control` (padding 0 `space.12`), `size.controlLg` (0
+`space.16`; forms and content actions), `size.touch` (0 `space.20`, `font.size.body`; landing hero only). Icon
+button: square `size.controlSm`, `radius.full`, `aria-label`. Full width: `display:flex;width:100%`, centered.
+
+**Variants.** Inverse: `color.action.primary`, `color.text.onAction`. Secondary: `color.action.secondary`,
+`color.text.body`. Bordered: transparent, `color.text.secondary`, 1px `color.border.default`. Ghost: transparent,
+`color.text.secondary`. Danger: `color.action.danger`, `color.text.onDanger`. Send (message composers only): a
+`color.accent.default` circle with a `color.text.onAccent` icon.
+
+**States.** Hover, press, focus-visible: Interaction. Disabled: Interaction. Loading, only
+while a real request runs: a 12px scan glyph replaces the trailing icon, the label becomes a gerund ("Saving"), width
+held, `aria-busy="true"`. Done: the label returns; the result is announced in the status region.
+

package/content/templates/graphite-blueprint/1.0.0/components/card.md

@@ -0,0 +1,13 @@
+### Card
+
+**Anatomy.** `color.surface.card`, 1px `color.border.default`, `radius.md`, padding `space.20` (app) or `space.24`
+(content). Mono caption meta above the title; title `font.size.body` (590 app, 510 content) `color.text.primary`; body
+`color.text.secondary`. Media on top: a spec plate or photo, flush, the card padding below. KPI card: mono label, value
+`font.size.h3` 510 tabular, change in `font.size.small` with a 6px status dot (never a colored number). Plan card:
+tier slabs, name, price `font.size.h3`, 16px checks.
+
+**States.** Linked card: hover and focus per Interaction; the whole card is one link (the title link stretched with
+`::after`); controls inside get `position:relative;z-index:1`.
+Current or selected: border `color.border.strong` plus a "Current" badge. Loading: static bars on
+`color.surface.hover`. Error: a danger banner inside with Retry.
+

package/content/templates/graphite-blueprint/1.0.0/components/checkbox.md

@@ -0,0 +1,13 @@
+### Checkbox and radio
+
+**Anatomy.** 14px box, `radius.xs` (radio: circle), 1px `color.border.check`, transparent fill; label
+`font.size.small` `color.text.body`, gap `space.8`; row height `size.rowDense`. Group label:
+mono caption tertiary, or a 590 `font.size.body` title.
+
+**States.** Hover: Interaction. Focus-visible: outline on the box. Checked: fill and border
+`color.accent.default`, 1.5px `color.text.onAccent` check (radio: 6px inner dot).
+Indeterminate: a 6px bar. Disabled: `opacity.disabled`. Error: outline `color.status.danger` plus the field message.
+
+**Implementation.** Native input (`appearance:none`); `checked`, `name`, `value` and test ids unchanged. The row is the
+hit area by wrapping input and text in the `<label>` or padding the label, never an overlay over the input (no
+`label::after{position:absolute;inset:0}`). Controls in a row with a stretched link get `position:relative;z-index:1`.

package/content/templates/graphite-blueprint/1.0.0/components/dialog.md

@@ -0,0 +1,11 @@
+### Dialog
+
+**Anatomy.** Native `<dialog>` where it exists. Panel max `size.dialog`, `color.surface.subtle`, `radius.lg`,
+`elevation.popover`, padding `space.24`: mono caption label (the object or step), title `font.size.title` 590, body
+`font.size.body` `color.text.body`; footer right-aligned, gap `space.8`: bordered Cancel, then the inverse pill
+(danger for destructive confirms). Scrim `color.surface.overlay` with `backdrop-filter:blur(4px)`. Under
+`breakpoint.sm`: full width at the bottom, top corners `radius.lg`, actions stacked, primary first.
+
+**States.** Open and close: Motion; the scrim fades.
+Focus moves to the first control; Escape and Cancel close it and focus returns to the trigger. Submitting: button
+loading state. Error: a danger banner above the footer. `aria-labelledby` the title.

package/content/templates/graphite-blueprint/1.0.0/components/empty-state.md

@@ -0,0 +1,9 @@
+### Empty state
+
+**Anatomy.** Centered in its container, max 360px wide, padding `space.48` `space.24`: a drawing (the 48px empty
+glyph in panels and tables; a `size.blueprintMd` dimmed slab stack on full screens), `space.16`, a mono caption
+("NO RESULTS"), `space.8`, a two-tone sentence in `font.size.body` (what is empty, then what to do), `space.20`, one
+secondary pill (inverse when it is the screen's only action). Error variant: the error glyph or the broken-connector
+blueprint on a quiet stage, a mono code ("ERR 404"), a 590 heading and two pills.
+
+**States.** Static. Existing actions keep their labels and test ids.

package/content/templates/graphite-blueprint/1.0.0/components/index.json

@@ -0,0 +1,17 @@
+{
+  "components": [
+    {"name": "button", "category": "action", "status": "specified", "file": "button.md", "states": ["default", "hover", "focus-visible", "active", "disabled", "loading"]},
+    {"name": "text-field", "category": "form", "status": "specified", "file": "text-field.md", "states": ["default", "hover", "focus-visible", "disabled", "loading", "error"]},
+    {"name": "select", "category": "form", "status": "specified", "file": "select.md", "states": ["default", "hover", "focus-visible", "selected", "disabled", "error"]},
+    {"name": "checkbox", "category": "form", "status": "specified", "file": "checkbox.md", "states": ["default", "hover", "focus-visible", "selected", "disabled", "error"]},
+    {"name": "switch", "category": "form", "status": "specified", "file": "switch.md", "states": ["default", "hover", "focus-visible", "selected", "disabled", "loading"]},
+    {"name": "tabs", "category": "navigation", "status": "specified", "file": "tabs.md", "states": ["default", "hover", "focus-visible", "selected", "disabled"]},
+    {"name": "navigation", "category": "navigation", "status": "specified", "file": "navigation.md", "states": ["default", "hover", "focus-visible", "selected"]},
+    {"name": "card", "category": "surface", "status": "specified", "file": "card.md", "states": ["default", "hover", "focus-visible", "selected", "loading", "error"]},
+    {"name": "table", "category": "data-display", "status": "specified", "file": "table.md", "states": ["default", "hover", "focus-visible", "selected", "loading", "error"]},
+    {"name": "badge", "category": "data-display", "status": "specified", "file": "badge.md", "states": ["default", "hover", "selected"]},
+    {"name": "dialog", "category": "overlay", "status": "specified", "file": "dialog.md", "states": ["default", "focus-visible", "loading", "error"]},
+    {"name": "toast", "category": "feedback", "status": "specified", "file": "toast.md", "states": ["default", "loading", "error"]},
+    {"name": "empty-state", "category": "feedback", "status": "specified", "file": "empty-state.md", "states": ["default", "error"]}
+  ]
+}

package/content/templates/graphite-blueprint/1.0.0/components/navigation.md

@@ -0,0 +1,17 @@
+### Navigation
+
+**Header.** `size.header`, sticky (Shape and depth). Left: the product
+name as text (`font.size.body` 590); ghost nav pills (`size.control`, `font.size.small` 510, gap `space.4`); right:
+secondary links, a 1px 16px-tall `color.border.default` divider, one inverse pill. Cart or inbox: icon button with a
+count badge (Badge) at its top right. Under `breakpoint.md`: name, inverse pill and a menu icon button opening a sheet
+(`color.surface.subtle`, rows `size.row`, hairlines).
+
+**Sidebar.** `size.sidebar`, `color.surface.subtle`, hairline right edge, padding `space.12` `space.8`; group labels
+mono caption tertiary, `space.16` above; rows `size.rowDense`, `radius.sm`, 16px icon `color.icon.idle`,
+`font.size.dense` `color.text.secondary`. Current row: `color.surface.tint`, text and icon primary,
+`aria-current="page"`. Under `breakpoint.lg`: a pill row that scrolls inside itself.
+
+**Contents list.** `font.size.small` secondary links; the current one primary with a 2px `color.text.primary` bar
+on a hairline track at its left. Breadcrumbs: " / " separators.
+
+**Footer.** Hairline top; `font.size.small` secondary link columns under 510 primary titles.

package/content/templates/graphite-blueprint/1.0.0/components/select.md

@@ -0,0 +1,12 @@
+### Select
+
+**Anatomy.** Trigger like the text field (`size.field`, `radius.sm`, `color.surface.card`, 1px
+`color.border.default`), value `color.text.primary`, 16px chevron `color.icon.idle` at the right. Prefer the native
+`<select>` styled this way (`appearance:none`). Custom menus: `color.surface.raised`, `radius.md`,
+`elevation.popover`, padding `space.4`, rows `size.rowDense` with `radius.sm`, section labels mono caption tertiary,
+a 16px check at the right of the selected row.
+
+**States.** Hover, focus-visible: as Text field. Open: chevron and menu per Motion,
+the current option highlighted. Option hover or active: `color.surface.hover`. Disabled: `opacity.disabled`. Error: as Text field.
+
+**Keyboard and screen readers.** Custom menus: `role="listbox"`, arrows move, Enter selects, Escape closes and returns focus.

package/content/templates/graphite-blueprint/1.0.0/components/switch.md

@@ -0,0 +1,11 @@
+### Switch
+
+**Anatomy.** Track 28x16 `radius.full`; off: `color.surface.press` with 1px `color.border.check`, 12px thumb
+`color.text.secondary` inset 2px. On: track `color.accent.default`, thumb `color.text.onAccent` at the right. Label
+left in `font.size.small` `color.text.primary`, description below in `color.text.secondary`; the switch right-aligned
+in settings rows (`size.row`, hairline between rows). Group counts in mono caption ("4 / 6 ON").
+
+**States.** Hover: Interaction. Focus-visible: outline on the track. Toggle: thumb and track over
+`motion.duration.hover`, `motion.easing.standard`. Disabled: `opacity.disabled`.
+
+**Implementation.** `<input type="checkbox" role="switch">` stays native; its checked state drives the visuals.

package/content/templates/graphite-blueprint/1.0.0/components/table.md

@@ -0,0 +1,28 @@
+### Table
+
+**Anatomy.** No outer box: a hairline above the head and under each row (`color.border.subtle`), no zebra, no
+vertical rules. Head: mono caption uppercase `color.text.tertiary`, height `size.rowDense`. Rows `size.row`
+(`size.rowDense` from 20 rows), cells `font.size.small` `color.text.body`, padding 0 `space.12`; first column
+`color.text.primary` 510; IDs, timestamps and codes mono caption; numbers right-aligned tabular. Status: 14px status
+icon plus word. Row actions: ghost pills or icon buttons at the right. Sort: a 12px chevron after the head label.
+
+**States.** Hover, focus-visible (interactive rows) and selected (`aria-selected`): Interaction. Sorted head
+`color.text.secondary`, `aria-sort`. Syncing row: a 12px rise glyph in its status cell. Loading: 5 static rows of
+`color.surface.card` bars. Empty: the empty state in one full-width cell. Error: a danger banner above with Retry.
+
+**Small screens.** Under `breakpoint.md` the first column keeps `white-space:nowrap` and `min-width:160px`, and the
+table scrolls inside its wrapper; no cell wraps past 2 lines. The pinned column (status or actions) is opaque, with a
+1px edge and a 16px fade over the cells scrolling under it. Under `breakpoint.sm` hide
+secondary columns (location, last active, owner); to keep a value, show it as the first cell's second line via
+`content:attr(data-sub)`, never duplicated in the DOM.
+
+```css
+.pin{position:sticky;right:0;z-index:1;background:var(--pin-bg,var(--color-surface-default));box-shadow:inset 1px 0 0 var(--color-border-subtle);}
+.pin::before{content:"";position:absolute;inset-block:0;right:100%;width:var(--space-16);pointer-events:none;
+  background:linear-gradient(90deg,transparent,var(--pin-bg,var(--color-surface-default)));}
+tr:hover .pin{background:linear-gradient(var(--color-surface-tint),var(--color-surface-tint)),var(--pin-bg,var(--color-surface-default));}
+```
+
+Inside a card set `--pin-bg:var(--color-surface-card)`.
+
+**Accessibility.** Real `<table>`, `<th scope>`, sort buttons inside head cells.

package/content/templates/graphite-blueprint/1.0.0/components/tabs.md

@@ -0,0 +1,10 @@
+### Tabs
+
+**Anatomy.** Text tabs: `font.size.small` 510 `color.text.secondary`, height `size.control`, gap `space.24`, a
+`color.border.subtle` hairline under the row; the selected tab `color.text.primary` with a 2px `color.text.primary`
+indicator on the hairline that slides (Motion). Segmented pills (inside panels,
+option pickers): track `color.surface.card`, `radius.full`, padding `space.2`; items `size.controlSm`; the selected
+item `color.surface.press` with `elevation.ring`.
+
+**States.** Hover: `color.text.body`. Focus-visible: outline. Selected: as above, `aria-selected="true"`. Disabled:
+`opacity.disabled`. The panel swap does not animate. Keyboard: arrows, Home, End.

package/content/templates/graphite-blueprint/1.0.0/components/text-field.md

@@ -0,0 +1,17 @@
+### Text field
+
+**Anatomy.** Label above (`font.size.small` 510, `color.text.body`); control `size.field` high,
+`radius.sm`, `color.surface.card`, 1px `color.border.default`, padding 0 `space.12`, text `font.size.dense`
+`color.text.primary`, placeholder `color.text.tertiary`; helper (Spacing) in `font.size.caption` sans,
+`color.text.secondary`. Textarea: min 3 rows, padding `space.8` `space.12`; a counter right of the helper in mono
+caption ("120 / 160"). Search: pill (`radius.full`), `size.control`, 16px icon at `space.12`, text from 36px.
+
+**States.** Hover and focus-visible: Interaction.
+Disabled: `opacity.disabled` on `color.surface.subtle`. Error: border `color.status.danger`; the message replaces the
+helper in `color.status.danger`, `aria-invalid="true"`, `aria-describedby`; never a red fill. A failed submit, on
+every form (checkout too), shows a banner `space.32` above the actions (hairline box, `color.status.dangerTint` wash,
+6px danger dot, "2 fields need attention" in `color.text.body`, `role="alert"`), never bare red text, and focuses the
+first invalid field.
+Checking (async only): the helper becomes a shimmer line ("Checking").
+
+**Keyboard and screen readers.** Native input; the visible label is its `<label for>`.

package/content/templates/graphite-blueprint/1.0.0/components/toast.md

@@ -0,0 +1,11 @@
+### Toast
+
+**Anatomy.** Bottom right, `space.24` from the edges (full width minus `space.16` under `breakpoint.sm`), width
+`size.toast`, `color.surface.raised`, `radius.md`, `elevation.popover`, padding `space.12` `space.16`: a 16px leading
+status icon (the core glyph while running), text `font.size.small` `color.text.primary`, optional ghost
+action and close icon button. Up to 3 stacked, `space.8` apart.
+
+**States.** Enter and leave: opacity (Motion; leave `motion.duration.ui`). Running: live edge, title shimmer, core glyph; done: the done frame, then the check icon.
+Error: error icon, message, Retry. Auto-dismiss after 5s unless it has an action or focus.
+
+**Accessibility.** Text goes through the screen's one `role="status"` region (errors `role="alert"`); never steals focus.