pigment-mcp 0.5.0 → 0.6.0

package/cli.js

@@ -34968,7 +34968,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@pigment/mcp",
-      version: "0.5.0",
+      version: "0.6.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,13 +2,19 @@
   "templates": [
     {
       "id": "margin-notes",
-      "latest": "1.0.0",
+      "latest": "1.1.0",
       "versions": [
         {
           "version": "1.0.0",
           "status": "published",
           "publishedAt": "2026-10-12T14:38:41.015Z",
           "sha256": "e67b252ca8320bac932269460990143e99a2ec25c7fee2fa029af355076e29d1"
+        },
+        {
+          "version": "1.1.0",
+          "status": "published",
+          "publishedAt": "2026-10-14T08:33:30.334Z",
+          "sha256": "f6a26186965b8425d7b1ea620c737f58e8e907746b1550fb32a7b4bf98b6fa04"
         }
       ]
     },

package/content/shots.json

@@ -17,6 +17,24 @@
     "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"
   },
+  "margin-notes@1.1.0": {
+    "blog.desktopLight": "/showcase/margin-notes/1.1.0/blog/home-desktop-light.png",
+    "blog.desktopDark": "/showcase/margin-notes/1.1.0/blog/home-desktop-dark.png",
+    "blog.mobileLight": "/showcase/margin-notes/1.1.0/blog/home-mobile-light.png",
+    "blog.mobileDark": "/showcase/margin-notes/1.1.0/blog/home-mobile-dark.png",
+    "commerce.desktopLight": "/showcase/margin-notes/1.1.0/commerce/home-desktop-light.png",
+    "commerce.desktopDark": "/showcase/margin-notes/1.1.0/commerce/home-desktop-dark.png",
+    "commerce.mobileLight": "/showcase/margin-notes/1.1.0/commerce/home-mobile-light.png",
+    "commerce.mobileDark": "/showcase/margin-notes/1.1.0/commerce/home-mobile-dark.png",
+    "dashboard.desktopLight": "/showcase/margin-notes/1.1.0/dashboard/home-desktop-light.png",
+    "dashboard.desktopDark": "/showcase/margin-notes/1.1.0/dashboard/home-desktop-dark.png",
+    "dashboard.mobileLight": "/showcase/margin-notes/1.1.0/dashboard/home-mobile-light.png",
+    "dashboard.mobileDark": "/showcase/margin-notes/1.1.0/dashboard/home-mobile-dark.png",
+    "settings.desktopLight": "/showcase/margin-notes/1.1.0/settings/settings-profile-desktop-light.png",
+    "settings.desktopDark": "/showcase/margin-notes/1.1.0/settings/settings-profile-desktop-dark.png",
+    "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"
+  },
   "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",

package/content/templates/margin-notes/1.1.0/CHANGELOG.md

