pigment-mcp 0.11.0 → 0.14.0

package/cli.js

@@ -34993,7 +34993,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@pigment/mcp",
-      version: "0.11.0",
+      version: "0.14.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

@@ -2,7 +2,7 @@
   "templates": [
     {
       "id": "margin-notes",
-      "latest": "1.1.0",
+      "latest": "1.2.0",
       "versions": [
         {
           "version": "1.0.0",
@@ -15,24 +15,36 @@
           "status": "published",
           "publishedAt": "2026-10-14T08:33:30.334Z",
           "sha256": "f6a26186965b8425d7b1ea620c737f58e8e907746b1550fb32a7b4bf98b6fa04"
+        },
+        {
+          "version": "1.2.0",
+          "status": "published",
+          "publishedAt": "2026-10-19T01:41:09.029Z",
+          "sha256": "99fb52e92bdc3b35b474a873f4bb4657e81d4e326cd26f8de56c1dc0b4a225f2"
         }
       ]
     },
     {
       "id": "inkleaf",
-      "latest": "1.0.0",
+      "latest": "1.1.0",
       "versions": [
         {
           "version": "1.0.0",
           "status": "published",
           "publishedAt": "2026-10-14T00:22:11.356Z",
           "sha256": "950225ff2a2540952b0acbdd499d07d8f78576262299a979d5d831145f51174b"
+        },
+        {
+          "version": "1.1.0",
+          "status": "published",
+          "publishedAt": "2026-10-19T05:40:05.888Z",
+          "sha256": "e2a38ffc279853fcb8b6de07028f16127319053e8b779f02a981ec396f26f85c"
         }
       ]
     },
     {
       "id": "night-cartridge",
-      "latest": "1.2.0",
+      "latest": "1.3.0",
       "versions": [
         {
           "version": "1.0.0",
@@ -51,6 +63,12 @@
           "status": "published",
           "publishedAt": "2026-10-18T13:46:07.189Z",
           "sha256": "82dcfe93ef26940ddbb6a3d6bf15c4ab4539638de605ee9b206512e42a98ad63"
+        },
+        {
+          "version": "1.3.0",
+          "status": "published",
+          "publishedAt": "2026-10-19T07:10:06.232Z",
+          "sha256": "8dfc70ec02127dbf36f6c439290c2fc4a64fe4efef971ac76ec48522411f2717"
         }
       ]
     },

package/content/shots.json

@@ -35,6 +35,24 @@
     "settings.mobileLight": "/showcase/margin-notes/1.1.0/settings/settings-profile-mobile-light.png",
     "settings.mobileDark": "/showcase/margin-notes/1.1.0/settings/settings-profile-mobile-dark.png"
   },
+  "margin-notes@1.2.0": {
+    "blog.desktopLight": "/showcase/margin-notes/1.2.0/blog/home-desktop-light.png",
+    "blog.desktopDark": "/showcase/margin-notes/1.2.0/blog/home-desktop-dark.png",
+    "blog.mobileLight": "/showcase/margin-notes/1.2.0/blog/home-mobile-light.png",
+    "blog.mobileDark": "/showcase/margin-notes/1.2.0/blog/home-mobile-dark.png",
+    "commerce.desktopLight": "/showcase/margin-notes/1.2.0/commerce/home-desktop-light.png",
+    "commerce.desktopDark": "/showcase/margin-notes/1.2.0/commerce/home-desktop-dark.png",
+    "commerce.mobileLight": "/showcase/margin-notes/1.2.0/commerce/home-mobile-light.png",
+    "commerce.mobileDark": "/showcase/margin-notes/1.2.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopLight": "/showcase/margin-notes/1.2.0/dashboard/home-desktop-light.png",
+    "dashboard.desktopDark": "/showcase/margin-notes/1.2.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileLight": "/showcase/margin-notes/1.2.0/dashboard/home-mobile-light.png",
+    "dashboard.mobileDark": "/showcase/margin-notes/1.2.0/dashboard/home-mobile-dark.png",
+    "settings.desktopLight": "/showcase/margin-notes/1.2.0/settings/settings-profile-desktop-light.png",
+    "settings.desktopDark": "/showcase/margin-notes/1.2.0/settings/settings-profile-desktop-dark.png",
+    "settings.mobileLight": "/showcase/margin-notes/1.2.0/settings/settings-profile-mobile-light.png",
+    "settings.mobileDark": "/showcase/margin-notes/1.2.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",
@@ -53,6 +71,24 @@
     "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"
   },
