The Colors panel joins the palette — the combo ratified, and each anchor composes the halves it needs

Four rulings close Redesign Contradiction 3452893f (2026-08-06): the in-app
escape hatch is ratified in full, reversing 2026-07-29's palette-only rule —
the combo's Other… opens the system Colors panel, a pick landing on a palette
color stores the name, anything else the hex. Free-picked colors change no
contrast story: they land on the same runtime ink computation hand-written hex
always got (10 amended to say so; no warning surface is owed). Anchor
ownership: the card sidebar's background story is the combo alone — the well
grid's background half stays with the other anchors (StyleEditorView gains
showsBackground beside showsSymbols; the popover's symbol half already went to
its inline SymbolPicker). Quick-style recents stay palette-vocabulary — a
panel pick never enters them.

Claude-Session: https://claude.ai/code/session_014PtZdPwqZuqEDLc6wZMtEy

Kanban/UI/Board/BoardInfoPopover.swift

@@ -343,7 +343,9 @@ struct BoardInfoView: View {
                 // ("nothing selected = the board"); this embed is the surface that exists *because*
                 // the board is a style target, so it can have no other target (§ Styling ▸
                 // Controls: "the board popover's target is the board itself").
-                StyleEditorView(store: store, recents: recents, target: .board)
+                // No symbol section — the inline `SymbolPicker` beside the rename field above is
+                // the board glyph's one surface in this popover.
+                StyleEditorView(store: store, recents: recents, target: .board, showsSymbols: false)
             }
 
             // Contextual, not standing (12-editions.md, settled 2026-07-27): an ordinary free-tier

Kanban/UI/Card/CardSidebarSections.swift