@@ -0,0 +1,92 @@
+# Changelog
+
+## 1.1.0
+
+Margin Notes is now called Pigment Margin Notes, because it is the design of this site itself. The design
+is unchanged: projects that already use it need no changes.
+
+- Name: "Margin Notes" → "Pigment Margin Notes". The id `margin-notes`, spec links and MCP calls stay the same.
+
+## 1.0.0
+
+First release of Margin Notes: warm paper and ink, hairlines, a tightly tracked grotesk, and studio details
+(watercolor bloom, tape, pencil notes, one serif word) kept to the margins, in light and "night paper" dark.
+Ten defining rules, a Never list, 18 specified components with designed states, copyable recipes for every
+studio detail, and agent instructions for new and existing projects.
+
+Changes since 0.1.0-rc.3 (critic avg 3.83; one failed gate: a commerce smoke test could not click a checkbox):
+
+- Checkbox, radio and switch: the native input is the visible control (`appearance: none`, class `check` /
+  `switch`), so it takes every click; drawn boxes and thumb spans get `pointer-events: none`. Never list:
+  a decorative layer that intercepts clicks on a native control. Verification: click each one with the mouse.
+- Segmented control: new tokens `color.surface.selected` (dark `#38362f`, lighter than the track) and
+  `color.border.selected` (dark ring 4.6:1 on the track); the selected segment carries the ring in both themes.
+- Hatch toned down: `color.decor.hatch` light `#d4cfc4` (1.25:1 on the tray), dark `#3f3d37` (1.34:1), 10px
+  pitch, stated range 1.15:1 to 1.35:1; grids of 3 or more asset-less frames use 3:2.
+- Linked-card hover: 1px `color.text.tertiary` ring plus title underline (was an invisible border step).
+- Search fields hide the browser clear button; the system's own clear button is specified. Native selects
+  drop the default arrow. Never list: browser-default chrome.
+- Focus rings never touch text: header links are padded `size.controlSm` boxes; inline links get padding and
+  a 3px offset.
+- Success feedback: a toast, or a success badge with a check icon for in-place status text; never a bare
+  colored word. The toast covers every save and submit.
+- Dialog: exact centering CSS for native and custom dialogs, mobile width, initial focus ring visible.
+- Hierarchy: h1 repeats moved to the Never list with the "Projects / All projects" example; state markers
+  ("Current plan") are neutral badges, never button-sized ink; the article table of contents is a right rail
+  or a collapsed "On this page" after the meta line, never between breadcrumb and h1; headings balance-wrap.
+- Spacing: card grids `align-items: start`, cards span only the columns their content fills (no card more
+  than 30% empty); the mobile action bar is fixed to the viewport at full width; tables use
+  `table-layout: fixed` with column widths so filtering moves no column; inline badges get `space.8`.
+- Mono rule: numbers inside sentences and status lines stay sans.
+- Contradictions resolved: serif words are allowed in blog post titles but not on product, project or record
+  pages; pencil-note words must restate their target (per-app wording given; the store note no longer
+  prescribes fixed text); the settings note sits inside the sidebar (`--note-x: space.16`).
+- Budget: shadows written with 8-digit hex, unused tokens removed (`color.action.disabled`, `color.code.ring`,
+  `font.size.display`, `font.tracking.normal`, `size.rowCompact`), prose compressed; bundle 5,993 words.
+
+## 0.1.0-rc.3
+
+Revision answering the critic review of rc.2 (avg 3.67). Header band sized to content, a visible hatch token,
+stacked mobile tables that keep status and actions, pencil-note anchoring recipe, dark switch thumb and
+lifted surface, rebuilt night bloom, lighter charts, stat cards, one container width in every app, article
+prose spacing, empty states on the h1's axis, and an exact mono rule. Details in `pipeline/pigment-study/iterations.md`.
+
+## 0.1.0-rc.2
+
+Revision answering the first critic review of rc.1 (avg 3.25, polish 2.5; all automated gates passed).
+
+- Bloom: new recipe in a full-bleed band (`overflow-x: clip`, never `overflow: hidden` on an ancestor), a feathered
+  radial `mask-image` so no straight edge can appear, a 500 x 320 box inside a 320px-min band, and a separate
+  geometry below 1200px (176 x 112, behind the h1 only, ending above the lead). Empty-state bloom placement.
+- Dark bloom: new `mn-wash-night` filter (blurred, no grain or rim) switched by `prefers-color-scheme` and
+  `[data-theme]`; dark `opacity.bloom` 0.22 → 0.3.
+- Serif word: never a whole title, only in titles of 2 or more words, max 1 per screen, per-app list (none in
+  settings, forms, cart, checkout, product and record pages). Added to Never.
+- Mobile: no horizontal scroll at 390px (`overflow-x: clip` on root, `min-width: 0`), navs with more than 3 links
+  collapse to a menu button, tables scroll in their own wrapper (up to 4 columns) or stack (5 or more), sticky-bar
+  pages get bottom padding.
+- Controls: explicit input, select and search heights that never shrink in flex rows (rule 8); switch off-track and
+  checkbox borders use `color.text.tertiary` for 3:1.
+- Media frame "no asset" state (tray, hatch, one 20px outline icon); illustrated placeholders added to Never.
+- Object pages use the 44px `h1Article` size; no h2 repeating the h1; status badge next to the title.
+- Mono rule 7 made explicit (tables, spec rows, key/value rows, totals; prices and stat values stay sans).
+- Pencil notes: one concrete placement per app type.
+- States: hover, focus-visible, disabled and error moved into rule 9 and the Never list; Verification gains
+  code-checkable rules for agents that cannot render.
+- Cards in mixed rows align to the top; featured cards span grid columns; product name as text, no icon.
+- Trimmed for the 6,000-word budget: component Do/Don't lines folded into states or the Never list, swash filter
+  without rim, removed the unavailable badge variant, the alternate pencil arrow and the second tape clip-path.
+
+## 0.1.0-rc.1
+
+First release candidate of Margin Notes, derived from the approved reference analysis (captured 2026-10-12; see `provenance` in the manifest).
+
+- Tokens: warm paper neutrals, ink action and focus, deep status colors including a derived ochre warning and
+  derived status tints, decor colors for the watercolor bloom and tape, code colors, radii 5 to 20 plus pill,
+  a pixel-named spacing scale, a type scale with size-dependent tracking, weights 400/500/600, rest, pinned and
+  segment elevation, motion 120/180ms on `cubic-bezier(0.2, 0, 0, 1)`, breakpoints 860/1200/1440.
+- Dark mode "night paper" is derived (the reference is light only): action and focus invert to paper.
+- Principles: the ten defining rules, a Never list, and "Studio details in a product" with placement limits,
+  per-app guidance and copyable recipes for the bloom, tape, pencil note, serif word and swash.
+- Components: the 12 required components specified with derived disabled, loading and error states, plus
+  segmented control, chip, code block, callout, empty state and media frame.

