division-ds 0.3.1 → 0.4.1

package/public/manifest/tokens.json

@@ -430,9 +430,12 @@
       "layer": "semantic",
       "value": {
         "dark": "#0d1016",
-        "light": "#c2cddc"
+        "light": "#e3e8ef"
       },
-      "use": "The opaque fill of a control you type or pick in (Input, Textarea, Select), and of small opaque surfaces: Kbd, Tag, Tooltip, menus, toasts. Not a card."
+      "use": "The opaque fill of a control you type or pick in (Input, Textarea, Select), and of small opaque surfaces: Kbd, Tag, Tooltip, menus, toasts. Not a card.",
+      "measured": {
+        "light": "neutral.50 mixed 31% of the way to neutral.100 in OKLab (#e3e8ef with the default preset), so the base-to-sunken step is OKLCH ΔL 0.038, the same step as the dark theme (#07080b to #0d1016, ΔL 0.038). neutral.100 alone sat ΔL 0.122 below base and made every field a heavy grey slab; the ramp has no stop in between. A mix of two ramp stops, not a literal, so a Theme Builder preset re-tints it."
+      }
     },
     {
       "name": "--color-surface-raised",
@@ -488,7 +491,7 @@
       "use": "The boundary of an interactive control at rest (Input, Select, secondary Button). The one border that has to be seen to find the control.",
       "measured": {
         "dark": "3.53:1 on surface.sunken (the control fill it is painted on) and 3.71:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on.",
-        "light": "3.49:1 on surface.sunken (the control fill it is painted on) and 5.10:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on."
+        "light": "4.56:1 on surface.sunken (the control fill it is painted on) and 5.10:1 on surface.base — the INFORMATIONAL hairline, the one SC 1.4.11 governs. Opaque rather than alpha so the boundary holds whatever surface it lands on."
       }
     },
     {
@@ -501,7 +504,7 @@
       "use": "The boundary of the small selection controls at rest: Checkbox, Radio, Switch track.",
       "measured": {
         "dark": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. 6.12:1 on surface.sunken. Brighter than border.control (3.53:1) on purpose: a 20px box drawn with the same hairline as a 320px input carries a fraction of the edge length, and at 3.53:1 an unchecked checkbox all but vanished on the dark page. border.control stays the hairline for the large fields.",
-        "light": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. Same value as border.control in this theme (3.49:1 on surface.sunken), which reads clearly on a light page; the token exists in both themes because dark needed its own brighter step."
+        "light": "The boundary of the small selection controls (Checkbox, Radio, Switch track) at rest. Same value as border.control in this theme (4.56:1 on surface.sunken), which reads clearly on a light page; the token exists in both themes because dark needed its own brighter step."
       }
     },
     {
@@ -544,7 +547,7 @@
       "use": "Placeholder text inside a control, on surface.sunken. Only there.",
       "measured": {
         "dark": "4.68:1 on surface.sunken, which is the control fill placeholder text is actually painted on. text.muted is gated against surface.base and passes there at 4.59:1, but reaches only 4.37:1 on the sunken fill — so placeholder needs its own step.",
-        "light": "7.83:1 on surface.sunken, the control fill it is painted on. Light theme needs no separate step from text.muted — unlike dark, where muted reaches only 4.37:1 there — but the name exists in both themes so the component layer has one alias to point at."
+        "light": "10.23:1 on surface.sunken, the control fill it is painted on. Light theme needs no separate step from text.muted — unlike dark, where muted reaches only 4.37:1 there — but the name exists in both themes so the component layer has one alias to point at."
       }
     },
     {
@@ -775,7 +778,7 @@
       "use": "Text or an icon that marks something as made by AI: the AiLabel mark, the AI glyph in a field an AI filled. Always beside a word, never colour alone.",
       "measured": {
         "dark": "Measured by the gate: 9.55:1 on surface.base, 9.08:1 on surface.sunken, 8.32:1 on surface.raised. One step lighter than accent.info.text (info.500) so AI marks and status text do not read as the same thing.",
-        "light": "Measured by the gate: 8.39:1 on surface.base, 5.75:1 on surface.sunken, 8.92:1 on surface.raised. info.700 reached only 3.49:1 on surface.sunken, so the light theme takes info.800."
+        "light": "Measured by the gate: 8.39:1 on surface.base, 7.50:1 on surface.sunken, 8.92:1 on surface.raised. info.700 reached only 3.49:1 on the earlier, darker surface.sunken (neutral.100), so the light theme takes info.800."
       }
     },
     {
@@ -788,7 +791,7 @@
       "use": "The boundary of a form field whose value an AI filled and the person has not changed. Input and Textarea paint it from aiValue; do not paint it by hand.",
       "measured": {
         "dark": "The edge of a field an AI filled. 7.91:1 on the AI-filled field (ai.wash over the control fill), far above the 3:1 SC 1.4.11 floor. Same stop as ai.text; a separate token because a boundary and text carry different floors.",
-        "light": "The edge of a field an AI filled. 5.24:1 on the AI-filled field (ai.wash over surface.sunken). Same stop as ai.text; a separate token because a boundary and text carry different floors."
+        "light": "The edge of a field an AI filled. 6.72:1 on the AI-filled field (ai.wash over surface.sunken). Same stop as ai.text; a separate token because a boundary and text carry different floors."
       }
     },
     {
@@ -842,6 +845,174 @@
         "light": "Second chart series. 5.09:1 on surface.base, 5.41:1 on surface.raised, 5.52:1 nested. Never text. There is no third: the other hues are status colours."
       }
     },
