@fibery/ui-kit 2.0.0 → 2.1.0

package/src/thematic.tsx

@@ -1,8 +1,14 @@
+// oxlint-disable max-lines
 import {css} from "@linaria/core";
+import {useState} from "react";
 import {createPortal} from "react-dom";
 import {border, space, themeVars} from "./design-system";
-import {ThemeProvider} from "./theme-provider";
-import {toOKLCH, toRGB} from "./color-utils";
+import {ThemeProvider, useTheme} from "./theme-provider";
+import {useWarmPreference} from "./theme-settings";
+import {inspectColor} from "./color-utils";
+import {cardTypeColors} from "./design-system/colors";
+import {backgrounds, sections, stickers} from "./canvas-colors";
+import {type ColorScale, type ThemePalette} from "./palette-generator";
 import {useThematicState} from "./thematic-state";
 import {IconButton} from "./button/icon-button";
 import Refresh from "./icons/react/Refresh";
@@ -10,13 +16,24 @@ import Lab from "./icons/react/Lab";
 import Restore from "./icons/react/Restore";
 import ColorCoding from "./icons/react/ColorCoding";
 import Close from "./icons/react/Close";
-import CollapseAll from "./icons/react/CollapseAll";
+import Pin from "./icons/react/Pin";
+import PinFilled from "./icons/react/PinFilled";
 import FileDownload from "./icons/react/FileDownload";
 import FileUpload from "./icons/react/FileUpload";
 import {themeIcons} from "./thematic-constants";
