up

frontend/src/components/qsl/StylePresetPicker.tsx

@@ -16,6 +16,25 @@ interface Props {
   onChange: (preset: string, params: StyleParams) => void;
 }
 
+// Quick colour palettes per FX family (mirrors the reference generators):
+// each sets the 3-stop gradient plus the dark edge and (glossy) silver rim.
+type Palette = { name: string; top: string; mid: string; bot: string; dark: string; outer?: string };
+const GLOSSY_PALETTES: Palette[] = [
+  { name: 'Gold', top: '#ffe22d', mid: '#ffd600', bot: '#ffcc00', dark: '#262630', outer: '#ced3db' },
+  { name: 'Silver', top: '#fbfdff', mid: '#c9d4de', bot: '#8496a8', dark: '#262630', outer: '#e8edf2' },
+  { name: 'Red', top: '#ff7a66', mid: '#ee3322', bot: '#d42410', dark: '#260b08', outer: '#ead9d6' },
+  { name: 'Blue', top: '#5fb8ff', mid: '#1f8fe8', bot: '#107ad0', dark: '#0d1726', outer: '#d6e2ee' },
+  { name: 'Green', top: '#a5e84f', mid: '#6ec424', bot: '#5ab012', dark: '#122108', outer: '#dbe8d2' },
+  { name: 'Pink', top: '#ff9ed0', mid: '#f5559f', bot: '#e83b8c', dark: '#260818', outer: '#ecd8e3' },
+];
+const WESTERN_PALETTES: Palette[] = [
+  { name: 'Gold', top: '#f7c036', mid: '#f39612', bot: '#d06200', dark: '#20140a' },
+  { name: 'Red', top: '#f0856e', mid: '#d8402a', bot: '#8c1606', dark: '#1f0805' },
+  { name: 'Blue', top: '#7fc0ee', mid: '#2a7fc0', bot: '#0c4378', dark: '#081320' },
+  { name: 'Green', top: '#bfd96a', mid: '#7fa82e', bot: '#3f6210', dark: '#101a06' },
+  { name: 'Cream', top: '#f7ecd0', mid: '#e8d3a0', bot: '#bf9b58', dark: '#2a1f10' },
+];
+
 function ColorRow({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
   return (
     <div className="flex items-center justify-between gap-2">
@@ -76,6 +95,25 @@ export function StylePresetPicker({ presets, preset, params, onChange }: Props)
         </SelectContent>
       </Select>
 
+      {isFx && (
+        <div className="flex items-center justify-between gap-2">
+          <Label className="text-xs text-muted-foreground">Palette</Label>
+          <div className="flex flex-wrap gap-1">
+            {(fxWestern ? WESTERN_PALETTES : GLOSSY_PALETTES).map((p) => (
+              <button
+                key={p.name} type="button" title={p.name}
+                className="h-6 w-6 rounded border border-border"
+                style={{ background: `linear-gradient(${p.top}, ${p.mid}, ${p.bot})` }}
+                onClick={() => onChange(preset, {
+                  ...params,
+                  gradient: [p.top, p.mid, p.bot],
+                  fx: { ...fx, dark: p.dark, ...(p.outer ? { outer: p.outer } : {}) },
+                })}
+              />
+            ))}
+          </div>
+        </div>
+      )}
       {has('color') && (
         <ColorRow label="Color" value={params.color ?? '#ffffff'} onChange={(v) => set({ color: v })} />
       )}