package/content/templates/margin-notes/1.1.0/agent/instructions.md

@@ -0,0 +1,44 @@
+## Setup notes for this system
+
+- **Fonts** (OFL): Geist 400/500/600, Geist Mono 400/500, Instrument Serif 400 italic, Caveat 400; `font-display: swap`.
+- **Theme:** dark follows `prefers-color-scheme` unless `[data-theme]` overrides it, both handled by `tokens.css`; a toggle only sets `data-theme`.
+- **Root:** the filter SVG once; `html, body { overflow-x: clip }`; global `:focus-visible`. Body `color.surface.default`, `color.text.body`, `font.size.body`, `font.lineHeight.ui`, `font.family.sans`.
+
+## 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`); never retype values.
+3. Set up the root; build components with every state, then the studio details.
+4. Create `design-system/` with `VERSION` (`margin-notes@1.0.0`), the tokens and `components.md`.
+5. 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, shared components, routes and tests.
+2. Propose a migration plan and wait for approval.
+3. Map the tokens onto existing variables, aliasing old names; a brand action color becomes `color.action.primary`.
+4. Restyle one representative screen and wait for review; then go screen by screen, one commit each.
+5. Preserve routes, business logic, API contracts, form fields and validation, test ids, text used by tests, accessibility attributes. Restyle existing markup; add classes, never replace elements.
+6. Finish with `design-system/` and the pointer lines from New project.
+
+## Ongoing development
+
+- Read `design-system/` first; use semantic tokens and existing components, never hard-coded values.
+- Uncovered needs: compose from tokens, note it in `components.md`; conflicting requests (a brand hue): present options.
+
+## Verification
+
+Check 1440px and 390px, light and dark: Tab focus, hover, empty and successful submits of each form, an open dialog. If you cannot render, check the code:
+- Build and tests pass; no raw colors, sizes or radii outside the token files.
+- Click every checkbox, radio and switch with the mouse: it toggles.
+- 1440px: content starts at 40px; lead to first content at most `space.64`; no half-empty card; filtering moves no column.
+- 390px: `scrollWidth` equals the viewport; statuses and row actions visible; the action bar fixed, full width.
+- Light: hatch quieter than text. Dark: selected segment ringed and lighter than its track; off switch thumb visible; bloom on `mn-wash-night`. Both: linked-card hover visible.
+- Dialog centered with the initial focus ring; every success shown by a toast or success badge.
+- Walk the ten rules and the Never list on every screen; note arrows land within 12px of their target.
+- Report files changed, what you could not apply, and decisions you made.
+
+## Rollback
+
+- Each screen is its own commit and can be reverted alone.
+- Tokens, fonts and the filter SVG are one commit; reverting it last restores the previous look.

package/content/templates/margin-notes/1.1.0/components/badge.md

