@misoto22/design 0.7.0 → 0.9.0

package/dist/tokens.js

@@ -297,37 +297,37 @@ export const TOKENS = {
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)"
+    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
-    "comment": "page h1 40 → 54px"
+    "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
-    "comment": "band heading 30 → 42px"
+    "comment": "record title 24 → 29px"
   },
   "fs-sub": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
-    "comment": "record title 24 → 29px"
+    "comment": "card sub-head 21 → 25px"
   },
   "fs-item": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
-    "comment": "card sub-head 21 → 25px"
+    "comment": "in-card title 18 → 20px"
   },
   "pad": {
     "layer": "tokens",
     "category": "space",
-    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)",
-    "comment": "in-card title 18 → 20px"
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)"
   },
   "sec": {
     "layer": "tokens",
@@ -354,111 +354,114 @@ export const TOKENS = {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(4px * var(--radius-factor))",
-    "comment": "The numbers are the ones the rest of the industry settled on, and that is the argument for them: 8px for a control, 12px for a panel, and 4/6 for the small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree within a pixel of this. The previous 2/4/6/10 was a step tighter than any of them, which is what made a card read as a rectangle with the corners shaved rather than as a rounded panel."
+    "comment": "a mark inside a tight box"
   },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(6px * var(--radius-factor))",
-    "comment": "a mark inside a tight box"
+    "comment": "chips, keys, list rows"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(8px * var(--radius-factor))",
-    "comment": "chips, keys, list rows"
+    "comment": "inputs, code, small plates"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(12px * var(--radius-factor))",
-    "comment": "inputs, code, small plates"
+    "comment": "cards, dialogs, menu panels"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(999px * var(--radius-factor))",
-    "comment": "cards, dialogs, menu panels"
+    "comment": "capsules and counters"
   },
   "radius-row": {
     "layer": "tokens",
     "category": "radius",
     "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
-    "comment": "The nesting law, applied to the two insets this system actually uses."
+    "comment": "a row in a 6px-padded panel"
   },
   "radius-frame": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
-    "comment": "a row in a 6px-padded panel"
+    "comment": "a frame 16px outside a panel"
   },
   "control-h-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.875rem"
+    "light": "2.25rem",
+    "comment": "36px"
   },
   "control-h-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.25rem",
-    "comment": "30px"
+    "light": "2.75rem",
+    "comment": "44px — WCAG 2.5.5"
   },
   "control-h-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.5rem",
-    "comment": "36px — clears WCAG 2.5.8, not 2.5.5"
+    "light": "3rem",
+    "comment": "48px"
   },
   "control-px-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.75rem",
-    "comment": "40px"
+    "light": "1rem"
   },
   "control-px-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "1rem"
+    "light": "1.5rem"
   },
   "control-px-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.25rem"
+    "light": "1.75rem"
   },
   "control-py-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.25rem"
+    "light": "0.5rem",
+    "comment": "The vertical padding is part of the axis too, and has to be: a control whose padding alone exceeds the compact height never shrinks, because `min-height` is a floor and not a ceiling."
   },
   "control-py-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.75rem"
   },
   "control-py-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.75rem"
   },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.625rem"
   },
   "field-px": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.625rem"
