pigment-mcp 0.4.1 → 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")
     });
@@ -34897,7 +34968,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@pigment/mcp",
-      version: "0.4.1",
+      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.",

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.