@takazudo/zdtp 0.1.0-next.2 → 0.2.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.2.0-next.1
+
+### Breaking Changes
+
+- **Removed the `min` and `max` properties from `TokenDef` and `TierValueKind` (`'length'` | `'number'` variants).** The panel no longer renders an `<input type="range">` slider on numeric token rows — they are now plain unconstrained number inputs. The mid-keystroke clamp and on-blur clamp logic added in [#313](https://github.com/Takazudo/zudo-design-token-panel/pull/313) are gone; values commit as typed, and the `aria-invalid` / red-border styling for out-of-range values is removed. Real-world use proved sliders too restrictive for a developer tool — devs want to type arbitrary values freely (including deliberately out-of-spec or experimental ones). **Migration**: remove every `min: ...` and `max: ...` field from your token manifests. The internal color-picker `SliderConfig.min` / `.max` (OKLCH/HSL axis bounds) is unrelated and unchanged. (a9b768e, [#325](https://github.com/Takazudo/zudo-design-token-panel/issues/325), [#328](https://github.com/Takazudo/zudo-design-token-panel/pull/328))
+
+### Other Changes
+
+- Strip `min` / `max` from 35+ test fixture files. (b8ef56e)
+- Rewrite the [#313](https://github.com/Takazudo/zudo-design-token-panel/pull/313) clamp-regression tests to assert the new free-input contract — value commits as typed, no `aria-invalid` on out-of-range numeric input. (9798e07)
+- Update `packages/zdtp/README.md` and `packages/zdtp/PORTABLE-CONTRACT.md` to drop slider-describing prose and the min/max examples. (e210a2d)
+- Update doc-site reference pages (`token-manifest.mdx`, `architecture.mdx`, `configure-panel.mdx`) to drop the min/max examples and slider-UI prose. (9262585)
+
+## 0.1.0-next.3
+
+### Features
+
+- **Tier-ref selector is now a native `<select>` and reflects live override values.** The custom `role="listbox"` dropdown (with its open/focusedIndex state machine, ARIA plumbing, click-outside handler, and keyboard-nav callbacks) was replaced by a native `<select>`, dropping ~250 lines of UI code. Each `<option>` label now shows `--var-name (resolved-value)` using `resolveTierItemValue()` from the apply pipeline — so when a referenced tier-1 token's value is overridden via its slider/text row, the tier-2 selector's option labels reflect the new value immediately instead of staying stuck on the manifest default. (570a1b1) ([#312](https://github.com/Takazudo/zudo-design-token-panel/issues/312))
+
+### Fixed
+
+- **Number inputs no longer overwrite the user's draft mid-keystroke.** `SliderRow` and the generic-tab item editor used to parse-and-clamp on every keystroke, immediately commit the clamped value, and round-trip it back into the input — so typing `2` then `2` (expecting `22`) snapped the input to `6` when the token's `max` was `6`. Out-of-range or empty drafts are now flagged with a `--invalid` red border and held without committing; on blur, an invalid draft reverts to the last known-good value. The slider thumb continues to scrub live. (21d3afa) ([#313](https://github.com/Takazudo/zudo-design-token-panel/issues/313))
+
 ## 0.1.0-next.2
 
 ### Fixed

package/README.md

@@ -258,7 +258,7 @@ const spacingTier: TierConfig = {
       label: 'Spacing M',
       group: 'hsp',
       default: '1rem',
-      type: { kind: 'length', min: 0, max: 4, step: 0.0625, unit: 'rem' },
+      type: { kind: 'length', step: 0.0625, unit: 'rem' },
     },
   ],
 };
@@ -480,8 +480,8 @@ spec; this section is the consumer-oriented summary.
 
 ```ts
 export type TierValueKind =
-  | { kind: 'length'; min: number; max: number; step: number; unit: string }
-  | { kind: 'number'; min: number; max: number; step: number }
+  | { kind: 'length'; step: number; unit: string }
+  | { kind: 'number'; step: number }
   | { kind: 'select'; options: readonly string[] }
   | { kind: 'text' }
   | { kind: 'cursor' }
@@ -555,7 +555,7 @@ export const spacingTab: TabConfig = {
           label: 'Spacing M',
           group: 'hsp',
           default: '1rem',
-          type: { kind: 'length', min: 0, max: 4, step: 0.0625, unit: 'rem' },
+          type: { kind: 'length', step: 0.0625, unit: 'rem' },
         },
       ],
     },

package/dist/controls/pill-slider-row.d.ts

@@ -11,7 +11,7 @@ import type { TokenDef } from '../tokens/manifest';
  * number input go read-only so the user can't accidentally de-pill via typing.
  *
  * When the checkbox is OFF the row behaves as a normal `SliderRow` — the user
- * can drag or type any value in the manifest's min/max range.
+ * can type any numeric value in the number input (unconstrained free input).
  *
  * Toggling between modes preserves the last custom value (kept in a ref so we
  * don't round-trip it through state / persistence) — this is the "without data

package/dist/controls/slider-row.d.ts

@@ -3,10 +3,6 @@ import { type TokenDef } from '../tokens/manifest';
  * One manifest-driven token row:
  *
  *   [label]  ... [  1.25 rem]   ← label + number input (unit suffix inside)
- *   [=========o==================]  ← full-width range slider
- *
- * Range input and number input are two-way bound: dragging the slider fills
- * the number input live, and typing a value moves the slider once it parses.
  *
  * The parent owns the persisted value (stored as a string like `"1.25rem"`);
  * this row keeps a local "draft" string only for the number input, so users
@@ -24,8 +20,8 @@ export interface SliderRowProps {
     /** Current persisted value (or the token's default if no override). */
     value: string;
     /** Called with the row's `token.id` and the new CSS string (e.g.
-     *  `"0.75rem"`) whenever the user commits a change via slider or a
-     *  parseable number input. */
+     *  `"0.75rem"`) whenever the user commits a change via a parseable
+     *  number input. */
     onChange: (id: string, next: string) => void;
 }
 declare function SliderRow({ token, value, onChange }: SliderRowProps): import("preact").JSX.Element;

package/dist/controls/slider-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-row.d.ts","sourceRoot":"","sources":["../../src/controls/slider-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAkC,MAAM,oBAAoB,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,CAAC;IAChB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd;;kCAE8B;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,gCA6E5D;;AAKD,wBAA+B"}
+{"version":3,"file":"slider-row.d.ts","sourceRoot":"","sources":["../../src/controls/slider-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAkC,MAAM,oBAAoB,CAAC;AAEnF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,CAAC;IAChB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd;;wBAEoB;IACpB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,gCAqE5D;;AAKD,wBAA+B"}

package/dist/controls/tier-ref-selector.d.ts

@@ -1,9 +1,9 @@
 import type { TabConfig } from '../tokens/tier-model';
 /**
  * Sentinel string passed to `onChange` when the user picks "Literal...".
- * The parent component (Wave 5) interprets this as a request to flip the
- * item back into its kind-specific editor (slider / text / select) writing a
- * literal CSS override.
+ * The parent component interprets this as a request to flip the item back
+ * into its kind-specific editor (slider / text / select) writing a literal
+ * CSS override.
  */
 export declare const TIER_REF_LITERAL_SIGNAL: "__literal__";
 export interface TierRefSelectorProps {
@@ -26,8 +26,14 @@ export interface TierRefSelectorProps {
      * - Picking "Literal...": `onChange(itemId, TIER_REF_LITERAL_SIGNAL)`
      */
     onChange: (itemId: string, next: string) => void;
+    /**
+     * Returns the resolved (override-aware) preview string for a tier-1 item id.
+     * Each option label is formatted as `${item.cssVar} (${truncated preview})`.
+     * Pass a wrapper around resolveTierItemValue using the current tweak-state map.
+     */
+    previewValueFor: (refItemId: string) => string;
 }
-declare function TierRefSelector({ tab, tierId, itemId, value, onChange }: TierRefSelectorProps): import("preact").JSX.Element;
+declare function TierRefSelector({ tab, tierId, itemId, value, onChange, previewValueFor }: TierRefSelectorProps): import("preact").JSX.Element;
 declare const _default: typeof TierRefSelector;
 export default _default;
 //# sourceMappingURL=tier-ref-selector.d.ts.map

package/dist/controls/tier-ref-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tier-ref-selector.d.ts","sourceRoot":"","sources":["../../src/controls/tier-ref-selector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAwB,MAAM,sBAAsB,CAAC;AAM5E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAG,aAAsB,CAAC;AA0C9D,MAAM,WAAW,oBAAoB;IACnC,6EAA6E;IAC7E,GAAG,EAAE,SAAS,CAAC;IACf,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAMD,iBAAS,eAAe,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,gCA4NtF;;AAED,wBAAqC"}
+{"version":3,"file":"tier-ref-selector.d.ts","sourceRoot":"","sources":["../../src/controls/tier-ref-selector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAwB,MAAM,sBAAsB,CAAC;AAM5E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAG,aAAsB,CAAC;AA6B9D,MAAM,WAAW,oBAAoB;IACnC,6EAA6E;IAC7E,GAAG,EAAE,SAAS,CAAC;IACf,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAMD,iBAAS,eAAe,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,oBAAoB,gCAiDvG;;AAED,wBAAqC"}