+    "light": "0.875rem",
+    "comment": "Text inputs are measured separately: they are read as much as they are hit, so their padding tracks the type rather than the target."
   },
   "field-py": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.625rem"
   },
   "table-pad-y": {
     "layer": "tokens",
     "category": "other",
-    "light": "0.5rem"
+    "light": "0.875rem",
+    "comment": "A table's own row padding. Separate from the control scale because a table row is neither a control nor a field — it is a line of text with a rule under it, and it tightens on its own axis."
   },
   "table-pad-x": {
     "layer": "tokens",
@@ -466,6 +469,17 @@ export const TOKENS = {
     "light": "0px",
     "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
   },
+  "sidebar-w": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "16rem",
+    "comment": "─── Sidebar ──────────────────────────────────────────────────────────── The two widths a navigation rail has, and the reason they are tokens rather than numbers inside the component: an application shell has to reserve exactly this much beside its content, and a shell that hard-codes 17rem while the rail believes something else is a gap or an overlap that appears only at one window size. Both sides read the same name. `--sidebar-w-icon` is what is left when the rail collapses to icons. It is `--control-h-md` plus the rail's own padding, so a 44px pointer target still fits inside it at comfortable density — a collapsed rail whose rows are too small to hit is a rail nobody can use in the state it spends most of its life in."
+  },
+  "sidebar-w-icon": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "3.5rem"
+  },
   "panel-bg": {
     "layer": "tokens",
     "category": "other",
@@ -482,6 +496,12 @@ export const TOKENS = {
     "category": "other",
     "light": "none"
   },
+  "panel-lift": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0 2px 0 0 var(--rule-2), 0 5px 0 -1px var(--rule)",
+    "comment": "The offset under a floating panel, and it does not break Law 2: the law says a box-shadow is never BLURRED, not that there is never one. This is the same hard-offset idiom as `--lift`, in the rule colour rather than the accent — every menu in the system wearing a clay drop shadow would be a louder claim than \"this sits above the page\". Two steps, because one reads as a second border: a firm edge just below the panel and a softer one below that is a stack seen from the front, which is the flattest way to say depth without drawing light."
+  },
   "ease": {
     "layer": "tokens",
     "category": "motion",
@@ -507,7 +527,7 @@ export const TOKENS = {
     "layer": "tokens",
     "category": "layer",
     "light": "1",
-    "comment": "─── Stacking ─── seven ranks, named for what sits at each."
+    "comment": "─── Stacking ─── seven ranks, named for what sits at each. Every overlay in the package portals to document.body, so all of them are siblings in the ROOT stacking context and the rank is the whole of the decision — there is no ancestor left to nest one inside another. Read it as a sentence: a sticky header clears the page, a drawer clears the header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel clears the modal it was opened from, and a toast clears everything because it is the only rank that has to survive a modal asking a question. --z-anchored is the one that is not obvious, and it is the one that was wrong. A popover, a menu or a select listbox is opened FROM something, and the surface it is most often opened from is a modal — a select inside a modal form is one of the most ordinary shapes in an application. Ranked below the modal, as it was, the panel is painted behind the very dialog that summoned it. The rank it replaced, --z-palette, was read by nothing: a command palette is a Dialog, so it lands at --z-modal, and its order against a second modal is settled by document order — which is the right answer, because it moves a scrim and its panel together."
   },
   "z-sticky": {
     "layer": "tokens",
@@ -529,7 +549,7 @@ export const TOKENS = {
     "category": "layer",
     "light": "210"
   },
-  "z-palette": {
+  "z-anchored": {
     "layer": "tokens",
     "category": "layer",
     "light": "220"
@@ -800,7 +820,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "depth",
     "light": "transparent",
-    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. Reach for --lift instead, which is the offset idiom expressed once."
+    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. --lift below is the sanctioned offset idiom for anything that must read as raised."
   },
   "shadow-sm": {
     "layer": "semantic",
@@ -821,7 +841,7 @@ export const TOKENS = {
     "layer": "semantic",
     "category": "depth",
     "light": "3px 3px 0 0 var(--shadow-offset)",
-    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur. Used by a plate that must read as sitting above the page."
+    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur, in the accent rather than a grey because --shadow-offset points at --clay. PUBLISHED, NOT CONSUMED. No component in this package sets either one — there is not a single shadow-(--lift) in src/. What the library actually separates with is a hairline, a change of ground, and the reversal that Card variant=\"plate\" reaches for. These two exist so a consumer building a raised plate of their own has the system's answer instead of inventing a blur; do not read them as describing what the library does."
   },
   "lift-sm": {
     "layer": "semantic",
@@ -872,8 +892,8 @@ export const TOKENS = {
   "z-dropdown": {
     "layer": "semantic",
     "category": "layer",
-    "light": "var(--z-drawer)",
-    "comment": "─── Stacking ─── five component-facing names onto the seven ranks. ─────"
+    "light": "var(--z-anchored)",
+    "comment": "─── Stacking ─── two component-facing names onto the seven ranks. ────── The other five ranks are read by their own names; only these two had a component-facing spelling that outlived the rank it pointed at. --z-dropdown pointed at --z-drawer, 100, which put every anchored panel under the modal at 210 that opened it."
   },
   "z-overlay": {
     "layer": "semantic",

package/dist/tokens.json

@@ -296,37 +296,37 @@
   "fs-title": {
     "layer": "tokens",
     "category": "type",
-    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)"
+    "light": "clamp(2.5rem, calc(4.6 * var(--fluid)), 3.375rem)",
+    "comment": "page h1 40 → 54px"
   },
   "fs-lead": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.875rem, calc(3 * var(--fluid)), 2.625rem)",
-    "comment": "page h1 40 → 54px"
+    "comment": "band heading 30 → 42px"
   },
   "fs-heading": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.5rem, calc(2.1 * var(--fluid)), 1.8125rem)",
-    "comment": "band heading 30 → 42px"
+    "comment": "record title 24 → 29px"
   },
   "fs-sub": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.3125rem, calc(1.7 * var(--fluid)), 1.5625rem)",
-    "comment": "record title 24 → 29px"
+    "comment": "card sub-head 21 → 25px"
   },
   "fs-item": {
     "layer": "tokens",
     "category": "type",
     "light": "clamp(1.125rem, calc(1.35 * var(--fluid)), 1.25rem)",
-    "comment": "card sub-head 21 → 25px"
+    "comment": "in-card title 18 → 20px"
   },
   "pad": {
     "layer": "tokens",
     "category": "space",
-    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)",
-    "comment": "in-card title 18 → 20px"
+    "light": "clamp(18px, calc(4.4 * var(--fluid)), 64px)"
   },
   "sec": {
     "layer": "tokens",
@@ -353,111 +353,114 @@
     "layer": "tokens",
     "category": "radius",
     "light": "calc(4px * var(--radius-factor))",
-    "comment": "The numbers are the ones the rest of the industry settled on, and that is the argument for them: 8px for a control, 12px for a panel, and 4/6 for the small marks inside one. Tailwind's own scale, shadcn's `--radius` ± 2 and ± 4, Radix Themes' steps 3 and 4, and Material's `xs`/`sm`/`md` all agree within a pixel of this. The previous 2/4/6/10 was a step tighter than any of them, which is what made a card read as a rectangle with the corners shaved rather than as a rounded panel."
+    "comment": "a mark inside a tight box"
   },
   "radius-sm": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(6px * var(--radius-factor))",