-import {ArrayEditor, ArraySlider, controlRowCss, Slider} from "./thematic-controls";
-import {scaleCss, ScalePair, ScaleRow, sectionLabelCss, sectionSeparatorCss} from "./thematic-scales";
-import {SwatchWithPicker} from "./thematic-color-picker";
+import {
+  ArrayEditor,
+  ArraySlider,
+  chromaGradient,
+  controlRowCss,
+  hueGradient,
+  oklchColor,
+  Slider,
+} from "./thematic-controls";
+import type {InspectChannel} from "./thematic-color-picker";
+import {ScaleGrid, sectionLabelCss, sectionSeparatorCss, SPACER} from "./thematic-scales";
+
+type PaletteScaleKey = Exclude<keyof ThemePalette, "key" | "deneutralize">;
 
 const panelCss = css`
   position: fixed;
@@ -37,38 +54,26 @@ const buttonsCss = css`
 `;
 
 export function Thematic() {
-  const {
-    palette,
-    isAltPressed,
-    collapsed,
-    setCollapsed,
-    visible,
-    setVisible,
-    themePref,
-    isModified,
-    showLight,
-    showDark,
-    isAuto,
-    prefsPresent,
-    staticPalette,
-    baseCurves,
-    setBaseCurves,
-    accentCurves,
-    setAccentCurves,
-    update,
-    randomize,
-    cycleStaticPalettes,
-    cycleTheme,
-    reset,
-    updateScaleColor,
-    highlightScale,
-    clearHighlight,
-    exportState,
-    importState,
-  } = useThematicState();
+  const theme = useTheme();
+  const [warm, setWarm] = useWarmPreference();
+  const state = useThematicState();
+
+  const [hovered, setHovered] = useState(false);
+  const expanded = state.pinned || hovered;
+
+  const [inspectBase, setInspectBase] = useState<"l" | "c" | "h" | null>(null);
+  const inspectChannel: InspectChannel = inspectBase
+    ? state.isAltPressed
+      ? ({l: "hsl-l", c: "hsl-s", h: "hsl-h"} as const)[inspectBase]
+      : ({l: "oklch-l", c: "oklch-c", h: "oklch-h"} as const)[inspectBase]
+    : null;
+  const inspL = () => setInspectBase("l");
+  const inspC = () => setInspectBase("c");
+  const inspH = () => setInspectBase("h");
+  const inspOff = () => setInspectBase(null);
 
   const handleExport = () => {
-    const data = exportState();
+    const data = state.exportState();
     const blob = new Blob([JSON.stringify(data, null, 2)], {type: "application/json"});
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -89,7 +94,7 @@ export function Thematic() {
     input.onchange = () => {
       input.files?.[0]?.text().then((json) => {
         try {
-          importState(JSON.parse(json));
+          state.importState(JSON.parse(json));
         } catch {
           /* ignore invalid */
         }
@@ -98,284 +103,414 @@ export function Thematic() {
     input.click();
   };
 
-  if (!visible) {
+  if (!state.visible) {
     return null;
   }
 
   const panel = (
-    <div className={panelCss}>
-      {collapsed ? (
-        <IconButton size="small" variant="ghost" color="neutral" onClick={() => setCollapsed(false)} title="Thematic">
-          <ColorCoding />
-        </IconButton>
+    <div className={panelCss} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
+      {!expanded ? (
+        <ColorCoding />
       ) : (
         <>
-          <IconButton
-            size="small"
-            variant="ghost"
-            color="neutral"
-            onClick={() => setVisible(false)}
-            title="Close"
-            style={{position: "absolute", top: space.s4, right: space.s4}}
-          >
-            <Close />
-          </IconButton>
-          <ScalePair
-            name="base"
-            label="base"
-            light={palette.base}
-            dark={palette.baseDark}
-            showLight={showLight}
-            showDark={showDark}
-            onLightColorChange={(i, c) => updateScaleColor("base", i, c)}
-            onDarkColorChange={(i, c) => updateScaleColor("baseDark", i, c)}
-            onLightHighlight={highlightScale("base")}
-            onDarkHighlight={highlightScale("baseDark")}
-            onHighlightEnd={clearHighlight}
-            isAltPressed={isAltPressed}
+          <ScaleGrid
+            isAltPressed={state.isAltPressed}
+            inspectChannel={inspectChannel}
+            scales={(() => {
+              const alt = (name: PaletteScaleKey) =>
+                state.isAltPressed ? ([...state.providerPalette[name]] as (string | null)[]) : undefined;
+              const s = (name: string, scale: ColorScale, scaleName: PaletteScaleKey) => ({
+                name,
+                scale,
+                onColorChange: (i: number, c: string) => state.updateScaleColor(scaleName as PaletteScaleKey, i, c),
+                onHover: state.onSwatchHover,
+                onHoverEnd: state.onSwatchHoverEnd,
+                altColors: alt(scaleName),
+              });
+
+              const dn = state.palette.deneutralize ? theme.fns.deneutralize : (c: string) => c;
+              const isDark = state.showDark;
+              const canvasCol = (
+                defs: readonly (readonly [string, string])[],
+                label: string,
+                padBefore?: Record<number, number>
+              ) => {
+                const scale: (string | null)[] = [];
+                const altColors: (string | null)[] = [];
+                defs.forEach(([light, dark], i) => {
+                  const pad = padBefore?.[i] ?? 0;
+                  for (let p = 0; p < pad; p++) {
+                    scale.push(SPACER);
+                    altColors.push(SPACER);
+                  }
+                  scale.push(dn(isDark ? dark : light));
+                  altColors.push(isDark ? light : dark);
+                });
+                return {
+                  name: label,
+                  scale: scale as unknown as ColorScale,
+                  onHover: state.onSwatchHover,
+                  onHoverEnd: state.onSwatchHoverEnd,
+                  altColors: state.isAltPressed ? altColors : undefined,
+                  mini: true,
+                };
+              };
+
+              return [
+                {
+                  name: "whiteA",
+                  scale: state.palette.whiteA,
+                  onColorChange: (i: number, c: string) => state.updateScaleColor("whiteA", i, c),
+                  onHover: state.onSwatchHover,
+                  onHoverEnd: state.onSwatchHoverEnd,
+                  extra: {
+                    color: state.palette.white,
+                    name: "white",
+                    onChange: (c: string) => state.updateScaleColor("white", 0, c),
+                  },
+                  splitBg: true,
+                  altColors: alt("whiteA"),
+                },
+                {
+                  name: "blackA",
+                  scale: state.palette.blackA,
+                  onColorChange: (i: number, c: string) => state.updateScaleColor("blackA", i, c),
+                  onHover: state.onSwatchHover,
+                  onHoverEnd: state.onSwatchHoverEnd,
+                  extra: {
+                    color: state.palette.black,
+                    name: "black",
+                    onChange: (c: string) => state.updateScaleColor("black", 0, c),
+                  },
+                  splitBg: true,
+                  altColors: alt("blackA"),
+                },
+                ...(state.showLight
+                  ? [
+                      s("base", state.palette.base, "base"),
+                      s("accent", state.palette.accent, "accent"),
+                      s("red", state.palette.red, "red"),
+                      s("teal", state.palette.teal, "teal"),
+                      s("yellow", state.palette.yellow, "yellow"),
+                    ]
+                  : []),
+                ...(state.showDark
+                  ? [
+                      s("baseDark", state.palette.baseDark, "baseDark"),
+                      s("accentDark", state.palette.accentDark, "accentDark"),
+                      s("redDark", state.palette.redDark, "redDark"),
+                      s("tealDark", state.palette.tealDark, "tealDark"),
+                      s("yellowDark", state.palette.yellowDark, "yellowDark"),
+                    ]
+                  : []),
+                {
+                  name: "cardType",
+                  scale: cardTypeColors.map((c) => dn(c)) as unknown as ColorScale,
+                  onHover: state.onSwatchHover,
+                  onHoverEnd: state.onSwatchHoverEnd,
+                  altColors: state.isAltPressed ? [...cardTypeColors] : undefined,
+                  mini: true,
+                },
+                canvasCol(backgrounds, "background"),
+                canvasCol(stickers, "sticker", {0: 1, 8: 2}),
+                canvasCol(sections, "section"),
+              ];
+            })()}
           />
-          {!isAuto && (
-            <div className={controlRowCss}>
-              <ArrayEditor
-                label="L"
-                values={baseCurves.lightness}
-                onChange={(L) => setBaseCurves({...baseCurves, lightness: L})}
-              />
+
+          <div style={{display: "flex", alignItems: "center", gap: space.s8, minHeight: 28}}>
+            <div style={{display: "flex", gap: space.s2, flexShrink: 0}}>
+              <IconButton size="small" variant="ghost" color="neutral" onClick={handleExport} title="Export">
+                <FileDownload />
+              </IconButton>
+              <IconButton size="small" variant="ghost" color="neutral" onClick={handleImport} title="Import">
+                <FileUpload />
+              </IconButton>
             </div>
-          )}
+            {state.hoveredInfo &&
+              (() => {
+                const [hex, hsl, oklch] = inspectColor(state.hoveredInfo.color, "\t").split("\t");
+                return (
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: "auto 1fr",
+                      columnGap: space.s8,
+                      fontFamily: "monospace",
+                      fontSize: 11,
+                      lineHeight: "14px",
+                      color: themeVars.colorTextSecondary,
+                    }}
+                  >
+                    <span>{state.hoveredInfo.name}</span>
+                    <span>{hsl}</span>
+                    <span>{hex}</span>
+                    <span>{oklch}</span>
+                  </div>
+                );
+              })()}
+          </div>
+
+          <div className={sectionSeparatorCss} />
+
+          <div className={sectionLabelCss} style={{fontWeight: 700}}>
+            palette
+          </div>
+
+          <div className={sectionLabelCss}>base{state.prefs ? " *" : ""}</div>
+          <div className={controlRowCss}>
+            <ArrayEditor
+              label="L"
+              values={state.baseCurves.lightness}
+              onChange={(L) => state.setBaseCurves({...state.baseCurves, lightness: L})}
+              onLabelHover={inspL}
+              onLabelLeave={inspOff}
+            />
+          </div>
           <ArraySlider
-            label="C"
-            values={baseCurves.chroma}
-            onValuesChange={isAuto ? undefined : (C) => setBaseCurves({...baseCurves, chroma: C})}
-            sliderValue={prefsPresent.baseChroma ?? 0}
-            onSliderChange={(v) => update({baseChroma: v})}
+            label={state.prefs?.baseChroma !== undefined ? "C *" : "C"}
+            values={state.baseCurves.chroma}
+            onValuesChange={(C) => state.setBaseCurves({...state.baseCurves, chroma: C})}
+            sliderValue={state.prefsPresent.baseChroma ?? 0}
+            onSliderChange={(v) => state.update({baseChroma: v})}
             min={0}
             max={0.25}
             step={0.001}
+            gradient={chromaGradient(state.prefsPresent.baseHue ?? 0, 0.25)}
+            color={oklchColor(state.prefsPresent.baseHue ?? 0, state.prefsPresent.baseChroma ?? 0)}
+            onLabelHover={inspC}
+            onLabelLeave={inspOff}
           />
           <Slider
-            label="H"
-            value={prefsPresent.baseHue ?? 0}
+            label={state.prefs?.baseHue !== undefined ? "H *" : "H"}
+            value={state.prefsPresent.baseHue ?? 0}
             min={0}
             max={360}
             step={1}
-            onChange={(v) => update({baseHue: v})}
+            onChange={(v) => state.update({baseHue: v})}
+            gradient={hueGradient(state.prefsPresent.baseChroma ?? 0)}
+            color={oklchColor(state.prefsPresent.baseHue ?? 0, state.prefsPresent.baseChroma ?? 0)}
+            onLabelHover={inspH}
+            onLabelLeave={inspOff}
           />
 
-          <div className={sectionSeparatorCss} />
-
-          <ScalePair
-            name="accent"
-            label="accent"
-            light={palette.accent}
-            dark={palette.accentDark}
-            showLight={showLight}
-            showDark={showDark}
-            onLightColorChange={(i, c) => updateScaleColor("accent", i, c)}
-            onDarkColorChange={(i, c) => updateScaleColor("accentDark", i, c)}
-            onLightHighlight={highlightScale("accent")}
-            onDarkHighlight={highlightScale("accentDark")}
-            onHighlightEnd={clearHighlight}
-            isAltPressed={isAltPressed}
-          />
-          {!isAuto && (
-            <div className={controlRowCss}>
-              <ArrayEditor
-                label="L"
-                values={accentCurves.lightness}
-                onChange={(L) => setAccentCurves({...accentCurves, lightness: L})}
-              />
-            </div>
-          )}
+          <div className={sectionLabelCss}>accent{state.prefs ? " *" : ""}</div>
+          <div className={controlRowCss}>
+            <ArrayEditor
+              label="L"
+              values={state.accentCurves.lightness}
+              onChange={(L) => state.setAccentCurves({...state.accentCurves, lightness: L})}
+              onLabelHover={inspL}
+              onLabelLeave={inspOff}
+            />
+          </div>
           <ArraySlider
-            label="C"
-            values={accentCurves.chroma}
-            onValuesChange={isAuto ? undefined : (C) => setAccentCurves({...accentCurves, chroma: C})}
-            sliderValue={prefsPresent.accentChroma}
-            onSliderChange={(v) => update({accentChroma: v})}
+            label={state.prefs?.accentChroma !== undefined ? "C *" : "C"}
+            values={state.accentCurves.chroma}
+            onValuesChange={(C) => state.setAccentCurves({...state.accentCurves, chroma: C})}
+            sliderValue={state.prefsPresent.accentChroma}
+            onSliderChange={(v) => state.update({accentChroma: v})}
             min={0.05}
             max={0.25}
             step={0.001}
+            gradient={chromaGradient(state.prefsPresent.accentHue, 0.25)}
+            color={oklchColor(state.prefsPresent.accentHue, state.prefsPresent.accentChroma)}
+            onLabelHover={inspC}
+            onLabelLeave={inspOff}
           />
           <Slider
-            label="H"
-            value={prefsPresent.accentHue}
+            label={state.prefs?.accentHue !== undefined ? "H *" : "H"}
+            value={state.prefsPresent.accentHue}
             min={0}
             max={360}
             step={1}
-            onChange={(v) => update({accentHue: v})}
+            onChange={(v) => state.update({accentHue: v})}
+            gradient={hueGradient(state.prefsPresent.accentChroma)}
+            color={oklchColor(state.prefsPresent.accentHue, state.prefsPresent.accentChroma)}
+            onLabelHover={inspH}
+            onLabelLeave={inspOff}
           />
 
-          <div className={sectionSeparatorCss} />
-
-          <ScalePair
-            name="red"
-            light={palette.red}
-            dark={palette.redDark}
-            showLight={showLight}
-            showDark={showDark}
-            onLightColorChange={(i, c) => updateScaleColor("red", i, c)}
-            onDarkColorChange={(i, c) => updateScaleColor("redDark", i, c)}
-            onLightHighlight={highlightScale("red")}
-            onDarkHighlight={highlightScale("redDark")}
-            onHighlightEnd={clearHighlight}
-            isAltPressed={isAltPressed}
-          />
-          <ScalePair
-            name="teal"
-            light={palette.teal}
-            dark={palette.tealDark}
-            showLight={showLight}
-            showDark={showDark}
-            onLightColorChange={(i, c) => updateScaleColor("teal", i, c)}
-            onDarkColorChange={(i, c) => updateScaleColor("tealDark", i, c)}
-            onLightHighlight={highlightScale("teal")}
-            onDarkHighlight={highlightScale("tealDark")}
-            onHighlightEnd={clearHighlight}
-            isAltPressed={isAltPressed}
-          />
-          <ScalePair
-            name="yellow"
-            light={palette.yellow}
-            dark={palette.yellowDark}
-            showLight={showLight}
-            showDark={showDark}
-            onLightColorChange={(i, c) => updateScaleColor("yellow", i, c)}
-            onDarkColorChange={(i, c) => updateScaleColor("yellowDark", i, c)}
-            onLightHighlight={highlightScale("yellow")}
-            onDarkHighlight={highlightScale("yellowDark")}
-            onHighlightEnd={clearHighlight}
-            isAltPressed={isAltPressed}
+          <div className={sectionLabelCss}>
+            hue shift
+            {state.prefs?.hueShiftTargetHue !== undefined || state.prefs?.hueShiftAmount !== undefined ? " *" : ""}
+          </div>
+          <Slider
+            label={state.prefs?.hueShiftTargetHue !== undefined ? "target H *" : "target H"}
+            value={state.prefsPresent.hueShiftTargetHue ?? state.prefsPresent.baseHue ?? 0}
+            min={0}
+            max={360}
+            step={1}
+            onChange={(v) => state.updateHueShift({hueShiftTargetHue: v})}
+            gradient={hueGradient(0.15)}
+            color={oklchColor(state.prefsPresent.hueShiftTargetHue ?? state.prefsPresent.baseHue ?? 0, 0.15)}
           />
-
           <Slider
-            label="contrast"
-            value={prefsPresent.contrast ?? 1}
-            min={0.7}
-            max={1.3}
+            label={state.prefs?.hueShiftAmount !== undefined ? "amount *" : "amount"}
+            value={state.prefsPresent.hueShiftAmount ?? Math.min((state.prefsPresent.baseChroma ?? 0) * 2, 0.3)}
+            min={0}
+            max={1}
             step={0.01}
-            onChange={(v) => update({contrast: v})}
+            onChange={(v) => state.updateHueShift({hueShiftAmount: v})}
           />
 
           <div className={sectionSeparatorCss} />
 
-          <div className={sectionLabelCss}>lights & shades</div>
-          <div className={scaleCss}>
-            <div style={{border: "1px solid #888", borderRadius: 5}}>
-              <SwatchWithPicker
-                color={palette.white}
-                title={`white\n${toRGB(palette.white)}\n${toOKLCH(palette.white)}`}
-                onChange={(c) => updateScaleColor("white", 0, c)}
-                isAltPressed={isAltPressed}
-              />
-            </div>
-            <div style={{border: "1px solid #888", borderRadius: 5}}>
-              <SwatchWithPicker
-                color={palette.black}
-                title={`black\n${toRGB(palette.black)}\n${toOKLCH(palette.black)}`}
-                onChange={(c) => updateScaleColor("black", 0, c)}
-                isAltPressed={isAltPressed}
-              />
-            </div>
+          <div className={sectionLabelCss} style={{fontWeight: 700}}>
+            deneutralize{state.prefs?.filter || state.customPalette?.deneutralize ? " *" : ""}
           </div>
-
-          <ScaleRow
-            name="whiteA"
-            scale={palette.whiteA}
-            onColorChange={(i, c) => updateScaleColor("whiteA", i, c)}
-            onHighlight={highlightScale("whiteA")}
-            onHighlightEnd={clearHighlight}
-            isAltPressed={isAltPressed}
+          <Slider
+            label="hue shift H"
+            value={state.palette.deneutralize?.hueShift?.targetHue ?? 0}
+            min={0}
+            max={360}
+            step={1}
+            onChange={(v) =>
+              state.updateFilter({hueShift: {targetHue: v, amount: state.palette.deneutralize?.hueShift?.amount ?? 0}})
+            }
+            gradient={hueGradient(0.15)}
+            color={oklchColor(state.palette.deneutralize?.hueShift?.targetHue ?? 0, 0.15)}
+          />
+          <Slider
+            label="hue shift amt"
+            value={state.palette.deneutralize?.hueShift?.amount ?? 0}
+            min={0}
+            max={1}
+            step={0.01}
+            onChange={(v) =>
+              state.updateFilter({
+                hueShift: {targetHue: state.palette.deneutralize?.hueShift?.targetHue ?? 0, amount: v},
+              })
+            }
           />
           <Slider
-            label="L"
-            value={prefsPresent.whiteLuminosity ?? 1}
-            min={0.5}
-            max={1.5}
+            label="oklch L"
+            value={state.palette.deneutralize?.oklchL ?? 1}
+            min={0}
+            max={2}
             step={0.01}
-            onChange={(v) => update({whiteLuminosity: v})}
+            onChange={(v) => state.updateFilter({oklchL: v})}
           />
           <Slider
-            label="C"
-            value={prefsPresent.whiteChroma ?? 1}
+            label="oklch C"
+            value={state.palette.deneutralize?.oklchC ?? 1}
             min={0}
             max={3}
             step={0.01}
-            onChange={(v) => update({whiteChroma: v})}
+            onChange={(v) => state.updateFilter({oklchC: v})}
           />
-
-          <ScaleRow
-            name="blackA"
-            scale={palette.blackA}
-            onColorChange={(i, c) => updateScaleColor("blackA", i, c)}
-            onHighlight={highlightScale("blackA")}
-            onHighlightEnd={clearHighlight}
-            isAltPressed={isAltPressed}
+          <Slider
+            label="brightness"
+            value={state.palette.deneutralize?.brightness ?? 1}
+            min={0}
+            max={3}
+            step={0.01}
+            onChange={(v) => state.updateFilter({brightness: v})}
           />
           <Slider
-            label="L"
-            value={prefsPresent.blackLuminosity ?? 1}
-            min={0.5}
-            max={1.5}
+            label="contrast"
+            value={state.palette.deneutralize?.contrast ?? 1}
+            min={0}
+            max={3}
             step={0.01}
-            onChange={(v) => update({blackLuminosity: v})}
+            onChange={(v) => state.updateFilter({contrast: v})}
           />
           <Slider
-            label="C"
-            value={prefsPresent.blackChroma ?? 1}
+            label="saturate"
+            value={state.palette.deneutralize?.saturate ?? 1}
             min={0}
             max={3}
             step={0.01}
-            onChange={(v) => update({blackChroma: v})}
+            onChange={(v) => state.updateFilter({saturate: v})}
+          />
+          <Slider
+            label="hue rotate"
+            value={state.palette.deneutralize?.hueRotate ?? 0}
+            min={-180}
+            max={180}
+            step={1}
+            onChange={(v) => state.updateFilter({hueRotate: v})}
+          />
+          <Slider
+            label="sepia"
+            value={state.palette.deneutralize?.sepia ?? 0}
+            min={0}
+            max={1}
+            step={0.01}
+            onChange={(v) => state.updateFilter({sepia: v})}
+          />
+          <Slider
+            label="grayscale"
+            value={state.palette.deneutralize?.grayscale ?? 0}
+            min={0}
+            max={1}
+            step={0.01}
+            onChange={(v) => state.updateFilter({grayscale: v})}
+          />
+          <Slider
+            label="invert"
+            value={state.palette.deneutralize?.invert ?? 0}
+            min={0}
+            max={1}
+            step={0.01}
+            onChange={(v) => state.updateFilter({invert: v})}
           />
 
+          <div className={sectionSeparatorCss} />
+
           <div className={buttonsCss} style={{justifyContent: "space-between"}}>
             <div style={{display: "flex", gap: space.s4}}>
               <IconButton
                 size="small"
-                variant="ghost"
+                variant={state.pinned && !state.isAltPressed ? "soft" : "ghost"}
                 color="neutral"
-                onClick={() => setCollapsed(true)}
-                title="Collapse"
+                onClick={() => (state.isAltPressed ? state.setVisible(false) : state.setPinned(!state.pinned))}
+                title={state.isAltPressed ? "Close" : state.pinned ? "Unpin" : "Pin"}
               >
-                <CollapseAll />
+                {state.isAltPressed ? <Close /> : state.pinned ? <PinFilled /> : <Pin />}
               </IconButton>
-              {isAltPressed ? (
+            </div>
+            <div style={{display: "flex", gap: space.s4}}>
+              {state.isAltPressed ? (
+                <>
+                  <IconButton
+                    size="small"
+                    variant={state.staticPalette ? "solid" : "soft"}
+                    color="error"
+                    onClick={state.cycleStaticPalettes}
+                    title="Static palettes"
+                  >
+                    <Lab />
+                  </IconButton>
+                  <IconButton size="small" variant="soft" color="accent" onClick={state.randomize} title="Randomize">
+                    <Refresh />
+                  </IconButton>
+                </>
+              ) : state.isModified ? (
+                <IconButton size="small" variant="ghost" color="neutral" onClick={state.reset} title="Defaults">
+                  <Restore />
+                </IconButton>
+              ) : (
                 <IconButton
                   size="small"
-                  variant={staticPalette ? "solid" : "soft"}
-                  color="error"
-                  onClick={cycleStaticPalettes}
-                  title="Beware"
+                  variant={warm ? "soft" : "ghost"}
+                  color="neutral"
+                  onClick={() => setWarm(!warm)}
+                  title={warm ? "warm → neutral" : "neutral → warm"}
                 >
-                  <Lab />
-                </IconButton>
-              ) : (
-                <IconButton size="small" variant="soft" color="accent" onClick={randomize} title="Shuffle">
-                  <Refresh />
+                  <span style={{fontSize: 11, fontWeight: 600}}>{warm ? "W" : "N"}</span>
                 </IconButton>
               )}
-              <IconButton size="small" variant="ghost" color="neutral" onClick={handleExport} title="Export">
-                <FileDownload />
-              </IconButton>
-              <IconButton size="small" variant="ghost" color="neutral" onClick={handleImport} title="Import">
-                <FileUpload />
+              <IconButton
+                size="small"
+                variant="ghost"
+                color="neutral"
+                onClick={state.cycleTheme}
+                title={state.isAltPressed ? "auto" : state.themePref}
+              >
+                {themeIcons[state.isAltPressed ? "auto" : state.themePref]}
               </IconButton>
-              {isModified && (
-                <IconButton size="small" variant="ghost" color="neutral" onClick={reset} title="Defaults">
-                  <Restore />
-                </IconButton>
-              )}
             </div>
-            <IconButton
-              size="small"
-              variant="ghost"
-              color="neutral"
-              onClick={cycleTheme}
-              title={isAltPressed ? "auto" : themePref}
-            >
-              {themeIcons[isAltPressed ? "auto" : themePref]}
-            </IconButton>
           </div>
         </>
       )}