+  "inkleaf@1.1.0": {
+    "blog.desktopLight": "/showcase/inkleaf/1.1.0/blog/home-desktop-light.png",
+    "blog.desktopDark": "/showcase/inkleaf/1.1.0/blog/home-desktop-dark.png",
+    "blog.mobileLight": "/showcase/inkleaf/1.1.0/blog/home-mobile-light.png",
+    "blog.mobileDark": "/showcase/inkleaf/1.1.0/blog/home-mobile-dark.png",
+    "commerce.desktopLight": "/showcase/inkleaf/1.1.0/commerce/home-desktop-light.png",
+    "commerce.desktopDark": "/showcase/inkleaf/1.1.0/commerce/home-desktop-dark.png",
+    "commerce.mobileLight": "/showcase/inkleaf/1.1.0/commerce/home-mobile-light.png",
+    "commerce.mobileDark": "/showcase/inkleaf/1.1.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopLight": "/showcase/inkleaf/1.1.0/dashboard/home-desktop-light.png",
+    "dashboard.desktopDark": "/showcase/inkleaf/1.1.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileLight": "/showcase/inkleaf/1.1.0/dashboard/home-mobile-light.png",
+    "dashboard.mobileDark": "/showcase/inkleaf/1.1.0/dashboard/home-mobile-dark.png",
+    "settings.desktopLight": "/showcase/inkleaf/1.1.0/settings/settings-profile-desktop-light.png",
+    "settings.desktopDark": "/showcase/inkleaf/1.1.0/settings/settings-profile-desktop-dark.png",
+    "settings.mobileLight": "/showcase/inkleaf/1.1.0/settings/settings-profile-mobile-light.png",
+    "settings.mobileDark": "/showcase/inkleaf/1.1.0/settings/settings-profile-mobile-dark.png"
+  },
   "night-cartridge@1.0.0": {
     "blog.desktopLight": "/showcase/night-cartridge/1.0.0/blog/home-desktop-light.png",
     "blog.desktopDark": "/showcase/night-cartridge/1.0.0/blog/home-desktop-dark.png",
@@ -91,6 +127,16 @@
     "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"
   },