-    "comment": "a mark inside a tight box"
+    "comment": "chips, keys, list rows"
   },
   "radius": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(8px * var(--radius-factor))",
-    "comment": "chips, keys, list rows"
+    "comment": "inputs, code, small plates"
   },
   "radius-lg": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(12px * var(--radius-factor))",
-    "comment": "inputs, code, small plates"
+    "comment": "cards, dialogs, menu panels"
   },
   "radius-pill": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(999px * var(--radius-factor))",
-    "comment": "cards, dialogs, menu panels"
+    "comment": "capsules and counters"
   },
   "radius-row": {
     "layer": "tokens",
     "category": "radius",
     "light": "max(0px, calc(var(--radius-lg) - 0.375rem))",
-    "comment": "The nesting law, applied to the two insets this system actually uses."
+    "comment": "a row in a 6px-padded panel"
   },
   "radius-frame": {
     "layer": "tokens",
     "category": "radius",
     "light": "calc(var(--radius-lg) + 1rem * var(--radius-gate))",
-    "comment": "a row in a 6px-padded panel"
+    "comment": "a frame 16px outside a panel"
   },
   "control-h-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.875rem"
+    "light": "2.25rem",
+    "comment": "36px"
   },
   "control-h-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.25rem",
-    "comment": "30px"
+    "light": "2.75rem",
+    "comment": "44px — WCAG 2.5.5"
   },
   "control-h-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "2.5rem",
-    "comment": "36px — clears WCAG 2.5.8, not 2.5.5"
+    "light": "3rem",
+    "comment": "48px"
   },
   "control-px-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.75rem",
-    "comment": "40px"
+    "light": "1rem"
   },
   "control-px-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "1rem"
+    "light": "1.5rem"
   },
   "control-px-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "1.25rem"
+    "light": "1.75rem"
   },
   "control-py-sm": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.25rem"
+    "light": "0.5rem",
+    "comment": "The vertical padding is part of the axis too, and has to be: a control whose padding alone exceeds the compact height never shrinks, because `min-height` is a floor and not a ceiling."
   },
   "control-py-md": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.75rem"
   },
   "control-py-lg": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.75rem"
   },
   "control-gap": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.5rem"
+    "light": "0.625rem"
   },
   "field-px": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.625rem"
