@takazudo/zdtp 0.3.3 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.4.1
+
+### Fixed
+
+- **Palette tab no longer renders unstyled for self-injection consumers.** The 0.4.0 palette-tab CSS (`palette-chart` / `palette-edit` / `palette-readout`) reached `dist/zdtp.css` but was missing from the stylesheet the panel self-injects at runtime, so consumers using `import('@takazudo/zdtp')` + `configurePanel(...)` without importing `@takazudo/zdtp/styles` saw collapsed swatch bars and a missing curve-editor canvas. The two palette stylesheets are now `@import`ed into the single `panel.css` aggregate (matching `color-picker.css`) so both CSS delivery paths stay in sync, guarded by a new static `Invariant G` test. ([#413](https://github.com/Takazudo/zudo-design-token-panel/issues/413))
+
+## 0.4.0
+
+### Features
+
+- **Palette tab — an OKLCH palette generator & checker built into the panel.** A new reserved `palette` tab (joining `color` / `font` / `spacing` / `size`) lets a host define grouped color scales as `{ kind: "color", format: "oklch" }` tier items (`--palette-{group}-{n}`) and edit/verify them in-panel with no lossy hex round-trip. Two modes:
+  - **Edit mode** — a grouped step grid plus a `PrismChart` OKLCH L/C/H curve editor; dragging a curve re-derives every step in the group and commits the whole group in one batched write on pointer-up. ([#390](https://github.com/Takazudo/zudo-design-token-panel/issues/390), [#393](https://github.com/Takazudo/zudo-design-token-panel/issues/393), [#395](https://github.com/Takazudo/zudo-design-token-panel/issues/395))
+  - **Check mode** — a WCAG contrast-checker view over the live palette. ([#394](https://github.com/Takazudo/zudo-design-token-panel/issues/394))
+  - Backed by new OKLCH curve math + WCAG contrast helpers, and wired through the generic-tab apply path (`buildApplyOverrides` emits `state.tabs[*]`) so palette overrides apply, persist, and round-trip through Export/Load. ([#391](https://github.com/Takazudo/zudo-design-token-panel/issues/391), [#392](https://github.com/Takazudo/zudo-design-token-panel/issues/392))
+
+### Fixed
+
+- Palette flat-mode tier ids, persist-safe hue handling, and serialize arity (post-codex-review hardening). (f9c38f9)
+
+### Other Changes
+
+- Integration + serde + browser-confirm test coverage for the palette tab. ([#396](https://github.com/Takazudo/zudo-design-token-panel/issues/396))
+- Add a grouped palette tab recipe + reference docs (EN + JA). ([#397](https://github.com/Takazudo/zudo-design-token-panel/issues/397))
+
 ## 0.3.3
 
 ### Features

package/dist/apply/build-apply-overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build-apply-overrides.d.ts","sourceRoot":"","sources":["../../src/apply/build-apply-overrides.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE5F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,UAAU,EACjB,aAAa,EAAE,eAAe,GAAG,SAAS,EAC1C,OAAO,GAAE,kBAA8C,EACvD,IAAI,GAAE,SAAS,SAAS,EAA0B,GACjD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2DxB"}
+{"version":3,"file":"build-apply-overrides.d.ts","sourceRoot":"","sources":["../../src/apply/build-apply-overrides.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE5F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAItD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,UAAU,EACjB,aAAa,EAAE,eAAe,GAAG,SAAS,EAC1C,OAAO,GAAE,kBAA8C,EACvD,IAAI,GAAE,SAAS,SAAS,EAA0B,GACjD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA8ExB"}

package/dist/components/palette-chart/index.d.ts

@@ -0,0 +1,3 @@
+export { PaletteChart, type PaletteChartProps, type Oklcha, type Channel, } from './palette-chart';
+export { default } from './palette-chart';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/palette-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/palette-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,MAAM,EACX,KAAK,OAAO,GACb,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/palette-chart/palette-chart.d.ts

@@ -0,0 +1,75 @@
+import type { JSX } from 'preact';
+import { type Channel } from '../../utils/palette-curve';
+import { type Oklcha } from '../../utils/color-oklch';
+/**
+ * PaletteChart — controlled, presentational OKLCH L/C/H curve editor.
+ *
+ * Ported from pgen's PrismChart (OKHsl H/S/L) to zdtp's OKLCH L/C/H space.
+ * Composition:
+ *   • Background = N vertical color bands, one per palette color. Band `i` is
+ *     painted `oklchaToHex(colors[i])` and spans the FULL chart height. The
+ *     selected band renders at full opacity; the rest are dimmed.
+ *   • One overlaid draggable curve per VISIBLE channel — L, C, H — EACH IN ITS
+ *     OWN SVG with its OWN Y-domain (L 0–100, C 0–MAX_OKLCH_CHROMA, H 0–360)
+ *     mapped to the SAME pixel height. The vertical bands (x = step) are the
+ *     only shared reference; the three channels deliberately do NOT share one
+ *     numeric Y axis (Prism's key trick).
+ *   • N nodes per curve at x = stepIndex (centered over band `i`), y = inverted
+ *     channel value. Dragging a node vertically reports the new value.
+ *
+ * Ownership boundary: this chart is FULLY CONTROLLED. It owns no color state;
+ * `colors` is the single source of truth supplied by the parent (#395). It only
+ * CONSUMES `visibleChannels` (to draw/hide each curve) and reports intents via
+ * `onChange` / `onSelectIndex` / `onToggleChannel`. Commit boundaries for
+ * batched persistence are signalled by `onChangeStart` / `onChangeEnd`.
+ *
+ * Drag modes (Prism parity):
+ *   • Per-node drag — grab a single node and move it vertically.
+ *   • Whole-curve drag — grab the connecting LINE and translate EVERY node of
+ *     that channel by one clamped delta, preserving the curve's relative shape
+ *     and stopping when any node hits 0 or CHANNEL_MAX.
+ *   Nodes WIN over line drag: the node hit circles render AFTER the hit-polyline
+ *   within the same SVG, so a pointer-down on a node hits the circle (DOM order
+ *   within an SVG determines paint/hit precedence).
+ */
+export type { Oklcha } from '../../utils/color-oklch';
+export type { Channel } from '../../utils/palette-curve';
+export interface PaletteChartProps {
+    /** Palette colors in OKLCH space. Band `i` = oklchaToHex(colors[i]). */
+    colors: Oklcha[];
+    /** Index of the currently selected color/step (highlighted band + node column). */
+    selectedIndex: number;
+    /** Which curves are drawn. Owned by the parent; chart only consumes. */
+    visibleChannels: {
+        l: boolean;
+        c: boolean;
+        h: boolean;
+    };
+    /** Fired when a node is dragged/keyed — value is clamped+quantized to the channel range. */
+    onChange: (index: number, channel: Channel, value: number) => void;
+    /** Fired when a node/band is picked. */
+    onSelectIndex: (i: number) => void;
+    /** Fired to request a channel visibility toggle. Chart does NOT own the state. */
+    onToggleChannel: (c: Channel) => void;
+    /**
+     * Commit-boundary start. Fires ONCE at the beginning of an edit gesture:
+     * pointer-down on a node or curve line, or the first key of a keyboard edit.
+     * The parent (#395) opens a transient/preview write here.
+     */
+    onChangeStart?: () => void;
+    /**
+     * Commit-boundary end. Fires ONCE when the edit gesture completes: pointer-up
+     * / pointer-cancel, or immediately after a keyboard edit. The parent batches
+     * the whole gesture into a single persist on this signal.
+     */
+    onChangeEnd?: () => void;
+}
+declare function PaletteChartImpl({ colors, selectedIndex, visibleChannels, onChange, onSelectIndex, onChangeStart, onChangeEnd, }: PaletteChartProps): JSX.Element;
+/**
+ * Memoized so parent re-renders that don't change props don't re-walk every
+ * band/curve/node. The drag state lives in refs, so a controlled-value update
+ * from the parent flows back through props as the single source of truth.
+ */
+export declare const PaletteChart: typeof PaletteChartImpl;
+export default PaletteChart;
+//# sourceMappingURL=palette-chart.d.ts.map

package/dist/components/palette-chart/palette-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-chart.d.ts","sourceRoot":"","sources":["../../../src/components/palette-chart/palette-chart.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAKL,KAAK,OAAO,EACb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAe,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,YAAY,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,YAAY,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAsDzD,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,mFAAmF;IACnF,aAAa,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,eAAe,EAAE;QAAE,CAAC,EAAE,OAAO,CAAC;QAAC,CAAC,EAAE,OAAO,CAAC;QAAC,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACxD,4FAA4F;IAC5F,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,wCAAwC;IACxC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kFAAkF;IAClF,eAAe,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAsCD,iBAAS,gBAAgB,CAAC,EACxB,MAAM,EACN,aAAa,EACb,eAAe,EACf,QAAQ,EACR,aAAa,EAIb,aAAa,EACb,WAAW,GACZ,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAgYjC;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,yBAAyB,CAAC;AAEnD,eAAe,YAAY,CAAC"}