@hideyukimori/nene2-ui 0.6.0 → 0.8.0

package/README.md

@@ -153,7 +153,16 @@ component follows.
 
 ### ① The scale — 🔒 do not redefine
 
-`--spacing-x-3xs` … `--spacing-x-2xl`, and the radius and colour tokens they point at.
+`--spacing-x-3xs` … `--spacing-x-2xl`, `--radius-x-none` … `--radius-x-3xl` plus
+`--radius-x-pill`, `--text-x-2xs` … `--text-x-xl`, and the colour palette.
+
+🔴 **A namespace with one step has no slots, only aliases.** Until 0.8.0 the radius
+namespace held a single value and eight slots pointed at it, so a product following the
+rules could render exactly one rounding — and every structural check passed, because the
+slots existed and their defaults referenced the scale. The scale had been promoted verbatim
+from the one product with the fewest conformance violations, which turned out to be the
+product with the fewest choices. **A component implementation may come from one ship; the
+set of choices may only come from the fleet's distribution.**
 
 ```css
 --spacing-x-slot-card-pad: 1.375rem; /* 🔴 no */
@@ -177,8 +186,41 @@ to match it also fits _worse_, not better:
 More exact matches, five times the worst error — a scale bent toward one histogram drops its
 own ends.
 
+The radius scale was measured the same way, across the 266 radius values ten products apply
+(2026-08-23). Candidates were scored on a second axis as well: whether two values that exist
+**by design** land on the same step. Average error alone would have accepted folding `2px`
+into `0`, because 2px is a 2px error — but nene-records ships nine themes at 0px and three at
+2–3px as separate product themes, so that error deletes a distinction rather than rounding
+one.
+
+| radius scale                | exact match | within 2px | designed values collapsed |
+| --------------------------- | ----------: | ---------: | ------------------------: |
+| **the kit's nine + pill**   |   **69.9%** |  **97.7%** |          **3** (all 1px apart) |
+| eight, without a `10px` step |       64.3% |      97.7% |                         4 |
+| seven, without `2px`        |       43.2% |      97.7% |                         4 |
+
+🔑 **A scale is judged by what it can still tell apart, not only by how far it moves things.**
+
 🔑 **The scale is the set you keep to. The slots are what your brand looks like.**
 
+### 🔴 One slot is not yours to tune
+
+`--text-x-slot-control-touch-size` is a **device constraint, not a design choice**. iOS Safari
+zooms the whole page when a focused control is under 16px, so lowering this brings that back.
+
+It is a slot at all only because the kit cannot know your rem base — not because the value is
+open. Set `--text-x-slot-control-size` to whatever suits your body text; leave the touch one
+pointing at `--text-x-ios-floor`.
+
+Until 0.7.0 the kit wrote this as `max(var(--text-x-md), var(--text-x-ios-floor))`, which is
+the same idea expressed in a way that cannot work: `max()` picks the larger number and cannot
+ask what kind of device it is on, so every desktop control was pushed to 16px too — visibly
+larger than the text beside it in any product whose body is 14px. The two slots split that
+into "the size you chose" and "the floor the device imposes", and the components apply the
+second only under `@media (pointer: coarse)`.
+
+🔑 **Pointer, not width.** An iPad in landscape is wide and still zooms.
+
 ### Composing a slot
 
 A slot can hold several steps — four-sided padding is just CSS:

package/dist/primitives/Input.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
 import { CONTROL_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
-const BASE_CLASS = `w-full rounded-x-slot-control border border-border bg-surface-raised px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size text-text-primary placeholder:text-text-muted ${CONTROL_CLASS}`;
+const BASE_CLASS = `w-full rounded-x-slot-control border border-border bg-surface-raised px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-text-primary placeholder:text-text-muted ${CONTROL_CLASS}`;
 /**
  * Text input primitive. forwardRef so it works directly with react-hook-form `register`.
  * Visual values come from theme tokens only.

package/dist/primitives/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/primitives/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,yMAAyM,aAAa,EAAE,CAAC;AAE5O;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AACzF,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/primitives/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,uPAAuP,aAAa,EAAE,CAAC;AAE1R;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AACzF,CAAC,CAAC,CAAC"}

package/dist/primitives/Select.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
 import { CONTROL_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
-const BASE_CLASS = `w-full rounded-x-slot-control border border-border bg-surface-raised px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size text-text-primary ${CONTROL_CLASS}`;
+const BASE_CLASS = `w-full rounded-x-slot-control border border-border bg-surface-raised px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-text-primary ${CONTROL_CLASS}`;
 /**
  * Select primitive. forwardRef so it works directly with react-hook-form `register`.
  * Visual values come from theme tokens only.

package/dist/primitives/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/primitives/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6C,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAM3D,MAAM,UAAU,GAAG,6KAA6K,aAAa,EAAE,CAAC;AAEhN;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,CACL,iBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,YACzE,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/primitives/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6C,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAM3D,MAAM,UAAU,GAAG,2NAA2N,aAAa,EAAE,CAAC;AAE9P;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,CACL,iBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,YACzE,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/primitives/Textarea.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
 import { CONTROL_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
-const BASE_CLASS = `w-full rounded-x-slot-control border border-border bg-surface-raised px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size text-text-primary placeholder:text-text-muted ${CONTROL_CLASS}`;
+const BASE_CLASS = `w-full rounded-x-slot-control border border-border bg-surface-raised px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-text-primary placeholder:text-text-muted ${CONTROL_CLASS}`;
 /**
  * Multi-line text input. Deliberately identical to `Input` apart from the element, so the
  * two never drift: five ships wrote their own `Textarea.tsx` and the kit shipped without

package/dist/primitives/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/primitives/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA+B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,yMAAyM,aAAa,EAAE,CAAC;AAE5O;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAqC,SAAS,QAAQ,CACtF,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,mBAAU,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AAC5F,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/primitives/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA+B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,uPAAuP,aAAa,EAAE,CAAC;AAE1R;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAqC,SAAS,QAAQ,CACtF,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,mBAAU,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AAC5F,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hideyukimori/nene2-ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "NeNe fleet shared React UI kit — token-driven primitives on Tailwind v4 @theme. Components carry no design of their own; themes do.",
   "type": "module",
   "license": "MIT",

package/themes/default.css

@@ -138,8 +138,24 @@
   --color-x-slot-field-error: var(--color-danger);
   --text-x-slot-field-error-size: var(--text-x-2xs);
   --text-x-slot-field-label-size: var(--text-x-xs);
-  --font-weight-x-slot-field-label: 500;
-  --text-x-slot-control-size: max(var(--text-x-md), var(--text-x-ios-floor));
+  /* 🔴 `var(--font-weight-medium)`, not `500`. Identical output — Tailwind defines that
+   * step as 500 — but a literal here is a weight the kit invented, and the namespace has a
+   * nine-step scale already (thin…black). This one escaped the "slot defaults are scale
+   * references only" check because that check listed the namespaces it knew about; found
+   * while adding the radius scale (#348). */
+  --font-weight-x-slot-field-label: var(--font-weight-medium);
+  /* Control text. Two slots, because one value cannot answer "how is this being pointed at".
+   *
+   * 0.6.0 used `max(var(--text-x-md), var(--text-x-ios-floor))`, which raised every control
+   * to 16px — including on a desktop whose body text is 14px, where the inputs then look
+   * oversized next to everything else (found by hide on a real screen, 2026-08-23). `max()`
+   * cannot ask what kind of device it is on; it only ever picks the larger number.
+   *
+   * 🔴 The touch slot is a device constraint, not a design choice. iOS Safari zooms the whole
+   * page when a focused control is under 16px, so lowering it re-introduces that. It is a slot
+   * only because the kit cannot know a product's rem base — not because it is yours to tune. */
+  --text-x-slot-control-size: var(--text-x-md);
+  --text-x-slot-control-touch-size: var(--text-x-ios-floor);
 
   /* Sentinel for the consumer's build (#316). Zero-width, so applying it does nothing.
    * Its only job is to exist: `p-x-source-probe` appears nowhere except this kit's `dist`,
@@ -152,7 +168,50 @@
    * gave them nothing (50 x10, 40 x4, 30 x6, measured 2026-08-23 across 20 uses). */
   --opacity-x-disabled: 50%;
 
+  /* The radius scale. Nine steps plus pill, chosen the same way the spacing scale was —
+   * by measuring the fleet, not by taste. Snapping the 266 radius values the fleet actually
+   * applies (`border-radius` declarations and `--radius-*` theme tokens across ten products,
+   * 2026-08-23, #348) onto these nine puts 69.9% exactly on a step and 97.7% within 2px.
+   *
+   * 🔴 This replaces a scale that had ONE step. Eight slots all pointed at `--radius-x-md`,
+   * so a product following the rules could only ever render 8px — and a slot whose value set
+   * has one member is not a slot. The cause is recorded because it generalizes: the kit's
+   * theme was promoted verbatim from nene-payout, and payout is the fleet's only product
+   * with a single radius. Promoting from the product with the fewest conformance violations
+   * exported its poverty as the norm — having no choices is not the same as choosing well.
+   * A component implementation may come from one ship; the SET OF CHOICES may not.
+   *
+   * 🔴 `2px` is its own step because it is the single most common radius in the fleet
+   * (56 of 266). nene-records ships 9 themes at 0px and 3 at 2-3px as separate product
+   * themes — so folding 2px into 0 would not be a rounding error, it would delete a
+   * distinction somebody drew on purpose. Candidate scales were therefore scored on a
+   * second axis besides average error: whether two values that exist by design collapse
+   * onto one step (vault's proposal). The steps kept apart here are 0/2, 6/8 and 10/12;
+   * what still collapses (3-4, 5-6, 9-10) is 1px apart, below a scale's resolution.
+   *
+   * `--radius-x-md` keeps the value it had. Every slot points at it, so changing it would
+   * move every product's appearance silently — the scale gains steps, the default does not
+   * move. */
+  --radius-x-none: 0;
+  --radius-x-2xs: 2px;
+  --radius-x-xs: 4px;
+  --radius-x-sm: 6px;
   --radius-x-md: 0.5rem;
+  --radius-x-lg: 10px;
+  --radius-x-xl: 12px;
+  --radius-x-2xl: 16px;
+  --radius-x-3xl: 24px;
+
+  /* Fully round. A step, not a footnote: `rounded-x-pill` is the most-used radius in
+   * nene-field (48 uses) and appears in five products (64 uses total).
+   *
+   * 🔴 A product whose design language has no rounding does NOT redefine this step — it
+   * points its slots at `--radius-x-none`. nene-records reaches the same end today by
+   * setting its own `--radius-full: 0px`, which works only because its components hard-code
+   * `rounded-full`. Overriding a scale step changes what a name means fleet-wide; overriding
+   * a slot changes one product's choice. The second is the mechanism; the first is the drift
+   * the scale exists to prevent. */
+  --radius-x-pill: 9999px;
 
   /* The spacing scale. Nine steps, chosen by measurement rather than taste: snapping the
    * 944 spacing utilities the fleet writes by hand onto these nine moves 98.2% of them by