+ { applyHex(hex); setImageOpen(false); }}
+ onClose={() => setImageOpen(false)}
+ />
+ )}
+
+ );
+};
diff --git a/craft/src/panels/right/styles/ContrastNote.test.tsx b/craft/src/panels/right/styles/ContrastNote.test.tsx
new file mode 100644
index 0000000..3ad4f3e
--- /dev/null
+++ b/craft/src/panels/right/styles/ContrastNote.test.tsx
@@ -0,0 +1,59 @@
+import { describe, test, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { ContrastNote } from './ContrastNote';
+import { SiteDesignProvider } from '../../../state/SiteDesignContext';
+
+let container: HTMLDivElement | null = null;
+let root: Root;
+function render(ui: React.ReactElement) {
+ container = document.createElement('div');
+ document.body.appendChild(container);
+ act(() => { root = createRoot(container!); root.render(
+
+ {screenPickKind() === 'eyedropper' && (
+
+ )}
+
+
+
+ {msg && {msg}
}
+ {imageOpen && (
+
+ Contrast not checked ({v.reason})
+
+ );
+ }
+
+ const fix = onUseSuggestion ? suggestFix(fg, bg, design, { large }) : null;
+ return (
+
+
+ {label ? `${label}: ` : ''}Low contrast {v.ratio!.toFixed(2)}:1 (needs {v.required}:1)
+
+ {fix && (
+
+ )}
+
+ );
+};
diff --git a/craft/src/panels/right/styles/ImagePickModal.test.tsx b/craft/src/panels/right/styles/ImagePickModal.test.tsx
new file mode 100644
index 0000000..3de1e5c
--- /dev/null
+++ b/craft/src/panels/right/styles/ImagePickModal.test.tsx
@@ -0,0 +1,88 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+vi.mock('../../../utils/assets', () => ({ listAssets: vi.fn(), uploadAsset: vi.fn() }));
+vi.mock('../../../utils/image-sample', async () => {
+ const actual = await vi.importActual
+ {assets.map((a) => (
+
+);
+
+/** Uploaded images for the picker, loaded once on mount. */
+export function useImageAssets(): Asset[] {
+ const [assets, setAssets] = useState onSelect(a.url))}
+ data-testid={`image-asset-${a.name}`}
+ title={a.name}
+ style={{ cursor: 'pointer', borderRadius: 4, overflow: 'hidden', aspectRatio: '1', border: `2px solid ${a.url === selected ? '#3b82f6' : 'transparent'}` }}
+ >
+ 
+
+ ))}
+ {assets.length === 0 && (
+ + No images uploaded yet. Upload one from an Image block first. +
+ )} +
+
+
+
+ Pick a colour from an image
+ +Loading image...
} + {state.status === 'failed' &&{state.message}
}
+ {src && state.status !== 'failed' && (
+
+
+ )}
+ {!src && Choose an uploaded image above, then click a spot in it to use that colour.
} +
+
+
+
+ Palette from an image
+ +Choose an uploaded image to see its main colours. Nothing is added until you press Add.
} + {state.status === 'loading' &&Reading colours...
} + {state.status === 'failed' &&{state.message}
}
+ {state.status === 'ready' && (
+
+
+ )}
+
+
+
+
+
+
+ {colours.length === 0 && No colours found. This image may be fully transparent.
} + {colours.map((hex) => { + const done = taken.has(hex); + return ( +
+
+
+ );
+ })}
+ {hex}
+
+
diff --git a/craft/src/panels/right/styles/TokenSwatchRow.test.tsx b/craft/src/panels/right/styles/TokenSwatchRow.test.tsx
index 789430a..bb5e186 100644
--- a/craft/src/panels/right/styles/TokenSwatchRow.test.tsx
+++ b/craft/src/panels/right/styles/TokenSwatchRow.test.tsx
@@ -100,4 +100,62 @@ describe('TokenSwatchRow', () => {
act(() => { ctx.current!.updateDesign({ primaryColor: '#ff0000' }); });
expect(swatches()[0].style.background).toBe('rgb(255, 0, 0)');
});
+
+ describe('saved colours', () => {
+ const saved = [
+ { id: 'a', label: 'Logo blue', hex: '#15202c', brand: true, slot: 2 },
+ { id: 'b', label: 'Sand', hex: '#d2b48c', brand: false },
+ ];
+ const withSaved = (value: string | undefined, onSelect: (v: string) => void) => {
+ const ctx: { current: SiteDesignContextValue | null } = { current: null };
+ render(
+
+ ,
+ );
+ act(() => { ctx.current!.updateDesign({ swatches: saved }); });
+ };
+ const savedBtns = () => Array.from(container!.querySelectorAll('button[data-swatch]'));
+
+ test('shown after the 11 token swatches; title = label + hex; brand shows a live ring', () => {
+ withSaved(undefined, () => {});
+ const all = swatches();
+ expect(all.length).toBe(COLOR_TOKENS.length + 2);
+ expect(all.slice(0, COLOR_TOKENS.length).every((b) => b.dataset.token)).toBe(true);
+ const [brand, plain] = savedBtns();
+ expect(brand.title).toContain('Logo blue');
+ expect(brand.title).toContain('#15202c');
+ expect(brand.title).toContain('var(--wsb-brand-2)');
+ expect(brand.classList.contains('token-swatch--live')).toBe(true);
+ expect(brand.dataset.live).toBe('true');
+ expect(plain.title).toBe('Sand #d2b48c');
+ expect(plain.classList.contains('token-swatch--live')).toBe(false);
+ expect(brand.style.background).toBe('rgb(21, 32, 44)');
+ });
+
+ test('brand swatch selects var(--wsb-brand-N); plain selects its hex', () => {
+ const onSelect = vi.fn();
+ withSaved(undefined, onSelect);
+ const [brand, plain] = savedBtns();
+ act(() => { brand.click(); });
+ act(() => { plain.click(); });
+ expect(onSelect.mock.calls.map((c) => c[0])).toEqual(['var(--wsb-brand-2)', '#d2b48c']);
+ });
+
+ test('pressed when the value equals what the swatch stores', () => {
+ withSaved('var(--wsb-brand-2)', () => {});
+ expect(savedBtns().map((b) => b.getAttribute('aria-pressed'))).toEqual(['true', 'false']);
+ });
+
+ test('plain hex swatch pressed on a case-insensitive hex match', () => {
+ withSaved('#D2B48C', () => {});
+ expect(savedBtns().map((b) => b.getAttribute('aria-pressed'))).toEqual(['false', 'true']);
+ });
+
+ test('the group is labelled', () => {
+ withSaved(undefined, () => {});
+ expect(container!.querySelector('[role="group"]')!.getAttribute('aria-label')).toBe('Site colors');
+ });
+ });
});
diff --git a/craft/src/panels/right/styles/TokenSwatchRow.tsx b/craft/src/panels/right/styles/TokenSwatchRow.tsx
index 9a73d79..d362fb5 100644
--- a/craft/src/panels/right/styles/TokenSwatchRow.tsx
+++ b/craft/src/panels/right/styles/TokenSwatchRow.tsx
@@ -1,6 +1,14 @@
import React from 'react';
import { useSiteDesign } from '../../../state/SiteDesignContext';
import { COLOR_TOKENS, TokenKey, tokenRef, resolveTokenValue } from '../../../utils/tokens';
+import { swatchValue, normalizeHex, type SavedSwatch } from '../../../utils/swatches';
+
+/** Hover/aria text for a saved swatch: label + hex (+ the live token for brand colours). */
+export function savedSwatchTitle(s: SavedSwatch): string {
+ const base = s.label.trim() ? `${s.label.trim()} ${s.hex}` : s.hex;
+ const ref = swatchValue(s);
+ return ref !== s.hex ? `${base} (live brand colour, ${ref})` : base;
+}
export interface TokenSwatchRowProps {
/** The control's current value; the swatch whose `var(--wsb-*)` ref equals it is shown pressed. */
@@ -25,6 +33,8 @@ export const TokenSwatchRow: React.FC = ({
}) => {
const { design } = useSiteDesign();
const current = value?.trim();
+ const saved: SavedSwatch[] = Array.isArray(design.swatches) ? design.swatches : [];
+ const currentHex = current ? normalizeHex(current) : null;
return (
= ({
/>
);
})}
+ {saved.map((sw) => {
+ const stored = swatchValue(sw);
+ const live = stored !== sw.hex;
+ const pressed = live ? current === stored : !!currentHex && currentHex === sw.hex.toLowerCase();
+ const title = savedSwatchTitle(sw);
+ return (
+
);
diff --git a/craft/src/panels/right/styles/color-fields.pick.test.tsx b/craft/src/panels/right/styles/color-fields.pick.test.tsx
new file mode 100644
index 0000000..019874d
--- /dev/null
+++ b/craft/src/panels/right/styles/color-fields.pick.test.tsx
@@ -0,0 +1,176 @@
+import { describe, test, expect, vi, afterEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { ColorPickerField, ColorSwatchGrid, GradientSwatchGrid } from './shared';
+import { SiteDesignProvider, useSiteDesign, SiteDesignContextValue } from '../../../state/SiteDesignContext';
+
+const pickFromCanvas = vi.fn();
+const pickFromScreen = vi.fn();
+let screenKind: 'eyedropper' | 'none' = 'none';
+vi.mock('../../../utils/color-pick', async (orig) => {
+ const real = await orig{label}
@@ -46,6 +56,26 @@ export const TokenSwatchRow: React.FCEnter a hex colour like #3b82f6 (3, 4, 6 or 8 digits).
: null;
+
interface ColorSwatchGridProps {
colors: { label: string; value: string }[];
activeValue: string | undefined;
@@ -79,10 +109,15 @@ interface ColorSwatchGridProps {
onContinuous?: (value: string) => void;
/** Show the site-colour (token) row first. Default true. */
showTokens?: boolean;
+ /** Same inline contrast hint as ColorPickerField. */
+ contrastWith?: string;
+ contrastLarge?: boolean;
+ contrastLabel?: string;
+ contrastRole?: 'fg' | 'bg';
}
-export const ColorSwatchGrid: React.FC
{showTokens && = ({ colors, active
/>
+
{colors.map((c) => (
);
};
diff --git a/craft/src/state/PageContext.rewriteSiteStates.test.tsx b/craft/src/state/PageContext.rewriteSiteStates.test.tsx
new file mode 100644
index 0000000..8576a7c
--- /dev/null
+++ b/craft/src/state/PageContext.rewriteSiteStates.test.tsx
@@ -0,0 +1,73 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { PageProvider, usePages } from './PageContext';
+import { replaceBrandRef, countBrandRefUses } from '../utils/swatches';
+
+/* Same mocked-craft pattern as PageContext.orphan-repair-wiring.test.tsx. */
+let serializeReturn = '{}';
+const deserializeMock = vi.fn();
+vi.mock('@craftjs/core', () => ({
+ useEditor: () => ({
+ query: { serialize: () => serializeReturn },
+ actions: { deserialize: deserializeMock, history: { clear: () => {} } },
+ }),
+}));
+
+let container: HTMLDivElement;
+let root: Root;
+let ctx: ReturnType
+
+ hi
+
+
+ x
+out
`;
+ return (id: string) => document.getElementById(id)!;
+ };
+ const click = (el: Element) => el.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, clientX: 1, clientY: 1 }));
+
+ it('returns background/text/border candidates with default hex = painted background', async () => {
+ const $ = mount();
+ const p = pickFromCanvas({ design: design({ primaryColor: '#3b82f6' }) });
+ click($('card'));
+ const r = await p;
+ expect(r.ok).toBe(true);
+ if (!r.ok) return;
+ expect(r.source).toBe('canvas');
+ expect(r.hex).toBe('#3b82f6');
+ const by = Object.fromEntries(r.candidates.map((c) => [c.kind, c]));
+ expect(by.background.hex).toBe('#3b82f6');
+ expect(by.background.match).toMatchObject({ kind: 'token', ref: 'var(--wsb-primary)' });
+ expect(by.text.hex).toBe('#ffffff');
+ expect(by.border.hex).toBe('#010203');
+ expect(by.border.match).toBeUndefined();
+ });
+
+ it('non-painting element: hex is the text colour; background is the nearest painted ancestor', async () => {
+ const $ = mount();
+ const p = pickFromCanvas({ design: design() });
+ click($('inner'));
+ const r = await p;
+ if (!r.ok) throw new Error('expected ok');
+ expect(r.hex).toBe('#ffffff');
+ expect(r.candidates.find((c) => c.kind === 'background')!.hex).toBe('#3b82f6');
+ expect(r.candidates.find((c) => c.kind === 'border')).toBeUndefined();
+ });
+
+ it('prefers a published brand swatch over a token match', async () => {
+ const $ = mount();
+ const d = design({
+ primaryColor: '#3b82f6',
+ swatches: [{ id: 'a', label: 'Logo blue', hex: '#3B82F6', brand: true, slot: 2 }],
+ });
+ const p = pickFromCanvas({ design: d });
+ click($('card'));
+ const r = await p;
+ if (!r.ok) throw new Error('expected ok');
+ expect(r.candidates[0].match).toEqual({ kind: 'swatch', ref: 'var(--wsb-brand-2)', label: 'Logo blue' });
+ });
+
+ it('matches a non-brand swatch by hex ref', async () => {
+ const $ = mount();
+ const p = pickFromCanvas({ design: design({ swatches: [{ id: 'a', label: 'Sky', hex: '#0a141e', brand: false }] }) });
+ click($('plain'));
+ const r = await p;
+ if (!r.ok) throw new Error('expected ok');
+ expect(r.hex).toBe('#0a141e');
+ expect(r.candidates.find((c) => c.kind === 'text')!.match).toEqual({ kind: 'swatch', ref: '#0a141e', label: 'Sky' });
+ });
+
+ it('swallows the click (capture phase) so craft nodes are not selected', async () => {
+ const $ = mount();
+ let leaked = 0;
+ $('card').addEventListener('click', () => leaked++);
+ $('card').addEventListener('mousedown', () => leaked++);
+ const p = pickFromCanvas({ design: design() });
+ $('card').dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+ click($('card'));
+ await p;
+ expect(leaked).toBe(0);
+ });
+
+ it('Esc cancels, abort cancels, outside click cancels', async () => {
+ mount();
+ let p = pickFromCanvas({ design: design() });
+ window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+ expect(await p).toMatchObject({ ok: false, reason: 'cancelled' });
+
+ const ac = new AbortController();
+ p = pickFromCanvas({ design: design(), signal: ac.signal });
+ ac.abort();
+ expect(await p).toMatchObject({ ok: false, reason: 'cancelled' });
+
+ p = pickFromCanvas({ design: design() });
+ click(document.getElementById('outside')!);
+ expect(await p).toMatchObject({ ok: false, reason: 'cancelled' });
+ });
+
+ it('no frame -> error; cleans up its overlay and listeners', async () => {
+ expect(await pickFromCanvas({ design: design() })).toMatchObject({ ok: false, reason: 'error' });
+ const $ = mount();
+ const p = pickFromCanvas({ design: design() });
+ expect(document.querySelector('[data-wsb-pick]')).not.toBeNull();
+ click($('plain'));
+ await p;
+ expect(document.querySelector('[data-wsb-pick]')).toBeNull();
+ });
+});
diff --git a/craft/src/utils/color-pick.ts b/craft/src/utils/color-pick.ts
new file mode 100644
index 0000000..fc357bb
--- /dev/null
+++ b/craft/src/utils/color-pick.ts
@@ -0,0 +1,225 @@
+/**
+ * "Pick a colour from anywhere" engines (no React). Two sources:
+ * - the native EyeDropper API (Chromium only; Firefox/Safari have none), and
+ * - pickFromCanvas: an in-page pick mode over the editor canvas
+ * (`.canvas-device-frame`) that reads the clicked element's COMPUTED colours.
+ * Firefox has no screen-sampling fallback: see
+ * scratchpad/color/firefox-spike-verdict.md (tab capture is not viable there).
+ */
+import type { SiteDesign } from '../state/SiteDesignContext';
+import { COLOR_TOKENS, resolveTokenValue, tokenRef } from './tokens';
+import { findSwatchByHex, normalizeHex, swatchValue, type SavedSwatch } from './swatches';
+
+export type PickFailReason = 'cancelled' | 'unsupported' | 'cross-origin' | 'error';
+export type PickResult =
+ | { ok: true; hex: string; source: 'canvas' | 'image' | 'eyedropper' | 'tab-capture' }
+ | { ok: false; reason: PickFailReason; message: string };
+
+export type CandidateKind = 'background' | 'text' | 'border';
+export interface PickMatch { kind: 'token' | 'swatch'; ref: string; label: string }
+export interface CanvasCandidate { kind: CandidateKind; hex: string; match?: PickMatch }
+export type CanvasPickResult =
+ | { ok: true; hex: string; source: 'canvas'; candidates: CanvasCandidate[] }
+ | { ok: false; reason: PickFailReason; message: string };
+
+const fail = (reason: PickFailReason, message: string): { ok: false; reason: PickFailReason; message: string } => ({ ok: false, reason, message });
+const CANCELLED = 'Colour picking was cancelled.';
+
+// ------------------------------------------------------------------ colour parsing
+const h2 = (n: number) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
+
+/** r,g,b 0-255 (+ optional alpha 0-1) -> lowercase #rrggbb, or #rrggbbaa only when alpha < 1. */
+export function rgbToHex(r: number, g: number, b: number, a = 1): string {
+ const base = `#${h2(r)}${h2(g)}${h2(b)}`;
+ return a >= 1 ? base : base + h2(a * 255);
+}
+
+const RGB_RE = /^rgba?\(\s*([\d.]+)(?:\s*,\s*|\s+)([\d.]+)(?:\s*,\s*|\s+)([\d.]+)(?:\s*(?:,|\/)\s*([\d.]+)(%?))?\s*\)$/i;
+
+/** Parses a COMPUTED colour (`rgb()`/`rgba()`/`transparent`). Null for anything else. */
+export function parseComputedColor(v: string): { hex: string; alpha: number } | null {
+ const s = String(v ?? '').trim();
+ if (s.toLowerCase() === 'transparent') return { hex: '#00000000', alpha: 0 };
+ const m = RGB_RE.exec(s);
+ if (!m) return null;
+ let alpha = m[4] === undefined ? 1 : Number(m[4]);
+ if (m[5] === '%') alpha /= 100;
+ alpha = Math.max(0, Math.min(1, alpha));
+ return { hex: rgbToHex(Number(m[1]), Number(m[2]), Number(m[3]), alpha), alpha };
+}
+
+/** #rgb/#rgba -> #rrggbb[aa]; lowercase; null when invalid. */
+function canonHex(v: string): string | null {
+ const h = normalizeHex(v);
+ if (!h) return null;
+ return h.length === 4 || h.length === 5 ? '#' + [...h.slice(1)].map((c) => c + c).join('') : h;
+}
+
+// ------------------------------------------------------------------ site/brand matching
+/** Does `hex` equal a brand swatch, design token or saved swatch? Brand swatch > token > plain swatch. */
+export function matchSiteColor(hex: string, design: SiteDesign): PickMatch | undefined {
+ const want = canonHex(hex);
+ if (!want) return undefined;
+ const swatches: SavedSwatch[] = Array.isArray(design.swatches) ? design.swatches : [];
+ const canon = swatches.map((s) => ({ ...s, hex: canonHex(s.hex) ?? s.hex }));
+ const sw = findSwatchByHex(canon, want);
+ const brandSw = sw && sw.brand ? sw : undefined;
+ const label = (s: SavedSwatch) => s.label.trim() || s.hex;
+ if (brandSw) {
+ const ref = swatchValue(brandSw);
+ if (ref !== brandSw.hex) return { kind: 'swatch', ref, label: label(brandSw) };
+ }
+ for (const t of COLOR_TOKENS) {
+ const val = canonHex(resolveTokenValue(tokenRef(t.key), design));
+ if (val === want) return { kind: 'token', ref: tokenRef(t.key), label: t.label };
+ }
+ if (sw) return { kind: 'swatch', ref: swatchValue(sw), label: label(sw) };
+ return undefined;
+}
+
+// ------------------------------------------------------------------ native EyeDropper
+interface EyeDropperLike { open(o?: { signal?: AbortSignal }): Promise<{ sRGBHex: string }> }
+type EyeDropperCtor = new () => EyeDropperLike;
+const eyeCtor = (): EyeDropperCtor | undefined =>
+ typeof window === 'undefined' ? undefined : (window as unknown as { EyeDropper?: EyeDropperCtor }).EyeDropper;
+
+export function eyedropperAvailable(): boolean {
+ return typeof eyeCtor() === 'function';
+}
+
+export async function pickWithEyeDropper(signal?: AbortSignal): Promise