+    "light": "0.875rem",
+    "comment": "Text inputs are measured separately: they are read as much as they are hit, so their padding tracks the type rather than the target."
   },
   "field-py": {
     "layer": "tokens",
     "category": "density",
-    "light": "0.375rem"
+    "light": "0.625rem"
   },
   "table-pad-y": {
     "layer": "tokens",
     "category": "other",
-    "light": "0.5rem"
+    "light": "0.875rem",
+    "comment": "A table's own row padding. Separate from the control scale because a table row is neither a control nor a field — it is a line of text with a rule under it, and it tightens on its own axis."
   },
   "table-pad-x": {
     "layer": "tokens",
@@ -465,6 +468,17 @@
     "light": "0px",
     "comment": "`0px`, not `0`. The cell rule adds to this inside a calc, and a unitless zero makes `calc(0 + 1.5rem)` invalid at computed-value time — the whole declaration is dropped and every column loses its gutter in silence."
   },
+  "sidebar-w": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "16rem",
+    "comment": "─── Sidebar ──────────────────────────────────────────────────────────── The two widths a navigation rail has, and the reason they are tokens rather than numbers inside the component: an application shell has to reserve exactly this much beside its content, and a shell that hard-codes 17rem while the rail believes something else is a gap or an overlap that appears only at one window size. Both sides read the same name. `--sidebar-w-icon` is what is left when the rail collapses to icons. It is `--control-h-md` plus the rail's own padding, so a 44px pointer target still fits inside it at comfortable density — a collapsed rail whose rows are too small to hit is a rail nobody can use in the state it spends most of its life in."
+  },
+  "sidebar-w-icon": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "3.5rem"
+  },
   "panel-bg": {
     "layer": "tokens",
     "category": "other",
@@ -481,6 +495,12 @@
     "category": "other",
     "light": "none"
   },
+  "panel-lift": {
+    "layer": "tokens",
+    "category": "other",
+    "light": "0 2px 0 0 var(--rule-2), 0 5px 0 -1px var(--rule)",
+    "comment": "The offset under a floating panel, and it does not break Law 2: the law says a box-shadow is never BLURRED, not that there is never one. This is the same hard-offset idiom as `--lift`, in the rule colour rather than the accent — every menu in the system wearing a clay drop shadow would be a louder claim than \"this sits above the page\". Two steps, because one reads as a second border: a firm edge just below the panel and a softer one below that is a stack seen from the front, which is the flattest way to say depth without drawing light."
+  },
   "ease": {
     "layer": "tokens",
     "category": "motion",
@@ -506,7 +526,7 @@
     "layer": "tokens",
     "category": "layer",
     "light": "1",
-    "comment": "─── Stacking ─── seven ranks, named for what sits at each."
+    "comment": "─── Stacking ─── seven ranks, named for what sits at each. Every overlay in the package portals to document.body, so all of them are siblings in the ROOT stacking context and the rank is the whole of the decision — there is no ancestor left to nest one inside another. Read it as a sentence: a sticky header clears the page, a drawer clears the header, a scrim covers both, a modal sits on its scrim, an ANCHORED panel clears the modal it was opened from, and a toast clears everything because it is the only rank that has to survive a modal asking a question. --z-anchored is the one that is not obvious, and it is the one that was wrong. A popover, a menu or a select listbox is opened FROM something, and the surface it is most often opened from is a modal — a select inside a modal form is one of the most ordinary shapes in an application. Ranked below the modal, as it was, the panel is painted behind the very dialog that summoned it. The rank it replaced, --z-palette, was read by nothing: a command palette is a Dialog, so it lands at --z-modal, and its order against a second modal is settled by document order — which is the right answer, because it moves a scrim and its panel together."
   },
   "z-sticky": {
     "layer": "tokens",
@@ -528,7 +548,7 @@
     "category": "layer",
     "light": "210"
   },