@@ -35,9 +35,16 @@ struct CardStyleSection: View {
     /// **This window's undo stack** (13-native-undo.md ▸ Rules ▸ two levels): a colour or symbol
     /// chosen here is a gesture *issued in this window*, so its step joins the window's session and
     /// reaches board history only inside the coarse close step. The shared editor takes it as an
-    /// anchor's parameter, exactly as it takes the layout.
+    /// anchor's parameter, exactly as it takes the layout — and so does the background combo below,
+    /// for the same reason.
     let undo: CardWindowUndo
 
+    /// The trailing debounce on a live colour-panel drag (`ColorComboView`'s `onPanelChange`,
+    /// opened from the combo's **Other…** row): cancelled and replaced on every tick, so only the
+    /// value the user is still on ~400ms after the last one actually reaches disk. One task for the
+    /// section's one combo.
+    @State private var backgroundPanelCommit: Task<Void, Never>?
+
     /// The live body metric, read here rather than passed in — `CardAttachmentsSection`'s pattern,
     /// so every section in this sidebar derives its geometry the same way.
     private var pointSize: CGFloat { CardWindowMetrics.bodyPointSize }
@@ -56,6 +63,10 @@ struct CardStyleSection: View {
     var body: some View {
         VStack(alignment: .leading, spacing: CardWindowMetrics.sidebarRowSpacing(bodyPointSize: pointSize)) {
             CardSidebarSectionHeader(title: "Style")
+            backgroundComboRow
+            // Symbols only: the combo row above is this sidebar's whole background story
+            // (03 ▸ Styling ▸ Controls, the 2026-08-06 anchor-ownership rule) — the well grid's
+            // background half stays with the other anchors.
             StyleEditorView(
                 store: store,
                 recents: recents,
@@ -64,11 +75,82 @@ struct CardStyleSection: View {
                     contentWidth: CardWindowMetrics.sidebarContentWidth(bodyPointSize: pointSize),
                     bodyPointSize: pointSize
                 ),
-                undo: undo
+                undo: undo,
+                showsBackground: false
             )
         }
         .frame(maxWidth: .infinity, alignment: .leading)
     }
+
+    // MARK: - Background combo
+
+    /// The labeled **Background** row, above the well grid — a narrower, single-value alternative
+    /// to it (`ColorCombo.swift`'s own doc comment): an inspector row, caption leading and a
+    /// compact combo trailing, the arrangement every Xcode inspector uses for exactly this control.
+    /// The combo takes just over half the row rather than filling it — sized off the same metric
+    /// the sidebar's own width comes from, so the pair holds its proportions at every text size.
+    private var backgroundComboRow: some View {
+        HStack(spacing: 0) {
+            Text("Background")
+                .font(.caption)
+                .foregroundStyle(.secondary)
+            Spacer(minLength: 8)
+            ColorComboView(
+                role: .background,
+                value: currentBackground,
+                isEnabled: !store.isReadOnly,
+                onChange: { commitBackground($0) },
+                onPanelChange: { debounceBackground($0) }
+            )
+            .frame(width: CardWindowMetrics.sidebarContentWidth(bodyPointSize: pointSize) * 0.55)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+
+    /// The card's `background` field, exactly as written — malformed reads as its raw text, missing
+    /// reads `nil`, both `StyleFieldState.written`'s own rule (`StyleModel.swift`). The **raw**
+    /// string, never a resolved colour: `ColorComboModel`'s matching needs the bytes, not what they
+    /// render as.
+    private var currentBackground: String? {
+        let subject = store.styleSubjects(of: Self.target(forCard: cardID)).first
+        return StyleFieldState.written(subject?.background ?? .missing)
+    }
+
+    /// A discrete pick — commits immediately. `nil` removes; a name from `Palette.backgrounds` goes
+    /// through `StyleCommand.apply` so it feeds `StyleRecents` exactly like a well click would
+    /// ("updated on every background application from any anchor", `StyleEditor.swift`); anything
+    /// else — the dynamic current-value row re-affirming a foreign name or a custom hex — writes
+    /// directly, since it is not the "palette pick" recents was ever meant to remember.
+    private func commitBackground(_ newValue: String?) {
+        let target = Self.target(forCard: cardID)
+        guard let newValue else {
+            store.applyStyle(to: target, background: .remove, icon: .keep, on: undo)
+            return
+        }
+        if Palette.backgrounds.contains(where: { $0.name == newValue }) {
+            StyleCommand.apply(background: .set(newValue), to: target, in: store, recents: recents, on: undo)
+        } else {
+            store.applyStyle(to: target, background: .set(newValue), icon: .keep, on: undo)
+        }
+    }
+
+    /// One tick of a live colour-panel drag: cancels whatever commit was pending and schedules a new
+    /// one ~400ms out, so a drag writes once it settles rather than on every pixel it passes through.
+    /// Never routed through `StyleCommand.apply` — a drag that passes through a palette-exact hex
+    /// mid-gesture must not spam the recents row the way a deliberate pick would.
+    private func debounceBackground(_ newValue: String?) {
+        backgroundPanelCommit?.cancel()
+        let target = Self.target(forCard: cardID)
+        backgroundPanelCommit = Task { @MainActor in
+            try? await Task.sleep(for: .milliseconds(400))
+            guard !Task.isCancelled else { return }
+            if let newValue {
+                store.applyStyle(to: target, background: .set(newValue), icon: .keep, on: undo)
+            } else {
+                store.applyStyle(to: target, background: .remove, icon: .keep, on: undo)
+            }
+        }
+    }
 }
 
 // MARK: - Actions

Kanban/UI/ColorCombo.swift

@@ -0,0 +1,614 @@
+import AppKit
+import SwiftUI
+
+/// A reusable colour-picker combo: a collapsed face split into **two zones**, Xcode's inspector
+/// colour combo's own shape — a flat swatch of the current value filling almost the whole control,
+/// and a narrow chevron trigger at the trailing edge. Clicking the swatch opens
+/// `NSColorPanel.shared` directly; clicking the trigger pops a dropdown of **None**, the role's
+/// twelve palette colours, an off-palette current value stated verbatim when there is one, and
+/// **Other…**, which hands off to that same panel — the swatch and **Other…** are two doors onto
+/// one panel takeover (`ColorComboView.Coordinator.openColorPanel()`).
+///
+/// It is the second surface `background`/`iconColor` can be set from, beside the well grid
+/// (`StyleEditor.swift`'s `StyleEditorView`) — the well grid stays exactly as it is; this is a
+/// narrower, single-value control for a context where a whole grid would not fit (`CardStyleSection`'s
+/// own labeled row).
+///
+/// ### Two halves, the same split every other file here draws
+///
+/// `ColorComboRole`, `ColorComboItem`, `ColorComboMatch` and `ColorComboModel` are the **pure model**
+/// — item lists, selection matching, hex normalization, display-name casing — every rule a test can
+/// hold without an `NSView` in sight. `ColorComboView` is the thin AppKit bridge that draws it and
+/// answers clicks, exactly the `StyleEditorLayout`/`StyleEditorView` split in `StyleEditor.swift`.
+/// (Its collapsed face has its *own*, unrelated two-zone split — swatch versus trigger,
+/// `ColorComboControl`'s own doc comment — which has nothing to do with this pure-model/view one.)
+
+// MARK: - Role
+
+/// Which of the two palettes a combo offers — `Palette.backgrounds` for `background`,
+/// `Palette.foregrounds` for `iconColor`/icon tints. Both tables already answer either field
+/// (`Palette.nsColor(for:)`), so a combo's *role* is only about which twelve it lists, never about
+/// which values it can resolve.
+enum ColorComboRole: Sendable, Equatable {
+    case background
+    case foreground
+
+    /// The twelve rows this picker offers.
+    var palette: [PaletteColor] {
+        switch self {
+        case .background: Palette.backgrounds
+        case .foreground: Palette.foregrounds
+        }
+    }
+
+    /// The *other* picker's twelve — consulted only to name a foreign palette value in the dynamic
+    /// current-value row (`ColorComboModel.match`). Never offered as a row of this picker's own,
+    /// which is what keeps "background lists backgrounds" true even though `Palette.nsColor(for:)`
+    /// itself would happily resolve a foreground name.
+    var otherPalette: [PaletteColor] {
+        switch self {
+        case .background: Palette.foregrounds
+        case .foreground: Palette.backgrounds
+        }
+    }
+}
+
+// MARK: - Rows and matching
+
+/// One row of a `ColorComboView`'s dropdown, in display order.
+enum ColorComboItem: Equatable {
+    /// Clears the field — the well grid's own leading None well, same removal.
+    case none
+    case separator
+    /// One of `role`'s own twelve, by name. `ColorComboModel.displayName(_:)` is its title; the row
+    /// is never built with anything the role's own palette doesn't list.
+    case palette(String)
+    /// The live value's own row — present only when the stored value matches neither `.none` nor a
+    /// `.palette` row (`ColorComboModel.match` decides). `swatchValue` is the raw stored string a
+    /// swatch draws from (`Palette.nsColor(for:)`, lenient exactly like `PaletteSwatch`); `title` is
+    /// the display text `ColorComboModel.match` already worked out.
+    case current(swatchValue: String, title: String)
+    /// Opens `NSColorPanel.shared`.
+    case other
+}
+
+/// Which row a stored value checks — computed once and shared by the item list (`ColorComboModel.
+/// menu`) and by anything that just wants to know "what does this resolve to" without building
+/// rows, which is most of what a test wants to assert.
+enum ColorComboMatch: Equatable {
+    case none
+    case palette(String)
+    case current(swatchValue: String, title: String)
+}
+
+/// The full dropdown for one role at one value: its rows, and the index of the checked one.
+struct ColorComboMenu: Equatable {
+    let items: [ColorComboItem]
+    /// Always a valid index into `items` — the None row exists in every menu, so there is always at
+    /// least one candidate to fall back to.
+    let selectedIndex: Int
+}
+
+// MARK: - The pure model
+
+/// The whole of what a `ColorComboView` shows, as pure functions of `role` and a stored value —
+/// no `NSView`, no store, nothing a `ColorComboTests` case can't hold still.
+enum ColorComboModel {
+
+    // MARK: Display
+
+    /// Kebab-case palette name → Title Case with hyphens as spaces: `"light-cayenne"` →
+    /// `"Light Cayenne"`, `"smokey-rich-eggplant"` → `"Smokey Rich Eggplant"` — the one place a
+    /// palette name becomes a row's title rather than its stored spelling.
+    static func displayName(_ name: String) -> String {
+        name.split(separator: "-")
+            .map { $0.isEmpty ? "" : $0.prefix(1).uppercased() + $0.dropFirst() }
+            .joined(separator: " ")
+    }
+
+    // MARK: Matching
+
+    /// Which row `value` checks, given `role`:
+    /// - `nil` → `.none`.
+    /// - a name in `role`'s own palette → `.palette(name)`, matched exactly — `Palette`'s own
+    ///   case-sensitive rule, unchanged here.
+    /// - a hex that, normalized, equals one of `role`'s palette hexes → that colour's `.palette`
+    ///   match, **by name** — a panel pick landing exactly on a palette colour selects the name, so
+    ///   picking it again from the panel later re-emits the name rather than drifting to a hex.
+    /// - anything else (a foreign palette name, a custom hex, or unresolvable garbage) → `.current`,
+    ///   titled with the other picker's display name when `value` is one of *its* twelve, else
+    ///   `value` itself, uppercased when it looks like hex and left verbatim otherwise.
+    static func match(role: ColorComboRole, value: String?) -> ColorComboMatch {
+        guard let value else { return .none }
+        if role.palette.contains(where: { $0.name == value }) {
+            return .palette(value)
+        }
+        if let normalized = normalizedHex(value),
+           let hit = role.palette.first(where: { normalizedHex($0.hex) == normalized }) {
+            return .palette(hit.name)
+        }
+        return .current(swatchValue: value, title: currentTitle(role: role, value: value))
+    }
+
+    /// The dynamic current-value row's title — the other table's display name when `value` is one
+    /// of its twelve, the raw string otherwise (hex shown uppercase, matching `NSColor.
+    /// paletteHexString`'s own casing so a stored value and a freshly panel-picked one read alike).
+    private static func currentTitle(role: ColorComboRole, value: String) -> String {
+        if let foreign = role.otherPalette.first(where: { $0.name == value }) {
+            return displayName(foreign.name)
+        }
+        return value.hasPrefix("#") ? value.uppercased() : value
+    }
+
+    // MARK: Item list
+
+    /// The dropdown's full row list and which row is checked, for `role` at `value`: **None**,
+    /// separator, the twelve, then — only when `match` lands on `.current` — that dynamic row,
+    /// separator, **Other…**.
+    static func menu(role: ColorComboRole, value: String?) -> ColorComboMenu {
+        var items: [ColorComboItem] = [.none, .separator]
+        items.append(contentsOf: role.palette.map { .palette($0.name) })
+
+        let selectedIndex: Int
+        switch match(role: role, value: value) {
+        case .none:
+            selectedIndex = 0
+        case let .palette(name):
+            selectedIndex = items.firstIndex(of: .palette(name)) ?? 0
+        case let .current(swatchValue, title):
+            items.append(.current(swatchValue: swatchValue, title: title))
+            selectedIndex = items.count - 1
+        }
+
+        items.append(.separator)
+        items.append(.other)
+        return ColorComboMenu(items: items, selectedIndex: selectedIndex)
+    }
+
+    // MARK: Hex normalization
+
+    /// `#RRGGBB`/`#RRGGBBAA` → uppercase, alpha-`FF` collapsed to six digits — the string-side half
+    /// of the round trip `NSColor.paletteHexString` builds (Palette.swift), used here purely for
+    /// **comparison**: two spellings of the same opaque colour normalize to the same string, so a
+    /// stored `#b6071eff` matches a palette entry's `#B6071E` exactly as a bare `#b6071e` would.
+    /// `nil` for anything that isn't `#` followed by six or eight hex digits, so a malformed value
+    /// never accidentally matches a palette colour by coincidence.
+    static func normalizedHex(_ value: String) -> String? {
+        var upper = value.uppercased()
+        guard upper.hasPrefix("#") else { return nil }
+        let digits = upper.dropFirst()
+        guard digits.count == 6 || digits.count == 8, digits.allSatisfy(\.isHexDigit) else { return nil }
+        if digits.count == 8, digits.hasSuffix("FF") {
+            upper.removeLast(2)
+        }
+        return upper
+    }
+}
+
+// MARK: - View
+
+/// The AppKit bridge: a two-zone collapsed face (`ColorComboControl`) whose dropdown is
+/// `ColorComboModel.menu(role:value:)` — built exactly as it always was, just handed to the control
+/// to pop instead of being assigned as an `NSPopUpButton`'s own `menu`. Two click targets sharing one
+/// menu-plus-panel contract is the one thing `NSPopUpButton` cannot do on its own: it has exactly one
+/// hit zone for exactly one action.
+struct ColorComboView: NSViewRepresentable {
+
+    let role: ColorComboRole
+    /// The raw stored value — a palette name or a hand-written hex, exactly as the frontmatter field
+    /// carries it. Never a resolved `Color`: matching needs the string, not what it renders as.
+    let value: String?
+    let isEnabled: Bool
+    /// One discrete row picked — **None**, one of the twelve, or the dynamic current-value row.
+    /// Fired once, synchronously; the call site commits it immediately.
+    var onChange: @MainActor (String?) -> Void
+    /// One tick of a live `NSColorPanel` drag opened from **Other…** or the swatch zone — fires
+    /// repeatedly while the user is still adjusting the colour. Kept separate from `onChange`
+    /// because the two halves of this control's contract differ at the call site
+    /// (`CardStyleSection`): a discrete pick commits immediately, a panel tick is the caller's to
+    /// debounce and never feeds style recents.
+    var onPanelChange: @MainActor (String?) -> Void
+
+    /// The width `sizeThatFits` hands back when SwiftUI has no concrete proposal to fill — an
+    /// unconstrained measuring pass, not the normal case. The normal case is a finite proposal (this
+    /// view sits under `.frame(maxWidth: .infinity)` in the sidebar row, `CardActionsSection`'s
+    /// Delete button's own trick), which this default never has to stand in for.
+    private static let defaultFaceWidth: CGFloat = 120
+
+    func makeNSView(context: Context) -> ColorComboControl {
+        let control = ColorComboControl(frame: .zero)
+        // The swatch zone's one job: open the same panel takeover **Other…** does. A closure, not a
+        // target/action pair — there is exactly one caller and no `NSMenuItem`-style Objective-C
+        // boundary to cross for it.
+        control.onSwatchClick = { [weak coordinator = context.coordinator] in
+            coordinator?.openColorPanel()
+        }
+        return control
+    }
+
+    func updateNSView(_ control: ColorComboControl, context: Context) {
+        context.coordinator.role = role
+        context.coordinator.onChange = onChange
+        context.coordinator.onPanelChange = onPanelChange
+        control.isEnabled = isEnabled
+        context.coordinator.rebuild(control, value: value)
+    }
+
+    /// Obeys whatever width SwiftUI proposes, like any other control — never the widest menu item,
+    /// which is what the old caller-supplied `width` input existed to work around. Height is the
+    /// control's own fitting height (`ColorComboControl.intrinsicContentSize`, about half the old
+    /// regular `NSPopUpButton`'s — the whole point of this rework); width is the proposal's when it
+    /// is an actual number, else `defaultFaceWidth`, since a `nil`/infinite proposal happens on an
+    /// unconstrained measuring pass, not a sidebar row.
+    func sizeThatFits(_ proposal: ProposedViewSize, nsView: ColorComboControl, context: Context) -> CGSize? {
+        let width: CGFloat
+        if let proposed = proposal.width, proposed.isFinite {
+            width = proposed
+        } else {
+            width = Self.defaultFaceWidth
+        }
+        return CGSize(width: width, height: nsView.intrinsicContentSize.height)
+    }
+
+    /// Detaches the colour panel's target/action if this coordinator still holds them — "last-writer
+    /// wins" for any control that took the panel over afterward (this view's own doc comment).
+    static func dismantleNSView(_ control: ColorComboControl, coordinator: Coordinator) {
+        coordinator.detachColorPanel()
+    }
+
+    func makeCoordinator() -> Coordinator {
+        Coordinator(role: role, onChange: onChange, onPanelChange: onPanelChange)
+    }
+
+    // MARK: Coordinator
+
+    /// The one object every menu action and the colour panel's action target — a class because
+    /// `NSColorPanel.setTarget(_:)` needs something with reference identity to detach from later,
+    /// and `@MainActor` because every AppKit call it makes has to be.
+    @MainActor
+    final class Coordinator: NSObject {
+        fileprivate var role: ColorComboRole
+        fileprivate var currentValue: String?
+        fileprivate var onChange: @MainActor (String?) -> Void
+        fileprivate var onPanelChange: @MainActor (String?) -> Void
+
+        /// ~44×14pt — a menu row's swatch, wide enough beside its title to read as a colour sample
+        /// rather than a bullet.
+        private static let menuSwatchSize = NSSize(width: 44, height: 14)
+
+        /// Whichever coordinator most recently took the shared panel over — `NSColorPanel` exposes
+        /// `setTarget(_:)`/`setAction(_:)` but no matching getter, so "is it still mine to detach"
+        /// has nowhere to live but here. `weak`, so a coordinator that never got around to detaching
+        /// (a window closed from under it) does not keep the next owner from being collected either.
+        private static weak var currentPanelOwner: Coordinator?
+
+        init(
+            role: ColorComboRole,
+            onChange: @escaping @MainActor (String?) -> Void,
+            onPanelChange: @escaping @MainActor (String?) -> Void
+        ) {
+            self.role = role
+            self.onChange = onChange
+            self.onPanelChange = onPanelChange
+        }
+
+        /// Rebuilds the dropdown for `value` and hands the control the menu, its checked item (the
+        /// popup anchor `ColorComboControl.popUpMenu()` positions against, and the source of its
+        /// accessibility value), and the value its swatch zone should draw. Cheap enough — a dozen
+        /// rows, a fistful of small menu-row images — to redo wholesale on every SwiftUI update
+        /// rather than diffing against what was there before.
+        func rebuild(_ control: ColorComboControl, value: String?) {
+            currentValue = value
+            let menu = NSMenu()
+            let built = ColorComboModel.menu(role: role, value: value)
+            var checkedItem: NSMenuItem?
+            for (index, item) in built.items.enumerated() {
+                if item == .separator {
+                    menu.addItem(.separator())
+                    continue
+                }
+                let menuItem = self.menuItem(for: item)
+                let isChecked = index == built.selectedIndex
+                menuItem.state = isChecked ? .on : .off
+                menu.addItem(menuItem)
+                if isChecked { checkedItem = menuItem }
+            }
+            control.comboMenu = menu
+            control.checkedItem = checkedItem
+            control.swatchValue = value
+        }
+
+        /// See `ColorComboView.dismantleNSView(_:coordinator:)`.
+        func detachColorPanel() {
+            guard Coordinator.currentPanelOwner === self else { return }
+            let panel = NSColorPanel.shared
+            panel.setTarget(nil)
+            panel.setAction(nil)
+            Coordinator.currentPanelOwner = nil
+        }
+
+        private func menuItem(for item: ColorComboItem) -> NSMenuItem {
+            switch item {
+            case .none:
+                let menuItem = NSMenuItem(title: "None", action: #selector(selectNone), keyEquivalent: "")
+                menuItem.target = self
+                menuItem.image = PaletteSwatch.rectImage(for: nil, size: Self.menuSwatchSize)
+                return menuItem
+
+            case let .palette(name):
+                let menuItem = NSMenuItem(
+                    title: ColorComboModel.displayName(name),
+                    action: #selector(selectValue(_:)),
+                    keyEquivalent: ""
+                )
+                menuItem.target = self
+                menuItem.representedObject = name
+                menuItem.image = PaletteSwatch.rectImage(for: name, size: Self.menuSwatchSize)
+                return menuItem
+
+            case let .current(swatchValue, title):
+                let menuItem = NSMenuItem(title: title, action: #selector(selectValue(_:)), keyEquivalent: "")
+                menuItem.target = self
+                menuItem.representedObject = swatchValue
+                menuItem.image = PaletteSwatch.rectImage(for: swatchValue, size: Self.menuSwatchSize)
+                return menuItem
+
+            case .other:
+                let menuItem = NSMenuItem(title: "Other…", action: #selector(openColorPanel), keyEquivalent: "")
+                menuItem.target = self
+                return menuItem
+
+            case .separator:
+                // Unreached: `rebuild` handles `.separator` before calling this. Kept so the switch
+                // stays total against a case list a future row could still grow.
+                return NSMenuItem.separator()
+            }
+        }
+
+        @objc private func selectNone() {
+            onChange(nil)
+        }
+
+        @objc private func selectValue(_ sender: NSMenuItem) {
+            onChange(sender.representedObject as? String)
+        }
+
+        /// Seeds the shared panel with the current resolved colour (black when there isn't one),
+        /// takes it over — "don't fight over the panel if something else takes it later" (this
+        /// view's own doc comment) — and asks for continuous updates, which is what makes a drag on
+        /// the panel's own sliders call `changeColor(_:)` on every tick rather than only on release.
+        ///
+        /// Two callers, one takeover: the dropdown's own **Other…** row (`#selector` target above)
+        /// and `ColorComboControl`'s swatch-zone click (wired in `ColorComboView.makeNSView`) —
+        /// Xcode's own two-zone combo opens the same panel from either half, and this is the one
+        /// place that happens.
+        @objc func openColorPanel() {
+            let panel = NSColorPanel.shared
+            panel.showsAlpha = true
+            panel.color = currentValue.flatMap(Palette.nsColor(for:)) ?? .black
+            panel.setTarget(self)
+            panel.setAction(#selector(changeColor(_:)))
+            Coordinator.currentPanelOwner = self
+            panel.makeKeyAndOrderFront(nil)
+        }
+
+        /// The panel's own action, continuous while the user drags: normalizes what it picked to
+        /// this app's stored-value vocabulary and hands it to `onPanelChange` — the palette name
+        /// when the colour lands exactly on one of `role`'s twelve, the hex otherwise. The name-wins
+        /// rule is the same one `ColorComboModel.match` applies to a value already on disk.
+        @objc private func changeColor(_ sender: NSColorPanel) {
+            guard let hex = sender.color.paletteHexString else { return }
+            onPanelChange(Palette.name(forHex: hex, in: role.palette) ?? hex)
+        }
+    }
+}
+
+// MARK: - Two-zone NSControl
+
+/// The collapsed face: a custom control in Xcode's inspector colour combo's own shape — a flat
+/// swatch filling almost the whole control, and a fixed-width chevron trigger at the trailing edge.
+/// The swatch zone opens the Colors panel directly (`ColorComboView.Coordinator.openColorPanel()`);
+/// the trigger zone pops the dropdown `ColorComboView.Coordinator.rebuild(_:value:)` builds. Neither
+/// zone owns a bezel or a cell of its own — everything both draw and hit-test is computed straight
+/// from `bounds` on every pass, so there is nothing cached here the way the face image the
+/// `NSPopUpButton` this replaces used to keep (`swatchValue`'s `didSet` just marks a redraw).
+///
+/// Plain internal, not `private`/`fileprivate`, even though nothing outside this file constructs one
+/// directly: it is `ColorComboView`'s `NSViewType`, an associated-type witness the compiler requires
+/// to be at least as visible as `ColorComboView` itself (internal, usable module-wide) — same
+/// reasoning as the un-modified-access `Coordinator` a few lines up.
+final class ColorComboControl: NSControl {
+
+    /// The value the swatch zone currently draws — a palette name or a hand-written hex, exactly as
+    /// `ColorComboView.Coordinator.rebuild(_:value:)` hands it over on every SwiftUI update.
+    var swatchValue: String? {
+        didSet {
+            guard swatchValue != oldValue else { return }
+            needsDisplay = true
+        }
+    }
+
+    /// The dropdown the trigger zone pops, and the row within it that should read as checked — both
+    /// `Coordinator.rebuild(_:value:)`'s to hand over on every rebuild, always together (`checkedItem`
+    /// is always one of `comboMenu`'s own items). This control never builds a row itself; it only
+    /// positions and pops what it is given.
+    var comboMenu: NSMenu?
+    var checkedItem: NSMenuItem?
+
+    /// Fired by a click anywhere in the swatch zone — wired once, in `ColorComboView.makeNSView`, to
+    /// the coordinator's `openColorPanel()`. `@MainActor`, this file's own established convention for
+    /// a stored closure an AppKit callback fires (`onChange`/`onPanelChange` above), even though this
+    /// control's own methods are already implicitly MainActor-isolated as an `NSResponder` subclass.
+    var onSwatchClick: (@MainActor () -> Void)?
+
+    override var isEnabled: Bool {
+        get { super.isEnabled }
+        set {
+            super.isEnabled = newValue
+            needsDisplay = true
+        }
+    }
+
+    /// About half the old regular `NSPopUpButton`'s height — the whole point of this rework. Width
+    /// is `NSView.noIntrinsicMetric`: this control obeys whatever SwiftUI proposes, exactly as the
+    /// button it replaces did.
+    override var intrinsicContentSize: NSSize {
+        NSSize(width: NSView.noIntrinsicMetric, height: 14)
+    }
+
+    /// The fixed-width trigger strip at the trailing edge, full height — the geometry this whole
+    /// control exists to draw: "a flat swatch occupying the control, a chevron trigger at the
+    /// trailing edge."
+    private static let triggerWidth: CGFloat = 16
+    /// The swatch zone's padding before its rounded rect — two points rather than a bare hairline,
+    /// so the control's own field (`drawField()`) reads as a visible ring around the colour instead
+    /// of being covered by it.
+    private static let swatchPadding: CGFloat = 2
+    private static let cornerRadius: CGFloat = 3
+    /// The field's own radius — a point more than the swatch's, so the two rounded rects run
+    /// concentric instead of pinching at the corners.
+    private static let fieldRadius: CGFloat = 4
+
+    private var triggerRect: NSRect {
+        NSRect(x: bounds.maxX - Self.triggerWidth, y: bounds.minY, width: Self.triggerWidth, height: bounds.height)
+    }
+
+    private var swatchZone: NSRect {
+        NSRect(x: bounds.minX, y: bounds.minY, width: bounds.width - Self.triggerWidth, height: bounds.height)
+    }
+
+    // MARK: Drawing
+
+    override func draw(_ dirtyRect: NSRect) {
+        guard let context = NSGraphicsContext.current?.cgContext else { return }
+        context.saveGState()
+        defer { context.restoreGState() }
+        // A transparency layer, not a flat `setAlpha` around each shape: the swatch's underlay,
+        // fill and stroke overlap, and drawing each at reduced alpha independently would let the
+        // stroke double up over the fill beneath it. Compositing the whole disabled face as one
+        // layer avoids that.
+        if !isEnabled {
+            context.setAlpha(0.35)
+            context.beginTransparencyLayer(auxiliaryInfo: nil)
+        }
+        drawField()
+        drawSwatch()
+        drawTrigger()
+        if !isEnabled {
+            context.endTransparencyLayer()
+        }
+    }
+
+    /// The control's own field: a bordered, filled rounded rect over the whole bounds, under both
+    /// zones — what makes the swatch and the trigger read as one control rather than two shapes
+    /// floating beside each other. Standard control materials: `controlBackgroundColor` fill,
+    /// `separatorColor` hairline, the half-point inset keeping the stroke on whole pixels.
+    private func drawField() {
+        let path = NSBezierPath(
+            roundedRect: bounds.insetBy(dx: 0.5, dy: 0.5),
+            xRadius: Self.fieldRadius,
+            yRadius: Self.fieldRadius
+        )
+        NSColor.controlBackgroundColor.setFill()
+        path.fill()
+        NSColor.separatorColor.setStroke()
+        path.lineWidth = 1
+        path.stroke()
+    }
+
+    /// The colour rect, drawn exactly like `PaletteSwatch.rectImage`: a `textBackgroundColor`
+    /// underlay so a translucent stored colour composites the same way in light and dark, the
+    /// resolved colour on top, a `separatorColor` hairline stroke last. `nil`/unresolvable value →
+    /// underlay + stroke only, the same "there is no colour, so show none" rule.
+    private func drawSwatch() {
+        let inset = swatchZone.insetBy(dx: Self.swatchPadding, dy: Self.swatchPadding)
+        let path = NSBezierPath(roundedRect: inset, xRadius: Self.cornerRadius, yRadius: Self.cornerRadius)
+        NSColor.textBackgroundColor.setFill()
+        path.fill()
+        if let swatchValue, let color = Palette.nsColor(for: swatchValue) {
+            color.setFill()
+            path.fill()
+        }
+        NSColor.separatorColor.setStroke()
+        path.lineWidth = 1
+        path.stroke()
+    }
+
+    /// The trigger: a small vertically-centred rounded **square**, `controlAccentColor`-filled, with
+    /// a white `chevron.up.chevron.down` centred inside — the standard `NSPopUpButton` indicator's
+    /// own look, redrawn here since this control has no bezel of its own to borrow one from.
+    private func drawTrigger() {
+        let side = triggerRect.height - 2 * Self.swatchPadding
+        let square = NSRect(
+            x: triggerRect.midX - side / 2,
+            y: triggerRect.midY - side / 2,
+            width: side,
+            height: side
+        )
+        let path = NSBezierPath(roundedRect: square, xRadius: Self.cornerRadius, yRadius: Self.cornerRadius)
+        NSColor.controlAccentColor.setFill()
+        path.fill()
+
+        let config = NSImage.SymbolConfiguration(pointSize: 7, weight: .bold)
+            .applying(.init(paletteColors: [.white]))
+        guard let chevron = NSImage(systemSymbolName: "chevron.up.chevron.down", accessibilityDescription: nil)?
+            .withSymbolConfiguration(config)
+        else { return }
+        let size = chevron.size
+        chevron.draw(in: NSRect(
+            x: square.midX - size.width / 2,
+            y: square.midY - size.height / 2,
+            width: size.width,
+            height: size.height
+        ))
+    }
+
+    // MARK: Events
+
+    /// Point-in-trigger-zone pops the dropdown; anywhere else in the control fires the swatch click
+    /// — the two-zone split this whole rework exists for. A disabled control answers neither.
+    override func mouseDown(with event: NSEvent) {
+        guard isEnabled else { return }
+        let point = convert(event.locationInWindow, from: nil)
+        if triggerRect.contains(point) {
+            popUpMenu()
+        } else {
+            onSwatchClick?()
+        }
+    }
+
+    override var acceptsFirstResponder: Bool { isEnabled }
+
+    /// Space and Return pop the dropdown — the one keyboard path into this control. There is
+    /// currently no keyboard equivalent for the swatch zone's direct panel launch; see this class's
+    /// own doc comment and the file's top-level report for what a full accessibility pass would add.
+    override func keyDown(with event: NSEvent) {
+        guard isEnabled else {
+            super.keyDown(with: event)
+            return
+        }
+        switch event.keyCode {
+        case 49, 36, 76: // Space, Return, keypad Enter
+            popUpMenu()
+        default:
+            super.keyDown(with: event)
+        }
+    }
+
+    /// Standard popup placement: `comboMenu` is asked to land `checkedItem` at the control's own top
+    /// edge, the same non-pulldown anchor `NSPopUpButton` itself uses so the checked row appears
+    /// where the control's own face is rather than wherever the pointer happened to be.
+    private func popUpMenu() {
+        guard let comboMenu else { return }
+        comboMenu.popUp(positioning: checkedItem, at: NSPoint(x: 0, y: bounds.height), in: self)
+    }
+
+    // MARK: Accessibility
+
+    override func accessibilityRole() -> NSAccessibility.Role? { .popUpButton }
+
+    /// The checked row's own title — "Light Cayenne", "None", a bare hex — exactly what the dropdown
+    /// itself would show ticked, since `Coordinator.rebuild(_:value:)` hands this control the very
+    /// item it built the menu from rather than a copy.
+    override func accessibilityValue() -> Any? { checkedItem?.title }
+}

Kanban/UI/Palette.swift

@@ -62,11 +62,13 @@ enum Palette {
     ]
 }
 
-// The pathfinder's panel round-trip helpers (`NSColor.paletteHexString`, `Palette.name(forHex:)`)
-// stay unported: they exist to turn a colour the *system picker* returned back into a palette name,
-// and this app has no colour picker — "custom hex is not pickable in-app" (03 § Styling ▸ Controls)
-// makes the whole round trip a surface that doesn't exist. Its swatch drawing, on the other hand, is
-// below: a menu can only render `Image`/`Text`, so the quick-style row's dots have to be pictures.
+// The pathfinder's panel round-trip helpers, ported below (`NSColor.paletteHexString`,
+// `Palette.name(forHex:in:)`): the reusable colour-picker combo (`ColorComboView`, ColorCombo.swift)
+// is the surface that finally needs them — a colour the *system picker* returns has to become a
+// stored value the same way a palette pick already does: the palette NAME when the colour lands
+// exactly on one of the twelve, the hex otherwise. Its swatch drawing, unchanged in spirit, is
+// below: a menu can only render `Image`/`Text`, so both the quick-style row's dots and the combo's
+// rows have to be pictures.
 
 // MARK: - Menu swatches
 
@@ -102,6 +104,28 @@ enum PaletteSwatch {
             return true
         }
     }
+
+    /// A wide rectangular swatch for `value` — `ColorComboView`'s own rows and its collapsed face,
+    /// which are wide and short rather than the quick-style row's small dots (hence a sibling
+    /// function rather than a parameter on `circleImage`: the two shapes are never interchangeable at
+    /// their call sites). `nil` draws the border alone, exactly `circleImage`'s "there is no colour,
+    /// so show none" — the collapsed face's **None** state and the dropdown's own **None** row both
+    /// call this with `nil` rather than a sentinel string.
+    static func rectImage(for value: String?, size: NSSize) -> NSImage {
+        let color = value.flatMap(Palette.nsColor(for:))
+        return NSImage(size: size, flipped: false) { rect in
+            let inset = rect.insetBy(dx: 0.5, dy: 0.5)
+            let path = NSBezierPath(rect: inset)
+            NSColor.textBackgroundColor.setFill()
+            path.fill()
+            color?.setFill()
+            path.fill()
+            NSColor.separatorColor.setStroke()
+            path.lineWidth = 1
+            path.stroke()
+            return true
+        }
+    }
 }
 
 extension Palette {
@@ -134,9 +158,18 @@ extension Palette {
         guard let value = field.value else { return nil }
         return color(named: value)
     }
+
+    /// The name of `palette`'s entry whose hex matches `hex`, case-insensitively — the pathfinder's
+    /// round trip, ported for `ColorComboView`'s panel handoff: a colour the system picker returns
+    /// comes back as `NSColor.paletteHexString`'s canonical `#RRGGBB[AA]`, and this is what turns
+    /// that back into "the user picked Light Cayenne" instead of leaving it as an anonymous hex.
+    /// `nil` when nothing in `palette` matches, which the caller reads as "store the hex instead."
+    static func name(forHex hex: String, in palette: [PaletteColor]) -> String? {
+        palette.first { $0.hex.caseInsensitiveCompare(hex) == .orderedSame }?.name
+    }
 }
 
-// MARK: - Hex → colour
+// MARK: - Hex ↔ colour
 
 extension NSColor {
     /// `#RRGGBB` or `#RRGGBBAA` → `NSColor` in **sRGB** — the colour space the hex digits name,
@@ -160,4 +193,20 @@ extension NSColor {
             alpha: alpha
         )
     }
+
+    /// The reverse of `init?(paletteHex:)`: `#RRGGBB`, or `#RRGGBBAA` when the colour is
+    /// translucent — full opacity collapses to six digits rather than a trailing `FF`, so a colour
+    /// that round-trips through the panel without the user touching the opacity slider is written
+    /// exactly as a curated palette entry would be. `nil` only for a colour space **sRGB** cannot
+    /// convert into, which no picker swatch or palette entry here ever is.
+    var paletteHexString: String? {
+        guard let srgb = usingColorSpace(.sRGB) else { return nil }
+        let red = Int((srgb.redComponent * 255).rounded())
+        let green = Int((srgb.greenComponent * 255).rounded())
+        let blue = Int((srgb.blueComponent * 255).rounded())
+        let alpha = Int((srgb.alphaComponent * 255).rounded())
+        return alpha >= 255
+            ? String(format: "#%02X%02X%02X", red, green, blue)
+            : String(format: "#%02X%02X%02X%02X", red, green, blue, alpha)
+    }
 }

Kanban/UI/StyleEditor.swift

@@ -216,7 +216,8 @@ struct StyleEditorLayout: Equatable {
 
 // MARK: - The editor
 
-/// The style editor: a background section and a symbol section, each a leading "no value" well
+/// The style editor: a background section and a symbol section (each omissible — `showsBackground`/
+/// `showsSymbols`, since 03's anchors compose the halves they need), each a leading "no value" well
 /// followed by its grid, with the target set's current value stated beside the section title.
 ///
 /// ### What it shows for a batch
@@ -250,6 +251,18 @@ struct StyleEditorView: View {
     /// a colour chosen in a card window is one of that window's session gestures.
     var undo: CardWindowUndo?
 
+    /// Whether the symbol section appears at all. On everywhere but the board info popover, whose
+    /// inline `SymbolPicker` beside the rename field owns the board's glyph now — two surfaces
+    /// writing the same key in one popover would make the second read as a different setting.
+    var showsSymbols: Bool = true
+
+    /// Whether the background section appears at all. On everywhere but the card window sidebar,
+    /// where the labeled `ColorComboView` row is the background story (03 ▸ Styling ▸ Controls,
+    /// the 2026-08-06 anchor-ownership rule): the sidebar is the narrow context the combo was
+    /// built for, and grid-plus-combo over one value read as two settings — `showsSymbols`'
+    /// reasoning, pointed the other way.
+    var showsBackground: Bool = true
+
     /// The live body metric, read here rather than passed in — `CardStyleSection`'s pattern, so
     /// every anchor derives its geometry the same way (10-accessibility.md's full-relative-scaling
     /// rule).
@@ -263,9 +276,15 @@ struct StyleEditorView: View {
 
         VStack(alignment: .leading, spacing: StyleEditorLayout.sectionSpacing(bodyPointSize: pointSize)) {
             targetCaption(count: subjects.count)
-            backgroundSection(background, layout: layout)
-            Divider()
-            symbolSection(icon, layout: layout)
+            if showsBackground {
+                backgroundSection(background, layout: layout)
+            }
+            if showsBackground && showsSymbols {
+                Divider()
+            }
+            if showsSymbols {
+                symbolSection(icon, layout: layout)
+            }
         }
         .padding(layout.padding)
         .frame(width: layout.width)