pigment-mcp 0.4.0 → 0.5.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, Analysis, RunRecord, GateResult, CriticScores, EvalReport, Registry;
+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 init_src = __esm({
   "../schema/src/index.ts"() {
     "use strict";
@@ -34507,7 +34507,8 @@ var init_src = __esm({
     Manifest = external_exports.object({
       id: TemplateId,
       version: SemVer,
-      schemaVersion: external_exports.literal(1),
+      /** 2: the principles carry Signature elements, Interaction and Applying the concept (validate enforces them). */
+      schemaVersion: external_exports.union([external_exports.literal(1), external_exports.literal(2)]),
       name: external_exports.string().min(2).max(40),
       description: external_exports.string().min(20).max(240),
       status: TemplateStatus,
@@ -34581,10 +34582,56 @@ var init_src = __esm({
     ComponentIndex = external_exports.object({
       components: external_exports.array(ComponentEntry).min(1)
     });
+    AUDIT_AREAS = [
+      "color",
+      "typography",
+      "spacing",
+      "layout-grid",
+      "section-patterns",
+      "shape",
+      "borders",
+      "elevation",
+      "surfaces-and-backgrounds",
+      "buttons",
+      "links",
+      "navigation",
+      "forms",
+      "cards",
+      "disclosure",
+      "tabs",
+      "tables-and-data",
+      "feedback",
+      "overlays",
+      "iconography",
+      "illustration",
+      "media",
+      "motion-load",
+      "motion-scroll",
+      "motion-hover-and-press",
+      "motion-loop",
+      "theming",
+      "responsive",
+      "accessibility",
+      "writing-style"
+    ];
+    AuditArea = external_exports.enum(AUDIT_AREAS);
+    Evidence = external_exports.array(external_exports.string()).min(1).describe("Files under pipeline/<slug>/reference or JSON paths that show it");
+    Signature = external_exports.object({
+      name: external_exports.string(),
+      what: external_exports.string().describe("What it is and how it looks, measured"),
+      evidence: Evidence,
+      frequency: external_exports.string().describe("Where and how often it appears across the surveyed site"),
+      recipe: external_exports.string().describe("How to build an original one: construction, tokens, stroke and shape rules, code-level notes"),
+      motion: external_exports.string().describe("Trigger, keyframes, duration, easing, iterations \u2014 or 'static'"),
+      applicationMap: external_exports.array(external_exports.object({ context: external_exports.string(), use: external_exports.string() })).min(4).describe("Where it goes in any product: page headers, empty states, loading, onboarding, FAQ, section breaks, data screens\u2026"),
+      limits: external_exports.string().describe("How much per screen, where never, reduced-motion behavior"),
+      derived: external_exports.boolean().describe("true when the reference doesn't show it this way and it was derived")
+    });
     Analysis = external_exports.object({
       slug: external_exports.string(),
       references: external_exports.array(external_exports.object({ url: external_exports.string().url(), pages: external_exports.array(external_exports.string()) })),
       capturedAt: external_exports.string(),
+      survey: external_exports.object({ pagesSurveyed: external_exports.number().int(), pageTypes: external_exports.array(external_exports.string()), notes: external_exports.string() }),
       character: external_exports.object({
         summary: external_exports.string(),
         keywords: external_exports.array(external_exports.string()).min(3).max(8),
@@ -34602,10 +34649,32 @@ var init_src = __esm({
       spacing: external_exports.object({ basePx: external_exports.number(), scale: external_exports.array(external_exports.number()), notes: external_exports.string() }),
       shape: external_exports.object({ radii: external_exports.array(external_exports.object({ role: external_exports.string(), px: external_exports.number() })), borderWidths: external_exports.array(external_exports.number()), notes: external_exports.string() }),
       elevation: external_exports.array(external_exports.object({ role: external_exports.string(), css: external_exports.string() })),
-      motion: external_exports.object({ durationsMs: external_exports.array(external_exports.number()), easings: external_exports.array(external_exports.string()), notes: external_exports.string() }),
+      motion: external_exports.object({
+        durationsMs: external_exports.array(external_exports.number()),
+        easings: external_exports.array(external_exports.string()),
+        patterns: external_exports.array(
+          external_exports.object({
+            name: external_exports.string(),
+            trigger: external_exports.enum(["load", "scroll", "hover", "focus", "press", "open", "loop", "state-change"]),
+            target: external_exports.string(),
+            durationMs: external_exports.number(),
+            easing: external_exports.string(),
+            keyframes: external_exports.string().describe("What changes, from \u2192 to"),
+            evidence: Evidence
+          })
+        ).min(1),
+        reducedMotion: external_exports.string().describe("What the reference does under prefers-reduced-motion, and what the template will do"),
+        notes: external_exports.string()
+      }),
       layout: external_exports.object({ grid: external_exports.string(), density: Manifest.shape.tags.shape.density, maxWidthPx: external_exports.number().optional(), notes: external_exports.string() }),
-      components: external_exports.array(external_exports.object({ name: external_exports.string(), observations: external_exports.string(), states: external_exports.array(external_exports.string()) })),
+      patterns: external_exports.array(external_exports.object({ name: external_exports.string(), description: external_exports.string(), frequency: external_exports.string(), evidence: Evidence })).min(3).describe("Recurring layouts and UI patterns across pages: section rhythm, hero composition, card grids, logo walls, FAQ blocks\u2026"),
+      components: external_exports.array(external_exports.object({ name: external_exports.string(), observations: external_exports.string(), states: external_exports.array(external_exports.string()), evidence: Evidence })),
+      interactions: external_exports.array(external_exports.object({ element: external_exports.string(), hover: external_exports.string(), focus: external_exports.string(), press: external_exports.string(), open: external_exports.string().optional(), evidence: Evidence })).min(3),
+      theming: external_exports.object({ mechanism: external_exports.enum(["prefers-color-scheme", "toggle", "both", "none"]), notes: external_exports.string(), evidence: Evidence }),
       imagery: external_exports.object({ iconography: external_exports.string(), illustration: external_exports.string(), photography: external_exports.string() }),
+      signatures: external_exports.array(Signature).min(1),
+      writing: external_exports.object({ casing: external_exports.string(), tone: external_exports.string(), notes: external_exports.string() }).describe("Style only \u2014 never copy text"),
+      coverage: external_exports.array(external_exports.object({ area: AuditArea, status: external_exports.enum(["observed", "derived", "absent"]), note: external_exports.string() })),
       doNot: external_exports.array(external_exports.string()).describe("Things that would break the character"),
       ipRisks: external_exports.array(external_exports.string()).describe("Brand assets, proprietary fonts or distinctive marks that must NOT be carried over")
     });
@@ -34638,6 +34707,8 @@ var init_src = __esm({
       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")
     });
@@ -34854,8 +34925,7 @@ var init_src2 = __esm({
 // ../content/src/prompts.ts
 function specRef(id2, delivery) {
   if (delivery === "url") return `Spec: ${SITE_URL}/s/${id2}/agent.md`;
-  if (delivery === "mcp") return "Read the spec with the Pigment MCP tools (get_design_system, get_component_spec).";
-  return `Spec: dist/agent.md in the ${id2} package, unzipped under ./design-packages/`;
+  return "Read the spec with the Pigment MCP tools (get_design_system, get_component_spec).";
 }
 function buildPrompt(id2, mode2, delivery) {
   const spec = specRef(id2, delivery);
@@ -34898,7 +34968,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@pigment/mcp",
-      version: "0.4.0",
+      version: "0.5.0",
       private: true,
       type: "module",
       description: "MCP server for Pigment design systems: tokens, rules, component specs and installation guides for your coding agent.",
@@ -35038,7 +35108,7 @@ function createServer() {
     "get_references",
     {
       title: "Get references",
-      description: "Screenshots of four reference apps (dashboard, store, blog, settings) restyled with this system by an agent \u2014 desktop and mobile, light and dark \u2014 plus links to the system page, spec and offline package.",
+      description: "Screenshots of four reference apps (dashboard, store, blog, settings) restyled with this system by an agent \u2014 desktop and mobile, light and dark \u2014 plus links to the system page and the spec.",
       inputSchema: external_exports.object({ id, app: external_exports.string().optional().describe("Only one app: dashboard, commerce, blog or settings") }),
       annotations: { readOnlyHint: true }
     },
@@ -35050,7 +35120,6 @@ function createServer() {
           updated: updated(args.id),
           page: `${SITE_URL}/s/${args.id}`,
           spec: `${SITE_URL}/s/${args.id}/agent.md`,
-          package: `${SITE_URL}/download/${args.id}`,
           screenshots: shots
         },
         null,

package/content/registry.json

@@ -11,6 +11,18 @@
           "sha256": "e67b252ca8320bac932269460990143e99a2ec25c7fee2fa029af355076e29d1"
         }
       ]
+    },
+    {
+      "id": "inkleaf",
+      "latest": "1.0.0",
+      "versions": [
+        {
+          "version": "1.0.0",
+          "status": "published",
+          "publishedAt": "2026-10-14T00:22:11.356Z",
+          "sha256": "950225ff2a2540952b0acbdd499d07d8f78576262299a979d5d831145f51174b"
+        }
+      ]
     }
   ]
 }

package/content/shots.json

@@ -16,5 +16,23 @@
     "settings.desktopDark": "/showcase/margin-notes/1.0.0/settings/settings-profile-desktop-dark.png",
     "settings.mobileLight": "/showcase/margin-notes/1.0.0/settings/settings-profile-mobile-light.png",
     "settings.mobileDark": "/showcase/margin-notes/1.0.0/settings/settings-profile-mobile-dark.png"
+  },
+  "inkleaf@1.0.0": {
+    "blog.desktopLight": "/showcase/inkleaf/1.0.0/blog/home-desktop-light.png",
+    "blog.desktopDark": "/showcase/inkleaf/1.0.0/blog/home-desktop-dark.png",
+    "blog.mobileLight": "/showcase/inkleaf/1.0.0/blog/home-mobile-light.png",
+    "blog.mobileDark": "/showcase/inkleaf/1.0.0/blog/home-mobile-dark.png",
+    "commerce.desktopLight": "/showcase/inkleaf/1.0.0/commerce/home-desktop-light.png",
+    "commerce.desktopDark": "/showcase/inkleaf/1.0.0/commerce/home-desktop-dark.png",
+    "commerce.mobileLight": "/showcase/inkleaf/1.0.0/commerce/home-mobile-light.png",
+    "commerce.mobileDark": "/showcase/inkleaf/1.0.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopLight": "/showcase/inkleaf/1.0.0/dashboard/home-desktop-light.png",
+    "dashboard.desktopDark": "/showcase/inkleaf/1.0.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileLight": "/showcase/inkleaf/1.0.0/dashboard/home-mobile-light.png",
+    "dashboard.mobileDark": "/showcase/inkleaf/1.0.0/dashboard/home-mobile-dark.png",
+    "settings.desktopLight": "/showcase/inkleaf/1.0.0/settings/settings-profile-desktop-light.png",
+    "settings.desktopDark": "/showcase/inkleaf/1.0.0/settings/settings-profile-desktop-dark.png",
+    "settings.mobileLight": "/showcase/inkleaf/1.0.0/settings/settings-profile-mobile-light.png",
+    "settings.mobileDark": "/showcase/inkleaf/1.0.0/settings/settings-profile-mobile-dark.png"
   }
 }

package/content/templates/inkleaf/1.0.0/CHANGELOG.md

@@ -0,0 +1,127 @@
+# Changelog
+
+## 1.0.0
+
+First release of Inkleaf: warm ink on cream paper, a text serif for headings and a quiet sans for everything
+else, with almost no color. Its personality comes from hand-drawn brush-ink pictograms that draw themselves in
+once, frame by frame, and from soft pastel stages that hold product UI. Everything settles slowly.
+
+- Ten defining rules and a Never list: paper and ink grounds, one warm accent kept to focus rings and a single
+  hero drawing, serif headings in sentence case, depth from 1px rings and tonal bands instead of shadows.
+- Five signature recipes: brush-ink pictograms played once as a stepped sprite, pastel stages and plates,
+  serif headings that fade in word by word, a hand-drawn "working" glyph instead of a spinner, and ink-and-paper
+  ring controls.
+- Drawing rules an agent can follow: one subject per drawing taken from the app's own domain; hands built from
+  long, separate hairpin fingers in four poses (present, grip, pinch, point), no pose on more than a third of an
+  app's hands, with a wrist that runs off the edge of its plate or stage; a one-word test for every drawing; and
+  each product drawn as itself when it has no photo, in the same plate color on every screen.
+- Large drawings keep a solid, unbroken line that swells in the middle and thins at the ends, like a brush. Plates
+  and stages size their drawing by height, at most 416px, so no object is cut off at an edge.
+- Motion tokens for slow settles (750 to 1000ms), stepped loops and hover rings; under reduced motion every
+  drawing shows its final frame and nothing stays hidden.
+- 14 specified components, avatar and empty state included, with designed hover, focus, disabled, loading and
+  error states, and layout rules for dashboards, stores, articles and settings.
+- Light and dark themes with Source Serif 4, Instrument Sans and JetBrains Mono, all openly licensed.
+
+## 0.1.0-rc.4
+
+Fourth candidate, answering the third critic round: drawings show the product they stand for, fill their stages,
+draw hands that read as hands, and stop converging on the same office objects; card stages fit their content and
+plan cards stay visible on mobile; content is never hidden without script.
+
+- Missing images: was "the category's drawing on a plate"; now each item's own subject on its plate and the same
+  drawing on its detail stage, a category drawing only when one object is true of every item; Never adds one
+  product's drawing on another product's card or detail page.
+- Drawing size: the drawing box on a drawing stage or plate was 50% of the inner width; it is now 80% of the full
+  width, absolutely centered, so the ink spans 45 to 60%; the Never item names ink, not box.
+- Hands: the demo's diverging wrist strokes that stopped at y 113-114 are replaced by palm sides that run on as a
+  near-parallel wrist off the bottom edge; step 1 requires wrists 18 to 26 units apart leaving the box; the
+  silhouette test adds "reads as a creature: the wrist is wrong"; Never adds hands that read as creatures.
+- Stages: `aspect-ratio: 16 / 9` moved from `.stage` to `.stage--media`; card and chart stages hug their content
+  with `space.48` (`space.24` mobile) padding; under `breakpoint.md` cards on a stage stack in source order, all
+  fully visible, in dashboard and settings alike; never a horizontal strip.
+- Subjects: step 1 names the app's domain over generic office work and bans a steaming mug, magnifier, receipt,
+  envelope, lost glove, sock or mitten unless the screen is about it; no two drawings in one app share a
+  silhouette; header drawings are compared side by side at 48px; straight-edged subjects (set squares, rulers,
+  frames) are out unless every edge is bowed. Not-found drawings come from the app's domain, not "something lost".
+- Block rise: was "below-the-fold blocks start hidden"; now only script hides a block (`is-rise-ready`), blocks in
+  view on load are never hidden, and no script, print and reduced motion show final states.
+- Verification: grid cards' drawings name their product; plan cards fully visible at 390px; card stages hug
+  content; drawings checked on the real screens, never in preview pages or scratch files; `components.md` lists
+  each drawing's subject by screen.
+- Budget: SVG path data written without spaces; the stacked-table CSS block became one sentence; the Select menu
+  points at the Navigation menu; shorter pictogram and stage Where lines, blog and article layout lines, button
+  Use, rule 9 and several Never and Verification items.
+
+## 0.1.0-rc.3
+
+Third candidate, answering the second critic round: no more empty pastel blocks, stages keep their proportions,
+drawings read at small sizes and include hands more often, and a handful of product-screen details are pinned.
+
+- Missing images: a grid image without a photo was a plate with a `size.iconLg` category icon bottom-left; it is
+  now a 4:3 plate holding the category's drawing at 50% of its width, final frame, one drawing per category; a
+  grid without categories drops the media slot. Article figures without an image are omitted.
+- Stages: proportion now 16:9 to 1:1 (`.stage` gets `aspect-ratio: 16 / 9` as a minimum), never a banner; new
+  drawing stage (`stage--drawing`, 4:3, drawing at 50% of the inner width) for the blog home featured post and
+  for article or product images that are missing; a drawing on a stage spans 45 to 60% of its width.
+- Rule 4: was "every section opens with a pictogram"; now prose sections open with a `size.pictoLg` drawing,
+  list sections (more posts, related, archive) open with the h2 alone, and a second opener in one viewport is
+  `size.pictoMd`.
+- Pictogram recipe: the fixed subject list is replaced by a subject-picking method (task verb, three held
+  objects from the app's domain, clearest silhouette not yet drawn); no vehicles or toys, no subject the spec
+  names; at least half of each app's drawings include a hand; the defining feature is drawn first and oversized;
+  rectangular bodies are 2 to 4 bowed strokes; a 48px silhouette test.
+- Never list: adds a plate or stage holding only an icon or nothing, a stage flatter than 16:9, and a drawing
+  under 45% of its stage or plate.
+- Button: full width (`.btn--block`) keeps flex centering, never `display: block`.
+- Navigation: new Menu entry (items `size.control`, `font: inherit`, start-aligned; sign out after a hairline,
+  same size).
+- Table: toolbar row spec (title and count head, chips and visually labelled search `space.16` below); stacked
+  mobile tables hide the header row and sort with a native select.
+- Avatar: tile color was "hashed from the name"; now (sum of char codes) mod 3 over sage, lilac and apricot.
+- Motion: below-the-fold blocks start hidden and rise on entry; only reduced motion starts them final.
+- Verification: stages and plates never empty, stage proportions, blog featured drawing stage, centered button
+  labels at 390px, silhouette test and hand share.
+- Budget cuts: duplicated limits in the glyph, write-in and ring-control recipes, the connector-draw motion line,
+  the browser-chrome Never item (covered by components), card padding in Spacing, and assorted wording.
+
+## 0.1.0-rc.2
+
+Second candidate, answering the first critic round: pictograms animate as one visible stepped strip, the working
+glyph is honest, and product-screen layouts get explicit rules.
+
+- Pictogram recipe: per-frame `cel-flash`/`cel-hold` animations replaced by one sprite strip (`celStrip`) stepped
+  with `steps(n, jump-none)`; pre-play state shows the first stroke, never a blank frame; reduced motion shows the
+  final frame. Drawing limits: no straight segment over 15 units, boxy subjects bowed; `size.pictoSm` version with
+  5 to 7 strokes at 4.0 to 5.0 units and a 6/5 fill offset; the cup construction demo replaced by a hand holding
+  an egg (object, palm, thumb, noodle fingers, wrist).
+- Never list: automation detection to skip animations; artificial delays for a working state; glyph beside a
+  button; a second `role="status"`; text or summaries on a stage; small card adrift on a stage; repeated centered
+  placeholder icons. Rule 9: glyph only while a real request is pending, inside the control.
+- Motion: in-view-on-load entrances play immediately; nothing hidden more than one frame after entering view.
+- Stage limits: holds a chart, media, pictogram, plan cards or ghosted preview; card at least 60% of inner width.
+- Layout: product-screen header grid (drawing, h1, lede on one left edge, `body` lede), panel rows stretch with
+  titles inside cards, cart and checkout columns, store grid at 2 columns under `breakpoint.md`, article table of
+  contents after the lede on mobile, article h2 `h4` and h3 `h5`.
+- Components: Avatar spec added (40px, `radius.tile`); stat change colored by meaning; toast reuses an existing
+  status region; footer inverse band only with two or more link groups; header product name aligned to sidebar
+  text; table row hover on raised cards uses `color.surface.subtle`; missing images use a bottom-left category
+  icon in grids and a `size.pictoXl` drawing on detail stages.
+- Reduced motion: entrances never hide content; everything renders in its final state.
+- Budget cuts: the streaming caret companion, the FAQ, toast and dialog rows of Applying the concept, the radius
+  list (now one line), duplicate button-hover lines in Interaction and two Never items already covered by rules 2
+  and 3.
+
+## 0.1.0-rc.1
+
+First release candidate of Inkleaf, derived from the approved reference analysis (captured 2026-10-13).
+
+- Tokens: warm paper and ink neutrals, a single warm accent for focus, send square, working glyph and one hero
+  drawing; four stage pastels with derived night values; pictogram ink and fills; derived moss, ochre and harbor
+  status colors beside the observed brick error; Source Serif 4, Instrument Sans and JetBrains Mono; pixel-named
+  spacing; radii 4 to 32; ring widths 1 and 2px; hover, float and overlay shadows; motion from 83ms frames to
+  1200ms breaths on a settle curve; breakpoints 834, 992 and 1200.
+- Principles: ten rules, a Never list, and five signature recipes (cel-drawn ink pictogram, pastel stage, serif
+  write-in heading, written-loop working glyph, ink-and-paper ring controls), Interaction, Motion with reduced
+  motion, and an Applying the concept table covering 16 contexts including dashboards, tables, settings and stores.
+- Components: the 12 required plus empty state, all specified with states.

package/content/templates/inkleaf/1.0.0/agent/instructions.md

@@ -0,0 +1,42 @@
+## New project
+
+1. Inspect the stack; propose an installation plan and wait for approval.
+2. Copy `dist/tokens.css` into global styles (or map `dist/tokens.json` into the theme); never retype values. Dark follows `prefers-color-scheme` unless `[data-theme]` overrides it.
+3. Load Source Serif 4 400/500, Instrument Sans 400/500, JetBrains Mono 400 (`font-display:swap`). Root: the brush filters, global `:focus-visible`, the reduced-motion block, `html, body{overflow-x:clip}`, body `color.surface.default`, `color.text.primary`, sans `font.size.body`, and `pre, code, kbd, samp{font-family:var(--font-family-mono); font-size:var(--font-size-small)}`.
+4. Build the signature elements first, as reusable pieces: pictogram (stepped strip, play once, boil), stage, drawing stage and plate, write-in heading, working glyph and breathing dot, ring-control classes.
+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. `inkleaf, updated 2026-01-31`), the tokens, and `components.md`: conventions, where each signature element is used, each drawing's subject by screen and its one word.
+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.
+2. Map the tokens onto existing variables; a brand action color becomes `color.action.primary`, never the accent.
+3. Build the signature elements, then restyle one representative screen as a sample (header pictogram, written-in h1, its stage where allowed) and wait for review.
+4. Continue screen by screen, one commit each. Never add delays, toasts or `role="status"` regions the screen did not have. Missing images become drawings (Imagery); spinners the glyph.
+5. Preserve routes, logic, API contracts, form fields, validation, test ids, text used by tests and accessibility attributes. Restyle existing markup; never replace native inputs.
+6. Finish with `design-system/` and the pointer lines from New project.
+
+## Ongoing development
+
+- Read `design-system/` first; semantic tokens and existing components, no hard-coded values.
+- Every new screen gets the signature elements its context calls for; a screen without them is unfinished. New pictograms get new subjects.
+- Uncovered needs: compose from tokens and note it in `components.md`; conflicting requests (brand color, spinner, bold headings): present options.
+
+## Verification
+
+- Build and tests pass; no raw colors, sizes or radii outside the token files.
+- Review under reduced-motion emulation (every block, frame and heading final); never change code, motion or config to review.
+- Each screen at 1440px and 390px, light and dark: no sideways scroll; statuses and row actions visible; product headers identical; panel rows share edges; button labels vertically centered; no text in the browser's bare `monospace` or `serif`.
+- Stages and plates hold content (never a flat block or lone icon); drawing and media stages 16:9 to 1:1, card and chart stages hug content; at 390px every plan card is fully visible. Each grid card's drawing names its product and matches its detail page; its plate color is the same everywhere.
+- Zoom one plate and one drawing stage to 200% at 1440px: strokes continuous, no notches, full in the middle and thin at the ends, ink within the weight targets; the featured drawing never outweighs the h1. On every plate and stage each wrist reaches the edge, the object stays at least `space.16` inside every edge, and at most 35% of the height is empty above the drawing.
+- Tab through every screen (focus always visible); click every checkbox, radio and switch (each toggles).
+- Pictograms: original subjects, none banned, no two alike in one app; every drawing, plates included, passes the one-word test; frames = strokes + 3, none repeated; each steps in as one strip (never blank, no marks from a neighboring frame) and holds. h1s write in once; the glyph runs only during real requests.
+- Line up the app's hands: at least half the drawings; long, separate fingers; no pose on over a third; neighboring plates differ.
+- Check drawings on the real screens; never create preview pages, galleries or scratch files.
+- 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 signature pieces are separate commits, reverted last.

package/content/templates/inkleaf/1.0.0/components/avatar.md

@@ -0,0 +1,8 @@
+### Avatar
+
+**Anatomy.** A `size.control` (40px) square tile, `radius.tile`, serif initials `font.size.h5`, 400,
+`color.text.primary`; a photo fills the tile, clipped. Tile color: (sum of the name's char codes) mod 3 picks
+`color.stage.sage`, `color.stage.lilac` or `color.stage.apricot` (header account avatar too).
+Never smaller, except the header account button (`size.controlSm`). Stacks overlap by `space.8` with a 2px `color.surface.default` ring.
+
+**States.** Linked: focus-visible outline, no hover change. `alt=""` beside a visible name, otherwise the name.

package/content/templates/inkleaf/1.0.0/components/badge.md

@@ -0,0 +1,8 @@
+### Badge
+
+**Anatomy.** Height `space.24`, padding 0 `space.8`, `radius.badge`, `font.size.caption`, 500, gap `space.6`.
+
+**Variants.** Outline: inset 1px `color.border.control` ring, `color.text.secondary`. Stone:
+`color.action.tertiary`, `color.text.primary`. Status: outline plus a `space.6` dot and text in `color.status.*`;
+running dots breathe; never a filled status color or pastel. Count: `radius.full`, `space.20` min, ink fill,
+`color.text.onAction`, `aria-label` ("3 items in cart"). A state marker ("Current plan") is a badge, never ink.

package/content/templates/inkleaf/1.0.0/components/button.md

@@ -0,0 +1,16 @@
+### Button
+
+**Use.** One ink primary per region, paper secondary for the rest, stone tertiary for small utilities; danger
+only confirms a destructive action.
+
+**Anatomy.** The ring-controls recipe. Small `size.controlSm`, padding 0 `space.12`, `font.size.small`; default
+`size.control`, 0 `space.16`; large `size.controlLg`, 0 `space.24`, `font.size.body`. Optional `size.icon` icon,
+gap `space.8`; icon-only is square with `aria-label`. Full width
+(`.btn--block`): `display:flex; width:100%`, still centered, never `display:block`. Labels 500, verb first, 1 to 3 words. On
+`color.surface.inverse`: primary fill `color.text.inverse`, label `color.surface.inverse`; ghost transparent,
+`color.text.inverse`, 1px `color.border.inverse` ring.
+
+**States.** Hover, focus-visible, active: Interaction. Disabled: `color.surface.subtle`, `color.text.disabled`.
+Loading, only while a real request is pending: glyph and gerund replace the label inside the button, width held,
+`aria-busy="true"`. Danger: `color.action.danger`,
+`color.text.onAction`, hover ring in the same color.

package/content/templates/inkleaf/1.0.0/components/card.md

@@ -0,0 +1,14 @@
+### Card
+
+**Anatomy.** `color.surface.raised`, `radius.card`, inset 1px `color.border.default` ring, padding `space.32`
+(`space.24` on product screens and mobile), no resting shadow. Title serif `font.size.h5`, 500; body
+`font.size.ui`, `color.text.secondary`; meta `font.size.caption`, `color.text.tertiary`.
+
+**Variants.** Feature or plan: `size.pictoMd` drawing top-left; plan name serif `font.size.plan`; price sans
+`font.size.h3`; full-width primary; checklist with 16px check-circles. Media: a 4:3 plate on top (photo or the item's own drawing),
+body padding `space.20`. Stat: label `font.size.small`; value sans `font.size.h3`, `tabular-nums`; change
+`font.size.caption`, colored by meaning, not sign (fewer incidents is success), secondary if unknown. Numbered trio: hairline top rule, mono "01", serif title.
+
+**States.** Linked hover and focus-visible: Interaction; one stretched title link. Selected: 2px inset
+`color.action.primary` ring. Loading: static `color.surface.subtle` skeleton bars. Error: a `color.status.danger`
+line and a secondary "Retry".

package/content/templates/inkleaf/1.0.0/components/checkbox.md

@@ -0,0 +1,11 @@
+### Checkbox and radio
+
+**Anatomy.** The native `<input>` with `appearance:none` is the visible control and takes every click:
+`size.iconLg` square, `radius.badge` (radio `radius.full`), `color.surface.raised`, inset 1px `color.border.check`
+ring. The tick is a sibling 12px SVG (1.75px stroke, `color.text.onAction`) over the box with
+`pointer-events:none`; the radio dot is an inset 5px `color.action.primary` ring on a `color.text.onAction` fill.
+Label `font.size.ui` at `space.8`; rows at least `size.touch`; groups in a `<fieldset>`.
+
+**States.** Hover: ring `color.text.primary`. Focus-visible: outline. Selected: `color.action.primary` fill,
+`motion.duration.press`. Disabled: `color.surface.subtle`, ring `color.border.default`, label
+`color.text.disabled`. Error: ring `color.status.danger`, message under the group.

package/content/templates/inkleaf/1.0.0/components/dialog.md

@@ -0,0 +1,10 @@
+### Dialog
+
+**Anatomy.** Native `<dialog>` with `showModal()`. `color.surface.raised`, `radius.stage`, padding `space.32`,
+width `min(var(--size-dialog), 100% - 2 * var(--space-16))`, centered, `shadow.overlay`; backdrop `color.surface.overlay`. Title serif `font.size.h4`, 500, static; body `font.size.ui`,
+`color.text.secondary`; actions right, `space.32` below, gap `space.12`: cancel secondary, confirm primary or
+danger; stacked full width under `breakpoint.md`.
+
+**States.** Open and close per Motion. Focus-visible on open: first field, or cancel for destructive confirms.
+Loading: glyph in confirm, others disabled. Error: `color.status.danger` line above actions, `role="alert"`.
+Escape closes; focus returns to the trigger.

package/content/templates/inkleaf/1.0.0/components/empty-state.md

@@ -0,0 +1,8 @@
+### Empty state
+
+**Anatomy.** Centered, max width `size.dialog`, padding `space.64` `space.24`: a `size.pictoLg` drawing
+(`size.pictoMd` in cards and tables) that plays once, `space.24`, serif `font.size.h4` title written in, `space.8`,
+one `color.text.secondary` line, `space.24`, one action. First
+run: on a small lilac stage over a ghosted skeleton (raised cards at 60% opacity, no text).
+
+**Variants.** Filtered-empty: the title names the filter, the action clears it. Not found and error: `size.pictoXl`, serif h1, two actions.

package/content/templates/inkleaf/1.0.0/components/index.json

@@ -0,0 +1,18 @@
+{
+  "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"] },
+    { "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", "focus-visible", "error"] },
+    { "name": "empty-state", "category": "feedback", "status": "specified", "file": "empty-state.md", "states": ["default", "error"] },
+    { "name": "avatar", "category": "data-display", "status": "specified", "file": "avatar.md", "states": ["default", "focus-visible"] }
+  ]
+}

package/content/templates/inkleaf/1.0.0/components/navigation.md

@@ -0,0 +1,26 @@
+### Navigation
+
+**Header.** `size.header`, sticky, `color.surface.default`, 1px `color.border.default` bottom ring. Product name
+as serif `font.size.h5` text (no invented logo); in a product shell its left edge lines up with the sidebar item
+text (`space.16` + `space.12` from the edge). Links `font.size.ui`, `color.text.secondary`, padded boxes
+`size.controlSm` high, gap `space.16`; current `color.text.primary`, 500, `aria-current="page"`. Right: small
+secondary, then small primary. Below `breakpoint.lg`, more than 3 links collapse into a `size.touch` menu button
+opening a sheet of hairline `size.touch` rows.
+
+**Menu** (account, row actions). `color.surface.raised`, `radius.tile`, `shadow.overlay`, padding `space.6`. Every item, link or
+`<button>`, is `size.control` high, full width, `display:flex; align-items:center`, padding 0 `space.12`,
+`font:inherit` at `font.size.ui`, `text-align:start`, `radius.control`. A header line (the email): caption,
+tertiary, not interactive. Sign out and destructive items come last after a hairline, same size and inset.
+
+**Sidebar** (from `breakpoint.lg`). `size.sidebar`, right hairline, padding `space.16`; items `size.control`,
+`radius.control`, padding 0 `space.12`, 16px icon; current `color.surface.subtle`, `color.text.primary`, 500; group
+labels `font.size.micro` uppercase `color.text.tertiary`. Below `breakpoint.lg` it collapses into the header's
+`size.touch` menu button and sheet, in every product app; never a link grid above the content.
+
+**Breadcrumb.** `font.size.small`, `color.text.secondary`, "/" in `color.text.tertiary`, `space.16` below.
+
+**Footer.** Content sites with two or more link groups: `color.surface.inverse` band, padding `space.96` 0,
+caption link columns in `color.text.inverseMuted`. Otherwise, and in product apps: a hairline, then one caption
+line, padding `space.24` 0.
+
+**A11y.** `<nav aria-label>`, skip link, Escape closes menus.

package/content/templates/inkleaf/1.0.0/components/select.md

@@ -0,0 +1,10 @@
+### Select
+
+**Anatomy.** Text field's box, label, hint and error, `appearance:none`, a 16px chevron in
+`color.text.secondary` at `space.12` from the right. Prefer native `<select>`. Custom menu: the Navigation menu's
+surface and items, max height 320px; selected option 500 with a 16px check.
+
+**States.** Hover, focus-visible, disabled, error: as Text field. Open: chevron rotates 180°, menu per Motion.
+Option hover and keyboard-active: `color.surface.hover`.
+
+**A11y.** Custom menus: `listbox`, `aria-expanded`, arrows, typeahead, Escape returns focus.

package/content/templates/inkleaf/1.0.0/components/switch.md

@@ -0,0 +1,11 @@
+### Switch
+
+**Anatomy.** `<input type="checkbox" role="switch">` with `appearance:none` is the track: `size.control` x
+`space.24`, `radius.full`, `color.surface.subtle`, inset 1px `color.border.check` ring. Thumb: sibling span,
+`space.16` circle, `color.surface.raised`, `pointer-events:none`, `space.4` inset. Settings rows: label left,
+`font.size.small` secondary description below, at least `size.touch`, hairline below.
+
+**States.** Hover: ring `color.text.primary`. Focus-visible: outline on the track. Selected: track
+`color.action.primary`, thumb `color.text.onAction`, moved `space.16` over `motion.duration.hover`,
+`motion.easing.settle`. Disabled: ring `color.border.default`, label `color.text.disabled`. Applies immediately,
+never behind a Save button.

package/content/templates/inkleaf/1.0.0/components/table.md

@@ -0,0 +1,25 @@
+### Table
+
+**Anatomy.** In a clipped card or bare. Head row `size.rowDense`, eyebrow type (Typography). Rows `size.rowDense` (comparison `size.row`), `font.size.dense`, hairlines only, no
+zebra; cells padding 0 `space.16`; first column `color.text.primary`, others secondary; numbers right,
+`tabular-nums`; `table-layout:fixed`. A header cell aligns like its cells (numbers right; text and badges start),
+never at the card edge over a column whose content starts elsewhere. Group rows: serif `font.size.h5`. Booleans: check-circle or thin cross. Status: badge, running ones breathe. Row actions last:
+small secondary buttons or a `size.controlSm` menu button.
+
+**Toolbar** (a table in a card). Card head: one row, serif `font.size.h5` title left, count `font.size.caption`
+`color.text.tertiary` right. Toolbar row `space.16` below: filter chips left, search right, both `size.control` high,
+centered; the search label visually hidden, never stacked above the field.
+
+**States.** Hover, focus-visible, selected: Interaction. Sortable header: a button, `aria-sort`, sorted column
+`color.text.primary` with a 12px arrow. Loading: 5 static skeleton rows. Empty: the empty state with a
+`size.pictoMd` drawing. Error: danger line and "Retry".
+
+**Mobile** (under `breakpoint.md`): tables with status or actions stack and hide the header row; sorting moves to a native "Sort by" select in the toolbar. Others scroll in a
+labelled `role="region"` wrapper, `tabindex="0"`.
+
+Stacked: `thead` visually hidden; table, `tbody`, `tr`, `td` `display:block`; rows padded `space.12` `space.16`
+over a hairline; each `td` a grid `minmax(96px, 38%) 1fr`, gap `space.12`, its `data-label` in a `::before` at
+`font.size.caption`, `color.text.tertiary`. Every stacked label and value is start-aligned: reset numeric
+`text-align:right` there.
+
+Keep `<table>`, explicit `role`s, `data-label` per cell, `<th scope>`.

package/content/templates/inkleaf/1.0.0/components/tabs.md

@@ -0,0 +1,12 @@
+### Tabs
+
+**Variants.** Segmented (views of one thing, up to 5): track `color.surface.subtle`, `radius.tile`, padding
+`space.4`; segments `size.controlSm`, padding 0 `space.16`, `radius.control`, `color.text.secondary`; selected: a
+`color.surface.raised` pill with 1px `color.border.default` ring, `color.text.primary`, 500. Underline (page
+sections): tabs `size.control`, gap `space.24`, hairline below; selected `color.text.primary`, 500, 2px
+`color.action.primary` rule.
+
+**States.** Hover, focus-visible, selected: Interaction. Disabled: `color.text.disabled`, skipped by arrows.
+Mobile: underline tabs scroll in their own strip; segmented go full width.
+
+**A11y.** `tablist`, `tab`, `tabpanel`, `aria-selected`, arrows. Filter chips: `aria-pressed` buttons.

package/content/templates/inkleaf/1.0.0/components/text-field.md

@@ -0,0 +1,12 @@
+### Text field
+
+**Anatomy.** Label above (`font.size.ui`, 500), `space.8`; control `size.control` high (never shrinks in a flex
+row), `radius.control`, `color.surface.raised`, inset 1px `color.border.strong` ring, padding 0 `space.12`,
+placeholder `color.text.tertiary`; hint `space.6` below, `font.size.small`, `color.text.secondary`. Search: 16px
+icon at `space.12`, text from `space.40`, own clear button (hide `::-webkit-search-cancel-button`). Textarea: min 3 rows, padding `space.12`. Prompt field:
+`radius.tile`, send square at the right.
+
+**States.** Hover: ring `color.border.check`. Focus-visible: outline, ring unchanged. Disabled:
+`color.surface.subtle`, `color.text.disabled`. Error: ring `color.status.danger`; the message replaces the hint in
+`color.status.danger`, `aria-invalid`, `aria-describedby`; no red fill. A failed submit adds "2 fields need attention"
+above the actions (`role="alert"`) and focuses the first invalid field. Loading: glyph inside, right.

package/content/templates/inkleaf/1.0.0/components/toast.md

@@ -0,0 +1,8 @@
+### Toast
+
+**Anatomy.** Bottom-right at `space.24` (mobile: bottom, full width minus `space.16`). `color.surface.raised`,
+`radius.tile`, inset 1px `color.border.default` ring, `shadow.overlay`, padding `space.12` `space.16`, max width
+`size.dialog`, `font.size.ui`. Leading: the glyph while running, a 16px check-circle on success. Optional action, close button. Error: 2px inset `color.status.danger` left rule.
+
+**States.** Enter and leave per Motion; at most 3, gap `space.8`. Success dismisses after 5s, paused on hover or focus;
+errors stay. `role="status"` (errors `alert`); if the screen already has a status region, "Saved" goes there instead.