-  "z-palette": {
+  "z-anchored": {
     "layer": "tokens",
     "category": "layer",
     "light": "220"
@@ -799,7 +819,7 @@
     "layer": "semantic",
     "category": "depth",
     "light": "transparent",
-    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. Reach for --lift instead, which is the offset idiom expressed once."
+    "comment": "─── Depth ──────────────────────────────────────────────────────────── Law 2 — a box-shadow is never blurred. The system has no elevation ramp; depth is a hard offset in ink, applied per component. These three resolve to nothing on purpose, so a component ported from a shadowed system stays flat instead of drawing a blur the White Reset does not have. --lift below is the sanctioned offset idiom for anything that must read as raised."
   },
   "shadow-sm": {
     "layer": "semantic",
@@ -820,7 +840,7 @@
     "layer": "semantic",
     "category": "depth",
     "light": "3px 3px 0 0 var(--shadow-offset)",
-    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur. Used by a plate that must read as sitting above the page."
+    "comment": "The one depth cue the system does have: a hard 3px ink offset, no blur, in the accent rather than a grey because --shadow-offset points at --clay. PUBLISHED, NOT CONSUMED. No component in this package sets either one — there is not a single shadow-(--lift) in src/. What the library actually separates with is a hairline, a change of ground, and the reversal that Card variant=\"plate\" reaches for. These two exist so a consumer building a raised plate of their own has the system's answer instead of inventing a blur; do not read them as describing what the library does."
   },
   "lift-sm": {
     "layer": "semantic",
@@ -871,8 +891,8 @@
   "z-dropdown": {
     "layer": "semantic",
     "category": "layer",
-    "light": "var(--z-drawer)",
-    "comment": "─── Stacking ─── five component-facing names onto the seven ranks. ─────"
+    "light": "var(--z-anchored)",
+    "comment": "─── Stacking ─── two component-facing names onto the seven ranks. ────── The other five ranks are read by their own names; only these two had a component-facing spelling that outlived the rank it pointed at. --z-dropdown pointed at --z-drawer, 100, which put every anchored panel under the modal at 210 that opened it."
   },
   "z-overlay": {
     "layer": "semantic",

package/llms.txt

@@ -0,0 +1,35 @@
+# @misoto22/design
+
+> A monochrome design system for software, writing and photography: portable CSS
+> tokens and accessible React 19 primitives, charts and diagrams. Components ship
+> compiled — import them, do not copy them.
+
+This file is a stub on purpose. It carries no prop tables and no version, so it
+cannot go stale between releases; everything it points at is generated from the
+source in this same tarball at build time.
+
+## In this package, offline
+
+- [dist/agent/index.md](./dist/agent/index.md): every component, one line each, plus the theme axes read out of the stylesheets.
+- [dist/agent/<Component>.md](./dist/agent/): one component in full — every prop with its type and default, the exported unions, the keyboard contract, the accessibility promises, the examples.
+- [skills/misoto22-design/SKILL.md](./skills/misoto22-design/SKILL.md): the conventions an agent gets wrong from habit — the names that diverge from shadcn/ui, and colour that is never a raw class.
+- [AGENTS.md](./AGENTS.md): the short version of this, plus what to know when working on the package itself.
+
+Prefer the CLI over reading these by path — it resolves parts and types, not
+just components:
+
+```bash
+npx misoto22-design docs Button
+npx misoto22-design docs --installed
+```
+
+## On the web
+
+- [https://ui.misoto22.com/llms.txt](https://ui.misoto22.com/llms.txt): the site's index.
+- [https://ui.misoto22.com/llms-full.txt](https://ui.misoto22.com/llms-full.txt): every component inline, in one file.
+- [https://ui.misoto22.com](https://ui.misoto22.com): the rendered documentation.
+
+## Optional
+
+- [README.md](./README.md): install, theming, and the same three commands for a human reader.
+- [CHANGELOG.md](./CHANGELOG.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@misoto22/design",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "private": false,
   "description": "Monochrome design system — CSS tokens and accessible React primitives",
   "license": "MIT",
@@ -13,6 +13,9 @@
     "dist",
     "skills",
     "bin",
+    "AGENTS.md",
+    "CLAUDE.md",
+    "llms.txt",
     "LICENSE",
     "README.md"
   ],
@@ -143,7 +146,7 @@
   },
   "scripts": {
     "build:fonts": "node scripts/vendor-fonts.mjs",
-    "build:js": "NODE_OPTIONS=--max-old-space-size=6144 tsup",
+    "build:js": "NODE_OPTIONS=--max-old-space-size=8192 tsup",
     "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify && node scripts/copy-portable-css.mjs && node scripts/emit-tokens.mjs",
     "build:agent": "node scripts/emit-agent.mjs",
     "build": "pnpm run build:fonts && pnpm run build:js && pnpm run build:css && pnpm run build:agent",