+    {
+      "name": "--color-terminal-black",
+      "layer": "semantic",
+      "value": {
+        "dark": "#7b8592",
+        "light": "#3a4049"
+      },
+      "use": "ANSI black in the Terminal component's output. Terminal applies it; never use it outside a terminal.",
+      "measured": {
+        "dark": "Not literal black: ANSI black must stay readable on this page, so it is a grey here.",
+        "light": "Not literal black: ANSI black must stay readable on this page, so it is a grey here."
+      }
+    },
+    {
+      "name": "--color-terminal-red",
+      "layer": "semantic",
+      "value": {
+        "dark": "#ff6b5e",
+        "light": "#b3261e"
+      },
+      "use": "ANSI red in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-green",
+      "layer": "semantic",
+      "value": {
+        "dark": "#3ddc84",
+        "light": "#14713d"
+      },
+      "use": "ANSI green in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-yellow",
+      "layer": "semantic",
+      "value": {
+        "dark": "#e8b931",
+        "light": "#7a5a00"
+      },
+      "use": "ANSI yellow in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-blue",
+      "layer": "semantic",
+      "value": {
+        "dark": "#5aa7ff",
+        "light": "#0057c2"
+      },
+      "use": "ANSI blue in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-magenta",
+      "layer": "semantic",
+      "value": {
+        "dark": "#d98cf0",
+        "light": "#8a2bb0"
+      },
+      "use": "ANSI magenta in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-cyan",
+      "layer": "semantic",
+      "value": {
+        "dark": "#3fd0d8",
+        "light": "#00696f"
+      },
+      "use": "ANSI cyan in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-white",
+      "layer": "semantic",
+      "value": {
+        "dark": "#c4ccd6",
+        "light": "#5c636d"
+      },
+      "use": "ANSI white in the Terminal component's output. Terminal applies it; never use it outside a terminal.",
+      "measured": {
+        "dark": "Not literal white: ANSI white must stay readable on this page, so it is a grey here.",
+        "light": "Not literal white: ANSI white must stay readable on this page, so it is a grey here."
+      }
+    },
+    {
+      "name": "--color-terminal-bright-black",
+      "layer": "semantic",
+      "value": {
+        "dark": "#98a2af",
+        "light": "#646b75"
+      },
+      "use": "ANSI bright black in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-bright-red",
+      "layer": "semantic",
+      "value": {
+        "dark": "#ff9288",
+        "light": "#8f1c16"
+      },
+      "use": "ANSI bright red in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-bright-green",
+      "layer": "semantic",
+      "value": {
+        "dark": "#7debaa",
+        "light": "#0e5a30"
+      },
+      "use": "ANSI bright green in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-bright-yellow",
+      "layer": "semantic",
+      "value": {
+        "dark": "#f5d36a",
+        "light": "#5f4600"
+      },
+      "use": "ANSI bright yellow in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-bright-blue",
+      "layer": "semantic",
+      "value": {
+        "dark": "#8cc2ff",
+        "light": "#00459c"
+      },
+      "use": "ANSI bright blue in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-bright-magenta",
+      "layer": "semantic",
+      "value": {
+        "dark": "#e8b3f7",
+        "light": "#6e1f8e"
+      },
+      "use": "ANSI bright magenta in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-bright-cyan",
+      "layer": "semantic",
+      "value": {
+        "dark": "#7fe4ea",
+        "light": "#005257"
+      },
+      "use": "ANSI bright cyan in the Terminal component's output. Terminal applies it; never use it outside a terminal."
+    },
+    {
+      "name": "--color-terminal-bright-white",
+      "layer": "semantic",
+      "value": {
+        "dark": "#f4f7fa",
+        "light": "#16191e"
+      },
+      "use": "ANSI bright white in the Terminal component's output. Terminal applies it; never use it outside a terminal.",
+      "measured": {
+        "light": "Inverted on purpose in the light theme: the strongest ink, not a pale colour."
+      }
+    },
+    {
+      "name": "--color-terminal-selection",
+      "layer": "semantic",
+      "value": {
+        "dark": "rgba(90, 167, 255, 0.58)",
+        "light": "rgba(0, 99, 213, 0.72)"
+      },
+      "use": "The selected text wash in the Terminal component. Terminal applies it.",
+      "measured": {
+        "dark": "A wash over surface.base: at least 3:1 against the page and text.primary at 4.5:1 on it. Gated.",
+        "light": "A wash over surface.base: at least 3:1 against the page and text.primary at 4.5:1 on it. Gated."
+      }
+    },
     {
       "name": "--component-control-height-sm",
       "layer": "component",

package/scripts/lib/component-props.mjs

@@ -62,7 +62,16 @@ export function publicExports(root, tier) {
       entry[isType ? 'types' : 'values'].push(element.name.text)
     }
   }
-  return bySlug
+  return { ...bySlug, ...OUTSIDE_BARREL[tier] }
+}
+
+/** Components deliberately not re-exported by their tier's barrel, because a barrel import would
+ *  put a heavy library in every screen that imports the barrel. They are still public: their docs
+ *  page gives the direct import. */
+const OUTSIDE_BARREL = {
+  organisms: {
+    terminal: { values: ['Terminal'], types: ['TerminalHandle', 'TerminalProps', 'TerminalStatus'], from: ['./terminal/Terminal'] },
+  },
 }
 
 /** What a folder's files export, read from the type checker:

package/skills/division-ds/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: division-ds
-description: Use when building or changing UI with Division DS (React 19, Tailwind 4, Radix; 72 components). Covers which component and token to use, the composition rules prop types cannot express (providers, FormField, button gaps, card borders), planning a screen's states, and how to check the result. Load it before writing any screen or component in a project that has Division DS components.
+description: Use when building or changing UI with Division DS (React 19, Tailwind 4, Radix; 75 components). Covers which component and token to use, the composition rules prop types cannot express (providers, FormField, button gaps, card borders), planning a screen's states, and how to check the result. Load it before writing any screen or component in a project that has Division DS components.
 ---
 
 # Division DS