@@ -0,0 +1,9 @@
+### Badge
+
+**Use.** Non-interactive status, version, count, category or marker.
+
+**Anatomy.** 22px tall, padding 0 `space.8`, `font.size.caption`, `radius.full`, optional 6px dot or 12px icon at `space.6`, 1 to 2 words. After inline text: `margin-left: space.8; vertical-align: middle`.
+
+**Variants.** Status: `color.status.{tone}Subtle` ground, `color.status.{tone}` text and dot. Neutral: `color.surface.subtle`, `color.text.secondary`; also markers (current plan, "This device") beside the card title. Count (max 1 per screen, e.g. cart): `color.action.primary`, `color.text.onAction`. Version or ID: mono, `radius.inner`, 1px `color.border.strong`. A marker rendered as a `<button>` keeps the element, styled as this badge.
+
+**A11y.** Counts get a hidden noun ("3 unread").

package/content/templates/margin-notes/1.1.0/components/button.md

@@ -0,0 +1,11 @@
+### Button
+
+**Use.** Secondary for most actions; inline navigation is a text link.
+
+**Anatomy.** Optional `size.icon` icon, gap `space.8`, `radius.control`, no shadow. Small `size.controlSm`, padding 0 `space.12`, `font.size.small`. Default `size.control`, padding 0 `space.16`, `font.size.ui`. Large `size.controlLg`, padding 0 `space.20`, `radius.controlLg`. Icon-only: square, `aria-label`.
+
+**Variants.** Primary: `color.action.primary`, `color.text.onAction`, medium. Secondary: `color.surface.raised`, 1px `color.border.control`, `color.text.primary`. Ghost: `color.text.secondary`. Danger: `color.action.danger`, `color.text.onAction`, only to confirm a destructive action.
+
+**States.** Hover: primary `color.action.primaryHover`, secondary border `color.border.strong`, ghost `color.text.primary` on `color.surface.subtle`, danger `color.action.dangerHover`. Active: primary `color.action.primaryActive`, secondary `color.surface.subtle`. Loading keeps the width.
+
+**A11y.** Native `<button>`.

package/content/templates/margin-notes/1.1.0/components/callout.md

@@ -0,0 +1,9 @@
+### Callout
+
+**Use.** Inline message: info, success, warning, danger.
+
+**Anatomy.** 16px icon, optional title (`font.size.ui`, semibold), body `font.size.small`, optional text action. Padding `space.14` `space.16`, gap `space.10`, `radius.callout`, ground `color.status.{tone}Subtle`, bar `inset 3px 0 0` and icon `color.status.{tone}`.
+
+**States.** Static; dismissible ones get a ghost icon button (`aria-label="Dismiss"`).
+
+**A11y.** Danger after an action: `role="alert"`.

package/content/templates/margin-notes/1.1.0/components/card.md

@@ -0,0 +1,11 @@
+### Card
+
+**Use.** One object or widget.
+
+**Anatomy.** Optional mono eyebrow, title (`font.size.cardTitle` or `panelTitle`), body, meta `font.size.small` `color.text.tertiary`, actions. Padding `space.24` (`space.20` under `breakpoint.md`), gap `space.12`, `radius.panel`; sized to content (Layout adaptation).
+
+**Variants.** Rest: `color.surface.raised`, `elevation.rest`. Pinned: `color.surface.lifted`, `elevation.pinned`, may carry tape; spans grid columns, never a fixed width. Stat: one-line eyebrow (ellipsis, full text in `title`), value sans `clamp(28px, 3vw, 40px)` semibold, `font.tracking.h1Article`, delta `font.size.small` `color.text.secondary` with a 12px arrow.
+
+**States.** Hover (linked card): ring `inset 0 0 0 1px` `color.text.tertiary` (pinned: after `elevation.pinned`), title underlined; no lift. Focus: on the card. Error: a danger callout inside.
+
+**A11y.** One link on the title, stretched with a pseudo-element.

package/content/templates/margin-notes/1.1.0/components/checkbox.md

