← All changes | src/Agent/workflows/theme/components/SelectGeneratedPalette.jsx +21 -36 3.2.1 → 3.2.2 View file →

		@@ -1,6 +1,8 @@
	1	+import { usePalettes } from '@agent/hooks/usePalettes';
1	2	import { useVariationOverride } from '@agent/hooks/useVariationOverride';
2	3	import { useChatStore } from '@agent/state/chat';
	4	+import { remapPaletteDuotone } from '@shared/lib/palette-preview';
3	5	import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
4	6	import { __ } from '@wordpress/i18n';
5	7
6	8	const colorsArrayToMap = (colors) => {
		@@ -32,37 +34,14 @@
32	34	});
33	35	return css;
34	36	};
35	37
36		-const themeDuotonePresets =
37		- window.extAgentData?.context?.themePresets?.duotone || [];
38		-const themeColorPresets =
39		- window.extAgentData?.context?.themePresets?.colors || {};
40		-
41		-const buildDuotoneTheme = (newColorsMap) => {
42		- if (!themeDuotonePresets.length) return null;
43		-
44		- const duotone = [];
45		-
46		- for (const preset of themeDuotonePresets) {
47		- const { slug, colors: originalColors } = preset;
48		- if (!originalColors || originalColors.length !== 2) continue;
49		-
50		- const newColors = originalColors.map((originalHex) => {
51		- const matchingSlug = Object.entries(themeColorPresets).find(
52		- ([, hex]) => hex.toLowerCase() === originalHex.toLowerCase(),
53		- )?.[0];
54		-
55		- if (matchingSlug && newColorsMap[matchingSlug]) {
56		- return newColorsMap[matchingSlug];
57		- }
58		- return originalHex;
59		- });
60		-
61		- duotone.push({ slug, colors: newColors });
62		- }
63		-
64		- return duotone.length > 0 ? duotone : null;
	38	+const themeReference = () => {
	39	+ const presets = window.extAgentData?.context?.themePresets;
	40	+ return {
	41	+ colors: presets?.colors,
	42	+ settings: { color: { duotone: presets?.duotone } },
	43	+ };
65	44	};
66	45
67	46	export const SelectGeneratedPalette = ({
68	47	inputs,
		@@ -71,10 +50,10 @@
71	50	onRetry,
72	51	}) => {
73	52	const [selected, setSelected] = useState(null);
74	53	const [previewCss, setPreviewCss] = useState('');
75		- const [duotoneTheme, setDuotoneTheme] = useState(null);
76	54	const { addMessage, messages } = useChatStore();
	55	+ const { applied } = usePalettes();
77	56	const aiPalettes = inputs?.palettes;
78	57
79	58	const palettes = useMemo(
80	59	() =>
		@@ -87,9 +66,17 @@
87	66	}) || [],
88	67	[aiPalettes],
89	68	);
90	69	const noPalettes = !aiPalettes?.length || palettes.length === 0;
	70	+ const selectedPalette = palettes.find(({ name }) => name === selected);
91	71
	72	+ // foreground-and-background is served-only; the theme never registers it.
	73	+ const duotoneTheme = useMemo(() => {
	74	+ if (!selectedPalette) return null;
	75	+ const reference = applied ?? themeReference();
	76	+ return remapPaletteDuotone(reference, selectedPalette.colors) ?? null;
	77	+ }, [applied, selectedPalette]);
	78	+
92	79	const { undoChange } = useVariationOverride({
93	80	css: previewCss,
94	81	duotoneTheme,
95	82	});
		@@ -119,16 +106,15 @@
119	106	onRetry();
120	107	};
121	108
122	109	const handleConfirm = () => {
123		- if (!selected) return;
	110	+ if (!selectedPalette) return;
124	111	confirmed.current = true;
125		- const palette = palettes.find((p) => p.name === selected);
126	112	onConfirm({
127	113	data: {
128	114	palette: {
129		- name: palette.name,
130		- colors: palette.colorsArray.map(({ slug, color }) => ({
	115	+ name: selectedPalette.name,
	116	+ colors: selectedPalette.colorsArray.map(({ slug, color }) => ({
131	117	slug,
132	118	color,
133	119	name: slug,
134	120	})),
		@@ -155,9 +141,8 @@
155	141	}`}
156	142	onClick={() => {
157	143	setSelected(name);
158	144	setPreviewCss(buildPreviewCss(colors));
159		- setDuotoneTheme(buildDuotoneTheme(colors));
160	145	}}
161	146	>
162	147	<div className="flex max-w-fit items-center justify-center -space-x-4 rounded-lg rtl:space-x-reverse">
163	148	{colorsArray
		@@ -191,9 +176,9 @@
191	176	</button>
192	177	<button
193	178	type="button"
194	179	className="w-full rounded-sm border border-design-main bg-design-main p-2 text-sm text-white"
195		- disabled={!selected}
	180	+ disabled={!selectedPalette}
196	181	onClick={handleConfirm}
197	182	>
198	183	{__('Save', 'extendify-local')}
199	184	</button>