@takazudo/zdtp 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.3.3
+
+### Features
+
+- **OKLCH display & edit for opt-in GenericTab color items.** A `GenericTab` `{ kind: "color" }` tier item can now set `format: "oklch"` to route through the OKLCH/HSL `ColorPicker` instead of the native `<input type="color">`, so host/secondary panels can faithfully **display and edit** wide-gamut oklch/P3 palette values (e.g. a family-named `--palette-cool-700: oklch(...)`) with **no lossy hex round-trip on commit**. Additive and backward compatible — omitting `format` (or `"hex"`) keeps the native color input, so existing consumers, `ColorTab`, and the highlight popover are unchanged. ([#373](https://github.com/Takazudo/zudo-design-token-panel/issues/373), supersedes [#372](https://github.com/Takazudo/zudo-design-token-panel/issues/372))
+  - Add a `cssToOklcha` CSS Color 4 `oklch()` parser (number/percentage L, chroma `%` = 0.4, deg/rad/grad/turn hue, `none`, alpha; strict — rejects malformed channels). ([#374](https://github.com/Takazudo/zudo-design-token-panel/issues/374))
+  - Extend the public `{ kind: "color" }` tier-item type with optional `format?: "hex" | "oklch"`. ([#375](https://github.com/Takazudo/zudo-design-token-panel/issues/375))
+  - Give `ColorPicker` a `valueFormat` contract: in oklch mode a canonical `Oklcha` is the source of truth and wide-gamut chroma survives prop→edit→emit without sRGB clamping. ([#376](https://github.com/Takazudo/zudo-design-token-panel/issues/376))
+  - HSL/alpha/preset hardening: the OKLCH↔HSL mode toggle is emit-free; only an HSL slider edit is a (documented) sRGB-oriented path. ([#377](https://github.com/Takazudo/zudo-design-token-panel/issues/377))
+  - Add a shared `ColorField` (swatch-button → picker popover) and route both generic item editors through it. ([#378](https://github.com/Takazudo/zudo-design-token-panel/issues/378))
+
+### Fixed
+
+- **Style the `ColorField` swatch and reject malformed oklch tokens.** The new opt-in swatch had no CSS (an empty `div` with only a background color → zero-size/invisible affordance); added sized swatch styles. The `cssToOklcha` tokenizer also accepted malformed channels (e.g. `oklch(50px 0.1 120)`) by silently extracting numeric substrings; it now requires exactly three fully-anchored channel tokens and rejects unknown suffixes. ([#380](https://github.com/Takazudo/zudo-design-token-panel/pull/380)) (2d045d0)
+
+### Other Changes
+
+- Add an end-to-end test asserting the oklch round-trip (panel `onChange` + apply path both emit `oklch(...)`) and wide-gamut P3 preservation. ([#379](https://github.com/Takazudo/zudo-design-token-panel/issues/379)) (0595f28)
+
 ## 0.3.2
 
 ### Fixed

package/dist/components/color-picker/color-field.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ColorField — swatch-button that opens a ColorPicker popover.
+ *
+ * A swatch div (div[role="button"]) + isOpen state + anchorRef pattern,
+ * mirroring ColorSwatch in color-tab.tsx.
+ *
+ * DOM-hygiene compliant: div-button with onClick + onKeyDown (Enter/Space);
+ * no banned semantic tags — hostile-host policy (CLAUDE.md).
+ */
+import type { ColorPickerValueFormat } from './color-picker';
+export interface ColorFieldProps {
+    /** Current color value. Hex string in hex mode; `oklch(...)` string in oklch mode. */
+    value: string;
+    /** Called with the new color string when the user commits a change. */
+    onChange: (next: string) => void;
+    /**
+     * Output format for `value` / `onChange`. Defaults to 'hex' (back-compatible
+     * with the native <input type="color"> path).
+     */
+    valueFormat?: ColorPickerValueFormat;
+    /** Display label shown in the picker header and aria-label. */
+    label: string;
+    /** Optional CSS custom property name (e.g. `--my-color`). Used for aria-label. */
+    cssVar?: string;
+    /**
+     * When true, the swatch is shown but clicking / Enter / Space does NOT open
+     * the picker. Mirrors the `disabled` behavior of the native <input type="color">.
+     */
+    readonly?: boolean;
+}
+/**
+ * Swatch-button that opens a ColorPicker popover.
+ *
+ * Readonly items show the swatch but do not open the picker on interaction.
+ */
+export declare function ColorField({ value, onChange, valueFormat, label, cssVar, readonly: isReadonly, }: ColorFieldProps): import("preact").JSX.Element;
+export default ColorField;
+//# sourceMappingURL=color-field.d.ts.map

package/dist/components/color-picker/color-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-field.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-field.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,WAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EAAE,UAAkB,GAC7B,EAAE,eAAe,gCA6CjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/color-picker/color-picker.d.ts

@@ -19,11 +19,35 @@
  */
 import type { JSX } from 'preact';
 export type ColorPickerMode = 'oklch' | 'hsl';
+/**
+ * Output value format for the picker.
+ *
+ *   'hex'   — `color` prop is a hex string, `onChange` emits hex. The internal
+ *             source of truth is the hex string. (Default — back-compatible.)
+ *   'oklch' — `color` prop is a CSS `oklch(...)` string (a hex is also tolerated
+ *             on input), `onChange` emits a normalized `oklch(...)` string. The
+ *             internal source of truth is a canonical `Oklcha`, so wide-gamut
+ *             chroma and sub-step precision survive edits without sRGB clamping.
+ */
+export type ColorPickerValueFormat = 'hex' | 'oklch';
 export interface ColorPickerProps {
-    /** Current hex color (#RRGGBB or #RRGGBBAA). Source of truth. */
+    /**
+     * Current color. In `valueFormat='hex'` (default) this is a hex string
+     * (#RRGGBB or #RRGGBBAA). In `valueFormat='oklch'` this is a CSS `oklch(...)`
+     * string (a hex is tolerated and parsed via the hex path as a fallback).
+     */
     color: string;
-    /** Called when the user commits a new color via any sub-control. */
-    onChange: (hex: string) => void;
+    /**
+     * Called when the user commits a new color via any sub-control. The argument
+     * matches `valueFormat`: a hex string in 'hex' mode, an `oklch(...)` string
+     * in 'oklch' mode.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Output format for `color` / `onChange`. Defaults to 'hex' (back-compatible
+     * with existing callers that pass no value).
+     */
+    valueFormat?: ColorPickerValueFormat;
     /** Optional label rendered in the picker header. */
     label?: string;
     /**
@@ -59,6 +83,6 @@ export declare function usePopoverClose(containerRef: React.RefObject<HTMLElemen
  * The parent renders `{isOpen && <ColorPicker ... />}`. This component does
  * NOT render a trigger swatch and does NOT use createPortal.
  */
-export declare function ColorPicker({ color, onChange, label, defaultMode, anchorRef, onClose, }: ColorPickerProps): JSX.Element;
+export declare function ColorPicker({ color, onChange, valueFormat, label, defaultMode, anchorRef, onClose, }: ColorPickerProps): JSX.Element;
 export default ColorPicker;
 //# sourceMappingURL=color-picker.d.ts.map

package/dist/components/color-picker/color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;GAkBG;AAUH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAiBlC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IAC/B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,2EAA2E;IAC3E,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,gFAAgF;IAChF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,iBAAiB,gCAAgC,CAAC;AAyJ/D;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GACX,GAAG,CAAC,aAAa,CAuCnB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACjD,OAAO,EAAE,MAAM,IAAI,GAClB,IAAI,CA2BN;AAID;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAqB,EACrB,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyehC;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;GAkBG;AAUH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAmBlC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9C;;;;;;;;;GASG;AACH,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,2EAA2E;IAC3E,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,gFAAgF;IAChF,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,iBAAiB,gCAAgC,CAAC;AAuL/D;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GACX,GAAG,CAAC,aAAa,CAuCnB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACjD,OAAO,EAAE,MAAM,IAAI,GAClB,IAAI,CA2BN;AAID;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAmB,EACnB,KAAK,EACL,WAAqB,EACrB,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAikBhC;AAED,eAAe,WAAW,CAAC"}