@@ -0,0 +1,21 @@
+### Checkbox
+
+**Use.** Independent options and row selection; an immediate setting uses a switch.
+
+**Anatomy.** The native input, with class `check`, is the visible 18px box, so it takes every click; nothing sits above it. Label `font.size.ui` at `space.10`; hit area at least `size.controlSm`; rows `space.12` apart. Existing markup with a drawn box: the input covers it (`position: absolute; inset: 0; opacity: 0; z-index: 1`), the box gets `pointer-events: none`.
+
+```css
+.check { appearance: none; box-sizing: border-box; margin: 0; flex: none; width: 18px; height: 18px;
+  display: inline-grid; place-content: center; border: 1px solid var(--color-text-tertiary); border-radius: var(--radius-swatch);
+  background: var(--color-surface-raised); cursor: pointer; }
+.check[type="radio"] { border-radius: var(--radius-full); }
+.check:is(:checked, :indeterminate) { background: var(--color-action-primary); border-color: var(--color-action-primary); }
+.check[type="checkbox"]:checked::before { content: ""; width: 9px; height: 5px; border: solid var(--color-text-on-action);
+  border-width: 0 0 1.5px 1.5px; transform: translateY(-1px) rotate(-45deg); }
+.check:indeterminate::before { content: ""; width: 8px; height: 1.5px; background: var(--color-text-on-action); }
+.check[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-on-action); }
+```
+
+**States.** Hover: border `color.text.secondary`. Error: border `color.status.danger`, group message below.
+
+**A11y.** Groups use `<fieldset>` and `<legend>`.

package/content/templates/margin-notes/1.1.0/components/chip.md

@@ -0,0 +1,9 @@
+### Chip
+
+**Use.** Toggleable filters in a row.
+
+**Anatomy.** `size.controlMd`, padding 0 `space.14`, `radius.full`, `font.size.small`, `color.surface.raised`, 1px `color.border.control`; optional icon or mono count; `space.6` apart. A scrolling strip scrolls the selected chip into view on load (`scrollIntoView({ inline: "nearest" })`) and fades its edge over 24px while chips are off-screen.
+
+**States.** Hover: border `color.border.strong`. Selected: `color.action.primary` fill, `color.text.onAction`, no border.
+
+**A11y.** `<button aria-pressed>`.

package/content/templates/margin-notes/1.1.0/components/code-block.md

@@ -0,0 +1,9 @@
+### Code block
+
+**Use.** Code, commands, raw data. Inline code: mono `font.size.small` on `color.surface.subtle`, padding 0 `space.4`, `radius.swatch`.
+
+**Anatomy.** Optional header (mono caption file name `color.code.muted`, copy button). Body mono `font.size.small`, `font.lineHeight.code`, padding `space.16` `space.20`, `radius.media`, scrolls inside itself.
+
+**Colors.** `color.code.bg`, `color.code.text`, strings `color.code.string`, comments `color.code.muted`; dark theme adds a 1px `color.border.default` ring.
+
+**States.** Copy button reads "Copied" for 2s. Focus on the dark ground: outline in `color.code.text`.

package/content/templates/margin-notes/1.1.0/components/dialog.md

@@ -0,0 +1,9 @@
+### Dialog
+
+**Use.** Confirm a consequential action or collect short input.
+
+**Anatomy.** Centered on both axes at every width; never top-aligned or a bottom sheet. Native `<dialog>`: `position: fixed; inset: 0; margin: auto; height: fit-content; width: min(var(--size-dialog), 100vw - var(--space-32)); max-height: calc(100dvh - var(--space-64)); overflow: auto`, `::backdrop` `color.surface.overlay`; a custom scrim is fixed, `display: grid; place-items: center; padding: var(--space-16)`. Panel `color.surface.lifted`, `radius.panel`, `elevation.pinned`, padding `space.24`. Title `font.size.h3` semibold, body `space.8` below, actions `space.24` below: right-aligned, `space.8` apart, secondary then primary (mobile: full width, primary on top). Ghost close button top right. Destructive: danger primary.
+
+**States.** The scrim only fades. Loading: primary loading, others disabled. Error: danger callout above the actions.
+
+**A11y.** `role="dialog"` (`alertdialog` when destructive), `aria-modal`, `aria-labelledby`. Focus the least destructive control with its ring showing (`focus({ focusVisible: true })`); trap and return focus; Escape and a scrim click close it (not while loading).

package/content/templates/margin-notes/1.1.0/components/empty-state.md