+  "night-cartridge@1.3.0": {
+    "blog.desktopDark": "/showcase/night-cartridge/1.3.0/blog/home-desktop-dark.png",
+    "blog.mobileDark": "/showcase/night-cartridge/1.3.0/blog/home-mobile-dark.png",
+    "commerce.desktopDark": "/showcase/night-cartridge/1.3.0/commerce/home-desktop-dark.png",
+    "commerce.mobileDark": "/showcase/night-cartridge/1.3.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopDark": "/showcase/night-cartridge/1.3.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileDark": "/showcase/night-cartridge/1.3.0/dashboard/home-mobile-dark.png",
+    "settings.desktopDark": "/showcase/night-cartridge/1.3.0/settings/settings-profile-desktop-dark.png",
+    "settings.mobileDark": "/showcase/night-cartridge/1.3.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",

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

@@ -0,0 +1,197 @@
+# Changelog
+
+## 1.1.0
+
+Inkleaf now fits any product. The rules that were written around example screens are rewritten for the kind of
+screen they describe, and a few that quietly removed content are fixed. The look itself is unchanged.
+
+- Missing images: ask what the image stands for. An image that stands for a thing becomes a drawing of that thing on
+  a plate or stage; an image that stands for information (a diagram, comparison, flow or chart) becomes a ghosted UI
+  preview on a media stage shaped like its caption, never a single pictogram. A missing image is never removed.
+- Card grids of items that each have their own subject (entries, articles, products, places, listings) show a plate on
+  every card, even when the data has no image field. Link lists, resources and settings groups stay text-only.
+- Long-form pages: the lead image or drawing spans the text column; the contents list sits beside the text from
+  `breakpoint.lg` and collapses to a disclosure below it.
+- Transaction summaries sit in a narrow sticky side column on wide screens and after the main content on narrow ones.
+- Stretched panels fill their height with their main content, with no empty band. Short metric cards sit at least two
+  per row at every width.
+- Stage colours follow the rotation rule only; no screen is tied to a colour. Offer and choice cards replace plan
+  cards in the rules.
+- A switch that applies immediately needs no Save button; inside a form it follows the form's submit.
+- Drawings: the failure examples are general (a small object read as a ball, a held object read as a head, a folded
+  item losing its defining detail) and the list of banned subjects is replaced by one rule: skip the first object
+  anyone would draw for the task unless the screen is literally about it.
+
+## 1.1.0-rc.3
+
+Internal candidate: one regression fixed in general terms. Tokens and signature recipes unchanged.
+
+- Imagery: new rule deciding which cards get a plate before looking at the data. A grid of items that each have their
+  own subject shows a plate on every card even when the data has no image field (the item's own drawing, the same one
+  on its detail page); the missing-image rules decide what goes on the plate, not whether there is one. Text-only
+  cards are for link lists, resources, settings groups and metadata rows. Mirrored in the Card grid and Long-form
+  content rows of Applying the concept and in the Card media variant.
+- Verification: "Every card grid of subject items has a plate on every card, whether or not the data has images."
+
+## 1.1.0-rc.2
+
+Internal candidate: two regressions from the generalization rewrite are fixed in general terms. Tokens and
+signature recipes unchanged.
+
+- Imagery: the missing-image rule splits by what the image is for. A thing (an item, someone's object, a page's
+  subject) becomes its own drawing on a plate or drawing stage; information (a diagram, screenshot, comparison,
+  chart, flow) becomes a ghosted preview on a media stage, shaped like its caption, with a recipe (raised card,
+  subtle tiles, skeleton bars, hairlines, no text). Never one object drawing under a caption about a structure
+  (also in the Never list, stage Where, the Long-form content row and Layout adaptation).
+- Layout adaptation: "stat rows wrap evenly whatever their count" becomes a density floor: short metric cards sit at
+  least two per row at every width (4 make 2x2 under `breakpoint.md`; odd counts end with three in the last row);
+  only cards holding a chart, a list or a form take a full row on a phone.
+- Verification: "At 390px, no full-width card holds only one number" and "Read each figure's caption: the figure
+  must show what the caption describes".
+
+## 1.1.0-rc.1
+
+Internal candidate: the package is rewritten for any product instead of the four test apps
+(`pipeline/claude-study/overfit-review-2026-10-19.md`). Design language, tokens and signature recipes unchanged.
+
+- Layout adaptation: the featured-post and article lines (which omitted figures without an image) become a
+  featured-item rule and a long-form page rule; an image placeholder becomes the item's own drawing, never removed.
+- Layout adaptation: cart and checkout becomes a transaction summary in a narrow sticky side column; store grid
+  becomes image card grids; the chart-card and stat-card lines become a stretched-panel rule (main content takes
+  the height) and stat rows that wrap evenly whatever their count.
+- Applying the concept: Settings, Dashboard, Store and Article rows describe what any product of that kind has
+  (Store is now "Item list and detail", Article "Long-form content"); no stage colors per screen.
+- Pastel stage Where: the per-screen color map is replaced by the rotation rule; plan cards become offer or choice
+  cards (rule 6, Where, Limits, Typography, card spec, Verification).
+- Pictogram recipe: the misreads seen in past runs and the run-derived subject ban list become general failure
+  modes and a "skip the stock symbol for the task" rule; the key example is replaced.
+- Switch: "applies immediately, never behind a Save button" becomes "a switch that applies immediately needs no
+  Save; inside a form, it follows the form's submit".
+- "Every app" becomes "every product screen"; card "Numbered trio" becomes "Numbered steps (any count)"; badge and
+  stat examples use neutral placeholders; the empty-state first-run stage takes the rotation color.
+
+## 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.1.0/agent/instructions.md

@@ -0,0 +1,44 @@
+## 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 follow Imagery (a thing becomes its drawing, information a ghosted preview); 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 card on a stage is fully visible. An item's drawing and plate color are the same wherever the item appears. Every card grid of subject items has a plate on every card, whether or not the data has images.
+- 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.
+- At 390px, no full-width card holds only one number; short metric cards sit two or more per row.
+- Read each figure's caption: the figure must show what the caption describes; a caption about a layout, list, board or comparison never sits under a single object 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.1.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.1.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` naming the count and what it counts ("3 unread"). A state marker ("Current", "Default") is a badge, never ink.

package/content/templates/inkleaf/1.1.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.1.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 offer: `size.pictoMd` drawing top-left; offer name serif `font.size.plan`; price sans
+`font.size.h3`; full-width primary; checklist with 16px check-circles. Media (every card in a grid of subject items, image field or not; text-only cards are for links, resources and metadata): 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 (a falling count of something bad is success), secondary if unknown. Numbered steps (any count): 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.1.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.1.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.1.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 stage (next color in the rotation) 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.1.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.1.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, on every product screen; 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.1.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.1.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. Switch 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`. A switch that applies
+immediately needs no Save; inside a form, it follows the form's submit.

package/content/templates/inkleaf/1.1.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.1.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.1.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.1.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.