@@ -0,0 +1,9 @@
+### Empty state
+
+**Use.** Nothing to show yet.
+
+**Anatomy.** Panel max 480px at the content column's left edge under a left-aligned h1 (centered only without an h1). `color.surface.lifted`, `radius.panel`, `elevation.pinned`, padding `space.40` `space.32`, left-aligned. Title `font.size.h3` semibold; one `color.text.secondary` sentence on what will appear; one secondary button (primary if creating is the page's job) `space.24` below; gaps `space.12`.
+
+**Details.** Page-level: 1 tape strip, the empty-state bloom and a `.note--beside` note on the button restating it ("add the first one"). Inside a table, widget, cart or form: none, `color.surface.raised`, `elevation.rest`.
+
+**States.** Failed to load: danger callout with retry.

package/content/templates/margin-notes/1.1.0/components/index.json

@@ -0,0 +1,22 @@
+{
+  "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", "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": "segmented-control", "category": "navigation", "status": "specified", "file": "segmented-control.md", "states": ["default", "hover", "focus-visible", "selected", "disabled"] },
+    { "name": "navigation", "category": "navigation", "status": "specified", "file": "navigation.md", "states": ["default", "hover", "focus-visible", "selected"] },
+    { "name": "chip", "category": "action", "status": "specified", "file": "chip.md", "states": ["default", "hover", "focus-visible", "selected", "disabled"] },
+    { "name": "card", "category": "surface", "status": "specified", "file": "card.md", "states": ["default", "hover", "focus-visible", "loading", "error"] },
+    { "name": "media-frame", "category": "surface", "status": "specified", "file": "media-frame.md", "states": ["default", "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": "code-block", "category": "data-display", "status": "specified", "file": "code-block.md", "states": ["default", "focus-visible"] },
+    { "name": "callout", "category": "feedback", "status": "specified", "file": "callout.md", "states": ["default", "focus-visible"] },
+    { "name": "empty-state", "category": "feedback", "status": "specified", "file": "empty-state.md", "states": ["default", "error"] },
+    { "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", "hover", "focus-visible"] }
+  ]
+}

package/content/templates/margin-notes/1.1.0/components/media-frame.md

@@ -0,0 +1,9 @@
+### Media frame
+
+**Use.** Photos, screenshots and their placeholders.
+
+**Anatomy.** `radius.media`, `color.surface.tray`, `elevation.rest` (featured: `elevation.pinned`). Ratios 4:3 products, 16:10 screenshots, 3:2 posts; 3:2 in any grid of 3 or more asset-less frames. Thumbnails 64px, `radius.controlLg`. Hatch over the tray: `repeating-linear-gradient(135deg, var(--color-decor-hatch) 0 1px, transparent 1px 10px)`, 1.15:1 to 1.35:1, quieter than any text.
+
+**States.** No asset (same in every app): tray, hatch, one centered `size.iconLg` outline image icon `color.text.tertiary`. Loading: tray and hatch only. Error: a 20px image-off icon and a `font.size.small` caption. Selected thumbnail: `0 0 0 2px` `color.action.primary` ring.
+
+**A11y.** Meaningful `alt` (empty when decorative); thumbnails are buttons with `aria-pressed`.

package/content/templates/margin-notes/1.1.0/components/navigation.md

@@ -0,0 +1,11 @@
+### Navigation
+
+**Use.** Header for sections; sidebar from 6 sections.
+
+**Anatomy.** Header `size.header` (mobile `size.headerMobile`), `color.surface.default`, 1px `color.border.default` bottom, the page container, never `overflow: hidden`. Product name as text (`font.size.lead`, semibold, `font.tracking.title`). Links `font.size.ui` `color.text.secondary`, each a `size.controlSm` box, padding 0 `space.8`, `radius.inner`, `space.8` apart; the focus outline follows the box. Search (`size.controlSm`) and one action at the right. Sidebar 220px: mono eyebrows, items `size.controlSm`, padding 0 `space.10`, `radius.inner`.
+
+**Mobile.** More than 3 links: product name, at most 1 action, a `size.touch` menu button opening a sheet below the header (styled as the Select menu, rows `size.touch`, global search first at full width).
+
+**States.** Hover `color.text.primary` (sidebar item also `color.surface.subtle`). Current: header link `color.text.primary`, medium, no pill or underline; sidebar item `color.surface.subtle`.
+
+**A11y.** `<nav aria-label>`, `aria-current="page"`; menu button `aria-expanded`; Escape closes the sheet.

package/content/templates/margin-notes/1.1.0/components/segmented-control.md

@@ -0,0 +1,9 @@
+### Segmented control
+
+**Use.** 2 to 4 short modes of the same data.
+
+**Anatomy.** Track `color.surface.subtle`, padding 3px, `radius.control`, height `size.control`. Segments `size.controlSm`, padding 0 `space.12`, `font.size.small`, `radius.inner`, `color.text.secondary`.
+
+**States.** Hover `color.text.primary`. Selected: `color.surface.selected`, `box-shadow: var(--elevation-segment), inset 0 0 0 1px var(--color-border-selected)` (dark ring 4.6:1 on the track), `color.text.primary`, medium.
+
+**A11y.** `radiogroup` of `radio`; Arrows move.

package/content/templates/margin-notes/1.1.0/components/select.md

@@ -0,0 +1,9 @@
+### Select
+
+**Use.** One of 5 or more options; 2 to 4 use the segmented control or radios.
+
+**Anatomy.** Trigger as Text field with `appearance: none`, `padding-right: space.32` and a 16px chevron `color.text.secondary` at `space.12` from the right. Menu: `color.surface.lifted`, `radius.media`, `elevation.pinned`, padding `space.4`, max height 320px; options `size.controlMd`, padding 0 `space.10`, `radius.inner`.
+
+**States.** Hover: trigger border `color.border.strong`; active option `color.surface.subtle`. Selected option: `font.weight.medium`, trailing check.
+
+**A11y.** Prefer a native `<select>`; custom: `combobox` plus `listbox`.

package/content/templates/margin-notes/1.1.0/components/switch.md

@@ -0,0 +1,9 @@
+### Switch
+
+**Use.** A setting that applies immediately; settings that wait for Save use a checkbox.
+
+**Anatomy.** The control itself is the track and takes every click: `<input type="checkbox" role="switch">` (or an existing `<button role="switch">`) with `appearance: none; box-sizing: border-box; margin: 0; padding: 0; position: relative`, 36 x 20px, `radius.full`, 1px `color.text.tertiary` border, `color.surface.subtle`. Thumb: its `::before`, 16px circle at `top: 1px; left: 1px`, `color.text.tertiary` (4.6:1 on the track); a thumb span gets `pointer-events: none`. Rows: label left, switch right, min height `size.touch`.
+
+**States.** Hover: border and off thumb `color.text.secondary`. On (`:checked`, `[aria-checked="true"]`): track and border `color.action.primary`; thumb `translate: 16px 0` over `motion.duration.fast`, `color.text.onAction`, `elevation.segment`; never green. Loading: 10px spinner in the thumb; on failure revert and show a danger toast.
+
+**A11y.** `aria-checked`; Space toggles; the visible label is the name.

package/content/templates/margin-notes/1.1.0/components/table.md

@@ -0,0 +1,31 @@
+### Table
+
+**Use.** Records compared by the same attributes. Key/value data: spec rows (180px key `color.text.secondary`, hairlines, `space.14` vertical padding; key above value on mobile).
+
+**Anatomy.** Frame `color.surface.raised`, `elevation.rest`, `radius.panel`, clipped. Rows `size.row`, cells padding 0 `space.12`, `font.size.small`. Header sans caption, medium, `color.text.secondary`, hairline below. `table-layout: fixed` with `<col>` widths: numbers and dates sized to their longest value, status 120px, actions to their buttons, the primary column takes the rest, so filtering moves no column. Numbers right-aligned; row actions last, right-aligned.
+
+**Mobile (under `breakpoint.md`): stack.** A table with a status or action column or more than 4 columns becomes one block per row. Keep the `<table>`, add `role` `table`/`rowgroup`/`row`/`columnheader`/`cell`, and a `data-label` per `<td>`. Columns become label/value pairs (max 6; never drop status, actions or the active sort key); sort chips list only shown keys.
+
+```css
+@media (max-width: 859px) {
+  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .table--stack, .table--stack :is(tbody, tr, td) { display: block; }
+  .table--stack tr { padding: var(--space-14) var(--space-16); border-bottom: 1px solid var(--color-border-default); }
+  .table--stack td { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: var(--space-12); padding: var(--space-4) 0; text-align: left; }
+  .table--stack td:not(.cell-primary, .cell-actions)::before { content: attr(data-label); font-size: var(--font-size-caption); color: var(--color-text-tertiary); }
+  .table--stack .cell-primary { display: block; font-size: var(--font-size-ui); font-weight: var(--font-weight-medium); padding-bottom: var(--space-6); }
+  .table--stack .cell-actions { display: flex; gap: var(--space-8); padding-top: var(--space-12); }
+  .table--stack .cell-actions > * { flex: 1; height: var(--size-touch); }
+}
+```
+
+**Mobile: scroll.** Other tables scroll in `<div class="table-scroll" role="region" tabindex="0" aria-label="{name}, scrolls sideways">`, a column cut mid-cell. A script sets `data-overflow` and `data-at-end`; while content is off-screen the edge fades and a caption "Scroll sideways" hint sits right-aligned above.
+
+```css
+.table-scroll { overflow-x: auto; min-width: 0; }
+.table-scroll[data-overflow]:not([data-at-end]) { mask-image: linear-gradient(to left, transparent, black 32px); }
+```
+
+**States.** Hover: `color.surface.subtle` at 50%. Selected: `color.surface.subtle` plus `inset 2px 0 0` `color.action.primary` on the first cell. Sorted header: `color.text.primary`, 12px arrow. Loading: 5 skeleton rows. Error: danger callout with retry. Empty: empty state without details. Focus: inset.
+
+**A11y.** `<th scope>`; sortable headers are buttons with `aria-sort`.

package/content/templates/margin-notes/1.1.0/components/tabs.md

@@ -0,0 +1,9 @@
+### Tabs
+
+**Use.** Sibling views of one object; filtering one dataset uses the segmented control.
+
+**Anatomy.** Tab list over a 1px `color.border.default` line; tabs `size.touch` tall, `space.24` apart, `font.size.ui`; panel `space.24` below; overflow scrolls inside the list.
+
+**States.** Default `color.text.secondary`; hover `color.text.primary`. Selected: `color.text.primary`, semibold, underline `inset 0 -2px 0` `color.action.primary`.
+
+**A11y.** `tablist`, `tab` with `aria-selected`, `tabpanel`; Left and Right move.

package/content/templates/margin-notes/1.1.0/components/text-field.md

@@ -0,0 +1,11 @@
+### Text field
+
+**Use.** Single-line input, including search. Textarea: min height 96px, padding `space.10` `space.12`, vertical resize.
+
+**Anatomy.** Label above (`font.size.small`, medium, `color.text.primary`), optional hint (`font.size.small`, `color.text.secondary`). Input height per rule 8, `box-sizing: border-box`, padding 0 `space.12`, `font.size.ui`, `radius.control`, `color.surface.raised`, 1px `color.border.control`, placeholder `color.text.tertiary`; in a flex row `flex: 1 1 240px; min-width: 0`. Gaps `space.6`; fields `space.20` apart.
+
+**Search.** `input::-webkit-search-cancel-button, input::-webkit-search-decoration { -webkit-appearance: none }`. A clear control, if the app has one: 24px ghost icon button in the right padding (input `padding-right: space.32`), 16px x `color.text.secondary`, `aria-label="Clear search"`, only with a value.
+
+**States.** Hover: border `color.border.strong`. Read-only: `color.surface.subtle`.
+
+**A11y.** Visible `<label for>`, never placeholder-only.

package/content/templates/margin-notes/1.1.0/components/toast.md

@@ -0,0 +1,9 @@
+### Toast
+
+**Use.** Confirms every save or submit, or a non-blocking failure.
+
+**Anatomy.** Ground `color.action.primary`, text and 16px icon `color.text.onAction`, `elevation.segment`, `radius.callout`, min height `size.controlLg`, padding `space.12` `space.16`, gap `space.10`, max width 420px, `font.size.ui`. Optional action: underlined medium text button. Fixed `space.24` from the bottom right; under `breakpoint.md` `space.16` from the sides, above the action bar. Max 3, `space.8` apart, newest at the bottom. Tones differ only by icon and wording.
+
+**States.** Hover pauses dismissal. Focus: 2px `color.text.onAction` outline, 2px offset.
+
+**A11y.** `role="status"` (`alert` for danger). Auto-dismiss after 5s unless it has an action; Escape dismisses.