Merge branch 'main' into feat/generic-n-extruders

* Define validated color picker selection contract

* Integrate web color picker with gradient and alpha controls

Co-authored-by: yw4z <ywsyildiz@gmail.com>

* Apply shared Orca theme to web color picker

* Host color picker in a validated WebView dialog

* Persist color picker favorites in user preferences

* Integrate localized web color picker with filament actions

* Add color picker browser regressions and verify direct includes

* Fit color picker content in a borderless floating panel

* Anchor color picker panels to their triggering controls

* Use accent foreground for selected color picker switches

* Integrate web color picker into generic color fields

* Use web color picker for AMS custom colors

* Use shared web color picker from Linux sidebar menu

* Use web color picker when adding texture import material

* Preserve alpha in filament color picker actions

* Clean up color picker asset whitespace

* Use application translations for color picker validation

* Preserve existing formatting in color picker integration

* Match SpeedDial rounded window handling on macOS

* Align color picker host behavior with SpeedDial

* Consolidate color picker implementation into its dialog

* Remove native color picker fallback

* Limit color picker interfaces to production consumers

* Use shared WebView translation field name

* Reapply anchored color picker placement after GTK show

* update

* fix increment buttons not working on spin inputs

* Use thumb color from its own channel

* init gradients with shifted color for second color

* fix hsl sliders cannot move freely and lock downs other one

* unify save button and color preview & increase stored color count to 32

* switch to hsl based calculation and fix plot and slider drag events

* update

* add support for multi colored gradients

* Update test_filament_color_picker.cpp

* add filtering color palette and store sidebar and combo state

* open dialog with calculated size

* apply shadow to dialog on windows

* add tooltip for gradient add color button

* Restore draggable fixed-size color picker frame

* Fix color picker sidebar sizing in WebKit

* Fix invisible default filament color button on macOS

* Remove duplicated color defs for color picker

* Remove duplicate HTML color picker frame

* Match color picker tests to current theme roles

* update icons

* use focus color on background of filter box

* align gradient switch with hex input

* fix initial window sizing

* Preserve caller color order when drawing filament icons

---------

Co-authored-by: yw4z <ywsyildiz@gmail.com>

docs/HLSD/color-picker.md

@@ -0,0 +1,131 @@
+# Color picker
+
+The color picker is a local HTML dialog hosted by `ColorPickerDialog`, a
+`WebViewHostDialog` subclass. Its header and implementation own the ordered
+selection contract and shared filament conversion. Bridge validation, favorites
+persistence, placement and gettext strings remain private to the implementation.
+Its colors use the existing `ColorRGBA` utility.
+It uses a native title bar and fixed window border, allowing dragging but no
+manual resizing or maximization. Native title-bar colors use the application's
+shared dialog dark-theme update on creation and theme changes.
+Like SpeedDial, the host disables browser zoom accelerators, restores native
+WebView focus on activation and readiness, and synchronizes layout and the macOS
+viewport before repainting the backend. Activation never dismisses this modal
+dialog; focus restoration preserves an active editor and its partial input.
+The initialized page reports
+its intrinsic content height; native code validates the current page identifier
+and bounded numeric height, converts CSS pixels to device-independent window
+size, and fits within the display's work area. Identical sizes are ignored. The
+page observes content rather than viewport height, so resizing does not create
+a feedback loop; oversized content remains scrollable.
+The panel snapshots the triggering color or More Colors button's screen rectangle.
+It aligns below the button, flips above when needed, and clamps to that button's
+display work area on initial display. Later content and DPI changes update only
+the client size, preserving the position chosen by dragging the title bar.
+wxGTK clears the dialog's default
+parent-centering constraint and reapplies its native position after showing,
+bypassing wxGTK's requested-position cache. Absolute top-level placement remains
+subject to the window manager; Wayland compositors control it. The official filament palette's
+existing placement is independent of this custom panel.
+A solid selection contains one color; a gradient contains exactly two ordered
+endpoints. The bridge represents these as `{"type":"solid|gradient",
+"colors":["#RRGGBBAA", ...]}`. RGB input is also accepted and becomes opaque.
+Native validation rejects malformed hex and incorrect cardinality.
+
+The project filament color action and the official filament picker's More Colors
+action enable two-endpoint gradients and independent endpoint alpha. The preset
+combo box reads project colors in their stored vector order locally and applies
+changes through `sync_colour_config`,
+retaining the existing RGB/RGBA profile/project formats and dirty marking.
+Sidebar gradient and segmented multicolor swatches draw colors in the supplied
+order without sorting them.
+Opaque colors use `#RRGGBB`; nonopaque colors use `#RRGGBBAA`, including fully
+transparent alpha `00`. Initial selections, alpha-only edits and cancellation
+retain stored alpha. Ordered
+custom results bypass the official palette's `FilamentColor` set. Choosing an
+official swatch retains its existing palette behavior.
+The Linux sidebar's Change extruder color menu uses this same custom editor and
+the filament swatch anchor, including alpha, ordered gradients and configuration syncing.
+
+Striped colors and gradients with more than two endpoints cannot be represented
+by this editor. A notice explains that the current selection is retained; the
+editor starts from the first color, and unchanged confirmation is a no-op.
+Cancellation is also a no-op. If the WebView backend cannot initialize, a local
+unavailable panel offers Cancel and Escape, without opening a system color picker.
+
+Generic color option fields use an ordinary color button on every platform and
+open the same panel with gradients and alpha disabled. The panel is anchored to
+the field button. Empty or invalid field values remain undefined (the empty
+string), distinct from opaque black. Right-click resets to undefined. Cancel does
+not notify the field; confirmation and reset notify only when its RGB string
+changes. Programmatic assignments remain silent, and reading a field never
+writes legacy favorites.
+
+AMS material settings retain their fixed/AMS swatches and first-level popup. Only
+its custom-color action opens the solid, opaque editor, anchored to that custom
+control. The transient popup releases its grab while the modal is open and returns
+to the same selection on cancellation. Confirmation uses the existing default-color
+and packed RGBA event path. Device permission/status checks remain at the first-level
+entry.
+
+Texture import's color-mapping Add Material action opens a solid, opaque editor
+anchored to the mapping row. The existing filament limit is checked before opening.
+The first-level material popup closes as an action; its callback is copied before
+dismissal, so popup destruction does not invalidate the modal's completion path.
+Confirmation invokes the existing virtual-filament callback once; cancellation
+adds no material.
+
+Native gettext strings are installed at document start. Static page labels and
+palette names use stable English keys; RAL codes, channel symbols, and numeric
+labels remain data. The palette color values do not depend on the UI language.
+The application locale also sets the document language. Numeric editor validation
+uses the application's gettext messages, rather than browser language defaults;
+missing translations fall back to the stable English keys.
+
+The pure color/state regressions run with
+`node --test resources/web/dialog/ColorPickerDialog/colorpicker.test.js`.
+Optional real-browser regressions live beside them in
+`colorpicker.browser.test.js`. They use an existing Playwright installation
+(`ORCA_PLAYWRIGHT_MODULE` can name its module path) and an installed browser
+(`ORCA_BROWSER_EXECUTABLE` can name its executable), without adding a production
+dependency. They cover bridge initialization, capability combinations, invalid
+editor recovery, ordered endpoint alpha, favorites, gettext keys, and live theme
+changes. These browser checks complement native contract/persistence tests; they
+do not establish the full native modal confirmation and favorites journey.
+
+Gradient and alpha capabilities are independent and default off. Unsupported
+gradients are rejected; disabled alpha normalizes the selected result to opaque.
+Favorites retain both capabilities independently of the current caller. The page
+stores alpha as a byte and only converts to percentage when displaying or editing
+opacity, so switching endpoints does not change alpha precision.
+
+The page starts disabled. Each document supplies a page identifier in its ready
+message, receives native initialization, and acknowledges it before native code
+accepts confirmation or favorite updates. Repeated initialization does not reset
+edits, and messages from an obsolete document are ignored. Native WebView message
+handling is deferred and guarded by a lifetime token. Only a validated confirmation
+sets the optional result. Cancel, Escape and native window close leave it empty.
+
+Favorites belong to application configuration, separately from the selected result,
+in the editor configuration returned by `AppConfig::config_path()` under `data_dir()`.
+The `color_picker` section has string `version` equal to `1` and a `favorites`
+string containing a JSON array of typed selections. Native helpers normalize and
+deduplicate this array in order and limit it to 24 entries. Updates replace the
+entire section and immediately call `AppConfig::save()`, so accepted favorite
+changes survive cancellation. Empty arrays are saved explicitly. Core `AppConfig`
+only stores the raw section; color validation belongs to the GUI boundary.
+
+When the section is absent, valid solid colors from `custom_color_list` are imported
+once, without changing that legacy section. The legacy native picker saves decimal
+`r,g,b,a` byte strings; hexadecimal RGB and RGBA strings are also supported. Migration
+strictly validates all four decimal channels and preserves alpha. Gradient strings
+and malformed values are ignored. The new version and an empty array are
+saved even when there is nothing to import. A present section with an unknown or
+missing version is left untouched and disables favorite writes. Malformed version
+1 data is displayed as empty and remains on disk until the user explicitly saves
+a valid replacement. Other configuration sections and project/profile color
+formats are independent of this storage.
+
+Interface colors consume the host's `data-orca-theme` and `--orca-*` contract through
+shared styles. The picker opts into scoped global control roles. Application theme
+changes update UI surfaces without reloading the page or changing color data.

docs/HLSD/multi-extruder-ams.md

@@ -0,0 +1,199 @@
+# Multi-extruder and multi-AMS device control
+
+`DeviceManager`/`MachineObject` model the toolheads, AMS units, and filament slots of a connected
+printer and drive the device-control UI from that model. The model represents the counts as
+device-reported runtime values rather than compile-time caps, so a printer with an arbitrary number
+of toolheads, several AMS units, and a non-uniform number of slots per unit is handled by the same
+code paths. The printer agent is responsible for translating its printer's state into the shared
+JSON dialect this model consumes; the agent boundary is described in
+[printer-agent.md](printer-agent.md), and this document describes the dialect and the model.
+
+## Model layout
+
+`MachineObject` owns the device subsystems that this document covers:
+
+- `DevExtderSystem` — the toolheads (extruders) and their per-toolhead filament/temperature state.
+- `DevFilaSystem` — the AMS units (`DevAms`) and their trays (`DevAmsTray`).
+- `DevNozzleSystem` — the nozzles and, on rack printers, `DevNozzleRack`.
+- `DevFilaSwitch` — a filament switch that can feed several AMS units to more than one extruder.
+
+Each subsystem exposes its own count — `DevExtderSystem::GetTotalExtderCount()`,
+`DevFilaSystem::GetAmsCount()`, `DevAms::GetSlotCount()` — and the rest of the application derives
+its layout from those values rather than from fixed assumptions.
+
+## Wire dialect
+
+The dialect is the Bambu-shaped JSON that `DeviceManager` and `MachineObject` already consume. An
+agent whose printer speaks something else is expected to translate into it; the agent is not free
+to invent a new shape. Two representations coexist for extruders, and one for AMS/slots.
+
+### Extruders
+
+The generic representation is `print.device.extruder`, parsed by
+`ExtderSystemParser::ParseV2_0` (`DevExtruderSystem.cpp`). It has a packed `state` integer and an
+`info` array with one object per toolhead:
+
+```text
+device.extruder.state           packed integer
+  bits  0..3   total extruder count
+  bits  4..7   current extruder id
+  bits  8..11  target extruder id
+  bits 12..14  switch state
+  bits 15..18  currently loading extruder id
+  bit   19     busy for loading
+
+device.extruder.info[]          one entry per toolhead
+  id          extruder id
+  filam_bak   array of backup-group bits
+  info        bit 1 has filament, bit 2 buffer has filament, bit 3 nozzle present
+  temp        bits 0..15 current temperature, bits 16..31 target temperature
+  spre        slot_id bits 0..7, ams_id bits 8..15 (previous)
+  snow        same packing (current)
+  star        same packing (target)
+  stat        bit 0..15 AMS status, bits 16..31 RFID status
+  hnow        current nozzle id
+```
+
+The legacy single/dual representation is the pair of scalar fields `nozzle_temper` /
+`nozzle_target_temper`, plus the `print.ams.tray_tar` / `tray_now` tray pointer, parsed by
+`ExtderSystemParser::ParseV1_0`. That parser is a fallback and only fills the main extruder when the
+reported toolhead count is one.
+
+Physical extruder ids are fixed (`MAIN_EXTRUDER_ID = 0`, `DEPUTY_EXTRUDER_ID = 1`). Bambu printers
+present the two toolheads as a left/right pair and invert the physical-to-logical mapping; generic
+printers use the toolhead id itself as the logical id. `DevNozzle::GetLogicExtruderId()` /
+`GetExtruderId()` centralise that distinction.
+
+### AMS units and slots
+
+AMS units arrive as `print.ams.ams[]` and are parsed by `DevFilaSystemParser::ParseV1_0`. Each unit
+carries an `id` and an `info` bitfield:
+
+```text
+info bits  0..3    type: 0 dummy, 1 AMS, 2 AMS-Lite, 3 N3F, 4 N3S, 5 AMS-Lite-mixed (N9)
+info bits  8..11   bound extruder id (0xE marks a switch-bound unit)
+info bits 24..27   switch inlet when the unit is switch-bound
+```
+
+`DevAmsType` (`DevDefs.h`) enumerates the resulting unit kinds: `EXT_SPOOL`, `AMS`, `AMS_LITE`,
+`N3F`, `N3S`, and the `AMS_LITE_MIXED` N9 variant. `AMS_LITE_MIXED` reports itself as `AMS_LITE` to
+generic callers; code that needs the distinction uses `IsAmsLiteMixed()`.
+
+A unit whose bound-extruder nibble is `0xE` is switch-bound: it is kept only when a `DevFilaSwitch`
+is installed, in which case its extruder id is pinned to the main extruder and its binding set
+becomes `{0, 1}`; otherwise the unit is dropped from the AMS list.
+
+Each unit owns a map of `DevAmsTray` keyed by the tray id from the payload. The slot count is a
+property of the unit kind and the reported trays:
+
+- `AMS`, `AMS_LITE`, and `N3F` report four slots on Bambu printers, matching the firmware contract;
+- `N3S` reports one slot;
+- `EXT_SPOOL` and any non-Bambu unit report the number of trays actually present.
+
+The tray ids are the payload's slot indices; they are expected to be unique, 0-based, and contiguous
+within a unit, because the generic tray-index mapping below is cumulative.
+
+Bulk/extended spools are carried by `print.vir_slot`, which `DeviceManager` parses into
+`MachineObject::vt_slot`. Two ids are fixed: `VIRTUAL_TRAY_MAIN_ID = 255` (extruder 0) and
+`VIRTUAL_TRAY_DEPUTY_ID = 254` (extruder 1); the id convention is `vt_id = 255 - extruder_id`, so
+further extruders use 253, 252, … . The `vir_slot` parser recognises the 255/254 pair; the agent
+filament descriptor path `DevFilaSystemParser::ParseAgentFilament` is the entry that stores a fuller
+descending set in `vt_slot`.
+
+## Mapping
+
+Several subsystems relate AMS units, trays, and extruders, and more than one place derives a tray
+index. The Bambu mapping path (`DevMappingUtil`) computes `ams_id * 4 + slot_id` and knows only the
+Bambu unit kinds; `DevFilaSystem` provides the device model's own mapping below. The two agree for
+Bambu units and diverge for a non-Bambu unit whose slot count is not four.
+
+### AMS id to extruder id
+
+`DevFilaSystem::GetExtruderIdByAmsId()` resolves an AMS id to the extruder it feeds:
+
+- an AMS unit returns its bound extruder (`DevAms::GetExtruderId()`);
+- a virtual tray returns `VIRTUAL_TRAY_MAIN_ID - vt_id`;
+- Bambu's virtual AMS ids map to the main/deputy extruder.
+
+A unit may be bound to more than one extruder when a `DevFilaSwitch` feeds it; the binding set
+(`DevAms::m_binded_extruder_set`) and switch inlet are read by switch-aware code while the
+single-extruder id stays pinned for legacy callers.
+
+### Tray index
+
+`DevFilaSystem::GetTrayIndexMap()` maps a global tray index to an `(ams_id, slot_id)` pair and is
+used for backup-slot translation, calibration addressing, and the mapping popups.
+
+- Bambu AMS: `ams_id * 4 + slot_id`; N3S: the AMS id; AMS-Lite-mixed (N9): `24 + slot_id`.
+- Generic (non-Bambu): a running lane index — the count of trays in preceding units plus the slot
+  id. This depends on each unit's tray ids being 0-based and contiguous.
+
+### Virtual-slot recognition
+
+`devPrinterUtil::IsVirtualSlot()` decides whether an id denotes a virtual tray. On Bambu printers it
+is the fixed pair `{255, 254}`. On generic printers it is the descending range
+`[255 - count + 1, 255]`, where `count` is the selected printer preset's extruder count. The preset
+is expected to match the connected device; when the two disagree the virtual range is wrong, which
+is why a mismatch is reported rather than silently accepted.
+
+## Device-control UI
+
+The device-control widgets follow the same device-reported counts.
+
+- `AMSModel` (`AMSItem.hpp`) mirrors `DevAmsType` numerically: `EXT_AMS`, `GENERIC_AMS`, `AMS_LITE`,
+  `N3F_AMS`, `N3S_AMS`. A plain `AMS` maps to `GENERIC_AMS`.
+- On non-Bambu printers `use_generic_ams_layout()` routes `GENERIC_AMS` units through a variable-lane
+  rendering that draws one lane per reported tray; Bambu keeps its fixed four-slot rendering.
+- `AMSControl` picks its layout by toolhead count, not vendor: `CreateAmsSingleNozzle` for one
+  toolhead, `CreateAmsDoubleNozzle` for two, and `CreateAmsMultiNozzle` (one preview and one AMS
+  simplebook per toolhead) for three or more. A two-toolhead generic printer therefore keeps the
+  legacy left/right presentation; that is deliberate.
+- The status panel's `ExtruderImage` renders one per-toolhead state per nozzle and is resized to
+  `GetTotalExtderCount()`. Non-Bambu printers choose the active toolhead through
+  `m_generic_nozzle_selector` (shown when more than one toolhead exists); Bambu keeps its left/right
+  `m_nozzle_btn_panel`. Nozzle temperature controls are created on demand per toolhead.
+
+## Constraints
+
+- **Single dialect.** The agent translates its protocol into this JSON; the model does not learn
+  vendor protocols. Extending the model with a new unit kind or field means extending the dialect.
+- **Agent-produced counts.** Toolhead, AMS, and slot counts come from the device payload. Nothing
+  caps them at two toolheads or four slots except the Bambu contract described above.
+- **Extruder dialect invariants.** `device.extruder.state`'s count field must equal the length of
+  `info[]`, and `info[]` must be ordered by extruder id with `id` equal to the array index: the
+  parser places toolheads by array position while `GetExtderById()` indexes by id.
+- **One filament road per toolhead.** Each toolhead renders a single AMS filament road rather than an
+  independent per-toolhead road state. A generic scaffold that allowed the latter was removed as
+  unused; the one-extruder-per-toolhead road is the intended model.
+- **Preset/device agreement.** The generic layout and virtual-slot range derive their count from the
+  selected printer preset. A printer preset must therefore declare the same number of
+  `nozzle_diameter` entries as the device has toolheads. A mismatch is surfaced only as a log warning
+  (`StatusPanel::check_extruder_count_mismatch()`), deliberately log-only, because the sidebar and
+  extruder logic would otherwise silently disagree.
+- **Bambu compatibility.** Bambu-specific presentation (left/right pair, fixed 4-slot units, fixed
+  virtual ids, physical/logical inversion) is preserved behind the vendor check. Generic paths do
+  not alter it.
+- **Tray-index invariant.** The generic tray-index map is cumulative, so payload tray ids must be
+  unique, 0-based, and contiguous per unit. A malformed id is a producer error.
+- **Protocol markers.** The dialect has no neutral equivalent for some Bambu state, so agents that
+  lack it send empty `print.cfg`, `print.fun`, `print.aux`, and `print.stat`. Their presence selects
+  the new-protocol parse path; they are compatibility markers, not feature switches.
+
+## Main implementation locations
+
+- [`DevExtruderSystem`](../../src/slic3r/GUI/DeviceCore/DevExtruderSystem.h) — toolhead model and the
+  `device.extruder` parser
+- [`DevFilaSystem`](../../src/slic3r/GUI/DeviceCore/DevFilaSystem.h) — AMS/tray model, the AMS parser,
+  and the mapping helpers
+- [`DevDefs.h`](../../src/slic3r/GUI/DeviceCore/DevDefs.h) — `DevAmsType`, extruder ids, and virtual
+  tray ids
+- [`DeviceManager.cpp`](../../src/slic3r/GUI/DeviceManager.cpp) — message dispatch, `vir_slot`
+  parsing, and device state assembly
+- [`AMSControl.cpp`](../../src/slic3r/GUI/Widgets/AMSControl.cpp) — per-toolhead AMS panes
+  (`CreateAmsMultiNozzle`) and the generic layout
+- [`AMSItem.hpp`](../../src/slic3r/GUI/Widgets/AMSItem.hpp) — `AMSModel` and the variable-lane AMS
+  rendering
+- [`StatusPanel.cpp`](../../src/slic3r/GUI/StatusPanel.cpp) — `ExtruderImage`, the toolhead selector,
+  and per-toolhead temperature controls
+- [`MoonrakerPrinterAgent.cpp`](../../src/slic3r/Utils/MoonrakerPrinterAgent.cpp) — producer example
+  (AMS payload and the `device.extruder` encoding)

localization/i18n/list.txt

@@ -325,6 +325,7 @@ src/slic3r/GUI/BaseTransparentDPIFrame.cpp
 src/slic3r/GUI/CloneDialog.cpp
 src/slic3r/GUI/ColorDecomposeDialog.cpp
 src/slic3r/GUI/ColorDecomposeSupport.cpp
+src/slic3r/GUI/ColorPickerDialog.cpp
 src/slic3r/GUI/ConfigWizard.cpp
 src/slic3r/GUI/DeviceCore/DevCalib.cpp
 src/slic3r/GUI/DeviceCore/DevUpgrade.cpp

resources/web/dialog/ColorPickerDialog/colorpicker-model.js

@@ -0,0 +1,155 @@
+/* Pure color/state helpers shared by the page and its node:test contract tests. */
+(function (root, factory) {
+  "use strict";
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  else root.ColorPickerModel = api;
+})(typeof globalThis === "object" ? globalThis : this, function () {
+  "use strict";
+
+  function parseHex(hex) {
+    if (typeof hex !== "string" || !/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(hex)) return null;
+    return [1, 3, 5, 7].map((offset) => offset === 7 && hex.length === 7 ? 255 : parseInt(hex.slice(offset, offset + 2), 16));
+  }
+
+  function toHex(color) {
+    return "#" + color.map((byte) => Math.round(byte).toString(16).padStart(2, "0")).join("").toUpperCase();
+  }
+
+  const MAX_GRADIENT_COLORS    = 7;  // Most colors a gradient may have. A caller allows 2 (the default) up to this many.
+  const NEW_GRADIENT_HUE_SHIFT = 75; // Hue step used for every newly created gradient color.
+  const gradientLimit = (value) => Math.max(2, Math.min(MAX_GRADIENT_COLORS, Math.floor(Number(value)) || 2));
+
+  // `maxGradientColors` caps how many colors a gradient may have (2 when omitted).
+  function normalizeSelection(value, options = {}, maxGradientColors = 2) {
+    if (!value || !["solid", "gradient"].includes(value.type) || !Array.isArray(value.colors)) return null;
+    if (value.type === "gradient" && !options.allow_gradient) return null;
+    const count = value.colors.length;
+    if (value.type === "solid" ? count !== 1 : count < 2 || count > gradientLimit(maxGradientColors)) return null;
+    const colors = value.colors.map(parseHex);
+    if (colors.some((color) => color === null)) return null;
+    if (!options.allow_alpha) colors.forEach((color) => { color[3] = 255; });
+    return {type: value.type, colors: colors.map(toHex)};
+  }
+
+  function rgbToHsl(r, g, b) {
+    r /= 255; g /= 255; b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+    if (delta) {
+      s = delta / (1 - Math.abs(2 * l - 1));
+      if (max === r) h = ((g - b) / delta + (g < b ? 6 : 0)) / 6;
+      else if (max === g) h = ((b - r) / delta + 2) / 6;
+      else h = ((r - g) / delta + 4) / 6;
+    }
+    return [h * 360, s * 100, l * 100];
+  }
+
+  function hslToRgb(h, s, l) {
+    h = ((h % 360) + 360) % 360 / 60; s /= 100; l /= 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(h % 2 - 1)), m = l - c / 2;
+    const sectors = [[c,x,0], [x,c,0], [0,c,x], [0,x,c], [x,0,c], [c,0,x]];
+    return sectors[Math.floor(h)].map((channel) => Math.round((channel + m) * 255));
+  }
+
+  function contrastColor(color, hueShift = 90) {
+    if (!Number.isFinite(hueShift)) hueShift = 90;
+    const degrees = Math.max(-180, Math.min(180, hueShift));
+    const amount = Math.abs(degrees) / 180;
+    const [h, s, l] = rgbToHsl(color[0], color[1], color[2]);
+    const grey = s < 10;
+    const target = grey ? (l < 50 ? 100 : 0) : 100 - l;
+    const rgb = hslToRgb(h + degrees, grey ? 0 : s, l + (target - l) * amount);
+    return [...rgb, color[3]];
+  }
+
+  // options.max_gradient_colors (2..7, default 2) is how many colors this page lets a gradient have.
+  function createState(options = {}, selection = {type: "solid", colors: ["#808080"]}) {
+    const capabilities = {allow_gradient: options.allow_gradient === true, allow_alpha: options.allow_alpha === true};
+    // gradient stays null until a selection provides one or the user switches to gradient mode.
+    const state = {options: capabilities, maxGradientColors: gradientLimit(options.max_gradient_colors),
+                   mode: "solid", active: 0, solid: [128,128,128,255], gradient: null};
+    if (!applySelection(state, selection)) return null;
+    return state;
+  }
+
+  function applySelection(state, value) {
+    const selection = normalizeSelection(value, state.options, state.maxGradientColors);
+    if (!selection) return false;
+    state.mode = selection.type;
+    const colors = selection.colors.map(parseHex);
+    if (state.mode === "solid") state.solid = colors[0];
+    else {
+      state.gradient = colors;
+      state.active = Math.min(state.active, colors.length - 1); // A gradient with fewer colors must not leave the selected stop past its end.
+    }
+    return true;
+  }
+
+  function activeColor(state) { return state.mode === "solid" ? state.solid : state.gradient[state.active]; }
+
+  function setMode(state, mode) {
+    if (mode !== "solid" && (mode !== "gradient" || !state.options.allow_gradient)) return false;
+    // A new gradient starts at the current solid color and ends at its contrast color.
+    if (mode === "gradient" && !state.gradient) state.gradient = [[...state.solid], contrastColor(state.solid, NEW_GRADIENT_HUE_SHIFT)];
+    state.mode = mode;
+    return true;
+  }
+
+  function addGradientColor(state) {
+    if (state.mode !== "gradient" || state.gradient.length >= state.maxGradientColors) return false;
+    state.gradient.splice(state.active + 1, 0, contrastColor(state.gradient[state.active], NEW_GRADIENT_HUE_SHIFT));
+    state.active += 1;
+    return true;
+  }
+
+  function removeGradientColor(state) {
+    if (state.mode !== "gradient" || state.gradient.length <= 2) return false;
+    state.gradient.splice(state.active, 1);
+    state.active = Math.min(state.active, state.gradient.length - 1);
+    return true;
+  }
+
+  function setRgb(state, rgb) {
+    if (rgb.length !== 3 || rgb.some((v) => !Number.isFinite(v) || v < 0 || v > 255)) return false;
+    const color = activeColor(state);
+    rgb.forEach((v, i) => { color[i] = Math.round(v); });
+    return true;
+  }
+
+  function setAlphaPercent(state, value) {
+    if (!state.options.allow_alpha || !Number.isFinite(value) || value < 0 || value > 100) return false;
+    activeColor(state)[3] = Math.round(value * 255 / 100);
+    return true;
+  }
+
+  function setHex(state, hex) {
+    const color = parseHex(hex);
+    if (!color) return false;
+    if (hex.length === 7) color[3] = activeColor(state)[3];
+    if (!state.options.allow_alpha) color[3] = 255;
+    if (state.mode === "solid") state.solid = color;
+    else state.gradient[state.active] = color;
+    return true;
+  }
+
+  function exportSelection(state) {
+    const colors = state.mode === "solid" ? [state.solid] : state.gradient;
+    return normalizeSelection({type: state.mode, colors: colors.map(toHex)}, state.options, state.maxGradientColors);
+  }
+
+  // Favorites retain full capabilities regardless of what this caller can select.
+  function normalizeFavorites(values) {
+    if (!Array.isArray(values)) return [];
+    return values.slice(0, 24).map((value) => normalizeSelection(value, {allow_gradient: true, allow_alpha: true}, MAX_GRADIENT_COLORS)).filter(Boolean);
+  }
+
+  function selectionBackground(value) {
+    return value.type === "gradient" ? `linear-gradient(to right, ${value.colors.join(", ")})` : `linear-gradient(${value.colors[0]}, ${value.colors[0]})`;
+  }
+
+  return {MAX_GRADIENT_COLORS, NEW_GRADIENT_HUE_SHIFT, contrastColor, parseHex, toHex, normalizeSelection, rgbToHsl, hslToRgb, createState, applySelection, activeColor, setMode,
+          addGradientColor, removeGradientColor, setRgb, setAlphaPercent, setHex, exportSelection, normalizeFavorites, selectionBackground};
+});

resources/web/dialog/ColorPickerDialog/colorpicker.browser.test.js

@@ -0,0 +1,314 @@
+// Optional real-DOM regressions. Use an existing Playwright installation:
+// ORCA_PLAYWRIGHT_MODULE=<module path> ORCA_BROWSER_EXECUTABLE=<browser path>
+// ORCA_BROWSER_ENGINE=webkit exercises the macOS WebView layout engine.
+// node --test resources/web/dialog/ColorPickerDialog/colorpicker.browser.test.js
+const {test, before, after} = require("node:test");
+const assert = require("node:assert/strict");
+const {readFileSync} = require("node:fs");
+const {resolve} = require("node:path");
+const {pathToFileURL} = require("node:url");
+const engineName = process.env.ORCA_BROWSER_ENGINE || "chromium";
+let engine;
+try { engine = require(process.env.ORCA_PLAYWRIGHT_MODULE || "playwright")[engineName]; }
+catch (error) { if (error.code !== "MODULE_NOT_FOUND") throw error; }
+const options = {skip: engine ? false : "Use an existing Playwright installation via ORCA_PLAYWRIGHT_MODULE"};
+const url = pathToFileURL(resolve(__dirname, "index.html")).href;
+let browser;
+before(async () => { if (engine) browser = await engine.launch({headless: true, ...(process.env.ORCA_BROWSER_EXECUTABLE ? {executablePath: process.env.ORCA_BROWSER_EXECUTABLE} : {})}); });
+after(async () => { if (browser) await browser.close(); });
+async function open(t, strings = {}, language = "") {
+  const page = await browser.newPage({viewport: {width: 600, height: 660}}), errors = [];
+  page.on("pageerror", error => errors.push(error.message));
+  t.after(async () => { await page.close(); assert.deepEqual(errors, []); });
+  await page.addInitScript(({table, language}) => {
+    window.ORCA_UI_STRINGS = table;
+    window.ORCA_COLOR_PICKER_LANGUAGE = language;
+    window.messages = [];
+    window.wx = {postMessage: text => messages.push(JSON.parse(text))};
+  }, {table: strings, language});
+  await page.goto(url);
+  const ready = await page.evaluate(() => messages[0]);
+  assert.equal(ready.command, "ready");
+  return {page, ready, send: payload => page.evaluate(value => ColorPickerDialog.handleMessage(value), payload)};
+}
+function init(ready, gradient = false, alpha = false) {
+  return {command: "init", page_id: ready.page_id, options: {allow_gradient: gradient, allow_alpha: alpha},
+    selection: {type: "solid", colors: ["#01234567"]},
+    ui: {sidebar_open: true, palette: "basic"},
+    favorites: [{type: "gradient", colors: ["#FF000040", "#0000FF90"]}, {type: "solid", colors: ["#ABCDEF40"]}]};
+}
+async function count(page, command) { return page.evaluate(value => messages.filter(message => message.command === value).length, command); }
+
+for (const gradient of [false, true]) for (const alpha of [false, true]) {
+  test(`Native capabilities gate gradient=${gradient} and alpha=${alpha}`, options, async t => {
+    const {page, ready, send} = await open(t);
+    assert.equal(await page.locator("#confirmBtn").isDisabled(), true);
+    assert.equal(await send({...init(ready), options: {allow_gradient: "yes", allow_alpha: alpha}}), false);
+    assert.equal(await send({...init(ready), page_id: "stale"}), false);
+    assert.equal(await send(init(ready, gradient, alpha)), true);
+    assert.equal(await page.locator("#modeControls").isVisible(), gradient);
+    assert.equal(await page.locator("#alphaControls").isVisible(), alpha);
+    assert.equal(await page.locator("#userColors button:not(.empty)").count(), gradient ? 2 : 1);
+    await page.locator("#userColors button:not(.empty)").last().click();
+    const selection = await page.evaluate(() => ColorPickerDialog.exportSelection());
+    assert.deepEqual(selection, {type: "solid", colors: [alpha ? "#ABCDEF40" : "#ABCDEFFF"]});
+    assert.equal(await send(init(ready, gradient, alpha)), true);
+    assert.deepEqual(await page.evaluate(() => ColorPickerDialog.exportSelection()), selection, "repeated ready/init retains edits");
+    await page.locator("#colorPreview").click();
+    const favorites = await page.evaluate(() => messages.at(-1).favorites);
+    assert(favorites.some(favorite => favorite.colors[0] === "#ABCDEF40"), "original favorites retain their alpha");
+    assert(favorites.some(favorite => favorite.type === "gradient"), "filtered gradients remain stored");
+    await page.locator("#confirmBtn").click();
+    assert.deepEqual(await page.evaluate(() => messages.at(-1).selection), selection);
+  });
+}
+
+test("Visible incomplete editors block confirmation and favorites until recovery", options, async t => {
+  const {page, ready, send} = await open(t); await send(init(ready, true, true));
+  for (const [id, value, valid] of [["rValue", "", "21"], ["oValue", "", "50"], ["hexInput", "GG", "12345680"]]) {
+    await page.locator("#" + id).fill(value);
+    const confirms = await count(page, "confirm"), saves = await count(page, "update_favorites");
+    await page.locator("#confirmBtn").evaluate(element => element.click()); await page.locator("#colorPreview").click();
+    assert.equal(await count(page, "confirm"), confirms); assert.equal(await count(page, "update_favorites"), saves);
+    await page.locator("#" + id).fill(valid); await page.locator("#" + id).press("Enter");
+    assert.equal(await count(page, "confirm"), confirms + 1);
+  }
+  await page.locator("#hValue").fill(""); // HSL is now visible beside RGB, so incomplete HSL must block.
+  const hslConfirms = await count(page, "confirm");
+  await page.locator("#confirmBtn").evaluate(element => element.click());
+  assert.equal(await count(page, "confirm"), hslConfirms);
+  await page.locator("#hValue").fill("100");
+  const confirms = await count(page, "confirm"); await page.locator("#confirmBtn").click();
+  assert.equal(await count(page, "confirm"), confirms + 1);
+  await page.locator("#rValue").fill(""); await page.locator("#rValue").press("Escape");
+  assert.equal(await page.evaluate(() => messages.at(-1).command), "cancel");
+});
+
+test("Numeric channel and opacity edits clamp to their field bounds", options, async t => {
+  const {page, ready, send} = await open(t); await send(init(ready, true, true));
+  for (const [id, input, expected] of [["rValue", "999", "255"], ["rValue", "-1", "0"],
+                                     ["hValue", "361", "360"], ["oValue", "101", "100"], ["oValue", "-1", "0"]]) {
+    await page.locator("#" + id).fill(input);
+    assert.equal(await page.locator("#" + id).inputValue(), expected);
+    assert.equal(await page.locator("#" + id).evaluate(element => element.checkValidity()), true);
+  }
+  assert.equal((await page.evaluate(() => ColorPickerDialog.exportSelection())).colors[0].slice(-2), "00");
+});
+
+test("Endpoint edits and favorites retain ordered byte alpha", options, async t => {
+  const {page, ready, send} = await open(t);
+  await send({...init(ready, true, true), selection: {type: "gradient", colors: ["#FF000001", "#0000FF80"]}});
+  await page.locator(".gradient-thumb[data-index='1']").click();
+  await page.locator('.color-item[title="Red"]').first().click();
+  assert.deepEqual(await page.evaluate(() => ColorPickerDialog.exportSelection()), {type: "gradient", colors: ["#FF000001", "#FF000080"]});
+  await page.locator("#hexInput").fill("0000FF80"); await page.locator(".gradient-thumb[data-index='0']").click();
+  assert.equal(await page.locator("#hexInput").inputValue(), "FF000001");
+  await page.locator("#colorPreview").click();
+  assert.deepEqual(await page.evaluate(() => messages.at(-1).favorites[0]), {type: "gradient", colors: ["#FF000001", "#0000FF80"]});
+});
+
+test("Read-only favorites remain selectable and late documents cannot initialize", options, async t => {
+  const {page, ready, send} = await open(t); await send({...init(ready), favorites_writable: false});
+  assert.equal(await page.locator("#colorPreview").isDisabled(), true);
+  await page.locator("#userColors button:not(.empty)").first().click();
+  assert.equal(await page.locator("#hexInput").inputValue(), "ABCDEF");
+  await page.reload();
+  assert.equal(await send(init(ready)), false); assert.equal(await page.locator("#confirmBtn").isDisabled(), true);
+});
+
+test("Document strings translate palette names and editor errors while retaining RAL codes and numeric labels", options, async t => {
+  const source = readFileSync(resolve(__dirname, "../../../../src/slic3r/GUI/ColorPickerDialog.cpp"), "utf8");
+  const keys = [...source.matchAll(/_u8L\("([^"\n]+)"\)/g)].map(match => match[1]);
+  const strings = Object.fromEntries(keys.map(key => [key, "Translated: " + key]));
+  const {page, ready, send} = await open(t, strings); await send({...init(ready, true, true), options: {allow_gradient: true, allow_alpha: true, max_gradient_colors: 7}, preserve_multi_color: true});
+  assert.equal(await page.title(), strings["Color Picker"]);
+  for (const element of await page.locator("[data-i18n]").all()) assert.equal(await element.textContent(), strings[await element.getAttribute("data-i18n")]);
+  for (const attribute of ["aria-label", "title"]) for (const element of await page.locator(`[data-i18n-${attribute}]`).all())
+    assert.equal((await element.getAttribute(attribute)).split("\n")[0], strings[await element.getAttribute(`data-i18n-${attribute}`)]);
+  assert.equal(await page.locator("#selectionNotice").textContent(), strings["The current multi-color selection is kept until you choose a different color."]);
+  for (const palette of ["basic", "orca", "ral", "gradient"]) {
+    await page.selectOption("#paletteCombo", palette);
+    const names = await page.evaluate(value => ColorPickerPalettes[value].map(entry => entry.name), palette);
+    assert.deepEqual(await page.locator(".color-name").allTextContents(), names.map(name => {
+      const ral = name.match(/^(\d{4}) (.+)$/); return ral ? `${ral[1]} ${strings[ral[2]]}` : /^%\d+$/.test(name) ? name : strings[name];
+    }));
+  }
+  await page.locator("#hexInput").fill("bad");
+  assert.equal(await page.locator("#hexInput").evaluate(element => element.validationMessage), strings["Enter a complete hexadecimal color"]);
+  await page.locator("#hexInput").fill("12345680");
+  for (const [id, invalid, valid, key] of [["rValue", "", "18", "Invalid input"],
+                                         ["oValue", "", "50", "Invalid input"]]) {
+    const confirms = await count(page, "confirm");
+    await page.locator("#" + id).fill(invalid);
+    await page.locator("#confirmBtn").evaluate(element => element.click());
+    await page.locator("#colorPreview").click(); // Saving invokes the same translated validation while OK is disabled.
+    assert.equal(await count(page, "confirm"), confirms);
+    assert.equal(await page.locator("#" + id).evaluate(element => element.validationMessage), strings[key]);
+    await page.locator("#" + id).fill(valid);
+    assert.equal(await page.locator("#" + id).evaluate(element => element.validationMessage), "");
+    await page.locator("#confirmBtn").click();
+    assert.equal(await count(page, "confirm"), confirms + 1);
+  }
+  await page.locator("#hValue").fill("361");
+  await page.locator("#colorPreview").click();
+  assert.equal(await page.locator("#hValue").inputValue(), "360", "out-of-range hue clamps at its boundary");
+  await page.locator(".color-item").first().click();
+  assert.equal(await page.locator("#hValue").evaluate(element => element.validationMessage), "", "a new palette selection clears the previous editor error");
+});
+
+test("Document language and escaped labels preserve untranslated English fallback", options, async t => {
+  const cancel = '取消 "Cancel" \\ /\n下一行';
+  const {page, ready, send} = await open(t, {Cancel: cancel}, "zh-CN");
+  await send(init(ready));
+  assert.equal(await page.locator("html").getAttribute("lang"), "zh-CN");
+  assert.equal(await page.locator("#cancelBtn").textContent(), cancel);
+  assert.equal(await page.title(), "Color Picker");
+  assert.equal(await page.locator(".color-name").first().textContent(), "Red");
+  assert.deepEqual(await page.locator("label[for=hValue],label[for=sValue],label[for=lValue],label[for=rValue],label[for=gValue],label[for=bValue]").allTextContents(), ["H", "S", "L", "R", "G", "B"]);
+  assert.deepEqual(await page.evaluate(() => ColorPickerDialog.exportSelection()), {type: "solid", colors: ["#012345FF"]});
+});
+
+test("Global control colors follow the system while host semantic colors follow the app", options, async t => {
+  const {page, ready, send} = await open(t); await send({...init(ready, true, true), selection: {type: "gradient", colors: ["#FF000001", "#0000FF80"]}});
+  const initial = await page.evaluate(() => ({selection: ColorPickerDialog.exportSelection(), spectrum: document.getElementById("spectrum").toDataURL()}));
+  for (const theme of ["light", "dark"]) for (const system of ["light", "dark"]) {
+    await page.emulateMedia({colorScheme: system});
+    await page.evaluate(value => {
+      document.documentElement.dataset.orcaTheme = value;
+      const colors = value === "light" ? {bg: "#ffffff", fg: "#262e30", muted: "#363636", border: "#dbdbdb", accent: "#009688"} : {bg: "#2d2d31", fg: "#efeff0", muted: "#b2b3b5", border: "#36363b", accent: "#00675b"};
+      for (const [key, color] of Object.entries(colors)) document.documentElement.style.setProperty("--orca-" + key, color);
+      document.documentElement.style.setProperty("--orca-accent-fg", "#ffffff");
+    }, theme);
+    await page.evaluate(async () => {
+      await Promise.all(document.getAnimations().map(animation => animation.finished.catch(() => {})));
+    });
+    const colors = await page.evaluate(() => {
+      const body = getComputedStyle(document.body);
+      const tokenColor = token => {
+        const probe = document.createElement("span"); probe.style.cssText = `position:absolute;visibility:hidden;color:var(${token})`;
+        document.body.appendChild(probe); const color = getComputedStyle(probe).color; probe.remove(); return color;
+      };
+      const mode = document.querySelector("label[for=modeSwitch]");
+      return {background: body.backgroundColor, foreground: body.color,
+        modeBackground: getComputedStyle(mode).backgroundColor,
+        accent: getComputedStyle(mode, "::before").backgroundColor,
+        hostPanel: tokenColor("--panel"), hostText: tokenColor("--text")};
+    });
+    assert.equal(colors.background, system === "light" ? "rgb(255, 255, 255)" : "rgb(45, 45, 49)", `${theme} app / ${system} system body`);
+    assert.equal(colors.foreground, system === "light" ? "rgb(38, 46, 48)" : "rgb(239, 239, 240)");
+    assert.equal(colors.modeBackground, system === "light" ? "rgb(240, 240, 240)" : "rgb(36, 36, 40)");
+    assert.equal(colors.accent, theme === "light" ? "rgb(0, 150, 136)" : "rgb(0, 103, 91)", "shared accent follows the injected app theme");
+    assert.equal(colors.hostPanel, theme === "light" ? "rgb(255, 255, 255)" : "rgb(45, 45, 49)");
+    assert.equal(colors.hostText, theme === "light" ? "rgb(38, 46, 48)" : "rgb(239, 239, 240)");
+    assert.deepEqual(await page.evaluate(() => ({selection: ColorPickerDialog.exportSelection(), spectrum: document.getElementById("spectrum").toDataURL()})), initial);
+    for (const id of ["modeSwitch"]) for (const checked of [false, true]) {
+      if (await page.locator("#" + id).isChecked() !== checked) await page.locator(`label[for=${id}]`).click();
+      await page.evaluate(async () => {
+        await Promise.all(document.getAnimations().map(animation => animation.finished.catch(() => {})));
+      });
+      const result = await page.locator(`label[for=${id}]`).evaluate((element, selected) => {
+        const tokenColor = token => {
+          const probe = document.createElement("span"); probe.style.cssText = `position:absolute;visibility:hidden;color:var(${token})`;
+          document.body.appendChild(probe); const color = getComputedStyle(probe).color; probe.remove(); return color;
+        };
+        const labels = element.querySelectorAll(".switch-label");
+        return {selected: getComputedStyle(labels[selected ? 1 : 0]).color,
+          unselected: getComputedStyle(labels[selected ? 0 : 1]).color,
+          accentForeground: tokenColor("--button-fg-light"), mutedForeground: tokenColor("--fg-color-label")};
+      }, checked);
+      assert.equal(result.selected, result.accentForeground, `${theme} app / ${system} system ${id} selected text uses the accent foreground`);
+      assert.equal(result.selected, "rgb(254, 254, 254)", "global selected text stays light in both system schemes");
+      assert.equal(result.unselected, result.mutedForeground, `${theme} app / ${system} system ${id} unselected text stays muted`);
+      assert.equal(result.unselected, system === "light" ? "rgb(54, 54, 54)" : "rgb(178, 179, 181)");
+      const selected = await page.evaluate(() => ColorPickerDialog.exportSelection());
+      assert.equal(selected.type, checked ? "gradient" : "solid");
+      if (checked) assert.deepEqual(selected, initial.selection, "returning to gradient keeps ordered endpoint byte alpha");
+    }
+  }
+});
+
+test("Sidebar resizes from a compact viewport and shrinks after every collapse", options, async t => {
+  const {page, ready, send} = await open(t);
+  await page.setViewportSize({width: 340, height: 380});
+  await send({...init(ready, true, true), ui: {sidebar_open: false, palette: "basic"}});
+  const selection = await page.evaluate(() => ColorPickerDialog.exportSelection());
+  for (const [index, sidebarOpen] of [false, true, false, true, false].entries()) {
+    const width = sidebarOpen ? 510 : 340;
+    await page.waitForFunction(expected => messages.filter(message => message.command === "resize").at(-1)?.width === expected, width);
+    const size = await page.evaluate(() => messages.filter(message => message.command === "resize").at(-1));
+    assert.equal(size.height, 380);
+    await page.setViewportSize({width: size.width, height: size.height});
+    await page.waitForTimeout(100);
+    assert(await page.evaluate(() => {
+      const body = document.body.getBoundingClientRect();
+      const picker = document.querySelector(".right-panel").getBoundingClientRect();
+      return body.width === innerWidth && picker.right <= body.right && picker.bottom <= body.bottom;
+    }), "the host viewport contains the full picker");
+    const resizes = await count(page, "resize");
+    await page.waitForTimeout(100);
+    assert.equal(await count(page, "resize"), resizes, "fitting the host does not cause a resize loop");
+    assert.deepEqual(await page.evaluate(() => ColorPickerDialog.exportSelection()), selection);
+    if (index < 4) await page.locator("#paletteToggle").click();
+  }
+});
+
+test("Floating panel fits capabilities and wrapped translations without a resize feedback loop", options, async t => {
+  const strings = {Color: "A long translated color label", Gradient: "A long translated gradient label", Cancel: "A longer translated cancel action", OK: "A longer translated confirmation action",
+    "The current multi-color selection is kept until you choose a different color.": "A translated explanation that wraps across the compact floating panel and keeps the original multi-color selection until another color is chosen."};
+  for (const gradient of [false, true]) for (const alpha of [false, true]) {
+    const {page, ready, send} = await open(t, strings);
+    await page.setViewportSize({width: 550, height: 520});
+    await send({...init(ready, gradient, alpha), preserve_multi_color: true});
+    await page.waitForFunction(() => messages.some(message => message.command === "resize"));
+    const height = await page.evaluate(() => messages.filter(message => message.command === "resize").at(-1).height);
+    assert(height >= 300 && height <= 900);
+    assert.equal(height, await page.locator("body").evaluate(element => Math.ceil(element.getBoundingClientRect().height)));
+    assert(await page.evaluate(() => messages.findIndex(message => message.command === "initialized") < messages.findIndex(message => message.command === "resize")));
+    await page.setViewportSize({width: 550, height});
+    await page.waitForTimeout(100);
+    const resizes = await count(page, "resize");
+    await page.setViewportSize({width: 550, height: height + 100});
+    await page.waitForTimeout(100);
+    assert.equal(await count(page, "resize"), resizes, "extra viewport height never changes intrinsic content height");
+    const controls = await page.evaluate(() => {
+      const body = document.body.getBoundingClientRect();
+      return ["confirmBtn", "cancelBtn", ...(document.getElementById("alphaControls").classList.contains("hidden") ? [] : ["oValue"])].map(id => {
+        const rect = document.getElementById(id).getBoundingClientRect();
+        return rect.left >= body.left && rect.right <= body.right && rect.bottom <= body.bottom;
+      });
+    });
+    assert(controls.every(Boolean), "wrapped buttons and opacity fit inside the panel");
+    const edited = await page.evaluate(() => ColorPickerDialog.exportSelection());
+    await page.evaluate(() => {
+      document.getElementById("selectionNotice").textContent += " Additional wrapped text. ".repeat(15);
+    });
+    await page.waitForFunction(previous => messages.filter(message => message.command === "resize").length > previous, resizes);
+    assert.deepEqual(await page.evaluate(() => ColorPickerDialog.exportSelection()), edited, "content resize leaves the selection untouched");
+    // The compact layout now puts saved swatches to the right of both previews.
+    assert(await page.evaluate(() => {
+      const favorites = document.getElementById("userColors").getBoundingClientRect();
+      const preview = document.getElementById("colorPreview").getBoundingClientRect();
+      return favorites.left >= preview.right;
+    }), "favorites do not overlap the preview");
+    await page.locator("#confirmBtn").scrollIntoViewIfNeeded();
+    assert.equal(await page.locator("#confirmBtn").isVisible(), true);
+  }
+});
+
+test("Native focus hook waits for initialization and preserves active partial edits", options, async t => {
+  const {page, ready, send} = await open(t);
+  await page.evaluate(() => ColorPickerDialog.focusInput());
+  assert.notEqual(await page.evaluate(() => document.activeElement.id), "hexInput");
+  await send(init(ready, true, true));
+  await page.evaluate(() => ColorPickerDialog.focusInput());
+  assert.equal(await page.evaluate(() => document.activeElement.id), "hexInput");
+  await page.locator("#rValue").fill("");
+  const selection = await page.evaluate(() => ColorPickerDialog.exportSelection());
+  await page.evaluate(() => ColorPickerDialog.focusInput());
+  assert.equal(await page.evaluate(() => document.activeElement.id), "rValue");
+  assert.equal(await page.locator("#rValue").inputValue(), "");
+  assert.deepEqual(await page.evaluate(() => ColorPickerDialog.exportSelection()), selection);
+  assert.equal(await count(page, "confirm"), 0);
+  await page.locator("#rValue").press("Escape");
+  assert.equal(await count(page, "cancel"), 1);
+});

resources/web/dialog/ColorPickerDialog/colorpicker.js

@@ -0,0 +1,464 @@
+"use strict";
+(() => {
+  if (window.ORCA_COLOR_PICKER_LANGUAGE) document.documentElement.lang = window.ORCA_COLOR_PICKER_LANGUAGE;
+  const T = (key) => window.ORCA_UI_STRINGS?.[key] || key;
+  document.title = T("Color Picker");
+  for (const element of document.querySelectorAll("[data-i18n]")) element.textContent = T(element.dataset.i18n);
+  for (const attribute of ["aria-label", "title", "placeholder"])
+    for (const element of document.querySelectorAll(`[data-i18n-${attribute}]`))
+      element.setAttribute(attribute, T(element.getAttribute(`data-i18n-${attribute}`)));
+  function paletteName(name) {
+    const ral = name.match(/^(\d{4}) (.+)$/);
+    return ral ? `${ral[1]} ${T(ral[2])}` : /^%\d+$/.test(name) ? name : T(name);
+  }
+
+  const FAVORITE_SLOTS              = 16;
+  const SPECTRUM_FOLLOWS_SATURATION = true; // true: the spectrum is drawn at the current saturation, false: it always shows full saturation
+  const MULTI_COLOR_GRADIENTS       = true; // true: gradients may have more than 2 colors (− / + buttons and the multi-color palette entries), false: exactly 2 colors.
+                                            // up to the native limit the host sends as options.max_gradient_colors.
+  let   maxGradientColors           = 2;    // Stays 2 until init, and with a host that does not send a limit.
+
+  const model = window.ColorPickerModel;
+  const palettes = window.ColorPickerPalettes;
+  const byId = (id) => document.getElementById(id);
+  const canvas = byId("spectrum"), context = canvas.getContext("2d");
+  const paletteCombo = byId("paletteCombo"), palette = byId("palette"), preview = byId("colorPreview"), confirmBtn = byId("confirmBtn");
+  const modeSwitch = byId("modeSwitch"), satSlider = byId("satSlider"), opacitySlider = byId("opacitySlider");
+  const gradientBar = byId("gradientCtrlBar"), gradientStops = byId("gradientStops"), gradientAdd = byId("gradientAdd"), gradientRemove = byId("gradientRemove");
+  const hostGradientLimit = (options) => options.max_gradient_colors === undefined ? 2 : options.max_gradient_colors;
+  const originalPreview = byId("originalPreview"), palettePanel = byId("palettePanel"), paletteToggle = byId("paletteToggle");
+  const paletteSelect = byId("paletteSelect"), paletteFilter = byId("paletteFilter"), paletteSearchToggle = byId("paletteSearchToggle");
+  const rgbInputs = ["r", "g", "b"].map((name) => byId(name + "Value"));
+  const hslInputs = ["h", "s", "l"].map((name) => byId(name + "Value"));
+  const hexInput = byId("hexInput"), opacityInput = byId("oValue");
+  const pageId = Date.now().toString(36) + Math.random().toString(36).slice(2);
+  let state = model.createState(), favorites = [], initialized = false, favoritesWritable = true;
+  // The selection the dialog opened with; the original swatch shows it and restores it on click.
+  let originalSelection = model.exportSelection(state);
+  let lastContentHeight = 0, lastContentWidth = 0, resizePending = false;
+  // Last HSL shown or set. Kept while it still produces the current color: hue 360 and 0 are
+  // both red, and greys, black and white have no hue or saturation in RGB.
+  let hslMemory = [0, 0, 50];
+  function displayHsl(color) {
+    const rgb = model.hslToRgb(...hslMemory);
+    if (!rgb.every((value, index) => value === color[index])) hslMemory = model.rgbToHsl(...color.slice(0, 3));
+    return hslMemory;
+  }
+  // Copy of `values` with one entry replaced.
+  const replaced = (values, index, value) => values.map((current, i) => i === index ? value : current);
+  function setHslChannel(index, value) {
+    hslMemory = replaced(displayHsl(model.activeColor(state)), index, value);
+    model.setRgb(state, model.hslToRgb(...hslMemory));
+  }
+  const round1 = (value) => Math.round(value * 10) / 10;
+
+  function emit(command, data = {}) {
+    window.dispatchEvent(new CustomEvent("color-picker-message", {detail: {command, ...data}}));
+    if (window.wx && typeof window.wx.postMessage === "function")
+      window.wx.postMessage(JSON.stringify({command, page_id: pageId, ...data}));
+  }
+
+  function scheduleResize() {
+    if (!initialized || resizePending) return;
+    resizePending = true;
+    requestAnimationFrame(() => {
+      resizePending = false;
+      const rect = document.body.getBoundingClientRect();
+      const height = Math.min(900 , Math.max(300, Math.ceil(rect.height)));
+      const width  = Math.min(1200, Math.max(300, Math.ceil(rect.width )));
+      if (height !== lastContentHeight || width !== lastContentWidth) {
+        lastContentHeight = height; lastContentWidth = width;
+        emit("resize", {width, height});
+      }
+    });
+  }
+  new ResizeObserver(scheduleResize).observe(document.body);
+
+  function setSwatch(element, selection) {
+    element.style.setProperty("--swatch-color", model.selectionBackground(selection));
+  }
+
+  // `editing` is the control the user is typing in. Its text is left alone so the caret,
+  // partial input like "05" and fine steps that round-trip through bytes aren't overwritten.
+  function render(resetEditors = false, editing = null) {
+    const color = model.activeColor(state), hsl = displayHsl(color);
+    const show = (input, value) => {
+      if (input === editing) return;
+      if (resetEditors) input.setCustomValidity("");
+      if (resetEditors || input.checkValidity()) input.value = value;
+    };
+    show(hexInput, model.toHex(color).slice(1, state.options.allow_alpha ? 9 : 7));
+    rgbInputs.forEach((input, index) => show(input, color[index]));
+    // Shown in whole numbers; decimals can still be typed, and hslMemory keeps exact values.
+    hslInputs.forEach((input, index) => show(input, Math.round(hsl[index])));
+    // Percentage is a display only until explicitly edited. Never round it back
+    // into the alpha byte on endpoint switches, RGB edits, or confirmation.
+    show(opacityInput, Math.round(color[3] / 255 * 100));
+    if (opacitySlider !== editing) opacitySlider.value = color[3] / 255 * 100;
+    const rgb = color.slice(0, 3).join(",");
+    opacitySlider.style.setProperty("--track-gradient", `linear-gradient(to right, rgba(${rgb},0), rgb(${rgb}))`);
+    opacitySlider.style.setProperty("--thumb-color", `rgba(${rgb},${color[3] / 255})`);
+    if (satSlider !== editing) satSlider.value = hsl[1];
+    satSlider.style.setProperty("--track-gradient", `linear-gradient(to right, hsl(${hsl[0]},0%,${hsl[2]}%), hsl(${hsl[0]},100%,${hsl[2]}%))`);
+    satSlider.style.setProperty("--thumb-color", `hsl(${hsl[0]},${hsl[1]}%,${hsl[2]}%)`);
+    modeSwitch.checked = state.mode === "gradient";
+    const selection = model.exportSelection(state);
+    // Kept in the layout (visibility only) so the grid doesn't shift between Solid and Gradient.
+    gradientBar.classList.toggle("invisible", state.mode !== "gradient");
+    if (state.mode === "gradient") renderGradient(selection);
+    setSwatch(preview, selection);
+    preview.title = `${T("Save current color")}\n${selection.colors.join(" → ")}`;
+    if (SPECTRUM_FOLLOWS_SATURATION && hsl[1] !== spectrumSaturation) { spectrumSaturation = hsl[1]; paintSpectrum(); }
+    updateIndicator(hsl);
+    updateConfirm();
+  }
+
+  // One thumb per gradient color, evenly spaced; rebuilt only when the number of colors changes.
+  function renderGradient(selection) {
+    const count = selection.colors.length;
+    setSwatch(gradientStops.querySelector(".gradient-track"), selection);
+    let thumbs = [...gradientStops.querySelectorAll(".gradient-thumb")];
+    if (thumbs.length !== count) {
+      thumbs.forEach((thumb) => thumb.remove());
+      thumbs = selection.colors.map((_, index) => {
+        const thumb = document.createElement("button");
+        thumb.type = "button"; thumb.className = "gradient-thumb"; thumb.dataset.index = index;
+        thumb.style.setProperty("--stop", index / (count - 1));
+        thumb.setAttribute("aria-label", count === 2 ? T(index ? "Gradient end" : "Gradient start") : `${T("Gradient color")} ${index + 1}`);
+        gradientStops.appendChild(thumb);
+        return thumb;
+      });
+    }
+    thumbs.forEach((thumb, index) => {
+      thumb.style.setProperty("--thumb-color", selection.colors[index]);
+      thumb.setAttribute("aria-pressed", String(state.active === index));
+    });
+
+    const multi = maxGradientColors > 2; // −/+ buttons only exist when more than 2 colors are allowed; − also needs a color to spare.
+    gradientAdd.parentElement.classList.toggle("hidden", !multi);
+    gradientRemove.classList.toggle("hidden", !multi || count <= 2);
+    gradientAdd.classList.toggle("hidden", !multi);
+    // aria-disabled instead of disabled: a disabled button gets no hover, so its tooltip would never show.
+    const full = count >= maxGradientColors;
+    gradientAdd.setAttribute("aria-disabled", String(full));
+    gradientAdd.title = full ? T("Up to %d colors supported.").replace("%d", maxGradientColors) : T("Add color");
+  }
+
+  // Every editor the user can see; alpha only when this caller allows it.
+  function editors() {
+    const inputs = [hexInput, ...rgbInputs, ...hslInputs];
+    if (state.options.allow_alpha) inputs.push(opacityInput);
+    return inputs;
+  }
+  // OK stays disabled while any visible editor holds an invalid or incomplete value.
+  function updateConfirm() {
+    confirmBtn.disabled = !editors().every((input) => input.checkValidity());
+  }
+
+  // Matches the filter against the shown (translated) name, the English name and the hex digits.
+  function paletteMatches(entry, query) {
+    if (!query) return true;
+    const haystack = [paletteName(entry.name), entry.name, entry.hex || "", entry.grad || ""].join(" ").toLowerCase();
+    return query.split(/\s+/).every((word) => haystack.includes(word.replace(/^#/, "")));
+  }
+
+  function populatePalette() {
+    palette.replaceChildren();
+    const query = paletteSearchToggle.getAttribute("aria-pressed") === "true" ? paletteFilter.value.trim().toLowerCase() : "";
+    for (const entry of palettes[paletteCombo.value] || []) {
+      const selection = {type: entry.grad ? "gradient" : "solid", colors: entry.grad ? entry.grad.split("-") : [entry.hex]};
+      if (!model.normalizeSelection(selection, state.options, maxGradientColors) || !paletteMatches(entry, query)) continue;
+      const row    = document.createElement("button"); row.type = "button"; row.className = "color-item";
+      const swatch = document.createElement("span"); swatch.className = "color-swatch";
+      const name   = document.createElement("span"); name.className = "color-name"; name.textContent = paletteName(entry.name);
+      setSwatch(swatch, model.normalizeSelection(selection, {allow_gradient: true, allow_alpha: true}, maxGradientColors));
+      row.append(swatch, name); row.title = paletteName(entry.name);
+      row.addEventListener("click", () => {
+        // Solid palette colors edit the active endpoint while gradient mode is on.
+        const changed = entry.grad ? model.applySelection(state, selection) : model.setHex(state, entry.hex);
+        if (changed) render(true);
+      });
+      palette.appendChild(row);
+    }
+    byId("paletteEmpty").classList.toggle("hidden", palette.childElementCount > 0);
+    palette.classList.toggle("hidden", palette.childElementCount === 0);
+  }
+
+  // Sidebar state the host keeps in the app config: open/closed and the chosen palette.
+  const uiState = () => ({sidebar_open: palettePanel.classList.contains("open"), palette: paletteCombo.value});
+  function setSidebarOpen(open) {
+    palettePanel.classList.toggle("open", open);
+    paletteToggle.setAttribute("aria-expanded", String(open));
+  }
+  // The search button swaps the combo box for a filter box; closing it clears the filter.
+  function setPaletteSearch(open) {
+    paletteSearchToggle.setAttribute("aria-pressed", String(open));
+    paletteSelect.classList.toggle("hidden", open);
+    paletteFilter.classList.toggle("hidden", !open);
+    if (open) paletteFilter.focus();
+    else paletteFilter.value = "";
+    populatePalette();
+  }
+
+  function drawFavorites() {
+    const grid = byId("userColors"); grid.replaceChildren();
+    // Favorites keep every color, but only those this page can select are shown.
+    const visible = favorites.filter((favorite) => model.normalizeSelection(favorite, {...state.options, allow_alpha: true}, maxGradientColors));
+    for (let index = 0; index < FAVORITE_SLOTS; ++index) {
+      const swatch = document.createElement("button"); swatch.type = "button"; swatch.className = "saved-swatch";
+      const favorite = visible[index];
+      if (favorite) {
+        setSwatch(swatch, favorite); swatch.title = favorite.colors.join(" → ");
+        swatch.addEventListener("click", () => { if (model.applySelection(state, favorite)) render(true); });
+      } else { swatch.classList.add("empty"); swatch.disabled = true; }
+      grid.appendChild(swatch);
+    }
+  }
+
+  function init(payload) {
+    if (!payload || typeof payload !== "object" || (payload.options !== undefined && (!payload.options || typeof payload.options !== "object"))) return false;
+    maxGradientColors = Math.min(MULTI_COLOR_GRADIENTS ? model.MAX_GRADIENT_COLORS : 2, hostGradientLimit(payload.options || {}));
+    // A gradient the host allows but this page does not (switch off) opens as its first color, like
+    // other multi-color selections the picker cannot edit; OK then replaces it, Cancel keeps it.
+    let selection = payload.selection, preserve = payload.preserve_multi_color === true;
+    if (selection?.type === "gradient" && selection.colors?.length > maxGradientColors) {
+      selection = {type: "solid", colors: [selection.colors[0]]};
+      preserve = true;
+    }
+    const next = model.createState({...payload.options, max_gradient_colors: maxGradientColors}, selection);
+    if (!next) return false;
+    byId("selectionNotice").hidden = !preserve;
+    state = next; favorites = model.normalizeFavorites(payload.favorites || []);
+    originalSelection = model.exportSelection(state);
+    setSwatch(originalPreview, originalSelection);
+    originalPreview.title = `${T("Original color")}\n${originalSelection.colors.join(" → ")}`;
+    favoritesWritable = payload.favorites_writable !== false;
+    preview.disabled = !favoritesWritable;
+    byId("modeControls").classList.toggle("hidden", !state.options.allow_gradient);
+    for (const option of paletteCombo.options) option.hidden = option.value === "gradient" && !state.options.allow_gradient;
+    const ui = payload.ui || {}; // Restore the sidebar the way it was left; a palette this caller can't use falls back to basic.
+    const saved = [...paletteCombo.options].find((option) => option.value === ui.palette && !option.hidden);
+    if (saved) paletteCombo.value = saved.value;
+    if (!state.options.allow_gradient && paletteCombo.value === "gradient") paletteCombo.value = "basic";
+    setSidebarOpen(ui.sidebar_open === true);
+    byId("alphaControls").classList.toggle("hidden", !state.options.allow_alpha);
+    hexInput.maxLength = state.options.allow_alpha ? 9 : 7;
+    populatePalette(); drawFavorites(); render(true);
+    initialized = true;
+    byId("pickerEditors").disabled = false;
+    return true;
+  }
+
+  function focusInput() {
+    if (!initialized) return;
+    // Restore initial keyboard focus without replacing an editor's in-progress input.
+    const active = document.activeElement;
+    if (!active || active === document.body || active === document.documentElement)
+      hexInput.focus({preventScroll: true});
+  }
+
+  function handleMessage(payload) {
+    if (!payload || typeof payload !== "object" || payload.page_id !== pageId) return false;
+    if (payload.command === "init") {
+      const options = payload.options;
+      const hostLimit = options && hostGradientLimit(options);
+      if (!options || typeof options.allow_gradient !== "boolean" || typeof options.allow_alpha !== "boolean" ||
+          !Number.isInteger(hostLimit) || hostLimit < 2 || hostLimit > model.MAX_GRADIENT_COLORS ||
+          !model.normalizeSelection(payload.selection, options, hostLimit) || !validFavorites(payload.favorites) ||
+          (payload.favorites_writable !== undefined && typeof payload.favorites_writable !== "boolean") ||
+          (payload.preserve_multi_color !== undefined && typeof payload.preserve_multi_color !== "boolean") ||
+          (payload.ui !== undefined && (!payload.ui || typeof payload.ui !== "object" ||
+            (payload.ui.sidebar_open !== undefined && typeof payload.ui.sidebar_open !== "boolean") ||
+            (payload.ui.palette !== undefined && typeof payload.ui.palette !== "string")))) return false;
+      if (initialized) return true;
+      if (!init(payload)) return false;
+      emit("initialized");
+      scheduleResize();
+      return true;
+    }
+    if (payload.command === "favorites" && initialized && validFavorites(payload.favorites)) {
+      favorites = model.normalizeFavorites(payload.favorites); drawFavorites(); return true;
+    }
+    return false;
+  }
+
+  function validFavorites(values) {
+    return Array.isArray(values) && values.length <= 24 && values.every((value) => model.normalizeSelection(value, {allow_gradient: true, allow_alpha: true}, model.MAX_GRADIENT_COLORS));
+  }
+
+  // Saturation the spectrum is currently painted at (always 100 when the option is off).
+  let spectrumSaturation = 100;
+  function drawSpectrum() {
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = Math.max(1, Math.round(rect.width)); canvas.height = Math.max(1, Math.round(rect.height));
+    paintSpectrum();
+  }
+  function paintSpectrum() {
+    const hue = context.createLinearGradient(0, 0, canvas.width, 0);
+    for (let i = 0; i <= 6; ++i) hue.addColorStop(i / 6, `hsl(${i * 60},100%,50%)`);
+    context.fillStyle = hue; context.fillRect(0, 0, canvas.width, canvas.height);
+    const shade = context.createLinearGradient(0, 0, 0, canvas.height);
+    shade.addColorStop(0, "#FFFFFF"); shade.addColorStop(0.5, "#FFFFFF00"); shade.addColorStop(0.5, "#00000000"); shade.addColorStop(1, "#000000");
+    context.fillStyle = shade; context.fillRect(0, 0, canvas.width, canvas.height);
+    // HSL desaturation blends each color toward the grey of the same lightness, and on this
+    // canvas that grey only depends on the row (white at the top, black at the bottom).
+    if (spectrumSaturation < 100) {
+      const grey = context.createLinearGradient(0, 0, 0, canvas.height);
+      grey.addColorStop(0, "#FFFFFF"); grey.addColorStop(1, "#000000");
+      context.globalAlpha = 1 - spectrumSaturation / 100;
+      context.fillStyle = grey; context.fillRect(0, 0, canvas.width, canvas.height);
+      context.globalAlpha = 1;
+    }
+  }
+
+  const indicator = byId("colorIndicator");
+  function updateIndicator(hsl) {
+    indicator.style.left = hsl[0] / 360 * (canvas.width - 1) + "px";
+    indicator.style.top = (1 - hsl[2] / 100) * (canvas.height - 1) + "px";
+  }
+
+  // Spectrum position maps straight to hue (x, 0..360) and lightness (y, 100..0); saturation is
+  // the third dimension and comes from the slider below. hslMemory keeps these exact values,
+  // including hue 360 at the right edge and the hue of the white and black corners.
+  function sampleSpectrum(event) {
+    const rect = canvas.getBoundingClientRect();
+    const fraction = (client, start, size, pixels) =>
+      Math.max(0, Math.min(pixels - 1, Math.floor((client - start) * pixels / size))) / Math.max(1, pixels - 1);
+    const saturation = displayHsl(model.activeColor(state))[1];
+    hslMemory = [round1(fraction(event.clientX, rect.left, rect.width, canvas.width) * 360), saturation,
+                 round1((1 - fraction(event.clientY, rect.top, rect.height, canvas.height)) * 100)];
+    model.setRgb(state, model.hslToRgb(...hslMemory));
+    // A pick replaces every editor's value, so clear any invalid state left from typing.
+    render(true);
+  }
+
+  const clamp = (control, value) => Math.min(Number(control.max), Math.max(Number(control.min), value));
+  function bindValue(control, apply) {
+    // Number fields are required, so an empty field is invalid; a range input always has a value.
+    if (control.type === "number") control.required = true;
+    const commit = (value) => { apply(value); render(false, control); };
+    control.addEventListener("input", () => {
+      control.setCustomValidity("");
+      // Out-of-range numbers snap to the field's min/max instead of becoming invalid.
+      if (control.value !== "") {
+        const clamped = clamp(control, Number(control.value));
+        if (clamped !== Number(control.value)) control.value = clamped;
+      }
+      if (control.checkValidity()) commit(Number(control.value));
+    });
+    control.addEventListener("wheel", (event) => {
+      event.preventDefault();
+      const step = control.type === "range" ? 5 : 1;
+      control.value = clamp(control, (Number(control.value) || 0) + (event.deltaY > 0 ? -step : step));
+      control.setCustomValidity("");
+      commit(Number(control.value));
+    }, {passive: false});
+    // Normalize the text (e.g. "05" → "5") once the user leaves the field.
+    control.addEventListener("blur", () => { if (control.checkValidity()) render(); });
+  }
+
+  rgbInputs.forEach((input, index) => bindValue(input, (value) => model.setRgb(state, replaced(model.activeColor(state).slice(0, 3), index, value))));
+  hslInputs.forEach((input, index) => bindValue(input, (value) => setHslChannel(index, value)));
+  bindValue(satSlider, (value) => setHslChannel(1, value));
+  bindValue(opacityInput, (value) => model.setAlphaPercent(state, value));
+  bindValue(opacitySlider, (value) => model.setAlphaPercent(state, value));
+  // The opacity slider takes the gradient bar's row while the opacity field or the slider is in
+  // use: it opens when the field is clicked or focused, and closes on a click or focus elsewhere.
+  const thirdRow = byId("thirdRow"), alphaControls = byId("alphaControls");
+  const inOpacityControls = (target) => target instanceof Element && target.closest("#alphaControls, #opacitySliderBar");
+  const setOpacitySliderOpen = (open) => thirdRow.classList.toggle("opacity-open", open);
+  for (const type of ["focusin", "click"]) alphaControls.addEventListener(type, () => setOpacitySliderOpen(true));
+  for (const type of ["pointerdown", "focusin"])
+    document.addEventListener(type, (event) => { if (!inOpacityControls(event.target)) setOpacitySliderOpen(false); });
+  hexInput.addEventListener("input", () => {
+    const text = hexInput.value;
+    const valid = model.setHex(state, text.startsWith("#") ? text : "#" + text);
+    hexInput.setCustomValidity(valid ? "" : T("Enter a complete hexadecimal color"));
+    // render() leaves the typed text alone, so alpha isn't appended after the sixth digit.
+    if (valid) render(false, hexInput);
+  });
+  hexInput.addEventListener("blur", () => { if (hexInput.checkValidity()) render(); });
+  modeSwitch.addEventListener("change", () => {
+
+    setOpacitySliderOpen(false); // Close the opacity slider before the row changes, so it doesn't linger over the gradient bar.
+    model.setMode(state, modeSwitch.checked ? "gradient" : "solid");
+    render(true);
+  });
+  // Click on the track selects the nearest thumb. Keyboard users tab to a thumb and press Enter or Space.
+  gradientStops.addEventListener("click", (event) => {
+    if (state.mode !== "gradient") return;
+    // A thumb is read from its index: a keyboard-triggered click has no pointer position.
+    const thumb = event.target.closest(".gradient-thumb"), rect = gradientStops.getBoundingClientRect();
+    const last = state.gradient.length - 1;
+    // Thumbs sit at 10px + (width - 20px) * i / last, matching the CSS.
+    const fraction = Math.max(0, Math.min(1, (event.clientX - rect.left - 10) / Math.max(1, rect.width - 20)));
+    const index = thumb ? Number(thumb.dataset.index) : Math.round(fraction * last);
+    if (index !== state.active) { state.active = index; render(true); }
+  });
+  gradientAdd.addEventListener("click", () => { if (gradientAdd.getAttribute("aria-disabled") !== "true" && model.addGradientColor(state)) render(true); });
+  gradientRemove.addEventListener("click", () => { if (model.removeGradientColor(state)) render(true); });
+  originalPreview.addEventListener("click", () => { if (model.applySelection(state, originalSelection)) render(true); });
+  paletteToggle.addEventListener("click", () => {
+    setSidebarOpen(!palettePanel.classList.contains("open"));
+    if (initialized) emit("update_ui", uiState());
+  });
+  paletteCombo.addEventListener("change", () => {
+    populatePalette();
+    if (initialized) emit("update_ui", uiState());
+  });
+  paletteSearchToggle.addEventListener("click", () => setPaletteSearch(paletteSearchToggle.getAttribute("aria-pressed") !== "true"));
+  paletteFilter.addEventListener("input", populatePalette);
+  // Pointer capture ends by itself on pointerup/pointercancel, so it doubles as the drag state.
+  canvas.addEventListener("pointerdown", (event) => { canvas.setPointerCapture(event.pointerId); sampleSpectrum(event); });
+  canvas.addEventListener("pointermove", (event) => { if (canvas.hasPointerCapture(event.pointerId)) sampleSpectrum(event); });
+  // The spectrum takes the panel's free height, which also changes with the notice, alpha and
+  // gradient controls, so redraw on any size change rather than on window resize only.
+  new ResizeObserver(() => { drawSpectrum(); updateIndicator(displayHsl(model.activeColor(state))); }).observe(canvas.parentElement);
+  // Bubble phase on document runs after each editor's own handler has set its validity.
+  document.addEventListener("input", updateConfirm);
+  // Hex keeps its own message from its input handler; number fields get a translated one.
+  function validateEditors() {
+    const inputs = editors();
+    for (const input of inputs.filter((input) => input !== hexInput)) {
+      input.setCustomValidity("");
+      const {valid, rangeUnderflow, rangeOverflow} = input.validity;
+      if (!valid) input.setCustomValidity(T(rangeUnderflow || rangeOverflow ? "Value is out of range." : "Invalid input"));
+    }
+    return inputs.every((input) => input.reportValidity());
+  }
+  function confirm() {
+    if (initialized && validateEditors()) emit("confirm", {selection: model.exportSelection(state)});
+  }
+  preview.addEventListener("click", () => {
+    if (!initialized || !favoritesWritable || !validateEditors()) return;
+    const selection = model.exportSelection(state);
+    const key = JSON.stringify(selection);
+    favorites = [selection, ...favorites.filter((favorite) => JSON.stringify(favorite) !== key)].slice(0, FAVORITE_SLOTS);
+    drawFavorites(); emit("update_favorites", {favorites});
+  });
+  confirmBtn.addEventListener("click", confirm);
+  byId("cancelBtn").addEventListener("click", () => emit("cancel"));
+  document.addEventListener("keydown", (event) => {
+    // Escape in the filter box closes the search first; a second Escape cancels the dialog.
+    if (event.key === "Escape" && event.target === paletteFilter) { event.preventDefault(); setPaletteSearch(false); paletteSearchToggle.focus(); }
+    else if (event.key === "Escape") { event.preventDefault(); emit("cancel"); }
+    else if (event.key === "Enter" && event.target instanceof HTMLInputElement && ["text", "number"].includes(event.target.type)) {
+      event.preventDefault(); confirm();
+    }
+  });
+
+  window.ColorPickerDialog = {
+    init, handleMessage, focusInput, exportSelection: () => model.exportSelection(state),
+    setFavorites: (values) => { favorites = model.normalizeFavorites(values); drawFavorites(); }
+  };
+  // The host passes the saved sidebar state before the page loads (the same values come again in
+  // init), so the first paint already matches the window size the host opened with.
+  const earlyUi = window.ORCA_COLOR_PICKER_UI;
+  if (earlyUi && typeof earlyUi === "object") {
+    if (typeof earlyUi.palette === "string" && [...paletteCombo.options].some((option) => option.value === earlyUi.palette))
+      paletteCombo.value = earlyUi.palette;
+    if (typeof earlyUi.sidebar_open === "boolean") setSidebarOpen(earlyUi.sidebar_open);
+  }
+  setSwatch(originalPreview, originalSelection);
+  drawSpectrum(); populatePalette(); drawFavorites(); render(true); emit("ready");
+})();

resources/web/dialog/ColorPickerDialog/colorpicker.test.js

@@ -0,0 +1,103 @@
+"use strict";
+const {test} = require("node:test");
+const assert = require("node:assert/strict");
+const model = require("./colorpicker-model.js");
+
+test("complete RGB/RGBA hex accepts mixed case and rejects partial or unbounded input", () => {
+  assert.deepEqual(model.parseHex("#Ab12cD80"), [171,18,205,128]);
+  for (const hex of ["", "123456", "#123", "#1234567", "#123456789", "#12345Z", "#123456GG", " #123456", null]) assert.equal(model.parseHex(hex), null);
+  for (let byte = 0; byte <= 255; ++byte) {
+    const hex = model.toHex([byte, byte, byte, byte]);
+    assert.deepEqual(model.parseHex(hex), [byte,byte,byte,byte]);
+  }
+});
+
+test("HSL conversion preserves primary channels and hue wraps at 360", () => {
+  for (const rgb of [[255,0,0], [0,255,0], [0,0,255], [128,128,128], [37,129,240]]) assert.deepEqual(model.hslToRgb(...model.rgbToHsl(...rgb)), rgb);
+  assert.deepEqual(model.hslToRgb(360,100,50), [255,0,0]);
+  assert.deepEqual(model.hslToRgb(240,100,50), [0,0,255]);
+});
+
+test("capabilities default off and reject gradient through every model entry", () => {
+  const gradient = {type: "gradient", colors: ["#FF000080", "#0000FF20"]};
+  const state = model.createState();
+  assert.deepEqual(state.options, {allow_gradient: false, allow_alpha: false});
+  assert.equal(model.createState({}, gradient), null);
+  assert.equal(model.applySelection(state, gradient), false);
+  assert.equal(model.setMode(state, "gradient"), false);
+  assert.equal(model.setAlphaPercent(state, 20), false);
+  assert.equal(model.createState({allow_alpha: true}, gradient), null);
+  const opaque = model.createState({allow_gradient: true}, gradient);
+  assert.deepEqual(model.exportSelection(opaque), {type: "gradient", colors: ["#FF0000FF", "#0000FFFF"]});
+});
+
+test("gradient endpoint edits keep order and preserve unedited byte alpha", () => {
+  const initial = {type: "gradient", colors: ["#FF000001", "#0000FF80"]};
+  const state = model.createState({allow_gradient: true, allow_alpha: true}, initial);
+  state.active = 0; model.setRgb(state, [0,255,0]);
+  state.active = 1; model.setHex(state, "#112233");
+  assert.deepEqual(model.exportSelection(state), {type: "gradient", colors: ["#00FF0001", "#11223380"]});
+  model.setAlphaPercent(state, 0);
+  assert.deepEqual(model.exportSelection(state).colors, ["#00FF0001", "#11223300"]);
+  model.setAlphaPercent(state, 100);
+  assert.equal(model.exportSelection(state).colors[1], "#112233FF");
+  assert.deepEqual(initial.colors, ["#FF000001", "#0000FF80"]);
+});
+
+test("favorites retain alpha and gradient even when the selection disables them", () => {
+  const favorite = {type: "solid", colors: ["#ABCDEF80"]};
+  const gradient = {type: "gradient", colors: ["#FFFFFF00", "#00000010"]};
+  const favorites = model.normalizeFavorites([favorite, gradient]);
+  const state = model.createState();
+  assert.equal(model.applySelection(state, favorites[0]), true);
+  assert.deepEqual(model.exportSelection(state), {type: "solid", colors: ["#ABCDEFFF"]});
+  assert.deepEqual(favorites, [favorite, gradient]);
+  assert.equal(model.applySelection(state, favorites[1]), false);
+  assert.equal(model.normalizeFavorites(Array(25).fill(favorite)).length, 24);
+});
+
+test("invalid cardinality and channel edits cannot change a selection", () => {
+  const state = model.createState({allow_alpha: true});
+  const before = model.exportSelection(state);
+  for (const value of [{type: "solid", colors: []}, {type: "solid", colors: ["#112233", "#445566"]}, {type: "gradient", colors: ["#112233"]}, {type: "other", colors: ["#112233"]}]) assert.equal(model.applySelection(state, value), false);
+  assert.equal(model.setHex(state, "#GG2233"), false);
+  for (const value of [-1, 101, NaN, Infinity]) assert.equal(model.setAlphaPercent(state, value), false);
+  assert.equal(model.setRgb(state, [256,0,0]), false);
+  assert.deepEqual(model.exportSelection(state), before);
+});
+
+test("multi-color gradients stay at 2 colors unless the caller raises the limit", () => {
+  const five = {type: "gradient", colors: ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF"]};
+  assert.equal(model.normalizeSelection(five, {allow_gradient: true}), null);
+  assert.equal(model.createState({allow_gradient: true}, five), null);
+  const state = model.createState({allow_gradient: true, max_gradient_colors: 7}, five);
+  assert.equal(state.gradient.length, 5);
+  assert.equal(model.normalizeSelection({...five, colors: Array(8).fill("#000000")}, {allow_gradient: true}, 7), null);
+  assert.equal(model.createState({allow_gradient: true, max_gradient_colors: 99}).maxGradientColors, model.MAX_GRADIENT_COLORS);
+  assert.equal(model.normalizeFavorites([five]).length, 1, "favorites keep every color");
+});
+
+test("adding and removing gradient colors keeps order, selection and the 2..max limits", () => {
+  const state = model.createState({allow_gradient: true, allow_alpha: true, max_gradient_colors: 4}, {type: "gradient", colors: ["#FF000080", "#0000FFFF"]});
+  assert.equal(model.removeGradientColor(state), false, "never fewer than 2");
+  assert.equal(model.addGradientColor(state), true);
+  assert.deepEqual(model.exportSelection(state).colors, ["#FF000080", "#BFFF0080", "#0000FFFF"], "selected color turned 75° in hue, alpha kept");
+  assert.equal(model.NEW_GRADIENT_HUE_SHIFT, 75);
+  assert.equal(state.active, 1);
+  state.active = 2; assert.equal(model.addGradientColor(state), true);
+  assert.equal(state.active, 3); assert.equal(state.gradient.length, 4);
+  assert.equal(model.addGradientColor(state), false, "limit reached");
+  state.active = 1; assert.equal(model.removeGradientColor(state), true);
+  assert.deepEqual(model.exportSelection(state).colors.slice(0, 2), ["#FF000080", "#0000FFFF"]);
+  assert.equal(state.active, 1);
+  assert.equal(model.applySelection(state, {type: "gradient", colors: ["#111111", "#222222"]}), true);
+  state.active = 1; model.addGradientColor(state); model.addGradientColor(state);
+  model.applySelection(state, {type: "gradient", colors: ["#111111", "#222222"]});
+  assert.equal(state.active, 1, "a shorter gradient clamps the selected color");
+});
+
+test("a new gradient starts at the solid color and its 75° hue neighbour", () => {
+  const state = model.createState({allow_gradient: true, allow_alpha: true}, {type: "solid", colors: ["#FF000080"]});
+  assert.equal(model.setMode(state, "gradient"), true);
+  assert.deepEqual(model.exportSelection(state).colors, ["#FF000080", "#BFFF0080"]);
+});

resources/web/dialog/ColorPickerDialog/index.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en" data-orca-page="color-picker">
+<head><title data-i18n="Color Picker">Color Picker</title>
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="../../include/global.css">
+<link rel="stylesheet" href="../css/theme.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<p id="selectionNotice" hidden data-i18n="The current multi-color selection is kept until you choose a different color.">The current multi-color selection is kept until you choose a different color.</p>
+<fieldset id="pickerEditors" disabled>
+<div class="main-wrapper">
+
+  <div class="left-panel" id="palettePanel">
+    <div class="palette thin-scroll" id="palette" tabindex="-1"></div>
+    <p class="palette-empty hidden" id="paletteEmpty" data-i18n="No matching colors">No matching colors</p>
+    <div class="palette-toolbar">
+      <div class="palette-select ComboBox" id="paletteSelect">
+        <div class="arrow-icon"></div>
+        <select id="paletteCombo" tabindex="-1">
+          <option value="basic"           data-i18n="Basic Colors">Basic Colors</option>
+          <option value="orca"            data-i18n="Orca Palette">Orca Palette</option>
+          <option value="ral"             data-i18n="RAL Classic" >RAL Classic</option>
+          <option value="gradient" hidden data-i18n="Gradients"   >Gradients</option>
+        </select>
+      </div>
+      <input type="search" id="paletteFilter" class="palette-filter hidden" autocomplete="off" spellcheck="false"
+             placeholder="Filter colors" data-i18n-placeholder="Filter colors" aria-label="Filter colors" data-i18n-aria-label="Filter colors">
+      <button type="button" id="paletteSearchToggle" class="palette-search-button" aria-pressed="false" title="Search colors" data-i18n-title="Search colors">
+        <div class="icon-search icon16"></div>
+        <div class="icon-close icon16"></div>
+      </button>
+    </div>
+  </div>
+
+  <div class="right-panel">
+    <div class="spectrum-row">
+      <div class="saturation-slider">
+        <input class="valueSlider" type="range" id="satSlider" min="0" max="100" step="0.1" tabindex="-1" aria-label="Saturation" data-i18n-aria-label="Saturation">
+      </div>
+      <div class="spectrum-container">
+        <canvas id="spectrum"></canvas>
+        <div id="colorIndicator"></div>
+      </div>
+    </div>
+    <div class="editor-grid">
+      <div class="editor-column">
+        <div id="modeControls" class="hidden">
+          <input class="switch-check" type="checkbox" id="modeSwitch">
+          <label class="switch-slider" for="modeSwitch">
+            <div class="switch-label" data-i18n="Solid">Solid</div>
+            <div class="switch-label" data-i18n="Gradient">Gradient</div>
+          </label>
+        </div>
+
+        <div class="hex-row">
+          <div class="inline-field field-hex">
+            <label for="hexInput">#</label>
+            <input type="text" id="hexInput" required value="808080" maxlength="8" autocomplete="off" spellcheck="false" aria-label="Hex color" data-i18n-aria-label="Hex color">
+          </div>
+          <div class="inline-field value-field hidden" id="alphaControls" title="Opacity percent">
+            <label for="oValue">
+              <svg viewBox="0 0 12 12" width="12" height="12">
+                 <path d="M0,1v10c0,.55.45,1,1,1h10c.55,0,1-.45,1-1V1c0-.55-.45-1-1-1H1C.45,0,0,.45,0,1ZM6,6v5H1v-5h5V1h5v5h-5Z" style="fill:#999"/>
+              </svg>
+            </label>
+            <input type="number" id="oValue" min="0" max="100" aria-label="Opacity percent" data-i18n-aria-label="Opacity percent">
+          </div>
+        </div>
+
+        <!-- Third row: gradient endpoints, replaced by the opacity slider while the opacity field is in use. -->
+        <div id="thirdRow" class="third-row">
+          <!-- Gradient colors: evenly spaced thumbs (built by colorpicker.js); a click selects the nearest. -->
+          <div id="gradientCtrlBar" class="invisible" role="group" aria-label="Gradient" data-i18n-aria-label="Gradient">
+            <div id="gradientStops" class="gradient-stops">
+              <div class="gradient-track"></div>
+            </div>
+            <div class="gradient-step-buttons hidden">
+              <button type="button" id="gradientRemove" class="gradient-step-button hidden" title="Remove color" data-i18n-title="Remove color">
+                <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"><rect x="0" y="4" width="10" height="2" fill="currentColor"/></svg>
+              </button>
+              <button type="button" id="gradientAdd" class="gradient-step-button hidden" title="Add color" data-i18n-title="Add color">
+                <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"><rect x="0" y="4" width="10" height="2" fill="currentColor"/><rect x="4" y="0" width="2" height="10" fill="currentColor"/></svg>
+              </button>
+            </div>
+          </div>
+          <div id="opacitySliderBar" hidden>
+            <input class="valueSlider" type="range" id="opacitySlider" min="0" max="100" step="0.1" tabindex="-1" aria-label="Opacity" data-i18n-aria-label="Opacity">
+          </div>
+        </div>
+      </div>
+      <div class="editor-column">
+        <div class="inline-field value-field" title="Hue">
+          <label for="hValue">H</label>
+          <input type="number" id="hValue" min="0" max="360" step="1">
+        </div>
+        <div class="inline-field value-field" title="Saturation">
+          <label for="sValue">S</label>
+          <input type="number" id="sValue" min="0" max="100" step="1">
+        </div>
+        <div class="inline-field value-field" title="Lightness">
+          <label for="lValue">L</label>
+          <input type="number" id="lValue" min="0" max="100" step="1">
+        </div>
+      </div>
+      <div class="editor-column">
+        <div class="inline-field value-field" title="Red">
+          <label for="rValue">R</label>
+          <input type="number" id="rValue" min="0" max="255" step="1">
+        </div>
+        <div class="inline-field value-field" title="Green">
+          <label for="gValue">G</label>
+          <input type="number" id="gValue" min="0" max="255" step="1">
+        </div>
+        <div class="inline-field value-field" title="Blue">
+          <label for="bValue">B</label>
+          <input type="number" id="bValue" min="0" max="255" step="1">
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom-container">
+      <button id="originalPreview" type="button" class="color-preview original-preview"  title="Original color" data-i18n-title="Original color">
+        <svg viewBox="0 0 24 24" width="24" height="24">
+          <circle cx="11.5" cy="11.5" r="11.5" style="fill:#ff6f00;"/>
+          <g style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;">
+            <polyline points="5.5 5.5 5.5 9.5 9.5 9.5" />
+            <path d="M5.84,9.5c.82-2.33,3.05-4,5.66-4,3.31,0,6,2.69,6,6s-2.69,6-6,6c-2.95,0-5.41-2.13-5.91-4.94"/>
+          </g>
+        </svg>
+      </button>
+      <button id="colorPreview" class="color-preview" title="Save current color" data-i18n-title="Save current color">
+        <svg viewBox="0 0 24 24" width="24" height="24">
+          <circle cx="11.5" cy="11.5" r="11.5" style="fill:#009688"/>
+          <path d="M11.85,5.11l1.43,4.39h4.61c.35,0,.5.45.22.66l-3.73,2.71,1.43,4.39c.11.34-.28.62-.56.41l-3.73-2.71-3.73,2.71c-.29.21-.67-.07-.56-.41l1.43-4.39-3.73-2.71c-.29-.21-.14-.66.22-.66h4.61s1.43-4.39,1.43-4.39c.11-.34.59-.34.7,0Z" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round;"/>
+        </svg>
+      </button>
+      <div class="saved-grid" id="userColors"></div>
+    </div>
+
+    <div class="dialog-actions">
+      <button type="button" id="paletteToggle" class="icon-button" aria-expanded="false" aria-controls="palettePanel" title="Palettes" data-i18n-title="Palettes">
+        <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><rect x="1.5" y="2.5" width="13" height="11" rx="2" fill="none" stroke="currentColor"/><path d="M5.5 2.5v11" stroke="currentColor"/></svg>
+      </button>
+      <div class="stretch-spacer"></div>
+      <button id="confirmBtn" class="ButtonTypeChoice ButtonStyleConfirm" data-i18n="OK">OK</button>
+      <button id="cancelBtn"  class="ButtonTypeChoice ButtonStyleRegular" data-i18n="Cancel">Cancel</button>
+    </div>
+  </div>
+</div>
+</fieldset>
+<script src="palettes.js"></script><script src="colorpicker-model.js"></script><script src="colorpicker.js"></script></body></html>

resources/web/dialog/ColorPickerDialog/palettes.js

@@ -0,0 +1,459 @@
+"use strict";
+(() => {
+const cssColors = [
+  {hex: "#FF0000", name: "Red"},
+  {hex: "#DC143C", name: "Crimson"},
+  {hex: "#FF4500", name: "Orange red"},
+  {hex: "#FF6347", name: "Tomato"},
+  {hex: "#FFA500", name: "Orange"},
+  {hex: "#FF8C00", name: "Dark orange"},
+  {hex: "#FFD700", name: "Gold"},
+  {hex: "#DEB887", name: "Burly wood"},
+  {hex: "#FFE4C4", name: "Bisque"},
+  {hex: "#FFE4E1", name: "Misty rose"},
+  {hex: "#FFFF00", name: "Yellow"},
+  {hex: "#FFFFE0", name: "Light yellow"},
+  {hex: "#FFFACD", name: "Lemon chiffon"},
+  {hex: "#F5F5DC", name: "Beige"},
+  {hex: "#FAFAD2", name: "Light golden rod yellow"},
+  {hex: "#EEE8AA", name: "Pale golden rod"},
+  {hex: "#F0E68C", name: "Khaki"},
+  {hex: "#BDB76B", name: "Dark khaki"},
+  {hex: "#FFDAB9", name: "Peach puff"},
+  {hex: "#FFE4B5", name: "Moccasin"},
+  {hex: "#FFEFD5", name: "Papaya whip"},
+  {hex: "#FFEBCD", name: "Blanched almond"},
+  {hex: "#FAEBD7", name: "Antique white"},
+  {hex: "#FFDEAD", name: "Navajo white"},
+  {hex: "#F5DEB3", name: "Wheat"},
+  {hex: "#DAA520", name: "Golden rod"},
+  {hex: "#D2691E", name: "Chocolate"},
+  {hex: "#CD853F", name: "Peru"},
+  {hex: "#B22222", name: "Fire brick"},
+  {hex: "#A0522D", name: "Sienna"},
+  {hex: "#8B4513", name: "Saddle brown"},
+  {hex: "#A52A2A", name: "Brown"},
+  {hex: "#BC8F8F", name: "Rosy brown"},
+  {hex: "#FA8072", name: "Salmon"},
+  {hex: "#FFA07A", name: "Light salmon"},
+  {hex: "#E9967A", name: "Dark salmon"},
+  {hex: "#F4A460", name: "Sandy brown"},
+  {hex: "#FF7F50", name: "Coral"},
+  {hex: "#F08080", name: "Light coral"},
+  {hex: "#CD5C5C", name: "Indian red"},
+  {hex: "#8B0000", name: "Dark red"},
+  {hex: "#800000", name: "Maroon"},
+  {hex: "#ADFF2F", name: "Green yellow"},
+  {hex: "#9ACD32", name: "Yellow green"},
+  {hex: "#7FFF00", name: "Chartreuse"},
+  {hex: "#7CFC00", name: "Lawn green"},
+  {hex: "#32CD32", name: "Lime green"},
+  {hex: "#00FF7F", name: "Spring green"},
+  {hex: "#00FA9A", name: "Medium spring green"},
+  {hex: "#00FF00", name: "Lime"},
+  {hex: "#008000", name: "Green"},
+  {hex: "#228B22", name: "Forest green"},
+  {hex: "#006400", name: "Dark green"},
+  {hex: "#6B8E23", name: "Olive drab"},
+  {hex: "#808000", name: "Olive"},
+  {hex: "#556B2F", name: "Dark olive green"},
+  {hex: "#98FB98", name: "Pale green"},
+  {hex: "#90EE90", name: "Light green"},
+  {hex: "#3CB371", name: "Medium sea green"},
+  {hex: "#2E8B57", name: "Sea green"},
+  {hex: "#8FBC8F", name: "Dark sea green"},
+  {hex: "#5F9EA0", name: "Cadet blue"},
+  {hex: "#66CDAA", name: "Medium aqua marine"},
+  {hex: "#40E0D0", name: "Turquoise"},
+  {hex: "#48D1CC", name: "Medium turquoise"},
+  {hex: "#00CED1", name: "Dark turquoise"},
+  {hex: "#AFEEEE", name: "Pale turquoise"},
+  {hex: "#00FFFF", name: "Aqua"},
+  {hex: "#00FFFF", name: "Cyan"},
+  {hex: "#E0FFFF", name: "Light cyan"},
+  {hex: "#F5FFFA", name: "Mint cream"},
+  {hex: "#F0FFF0", name: "Honey dew"},
+  {hex: "#7FFFD4", name: "Aquamarine"},
+  {hex: "#20B2AA", name: "Light sea green"},
+  {hex: "#008B8B", name: "Dark cyan"},
+  {hex: "#008080", name: "Teal"},
+  {hex: "#2F4F4F", name: "Dark slate gray"},
+  {hex: "#778899", name: "Light slate gray"},
+  {hex: "#708090", name: "Slate gray"},
+  {hex: "#00BFFF", name: "Deep sky blue"},
+  {hex: "#1E90FF", name: "Dodger Blue"},
+  {hex: "#87CEEB", name: "Sky blue"},
+  {hex: "#87CEFA", name: "Light sky blue"},
+  {hex: "#ADD8E6", name: "Light blue"},
+  {hex: "#B0E0E6", name: "Powder blue"},
+  {hex: "#B0C4DE", name: "Light steel blue"},
+  {hex: "#4682B4", name: "Steel blue"},
+  {hex: "#6495ED", name: "Cornflower blue"},
+  {hex: "#4169E1", name: "Royal blue"},
+  {hex: "#0000FF", name: "Blue"},
+  {hex: "#0000CD", name: "Medium blue"},
+  {hex: "#191970", name: "Midnight blue"},
+  {hex: "#00008B", name: "Dark blue"},
+  {hex: "#000080", name: "Navy"},
+  {hex: "#6A5ACD", name: "Slate blue"},
+  {hex: "#483D8B", name: "Dark slate blue"},
+  {hex: "#7B68EE", name: "Medium slate blue"},
+  {hex: "#8A2BE2", name: "Blue violet"},
+  {hex: "#4B0082", name: "Indigo"},
+  {hex: "#9400D3", name: "Dark violet"},
+  {hex: "#9932CC", name: "Dark orchid"},
+  {hex: "#BA55D3", name: "Medium orchid"},
+  {hex: "#DA70D6", name: "Orchid"},
+  {hex: "#EE82EE", name: "Violet"},
+  {hex: "#9370DB", name: "Medium purple"},
+  {hex: "#800080", name: "Purple"},
+  {hex: "#663399", name: "Rebecca purple"},
+  {hex: "#C71585", name: "Medium violet red"},
+  {hex: "#DB7093", name: "PaleV violet red"},
+  {hex: "#FF1493", name: "Deep pink"},
+  {hex: "#FF69B4", name: "Hot pink"},
+  {hex: "#FFB6C1", name: "Light pink"},
+  {hex: "#FFC0CB", name: "Pink"},
+  {hex: "#DDA0DD", name: "Plum"},
+  {hex: "#D8BFD8", name: "Thistle"},
+  {hex: "#FF00FF", name: "Magenta"},
+  {hex: "#FF00FF", name: "Fuchsia"},
+  {hex: "#8B008B", name: "Dark magenta"},
+
+  {hex: "#FAF0E6", name: "Linen"},
+  {hex: "#FDF5E6", name: "Old lace"},
+  {hex: "#FFF5EE", name: "Sea shell"},
+  {hex: "#FFFFF0", name: "Ivory"},
+  {hex: "#FFFAF0", name: "Floral white"},
+  {hex: "#FFF0F5", name: "Lavender blush"},
+  {hex: "#F8F8FF", name: "Ghost white"},
+  {hex: "#F0F8FF", name: "Alice blue"},
+  {hex: "#E6E6FA", name: "Lavender"},
+  {hex: "#F5F5F5", name: "White smoke"},
+  {hex: "#DCDCDC", name: "Gainsboro"},
+];
+
+const palettes = {
+  basic: [
+    {hex: "#FF0000", name: "Red"},
+    {hex: "#FF8000", name: "Orange"},
+    {hex: "#FFFF00", name: "Yellow"},
+    {hex: "#80FF00", name: "Lime"},
+    {hex: "#00FF00", name: "Green"},
+    {hex: "#00FFFF", name: "Cyan"},
+    {hex: "#0000FF", name: "Blue"},
+    {hex: "#8000FF", name: "Purple"},
+    {hex: "#FF00FF", name: "Magenta"},
+    {hex: "#FF8080", name: "Pink"},
+    {hex: "#804000", name: "Brown"},
+    {hex: "#000000", name: "Black"},
+    {hex: "#191919", name: "%90"},
+    {hex: "#333333", name: "%80"},
+    {hex: "#4c4c4c", name: "%70"},
+    {hex: "#666666", name: "%60"},
+    {hex: "#808080", name: "%50"},
+    {hex: "#999999", name: "%40"},
+    {hex: "#b3b3b3", name: "%30"},
+    {hex: "#cccccc", name: "%20"},
+    {hex: "#e6e6e6", name: "%10"},
+    {hex: "#FFFFFF", name: "White"},
+    ...cssColors
+  ],
+  orca: [
+    {hex: "#ED1C24", name: "Coral fire"},
+    {hex: "#C41E3A", name: "Sea anemone"},
+    {hex: "#800000", name: "Deep abyss"},
+    {hex: "#B22222", name: "Lobster red"},
+    {hex: "#A0522D", name: "Sandy clay"},
+    {hex: "#8B4513", name: "Driftwood"},
+    {hex: "#D2691E", name: "Sea buckthorn"},
+    {hex: "#F26722", name: "Sunset reef"},
+    {hex: "#FF8C00", name: "Tiger coral"},
+    {hex: "#FA8173", name: "Pink coral"},
+    {hex: "#FFA07A", name: "Seashell glow"},
+    {hex: "#F4E2C1", name: "Sand"},
+    {hex: "#FFD700", name: "Golden kelp"},
+    {hex: "#F7B763", name: "Sunlit dune"},
+    {hex: "#FFAA33", name: "Amber nautilus"},
+    {hex: "#FFEB31", name: "Sea lemon"},
+    {hex: "#D4ED91", name: "Pale starfish"},
+    {hex: "#00FF7F", name: "Spring tide"},
+    {hex: "#32CD32", name: "Lime algae"},
+    {hex: "#A4C41E", name: "Sea grass"},
+    {hex: "#7CFC00", name: "Neon plankton"},
+    {hex: "#228B22", name: "Kelp forest"},
+    {hex: "#008000", name: "Emerald wave"},
+    {hex: "#345B2F", name: "Whale shadow"},
+    {hex: "#2E8B57", name: "Sea turtle"},
+    {hex: "#00C1AE", name: "Lagoon"},
+    {hex: "#20B2AA", name: "Tropical current"},
+    {hex: "#115877", name: "Midnight trench"},
+    {hex: "#008B8B", name: "Dark kelp"},
+    {hex: "#00FFFF", name: "Crystal surf"},
+    {hex: "#40E0D0", name: "Turquoise bay"},
+    {hex: "#2EBDEF", name: "Sky over reef"},
+    {hex: "#87CEEB", name: "Shallow sky"},
+    {hex: "#1E90FF", name: "Electric bel"},
+    {hex: "#4169E1", name: "Dolphin"},
+    {hex: "#0000CD", name: "Ocean depths"},
+    {hex: "#191970", name: "Whale"},
+    {hex: "#4B0082", name: "Indigo abyss"},
+    {hex: "#7841CE", name: "Sea urchin"},
+    {hex: "#9370DB", name: "Lavender coral"},
+    {hex: "#800080", name: "Violet tide"},
+    {hex: "#8B008B", name: "Deep sea orchid"},
+    {hex: "#FF00FF", name: "Neon jelly"},
+    {hex: "#ED1E79", name: "Fuchsia coral"},
+    {hex: "#FF69B4", name: "Pink jellyfish"},
+    {hex: "#FFFFFF", name: "Foam"},
+    {hex: "#D3D3D3", name: "Seashell white"},
+    {hex: "#808080", name: "Pebble gray"},
+    {hex: "#696969", name: "Storm cloud"},
+    {hex: "#000000", name: "Ink black"}
+  ],
+  ral: [
+    {hex: "#716F52", name: "1000 Green beige"},
+    {hex: "#9B8E79", name: "1001 Beige"},
+    {hex: "#D4BB87", name: "1002 Sand yellow"},
+    {hex: "#F4A460", name: "1003 Signal yellow"},
+    {hex: "#EFBF04", name: "1004 Golden yellow"},
+    {hex: "#D7A500", name: "1005 Honey yellow"},
+    {hex: "#F2D185", name: "1006 Maize yellow"},
+    {hex: "#FDD185", name: "1007 Dalmatian yellow"},
+    {hex: "#8B7D6B", name: "1011 Brown beige"},
+    {hex: "#F5DB50", name: "1012 Lemon yellow"},
+    {hex: "#F3E5AB", name: "1013 Oyster white"},
+    {hex: "#F8E4BC", name: "1014 Ivory"},
+    {hex: "#FAE6D3", name: "1015 Light ivory"},
+    {hex: "#E4B922", name: "1018 Zinc yellow"},
+    {hex: "#A19D94", name: "1019 Grey beige"},
+    {hex: "#B9975B", name: "1020 Olive yellow"},
+    {hex: "#B8860B", name: "1021 Rape yellow"},
+    {hex: "#FF8C00", name: "1023 Traffic yellow"},
+    {hex: "#CC7722", name: "1024 Ochre yellow"},
+    {hex: "#FDBA37", name: "1026 Traffic orange yellow"},
+    {hex: "#F3A55C", name: "1027 Curry"},
+    {hex: "#E87C33", name: "1028 Melon yellow"},
+    {hex: "#F2A641", name: "1032 Broom yellow"},
+    {hex: "#E09F39", name: "1033 Dahlia yellow"},
+    {hex: "#F0B76E", name: "1034 Pastel yellow"},
+    {hex: "#D1BCA0", name: "1035 Pearl beige"},
+    {hex: "#D4AF37", name: "1036 Pearl gold"},
+    {hex: "#F7C64F", name: "1037 Sun yellow"},
+    {hex: "#F28C38", name: "2000 Yellow orange"},
+    {hex: "#E55B2B", name: "2001 Deep orange"},
+    {hex: "#E34234", name: "2002 Vermilion"},
+    {hex: "#F27B33", name: "2003 Pearl orange"},
+    {hex: "#F37322", name: "2004 Pure orange"},
+    {hex: "#F75C03", name: "2005 Luminous orange"},
+    {hex: "#F46C1F", name: "2007 Luminous bright orange"},
+    {hex: "#E14423", name: "2008 Bright red orange"},
+    {hex: "#F28500", name: "2009 Traffic orange"},
+    {hex: "#F46A0A", name: "2010 Signal orange"},
+    {hex: "#E0490C", name: "2011 Deep orange"},
+    {hex: "#F46F42", name: "2012 Salmon orange"},
+    {hex: "#E6761C", name: "2013 Pearl orange"},
+    {hex: "#E8A18B", name: "2015 Pearl pink"},
+    {hex: "#B8612C", name: "2016 Copper orange"},
+    {hex: "#8B4513", name: "2017 Signal brown"},
+    {hex: "#C14A0F", name: "2018 Fir orange"},
+    {hex: "#BC2E1F", name: "2020 Signal red"},
+    {hex: "#D52713", name: "2021 Luminous red"},
+    {hex: "#9F261E", name: "2022 Carmine red"},
+    {hex: "#D53832", name: "2023 Pearl carmine red"},
+    {hex: "#C2341C", name: "2024 Pure red"},
+    {hex: "#B32D1C", name: "2025 Luminous deep red"},
+    {hex: "#A62320", name: "2027 Currant red"},
+    {hex: "#B9301E", name: "2028 Pearl ruby red"},
+    {hex: "#A91D2E", name: "3000 Fire red"},
+    {hex: "#A1262A", name: "3001 Signal red"},
+    {hex: "#8F2626", name: "3002 Carmine red"},
+    {hex: "#9B2428", name: "3003 Ruby red"},
+    {hex: "#872241", name: "3004 Purple red"},
+    {hex: "#722F37", name: "3005 Wine red"},
+    {hex: "#3D1818", name: "3007 Black red"},
+    {hex: "#8A3324", name: "3009 Oxide red"},
+    {hex: "#A22C29", name: "3011 Brown red"},
+    {hex: "#B22D20", name: "3012 Pine red"},
+    {hex: "#D23741", name: "3013 Tomato red"},
+    {hex: "#A8282E", name: "3014 Antique pink"},
+    {hex: "#C8283C", name: "3015 Light pink"},
+    {hex: "#D23F39", name: "3016 Coral red"},
+    {hex: "#D1425E", name: "3017 Rose"},
+    {hex: "#C4232F", name: "3018 Strawberry red"},
+    {hex: "#C8102E", name: "3020 Traffic red"},
+    {hex: "#E36A5A", name: "3022 Salmon pink"},
+    {hex: "#E63E62", name: "3024 Luminous rose"},
+    {hex: "#E02A27", name: "3026 Luminous bright red"},
+    {hex: "#B8315F", name: "3027 Raspberry red"},
+    {hex: "#C61C23", name: "3028 Pure red"},
+    {hex: "#AD2932", name: "3031 Orient red"},
+    {hex: "#D32F2F", name: "3032 Pearl ruby"},
+    {hex: "#D13C6F", name: "3033 Pearl pink"},
+    {hex: "#7B2B5F", name: "4001 Red purple"},
+    {hex: "#912E8C", name: "4002 Red violet"},
+    {hex: "#9C366F", name: "4003 Heather violet"},
+    {hex: "#6A1F49", name: "4004 Bordeaux violet"},
+    {hex: "#4B2663", name: "4005 Blue violet"},
+    {hex: "#5C2D3C", name: "4006 Mahogany"},
+    {hex: "#5E3559", name: "4007 Grey purple"},
+    {hex: "#9C3568", name: "4008 Signal violet"},
+    {hex: "#5E6E3A", name: "4009 Fir green"},
+    {hex: "#5B5B8A", name: "4010 Sabine grey"},
+    {hex: "#8F3A70", name: "4011 Pearl violet"},
+    {hex: "#5E3252", name: "4012 Pearl blackberry"},
+    {hex: "#1B4F72", name: "5001 Green blue"},
+    {hex: "#18669E", name: "5002 Ultramarine blue"},
+    {hex: "#0F4C8A", name: "5003 Sapphire blue"},
+    {hex: "#0D324A", name: "5004 Black blue"},
+    {hex: "#1B5583", name: "5005 Signal blue"},
+    {hex: "#2C5F9D", name: "5007 Brilliant blue"},
+    {hex: "#3B5AA9", name: "5008 Grey blue"},
+    {hex: "#0077A3", name: "5009 Azure blue"},
+    {hex: "#0A558C", name: "5010 Gentian blue"},
+    {hex: "#2B547E", name: "5011 Steel blue"},
+    {hex: "#0066A1", name: "5012 Light blue"},
+    {hex: "#124780", name: "5013 Cobalt blue"},
+    {hex: "#1F4E79", name: "5014 Pigeon blue"},
+    {hex: "#0384A7", name: "5015 Sky blue"},
+    {hex: "#006A9E", name: "5017 Traffic blue"},
+    {hex: "#005F87", name: "5018 Turquoise blue"},
+    {hex: "#5A3D5B", name: "5019 Capsanthin violet"},
+    {hex: "#04749F", name: "5020 Ocean blue"},
+    {hex: "#009AAA", name: "5021 Water blue"},
+    {hex: "#1A3D5F", name: "5022 Night blue"},
+    {hex: "#047AA6", name: "5023 Distant blue"},
+    {hex: "#5B9BB8", name: "5024 Pastel blue"},
+    {hex: "#3C6A98", name: "5025 Pearl gentian blue"},
+    {hex: "#1C3F5F", name: "5026 Pearl midnight blue"},
+    {hex: "#36673A", name: "6000 Patina green"},
+    {hex: "#0E5C34", name: "6001 Emerald green"},
+    {hex: "#437034", name: "6002 Leaf green"},
+    {hex: "#3F3F2A", name: "6003 Olive green"},
+    {hex: "#2B4E52", name: "6004 Blue green"},
+    {hex: "#3B5F3F", name: "6005 Moss green"},
+    {hex: "#4A563C", name: "6006 Grey olive"},
+    {hex: "#2B4638", name: "6007 Pine green"},
+    {hex: "#4A4139", name: "6008 Pine brown"},
+    {hex: "#3B3A2E", name: "6009 Fir green"},
+    {hex: "#3E7A5F", name: "6010 Grass green"},
+    {hex: "#5E716A", name: "6011 Reseda green"},
+    {hex: "#3A4E48", name: "6012 Brown green"},
+    {hex: "#6B8E23", name: "6013 Reed green"},
+    {hex: "#6B8E23", name: "6014 Yellow green"},
+    {hex: "#1E3E2F", name: "6015 Black green"},
+    {hex: "#1E4D4B", name: "6016 Turquoise green"},
+    {hex: "#4C7C47", name: "6017 May green"},
+    {hex: "#9CBF60", name: "6018 Yellow green"},
+    {hex: "#2E5A3A", name: "6019 Pine green"},
+    {hex: "#2E5A3A", name: "6020 Chrome oxide green"},
+    {hex: "#9DC0A5", name: "6021 Pale green"},
+    {hex: "#4A563C", name: "6022 Brown green"},
+    {hex: "#009E60", name: "6024 Traffic green"},
+    {hex: "#3F7044", name: "6025 Fern green"},
+    {hex: "#4F7942", name: "6026 Opal green"},
+    {hex: "#3B5F3F", name: "6027 Pine green"},
+    {hex: "#3B5F3F", name: "6028 Pine green"},
+    {hex: "#00A550", name: "6029 Mint green"},
+    {hex: "#3E5A40", name: "6031 Bronze green"},
+    {hex: "#3D7E5A", name: "6032 Pearl green"},
+    {hex: "#007D6E", name: "6033 Sax turquoise"},
+    {hex: "#3D7E5A", name: "6034 Pearl turquoise"},
+    {hex: "#3D7E5A", name: "6035 Pearl green"},
+    {hex: "#3D7E5A", name: "6036 Pearl jade"},
+    {hex: "#00A550", name: "6037 Pure green"},
+    {hex: "#00A550", name: "6038 Luminous green"},
+    {hex: "#00A550", name: "6039 Mint green"},
+    {hex: "#7D7D7D", name: "7000 Squirrel grey"},
+    {hex: "#A8A9AD", name: "7001 Silver grey"},
+    {hex: "#6F7368", name: "7002 Olivestone"},
+    {hex: "#8F9080", name: "7003 Moss grey"},
+    {hex: "#8E9291", name: "7004 Signal grey"},
+    {hex: "#8B8788", name: "7005 Mouse grey"},
+    {hex: "#9A8373", name: "7006 Beige grey"},
+    {hex: "#828C6A", name: "7008 Khaki grey"},
+    {hex: "#6F7368", name: "7009 Green grey"},
+    {hex: "#5F6563", name: "7010 Tarpaulin grey"},
+    {hex: "#4A5656", name: "7011 Iron grey"},
+    {hex: "#4D5656", name: "7012 Basalt grey"},
+    {hex: "#635147", name: "7013 Brown grey"},
+    {hex: "#6B6B83", name: "7015 Slate grey"},
+    {hex: "#32373D", name: "7016 Anthracite grey"},
+    {hex: "#8B8B83", name: "7021 Light grey"},
+    {hex: "#716347", name: "7022 Umber grey"},
+    {hex: "#76787A", name: "7023 Concrete grey"},
+    {hex: "#5E6565", name: "7024 Graphite grey"},
+    {hex: "#5E6565", name: "7026 Granite grey"},
+    {hex: "#8F9494", name: "7030 Stone grey"},
+    {hex: "#4A5656", name: "7031 Iron grey"},
+    {hex: "#B2BFC0", name: "7032 Pebble grey"},
+    {hex: "#9B9B9B", name: "7033 Cement grey"},
+    {hex: "#8F9D9B", name: "7034 Yellow grey"},
+    {hex: "#CBD0CC", name: "7035 Light grey"},
+    {hex: "#6D7A80", name: "7036 Platinum grey"},
+    {hex: "#8A9191", name: "7037 Dusty grey"},
+    {hex: "#7E8181", name: "7038 Agate grey"},
+    {hex: "#6E7D7E", name: "7039 Quartz grey"},
+    {hex: "#8A9191", name: "7040 Window grey"},
+    {hex: "#8A9191", name: "7042 Traffic grey A"},
+    {hex: "#6E7D7E", name: "7043 Traffic grey B"},
+    {hex: "#9B9B9B", name: "7044 Silk grey"},
+    {hex: "#A1A7B0", name: "7045 Telegrey 1"},
+    {hex: "#7E848C", name: "7046 Telegrey 2"},
+    {hex: "#7E848C", name: "7047 Telegrey 4"},
+    {hex: "#6D7A80", name: "7048 Pearl mouse grey"},
+    {hex: "#786D5F", name: "8000 Green brown"},
+    {hex: "#8B7355", name: "8001 Ochre brown"},
+    {hex: "#8B6F47", name: "8003 Clay brown"},
+    {hex: "#8B6F47", name: "8004 Copper brown"},
+    {hex: "#5C4033", name: "8007 Chocolate brown"},
+    {hex: "#6E5C4A", name: "8008 Olive brown"},
+    {hex: "#8B4513", name: "8011 Nut brown"},
+    {hex: "#8B4513", name: "8012 Red brown"},
+    {hex: "#5C3317", name: "8014 Sepia brown"},
+    {hex: "#854636", name: "8015 Chestnut brown"},
+    {hex: "#8B4513", name: "8016 Mahogany brown"},
+    {hex: "#5C3317", name: "8017 Chocolate brown"},
+    {hex: "#786D5F", name: "8019 Grey brown"},
+    {hex: "#854636", name: "8022 Chestnut brown"},
+    {hex: "#8B6F47", name: "8023 Pearl copper"},
+    {hex: "#8B7355", name: "8024 Beige brown"},
+    {hex: "#8B6F47", name: "8025 Pearl mocha brown"},
+    {hex: "#8B6F47", name: "8027 Clay brown"},
+    {hex: "#8B6F47", name: "8028 Earth brown"},
+    {hex: "#8B6F47", name: "8029 Pearl brown"},
+    {hex: "#FAF0E6", name: "9001 Cream"},
+    {hex: "#EDECE6", name: "9002 Grey white"},
+    {hex: "#FFFFFF", name: "9003 Signal white"},
+    {hex: "#000000", name: "9004 Signal black"},
+    {hex: "#1D1D1D", name: "9005 Jet black"},
+    {hex: "#C0C0C0", name: "9006 White aluminium"},
+    {hex: "#8C7853", name: "9007 Grey aluminium"},
+    {hex: "#FFFFFF", name: "9010 Pure white"},
+    {hex: "#1D1D1D", name: "9011 Graphite black"},
+    {hex: "#FFFFFF", name: "9016 Traffic white"},
+    {hex: "#000000", name: "9017 Traffic black"},
+    {hex: "#FAF0E6", name: "9018 Papyrus white"},
+    {hex: "#B2BFC0", name: "9022 Pearl light grey"}
+  ],
+  gradient: [
+    {grad: "#FFF47B-#CD9800", name: "Metal: Gold"},
+    {grad: "#373737-#F5F4F4", name: "Metal: Silver"},
+    {grad: "#C39292-#C73725", name: "Metal: Copper"},
+    {grad: "#DED699-#C99620", name: "Metal: Brass"},
+    {grad: "#6E4316-#B0742E", name: "Metal: Bronze"},
+    // More than two colors: only listed when the page enables multi-color gradients.
+    {grad: "#FF0000-#FFFF00-#00FF00-#00FFFF-#0000FF-#FF00FF-#FF0000", name: "Nature: Rainbow"},
+
+    {grad: "#D8FEE7-#FFF5BD", name: "Nature: Pearl"},
+    {grad: "#1E5AA8-#3D8BD9-#7DB9F0-#C9E6FF", name: "Nature: Clear Sky"},
+    {grad: "#2B1B5A-#7A2E7E-#D9466E-#F57C3A-#FFC857", name: "Nature: Sunset"},
+    {grad: "#3B2416-#5A3A24-#45291A-#6B4630-#3B2416", name: "Wood: Dark"},
+    {grad: "#8B5A2B-#A8733F-#946235-#B5844F-#8B5A2B", name: "Wood: Medium"},
+    {grad: "#D9B98C-#E8CFA6-#D3AE7C-#EBD5B0-#D9B98C", name: "Wood: Light"},
+  ]
+};
+
+
+window.ColorPickerPalettes = palettes;
+})();

resources/web/dialog/ColorPickerDialog/style.css

@@ -0,0 +1,534 @@
+:root {
+  --thumb-size  : 20px;
+  --field-height: 28px;
+  --number-width: 52px;
+  --preview-size: 52px;
+  --checkerboard: conic-gradient(var(--checker-light) 25%, var(--checker-dark) 0 50%, var(--checker-light) 0 75%, var(--checker-dark) 0);
+}
+
+* {
+	padding: 0;
+	border: 0;
+	margin: 0;
+	user-select: none;
+	-webkit-user-select: none;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+html, body {
+  /* Report the full content width even before the native host expands its viewport.
+     WebKit's fit-content can clip the sidebar and retain the expanded width on close. */
+  width: max-content;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--orca-font, system-ui, sans-serif);
+  background: var(--bg-color);
+  color: var(--fg-color-text);
+  padding: 10px;
+}
+
+#selectionNotice {
+  width: 0;
+  min-width: 100%;
+  margin-bottom: 8px;
+  color: var(--fg-color-label);
+}
+
+.main-wrapper {
+  display: flex;
+  gap: 10px;
+  height: 360px;
+}
+
+/* ---------- Palette sidebar ---------- */
+.left-panel {
+  flex: 0 0 160px;
+  width: 160px;
+  display: none;
+  flex-direction: column;
+}
+.left-panel.open {
+  display: flex;
+  padding-right: 0px;
+  border-right: 1px solid var(--border-color);
+}
+
+#paletteCombo {
+  font-size: 13px;
+  width: 100%;
+}
+
+/* Combo box or filter box, with the search / close button on the right. */
+.palette-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  height: 25px;
+  margin-right:5px;
+}
+.palette-toolbar > .palette-select { flex: 1 }
+.palette-filter {
+  flex: 1;
+  height: 25px;
+  padding: 0 6px;
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--fg-color-text);
+  background: var(--bg-color);
+  border: 1px solid var(--main-color);
+  outline: none;
+  -webkit-user-select: text;
+  user-select: text;
+}
+.palette-filter::-webkit-search-cancel-button { -webkit-appearance: none }
+.palette-filter:focus-visible{
+  background-color: var(--focus-bg-box);
+}
+
+.palette-search-button {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  background-color: var(--button-bg-normal);
+  border: 1px solid var(--border-color);
+  border-left: 0;
+}
+.palette-search-button:hover {
+  background-color: var(--button-bg-hover);
+}
+
+.palette-search-button .icon-search {
+  --icon-url: var(--icon-search);
+}
+.palette-search-button .icon-close {
+  --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round"><line x1="3.5" y1="2.5" x2="13.5" y2="12.5"/><line x1="3.5" y1="12.5" x2="13.5" y2="2.5"/></g></svg>');;
+}
+.palette-search-button .icon-close,
+.palette-search-button[aria-pressed="true"] .icon-search { display: none }
+.palette-search-button[aria-pressed="true"] .icon-close { display: block }
+.palette-empty {
+  flex: 1;
+  padding: 8px 2px;
+  font-size: 13px;
+  color: var(--fg-color-label);
+}
+
+.palette {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 1px;
+  margin-bottom: 5px;
+}
+
+.color-item {
+  display: flex;
+  align-items: center;
+  padding: 1px 2px 1px 0;
+  border:1px solid transparent;
+  font-size: 13px;
+  color: var(--fg-color-text);
+}
+
+.color-item:hover {
+  border-color: var(--main-color);
+}
+
+.color-swatch {
+  flex: 0 0 18px;
+  height: 18px;
+  border-radius: 3px;
+  margin-right: 5px;
+  margin: 0 5px 0 1px;
+  border: 1px solid var(--border-color);
+}
+
+.color-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---------- Picker ---------- */
+.right-panel {
+  flex: 0 0 330px;
+  /* WebKit uses width, rather than flex-basis, for the parent's intrinsic width. */
+  width: 330px;
+  display: flex;
+  flex-direction: column;
+}
+
+.spectrum-row {
+  --spectrum-height: 150px;
+  display: flex;
+  gap: 8px;
+  height: var(--spectrum-height);
+  margin-bottom: 8px;
+}
+
+.spectrum-container {
+  position: relative;
+  flex: 1;
+  border-radius: 7px;
+  overflow: hidden;
+}
+
+#spectrum {
+  position: absolute; /* Absolute so the canvas's pixel size never feeds back into the flex layout */
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+}
+
+#pickerEditors:disabled #spectrum { pointer-events: none }
+
+#colorIndicator {
+  position: absolute;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border: 2px solid var(--color-marker-outline);
+  box-shadow: 0 0 0 2px var(--color-marker-shadow);
+  border-radius: 50%;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.saturation-slider {
+  position: relative;
+  flex: 0 0 var(--thumb-size);
+}
+
+#satSlider {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  flex: none;
+  width: var(--spectrum-height);
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+
+.valueSlider {
+  height: 14px;
+  border-radius: 8px;
+  outline: none;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+.valueSlider::-webkit-slider-runnable-track {
+  height: 14px;
+  border-radius: 8px;
+  background: var(--track-gradient);
+  border: 1px solid var(--border-color);
+}
+
+.valueSlider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  border: 2px solid var(--color-marker-outline);
+  box-shadow: 0 0 0 2px var(--color-marker-shadow);
+  background: var(--thumb-color);
+  margin-top: -4px;
+}
+
+/* Left column: mode switch, hex + alpha, gradient endpoints. Right: H S L and R G B columns. */
+.editor-grid {
+  --editor-grid-gap: 5px;
+  display: flex;
+  gap: var(--editor-grid-gap);
+  margin-bottom: 10px;
+}
+
+.editor-column:first-of-type {flex:1}
+.editor-column {
+  display: grid;
+  grid-template-rows: repeat(3, var(--field-height));
+  gap: var(--editor-grid-gap);
+}
+
+.hex-row {
+  display: flex;
+  gap: var(--editor-grid-gap);
+}
+
+.switch-check {
+  display: none !important;
+}
+.switch-label {
+  font-size: 13px;
+  padding: 2px 10px;
+  text-align: center;
+  line-height: 18px;
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.switch-slider {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border-radius: 20px;
+  background: var(--bg-color-alt);
+  border: 2px solid var(--bg-color-alt);
+  height:26px;
+}
+.switch-slider:before {
+  content: '';
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  left: 0%;
+  border-radius:20px;
+  background: var(--main-color);
+  transition: all 0.2s;
+}
+.switch-check:checked + .switch-slider:before {
+  left: 50%;
+}
+.switch-check:checked + .switch-slider div:first-child,
+.switch-check         + .switch-slider div:last-child{
+  color: var(--fg-color-label);
+  transition: all 0.2s;
+}
+.switch-check:checked + .switch-slider div:last-child,
+.switch-check         + .switch-slider div:first-child{
+  color: var(--button-fg-light);
+  transition: all 0.2s;
+}
+
+/* H S L / R G B / Hex / Alpha input boxes */
+.inline-field {
+  display: flex;
+  align-items: center;
+  padding-left: 5px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+}
+.inline-field > label {
+  width: 8px;
+  font-size: 12px;
+  color: var(--fg-color-text);
+  opacity: 0.6;
+}
+.inline-field > input {
+  flex: 1;
+  border: 0;
+  background: transparent;
+  padding: 0 2px 0 5px;
+  color: var(--fg-color-text);
+  font-size: 15px;
+  line-height: var(--field-height);
+  appearance: textfield; /* No spinner buttons; Up/Down keys and the wheel still step by 1. */
+}
+.inline-field:focus-within { 
+  border-color: var(--main-color); 
+  background: var(--focus-bg-box); 
+}
+.inline-field:has(input:invalid) { 
+  border-color: var(--control-invalid);
+}
+.inline-field > input:focus {
+  outline: none;
+}
+
+.inline-field > input[type="number"]::-webkit-inner-spin-button,
+.inline-field > input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none }
+
+.value-field { width: var(--number-width)}
+.field-hex   { flex: 1 }
+#alphaControls {
+  width: calc(var(--number-width) + 2px)
+}
+#alphaControls > input {
+  padding-left: 7px;
+}
+
+/* Third row holds the gradient bar and the opacity slider in the same cell. The slider only
+   shows while the opacity field or the slider itself is in use, and hides the gradient bar. */
+.third-row { position: relative }
+.third-row > * {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  align-items: center;
+}
+
+.third-row.opacity-open > #opacitySliderBar { display: flex }
+.third-row.opacity-open > #gradientCtrlBar  { display: none }
+
+#opacitySlider { width: 100%; }
+#opacitySlider::-webkit-slider-runnable-track {
+  background: var(--track-gradient), var(--checkerboard); /* Transparent end shows the checkerboard through the color. */
+  background-size: auto, 8px 8px;
+}
+
+/* Gradient colors: thumbs are evenly spaced and fixed; a click anywhere selects the nearest. */
+#gradientCtrlBar {
+  display: flex;
+}
+.gradient-stops {
+  position: relative;
+  flex: 1;
+  height: 100%;
+}
+/* Kept 10px away from the gradient bar so a click near its right end can't hit − or +. */
+.gradient-step-buttons {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 10px;
+  margin-right: 4px;
+}
+.gradient-step-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 4px;
+  background: var(--button-bg-normal);
+  color: var(--icon-color);
+}
+.gradient-step-button svg { display: block; flex: none }
+.gradient-step-button:hover:not([aria-disabled="true"]) { background: var(--button-bg-hover) }
+.gradient-step-button[aria-disabled="true"] { opacity: 0.4; cursor: default }
+.gradient-track {
+  position: absolute;
+  inset: 0;
+  top: 50%;
+  height: var(--thumb-size);
+  transform: translateY(-50%);
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  background-image: var(--swatch-color, linear-gradient(transparent, transparent)), var(--checkerboard);
+  background-size: auto, 8px 8px;
+}
+.gradient-thumb {
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+  border: 1px solid var(--color-marker-outline);
+  box-shadow: 0 0 0 1px var(--color-marker-shadow);
+  background: var(--thumb-color);
+  transform: translate(-50%, -50%);
+}
+/* Thumb i of n sits at 10px + (100% - 20px) * i / (n - 1), set inline as --stop. */
+.gradient-thumb { left: calc(10px + (100% - 20px) * var(--stop, 0)) }
+.gradient-thumb[aria-pressed="true"] {
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border: 2px solid var(--color-marker-outline);
+  box-shadow: 0 0 0 2px var(--color-marker-shadow);
+  border-radius: 4px;
+}
+
+.gradient-thumb:hover {
+  box-shadow: 0 0 0 3px var(--color-marker-shadow);
+}
+
+/* ---------- Original / current / favorites ---------- */
+.bottom-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: var(--preview-size);
+}
+
+.color-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--preview-size);
+  height: var(--preview-size);
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+}
+
+.color-preview svg {
+  display: none;
+  pointer-events: none;
+}
+
+.color-preview:hover svg {
+  display: block;
+}
+
+.saved-grid {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 24px));
+  grid-template-rows:    repeat(2, minmax(0, 24px));
+  gap: 4px;
+}
+
+.saved-swatch {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+}
+
+.saved-swatch.empty {
+  background: var(--bg-color);
+  cursor: default;
+}
+
+/* Each layer is separate so transparent RGBA shows the checkerboard beneath it. */
+.color-swatch, .saved-swatch, .color-preview {
+  background-image: var(--swatch-color, linear-gradient(transparent, transparent)), var(--checkerboard);
+  background-size: auto, 12px 12px;
+}
+.color-item { width: 100%; background: transparent; text-align: left; font-family: inherit; }
+
+/* ---------- Actions ---------- */
+
+.dialog-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 12px;
+}
+.dialog-actions button { margin: 0 }
+#confirmBtn[disabled]  { opacity: 0.5 }
+.stretch-spacer { flex: 1 }
+
+.icon-button {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background: var(--button-bg-normal);
+  color: var(--fg-color-text);
+}
+.icon-button:hover {
+  background: var(--button-bg-hover);
+}
+.icon-button[aria-expanded="true"] { 
+  background: var(--main-color);
+  color: var(--button-fg-light);
+}
+.icon-button[aria-expanded="true"]:hover { 
+  background: var(--main-color-hover);
+}
+
+.hidden    { display: none !important }
+.invisible { visibility: hidden }
+
+.color-item:focus-visible, .saved-swatch:focus-visible,
+select:focus-visible, button:focus-visible { outline: 2px solid var(--main-color); outline-offset: -1px; }

resources/web/dialog/css/theme.css

@@ -55,6 +55,13 @@
   /* Speed dial icon tile treatment */
   --speed-tile-bg: #efefef;
   --speed-tile-border: #d8d8d8;
+
+  /* Transparency and control markers are UI surfaces, never color data. */
+  --checker-light: #eeeeee;
+  --checker-dark: #aaaaaa;
+  --color-marker-outline: #ffffff;
+  --color-marker-shadow: rgba(0, 0, 0, 0.7);
+  --control-invalid: var(--plugin-status-danger);
 }
 
 :root[data-orca-theme="dark"] {
@@ -93,6 +100,8 @@
   /* Speed dial icon tile treatment */
   --speed-tile-bg: #34343b;
   --speed-tile-border: #50505a;
+  --checker-light: #68686f;
+  --checker-dark: #414148;
 }
 
 /* Re-theme the shared common.css chrome through variables (replaces dark.css's

src/libslic3r/TextureDisplacement.cpp

@@ -91,16 +91,12 @@ bool DecodedHeightTexture::texel_tap(const Vec2f &uv, bool tile_enabled, Texture
     const float fy = v * float(height);
     const int   x0 = std::clamp(int(std::floor(fx)), 0, width - 1);
     const int   y0 = std::clamp(int(std::floor(fy)), 0, height - 1);
-    // Neighbour for bilinear filtering. Repeat wraps, because its next tile really does start at the
-    // opposite edge. The other two clamp: an untiled placement has nothing past its border, and a
-    // mirrored tile folds back on itself there, so the texel past the edge is the edge again. Wrapping
-    // a mirrored seam blends the two opposite edges of the image together, which is both a visible
-    // line and a disagreement with the preview - the GPU path binds GL_MIRRORED_REPEAT, which folds.
-    const bool wrap_neighbour = tile_enabled && tile_method != TextureTileMethod::MirroredRepeat;
+    // Neighbour for bilinear filtering: wrap for tiling methods, clamp at the edge otherwise (a
+    // repeating neighbour would incorrectly blend against the opposite edge of the image).
     tap.x0 = x0;
     tap.y0 = y0;
-    tap.x1 = wrap_neighbour ? (x0 + 1) % width  : std::min(x0 + 1, width - 1);
-    tap.y1 = wrap_neighbour ? (y0 + 1) % height : std::min(y0 + 1, height - 1);
+    tap.x1 = tile_enabled ? (x0 + 1) % width  : std::min(x0 + 1, width - 1);
+    tap.y1 = tile_enabled ? (y0 + 1) % height : std::min(y0 + 1, height - 1);
     tap.tx = fx - std::floor(fx);
     tap.ty = fy - std::floor(fy);
     return true;
@@ -696,68 +692,7 @@ TextureDetail analyze_texture_detail(const TextureDisplacementLayer &layer)
         for (int i = 0; i < 8; ++i)
             top += bins[size_t(i)];
         out.flat_share  = float(double(top) / double(npx));
-
-        // How much of the principal colour axis carries pixels. Sampled rather than exhaustive: the
-        // axis is a bulk property, and a stride keeps this a few milliseconds on a large image.
-        {
-            constexpr size_t MAX_SAMPLES = size_t(1) << 16;
-            const size_t     stride      = std::max<size_t>(1, npx / MAX_SAMPLES);
-            std::vector<Vec3f> pts;
-            pts.reserve(npx / stride + 1);
-            for (size_t i = 0; i < npx; i += stride)
-                pts.push_back(tex.has_color() ?
-                                  Vec3f(float(tex.rgb[i * 3]), float(tex.rgb[i * 3 + 1]), float(tex.rgb[i * 3 + 2])) :
-                                  Vec3f::Constant(float(tex.pixels[i])));
-            if (pts.size() >= 16) {
-                Vec3f mean = Vec3f::Zero();
-                for (const Vec3f &p : pts)
-                    mean += p;
-                mean /= float(pts.size());
-                // Power iteration on the covariance: the axis, without forming the matrix.
-                Vec3f axis(1.f, 0.3f, 0.2f);
-                for (int it = 0; it < 24; ++it) {
-                    Vec3f next = Vec3f::Zero();
-                    for (const Vec3f &p : pts) {
-                        const Vec3f d = p - mean;
-                        next += d.dot(axis) * d;
-                    }
-                    const float n = next.norm();
-                    if (n < 1e-6f)
-                        break;
-                    axis = next / n;
-                }
-                std::vector<float> proj(pts.size());
-                for (size_t i = 0; i < pts.size(); ++i)
-                    proj[i] = (pts[i] - mean).dot(axis);
-                std::sort(proj.begin(), proj.end());
-                // Trimmed, so a handful of stray pixels cannot stretch the range and make a flat
-                // image look like it spans one.
-                const float lo   = proj[size_t(0.01 * double(proj.size()))];
-                const float hi   = proj[std::min(proj.size() - 1, size_t(0.99 * double(proj.size())))];
-                const float span = hi - lo;
-                if (span > 1e-3f) {
-                    constexpr int BUCKETS = 32;
-                    std::array<size_t, BUCKETS> hist{};
-                    for (const float s : proj)
-                        if (s >= lo && s <= hi)
-                            ++hist[size_t(std::min(BUCKETS - 1, int((s - lo) / span * BUCKETS)))];
-                    // A bucket counts as carrying pixels at a fifth of a percent of them, which is
-                    // above the noise a dithered image leaves between its colours.
-                    const size_t floor_count = size_t(0.002 * double(proj.size()));
-                    int          filled      = 0;
-                    for (const size_t c : hist)
-                        filled += c >= floor_count;
-                    out.axis_coverage = float(filled) / float(BUCKETS);
-                }
-            }
-        }
-
-        // Both signals, because either alone misreads a common case: the histogram calls a
-        // two-colour gradient flat (measured 0.90 on a green-to-red ramp, and 0.96 on a painted
-        // model texture), while coverage alone would call a noisy two-colour logo a gradient. An
-        // image whose axis could not be measured keeps coverage at 0, so the flat-share test decides
-        // alone - which is what an image of a single colour needs.
-        out.flat_colors = out.flat_share >= 0.85f && out.axis_coverage < 0.25f;
+        out.flat_colors = out.flat_share >= 0.85f;
     }
     std::lock_guard<std::mutex> lock(g_texture_detail_cache.mutex);
     auto &entries = g_texture_detail_cache.entries;

src/libslic3r/TextureDisplacement.hpp

@@ -504,15 +504,6 @@ struct TextureDetail
     // verdict: a "flat-colour" image (tiles, logos, camouflage) whose colours should each print in a
     // single filament, versus a photograph or gradient where interleaved filament mixes pay off.
     float flat_share  = 0.f;
-    // Share of the image's principal colour axis that actually carries pixels, in 32 steps. A ramp
-    // covers it end to end; a few flat colours sit in spikes with gaps between them. The histogram
-    // above cannot tell those apart - a two-colour gradient occupies as few bins as the two colours
-    // on their own - so both are needed before an image counts as flat.
-    //
-    // Zero when there was nothing to measure: an image of one colour, or too few pixels to fit an
-    // axis through. That is the right default, because it leaves the flat-share test deciding on its
-    // own, exactly as it did before this signal existed.
-    float axis_coverage = 0.f;
     bool  flat_colors = false;
 };
 TextureDetail analyze_texture_detail(const TextureDisplacementLayer &layer);

src/slic3r/CMakeLists.txt

@@ -129,6 +129,8 @@ set(SLIC3R_GUI_SOURCES
     GUI/Shortcuts.hpp
     GUI/SpeedDialDialog.cpp
     GUI/SpeedDialDialog.hpp
+    GUI/ColorPickerDialog.cpp
+    GUI/ColorPickerDialog.hpp
     GUI/ActionRegistry.cpp
     GUI/ActionRegistry.hpp
     GUI/NativeCommands.cpp

src/slic3r/GUI/AMSMaterialsSetting.cpp

@@ -1,4 +1,9 @@
 #include "AMSMaterialsSetting.hpp"
+#include "ColorPickerDialog.hpp"
+#include "libslic3r/Color.hpp"
+#include <optional>
+#include <variant>
+#include <cstdint>
 #include "ExtrusionCalibration.hpp"
 #include "MsgDialog.hpp"
 #include "GUI_App.hpp"
@@ -36,11 +41,9 @@
 #include <cmath>
 #include "slic3r/GUI/Widgets/PopupWindow.hpp"
 #include "slic3r/GUI/Widgets/StaticBox.hpp"
-#include <wx/colordlg.h>
 #include <wx/dcclient.h>
 #include <wx/dc.h>
 #include <wx/colour.h>
-#include <wx/colourdata.h>
 #include <wx/dcgraph.h>
 #include <wx/event.h>
 #include <wx/gdicmn.h>
@@ -1963,11 +1966,6 @@ ColorPickerPopup::ColorPickerPopup(wxWindow* parent)
     sizer_custom->Add(m_ts_stbitmap_custom, 0, wxEXPAND, 0);
     m_custom_cp->Layout();
 
-    m_clrData = new wxColourData();
-    m_clrData->SetChooseFull(true);
-    m_clrData->SetChooseAlpha(false);
-
-
     m_sizer_box->Add(0, 0, 0, wxTOP, FromDIP(10));
     m_sizer_box->Add(m_sizer_ams, 1, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
     m_sizer_box->Add(m_ams_fg_sizer, 0, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
@@ -1991,46 +1989,34 @@ ColorPickerPopup::ColorPickerPopup(wxWindow* parent)
     wxGetApp().UpdateDarkUIWin(this);
 }
 
-void ColorPickerPopup::on_custom_clr_picker(wxMouseEvent& event)
+void ColorPickerPopup::on_custom_clr_picker(wxMouseEvent& /*event*/)
 {
-    std::vector<std::string> colors = wxGetApp().app_config->get_custom_color_from_config();
-    for (int i = 0; i < colors.size(); i++) {
-        m_clrData->SetCustomColour(i, string_to_wxColor(colors[i]));
+    const bool was_shown = IsShown();
+    std::optional<wxColour> picker_color;
+    {
+        const ColorRGBA initial(m_def_col.Red(), m_def_col.Green(), m_def_col.Blue(), static_cast<unsigned char>(255));
+        // Snapshot the custom control's anchor before releasing the transient popup grab.
+        ColorPickerDialog dialog(GetParent(), initial, {}, false, m_custom_cp);
+        Dismiss();
+        if (dialog.ShowModal() == wxID_OK && dialog.selection()) {
+            const auto& result = std::get<ColorRGBA>(*dialog.selection());
+            picker_color = wxColour(static_cast<unsigned char>(std::lround(result.r() * 255.f)),
+                                    static_cast<unsigned char>(std::lround(result.g() * 255.f)),
+                                    static_cast<unsigned char>(std::lround(result.b() * 255.f)));
+        }
+    } // Destroy the modal before restoring the first-level popup and its focus/grab.
+    if (!picker_color) {
+        if (was_shown) Popup();
+        return;
     }
-    auto clr_dialog = new wxColourDialog(nullptr, m_clrData);
-    wxColour picker_color;
 
-    if (clr_dialog->ShowModal() == wxID_OK) {
-        m_clrData = &(clr_dialog->GetColourData());
-        if (colors.size() != CUSTOM_COLOR_COUNT) {
-            colors.resize(CUSTOM_COLOR_COUNT);
-        }
-        for (int i = 0; i < CUSTOM_COLOR_COUNT; i++) {
-            colors[i] = color_to_string(m_clrData->GetCustomColour(i));
-        }
-        wxGetApp().app_config->save_custom_color_to_config(colors);
-
-        picker_color = wxColour(
-            m_clrData->GetColour().Red(),
-            m_clrData->GetColour().Green(),
-            m_clrData->GetColour().Blue(),
-            255
-        );
-
-        if (picker_color.Alpha() == 0) {
-             m_ts_stbitmap_custom->Show();
-        }
-        else {
-            m_ts_stbitmap_custom->Hide();
-            m_custom_cp->SetBackgroundColor(picker_color);
-        }
-
-        set_def_colour(picker_color);
-        wxCommandEvent evt(EVT_SELECTED_COLOR);
-        unsigned long g_col = ((picker_color.Red() & 0xff) << 24) + ((picker_color.Green() & 0xff) << 16) + ((picker_color.Blue() & 0xff) << 8) + (picker_color.Alpha() & 0xff);
-        evt.SetInt(g_col);
-        wxPostEvent(GetParent(), evt);
-    }
+    set_def_colour(*picker_color);
+    wxCommandEvent evt(EVT_SELECTED_COLOR);
+    const std::uint32_t packed = (std::uint32_t(picker_color->Red()) << 24) |
+                                 (std::uint32_t(picker_color->Green()) << 16) |
+                                 (std::uint32_t(picker_color->Blue()) << 8) | 255u;
+    evt.SetInt(static_cast<int>(packed));
+    wxPostEvent(GetParent(), evt);
 }
 
 void ColorPickerPopup::set_ams_colours(std::vector<wxColour> ams)

src/slic3r/GUI/AMSMaterialsSetting.hpp

@@ -85,7 +85,6 @@ public:
     ScalableBitmap m_ts_bitmap_custom;
     wxStaticBitmap* m_ts_stbitmap_custom;
     StaticBox* m_custom_cp;
-    wxColourData* m_clrData;
     StaticBox* m_def_color_box;
     wxFlexGridSizer* m_ams_fg_sizer;
     wxColour m_def_col;

src/slic3r/GUI/ColorPickerDialog.hpp

@@ -0,0 +1,92 @@
+#pragma once
+
+#include "libslic3r/Color.hpp"
+#include "Widgets/WebViewHostDialog.hpp"
+
+#include <array>
+#include <cstddef>
+#include <variant>
+#include <nlohmann/json_fwd.hpp>
+#include <atomic>
+#include <memory>
+#include <optional>
+#include <string>
+#include <vector>
+#include <wx/gdicmn.h>
+
+class wxWindow;
+
+namespace Slic3r::GUI {
+
+// Most colors an ordered gradient may hold. This is the native switch for multi-color gradients:
+// 2 keeps the classic two-color gradients. The page receives it as options.max_gradient_colors
+// and never offers more, so the picker, favorites and project colors all share one limit.
+inline constexpr std::size_t COLOR_PICKER_MAX_GRADIENT_COLORS = 7;
+
+// Gradient colors retain their order (2..COLOR_PICKER_MAX_GRADIENT_COLORS); a solid has exactly one color.
+using ColorGradient = std::vector<ColorRGBA>;
+using ColorSelection = std::variant<ColorRGBA, ColorGradient>;
+
+struct ColorPickerOptions {
+    bool allow_gradient = false;
+    bool allow_alpha = false;
+};
+
+// Project storage preserves direction; FilamentColor's set is only for the
+// official palette and cannot represent ordered custom gradients.
+struct FilamentColorPickerValue {
+    std::vector<std::string> colors;
+    bool gradient = false;
+    std::string primary;
+};
+
+std::optional<ColorSelection> filament_color_picker_selection(const FilamentColorPickerValue& value);
+ColorSelection filament_color_picker_initial(const FilamentColorPickerValue& value);
+FilamentColorPickerValue filament_color_picker_result(const ColorSelection& selection);
+bool filament_color_picker_changed(const ColorSelection& initial, const std::optional<ColorSelection>& result);
+
+class ColorPickerDialog : public WebViewHostDialog
+{
+public:
+    ColorPickerDialog(wxWindow* parent, const ColorSelection& initial, ColorPickerOptions options = {},
+                      bool preserve_multi_color = false, wxWindow* anchor = nullptr);
+    ~ColorPickerDialog() override;
+
+    const std::optional<ColorSelection>& selection() const { return m_selection; }
+
+private:
+    void add_user_scripts() override;
+    void on_script_message(const nlohmann::json& payload) override;
+    void handle_web_command(const nlohmann::json& payload);
+    void send_initial_state();
+    void finish(int return_code);
+    void position_panel();
+    void move_to_anchor();
+    void resize_to_content(int height);
+    void focus_webview();
+    void repaint_webview();
+    void on_dpi_changed(const wxRect& suggested_rect) override;
+    void on_sys_color_changed() override;
+
+    ColorSelection m_initial;
+    ColorPickerOptions m_options;
+    std::optional<ColorSelection> m_selection;
+    std::vector<ColorSelection> m_favorites;
+    std::string m_page_id;
+    bool m_preserve_multi_color = false;
+    bool m_init_sent = false;
+    bool m_page_ready = false;
+    bool m_closing = false;
+    bool m_favorites_writable = false;
+    bool m_sidebar_open = false;
+    std::string m_palette;
+    bool m_initial_positioned = false;
+    wxRect m_anchor_rect;
+    wxRect m_work_area;
+    int m_content_height = 360;
+    int m_content_width = 330;
+    bool m_positioning = false;
+    std::shared_ptr<std::atomic<bool>> m_alive = std::make_shared<std::atomic<bool>>(true);
+};
+
+} // namespace Slic3r::GUI

src/slic3r/GUI/DeviceCore/DevDefs.h

@@ -163,8 +163,8 @@ public:
     ~devPrinterUtil() = delete;
 
 public:
-    static bool IsVirtualSlot(int ams_id) { return (ams_id == VIRTUAL_TRAY_MAIN_ID || ams_id == VIRTUAL_TRAY_DEPUTY_ID);}
-    static bool IsVirtualSlot(const std::string& ams_id) { return (ams_id == VIRTUAL_AMS_MAIN_ID_STR || ams_id == VIRTUAL_AMS_DEPUTY_ID_STR); }
+    static bool IsVirtualSlot(int ams_id);
+    static bool IsVirtualSlot(const std::string& ams_id);
 };
 
 namespace GUI
@@ -198,3 +198,6 @@ template<> struct std::hash<NozzleDef>
         return h1 ^ (h2 + 0x9e3779b9 + (h1 << 6) + (h1 >> 2));
     };
 };
+
+// key(extruder_id) -> { key1(nozzle type info), val1( number of the nozzle type)}
+using ExtruderNozzleInfos = std::unordered_map<int, std::unordered_map<NozzleDef, int>>;

src/slic3r/GUI/DeviceCore/DevFilaSystem.cpp

@@ -8,6 +8,7 @@
 #include <cstdlib>
 #include <chrono>
 #include <nlohmann/json.hpp>
+#include <wx/app.h>
 #include <wx/colour.h>
 #include <string>
 #include <wx/string.h>
@@ -33,6 +34,36 @@
 using namespace nlohmann;
 
 namespace Slic3r {
+
+bool devPrinterUtil::IsVirtualSlot(int ams_id)
+{
+    // When the app or preset bundle is unavailable we cannot know the vendor's
+    // extruder count, so fall back deterministically to the fixed Bambu pair
+    // {255, 254} rather than guessing from an unknown generic layout.
+    if (wxTheApp == nullptr || GUI::wxGetApp().preset_bundle == nullptr || GUI::wxGetApp().preset_bundle->is_bbl_vendor())
+        return ams_id == VIRTUAL_TRAY_MAIN_ID || ams_id == VIRTUAL_TRAY_DEPUTY_ID;
+
+    const int extruder_count = GUI::wxGetApp().preset_bundle->get_printer_extruder_count();
+    return ams_id >= VIRTUAL_TRAY_MAIN_ID - extruder_count + 1 && ams_id <= VIRTUAL_TRAY_MAIN_ID;
+}
+
+bool devPrinterUtil::IsVirtualSlot(const std::string& ams_id)
+{
+    // Strict: only a fully numeric string is a valid slot id. std::stoi alone
+    // would accept trailing garbage (e.g. "255abc" -> 255).
+    if (ams_id.empty())
+        return false;
+    for (char c : ams_id) {
+        if (c < '0' || c > '9')
+            return false;
+    }
+    try {
+        return IsVirtualSlot(std::stoi(ams_id));
+    } catch (...) {
+        return false;
+    }
+}
+
 static int _hex_digit_to_int(const char c) { return (c >= '0' && c <= '9') ? c - '0' : (c >= 'A' && c <= 'F') ? c - 'A' + 10 : (c >= 'a' && c <= 'f') ? c - 'a' + 10 : -1; }
 
 wxColour DevAmsTray::decode_color(const std::string &color)
@@ -200,18 +231,22 @@ wxString DevAms::GetDisplayName() const
 
 int DevAms::GetSlotCount() const
 {
-    // GetAmsType() maps AMS_LITE_MIXED -> AMS_LITE, so N9 reports 4 slots like AMS-Lite.
-    auto ams_type = GetAmsType();
-    if (ams_type == AMS || ams_type == AMS_LITE || ams_type == N3F)
-    {
-        return 4;
-    }
-    else if (ams_type == N3S)
-    {
+    // N3S is a 1-slot Bambu contract, so report 1 regardless of whether the
+    // preset bundle is momentarily unavailable (m_trays.size() can be 0).
+    if (GetAmsType() == N3S)
         return 1;
+
+    if (wxTheApp != nullptr && GUI::wxGetApp().preset_bundle != nullptr &&
+        GUI::wxGetApp().preset_bundle->is_bbl_vendor()) {
+        // GetAmsType() maps AMS_LITE_MIXED -> AMS_LITE, so N9 reports 4 slots like AMS-Lite.
+        auto ams_type = GetAmsType();
+        if (ams_type == AMS || ams_type == AMS_LITE || ams_type == N3F)
+        {
+            return 4;
+        }
     }
 
-    return 1;
+    return static_cast<int>(m_trays.size());
 }
 
 DevAmsTray* DevAms::GetTray(const std::string& tray_id) const
@@ -302,13 +337,21 @@ int DevFilaSystem::GetExtruderIdByAmsId(const std::string& ams_id) const
     {
         return it->second->GetExtruderId();
     }
-    else if (stoi(ams_id) == VIRTUAL_TRAY_MAIN_ID)
-    {
-        return MAIN_EXTRUDER_ID;
+
+    const bool is_bbl_vendor = wxTheApp != nullptr && GUI::wxGetApp().preset_bundle != nullptr && GUI::wxGetApp().preset_bundle->is_bbl_vendor();
+    if (!is_bbl_vendor && GetOwner()) {
+        for (const auto& tray : GetOwner()->vt_slot) {
+            if (tray.id == ams_id)
+                return VIRTUAL_TRAY_MAIN_ID - std::stoi(ams_id);
+        }
     }
-    else if (stoi(ams_id) == VIRTUAL_TRAY_DEPUTY_ID)
-    {
+
+    if (is_bbl_vendor && ams_id == VIRTUAL_AMS_MAIN_ID_STR)
+        return MAIN_EXTRUDER_ID;
+    if (is_bbl_vendor && ams_id == VIRTUAL_AMS_DEPUTY_ID_STR)
         return DEPUTY_EXTRUDER_ID;
+    if (!is_bbl_vendor && devPrinterUtil::IsVirtualSlot(ams_id)) {
+        return VIRTUAL_TRAY_MAIN_ID - std::stoi(ams_id);
     }
 
     assert(false && __FUNCTION__);
@@ -325,9 +368,22 @@ std::string DevFilaSystem::GetNozzleFlowStringByAmsId(const std::string& ams_id)
 std::map<int, DevAmsSlotId> DevFilaSystem::GetTrayIndexMap()
 {
     std::map<int, DevAmsSlotId> tray_id_map;
-    tray_id_map[VIRTUAL_TRAY_MAIN_ID]   = DevAmsSlotId{VIRTUAL_TRAY_MAIN_ID, 0};
-    tray_id_map[VIRTUAL_TRAY_DEPUTY_ID] = DevAmsSlotId{VIRTUAL_TRAY_DEPUTY_ID, 0};
+    const bool is_bbl_vendor = wxTheApp != nullptr && GUI::wxGetApp().preset_bundle != nullptr && GUI::wxGetApp().preset_bundle->is_bbl_vendor();
+    if (is_bbl_vendor) {
+        tray_id_map[VIRTUAL_TRAY_MAIN_ID]   = DevAmsSlotId{VIRTUAL_TRAY_MAIN_ID, 0};
+        tray_id_map[VIRTUAL_TRAY_DEPUTY_ID] = DevAmsSlotId{VIRTUAL_TRAY_DEPUTY_ID, 0};
+    } else if (GetOwner()) {
+        for (const auto& tray : GetOwner()->vt_slot) {
+            try {
+                const int tray_id = std::stoi(tray.id);
+                tray_id_map[tray_id] = DevAmsSlotId{tray_id, 0};
+            } catch (...) {
+                BOOST_LOG_TRIVIAL(warning) << __FUNCTION__ << " invalid virtual tray id: " << tray.id;
+            }
+        }
+    }
 
+    int generic_tray_index = 0;
     for (auto& [ams_id, ams_item] : GetAmsList()) {
         for (auto &[slot_id, slot_item] : ams_item->GetTrays()) {
             if (ams_item && slot_item) {
@@ -335,9 +391,11 @@ std::map<int, DevAmsSlotId> DevFilaSystem::GetTrayIndexMap()
                     int ams_id_int  = stoi(ams_id);
                     int slot_id_int = stoi(slot_id);
                     int tray_index  = -1;
-                    if (ams_item->GetAmsType() == DevAms::N3S) {
+                    if (!is_bbl_vendor) {
+                        tray_index = generic_tray_index + slot_id_int;
+                    } else if (ams_item->GetAmsType() == DevAms::N3S) {
                         tray_index = ams_id_int;
-                    } else if(ams_item->GetAmsType() == DevAms::AMS_LITE && ams_item->IsAmsLiteMixed()) {
+                    } else if (ams_item->GetAmsType() == DevAms::AMS_LITE && ams_item->IsAmsLiteMixed()) {
                         tray_index = 24 + slot_id_int;
                     } else {
                         tray_index = (ams_id_int * 4 + slot_id_int);
@@ -348,6 +406,8 @@ std::map<int, DevAmsSlotId> DevFilaSystem::GetTrayIndexMap()
                 }
             }
         }
+        if (!is_bbl_vendor)
+            generic_tray_index += static_cast<int>(ams_item->GetTrays().size());
     }
 
     return  tray_id_map;
@@ -913,6 +973,8 @@ void DevFilaSystemParser::ParseAgentFilament(const json& data, MachineObject* ob
             }
 
             ams->m_exist               = true;
+            ams->m_binded_extruder_set = {ext_id};
+            ams->m_binded_switcher_pos.reset();
             ams->m_current_temperature = u.value("temperature", (float) INVALID_AMS_TEMPERATURE);
             ams->m_humidity_percent    = u.value("humidity_percent", -1);
             ams->m_left_dry_time       = u.value("dry_time_min", 0);
@@ -995,16 +1057,22 @@ void DevFilaSystemParser::ParseAgentFilament(const json& data, MachineObject* ob
     }
 
     // --- external / direct spools -> obj->vt_slot ---
-    // extruder 0 -> main virtual slot, extruder >0 -> deputy.
+    // Keep one virtual slot per extruder. The legacy two-extruder mapping uses
+    // 255 for extruder 0 and 254 for extruder 1; continue that sequence for
+    // additional extruders (253, 252, ...).
     if (obj && data.contains("external") && data["external"].is_array())
     {
+        std::map<int, DevAmsTray> external_slots;
         obj->vt_slot.clear();
         for (const auto& e : data["external"])
         {
             if (!e.is_object())
                 continue;
             const int  ext   = e.value("extruder", MAIN_EXTRUDER_ID);
-            const int  vt_id = (ext == MAIN_EXTRUDER_ID) ? VIRTUAL_TRAY_MAIN_ID : VIRTUAL_TRAY_DEPUTY_ID;
+            if (ext < MAIN_EXTRUDER_ID || ext >= VIRTUAL_TRAY_MAIN_ID)
+                continue;
+
+            const int  vt_id = VIRTUAL_TRAY_MAIN_ID - ext;
             DevAmsTray tray(std::to_string(vt_id));
             tray.is_exists       = e.value("loaded", false);
             tray.m_fila_type     = e.value("material", std::string());
@@ -1013,8 +1081,11 @@ void DevFilaSystemParser::ParseAgentFilament(const json& data, MachineObject* ob
             tray.nozzle_temp_min = std::to_string(e.value("nozzle_temp_min", 0));
             tray.nozzle_temp_max = std::to_string(e.value("nozzle_temp_max", 0));
             tray.remain          = e.value("remain_percent", -1);
-            obj->vt_slot.push_back(tray);
+            external_slots.insert_or_assign(ext, std::move(tray));
         }
+
+        for (auto& entry : external_slots)
+            obj->vt_slot.push_back(std::move(entry.second));
     }
 }
 

src/slic3r/GUI/DeviceCore/DevFilaSystem.h

@@ -348,7 +348,7 @@ public:
     DevAmsTray* GetAmsTray(const std::string& ams_id, const std::string& tray_id) const;
     void        CollectAmsColors(std::vector<wxColour>& ams_colors) const;
 
-    // Map a linear tray index -> {ams_id, slot_id}. Includes the two virtual (external-spool) trays,
+    // Map a linear tray index -> {ams_id, slot_id}. Includes virtual external-spool trays,
     // N3S single-slot units, and the A2L/N9 AMS-Lite-mixed layout (trays 24-27).
     std::map<int, DevAmsSlotId> GetTrayIndexMap();
 
@@ -433,4 +433,4 @@ struct DevFilamentDryingPreset
     float filament_dev_ams_drying_heat_distortion_temperature = 0.0f;
 };
 
-}// namespace Slic3r
+}// namespace Slic3r

src/slic3r/GUI/DeviceCore/DevNozzleSystem.cpp

@@ -13,6 +13,7 @@
 #include "slic3r/GUI/DeviceCore/DevDefs.h"
 #include "libslic3r/PrintConfig.hpp"
 #include <boost/log/trivial.hpp>
+#include <wx/app.h>
 #include <wx/string.h>
 #include <string>
 #include "libslic3r/CommonDefs.hpp"
@@ -27,6 +28,7 @@
 #include <unordered_map>
 #include <optional>
 #include <cmath>
+#include "slic3r/GUI/GUI_App.hpp"
 
 using json = nlohmann::json;
 
@@ -176,34 +178,52 @@ DevFirmwareVersionInfo DevNozzle::GetFirmwareInfo() const
 int DevNozzle::GetLogicExtruderId() const
 {
     int total_ext_count = GetTotalExtruderCount();
-    if (total_ext_count == 1) {
-        return LOGIC_UNIQUE_EXTRUDER_ID;
-    } else if (total_ext_count == 2) {
-        if (AtLeftExtruder()) {
-            return LOGIC_L_EXTRUDER_ID;
-        } else if (AtRightExtruder()) {
-            return LOGIC_R_EXTRUDER_ID;
+
+    const bool is_bbl_vendor = wxTheApp != nullptr && GUI::wxGetApp().preset_bundle != nullptr &&
+                               GUI::wxGetApp().preset_bundle->is_bbl_vendor();
+    if (is_bbl_vendor) {
+        if (total_ext_count == 1) {
+            return LOGIC_UNIQUE_EXTRUDER_ID;
+        } else if (total_ext_count == 2) {
+            if (AtLeftExtruder()) {
+                return LOGIC_L_EXTRUDER_ID;
+            } else if (AtRightExtruder()) {
+                return LOGIC_R_EXTRUDER_ID;
+            }
         }
+
+        assert(0);
+        return LOGIC_UNIQUE_EXTRUDER_ID;
     }
 
-    assert(0);
-    return LOGIC_UNIQUE_EXTRUDER_ID;
+    // For some reason, BBL's logical extruder ID is inverted:
+    // physical extruder id = 0 (MAIN_EXTRUDER_ID) vs logical extruder id = 1 (LOGIC_R_EXTRUDER_ID)
+    // Likely because logical id reads from left to right (left = 0, right = 1)
+    // For generic N extruders, this inversion does not apply.
+    if (IsOnRack()) return INVALID_EXTRUDER_ID;
+    return m_nozzle_id;
 }
 
 int DevNozzle::GetExtruderId() const
 {
-    int total_ext_count = GetTotalExtruderCount();
-    if (total_ext_count == 1) {
-        return MAIN_EXTRUDER_ID;
-    } else if (total_ext_count == 2) {
-        if (AtRightExtruder()) {
+    const bool is_bbl_vendor = wxTheApp != nullptr && GUI::wxGetApp().preset_bundle != nullptr &&
+                               GUI::wxGetApp().preset_bundle->is_bbl_vendor();
+    if (is_bbl_vendor) {
+        int total_ext_count = GetTotalExtruderCount();
+        if (total_ext_count == 1) {
             return MAIN_EXTRUDER_ID;
-        } else if (AtLeftExtruder()) {
-            return DEPUTY_EXTRUDER_ID;
+        } else if (total_ext_count == 2) {
+            if (AtRightExtruder()) {
+                return MAIN_EXTRUDER_ID;
+            } else if (AtLeftExtruder()) {
+                return DEPUTY_EXTRUDER_ID;
+            }
         }
+    
+        return MAIN_EXTRUDER_ID;
     }
 
-    return MAIN_EXTRUDER_ID;
+    return m_nozzle_id;
 }
 
 bool DevNozzle::AtLeftExtruder() const

src/slic3r/GUI/DeviceManager.cpp

@@ -65,6 +65,7 @@
 #include <unordered_set>
 #include <utility>
 #include <vector>
+#include <wx/app.h>
 #include <wx/colour.h>
 #include <tuple>
 #include <wx/app.h>
@@ -806,8 +807,12 @@ bool MachineObject::is_extrusion_cali_finished()
 DevAmsTray *MachineObject::get_curr_tray()
 {
     const std::string& cur_ams_id = m_extder_system->GetCurrentAmsId();
-    if (cur_ams_id.compare(std::to_string(VIRTUAL_TRAY_MAIN_ID)) == 0) {
-        return &vt_slot[0];
+    if (devPrinterUtil::IsVirtualSlot(cur_ams_id)) {
+        for (auto& tray : vt_slot) {
+            if (tray.id == cur_ams_id)
+                return &tray;
+        }
+        return nullptr;
     }
 
     DevAms* curr_ams = get_curr_Ams();
@@ -1273,19 +1278,24 @@ int MachineObject::get_bed_temperature_limit()
 
 bool MachineObject::is_filament_installed()
 {
-    if (m_extder_system->GetTotalExtderCount() > 0) {
-        // right//or single
-        auto ext = m_extder_system->m_extders[MAIN_EXTRUDER_ID];
-        if (ext.m_ext_has_filament) {
+    // if (m_extder_system->GetTotalExtderCount() > 0) {
+    //     // right//or single
+    //     auto ext = m_extder_system->m_extders[MAIN_EXTRUDER_ID];
+    //     if (ext.m_ext_has_filament) {
+    //         return true;
+    //     }
+    // }
+    // /*left*/
+    // if (m_extder_system->GetTotalExtderCount() > 1) {
+    //     auto ext = m_extder_system->m_extders[DEPUTY_EXTRUDER_ID];
+    //     if (ext.m_ext_has_filament) {
+    //         return true;
+    //     }
+    // }
+
+    for (auto& ext : m_extder_system->m_extders) {
+        if (ext.m_ext_has_filament)
             return true;
-        }
-    }
-    /*left*/
-    if (m_extder_system->GetTotalExtderCount() > 1) {
-        auto ext = m_extder_system->m_extders[DEPUTY_EXTRUDER_ID];
-        if (ext.m_ext_has_filament) {
-            return true;
-        }
     }
     return false;
 }
@@ -2627,13 +2637,10 @@ void MachineObject::reset()
     json empty_j;
     print_json.diff2all_base_reset(empty_j);
 
-    for (auto i = 0; i < vt_slot.size(); i++) {
-        vt_slot[i].reset();
-
-        if (i == 1) {
-            vt_slot.erase(vt_slot.begin() + 1);
-        }
-    }
+    for (auto& tray : vt_slot)
+        tray.reset();
+    if (vt_slot.size() > 1)
+        vt_slot.erase(vt_slot.begin() + 1, vt_slot.end());
     // why: reset reuses MachineObject, so release its lazy subtask
     // before dropping the pointer to prevent reconnect leaks.
     if (subtask_) {
@@ -4114,25 +4121,28 @@ int MachineObject::parse_json(std::string tunnel, std::string payload, bool key_
                             if (jj.contains("vir_slot") && jj["vir_slot"].is_array()) {
 
                                 for (auto it = jj["vir_slot"].begin(); it != jj["vir_slot"].end(); it++) {
-                                    auto vslot = parse_vt_tray(it.value().get<json>());
+                                    try {
+                                        const auto tray_json = it.value().get<json>();
+                                        if (!tray_json.is_object() || !tray_json.contains("id") || !tray_json["id"].is_string())
+                                            continue;
 
-                                    if (vslot.id == std::to_string(VIRTUAL_TRAY_MAIN_ID)) {
-                                        auto it = std::next(vt_slot.begin(), 0);
-                                        if (it != vt_slot.end()) {
-                                            vt_slot[0] = vslot;
-                                        }
-                                        else {
-                                            vt_slot.push_back(vslot);
+                                        const auto tray_id_str = tray_json["id"].get<std::string>();
+                                        int tray_id = 0;
+                                        const auto result = std::from_chars(tray_id_str.data(), tray_id_str.data() + tray_id_str.size(), tray_id);
+                                        if (result.ec != std::errc{} || result.ptr != tray_id_str.data() + tray_id_str.size()
+                                            || tray_id < 0 || tray_id > VIRTUAL_TRAY_MAIN_ID)
+                                            continue;
+
+                                        auto vslot = parse_vt_tray(tray_json);
+                                        const auto index = static_cast<std::vector<DevAmsTray>::size_type>(VIRTUAL_TRAY_MAIN_ID - tray_id);
+                                        while (vt_slot.size() <= index) {
+                                            const int placeholder_id = VIRTUAL_TRAY_MAIN_ID - static_cast<int>(vt_slot.size());
+                                            vt_slot.emplace_back(std::to_string(placeholder_id));
                                         }
+                                        vt_slot[index] = vslot;
                                     }
-                                    else if (vslot.id == std::to_string(VIRTUAL_TRAY_DEPUTY_ID)) {
-                                        auto it = std::next(vt_slot.begin(), 1);
-                                        if (it != vt_slot.end()) {
-                                            vt_slot[1] = vslot;
-                                        }
-                                        else {
-                                            vt_slot.push_back(vslot);
-                                        }
+                                    catch (...) {
+                                        continue;
                                     }
                                 }
 
@@ -5270,16 +5280,17 @@ DevAmsTray MachineObject::parse_vt_tray(json vtray)
 
 bool MachineObject::contains_tray(const std::string &ams_id, const std::string &tray_id) const
 {
-    if (ams_id != VIRTUAL_AMS_MAIN_ID_STR && ams_id != VIRTUAL_AMS_DEPUTY_ID_STR) {
-
+    const bool is_bbl_vendor = wxTheApp != nullptr && GUI::wxGetApp().preset_bundle != nullptr && GUI::wxGetApp().preset_bundle->is_bbl_vendor();
+    if (is_bbl_vendor && ams_id != VIRTUAL_AMS_MAIN_ID_STR && ams_id != VIRTUAL_AMS_DEPUTY_ID_STR)
         return m_fila_system->GetAmsTray(ams_id, tray_id) != nullptr;
-    } else {
+
+    if (!is_bbl_vendor || ams_id == VIRTUAL_AMS_MAIN_ID_STR || ams_id == VIRTUAL_AMS_DEPUTY_ID_STR) {
         for (const auto& tray : vt_slot) {
-            if (tray.id == ams_id) { return true; }
+            if (tray.id == ams_id) return true;
         }
     }
 
-    return false;
+    return !is_bbl_vendor && m_fila_system->GetAmsTray(ams_id, tray_id) != nullptr;
 }
 
 DevAmsTray MachineObject::get_tray(const std::string &ams_id, const std::string &tray_id) const
@@ -5289,13 +5300,19 @@ DevAmsTray MachineObject::get_tray(const std::string &ams_id, const std::string
         return DevAmsTray(tray_id);
     }
 
-    if (ams_id != VIRTUAL_AMS_MAIN_ID_STR && ams_id != VIRTUAL_AMS_DEPUTY_ID_STR) {
+    const bool is_bbl_vendor = wxTheApp != nullptr && GUI::wxGetApp().preset_bundle != nullptr && GUI::wxGetApp().preset_bundle->is_bbl_vendor();
+    if (is_bbl_vendor && ams_id != VIRTUAL_AMS_MAIN_ID_STR && ams_id != VIRTUAL_AMS_DEPUTY_ID_STR) {
         auto tray = m_fila_system->GetAmsTray(ams_id, tray_id);
-        if (tray) { return *tray;};
+        if (tray) return *tray;
     }
-    else {
+    else if (!is_bbl_vendor || ams_id == VIRTUAL_AMS_MAIN_ID_STR || ams_id == VIRTUAL_AMS_DEPUTY_ID_STR) {
         for (const auto &tray : vt_slot) {
-            if (tray.id == ams_id) { return tray; }
+            if (tray.id == ams_id) return tray;
+        }
+
+        if (!is_bbl_vendor) {
+            auto tray = m_fila_system->GetAmsTray(ams_id, tray_id);
+            if (tray) return *tray;
         }
     }
 

src/slic3r/GUI/Field.cpp

@@ -2,6 +2,7 @@
 #include "GUI_App.hpp"
 #include "I18N.hpp"
 #include "Field.hpp"
+#include "ColorPickerDialog.hpp"
 #include "libslic3r/GCode/Thumbnails.hpp"
 #include "wxExtensions.hpp"
 #include "Plater.hpp"
@@ -45,7 +46,11 @@
 #include <wx/arrstr.h>
 #include <wx/anybutton.h>
 #include <wx/colour.h>
-#include <wx/clrpicker.h>
+#include <wx/button.h>
+#include <wx/brush.h>
+#include <wx/pen.h>
+#include <optional>
+#include <variant>
 #include <wx/image.h>
 #include <wx/dcmemory.h>
 #include <wx/dc.h>
@@ -2618,92 +2623,41 @@ void PluginConfigField::msw_rescale()
 
 void ColourPicker::BUILD()
 {
-    auto size = wxSize(def_width_wider() * m_em_unit, -1); // ORCA match color picker width
+    // An empty borderless wxButton is created with zero height on macOS. Give the bitmap
+    // field the same height as other parameter buttons before drawing its swatch.
+    wxSize size(def_width_wider() * m_em_unit, m_parent->FromDIP(26));
     if (m_opt.height >= 0) size.SetHeight(m_opt.height*m_em_unit);
     if (m_opt.width >= 0) size.SetWidth(m_opt.width*m_em_unit);
 
-	// Validate the color
-	wxString clr_str(m_opt.type == coString ? m_opt.get_default_value<ConfigOptionString>()->value : m_opt.get_default_value<ConfigOptionStrings>()->get_at(m_opt_idx));
-	wxColour clr(clr_str);
-	if (clr_str.IsEmpty() || !clr.IsOk()) {
-		clr = wxTransparentColour;
-	}
-
-	auto temp = new wxColourPickerCtrl(m_parent, wxID_ANY, clr, wxDefaultPosition, size);
+    const wxString clr_str(m_opt.type == coString ? m_opt.get_default_value<ConfigOptionString>()->value :
+                                                   m_opt.get_default_value<ConfigOptionStrings>()->get_at(m_opt_idx));
+    auto* button = new wxButton(m_parent, wxID_ANY, wxEmptyString, wxDefaultPosition, size, wxBORDER_NONE);
+    window = button;
+    button->SetBitmapMargins(0, 0);
     if (parent_is_custom_ctrl && m_opt.height < 0)
-        opt_height = (double)temp->GetSize().GetHeight() / m_em_unit;
-    temp->SetFont(Slic3r::GUI::wxGetApp().normal_font());
-    convert_to_picker_widget(temp);
-    if (!wxOSX) temp->SetBackgroundStyle(wxBG_STYLE_PAINT);
-
-	wxGetApp().UpdateDarkUI(temp->GetPickerCtrl());
-
-	// 	// recast as a wxWindow to fit the calling convention
-	window = dynamic_cast<wxWindow*>(temp);
-
-	temp->Bind(wxEVT_COLOURPICKER_CHANGED, ([
-        #ifdef __WXMSW__
-            temp,
-        #endif
-        this](wxCommandEvent e) {
-        #ifdef __WXMSW__
-            draw_bmp_btn(temp, temp->GetColour());
-        #endif
-        on_change_field();
-    }), temp->GetId());
-
-    // ORCA reset value to default on right click. previously no way to switch back on windows
-    temp->GetPickerCtrl()->Bind(wxEVT_RIGHT_DOWN, [this, temp](wxMouseEvent e){
-        #ifdef __WXMSW__
-            temp->SetColour(wxTransparentColour);
-            draw_bmp_btn(temp, wxTransparentColour);
-        #else
-            set_undef_value(temp);
-        #endif
-        on_change_field();
-        e.Skip();
+        opt_height = double(button->GetSize().GetHeight()) / m_em_unit;
+    button->SetFont(wxGetApp().normal_font());
+    if (!wxOSX) button->SetBackgroundStyle(wxBG_STYLE_PAINT);
+    set_value(boost::any(clr_str));
+    button->Bind(wxEVT_BUTTON, &ColourPicker::on_button_click, this);
+    button->Bind(wxEVT_RIGHT_DOWN, [this](wxMouseEvent& event) {
+        apply_user_color(wxTransparentColour);
+        event.Skip();
     });
-
-	temp->SetToolTip(get_tooltip_text(clr_str));
+    // Native layouts may assign the final field size after construction.
+    button->Bind(wxEVT_SIZE, [this](wxSizeEvent& event) {
+        draw_bmp_btn();
+        event.Skip();
+    });
+    button->SetToolTip(get_tooltip_text(clr_str));
 }
 
-void ColourPicker::set_undef_value(wxColourPickerCtrl* field)
+void ColourPicker::draw_bmp_btn()
 {
-    field->SetColour(wxTransparentColour);
-
-    wxButton* btn = dynamic_cast<wxButton*>(field->GetPickerCtrl());
-    if (!btn->GetBitmap().IsOk()) return;
-
-    wxImage image(btn->GetBitmap().GetSize());
-    image.InitAlpha();
-    memset(image.GetAlpha(), 0, image.GetWidth() * image.GetHeight());
-    wxBitmap   bmp(std::move(image));
-    wxMemoryDC dc(bmp);
-    if (!dc.IsOk()) return;
-#ifdef __WXMSW__
-    wxGCDC dc2(dc);
-#else
-    wxDC &dc2(dc);
-#endif
-    dc2.SetPen(wxPen("#F1754E", 1));
-
-    const wxRect rect = wxRect(0, 0, bmp.GetWidth(), bmp.GetHeight());
-    dc2.DrawLine(rect.GetLeftBottom(), rect.GetTopRight());
-
-    dc.SelectObject(wxNullBitmap);
-    btn->SetBitmapLabel(bmp);
-}
-
-// ORCA match style with button on windows
-void ColourPicker::draw_bmp_btn(wxColourPickerCtrl* field, wxColour color)
-{
-    wxButton* btn = dynamic_cast<wxButton*>(field->GetPickerCtrl());
-
-    if (!btn->GetBitmap().IsOk()) return;
-    btn->SetWindowStyle(wxBORDER_NONE); // ORCA just in case to prevent any overflow
-    btn->SetBackgroundColour(*wxWHITE);
+    if (!window) return;
+    auto* btn = static_cast<wxButton*>(window);
+    if (btn->GetSize().x <= 0 || btn->GetSize().y <= 0) return;
     wxGetApp().UpdateDarkUI(btn);
-
     auto create_bitmap = [btn](const wxColour& picker_color,const wxColour& bg_color, bool focus) -> wxBitmap {
         wxSize  btn_sz = btn->GetSize();
         wxImage image(btn_sz);
@@ -2712,11 +2666,11 @@ void ColourPicker::draw_bmp_btn(wxColourPickerCtrl* field, wxColour color)
         wxBitmap   bmp(std::move(image));
         wxMemoryDC dc(bmp);
         if (!dc.IsOk()) return bmp;
-        wxGCDC dc2(dc); // just use wxGCDC since bitmap button only used for windows
+        wxGCDC dc2(dc);
 
         dc2.SetPen(focus ? wxPen(wxColour(StateColor::darkModeColorFor(wxColour("#009688"))), 1) : *wxTRANSPARENT_PEN);
         dc2.SetBrush(wxBrush(StateColor::darkModeColorFor(bg_color)));
-        dc2.DrawRoundedRectangle(btn->GetRect(), btn->FromDIP(4));
+        dc2.DrawRoundedRectangle(wxRect(wxPoint(0, 0), btn_sz), btn->FromDIP(4));
 
         int padding = btn->FromDIP(5);
         dc2.SetPen(*wxTRANSPARENT_PEN);
@@ -2735,117 +2689,72 @@ void ColourPicker::draw_bmp_btn(wxColourPickerCtrl* field, wxColour color)
         return bmp;
     };
 
-    btn->SetBitmap(        create_bitmap(color, wxColour("#DFDFDF"), false)); // Normal
-    btn->SetBitmapFocus(   create_bitmap(color, wxColour("#DFDFDF"), true )); // Focus
-    btn->SetBitmapCurrent( create_bitmap(color, wxColour("#D4D4D4"), false)); // Hover
+    btn->SetBitmap(        create_bitmap(m_colour, wxColour("#DFDFDF"), false)); // Normal
+    btn->SetBitmapFocus(   create_bitmap(m_colour, wxColour("#DFDFDF"), true )); // Focus
+    btn->SetBitmapCurrent( create_bitmap(m_colour, wxColour("#D4D4D4"), false)); // Hover
 }
 
-void ColourPicker::set_value(const boost::any& value, bool change_event)
+void ColourPicker::set_value(const std::string& value, bool change_event)
 {
-    m_disable_change_event = !change_event;
-    const wxString clr_str(boost::any_cast<wxString>(value));
-    auto field = dynamic_cast<wxColourPickerCtrl*>(window);
+    set_value(boost::any(wxString::FromUTF8(value)), change_event);
+}
 
-    #ifdef __WXMSW__
-        const wxColour parsed_clr(clr_str);
-        wxColour clr = (clr_str.IsEmpty() || !parsed_clr.IsOk()) ? wxTransparentColour : parsed_clr;
-        field->SetColour(clr);
-        draw_bmp_btn(field, clr);
-    #else
-        wxColour clr(clr_str);
-        if (clr_str.IsEmpty() || !clr.IsOk())
-            set_undef_value(field);
-        else
-            field->SetColour(clr);
-    #endif
-
-    m_disable_change_event = false;
+void ColourPicker::set_value(const boost::any& value, bool /*change_event*/)
+{
+    // Like wxColourPickerCtrl::SetColour, programmatic assignment is silent.
+    const wxString clr_str = boost::any_cast<wxString>(value);
+    const wxColour parsed(clr_str);
+    m_colour = clr_str.IsEmpty() || !parsed.IsOk() ? wxTransparentColour : parsed;
+    draw_bmp_btn();
 }
 
 boost::any& ColourPicker::get_value()
 {
-    save_colors_to_config();
-	auto colour = static_cast<wxColourPickerCtrl*>(window)->GetColour();
-    if (colour == wxTransparentColour)
-        m_value = std::string("");
-    else {
-        m_value = encode_color(ColorRGB(colour.Red(), colour.Green(), colour.Blue()));
-    }
-	return m_value;
+    m_value = m_colour == wxTransparentColour ? std::string() :
+        encode_color(ColorRGB(m_colour.Red(), m_colour.Green(), m_colour.Blue()));
+    return m_value;
+}
+
+void ColourPicker::apply_user_color(const std::optional<wxColour>& color)
+{
+    if (!color || !color->IsOk() || *color == m_colour) return;
+    const std::string previous = boost::any_cast<std::string>(get_value());
+    m_colour = *color;
+    draw_bmp_btn();
+    if (previous != boost::any_cast<std::string>(get_value())) on_change_field();
 }
 
 void ColourPicker::msw_rescale()
 {
     Field::msw_rescale();
-
-	wxColourPickerCtrl* field = dynamic_cast<wxColourPickerCtrl*>(window);
-    auto size = wxSize(def_width_wider() * m_em_unit, -1); // ORCA match color picker width with parameters
+    wxSize size(def_width_wider() * m_em_unit, m_parent->FromDIP(26));
     if (m_opt.height >= 0)
         size.SetHeight(m_opt.height * m_em_unit);
     else if (parent_is_custom_ctrl && opt_height > 0)
         size.SetHeight(lround(opt_height * m_em_unit));
     if (m_opt.width >= 0) size.SetWidth(m_opt.width * m_em_unit);
-    if (parent_is_custom_ctrl)
-        field->SetSize(size);
-    else
-        field->SetMinSize(size);
-
-    #ifdef __WXMSW__
-        draw_bmp_btn(field, field->GetColour());
-    #else
-        if (field->GetColour() == wxTransparentColour)
-            set_undef_value(field);
-    #endif
-
+    if (parent_is_custom_ctrl) window->SetSize(size);
+    else window->SetMinSize(size);
+    draw_bmp_btn();
 }
 
 void ColourPicker::sys_color_changed()
 {
-#ifdef _WIN32
-    if (wxWindow* win = this->getWindow())
-        if (wxColourPickerCtrl* picker = dynamic_cast<wxColourPickerCtrl*>(win)){
-            wxGetApp().UpdateDarkUI(picker->GetPickerCtrl(), true);
-            draw_bmp_btn(picker, picker->GetColour());
-        }
-#endif
+    if (window) wxGetApp().UpdateDarkUI(window, true);
+    draw_bmp_btn();
 }
 
-void ColourPicker::on_button_click(wxCommandEvent &event) {
-#if !defined(__linux__) && !defined(__LINUX__)
-    if (m_clrData) {
-        std::vector<std::string> colors = wxGetApp().app_config->get_custom_color_from_config();
-        for (int i = 0; i < colors.size(); i++) {
-            m_clrData->SetCustomColour(i, string_to_wxColor(colors[i]));
-        }
-    }
-    m_picker_widget->OnButtonClick(event);
-#endif
-}
-
-void ColourPicker::convert_to_picker_widget(wxColourPickerCtrl *widget)
+void ColourPicker::on_button_click(wxCommandEvent& /*event*/)
 {
-#if !defined(__linux__) && !defined(__LINUX__)
-    m_picker_widget = dynamic_cast<wxColourPickerWidget*>(widget->GetPickerCtrl());
-    if (m_picker_widget) {
-        m_picker_widget->Bind(wxEVT_BUTTON, &ColourPicker::on_button_click, this);
-        m_clrData = m_picker_widget->GetColourData();
+    const wxColour initial = m_colour == wxTransparentColour ? wxColour(0, 0, 0) : m_colour;
+    const ColorRGBA color(initial.Red(), initial.Green(), initial.Blue(), static_cast<unsigned char>(255));
+    ColorPickerDialog dialog(m_parent, color, {}, false, window);
+    if (dialog.ShowModal() == wxID_OK && dialog.selection()) {
+        const auto& result = std::get<ColorRGBA>(*dialog.selection());
+        apply_user_color(wxColour(static_cast<unsigned char>(std::lround(result.r() * 255.f)),
+                                  static_cast<unsigned char>(std::lround(result.g() * 255.f)),
+                                  static_cast<unsigned char>(std::lround(result.b() * 255.f))));
     }
-#endif
-}
-
-void ColourPicker::save_colors_to_config() {
-#if !defined(__linux__) && !defined(__LINUX__)
-    if (m_clrData) {
-        std::vector<std::string> colors;
-        if (colors.size() != CUSTOM_COLOR_COUNT) {
-            colors.resize(CUSTOM_COLOR_COUNT);
-        }
-        for (int i = 0; i < CUSTOM_COLOR_COUNT; i++) {
-            colors[i] = color_to_string(m_clrData->GetCustomColour(i));
-        }
-        wxGetApp().app_config->save_custom_color_to_config(colors);
-    }
-#endif
 }
 
 void PointCtrl::BUILD()

src/slic3r/GUI/Field.hpp

@@ -22,10 +22,10 @@
 #include <boost/any.hpp>
 #include "I18N.hpp"
 
-#include <wx/colourdata.h>
+#include <wx/colour.h>
 #include <wx/spinctrl.h>
 #include <wx/bmpcbox.h>
-#include <wx/clrpicker.h>
+#include <optional>
 
 #include "libslic3r/libslic3r.h"
 #include "libslic3r/Config.hpp"
@@ -610,41 +610,27 @@ private:
 };
 
 class ColourPicker : public Field {
-	using Field::Field;
-
-    void            set_undef_value(wxColourPickerCtrl* field);
-    void            draw_bmp_btn(wxColourPickerCtrl* field, wxColour color);
 public:
 	ColourPicker(const ConfigOptionDef& opt, const t_config_option_key& id) : Field(opt, id) {}
 	ColourPicker(wxWindow* parent, const ConfigOptionDef& opt, const t_config_option_key& id) : Field(parent, opt, id) {}
-	~ColourPicker() {}
 
 	wxWindow*		window{ nullptr };
 	void			BUILD()  override;
-
-	void			set_value(const std::string& value, bool change_event = false) {
-		m_disable_change_event = !change_event;
-		dynamic_cast<wxColourPickerCtrl*>(window)->SetColour(value);
-		m_disable_change_event = false;
-	 	}
+	void			set_value(const std::string& value, bool change_event = false);
 	void			set_value(const boost::any& value, bool change_event = false) override;
 	boost::any&		get_value() override;
     void            msw_rescale() override;
     void            sys_color_changed() override;
-
-    void			enable() override { dynamic_cast<wxColourPickerCtrl*>(window)->Enable(); }
-    void			disable() override{ dynamic_cast<wxColourPickerCtrl*>(window)->Disable(); }
+    void			enable() override { if (window) window->Enable(); }
+    void			disable() override{ if (window) window->Disable(); }
 	wxWindow*		getWindow() override { return window; }
 
 private:
-    void convert_to_picker_widget(wxColourPickerCtrl *widget);
-    void on_button_click(wxCommandEvent &WXUNUSED(ev));
-    void save_colors_to_config();
-private:
-#if !defined(__linux__) && !defined(__LINUX__)
-    wxColourData*  m_clrData{nullptr};
-    wxColourPickerWidget* m_picker_widget{nullptr};
-#endif
+    // An absent result is cancellation; transparent color is the undefined field.
+    void apply_user_color(const std::optional<wxColour>& color);
+    void draw_bmp_btn();
+    void on_button_click(wxCommandEvent& event);
+    wxColour m_colour = wxTransparentColour;
 };
 
 class PointCtrl : public Field {

src/slic3r/GUI/FilamentBitmapUtils.cpp

@@ -23,7 +23,6 @@
 #include <string>
 #include <tuple>
 
-#include "EncodedFilament.hpp"
 #include "FilamentBitmapUtils.hpp"
 #include "GUI_App.hpp"
 #include "GuiColor.hpp"
@@ -278,19 +277,6 @@ static wxBitmap create_transparent_bitmap(const wxSize& size) {
     return bdc.bitmap;
 }
 
-// Sort colors by HSV values (primarily by hue, then saturation, then value)
-static void sort_colors_by_hsv(std::vector<wxColour>& colors) {
-    if (colors.size() < 2) return;
-    std::sort(colors.begin(), colors.end(),
-        [](const wxColour& a, const wxColour& b) {
-            ColourHSV ha = wxColourToHSV(a);
-            ColourHSV hb = wxColourToHSV(b);
-            if (ha.h != hb.h) return ha.h < hb.h;
-            if (ha.s != hb.s) return ha.s < hb.s;
-            return ha.v < hb.v;
-        });
-}
-
 static wxBitmap create_single_filament_bitmap(const wxColour& color, const wxSize& size)
 {
     // Check if color is transparent
@@ -430,24 +416,16 @@ wxBitmap create_filament_bitmap(const std::vector<wxColour>& colors, const wxSiz
 {
     if (colors.empty()) return wxNullBitmap;
 
-    // Make a copy to sort without modifying original
-    std::vector<wxColour> sorted_colors = colors;
-
-    // Sort colors by HSV when there are 2 or more colors
-    if (sorted_colors.size() >= 2) {
-        sort_colors_by_hsv(sorted_colors);
+    if (force_gradient && colors.size() >= 2) {
+        return create_gradient_filament_bitmap(colors, size);
     }
 
-    if (force_gradient && sorted_colors.size() >= 2) {
-        return create_gradient_filament_bitmap(sorted_colors, size);
-    }
-
-    switch (sorted_colors.size()) {
-        case 1: return create_single_filament_bitmap(sorted_colors[0], size);
-        case 2: return create_dual_filament_bitmap(sorted_colors[0], sorted_colors[1], size);
-        case 3: return create_triple_filament_bitmap(sorted_colors, size);
-        case 4: return create_quadruple_filament_bitmap(sorted_colors, size);
-        default: return create_gradient_filament_bitmap(sorted_colors, size);
+    switch (colors.size()) {
+        case 1: return create_single_filament_bitmap(colors[0], size);
+        case 2: return create_dual_filament_bitmap(colors[0], colors[1], size);
+        case 3: return create_triple_filament_bitmap(colors, size);
+        case 4: return create_quadruple_filament_bitmap(colors, size);
+        default: return create_gradient_filament_bitmap(colors, size);
     }
 }
 

src/slic3r/GUI/FilamentPickerDialog.cpp

@@ -1,4 +1,8 @@
 #include "FilamentPickerDialog.hpp"
+#include "ColorPickerDialog.hpp"
+#include "libslic3r/Color.hpp"
+#include <optional>
+#include <utility>
 #include "GUI.hpp"
 #include "I18N.hpp"
 #include "GUI_App.hpp"
@@ -79,7 +83,8 @@ void FilamentPickerDialog::StartFlashing()
     m_flash_timer->Start(50);
 }
 
-FilamentPickerDialog::FilamentPickerDialog(wxWindow *parent, const wxString& fila_id, const FilamentColor& fila_color, const std::string& fila_type)
+FilamentPickerDialog::FilamentPickerDialog(wxWindow *parent, const wxString& fila_id, const FilamentColor& fila_color, const std::string& fila_type,
+                                           std::optional<FilamentColorPickerValue> ordered_color)
     : DPIDialog(parent ? parent : wxGetApp().mainframe,
         wxID_ANY,
         _L("Select Filament"),
@@ -92,6 +97,7 @@ FilamentPickerDialog::FilamentPickerDialog(wxWindow *parent, const wxString& fil
     m_color_query = new FilamentColorCodeQuery();
     m_is_data_loaded = LoadFilamentData(fila_id);
     m_cur_filament_color = fila_color;
+    m_ordered_color = std::move(ordered_color);
     wxString color_name = m_color_query->GetFilaColorName(fila_id, fila_color);
     m_cur_color_name = new wxString(color_name);
 
@@ -441,6 +447,9 @@ wxScrolledWindow* FilamentPickerDialog::CreateColorGrid()
 
                 // Bind click
                 btn->Bind(wxEVT_LEFT_DOWN, [this, btn, color_code](wxMouseEvent& evt) {
+                    m_selection_changed = true;
+                    m_ordered_color.reset();
+                    m_custom_selection.reset();
                     m_cur_filament_color = color_code->GetFilaColor();
                     UpdatePreview(*color_code);
                     UpdateButtonStates(btn);
@@ -511,24 +520,27 @@ void FilamentPickerDialog::UpdatePreview(const FilamentColorCode& color_code)
     Layout();
 }
 
-void FilamentPickerDialog::UpdateCustomColorPreview(const wxColour& custom_color)
+void FilamentPickerDialog::UpdateCustomColorPreview(const std::vector<wxColour>& wx_colors, bool gradient)
 {
-    std::vector<wxColour> wx_colors = {custom_color};
-
     // Update preview bitmap
-    wxBitmap bmp = create_filament_bitmap(wx_colors, COLOR_DEMO_SIZE, false);
+    wxBitmap bmp = create_filament_bitmap(wx_colors, COLOR_DEMO_SIZE, gradient);
 
     if (bmp.IsOk()) {
         BOOST_LOG_TRIVIAL(debug) << "Custom color bitmap created successfully: " << bmp.GetWidth() << "x" << bmp.GetHeight();
         m_color_demo->SetBitmap(bmp);
-        m_color_demo->SetBackgroundColour(custom_color);
+        m_color_demo->SetBackgroundColour(wx_colors.front());
         m_color_demo->Refresh();
     } else {
         BOOST_LOG_TRIVIAL(error) << "Failed to create custom color bitmap";
     }
 
     // Update preview labels for custom color
-    m_label_preview_color->SetLabel(custom_color.GetAsString(wxC2S_HTML_SYNTAX));
+    wxString label;
+    for (const auto& color : wx_colors) {
+        if (!label.empty()) label += " / ";
+        label += color.GetAsString(wxC2S_HTML_SYNTAX);
+    }
+    m_label_preview_color->SetLabel(label);
     m_label_preview_idx->SetLabel("");
     Layout();
 }
@@ -557,16 +569,6 @@ void FilamentPickerDialog::CreateMoreInfoButton()
     m_more_btn->SetStyle(ButtonStyle::Regular, ButtonType::Expanded);
 }
 
-wxColourData FilamentPickerDialog::GetSingleColorData()
-{
-    wxColourData data;
-    data.SetChooseFull(true);
-    if (m_cur_filament_color.ColorCount() > 0) {
-        data.SetColour(*m_cur_filament_color.m_colors.begin());
-    }
-    return data;
-}
-
 void FilamentPickerDialog::BindEvents()
 {
     // Bind mouse events for window dragging
@@ -588,27 +590,37 @@ void FilamentPickerDialog::BindEvents()
             // Pause click detection while color picker is open
             StopClickDetection();
 
-            wxColourData original_data = GetSingleColorData();
-            wxColourData result = show_sys_picker_dialog(this, original_data);
-
-            // Resume click detection after color picker closes
-            StartClickDetection();
-
-            // Check if user actually selected a different color
-            if (result.GetColour() != original_data.GetColour()) {
-                wxColour selected_color = result.GetColour();
-
-                // Update m_current_filament_color with the selected color
-                m_cur_filament_color.m_colors.clear();
-                m_cur_filament_color.m_colors.insert(selected_color);
-                m_cur_filament_color.m_color_type = FilamentColor::ColorType::SINGLE_CLR;
-
-                // Update preview
-                UpdateCustomColorPreview(selected_color);
-
-                // Clear currently selected button since custom color selected
-                UpdateButtonStates(nullptr);
+            FilamentColorPickerValue current;
+            if (m_ordered_color) {
+                current = *m_ordered_color;
+            } else {
+                for (const auto& color : m_cur_filament_color.m_colors)
+                    current.colors.push_back(color.GetAsString(wxC2S_HTML_SYNTAX).ToStdString());
+                current.gradient = m_cur_filament_color.m_color_type == FilamentColor::ColorType::GRADIENT_CLR;
             }
+            const auto initial = filament_color_picker_initial(current);
+            std::optional<ColorSelection> selected;
+            {
+                ColorPickerDialog dialog(this, initial, {true, true}, !filament_color_picker_selection(current), m_more_btn);
+                if (dialog.ShowModal() == wxID_OK)
+                    selected = dialog.selection();
+            }
+            StartClickDetection();
+            if (!filament_color_picker_changed(initial, selected))
+                return;
+
+            m_custom_selection = selected;
+            m_ordered_color = filament_color_picker_result(*selected);
+            m_selection_changed = true;
+            std::vector<wxColour> colors;
+            m_cur_filament_color.m_colors.clear();
+            for (const auto& color : m_ordered_color->colors) {
+                colors.emplace_back(wxString::FromUTF8(color));
+                m_cur_filament_color.m_colors.insert(colors.back());
+            }
+            m_cur_filament_color.m_color_type = m_ordered_color->gradient ? FilamentColor::ColorType::GRADIENT_CLR : FilamentColor::ColorType::SINGLE_CLR;
+            UpdateCustomColorPreview(colors, m_ordered_color->gradient);
+            UpdateButtonStates(nullptr);
         });
     }
 

src/slic3r/GUI/FilamentPickerDialog.hpp

@@ -5,9 +5,10 @@
 #include "GUI.hpp"
 #include "GUI_Utils.hpp"
 #include "FilamentBitmapUtils.hpp"
+#include "ColorPickerDialog.hpp"
+#include <optional>
 #include "Widgets/Button.hpp"
 #include "EncodedFilament.hpp"
-#include <wx/colourdata.h>
 #include <wx/dialog.h>
 #include <wx/string.h>
 #include <wx/event.h>
@@ -25,10 +26,13 @@ namespace Slic3r { namespace GUI {
 class FilamentPickerDialog : public DPIDialog
 {
 public:
-    FilamentPickerDialog(wxWindow *parent, const wxString &fila_id, const FilamentColor &fila_color, const std::string &fila_type);
+    FilamentPickerDialog(wxWindow *parent, const wxString &fila_id, const FilamentColor &fila_color, const std::string &fila_type,
+                         std::optional<FilamentColorPickerValue> ordered_color = std::nullopt);
     virtual ~FilamentPickerDialog();
 
     // Public interface methods
+    bool HasSelectionChanged() const { return m_selection_changed; }
+    const std::optional<ColorSelection>& GetCustomColorSelection() const { return m_custom_selection; }
     bool IsDataLoaded() const { return m_is_data_loaded; }
     wxColour GetSelectedColour() const;
     const FilamentColor& GetSelectedFilamentColor() const { return m_cur_filament_color; }
@@ -68,7 +72,7 @@ private:
 
     // UI update methods
     void UpdatePreview(const FilamentColorCode& filament);
-    void UpdateCustomColorPreview(const wxColour& custom_color);
+    void UpdateCustomColorPreview(const std::vector<wxColour>& colors, bool gradient);
     void UpdateButtonStates(wxBitmapButton* selected_btn);
 
     // Shaped window methods
@@ -77,7 +81,6 @@ private:
 
     // Data loading
     bool LoadFilamentData(const wxString& fila_id);
-    wxColourData GetSingleColorData();
 
     // Flash effect
     void StartFlashing();
@@ -98,6 +101,9 @@ private:
     FilamentColorCodes* m_cur_color_codes{nullptr};
     wxBitmapButton* m_cur_selected_btn{nullptr};
     FilamentColor m_cur_filament_color;
+    std::optional<FilamentColorPickerValue> m_ordered_color;
+    std::optional<ColorSelection> m_custom_selection;
+    bool m_selection_changed = false;
 
     // Shaped window members
     wxBitmap m_shape_bmp;

src/slic3r/GUI/Gizmos/GLGizmoTextureDisplacement.cpp

@@ -286,22 +286,10 @@ constexpr float PREFER_PURE_DE = 2.f;
 // the quantizer's lookup cube.
 constexpr size_t MIX_TARGET_SAMPLES = size_t(1) << 20;
 constexpr size_t MIX_TARGET_BINS    = 256;
-// The longest interleave cycle a mix may use, as the denominator of its ratio. The slicer alternates
-// a mix layer by layer, so the cycle is how many layers one repeat spans; past this it stops reading
-// as a colour and starts reading as bands of its two filaments. It also sets how many mixes exist at
-// all - the coprime ratios per pair of filaments - so it is what decides how finely a gradient can be
-// stepped. Ten gives 33 ratios per pair against the 11 of six: measured on four filaments, a
-// green-to-red gradient goes from 11 usable mixes to 16, and the shipped Colour Bricks from 6 to 10.
-constexpr int MIX_MAX_DENOMINATOR = 10;
-
-// rank_mixes() stops once the best remaining mix would improve the match by less than this FRACTION
-// of what the best mix bought: a mix that only touches a few stray pixels is not worth a filament
-// slot. Relative rather than a fixed amount of CIEDE2000, because the gains decay smoothly and a
-// fixed cut lands wherever that curve happens to cross it - on a red-to-green gradient with five
-// filaments the old 0.05 kept a mix worth 0.052 and refused one worth 0.042, and it stopped at the
-// same count whether the user allowed 8 mixes or 28, and whether four filaments were loaded or six.
-// As a fraction it scales with the texture, so both the setting and the loaded filaments matter.
-constexpr double MIN_MIX_GAIN_FRACTION = 0.001;
+// rank_mixes() stops once the best remaining mix would improve the match by less than this, in
+// CIEDE2000 averaged over every pixel of the colouring layers (see mix_targets()): a mix that only
+// touches a few stray pixels is not worth a filament slot.
+constexpr float MIN_MIX_GAIN = 0.05f;
 
 // The project's mixed filament slots, one string each, as the palette cache compares them: anything
 // that changes which of them a mix can reuse changes this.
@@ -5363,7 +5351,7 @@ std::vector<GLGizmoTextureDisplacement::PaletteEntry> GLGizmoTextureDisplacement
     std::vector<PaletteEntry> candidates;
     for (int i = 0; i < n; ++i)
         for (int j = i + 1; j < n; ++j)
-            for (int den = 2; den <= MIX_MAX_DENOMINATOR; ++den)
+            for (int den = 2; den <= 6; ++den)
                 for (int num = 1; num < den; ++num) {
                     if (std::gcd(num, den) != 1)
                         continue; // 2/4 is 1/2, already there
@@ -5402,8 +5390,6 @@ std::vector<GLGizmoTextureDisplacement::PaletteEntry> GLGizmoTextureDisplacement
     std::vector<float>        current = pure_d;
     std::vector<char>         taken(nc, 0);
     std::vector<PaletteEntry> out;
-    // Set from the first mix taken, so the floor is read off this texture rather than assumed.
-    double                    floor_gain = 0.;
     const auto                counts = [&](size_t c, size_t t) {
         const float d = dist[c * nt + t];
         return d < current[t] && d <= pure_d[t] - PREFER_PURE_DE;
@@ -5423,11 +5409,8 @@ std::vector<GLGizmoTextureDisplacement::PaletteEntry> GLGizmoTextureDisplacement
                 best      = c;
             }
         }
-        // Nothing left that helps, or the remaining mixes are noise beside the first one.
-        if (best == nc || best_gain <= 0. || best_gain < floor_gain)
+        if (best == nc || best_gain < double(MIN_MIX_GAIN))
             break;
-        if (out.empty())
-            floor_gain = best_gain * MIN_MIX_GAIN_FRACTION;
         taken[best] = 1;
         out.push_back(candidates[best]);
         for (size_t t = 0; t < nt; ++t)
@@ -7375,9 +7358,8 @@ void GLGizmoTextureDisplacement::on_render_input_window(float x, float y, float
                             // physical filaments.
                             const int max_mixes = std::max(1, int(EnforcerBlockerType::ExtruderMax) - int(m_palette_filaments.size()));
                             if (int_row("##color_mix_count", _L("Mixed colors"), &opts.color_mix_count, 1, max_mixes, "%d", card_pad,
-                                        _L("The most mixed filaments a bake may add - a ceiling, not a count. They "
-                                           "are picked from the texture's colors, so a texture the filaments already "
-                                           "cover gets fewer, and only the ones the bake actually uses are created."),
+                                        _L("The most mixed filaments a bake may add. They are picked from the "
+                                           "texture's colors, and only the ones the bake actually uses are created."),
                                         { { "mixed_colors_few.png", _L("Few") }, { "mixed_colors_many.png", _L("Many") } }))
                                 m_preview_params_dirty = true;
                             // After the slider, so a change shows in the same frame.
@@ -7388,27 +7370,6 @@ void GLGizmoTextureDisplacement::on_render_input_window(float x, float y, float
                             // TRN %1% is the number of printable colors, %2% is "from N filaments".
                             ImGui::TextDisabled("%s", Slic3r::format(into_u8(_L_PLURAL("%1% printable color %2%", "%1% printable colors %2%", n_colors)),
                                                                      n_colors, from_filaments).c_str());
-                            // Two reasons the palette can hold fewer mixes than the setting asks for, and both
-                            // used to be silent, leaving the user raising a number that changed nothing. A
-                            // flat-color image is matched against the filaments alone, so it gets none at all;
-                            // otherwise the ranking stops once another mix would no longer noticeably improve
-                            // the match.
-                            const int n_mixes = std::max(0, n_colors - n_filaments);
-                            if (n_mixes < opts.color_mix_count) {
-                                const bool flat = std::any_of(mv->texture_displacement_layers.begin(),
-                                                              mv->texture_displacement_layers.end(),
-                                                              [](const TextureDisplacementLayer &l) {
-                                                                  return l.color_enabled && !l.empty() &&
-                                                                         height_texture_has_color(l) &&
-                                                                         analyze_texture_detail(l).flat_colors;
-                                                              });
-                                ImGui::PushTextWrapPos(content_rx - card_pad);
-                                ImGui::TextDisabled("%s", flat ?
-                                    _u8L("Flat-color image: each color prints in one filament, so no mixes are used.").c_str() :
-                                    Slic3r::format(_u8L("This texture uses %1% of them - more mixes would not "
-                                                        "change the result."), n_mixes).c_str());
-                                ImGui::PopTextWrapPos();
-                            }
                         }
                         if (int_row("##color_despeckle", _L("Denoise"), &opts.color_despeckle, 0, 6, "%d", card_pad,
                                     _L("Cleans up single stray triangles of the wrong color, which detail finer "

src/slic3r/GUI/Gizmos/GLGizmoTextureDisplacement.hpp

@@ -103,7 +103,7 @@ public:
     // actually pick it. Stops early once another mix would make no noticeable difference, so a texture
     // the filaments already cover gets few mixes or none.
     //
-    // Ratios are k/d for d up to MIX_MAX_DENOMINATOR: the slicer interleaves a mix layer by layer,
+    // Ratios are the short-cycle ones (k/d for d up to 6): the slicer interleaves a mix layer by layer,
     // and a long cycle prints as visible bands rather than as a colour. A mix's `rgb` is the colour its
     // mixed filament slot will show (blend_color_multi(), as the sidebar computes it), so the match, the
     // preview and the slot all agree on what the mix looks like.

src/slic3r/GUI/PresetComboBoxes.cpp

@@ -23,6 +23,8 @@
 #include "slic3r/GUI/CalibrationWizardPage.hpp"
 #include <vector>
 #include <string>
+#include <sstream>
+#include <optional>
 #include <set>
 #include <utility>
 #include <algorithm>
@@ -34,14 +36,12 @@
 #include <wx/image.h>
 #include <wx/anybutton.h>
 #include <wx/app.h>
-#include <wx/colourdata.h>
 #include <wx/sizer.h>
 #include <wx/stattext.h>
 #include <wx/string.h>
 #include <wx/textctrl.h>
 #include <wx/button.h>
 #include <wx/statbox.h>
-#include <wx/colordlg.h>
 #include <wx/wupdlock.h>
 #include <wx/menu.h>
 #include <wx/odcombo.h>
@@ -69,6 +69,7 @@
 #include "MsgDialog.hpp"
 #include "ParamsDialog.hpp"
 #include "FilamentPickerDialog.hpp"
+#include "ColorPickerDialog.hpp"
 #include "wxExtensions.hpp"
 
 #include "DeviceCore/DevManager.h"
@@ -84,6 +85,24 @@
 namespace Slic3r {
 namespace GUI {
 
+static FilamentColorPickerValue filament_color_picker_value(const DynamicPrintConfig& config, std::size_t index)
+{
+    FilamentColorPickerValue value;
+    if (const auto* primary = config.opt<ConfigOptionStrings>("filament_colour"); primary && index < primary->values.size())
+        value.primary = primary->values[index];
+    if (const auto* multi = config.opt<ConfigOptionStrings>("filament_multi_colour"); multi && index < multi->values.size()) {
+        std::istringstream stream(multi->values[index]);
+        for (std::string color; stream >> color;)
+            value.colors.push_back(std::move(color));
+    }
+    if (value.colors.empty() && !value.primary.empty())
+        value.colors.push_back(value.primary);
+    if (const auto* types = config.opt<ConfigOptionStrings>("filament_colour_type"); types && index < types->values.size())
+        value.gradient = value.colors.size() > 1 && types->values[index] == "0";
+    return value;
+}
+
+
 #define BORDER_W 10
 
 // ---------------------------------
@@ -911,31 +930,37 @@ PlaterPresetComboBox::PlaterPresetComboBox(wxWindow *parent, Preset::Type preset
                 FilamentColor fila_color = get_cur_color_info();
 
                 // Show filament picker dialog
-                FilamentPickerDialog dialog(this, fila_id, fila_color, fila_type);
+                FilamentPickerDialog dialog(this, fila_id, fila_color, fila_type,
+                    filament_color_picker_value(m_preset_bundle->project_config, m_filament_idx));
 
                 if (!dialog.IsDataLoaded()) {
                     // If FilamentPicker fails, fallback to default color picker
                     show_default_color_picker();
-                } else if (dialog.ShowModal() == wxID_OK) {
-                    // Get selected filament color data
-                    FilamentColor fila_color = dialog.GetSelectedFilamentColor();
-
-                    // Check if we have valid color data
-                    if (!fila_color.m_colors.empty()) {
-                        // Convert to storage format
-                        std::vector<std::string> colors;
-                        for (const wxColour& color : fila_color.m_colors) {
-                            colors.push_back(color.GetAsString(wxC2S_HTML_SYNTAX).ToStdString());
-                        }
-
-                        bool is_gradient = (fila_color.m_color_type == FilamentColor::ColorType::GRADIENT_CLR);
-                        this->sync_colour_config(colors, is_gradient);
+                } else if (dialog.ShowModal() == wxID_OK && dialog.HasSelectionChanged()) {
+                    if (const auto& custom = dialog.GetCustomColorSelection()) {
+                        const auto value = filament_color_picker_result(*custom);
+                        sync_colour_config(value.colors, value.gradient);
                     } else {
-                        // Fallback to basic color if no FilamentColor data
-                        wxColour selected_color = dialog.GetSelectedColour();
-                        if (selected_color.IsOk()) {
-                            std::vector<std::string> color = {selected_color.GetAsString(wxC2S_HTML_SYNTAX).ToStdString()};
-                            this->sync_colour_config(color, false);
+                        // Get selected filament color data
+                        FilamentColor fila_color = dialog.GetSelectedFilamentColor();
+
+                        // Check if we have valid color data
+                        if (!fila_color.m_colors.empty()) {
+                            // Convert to storage format
+                            std::vector<std::string> colors;
+                            for (const wxColour& color : fila_color.m_colors) {
+                                colors.push_back(color.GetAsString(wxC2S_HTML_SYNTAX).ToStdString());
+                            }
+
+                            bool is_gradient = (fila_color.m_color_type == FilamentColor::ColorType::GRADIENT_CLR);
+                            this->sync_colour_config(colors, is_gradient);
+                        } else {
+                            // Fallback to basic color if no FilamentColor data
+                            wxColour selected_color = dialog.GetSelectedColour();
+                            if (selected_color.IsOk()) {
+                                std::vector<std::string> color = {selected_color.GetAsString(wxC2S_HTML_SYNTAX).ToStdString()};
+                                this->sync_colour_config(color, false);
+                            }
                         }
                     }
                 }
@@ -1091,30 +1116,8 @@ bool PlaterPresetComboBox::switch_to_tab()
 
 void PlaterPresetComboBox::change_extruder_color()
 {
-    // get current color
-    DynamicPrintConfig* cfg = &wxGetApp().preset_bundle->project_config;
-    auto colors = static_cast<ConfigOptionStrings*>(cfg->option("filament_colour")->clone());
-    wxColour clr(colors->values[m_filament_idx]);
-    if (!clr.IsOk())
-        clr = wxColour(0, 0, 0); // Don't set alfa to transparence
-
-    auto data = new wxColourData();
-    data->SetChooseFull(1);
-    data->SetColour(clr);
-
-    wxColourDialog dialog(this, data);
-    dialog.CenterOnParent();
-    if (dialog.ShowModal() == wxID_OK)
-    {
-        colors->values[m_filament_idx] = dialog.GetColourData().GetColour().GetAsString(wxC2S_HTML_SYNTAX).ToStdString();
-
-        DynamicPrintConfig cfg_new = *cfg;
-        cfg_new.set_key_value("filament_colour", colors);
-
-        wxGetApp().get_tab(Preset::TYPE_PRINTER)->load_config(cfg_new);
-        this->update();
-        wxGetApp().plater()->on_config_change(cfg_new);
-    }
+    // The Linux sidebar menu edits the same ordered project color as its swatch.
+    show_default_color_picker();
 }
 
 void PlaterPresetComboBox::show_add_menu()
@@ -1608,19 +1611,12 @@ FilamentColor PlaterPresetComboBox::get_cur_color_info()
 
 void PlaterPresetComboBox::show_default_color_picker()
 {
-    DynamicPrintConfig* cfg = &wxGetApp().preset_bundle->project_config;
-    auto colors = static_cast<ConfigOptionStrings*>(cfg->option("filament_colour")->clone());
-    wxColour current_clr(colors->values[m_filament_idx]);
-    if (!current_clr.IsOk())
-        current_clr = wxColour(0, 0, 0); // Don't set alfa to transparence
-
-    m_clrData.SetColour(current_clr);
-
-    wxColourData data = show_sys_picker_dialog(this, m_clrData);
-    if (m_clrData.GetColour() != data.GetColour()) {
-        std::vector<std::string> color = {data.GetColour().GetAsString(wxC2S_HTML_SYNTAX).ToStdString()};
-        m_clrData.SetColour(data.GetColour());
-        sync_colour_config(color, false);
+    const auto value = filament_color_picker_value(wxGetApp().preset_bundle->project_config, m_filament_idx);
+    const auto initial = filament_color_picker_initial(value);
+    ColorPickerDialog dialog(this, initial, {true, true}, !filament_color_picker_selection(value), clr_picker);
+    if (dialog.ShowModal() == wxID_OK && filament_color_picker_changed(initial, dialog.selection())) {
+        const auto selected = filament_color_picker_result(*dialog.selection());
+        sync_colour_config(selected.colors, selected.gradient);
     }
 }
 

src/slic3r/GUI/PresetComboBoxes.hpp

@@ -11,7 +11,6 @@
 #include "libslic3r/PrintConfig.hpp"
 #include <map>
 #include <utility>
-#include <wx/colourdata.h>
 #include <wx/event.h>
 #include <wx/gdicmn.h>
 #include <wx/clrpicker.h>
@@ -201,7 +200,6 @@ public:
 
     // BBS
     wxButton* clr_picker { nullptr };
-    wxColourData m_clrData;
 
     wxColor get_color() { return m_color; }
 

src/slic3r/GUI/StatusPanel.hpp

@@ -1,6 +1,8 @@
 #ifndef slic3r_StatusPanel_hpp_
 #define slic3r_StatusPanel_hpp_
 
+#include <vector>
+
 #include "libslic3r/ProjectTask.hpp"
 #include "DeviceManager.hpp"
 #include "MonitorPage.hpp"
@@ -66,6 +68,7 @@
 #include "StagedBuild.hpp"
 
 class StepIndicator;
+class wxChoice;
 
 #define COMMAND_TIMEOUT         5
 
@@ -140,28 +143,36 @@ class ExtruderImage : public wxWindow
     ScalableBitmap *m_left_extruder_active_empty;
     ScalableBitmap *m_left_extruder_unactive_filled;
     ScalableBitmap *m_left_extruder_unactive_empty;
+
     ScalableBitmap *m_right_extruder_active_filled;
     ScalableBitmap *m_right_extruder_active_empty;
     ScalableBitmap *m_right_extruder_unactive_filled;
     ScalableBitmap *m_right_extruder_unactive_empty;
-
+    
     ScalableBitmap *m_extruder_single_nozzle_empty_load;
     ScalableBitmap *m_extruder_single_nozzle_empty_unload;
     ScalableBitmap *m_extruder_single_nozzle_filled_load;
     ScalableBitmap *m_extruder_single_nozzle_filled_unload;
-
+    
     ExtruderState m_left_ext_state   = {ExtruderState::EMPTY_LOAD};
     ExtruderState m_right_ext_state  = {ExtruderState::EMPTY_LOAD};
     ExtruderState m_single_ext_state = {ExtruderState::EMPTY_LOAD};
+    std::vector<ExtruderState> m_multi_extruder_states;
+    bool m_generic_nozzle_display{false};
 
 public:
     void update(int nozzle_num, int nozzle_id);
     void update(ExtruderState single_state);
     void update(ExtruderState right_state, ExtruderState left_state);
 
+    void update(ExtruderState state, int idx);
+
     void msw_rescale();
+    void updateGenericSize();
     void setExtruderCount(int nozzle_num);
+    void setGenericNozzleDisplay(bool enabled);
     void setExtruderUsed(std::string loc);
+    void setExtruderUsed(int nozzle_idx);
     void paintEvent(wxPaintEvent &evt);
 
     void     render(wxDC &dc);
@@ -495,6 +506,8 @@ protected:
     std::vector<ExtruderImage *> m_extruderImage;
 
     SwitchBoard *   m_nozzle_btn_panel;
+    wxChoice*       m_generic_nozzle_selector{nullptr};
+    int             m_generic_nozzle_selector_count{0};
 
     wxStaticText *  m_text_tasklist_caption;
 
@@ -507,10 +520,23 @@ protected:
     wxBoxSizer *    m_misc_ctrl_sizer;
     StaticBox*      m_fan_panel;
     StaticLine *    m_line_nozzle;
-    TempInput*      m_tempCtrl_nozzle;
+    wxWindowID      m_nozzle_temp_control_id{wxID_ANY};
+    wxWindow*       m_temp_nozzle_parent{nullptr};
+    wxBoxSizer*     m_temp_nozzle_sizer{nullptr};
+    size_t          m_temp_nozzle_active_count{0};
+    TempInput*      m_tempCtrl_nozzle{nullptr};
     int             m_temp_nozzle_timeout{ 0 };
-    TempInput*      m_tempCtrl_nozzle_deputy;
+    TempInput*      m_tempCtrl_nozzle_deputy{nullptr};
     int             m_temp_nozzle_deputy_timeout{ 0 };
+
+    std::vector<TempInput*> m_tempCtrl_nozzles;
+    std::vector<int> m_temp_nozzle_timeouts;
+
+    // Last (dev_id, device toolhead count, preset nozzle count) we warned about, to avoid log spam.
+    std::string m_last_mismatch_dev_id;
+    int         m_last_mismatch_device_count{-1};
+    int         m_last_mismatch_preset_count{-1};
+
     TempInput *     m_tempCtrl_bed;
     int             m_temp_bed_timeout {0};
     TempInput *     m_tempCtrl_chamber;
@@ -550,6 +576,7 @@ protected:
 
     /* AMS control box <-> live nozzle-rack panel toggle (rack printers only) */
     SwitchBoard*    m_ams_rack_switch{ nullptr };
+    MultiSwitchButton* m_ams_nozzle_switch{ nullptr };
 
     AMSControl*     m_ams_control;
     StaticBox*      m_ams_control_box;
@@ -624,6 +651,9 @@ public:
 
     wxBoxSizer *create_temp_axis_group(wxWindow *parent);
     wxBoxSizer *create_temp_control(wxWindow *parent);
+    TempInput* create_nozzle_temp_control(wxWindow *parent, wxWindowID id);
+    void set_temp_input_colors(TempInput* temp_ctrl);
+    void ensure_nozzle_temp_controls(size_t count);
     wxBoxSizer *create_misc_control(wxWindow *parent);
     wxBoxSizer *create_axis_control(wxWindow *parent);
     wxPanel *create_bed_control(wxWindow *parent);
@@ -654,6 +684,7 @@ private:
     friend class MonitorPanel;
     void wire_controls();
     bool load_thumbnail_from_url(const wxString &url, MachineObject *obj);
+    void sync_nozzle_temp_controls(size_t count);
 
 protected:
     std::shared_ptr<SliceInfoPopup> m_slice_info_popup;
@@ -801,6 +832,7 @@ protected:
     void update_cloud_subtask(MachineObject *obj);
     void update_sdcard_subtask(MachineObject *obj);
     void update_temp_ctrl(MachineObject *obj);
+    void check_extruder_count_mismatch(MachineObject* obj);
     void update_misc_ctrl(MachineObject *obj);
     void update_ams(MachineObject* obj);
     void update_rack(MachineObject* obj);

src/slic3r/GUI/TextureImportDialog.cpp

@@ -10,6 +10,11 @@
 #include "GUI_App.hpp"
 #include "MsgDialog.hpp"
 #include "ColorDecomposeDialog.hpp"
+#include "ColorPickerDialog.hpp"
+#include "libslic3r/Color.hpp"
+#include <optional>
+#include <variant>
+#include <wx/weakref.h>
 #include "ColorDecomposeSupport.hpp"
 #include "Widgets/StateColor.hpp"
 #include "Widgets/StaticLine.hpp"
@@ -32,9 +37,7 @@
 #include <mutex>
 #include <wx/button.h>
 #include <wx/colour.h>
-#include <wx/colordlg.h>
 #include <wx/dc.h>
-#include <wx/colourdata.h>
 #include <wx/dcclient.h>
 #include <wx/dcbuffer.h>
 #include <wx/dialog.h>
@@ -509,30 +512,6 @@ static wxString auto_mix_mode_label(TextureAutoMixMode mode)
                                              _L("One-click RYBW auto-mix");
 }
 
-static wxPoint constrained_dialog_position(wxWindow* anchor, const wxSize& dialog_size)
-{
-    if (!anchor)
-        return wxDefaultPosition;
-
-    wxSize size = dialog_size;
-    if (size.x <= 0 || size.y <= 0)
-        size = wxSize(anchor->FromDIP(450), anchor->FromDIP(350));
-
-    wxPoint pos = anchor->ClientToScreen(wxPoint(0, anchor->GetSize().y));
-    wxRect display_rect;
-    int display_idx = wxDisplay::GetFromPoint(pos);
-    if (display_idx != wxNOT_FOUND)
-        display_rect = wxDisplay(display_idx).GetClientArea();
-    else
-        display_rect = wxDisplay().GetClientArea();
-
-    pos.x = std::clamp(pos.x, display_rect.GetLeft(),
-                       std::max(display_rect.GetLeft(), display_rect.GetRight() - size.x));
-    pos.y = std::clamp(pos.y, display_rect.GetTop(),
-                       std::max(display_rect.GetTop(), display_rect.GetBottom() - size.y));
-    return pos;
-}
-
 // ============================================================
 // FilamentSelectPopup
 // ============================================================
@@ -653,24 +632,22 @@ public:
             auto on_add_filament = m_on_add_filament;
             wxWindow* popup_parent = GetParent();
             wxWindow* color_anchor = m_dialog_anchor ? m_dialog_anchor : popup_parent;
+            wxWeakRef<FilamentSelectPopup> popup(this);
             m_closing_from_action = true;
-            Dismiss();
-            wxColourData cd;
-            cd.SetChooseFull(true);
-            wxColourDialog dlg(popup_parent, &cd);
-            auto move_color_dialog = [&dlg, color_anchor]() {
-                dlg.Move(constrained_dialog_position(color_anchor, dlg.GetBestSize()));
-            };
-            dlg.Bind(wxEVT_SHOW, [move_color_dialog](wxShowEvent& e) mutable {
-                e.Skip();
-                if (e.IsShown())
-                    move_color_dialog();
-            });
-            move_color_dialog();
-            if (dlg.ShowModal() == wxID_OK) {
-                wxColour clr = dlg.GetColourData().GetColour();
-                if (on_add_filament) on_add_filament(clr);
+            std::optional<wxColour> selected;
+            {
+                // Capture the stable mapping row before the transient popup is dismissed.
+                ColorPickerDialog dlg(popup_parent, ColorRGBA(0.f, 0.f, 0.f, 1.f), {}, false, color_anchor);
+                if (popup) popup->Dismiss();
+                // Dismissal can delete the popup. Only copied locals are used below.
+                if (dlg.ShowModal() == wxID_OK && dlg.selection()) {
+                    const auto& color = std::get<ColorRGBA>(*dlg.selection());
+                    selected = wxColour(static_cast<unsigned char>(std::lround(color.r() * 255.f)),
+                                        static_cast<unsigned char>(std::lround(color.g() * 255.f)),
+                                        static_cast<unsigned char>(std::lround(color.b() * 255.f)));
+                }
             }
+            if (selected && on_add_filament) on_add_filament(*selected);
         });
 
         m_content->SetSizer(outer);

src/slic3r/GUI/Widgets/AMSControl.cpp

@@ -244,7 +244,7 @@ AMSControl::AMSControl(wxWindow *parent, wxWindowID id, const wxPoint &pos, cons
     m_sizer_ams_body->Add(m_sizer_ams_area_right, wxALIGN_CENTER, 0);
 
     m_sizer_body->Add(m_sizer_ams_items, 0, wxALIGN_CENTER, 0);
-    m_sizer_body->Add(0, 0, 1, wxEXPAND | wxTOP, FromDIP(10));
+    m_sizer_ams_gap = m_sizer_body->Add(0, 0, 1, wxEXPAND | wxTOP, FromDIP(10));
     m_sizer_body->Add(m_sizer_ams_body, 0, wxALIGN_CENTER, 0);
     m_sizer_body->Add(m_sizer_down_road, 0, wxALIGN_CENTER, 0);
     m_sizer_body->Add(m_sizer_ams_option, 0, wxEXPAND, 0);
@@ -371,7 +371,7 @@ bool AMSControl::IsAmsInRightPanel(std::string ams_id) {
             return false;
         }
     }
-    else{
+    else if (m_total_ext_count == 1){
         for (auto id : m_item_ids[MAIN_EXTRUDER_ID]){
             if (id == ams_id){
                 return true;
@@ -379,6 +379,10 @@ bool AMSControl::IsAmsInRightPanel(std::string ams_id) {
         }
         return false;
     }
+    else {
+        // Generic N Nozzles
+    }
+    return false;
 }
 
 void AMSControl::AmsSelectedSwitch(wxCommandEvent& event) {
@@ -519,7 +523,7 @@ void AMSControl::msw_rescale()
     m_button_ams_setting_press.msw_rescale();
     m_button_ams_setting->SetBitmap(m_button_ams_setting_normal.bmp());
 
-    m_extruder->msw_rescale();
+    if (m_extruder) m_extruder->msw_rescale();
 
     if (m_button_extruder_feed) m_button_extruder_feed->Rescale(); // ORCA
     if (m_button_extruder_back) m_button_extruder_back->Rescale(); // ORCA
@@ -603,6 +607,8 @@ void AMSControl::CreateAms()
 
 
 void AMSControl::ClearAms() {
+    m_sizer_ams_items->Clear(false);
+
     m_simplebook_ams_right->DeleteAllPages();
     m_simplebook_ams_left->DeleteAllPages();
     m_simplebook_ams_right->DestroyChildren();
@@ -613,7 +619,7 @@ void AMSControl::ClearAms() {
     m_simplebook_ams_left->Refresh();
 
     for (auto it : m_ams_preview_list) {
-        delete it.second;
+        if (it.second) it.second->Destroy();
     }
     m_ams_preview_list.clear();
     m_ext_image_list.clear();
@@ -624,12 +630,181 @@ void AMSControl::ClearAms() {
     m_ams_item_list.clear();
     m_sizer_prv_right->Clear();
     m_sizer_prv_left->Clear();
-    m_item_ids = { {}, {} };
+
+    if (m_nozzle_book) {
+        m_nozzle_book->Destroy();
+        m_nozzle_book = nullptr;
+    } else {
+        for (auto &pane : m_nozzle_panes) {
+            if (pane.preview_panel) pane.preview_panel->Destroy();
+            if (pane.ams_book) pane.ams_book->Destroy();
+            if (pane.page) pane.page->Destroy();
+        }
+    }
+    m_item_ids.assign(std::max(m_total_ext_count, 2), {});
+    m_nozzle_panes.clear();
+    m_active_nozzle_id = 0;
+    m_current_ams.clear();
+    m_current_show_ams_left.clear();
+    m_current_show_ams_right.clear();
     pair_id.clear();
 }
 
+void AMSControl::restore_legacy_ams_layout()
+{
+    m_sizer_ams_items->Clear(false);
+    m_sizer_ams_items->SetOrientation(wxHORIZONTAL);
+    m_sizer_body->GetItem(m_sizer_ams_items)->SetFlag(wxALIGN_CENTER);
+    m_sizer_ams_items->Add(m_panel_prv_left, 0, wxLEFT | wxRIGHT, FromDIP(5));
+    m_sizer_ams_items->Add(m_panel_prv_right, 0, wxLEFT | wxRIGHT, FromDIP(5));
+
+    m_panel_prv_left->Show();
+    m_panel_prv_right->Show();
+    m_simplebook_ams_left->Show();
+    m_simplebook_ams_right->Show();
+    m_panel_down_road->Show();
+    m_sizer_body->Show(m_sizer_ams_body, true);
+    m_sizer_option_mid->Show(m_extruder, true);
+    m_down_road->SetSingleSideLayout(false);
+    m_sizer_ams_gap->SetProportion(1);
+    m_sizer_ams_gap->SetBorder(FromDIP(10));
+    m_down_road->SetNozzleCount(m_total_ext_count);
+}
+
+bool AMSControl::use_multi_nozzle_layout() const
+{
+    const bool is_bbl = wxGetApp().preset_bundle && wxGetApp().preset_bundle->is_bbl_vendor();
+    return is_bbl ? m_total_ext_count > 2 : m_nozzle_book != nullptr;
+}
+
+void AMSControl::CreateAmsMultiNozzle(const std::string &series_name, const std::string &printer_type) {
+    const size_t pane_count = static_cast<size_t>(std::max(m_total_ext_count, 0));
+    m_nozzle_panes.resize(pane_count);
+    m_active_nozzle_id = 0;
+
+    m_sizer_ams_items->Clear(false);
+    m_sizer_ams_items->SetOrientation(wxVERTICAL);
+    m_sizer_body->GetItem(m_sizer_ams_items)->SetFlag(wxALIGN_CENTER);
+    m_sizer_body->Show(m_sizer_ams_body, false);
+    m_sizer_ams_gap->SetProportion(0);
+    m_sizer_ams_gap->SetBorder(0);
+
+    m_panel_prv_left->Hide();
+    m_panel_prv_right->Hide();
+    m_simplebook_ams_left->Hide();
+    m_simplebook_ams_right->Hide();
+    m_panel_down_road->Show();
+    m_sizer_option_mid->Show(m_extruder, true);
+    m_switcher->Hide();
+    m_down_road->SetNozzleCount(1);
+    m_down_road->SetSingleSideLayout(true, AMSPanelPos::LEFT_PANEL);
+    m_down_road->UpdateLeft(1, AMSRoadShowMode::AMS_ROAD_MODE_SINGLE);
+    m_down_road->UpdateRight(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+    m_extruder->updateNozzleNum(1, series_name);
+
+    m_nozzle_book = new wxSimplebook(m_amswin, wxID_ANY, wxDefaultPosition, wxDefaultSize, 0);
+    m_nozzle_book->SetMinSize(wxSize(FromDIP(264), -1));
+    m_nozzle_book->SetBackgroundColour(StateColor::darkModeColorFor(AMS_CONTROL_DEF_BLOCK_BK_COLOUR));
+    m_sizer_ams_items->Add(m_nozzle_book, 0, wxALIGN_CENTER);
+
+    for (size_t nozzle_id = 0; nozzle_id < pane_count; ++nozzle_id) {
+        auto &pane = m_nozzle_panes[nozzle_id];
+        // A generic page is one H2C side. Keep the left-side geometry as the
+        // canonical single-nozzle presentation; the road and AMS item code
+        // still use the same side-specific paths as the legacy layout.
+        pane.panel_pos = AMSPanelPos::LEFT_PANEL;
+        pane.page = new wxPanel(m_nozzle_book, wxID_ANY);
+        pane.page->SetMinSize(wxSize(FromDIP(264), -1));
+        pane.page->SetBackgroundColour(StateColor::darkModeColorFor(AMS_CONTROL_DEF_BLOCK_BK_COLOUR));
+        pane.page_sizer = new wxBoxSizer(wxVERTICAL);
+        pane.page->SetSizer(pane.page_sizer);
+
+        pane.preview_panel = new wxScrolledWindow(pane.page, wxID_ANY);
+        pane.preview_panel->SetScrollRate(10, 0);
+        pane.preview_panel->SetSize(AMS_ITEMS_PANEL_SIZE);
+        pane.preview_panel->SetMinSize(AMS_ITEMS_PANEL_SIZE);
+        pane.preview_panel->SetBackgroundColour(StateColor::darkModeColorFor(AMS_CONTROL_DEF_BLOCK_BK_COLOUR));
+
+        pane.preview_sizer = new wxBoxSizer(wxHORIZONTAL);
+        pane.preview_panel->SetSizer(pane.preview_sizer);
+
+        // Generic lane cards grow to their calculated width for 1-8 lanes. Keep the
+        // book at the legacy minimum, but allow the page to expand to that width.
+        pane.ams_book = new wxSimplebook(pane.page, wxID_ANY, wxDefaultPosition, wxDefaultSize, 0);
+        pane.ams_book->SetMinSize(wxSize(FromDIP(264), -1));
+        pane.ams_book->SetBackgroundColour(StateColor::darkModeColorFor(AMS_CONTROL_DEF_BLOCK_BK_COLOUR));
+        // wxALIGN_CENTER does not centre horizontally inside a HORIZONTAL sizer, so a book wider
+        // than pane.ams_area's own minimum would sit at ams_area's left edge and overflow to the
+        // right, shifting the whole card column off the shared down-road connector axis. A pair of
+        // stretch spacers keeps the book centred on the pane (and thus on the connector) at any
+        // book width; ams_area is expanded below so the spacers have room to work with.
+        pane.ams_area = new wxBoxSizer(wxHORIZONTAL);
+        pane.ams_area->AddStretchSpacer(1);
+        pane.ams_area->Add(pane.ams_book, 0, wxALIGN_CENTER, 0);
+        pane.ams_area->AddStretchSpacer(1);
+
+        pane.page_sizer->Add(pane.preview_panel, 0, wxALIGN_CENTER | wxTOP, FromDIP(5));
+        pane.page_sizer->Add(pane.ams_area, 0, wxEXPAND | wxTOP, FromDIP(10));
+
+        m_nozzle_book->AddPage(pane.page, wxEmptyString, nozzle_id == 0);
+    }
+
+    auto add_info = [this, series_name, printer_type, pane_count](AMSinfo info) {
+        if (pane_count == 0) return;
+
+        info.nozzle_id = std::clamp(info.nozzle_id, 0, static_cast<int>(pane_count) - 1);
+        AddAmsPreview(info, info.ams_type);
+        if (info.ams_type == AMSModel::EXT_AMS && info.cans.size() == 1)
+            AddAms({info}, series_name, printer_type, m_nozzle_panes[info.nozzle_id].panel_pos);
+        else
+            AddAms(info);
+    };
+
+    for (const auto &info : m_ams_info)
+        add_info(info);
+
+    for (auto &info : m_ext_info) {
+        const int virtual_tray_id = std::atoi(info.ams_id.c_str());
+        if (virtual_tray_id <= VIRTUAL_TRAY_MAIN_ID &&
+            virtual_tray_id >= VIRTUAL_TRAY_MAIN_ID - static_cast<int>(pane_count) + 1)
+            info.nozzle_id = VIRTUAL_TRAY_MAIN_ID - virtual_tray_id;
+        add_info(info);
+    }
+
+    for (auto &pane : m_nozzle_panes) {
+        if (pane.ams_book && pane.ams_book->GetPageCount() > 0)
+            pane.ams_book->SetSelection(0);
+        if (pane.preview_sizer) pane.preview_sizer->Layout();
+        if (pane.preview_panel) pane.preview_panel->FitInside();
+        if (pane.ams_book) pane.ams_book->Layout();
+        if (pane.page) pane.page->Layout();
+
+        if (!pane.current_ams.empty()) {
+            auto preview = m_ams_preview_list.find(pane.current_ams);
+            if (preview != m_ams_preview_list.end() && preview->second)
+                preview->second->OnSelected();
+        }
+    }
+
+    if (m_nozzle_book && pane_count > 0) {
+        m_nozzle_book->SetSelection(0);
+        m_current_ams = m_nozzle_panes[0].current_ams;
+        if (!m_current_ams.empty())
+            SwitchAms(m_current_ams);
+        else {
+            m_down_road->UpdateLeft(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+            m_down_road->UpdateRight(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+        }
+    }
+    m_amswin->Layout();
+    m_amswin->Fit();
+    // Generic N Nozzles
+}
+
 void AMSControl::CreateAmsDoubleNozzle(const std::string &series_name, const std::string &printer_type)
 {
+    restore_legacy_ams_layout();
+
     std::vector<AMSinfo> single_info_left;
     std::vector<AMSinfo> single_info_right;
 
@@ -751,6 +926,8 @@ void AMSControl::CreateAmsDoubleNozzle(const std::string &series_name, const std
 
 void AMSControl::CreateAmsSingleNozzle(const std::string &series_name, const std::string &printer_type)
 {
+    restore_legacy_ams_layout();
+
     std::vector<int>m_item_nums{0,0};
     std::vector<AMSinfo> single_info;
 
@@ -979,6 +1156,17 @@ void AMSControl::UpdateAms(const std::string   &series_name,
                 if (m_ams_info[i].routes_to_main_extruder() != ams_info[i].routes_to_main_extruder()) {
                     fresh = true;
                 }
+                if (m_ams_info[i].nozzle_id != ams_info[i].nozzle_id) {
+                    fresh = true;
+                }
+            }
+
+            for (int i = 0; i < static_cast<int>(m_ext_info.size()); ++i) {
+                if (m_ext_info[i].ams_id != ext_info[i].ams_id ||
+                    m_ext_info[i].nozzle_id != ext_info[i].nozzle_id ||
+                    m_ext_info[i].ext_type != ext_info[i].ext_type) {
+                    fresh = true;
+                }
             }
         }
         else{
@@ -993,11 +1181,16 @@ void AMSControl::UpdateAms(const std::string   &series_name,
         m_dev_id = dev_id;
         if (fresh){
             ClearAms();
-            if (m_total_ext_count >= 2){
-                CreateAmsDoubleNozzle(series_name, printer_type);
-            }else{
-                CreateAmsSingleNozzle(series_name, printer_type);
+            bool is_bbl = wxGetApp().preset_bundle && wxGetApp().preset_bundle->is_bbl_vendor();
+            if (is_bbl) {
+                if (m_total_ext_count == 1)
+                    CreateAmsSingleNozzle(series_name, printer_type);
+                else if (m_total_ext_count == 2)
+                    CreateAmsDoubleNozzle(series_name, printer_type);
             }
+            else
+                CreateAmsMultiNozzle(series_name, printer_type);
+
             SetSize(wxSize(FromDIP(578), -1));
             SetMinSize(wxSize(FromDIP(578), -1));
             Layout();
@@ -1070,7 +1263,7 @@ void AMSControl::UpdateAms(const std::string   &series_name,
     }
 
     /*update ams extruder*/
-    if (m_extruder->updateNozzleNum(m_total_ext_count, series_name))
+    if (m_total_ext_count <= 2 && m_extruder->updateNozzleNum(m_total_ext_count, series_name))
     {
         m_amswin->Layout();
     }
@@ -1106,7 +1299,15 @@ void AMSControl::AddAmsPreview(AMSinfo info, AMSModel type)
 {
     AMSPreview *ams_prv = nullptr;
 
-    if (info.routes_to_main_extruder())
+    // Match AddAms: the generic multi-nozzle layout's preview panel is the visible one for
+    // non-Bambu vendors at any extruder count, not only above two.
+    if (use_multi_nozzle_layout()) {
+        const int nozzle_id = std::clamp(info.nozzle_id, 0, m_total_ext_count - 1);
+        auto &pane = m_nozzle_panes[nozzle_id];
+        ams_prv = new AMSPreview(pane.preview_panel, wxID_ANY, info, type);
+        pane.preview_sizer->Add(ams_prv, 0, wxALIGN_CENTER | wxLEFT, FromDIP(6));
+    }
+    else if (info.routes_to_main_extruder())
     {
         ams_prv = new AMSPreview(m_panel_prv_right, wxID_ANY, info, type);
         m_sizer_prv_right->Add(ams_prv, 0, wxALIGN_CENTER | wxLEFT, FromDIP(6));
@@ -1129,6 +1330,54 @@ void AMSControl::AddAmsPreview(AMSinfo info, AMSModel type)
 void AMSControl::createAms(wxSimplebook* parent, int& idx, AMSinfo info, AMSPanelPos pos) {
     auto ams_item = new AmsItem(parent, info, info.ams_type, pos);
     parent->InsertPage(idx, ams_item, wxEmptyString, true);
+
+    // Generic AMS cards may be wider than the legacy 264 DIP page. Propagate
+    // that calculated width through the page and simplebook so 5-8 lanes are
+    // laid out fully instead of being clipped by the old minimum width.
+    if (info.ams_type == AMSModel::GENERIC_AMS) {
+        const int required_width = ams_item->GetMinSize().x;
+        if (required_width > 0) {
+            const int page_width = std::max(parent->GetMinSize().x, required_width);
+            parent->SetMinSize(wxSize(page_width, -1));
+            if (auto *page = parent->GetParent()) {
+                page->SetMinSize(wxSize(std::max(page->GetMinSize().x, page_width), -1));
+                if (auto *nozzle_book = page->GetParent())
+                    nozzle_book->SetMinSize(wxSize(std::max(nozzle_book->GetMinSize().x, page_width), -1));
+            }
+        }
+        // Above eight lanes, AmsItem is a fixed-minimum viewport over a wider
+        // lane strip. Expand the viewport through its page's sizers rather
+        // than propagating the strip's virtual width into the card/book.
+        // Reset back to the centered fixed layout for eight or fewer lanes so a
+        // later small unit is not left in expand mode.
+        const bool generic_lane_layout = !wxGetApp().preset_bundle || !wxGetApp().preset_bundle->is_bbl_vendor();
+        if (generic_lane_layout) {
+            if (auto *page = parent->GetParent()) {
+                auto pane = std::find_if(m_nozzle_panes.begin(), m_nozzle_panes.end(),
+                    [page](const NozzleAmsPane &candidate) { return candidate.page == page; });
+                if (pane != m_nozzle_panes.end() && m_nozzle_book) {
+                    const bool expand_viewport = info.cans.size() > 8;
+                    if (auto *book_item = pane->ams_area->GetItem(pane->ams_book)) {
+                        book_item->SetProportion(expand_viewport ? 1 : 0);
+                        book_item->SetFlag(expand_viewport ? wxEXPAND : wxALIGN_CENTER);
+                    }
+                    // Keep the centring spacers (items 0 and 2) elastic only in the centred layout;
+                    // in the >8-lane viewport they must collapse so the book can fill ams_area.
+                    if (auto *lead = pane->ams_area->GetItem(static_cast<size_t>(0)))
+                        lead->SetProportion(expand_viewport ? 0 : 1);
+                    if (auto *trail = pane->ams_area->GetItem(static_cast<size_t>(2)))
+                        trail->SetProportion(expand_viewport ? 0 : 1);
+                    if (auto *area_item = pane->page_sizer->GetItem(pane->ams_area))
+                        area_item->SetFlag(wxEXPAND | wxTOP);
+                    if (auto *nozzle_book_item = m_sizer_ams_items->GetItem(m_nozzle_book))
+                        nozzle_book_item->SetFlag(expand_viewport ? wxEXPAND : wxALIGN_CENTER);
+                    if (auto *items_item = m_sizer_body->GetItem(m_sizer_ams_items))
+                        items_item->SetFlag(expand_viewport ? wxEXPAND : wxALIGN_CENTER);
+                    m_amswin->Layout();
+                }
+            }
+        }
+    }
     ams_item->set_selection(idx);
     idx++;
 
@@ -1153,7 +1402,10 @@ AMSRoadShowMode AMSControl::findFirstMode(AMSPanelPos pos) {
         if (item->second->get_ams_model() == AMSModel::EXT_AMS && item->second->get_ext_type() == AMSModelOriginType::LITE_EXT) return AMSRoadShowMode::AMS_ROAD_MODE_AMS_LITE;
         return AMSRoadShowMode::AMS_ROAD_MODE_FOUR;
     }
-    else{
+    else if (item->second->get_can_count() > GENERIC_AMS_SLOT_NUM) {
+        return AMSRoadShowMode::AMS_ROAD_MODE_GENERIC;
+    }
+    else {
         for (auto ids : pair_id){
             if (ids.first == ams_id || ids.second == ams_id){
                 return AMSRoadShowMode::AMS_ROAD_MODE_DOUBLE;
@@ -1172,8 +1424,13 @@ void AMSControl::createAmsPanel(wxSimplebook *parent, int &idx, std::vector<AMSi
     wxPanel* book_panel = new wxPanel(parent);
     wxBoxSizer* book_sizer = new wxBoxSizer(wxHORIZONTAL);
     book_panel->SetBackgroundColour(StateColor::darkModeColorFor(AMS_CONTROL_DEF_LIB_BK_COLOUR));
-    book_panel->SetSize(AMS_PANEL_SIZE);
-    book_panel->SetMinSize(AMS_PANEL_SIZE);
+    // Size the page to the AMS book it becomes, not to the legacy fixed width: an AMS card is
+    // added directly as the book page (so it always spans the book), while a single external
+    // spool is wrapped here. Matching the book keeps the Ext card centred on the same axis as
+    // the AMS cards and the shared down-road connector anchored below them.
+    const wxSize book_panel_size(std::max(parent->GetMinSize().x, AMS_PANEL_SIZE.x), AMS_PANEL_SIZE.y);
+    book_panel->SetSize(book_panel_size);
+    book_panel->SetMinSize(book_panel_size);
 
     AmsItem* ams1 = nullptr, * ams2 = nullptr;
     ams1 = new AmsItem(book_panel, infos[0], infos[0].ams_type, pos);
@@ -1200,6 +1457,14 @@ void AMSControl::createAmsPanel(wxSimplebook *parent, int &idx, std::vector<AMSi
                 //book_sizer->Add(ams1, 0, wxALIGN_CENTER_HORIZONTAL, 0);
                 book_sizer->Add(ams1, 0, wxLEFT, (book_panel->GetSize().x - ams1->GetSize().x) / 2);
             }
+            else if (pos == AMSPanelPos::SINGLE_PANEL) {
+                // Centre the single external-spool card explicitly, using the same fixed-margin
+                // technique as the Lite-EXT branch above. Two stretch spacers centred the card
+                // against the wrapper's own width rather than the AMS book, which left the card
+                // (and the connector drawn below it) off the book/connector axis.
+                book_sizer->Add(ams1, 0, wxLEFT,
+                                std::max(0, (book_panel_size.x - ams1->GetSize().x) / 2));
+            }
             else{
                 auto ext_image = new AMSExtImage(book_panel, pos, m_total_ext_count, false);
                 book_sizer->Add(ams1, 0, wxLEFT, FromDIP(30));
@@ -1228,7 +1493,20 @@ void AMSControl::createAmsPanel(wxSimplebook *parent, int &idx, std::vector<AMSi
 
 void AMSControl::AddAms(AMSinfo info, AMSPanelPos pos)
 {
-    if (m_total_ext_count > 1){
+    // The generic multi-nozzle layout (non-Bambu vendors) owns the only visible book; a unit must
+    // land there for any extruder count. Keying off m_total_ext_count instead sent 1- and 2-extruder
+    // generic printers into the legacy simplebooks that CreateAmsMultiNozzle hides.
+    if (use_multi_nozzle_layout()) {
+        const int nozzle_id = std::clamp(info.nozzle_id, 0, m_total_ext_count - 1);
+        auto &pane = m_nozzle_panes[nozzle_id];
+        pane.item_ids.push_back(info.ams_id);
+        m_item_ids[nozzle_id].push_back(info.ams_id);
+        if (pane.current_ams.empty()) pane.current_ams = info.ams_id;
+        createAms(pane.ams_book, pane.page_index, info, AMSPanelPos::SINGLE_PANEL);
+        pane.ams_book->Fit();
+        pane.ams_book->Layout();
+    }
+    else if (m_total_ext_count == 2){
         if (info.routes_to_main_extruder()){
             createAms(m_simplebook_ams_right, m_right_page_index, info, AMSPanelPos::RIGHT_PANEL);
         }
@@ -1239,6 +1517,9 @@ void AMSControl::AddAms(AMSinfo info, AMSPanelPos pos)
     else if (m_total_ext_count == 1){
         createAms(m_simplebook_ams_left, m_left_page_index, info, AMSPanelPos::LEFT_PANEL);
     }
+    else {
+        // Generic N Nozzles
+    }
     m_simplebook_ams_left->Layout();
     m_simplebook_ams_right->Layout();
     m_simplebook_ams_left->Refresh();
@@ -1269,7 +1550,19 @@ void AMSControl::AddAms(std::vector<AMSinfo> single_info, const std::string &ser
      if (single_info.size() <= 0){
         return;
     }
-    if (m_total_ext_count == 2) {
+    if (use_multi_nozzle_layout()) {
+        const int nozzle_id = std::clamp(single_info.front().nozzle_id, 0, m_total_ext_count - 1);
+        auto &pane = m_nozzle_panes[nozzle_id];
+        for (const auto &info : single_info) {
+            pane.item_ids.push_back(info.ams_id);
+            m_item_ids[nozzle_id].push_back(info.ams_id);
+        }
+        if (pane.current_ams.empty()) pane.current_ams = single_info.front().ams_id;
+        createAmsPanel(pane.ams_book, pane.page_index, single_info, series_name, printer_type, AMSPanelPos::SINGLE_PANEL, m_total_ext_count);
+        pane.ams_book->Fit();
+        pane.ams_book->Layout();
+    }
+    else if (m_total_ext_count == 2) {
         if (single_info[0].routes_to_main_extruder()) {
             createAmsPanel(m_simplebook_ams_right, m_right_page_index, single_info, series_name, printer_type, AMSPanelPos::RIGHT_PANEL, m_total_ext_count);
         }
@@ -1285,6 +1578,9 @@ void AMSControl::AddAms(std::vector<AMSinfo> single_info, const std::string &ser
             createAmsPanel(m_simplebook_ams_left, m_left_page_index, single_info, series_name, printer_type, AMSPanelPos::LEFT_PANEL, m_total_ext_count);
         }
     }
+    else {
+        // Generic N Nozzles
+    }
 
     m_simplebook_ams_left->Layout();
     m_simplebook_ams_right->Layout();
@@ -1322,6 +1618,21 @@ void AMSControl::AddAms(std::vector<AMSinfo> single_info, const std::string &ser
 void AMSControl::AddAmsPreview(std::vector<AMSinfo>single_info, AMSPanelPos pos) {
     if (single_info.size() <= 0) return;
 
+    if (use_multi_nozzle_layout()) {
+        const int nozzle_id = std::clamp(single_info.front().nozzle_id, 0, m_total_ext_count - 1);
+        auto &pane = m_nozzle_panes[nozzle_id];
+        for (const auto &info : single_info) {
+            auto *ams_prv = new AMSPreview(pane.preview_panel, wxID_ANY, info, info.ams_type);
+            pane.preview_sizer->Add(ams_prv, 0, wxALIGN_CENTER | wxLEFT, FromDIP(6));
+            ams_prv->Bind(wxEVT_LEFT_DOWN, [this, ams_prv](wxMouseEvent &e) {
+                SwitchAms(ams_prv->get_ams_id());
+                e.Skip();
+            });
+            m_ams_preview_list[info.ams_id] = ams_prv;
+        }
+        return;
+    }
+
     AMSPreview* ams_prv = nullptr;
     AMSPreview* ams_prv2 = nullptr;
     if (pos == AMSPanelPos::RIGHT_PANEL){
@@ -1360,8 +1671,97 @@ void AMSControl::AddAmsPreview(std::vector<AMSinfo>single_info, AMSPanelPos pos)
     }
 }
 
+void AMSControl::SelectNozzle(int nozzle_id)
+{
+    if (nozzle_id < 0 || nozzle_id >= static_cast<int>(m_nozzle_panes.size()))
+        return;
+
+    if (m_active_nozzle_id == nozzle_id &&
+        (!m_nozzle_book || m_nozzle_book->GetSelection() == nozzle_id))
+        return;
+
+    m_active_nozzle_id = nozzle_id;
+    if (m_nozzle_book && m_nozzle_book->GetSelection() != nozzle_id)
+        m_nozzle_book->SetSelection(nozzle_id);
+    m_current_ams = m_nozzle_panes[nozzle_id].current_ams;
+    if (!m_current_ams.empty()) {
+        SwitchAms(m_current_ams);
+        return;
+    }
+    if (m_down_road) {
+        m_down_road->UpdateLeft(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+        m_down_road->UpdateRight(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+    }
+    if (m_extruder)
+        m_extruder->OnAmsLoading(false, 0);
+    post_event(SimpleEvent(EVT_AMS_SWITCH));
+}
+
 void AMSControl::SwitchAms(std::string ams_id)
 {
+    if (use_multi_nozzle_layout()) {
+        NozzleAmsPane *pane = nullptr;
+        int nozzle_id = -1;
+        for (int index = 0; index < static_cast<int>(m_nozzle_panes.size()); ++index) {
+            auto &candidate = m_nozzle_panes[index];
+            if (std::find(candidate.item_ids.begin(), candidate.item_ids.end(), ams_id) != candidate.item_ids.end()) {
+                pane = &candidate;
+                nozzle_id = index;
+                break;
+            }
+        }
+        if (!pane) return;
+
+        m_active_nozzle_id = nozzle_id;
+        if (m_nozzle_book && m_nozzle_book->GetSelection() != nozzle_id)
+            m_nozzle_book->SetSelection(nozzle_id);
+
+        pane->current_ams = ams_id;
+        m_current_ams = ams_id;
+        m_current_select = ams_id;
+
+        for (const auto &id : pane->item_ids) {
+            auto preview = m_ams_preview_list.find(id);
+            if (preview == m_ams_preview_list.end() || !preview->second) continue;
+            if (id == ams_id) preview->second->OnSelected();
+            else preview->second->UnSelected();
+        }
+
+        auto item = m_ams_item_list.find(ams_id);
+        if (item != m_ams_item_list.end() && item->second) {
+            if (pane->ams_book)
+                pane->ams_book->SetSelection(item->second->get_selection());
+
+            AMSRoadShowMode road_mode = AMSRoadShowMode::AMS_ROAD_MODE_SINGLE;
+            if (item->second->get_can_count() == GENERIC_AMS_SLOT_NUM)
+                road_mode = AMSRoadShowMode::AMS_ROAD_MODE_FOUR;
+            else if (item->second->get_can_count() > GENERIC_AMS_SLOT_NUM)
+                road_mode = AMSRoadShowMode::AMS_ROAD_MODE_GENERIC;
+            else if (item->second->get_ams_model() == AMSModel::N3S_AMS)
+                road_mode = AMSRoadShowMode::AMS_ROAD_MODE_SINGLE_N3S;
+            else if (item->second->get_ams_model() == AMSModel::AMS_LITE ||
+                     (item->second->get_ams_model() == AMSModel::EXT_AMS &&
+                      item->second->get_ext_type() == AMSModelOriginType::LITE_EXT))
+                road_mode = AMSRoadShowMode::AMS_ROAD_MODE_AMS_LITE;
+
+            if (m_down_road) {
+                if (pane->panel_pos == AMSPanelPos::LEFT_PANEL) {
+                    m_down_road->UpdateLeft(1, road_mode);
+                    m_down_road->UpdateRight(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+                } else {
+                    m_down_road->UpdateLeft(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+                    m_down_road->UpdateRight(1, road_mode);
+                }
+                m_down_road->UpdatePassRoad(pane->panel_pos, -1, AMSPassRoadSTEP::AMS_ROAD_STEP_NONE);
+            }
+            if (m_extruder)
+                m_extruder->OnAmsLoading(false, 0);
+        }
+
+        post_event(SimpleEvent(EVT_AMS_SWITCH));
+        return;
+    }
+
     if(ams_id == m_current_show_ams_left || ams_id == m_current_show_ams_right){return;}
 
     bool is_in_right = IsAmsInRightPanel(ams_id);
@@ -1432,13 +1832,17 @@ void AMSControl::SwitchAms(std::string ams_id)
                     else {
                         AMSRoadShowMode mode = AMSRoadShowMode::AMS_ROAD_MODE_SINGLE;
 
-                        if (item->get_ams_model() == AMSModel::N3S_AMS)
+                        if (item->get_can_count() > GENERIC_AMS_SLOT_NUM)
+                            mode = AMSRoadShowMode::AMS_ROAD_MODE_GENERIC;
+                        else if (item->get_ams_model() == AMSModel::N3S_AMS)
                             mode = AMSRoadShowMode::AMS_ROAD_MODE_SINGLE_N3S;
 
-                        for (auto it : pair_id) {
-                            if (it.first == ams_id || it.second == ams_id) {
-                                mode = AMSRoadShowMode::AMS_ROAD_MODE_DOUBLE;
-                                break;
+                        if (item->get_can_count() <= GENERIC_AMS_SLOT_NUM) {
+                            for (auto it : pair_id) {
+                                if (it.first == ams_id || it.second == ams_id) {
+                                    mode = AMSRoadShowMode::AMS_ROAD_MODE_DOUBLE;
+                                    break;
+                                }
                             }
                         }
                         pos == AMSPanelPos::LEFT_PANEL ? m_down_road->UpdateLeft(m_total_ext_count, mode)
@@ -1500,6 +1904,20 @@ void AMSControl::SetExtruder(bool on_off, int nozzle_id, std::string ams_id, std
     AmsItem *item = nullptr;
     if (m_ams_item_list.find(ams_id) != m_ams_item_list.end()) { item = m_ams_item_list[ams_id]; }
 
+    if (use_multi_nozzle_layout()) {
+        if (nozzle_id < 0 || nozzle_id >= static_cast<int>(m_nozzle_panes.size()))
+            return;
+
+        if (!m_extruder)
+            return;
+
+        if (on_off && item)
+            m_extruder->OnAmsLoading(true, 0, item->GetTagColr(slot_id));
+        else
+            m_extruder->OnAmsLoading(false, 0);
+        return;
+    }
+
     if (on_off && item) {
         auto col = item->GetTagColr(slot_id);
         m_extruder->OnAmsLoading(true, nozzle_id, col);
@@ -1624,6 +2042,69 @@ void AMSControl::SetAmsStep(std::string ams_id, std::string canid, AMSPassRoadTy
     else{
         return;
     }
+
+    if (use_multi_nozzle_layout()) {
+        const int nozzle_id = std::clamp(ams->get_nozzle_id(), 0, m_total_ext_count - 1);
+        if (nozzle_id >= static_cast<int>(m_nozzle_panes.size()))
+            return;
+        auto &pane = m_nozzle_panes[nozzle_id];
+        AMSRoadShowMode road_mode = AMSRoadShowMode::AMS_ROAD_MODE_SINGLE;
+        if (ams->get_can_count() == GENERIC_AMS_SLOT_NUM)
+            road_mode = AMSRoadShowMode::AMS_ROAD_MODE_FOUR;
+        else if (ams->get_can_count() > GENERIC_AMS_SLOT_NUM)
+            road_mode = AMSRoadShowMode::AMS_ROAD_MODE_GENERIC;
+        else if (ams->get_ams_model() == AMSModel::N3S_AMS)
+            road_mode = AMSRoadShowMode::AMS_ROAD_MODE_SINGLE_N3S;
+        else if (ams->get_ams_model() == AMSModel::AMS_LITE ||
+                 (ams->get_ams_model() == AMSModel::EXT_AMS && ams->get_ext_type() == AMSModelOriginType::LITE_EXT))
+            road_mode = AMSRoadShowMode::AMS_ROAD_MODE_AMS_LITE;
+
+        if (can_index >= 0 && can_index < static_cast<int>(info.cans.size()) && m_down_road)
+            m_down_road->SetPassRoadColour(pane.panel_pos == AMSPanelPos::LEFT_PANEL,
+                                           info.cans[can_index].material_colour);
+        if (m_down_road) {
+            if (pane.panel_pos == AMSPanelPos::LEFT_PANEL) {
+                m_down_road->UpdateLeft(1, road_mode);
+                m_down_road->UpdateRight(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+            } else {
+                m_down_road->UpdateLeft(1, AMSRoadShowMode::AMS_ROAD_MODE_NONE);
+                m_down_road->UpdateRight(1, road_mode);
+            }
+        }
+
+        int road_length = 0;
+
+        if (step == AMSPassRoadSTEP::AMS_ROAD_STEP_NONE) {
+            ams->SetAmsStep(ams_id, canid, type, AMSPassRoadSTEP::AMS_ROAD_STEP_NONE);
+            if (m_down_road)
+                m_down_road->UpdatePassRoad(pane.panel_pos, -1, AMSPassRoadSTEP::AMS_ROAD_STEP_NONE);
+            if (m_extruder)
+                m_extruder->OnAmsLoading(false, 0);
+        }
+        else if (step == AMSPassRoadSTEP::AMS_ROAD_STEP_COMBO_LOAD_STEP1) {
+            ams->SetAmsStep(ams_id, canid, type, AMSPassRoadSTEP::AMS_ROAD_STEP_1);
+            if (m_down_road)
+                m_down_road->UpdatePassRoad(pane.panel_pos, road_length, AMSPassRoadSTEP::AMS_ROAD_STEP_1);
+            if (m_extruder)
+                m_extruder->OnAmsLoading(false, 0);
+        }
+        else if (step == AMSPassRoadSTEP::AMS_ROAD_STEP_COMBO_LOAD_STEP2) {
+            ams->SetAmsStep(ams_id, canid, type, AMSPassRoadSTEP::AMS_ROAD_STEP_2);
+            if (m_down_road)
+                m_down_road->UpdatePassRoad(pane.panel_pos, road_length, AMSPassRoadSTEP::AMS_ROAD_STEP_2);
+            if (m_extruder)
+                m_extruder->OnAmsLoading(true, 0, ams->GetTagColr(canid));
+        }
+        else if (step == AMSPassRoadSTEP::AMS_ROAD_STEP_COMBO_LOAD_STEP3) {
+            ams->SetAmsStep(ams_id, canid, type, AMSPassRoadSTEP::AMS_ROAD_STEP_3);
+            if (m_down_road)
+                m_down_road->UpdatePassRoad(pane.panel_pos, road_length, AMSPassRoadSTEP::AMS_ROAD_STEP_3);
+            if (m_extruder)
+                m_extruder->OnAmsLoading(true, 0, ams->GetTagColr(canid));
+        }
+        return;
+    }
+
     if (can_index >= 0 && can_index < info.cans.size())
     {
         m_down_road->SetPassRoadColour(left, info.cans[can_index].material_colour);

src/slic3r/GUI/Widgets/AMSControl.hpp

@@ -47,6 +47,20 @@ public:
     void on_retry();
 
 protected:
+    struct NozzleAmsPane
+    {
+        wxPanel*          page{nullptr};
+        wxBoxSizer*       page_sizer{nullptr};
+        wxScrolledWindow* preview_panel{nullptr};
+        wxBoxSizer*       preview_sizer{nullptr};
+        wxSimplebook*     ams_book{nullptr};
+        wxBoxSizer*       ams_area{nullptr};
+        AMSPanelPos        panel_pos{AMSPanelPos::LEFT_PANEL};
+        std::vector<std::string> item_ids;
+        std::string current_ams;
+        int page_index{0};
+    };
+
     std::string  m_current_ams;
     std::string  m_current_slot_left;
     std::string  m_current_slot_right;
@@ -63,6 +77,9 @@ protected:
 
     std::string                      m_dev_id;
     std::vector<std::vector<std::string>> m_item_ids{ {}, {} };
+    std::vector<NozzleAmsPane>       m_nozzle_panes;
+    wxSimplebook*                    m_nozzle_book{nullptr};
+    int                              m_active_nozzle_id{0};
     std::vector<std::pair<std::string, std::string>> pair_id;
 
     int         m_total_ext_count = 1;
@@ -103,6 +120,7 @@ protected:
     wxSimplebook *m_simplebook_ams_left{nullptr};
     wxSimplebook *m_simplebook_ams_right{ nullptr };
     wxSimplebook *m_simplebook_bottom{nullptr};
+    wxSizerItem  *m_sizer_ams_gap{nullptr};
     wxPanel      *m_panel_down_road{ nullptr };
     int          m_left_page_index = 0;
     int          m_right_page_index = 0;
@@ -156,6 +174,7 @@ public:
     void createAms(wxSimplebook* parent, int& idx, AMSinfo info, AMSPanelPos pos);
     void createAmsPanel(wxSimplebook *parent, int &idx, std::vector<AMSinfo> infos, const std::string &series_name, const std::string &printer_type, AMSPanelPos pos, int total_ext_num);
     AMSRoadShowMode findFirstMode(AMSPanelPos pos);
+    void restore_legacy_ams_layout();
 
     AMSModel m_ams_model{AMSModel::EXT_AMS};
     AMSModel m_ext_model{AMSModel::EXT_AMS};
@@ -183,6 +202,7 @@ public:
 
     void UpdatePassRoad(std::string ams_id, AMSPassRoadType type, AMSPassRoadSTEP step);
     void CreateAms();
+    void CreateAmsMultiNozzle(const std::string& series_name, const std::string& printer_type);
     void CreateAmsDoubleNozzle(const std::string &series_name, const std::string& printer_type);
     void CreateAmsSingleNozzle(const std::string &series_name, const std::string &printer_type);
     void ClearAms();
@@ -210,6 +230,8 @@ public:
     void SetExtruder(bool on_off, int nozzle_id, std::string ams_id, std::string slot_id);
     void SetAmsStep(std::string ams_id, std::string canid, AMSPassRoadType type, AMSPassRoadSTEP step);
     void SwitchAms(std::string ams_id);
+    void SelectNozzle(int nozzle_id);
+    int  GetActiveNozzleId() const { return m_active_nozzle_id; }
 
     void msw_rescale();
     void on_filament_load(wxCommandEvent &event);
@@ -234,6 +256,11 @@ public:
 private:
     std::string get_filament_id(const std::string& ams_id, const std::string& can_id);
 
+    // True when AMS units are laid out on the generic multi-nozzle book. Bambu
+    // printers keep the legacy count-based single/double-nozzle layout at any
+    // extruder count; other vendors use the book created for them.
+    bool use_multi_nozzle_layout() const;
+
 public:
     std::string m_current_select;
 };

src/slic3r/GUI/Widgets/AMSItem.cpp

@@ -42,6 +42,7 @@
 #include <boost/log/trivial.hpp>
 #include <wx/timer.h>
 #include <wx/sizer.h>
+#include <wx/scrolwin.h>
 
 #include "CalibUtils.hpp"
 #include "slic3r/GUI/wxExtensions.hpp"
@@ -76,6 +77,48 @@ namespace Slic3r { namespace GUI {
 //#define AMS_SINGLE_CAN_SIZE wxSize(FromDIP(78), 144)
 #define AMS_CANS_WINDOW_SIZE wxSize(FromDIP(264), FromDIP(174))
 #define AMS_SINGLE_CAN_SIZE wxSize(FromDIP(78), FromDIP(174))
+
+int generic_ams_layout_width(wxWindow *window, int lane_count)
+{
+    const int base_width = window->FromDIP(264);
+    const int lane_width = window->FromDIP(52);
+    const int lane_gap = window->FromDIP(4);
+    if (lane_count <= 4)
+        return base_width;
+
+    // Lane centers are distributed as width * (index + 1) / (count + 1).
+    // Keep at least one card width plus the requested gap between centers.
+    return std::max(base_width, (lane_count + 1) * (lane_width + lane_gap));
+}
+
+std::vector<int> generic_ams_lane_centers(int lane_count, int width)
+{
+    std::vector<int> centers;
+    if (lane_count <= 0)
+        return centers;
+
+    centers.reserve(lane_count);
+    for (int lane = 0; lane < lane_count; ++lane)
+        centers.push_back(width * (lane + 1) / (lane_count + 1));
+    return centers;
+}
+
+int generic_ams_preview_width(wxWindow *window, int lane_count)
+{
+    const int base_width = window->FromDIP(52);
+    const int lane_width = window->FromDIP(9);
+    const int lane_gap = window->FromDIP(4);
+    if (lane_count <= 0)
+        return base_width;
+
+    return std::max(base_width, lane_count * lane_width + (lane_count + 1) * lane_gap);
+}
+
+bool use_generic_ams_layout(AMSModel model)
+{
+    return model == AMSModel::GENERIC_AMS &&
+           (!wxGetApp().preset_bundle || !wxGetApp().preset_bundle->is_bbl_vendor());
+}
 bool AMSinfo::parse_ams_info(MachineObject *obj, DevAms *ams, bool remain_flag, bool humidity_flag)
 {
     if (!ams) return false;
@@ -170,10 +213,14 @@ void AMSinfo::parse_ext_info(MachineObject* obj, DevAmsTray tray) {
     info.can_id = std::to_string(0);
     this->cans.clear();
 
-    if (tray.id == std::to_string(VIRTUAL_TRAY_MAIN_ID))
+    try {
+        const int virtual_tray_id = std::stoi(tray.id);
+        if (virtual_tray_id >= 0 && virtual_tray_id <= VIRTUAL_TRAY_MAIN_ID)
+            this->nozzle_id = VIRTUAL_TRAY_MAIN_ID - virtual_tray_id;
+    }
+    catch (...) {
         this->nozzle_id = 0;
-    else if (tray.id == std::to_string(VIRTUAL_TRAY_DEPUTY_ID))
-        this->nozzle_id = 1;
+    }
 
     if (tray.is_tray_info_ready()) {
         info.ctype = tray.ctype;
@@ -856,7 +903,11 @@ AMSextruder::AMSextruder(wxWindow *parent, wxWindowID id, int nozzle_num, const
 
 void AMSextruder::TurnOff()
 {
-    m_left_extruder->TurnOff();
+    if (m_left_extruder) m_left_extruder->TurnOff();
+    if (m_right_extruder) m_right_extruder->TurnOff();
+    for (auto *extruder : m_nozzle_extruders) {
+        if (extruder) extruder->TurnOff();
+    }
 }
 
 void AMSextruder::create(wxWindow *parent, wxWindowID id, const wxPoint &pos, const wxSize &size, int nozzle_num)
@@ -882,7 +933,7 @@ void AMSextruder::OnAmsLoading(bool load, int nozzle_id, wxColour col /*= AMS_CO
         m_left_extruder->OnAmsLoading(load, col);
         if (load) m_current_colur_deputy = col;
     }
-    else if (m_nozzle_num > 1){
+    else if (m_nozzle_num == 2){
         if (nozzle_id == MAIN_EXTRUDER_ID) {
             m_right_extruder->OnAmsLoading(load, col);
             if (m_current_colur != col){
@@ -896,6 +947,15 @@ void AMSextruder::OnAmsLoading(bool load, int nozzle_id, wxColour col /*= AMS_CO
             }
         }
     }
+    else if (m_nozzle_num > 2) {
+        if (nozzle_id >= 0 && nozzle_id < static_cast<int>(m_nozzle_extruders.size())) {
+            m_nozzle_extruders[nozzle_id]->OnAmsLoading(load, col);
+            if (load) m_current_colur = col;
+        }
+    }
+    else {
+        // Generic N Nozzles
+    }
 }
 
 /*return true if something is updated*/
@@ -905,12 +965,26 @@ bool AMSextruder::updateNozzleNum(int nozzle_num, const std::string& series_name
     m_series_name = series_name;
     m_nozzle_num = nozzle_num;
     this->DestroyChildren();
+    m_left_extruder = nullptr;
+    m_right_extruder = nullptr;
+    m_nozzle_extruders.clear();
 
-    m_right_extruder = new AMSextruderImage(this, wxID_ANY, "right_nozzle", AMS_EXTRUDER_DOUBLE_NOZZLE_BITMAP_SIZE);
+    m_bitmap_sizer = new wxBoxSizer(wxHORIZONTAL);
+    if (m_nozzle_num == 1) {
+        if (MachineObject::is_series_n(m_series_name)) {
+            m_left_extruder = new AMSextruderImage(this, wxID_ANY, "single_nozzle_n", AMS_EXTRUDER_SINGLE_NOZZLE_N_SIZE);
+        } else if (MachineObject::is_series_x(m_series_name) || MachineObject::is_series_p(m_series_name)) {
+            m_left_extruder = new AMSextruderImage(this, wxID_ANY, "single_nozzle_xp", AMS_EXTRUDER_SINGLE_NOZZLE_XP_SIZE);
+        } else {
+            m_left_extruder = new AMSextruderImage(this, wxID_ANY, "single_nozzle_xp", AMS_EXTRUDER_SINGLE_NOZZLE_XP_SIZE);
+        }
 
-    wxBoxSizer* m_bitmap_sizer = new wxBoxSizer(wxHORIZONTAL);
-    if (m_nozzle_num >= 2)
+        m_left_extruder->setShowState(true);
+        m_bitmap_sizer->Add(m_left_extruder, 0, wxALIGN_LEFT | wxALIGN_TOP, 0);
+    }
+    else if (m_nozzle_num == 2)
     {
+        m_right_extruder = new AMSextruderImage(this, wxID_ANY, "right_nozzle", AMS_EXTRUDER_DOUBLE_NOZZLE_BITMAP_SIZE);
         m_left_extruder = new AMSextruderImage(this, wxID_ANY, "left_nozzle", AMS_EXTRUDER_DOUBLE_NOZZLE_BITMAP_SIZE);
         m_left_extruder->setShowState(true);
         m_right_extruder->setShowState(true);
@@ -918,25 +992,17 @@ bool AMSextruder::updateNozzleNum(int nozzle_num, const std::string& series_name
         m_bitmap_sizer->Add(m_right_extruder, 0, wxLEFT | wxALIGN_TOP, FromDIP(2));
         m_bitmap_sizer->AddSpacer(2);
     }
+    else if (m_nozzle_num > 2) {
+        for (int nozzle_id = 0; nozzle_id < m_nozzle_num; ++nozzle_id) {
+            auto *extruder = new AMSextruderImage(this, wxID_ANY, "single_nozzle_n", AMS_EXTRUDER_SINGLE_NOZZLE_N_SIZE);
+            extruder->setShowState(true);
+            m_nozzle_extruders.push_back(extruder);
+            m_bitmap_sizer->Add(extruder, 0, wxALIGN_LEFT | wxALIGN_TOP, 0);
+        }
+    }
     else
     {
-        if (MachineObject::is_series_n(m_series_name))
-        {
-            m_left_extruder = new AMSextruderImage(this, wxID_ANY, "single_nozzle_n", AMS_EXTRUDER_SINGLE_NOZZLE_N_SIZE);
-        }
-        else if(MachineObject::is_series_x(m_series_name) || MachineObject::is_series_p(m_series_name))
-        {
-            m_left_extruder = new AMSextruderImage(this, wxID_ANY, "single_nozzle_xp", AMS_EXTRUDER_SINGLE_NOZZLE_XP_SIZE);
-        }
-        else
-        {
-            m_left_extruder = new AMSextruderImage(this, wxID_ANY, "single_nozzle_xp", AMS_EXTRUDER_SINGLE_NOZZLE_XP_SIZE);
-        }
-
-        m_left_extruder->setShowState(true);
-        m_right_extruder->setShowState(false);
-        m_bitmap_sizer->Add(m_left_extruder, 0, wxALIGN_LEFT | wxALIGN_TOP, 0);
-        m_bitmap_sizer->Add(m_right_extruder, 0, wxLEFT | wxALIGN_TOP, FromDIP(3));
+        // Generic N Nozzles
     }
 
     SetSizer(m_bitmap_sizer);
@@ -951,6 +1017,9 @@ void AMSextruder::msw_rescale()
     //m_amsSextruder->msw_rescale();
     if (m_left_extruder) m_left_extruder->msw_rescale();
     if (m_right_extruder) m_right_extruder->msw_rescale();
+    for (auto *extruder : m_nozzle_extruders) {
+        if (extruder) extruder->msw_rescale();
+    }
     Layout();
     Update();
     Refresh();
@@ -2123,7 +2192,10 @@ AMSRoadUpPart::AMSRoadUpPart(wxWindow* parent, wxWindowID id, AMSinfo info, AMSM
     m_ams_model = model;
 
     if (m_ams_model == AMSModel::GENERIC_AMS){
-        create(parent, id, pos, wxSize(FromDIP(264), FromDIP(34)));
+        const int width = use_generic_ams_layout(m_ams_model)
+            ? generic_ams_layout_width(this, static_cast<int>(m_amsinfo.cans.size()))
+            : FromDIP(264);
+        create(parent, id, pos, wxSize(width, FromDIP(34)));
     }
     else{
         create(parent, id, pos, wxSize(FromDIP(78), FromDIP(34)));
@@ -2235,6 +2307,38 @@ void AMSRoadUpPart::doRender(wxDC& dc)
     dc.SetPen(wxPen(AMS_CONTROL_GRAY500, 2, wxPENSTYLE_SOLID));
     dc.SetBrush(wxBrush(*wxTRANSPARENT_BRUSH));
 
+    if (use_generic_ams_layout(m_ams_model)) {
+        const int lane_count = static_cast<int>(m_amsinfo.cans.size());
+        if (lane_count <= 0)
+            return;
+
+        const auto lane_centers = generic_ams_lane_centers(lane_count, size.x);
+        const int height = FromDIP(21);
+        for (const int lane_center : lane_centers)
+            dc.DrawLine(lane_center, 0, lane_center, height);
+
+        if (lane_centers.size() > 1)
+            dc.DrawLine(lane_centers.front(), height, lane_centers.back(), height);
+        dc.DrawLine(size.x / 2, height, size.x / 2, size.y);
+
+        if (m_load_step != AMSPassRoadSTEP::AMS_ROAD_STEP_NONE &&
+            m_load_slot_index >= 0 && m_load_slot_index < lane_count) {
+            const int lane_center = lane_centers[m_load_slot_index];
+            dc.SetPen(wxPen(_get_diff_clr(this, m_amsinfo.cans[m_load_slot_index].material_colour), 4, wxPENSTYLE_SOLID));
+            dc.DrawLine(lane_center, 0, lane_center, height);
+            dc.DrawLine(std::min(lane_center, size.x / 2), height,
+                        std::max(lane_center, size.x / 2), height);
+            if (m_load_step == AMSPassRoadSTEP::AMS_ROAD_STEP_2 ||
+                m_load_step == AMSPassRoadSTEP::AMS_ROAD_STEP_3)
+                dc.DrawLine(size.x / 2, height, size.x / 2, size.y);
+        }
+
+        dc.SetPen(*wxTRANSPARENT_PEN);
+        dc.SetBrush(wxBrush(wxColour(194, 194, 194)));
+        dc.DrawRectangle(size.x / 2 - FromDIP(14), height - FromDIP(5), FromDIP(28), FromDIP(10));
+        return;
+    }
+
     if ((m_ams_model == N3S_AMS || m_ams_model == EXT_AMS) && m_amsinfo.cans.size() != 4){
         dc.DrawLine(((float)size.x / 2), (0), ((float)size.x / 2), (size.y));
         if (m_load_step == AMSPassRoadSTEP::AMS_ROAD_STEP_2 || m_load_step == AMSPassRoadSTEP::AMS_ROAD_STEP_3){
@@ -2360,6 +2464,25 @@ void AMSRoadDownPart::UpdateRight(int nozzle_num, AMSRoadShowMode mode)
     Refresh();
 }
 
+void AMSRoadDownPart::SetNozzleCount(int nozzle_num)
+{
+    const int new_nozzle_num = std::max(1, nozzle_num);
+    if (m_nozzle_num == new_nozzle_num) return;
+
+    m_nozzle_num = new_nozzle_num;
+    Refresh();
+}
+
+void AMSRoadDownPart::SetSingleSideLayout(bool enabled, AMSPanelPos pos)
+{
+    if (m_single_side_layout == enabled && m_single_side_pos == pos)
+        return;
+
+    m_single_side_layout = enabled;
+    m_single_side_pos = pos;
+    Refresh();
+}
+
 void AMSRoadDownPart::OnVamsLoading(bool load, wxColour col /*= AMS_CONTROL_GRAY500*/)
 {
     /*m_vams_loading = load;
@@ -2433,8 +2556,14 @@ void AMSRoadDownPart::doRender(wxDC& dc)
     /*if (m_road_color.Alpha() == 0) { dc.SetPen(wxPen(*wxWHITE, m_passroad_width, wxPENSTYLE_SOLID)); }
     else { dc.SetPen(wxPen(m_road_color, m_passroad_width, wxPENSTYLE_SOLID)); }*/
     dc.SetPen(wxPen(AMS_CONTROL_GRAY500, 2, wxPENSTYLE_SOLID));
+
     auto xpos = left_nozzle_pos.x;
-    if (m_left_rode_mode == AMSRoadShowMode::AMS_ROAD_MODE_NONE || m_right_rode_mode == AMSRoadShowMode::AMS_ROAD_MODE_NONE){
+    if (m_single_side_layout) {
+        dc.DrawLine(size.x / 2, 0, size.x / 2, size.y);
+    }
+    else if (
+        (m_left_rode_mode == AMSRoadShowMode::AMS_ROAD_MODE_NONE ||
+         m_right_rode_mode == AMSRoadShowMode::AMS_ROAD_MODE_NONE)){
         auto length = 50;
         if (m_left_rode_mode == AMSRoadShowMode::AMS_ROAD_MODE_AMS_LITE || m_right_rode_mode == AMSRoadShowMode::AMS_ROAD_MODE_AMS_LITE)
             length = -13;
@@ -2465,6 +2594,9 @@ void AMSRoadDownPart::doRender(wxDC& dc)
         case AMSRoadShowMode::AMS_ROAD_MODE_AMS_LITE:
             dc.DrawLine(left_nozzle_pos.x, 0, left_nozzle_pos.x, size.y);
             break;
+        case AMSRoadShowMode::AMS_ROAD_MODE_GENERIC:
+            // Generic N-lane geometry is intentionally left unimplemented.
+            break;
         default:
             break;
         }
@@ -2492,23 +2624,41 @@ void AMSRoadDownPart::doRender(wxDC& dc)
             dc.DrawLine(left_nozzle_pos.x, (size.y / 2), left_nozzle_pos.x + FromDIP(145), (size.y / 2));
             dc.DrawLine(left_nozzle_pos.x + FromDIP(145), 0, left_nozzle_pos.x + FromDIP(145), (size.y / 2));
             break;
+        case AMSRoadShowMode::AMS_ROAD_MODE_GENERIC:
+            // Generic N-lane geometry is intentionally left unimplemented.
+            break;
         default:
             break;
         }
     }
 
+    if (m_single_side_layout) {
+        if (m_pass_road_left_step == AMSPassRoadSTEP::AMS_ROAD_STEP_2 ||
+            m_pass_road_left_step == AMSPassRoadSTEP::AMS_ROAD_STEP_3) {
+            dc.SetPen(wxPen(_get_diff_clr(this, m_road_color[1]), 4, wxPENSTYLE_SOLID));
+            dc.DrawLine(size.x / 2, 0, size.x / 2, size.y);
+        }
+        return;
+    }
+
     if (m_right_rode_mode != AMSRoadShowMode::AMS_ROAD_MODE_AMS_LITE){
-        if (m_nozzle_num == 2) {
+        if (m_nozzle_num == 1) {
+            if (m_right_rode_mode != AMSRoadShowMode::AMS_ROAD_MODE_NONE && m_left_rode_mode != AMSRoadShowMode::AMS_ROAD_MODE_NONE) {
+                dc.DrawLine((left_nozzle_pos.x), (size.y / 2), (right_nozzle_pos.x), (size.y / 2));
+            }
+            const auto &nozzle_pos = m_single_side_layout && m_single_side_pos == AMSPanelPos::RIGHT_PANEL
+                ? right_nozzle_pos
+                : left_nozzle_pos;
+            dc.DrawLine(nozzle_pos.x, (size.y / 2), nozzle_pos.x, (size.y));
+        }
+        else if (m_nozzle_num == 2) {
             /*dc.DrawLine(FromDIP(left_nozzle_pos.x), FromDIP(size.y / 2), FromDIP(left_nozzle_pos.x), FromDIP(size.y));
             dc.DrawLine(FromDIP(right_nozzle_pos.x), FromDIP(size.y / 2), FromDIP(right_nozzle_pos.x), FromDIP(size.y));*/
             dc.DrawLine((left_nozzle_pos.x), (size.y / 2), (left_nozzle_pos.x), (size.y));
             dc.DrawLine((right_nozzle_pos.x), (size.y / 2), (right_nozzle_pos.x), (size.y));
         }
         else {
-            if (m_right_rode_mode != AMSRoadShowMode::AMS_ROAD_MODE_NONE && m_left_rode_mode != AMSRoadShowMode::AMS_ROAD_MODE_NONE) {
-                dc.DrawLine((left_nozzle_pos.x), (size.y / 2), (right_nozzle_pos.x), (size.y / 2));
-            }
-            dc.DrawLine((left_nozzle_pos.x), (size.y / 2), (left_nozzle_pos.x), (size.y));
+            // Generic N Nozzles
         }
     }
 
@@ -2533,10 +2683,16 @@ void AMSRoadDownPart::doRender(wxDC& dc)
                  dc.DrawLine(xpos, size.y / 2, xpos, size.y);*/
                 int x   = left_nozzle_pos.x;
                 int len = m_right_road_length;
-                if (m_nozzle_num == 2) {
+                if (m_nozzle_num == 1) {
+                    // Keep the single-nozzle path anchored at the left nozzle.
+                }
+                else if (m_nozzle_num == 2) {
                     x   = right_nozzle_pos.x;
                     len = len - 14;
                 }
+                else {
+                    // Generic N Nozzles
+                }
                 dc.DrawLine(((x)), (size.y / 2), x + FromDIP(len), (size.y / 2));
                 dc.DrawLine(x + FromDIP(len), (0), x + FromDIP(len), (size.y / 2));
                 dc.DrawLine((x), (size.y / 2), (x), (size.y));
@@ -2544,10 +2700,16 @@ void AMSRoadDownPart::doRender(wxDC& dc)
             else{
                 int x = left_nozzle_pos.x;
                 int len = m_right_road_length;
-                if (m_nozzle_num == 2) {
+                if (m_nozzle_num == 1) {
+                    // Keep the single-nozzle path anchored at the left nozzle.
+                }
+                else if (m_nozzle_num == 2) {
                     x = right_nozzle_pos.x;
                     len = len - 14;
                 }
+                else {
+                    // Generic N Nozzles
+                }
                 dc.DrawLine(((x)), (size.y / 2), x + FromDIP(len), (size.y / 2));
                 dc.DrawLine(x + FromDIP(len), (0), x + FromDIP(len), (size.y / 2));
                 dc.DrawLine((x), (size.y / 2), (x), (size.y));
@@ -2571,7 +2733,7 @@ void AMSRoadDownPart::doRender(wxDC& dc)
 }
 
 void AMSRoadDownPart::UpdatePassRoad(AMSPanelPos pos, int len, AMSPassRoadSTEP step) {
-    if (m_nozzle_num >= 2){
+    if (m_nozzle_num == 2){
         if (pos == AMSPanelPos::LEFT_PANEL){
             if (m_left_road_length == len && m_pass_road_left_step == step){ return; }
             m_left_road_length = len;;
@@ -2583,7 +2745,7 @@ void AMSRoadDownPart::UpdatePassRoad(AMSPanelPos pos, int len, AMSPassRoadSTEP s
             m_pass_road_right_step = step;
         }
     }
-    else{
+    else if (m_nozzle_num == 1){
         if (pos == AMSPanelPos::LEFT_PANEL) {
             if (m_left_road_length == len && m_pass_road_left_step == step && m_right_road_length == -1) { return; }
             m_left_road_length = len;
@@ -2597,6 +2759,9 @@ void AMSRoadDownPart::UpdatePassRoad(AMSPanelPos pos, int len, AMSPassRoadSTEP s
             m_pass_road_right_step = step;
         }
     }
+    else {
+        // Generic N Nozzles
+    }
     Refresh();
 }
 
@@ -2615,7 +2780,10 @@ AMSPreview::AMSPreview(wxWindow* parent, wxWindowID id, AMSinfo amsinfo, AMSMode
 {
     wxWindow::Create(parent, id, pos);
     if (itemType == AMSModel::GENERIC_AMS || itemType == AMSModel::AMS_LITE || itemType == AMSModel::N3F_AMS) {
-        create(parent, id, pos, AMS_PREV_FOUR_SIZE);
+        if (itemType == AMSModel::GENERIC_AMS && use_generic_ams_layout(itemType))
+            create(parent, id, pos, wxSize(generic_ams_preview_width(this, static_cast<int>(amsinfo.cans.size())), AMS_PREV_FOUR_SIZE.y));
+        else
+            create(parent, id, pos, AMS_PREV_FOUR_SIZE);
     }
     else {
         create(parent, id, pos, AMS_PREV_SINGLE_SIZE);
@@ -2650,7 +2818,13 @@ void AMSPreview::UpdateInfo(AMSinfo amsinfo)
     m_amsinfo = amsinfo;
     m_ams_item_type = amsinfo.ams_type;
 
-    if (m_ams_item_type == AMSModel::GENERIC_AMS || m_ams_item_type == AMSModel::AMS_LITE || m_ams_item_type == AMSModel::N3F_AMS) {
+    if (m_ams_item_type == AMSModel::GENERIC_AMS && use_generic_ams_layout(m_ams_item_type)) {
+        const wxSize generic_size(generic_ams_preview_width(this, static_cast<int>(m_amsinfo.cans.size())), AMS_PREV_FOUR_SIZE.y);
+        SetSize(generic_size);
+        SetMinSize(generic_size);
+        SetMaxSize(generic_size);
+    }
+    else if (m_ams_item_type == AMSModel::GENERIC_AMS || m_ams_item_type == AMSModel::AMS_LITE || m_ams_item_type == AMSModel::N3F_AMS) {
         SetMinSize(AMS_PREV_FOUR_SIZE);
         SetMaxSize(AMS_PREV_FOUR_SIZE);
     } else {
@@ -2758,8 +2932,41 @@ void AMSPreview::doRender(wxDC &dc)
     dc.DrawRoundedRectangle(0, 0, size.x, size.y, FromDIP(3));
 
     auto left = 0;
-    //four slot
-    if (m_ams_item_type != AMSModel::EXT_AMS && m_ams_item_type != AMSModel::N3S_AMS){
+    // Generic AMS previews use the same normalized lane centers as the card row and connector.
+    if (m_ams_item_type == AMSModel::GENERIC_AMS && use_generic_ams_layout(m_ams_item_type)) {
+        const int lane_count = static_cast<int>(m_amsinfo.cans.size());
+        const auto lane_centers = generic_ams_lane_centers(lane_count, size.x);
+        const int cube_width = FromDIP(9);
+        const int cube_height = FromDIP(14);
+
+        for (int lane = 0; lane < lane_count; ++lane) {
+            const Caninfo &can = m_amsinfo.cans[lane];
+            const int cube_left = lane_centers[lane] - cube_width / 2;
+            const int cube_top = (size.y - cube_height) / 2;
+            wxRect rect(cube_left, cube_top, cube_width, cube_height);
+
+            if (can.material_colour.Alpha() == 0) {
+                if (wxGetApp().dark_mode())
+                    dc.DrawBitmap(m_ts_bitmap_cube_dark.bmp(), cube_left - FromDIP(1), (size.y - m_ts_bitmap_cube_dark.GetBmpHeight()) / 2);
+                else
+                    dc.DrawBitmap(m_ts_bitmap_cube.bmp(), cube_left - FromDIP(1), (size.y - m_ts_bitmap_cube.GetBmpHeight()) / 2);
+            }
+            else if (can.material_state == AMSCanType::AMS_CAN_TYPE_EMPTY) {
+                dc.SetPen(wxPen(wxColor(0, 0, 0)));
+                dc.DrawLine(rect.GetRight() - FromDIP(1), rect.GetTop() + FromDIP(1),
+                            rect.GetLeft() + FromDIP(1), rect.GetBottom() - FromDIP(1));
+            }
+            else {
+                wxColour color = can.material_colour;
+                change_the_opacity(color);
+                dc.SetPen(wxPen(*wxTRANSPARENT_PEN));
+                dc.SetBrush(wxBrush(color));
+                dc.DrawRoundedRectangle(rect, 2);
+            }
+        }
+    }
+    // four slot
+    else if (m_ams_item_type != AMSModel::EXT_AMS && m_ams_item_type != AMSModel::N3S_AMS){
         left =  FromDIP(8);
         for (std::vector<Caninfo>::iterator iter = m_amsinfo.cans.begin(); iter != m_amsinfo.cans.end(); iter++) {
 
@@ -3158,10 +3365,19 @@ AmsItem::AmsItem(wxWindow *parent,AMSinfo info,  AMSModel model, AMSPanelPos pos
     m_panel_pos = pos;
 
     if (m_ams_model == AMSModel::GENERIC_AMS){
-        wxWindow::Create(parent, wxID_ANY, wxDefaultPosition, AMS_CANS_WINDOW_SIZE);
-        SetSize(AMS_CANS_WINDOW_SIZE);
-        SetMinSize(AMS_CANS_WINDOW_SIZE);
-        SetMaxSize(AMS_CANS_WINDOW_SIZE);
+        const int lane_count = static_cast<int>(m_info.cans.size());
+        const int width = use_generic_ams_layout(m_ams_model) && lane_count <= 8
+            ? generic_ams_layout_width(this, lane_count)
+            : FromDIP(264);
+        const wxSize generic_size(width, FromDIP(174));
+        wxWindow::Create(parent, wxID_ANY, wxDefaultPosition, generic_size);
+        SetSize(generic_size);
+        SetMinSize(generic_size);
+        // For large lane counts the card is a viewport, not the lane strip. Let
+        // its parent allocate the available width; the scrolled child retains
+        // the wider virtual content size.
+        if (!(use_generic_ams_layout(m_ams_model) && lane_count > 8))
+            SetMaxSize(generic_size);
     }
     else{
         wxWindow::Create(parent, wxID_ANY, wxDefaultPosition, AMS_SINGLE_CAN_SIZE);
@@ -3187,12 +3403,43 @@ void AmsItem::create(wxWindow *parent)
     if (m_ams_model != AMSModel::AMS_LITE) {
         sizer_can = new wxBoxSizer(wxHORIZONTAL);
         sizer_item = new wxBoxSizer(wxVERTICAL);
-        auto it = m_info.cans.begin();
-        for (; it != m_info.cans.end(); it++) {
-            AddCan(*it, m_can_count, m_info.cans.size(), sizer_can);
+        const bool generic_layout = use_generic_ams_layout(m_ams_model);
+        const int lane_count = static_cast<int>(m_info.cans.size());
+        const int content_width = generic_layout ? generic_ams_layout_width(this, lane_count) : 0;
+        const bool scroll_lanes = generic_layout && lane_count > 8;
+        const auto lane_centers = generic_layout
+            ? generic_ams_lane_centers(lane_count, content_width)
+            : std::vector<int>();
+
+        m_can_parent = this;
+        if (scroll_lanes) {
+            m_can_scroll = new wxScrolledWindow(this, wxID_ANY);
+            m_can_scroll->SetScrollRate(FromDIP(10), 0);
+            m_can_scroll->SetMinSize(wxSize(FromDIP(264), FromDIP(143)));
+            m_can_scroll->SetBackgroundColour(StateColor::darkModeColorFor(AMS_CONTROL_DEF_LIB_BK_COLOUR));
+            m_can_scroll_sizer = new wxBoxSizer(wxVERTICAL);
+            m_can_scroll->SetSizer(m_can_scroll_sizer);
+            m_can_parent = m_can_scroll;
+        }
+
+        int previous_right = 0;
+        for (int can_index = 0; can_index < lane_count; ++can_index) {
+            if (generic_layout) {
+                const int left = lane_centers[can_index] - FromDIP(26);
+                sizer_can->AddSpacer(std::max(0, left - previous_right));
+                AddCan(m_info.cans[can_index], m_can_count, m_info.cans.size(), sizer_can);
+                previous_right = left + FromDIP(52);
+            }
+            else {
+                AddCan(m_info.cans[can_index], m_can_count, m_info.cans.size(), sizer_can);
+            }
             m_can_count++;
         }
-        it = m_info.cans.begin();
+        if (generic_layout)
+            sizer_can->AddSpacer(std::max(0, content_width - previous_right));
+        if (generic_layout)
+            sizer_can->SetMinSize(wxSize(content_width, -1));
+
         //auto        road_panel = new wxWindow(this, wxID_ANY);
         //auto        road_panel = new wxPanel(this, wxID_ANY);
         //road_panel->SetSize(AMS_CAN_ROAD_SIZE);
@@ -3207,11 +3454,18 @@ void AmsItem::create(wxWindow *parent)
                 sizer_item->Add(m_ext_image, 0, wxALIGN_CENTER, 0);
             }
         }
-        m_panel_road = new AMSRoadUpPart(this, wxID_ANY, m_info, m_ams_model);
+        m_panel_road = new AMSRoadUpPart(m_can_parent, wxID_ANY, m_info, m_ams_model);
 
-        sizer_item->Add(sizer_can, 0, wxALIGN_CENTER_HORIZONTAL, 0);
-        //sizer_item->Add(m_panel_road, 0, wxALIGN_CENTER_HORIZONTAL, 0);
-        sizer_item->Add(m_panel_road, 1, wxEXPAND);
+        if (scroll_lanes) {
+            m_can_scroll_sizer->Add(sizer_can, 0, wxALIGN_LEFT, 0);
+            m_can_scroll_sizer->Add(m_panel_road, 0, wxALIGN_LEFT, 0);
+            sizer_item->Add(m_can_scroll, 1, wxEXPAND);
+        }
+        else {
+            sizer_item->Add(sizer_can, 0, wxALIGN_CENTER_HORIZONTAL, 0);
+            //sizer_item->Add(m_panel_road, 0, wxALIGN_CENTER_HORIZONTAL, 0);
+            sizer_item->Add(m_panel_road, 1, wxEXPAND);
+        }
 
         SetSizer(sizer_item);
     }
@@ -3235,13 +3489,17 @@ void AmsItem::create(wxWindow *parent)
 
     Layout();
     Fit();
+    if (m_can_scroll) {
+        m_can_scroll->Layout();
+        m_can_scroll->FitInside();
+    }
     Thaw();
     //Refresh();
 }
 
 void AmsItem::AddCan(Caninfo caninfo, int canindex, int maxcan, wxBoxSizer* sizer)
 {
-    auto        amscan = new wxWindow(this, wxID_ANY);
+    auto        amscan = new wxWindow(m_can_parent ? m_can_parent : this, wxID_ANY);
 
     amscan->SetSize(wxSize(FromDIP(52), FromDIP(109)));
     amscan->SetMinSize(wxSize(FromDIP(52), FromDIP(109)));
@@ -3322,7 +3580,8 @@ void AmsItem::AddCan(Caninfo caninfo, int canindex, int maxcan, wxBoxSizer* size
     amscan->Layout();
     amscan->Fit();
 
-    sizer->Add(amscan, 0, wxUP | wxLEFT | wxRIGHT, FromDIP(5));
+    const int margin = use_generic_ams_layout(m_ams_model) ? 0 : FromDIP(5);
+    sizer->Add(amscan, 0, wxUP | wxLEFT | wxRIGHT, margin);
 
     m_can_lib_list[caninfo.can_id] = m_panel_lib;
     //m_can_road_list[caninfo.can_id] = m_panel_road;
@@ -3447,6 +3706,10 @@ void AmsItem::UpdateInfo(AMSinfo info)
     }
 
     Layout();
+    if (m_can_scroll) {
+        m_can_scroll->Layout();
+        m_can_scroll->FitInside();
+    }
 }
 
 void AmsItem::SetDefSelectCan()

src/slic3r/GUI/Widgets/AMSItem.hpp

@@ -30,6 +30,7 @@
 #include <wx/string.h>
 #include <wx/timer.h>
 #include <wx/sizer.h>
+#include <wx/scrolwin.h>
 
 #include "slic3r/GUI/DeviceCore/DevFilaSwitch.h" // Orca: DevFilaSwitch::SwitchPos for inlet-aware AMS placement
 
@@ -96,6 +97,7 @@ enum class AMSRoadShowMode : int {
     AMS_ROAD_MODE_SINGLE,
     AMS_ROAD_MODE_SINGLE_N3S,
     AMS_ROAD_MODE_AMS_LITE,
+    AMS_ROAD_MODE_GENERIC,
     AMS_ROAD_MODE_NONE
 };
 
@@ -480,6 +482,7 @@ public:
     //AMSextruderImage *m_amsSextruder{nullptr};
     AMSextruderImage* m_left_extruder = nullptr;
     AMSextruderImage* m_right_extruder = nullptr;
+    std::vector<AMSextruderImage*> m_nozzle_extruders;
     AMSextruder(wxWindow *parent, wxWindowID id, int nozzle_num, const wxPoint &pos = wxDefaultPosition, const wxSize &size = wxDefaultSize);
     ~AMSextruder();
 
@@ -681,6 +684,8 @@ public:
     // void                         Update(AMSRoadDownPartMode nozzle, AMSRoadShowMode left_mode, AMSRoadShowMode right_mode, int left_len, int right_len);
     void UpdateLeft(int nozzle_num, AMSRoadShowMode mode);
     void UpdateRight(int nozzle_num, AMSRoadShowMode mode);
+    void SetNozzleCount(int nozzle_num);
+    void SetSingleSideLayout(bool enabled, AMSPanelPos pos = AMSPanelPos::LEFT_PANEL);
 
     void OnVamsLoading(bool load, wxColour col = AMS_CONTROL_GRAY500);
     void SetPassRoadColour(bool left, wxColour col);
@@ -698,6 +703,8 @@ private:
     AMSRoadShowMode m_left_rode_mode       = {AMSRoadShowMode::AMS_ROAD_MODE_FOUR};
     AMSRoadShowMode m_right_rode_mode      = {AMSRoadShowMode::AMS_ROAD_MODE_FOUR};
     bool            m_selected             = {false};
+    bool            m_single_side_layout   = {false};
+    AMSPanelPos     m_single_side_pos     = {AMSPanelPos::LEFT_PANEL};
 
     int             m_left_road_length     = {-1};
     int             m_right_road_length    = {-1};
@@ -864,6 +871,9 @@ private:
 
     std::map<std::string, AMSLib*>      m_can_lib_list;
     //std::map<std::string, AMSRoad*>     m_can_road_list;
+    wxScrolledWindow* m_can_scroll = { nullptr };
+    wxBoxSizer*       m_can_scroll_sizer = { nullptr };
+    wxWindow*         m_can_parent = { nullptr };
     AMSRoadUpPart* m_panel_road = { nullptr };
     std::map<std::string, AMSrefresh*>  m_can_refresh_list;
     AMSHumidity* m_humidity = { nullptr };

src/slic3r/GUI/Widgets/MultiNozzleSync.cpp

@@ -420,6 +420,14 @@ ExtruderBadge::ExtruderBadge(wxWindow* parent) : wxPanel(parent)
 
 void ExtruderBadge::SetExtruderInfo(int extruder_id, const std::string& diameter, const NozzleVolumeType& volume_type)
 {
+    // The badge renders exactly two extruders (left/right). A generic non-BBL printer with
+    // N > 2 can report an out-of-range id here (see MultiNozzleStatusTable::UpdateRackInfo);
+    // reject it rather than writing past the two-element lists.
+    if (extruder_id < 0 || extruder_id >= static_cast<int>(m_diameter_list.size())) {
+        BOOST_LOG_TRIVIAL(warning) << __FUNCTION__ << ": out-of-range extruder_id " << extruder_id;
+        return;
+    }
+
     m_diameter_list[extruder_id] = diameter;
     m_volume_type_list[extruder_id] = volume_type;
 
@@ -867,14 +875,21 @@ void MultiNozzleStatusTable::UpdateRackInfo(std::weak_ptr<DevNozzleRack> rack)
         bool has_right = false;
         for (auto& elem : nozzles_in_extruder) {
             auto& nozzle = elem.second;
-            int extruder_id = nozzle.AtLeftExtruder() ? 0 : 1;
-            if (nozzle.AtRightExtruder())
-                has_right = true;
+
+            int extruder_id{};
+            if (wxGetApp().preset_bundle && wxGetApp().preset_bundle->is_bbl_vendor()) {
+                extruder_id = nozzle.AtLeftExtruder() ? 0 : 1;
+                if (nozzle.AtRightExtruder())
+                    has_right = true;
+            }
+            else
+                extruder_id = nozzle.GetExtruderId();
 
             NozzleVolumeType volume_type = DevNozzle::ToNozzleVolumeType(nozzle.m_nozzle_flow);
 
             m_badge->SetExtruderInfo(extruder_id, format_diameter_to_str(nozzle.GetNozzleDiameter()), volume_type);
         }
+        // TODO: Update for N extruders
         m_badge->SetExtruderValid(has_right);
     }
 }

src/slic3r/GUI/Widgets/TempInput.cpp

@@ -184,6 +184,9 @@ void TempInput::SetFinish()
     wxCommandEvent event(wxCUSTOMEVT_SET_TEMP_FINISH);
     event.SetInt(temp_type);
     event.SetString(wxString::Format("%d", m_input_type));
+    // N-extruder temp controls all share TEMP_OF_NORMAL_TYPE, so the string payload above can't
+    // tell them apart; carry widget identity so the listener can find which one fired.
+    event.SetEventObject(this);
     wxPostEvent(this->GetParent(), event);
 }
 

src/slic3r/GUI/wxExtensions.cpp

@@ -19,7 +19,7 @@
 #include <wx/dcclient.h>
 #include <wx/dcmemory.h>
 #include <wx/colour.h>
-#include <wx/colourdata.h>
+#include <wx/dialog.h>
 #include <wx/anybutton.h>
 #include <wx/object.h>
 #include <wx/popupwin.h>
@@ -630,43 +630,6 @@ std::vector<std::vector<std::string>> read_color_pack(std::vector<std::string> c
     return color_info;
 }
 
-wxColourData show_sys_picker_dialog(wxWindow *parent, const wxColourData &clr_data)
-{
-    wxColourData data = clr_data;
-    data.SetChooseFull(true);
-
-    // Load custom colors from config (support both "r,g,b,a" and "#RRGGBB" formats)
-    std::vector<std::string> colors = Slic3r::GUI::wxGetApp().app_config->get_custom_color_from_config();
-    for (int i = 0; i < (int)colors.size(); i++) {
-        wxColour c;
-        if (colors[i].find(',') != std::string::npos)
-            c = string_to_wxColor(colors[i]);
-        else
-            c = wxColour(colors[i]);
-        if (c.IsOk())
-            data.SetCustomColour(i, c);
-    }
-
-    wxColourDialog dialog(parent, &data);
-    dialog.SetTitle(_L("Please choose the filament color"));
-
-    if (dialog.ShowModal() == wxID_OK) {
-        data = dialog.GetColourData();
-
-        // Save custom colors to config (use RGBA string format for consistency)
-        std::vector<std::string> colors;
-        colors.resize(CUSTOM_COLOR_COUNT);
-        for (int i = 0; i < CUSTOM_COLOR_COUNT; i++) {
-            wxColour custom_clr = data.GetCustomColour(i);
-            if (custom_clr.IsOk())
-                colors[i] = color_to_string(custom_clr);
-        }
-        Slic3r::GUI::wxGetApp().app_config->save_custom_color_to_config(colors);
-    }
-
-    return data;
-}
-
 wxBitmap *get_extruder_color_icon(std::vector<std::string> colors, bool is_gradient, std::string label, int icon_width, int icon_height,
                                   const std::vector<wxColour> *ramp){
 

src/slic3r/GUI/wxExtensions.hpp

@@ -6,7 +6,6 @@
 #include <cstddef>
 #include <wx/checklst.h>
 #include <wx/colour.h>
-#include <wx/colourdata.h>
 #include <wx/combo.h>
 #include <wx/dataview.h>
 #include <wx/button.h>
@@ -21,7 +20,6 @@
 #include <wx/scrolwin.h>
 #include <wx/spinctrl.h>
 #include <wx/artprov.h>
-#include <wx/colordlg.h>
 
 #include <vector>
 #include <functional>
@@ -89,7 +87,6 @@ wxBitmap * get_extruder_color_icon(std::string color, std::string label, int ico
 wxBitmap * get_extruder_color_icon(std::vector<std::string> colors, bool is_gradient, std::string label, int icon_width, int icon_height,
                                    const std::vector<wxColour> *ramp = nullptr);
 std::vector<std::vector<std::string>> read_color_pack(std::vector<std::string> color_pack);
-wxColourData show_sys_picker_dialog(wxWindow *parent, const wxColourData &clr_data);
 
 namespace Slic3r {
 namespace GUI {

src/slic3r/Utils/MoonrakerPrinterAgent.cpp

@@ -1059,6 +1059,25 @@ int MoonrakerPrinterAgent::handle_request(const std::string& dev_id, const std::
             }
         }
 
+        // Tool selection is printer-specific G-code. Moonraker forwards the
+        // conventional T<index> command to Klipper, where the printer can
+        // implement logical selection or a physical toolhead attach macro.
+        if (cmd == "select_extruder") {
+            if (!json["print"].contains("extruder_index") || !json["print"]["extruder_index"].is_number_integer()) {
+                BOOST_LOG_TRIVIAL(error) << "MoonrakerPrinterAgent: select_extruder missing integer extruder_index, full json: " << json_str;
+                return BAMBU_NETWORK_ERR_INVALID_RESULT;
+            }
+
+            const int extruder_idx = json["print"]["extruder_index"].get<int>();
+            if (extruder_idx < 0) {
+                BOOST_LOG_TRIVIAL(error) << "MoonrakerPrinterAgent: select_extruder received negative extruder_index: " << extruder_idx;
+                return BAMBU_NETWORK_ERR_INVALID_RESULT;
+            }
+
+            send_gcode_async(dev_id, "T" + std::to_string(extruder_idx));
+            return BAMBU_NETWORK_SUCCESS;
+        }
+
         if (cmd == "home") {
             send_gcode_async(dev_id, "G28");
             return BAMBU_NETWORK_SUCCESS;
@@ -1155,7 +1174,7 @@ bool MoonrakerPrinterAgent::query_printer_status(const std::string& base_url,
                                                  nlohmann::json&    status,
                                                  std::string&       error) const
 {
-    std::string url = join_url(base_url, "/printer/objects/query?print_stats&virtual_sdcard&extruder&heater_bed&fan");
+    std::string url = join_url(base_url, "/printer/objects/query?print_stats&virtual_sdcard&toolhead&extruder&heater_bed&fan");
 
     std::string response_body;
     bool        success = false;
@@ -1563,11 +1582,12 @@ void MoonrakerPrinterAgent::run_status_stream(std::string dev_id, std::string ba
                 }
 
                 for (const auto& name : this->available_objects) {
-                    if (name == "extruder" || name.rfind("extruder", 0) == 0) {
+                    const bool is_main_extruder = name == "extruder";
+                    const bool is_additional_extruder =
+                        name.rfind("extruder", 0) == 0 && name.size() > 8 &&
+                        std::all_of(name.begin() + 8, name.end(), [](unsigned char c) { return std::isdigit(c) != 0; });
+                    if (is_main_extruder || is_additional_extruder) {
                         subscribe_objects.insert(name);
-                        if (name == "extruder") {
-                            break;
-                        }
                     }
                 }
             } else {
@@ -1863,6 +1883,81 @@ nlohmann::json MoonrakerPrinterAgent::build_print_payload_locked() const
         }
     }
 
+    // MachineObject::parse_new_info() only parses device.extruder when the four
+    // legacy new-protocol fields are present. Moonraker has no equivalents, so
+    // empty values act as compatibility markers without enabling any features.
+    std::map<int, const nlohmann::json*> extruder_status;
+    for (const auto& item : status_cache.items()) {
+        int extruder_id = -1;
+        if (item.key() == "extruder") {
+            extruder_id = 0;
+        } else if (item.key().rfind("extruder", 0) == 0 && item.key().size() > 8 &&
+                   std::all_of(item.key().begin() + 8, item.key().end(), [](unsigned char c) { return std::isdigit(c) != 0; })) {
+            try {
+                extruder_id = std::stoi(item.key().substr(8));
+            } catch (...) {
+                extruder_id = -1;
+            }
+        }
+        if (extruder_id >= 0 && item.value().is_object()) {
+            extruder_status.emplace(extruder_id, &item.value());
+        }
+    }
+
+    if (!extruder_status.empty()) {
+        auto& device_extruder = payload["print"]["device"]["extruder"];
+
+        int current_extruder_id = 0;
+        if (status_cache.contains("toolhead") && status_cache["toolhead"].is_object() &&
+            status_cache["toolhead"].contains("extruder") && status_cache["toolhead"]["extruder"].is_string()) {
+            const std::string active_extruder = status_cache["toolhead"]["extruder"].get<std::string>();
+            if (active_extruder != "extruder" && active_extruder.rfind("extruder", 0) == 0 && active_extruder.size() > 8 &&
+                std::all_of(active_extruder.begin() + 8, active_extruder.end(), [](unsigned char c) { return std::isdigit(c) != 0; })) {
+                try {
+                    const int parsed_id = std::stoi(active_extruder.substr(8));
+                    if (parsed_id >= 0 && parsed_id < 16 && extruder_status.count(parsed_id) != 0) {
+                        current_extruder_id = parsed_id;
+                    }
+                } catch (...) {
+                    // Keep the main extruder as the fallback for malformed status data.
+                }
+            }
+        }
+
+        const int extruder_count = std::min<int>(static_cast<int>(extruder_status.size()), 0xF);
+        device_extruder["state"] = extruder_count | (current_extruder_id << 4);
+        device_extruder["info"] = nlohmann::json::array();
+
+        auto encoded_temperature = [](const nlohmann::json& status, const char* key) {
+            if (!status.contains(key) || !status[key].is_number()) {
+                return 0;
+            }
+            const double temperature = status[key].get<double>();
+            return std::clamp(static_cast<int>(temperature + 0.5), 0, 65535);
+        };
+
+        for (const auto& [extruder_id, status] : extruder_status) {
+            const int current_temperature = encoded_temperature(*status, "temperature");
+            const int target_temperature  = encoded_temperature(*status, "target");
+            device_extruder["info"].push_back({
+                {"id", extruder_id},
+                {"filam_bak", nlohmann::json::array()},
+                {"info", 1 << 3}, // The configured Moonraker extruder has a toolhead.
+                {"temp", current_temperature | (target_temperature << 16)},
+                {"spre", 0},
+                {"snow", 0},
+                {"star", 0},
+                {"stat", 0},
+                {"hnow", 0},
+            });
+        }
+
+        payload["print"]["cfg"]  = "";
+        payload["print"]["fun"]  = "";
+        payload["print"]["aux"]  = "";
+        payload["print"]["stat"] = "";
+    }
+
     if (status_cache.contains("heater_bed") && status_cache["heater_bed"].is_object()) {
         const auto& bed = status_cache["heater_bed"];
         if (bed.contains("temperature") && bed["temperature"].is_number()) {

tests/libslic3r/test_texture_displacement.cpp

@@ -94,33 +94,6 @@ static std::shared_ptr<std::vector<unsigned char>> make_flat_rgb_png(uint8_t r,
     return std::make_shared<std::vector<unsigned char>>(std::move(bytes));
 }
 
-// An RGB image built by a caller-supplied function of the pixel position, written through the same
-// temp-file round trip the flat helpers above use.
-static std::shared_ptr<std::vector<unsigned char>> make_rgb_png(
-    size_t w, size_t h, const std::function<std::array<uint8_t, 3>(size_t, size_t)> &at)
-{
-    std::vector<uint8_t> rgb;
-    rgb.reserve(w * h * 3);
-    for (size_t y = 0; y < h; ++y)
-        for (size_t x = 0; x < w; ++x) {
-            const std::array<uint8_t, 3> c = at(x, y);
-            rgb.insert(rgb.end(), { c[0], c[1], c[2] });
-        }
-    const boost::filesystem::path tmp_path = boost::filesystem::temp_directory_path()
-        / boost::filesystem::unique_path("texdisp_test_%%%%%%%%.png");
-    REQUIRE(Slic3r::png::write_rgb_to_file(tmp_path.string(), w, h, rgb));
-
-    std::vector<unsigned char> bytes;
-    {
-        std::ifstream ifs(tmp_path.string(), std::ios::binary);
-        bytes.assign(std::istreambuf_iterator<char>(ifs), std::istreambuf_iterator<char>());
-    }
-    boost::system::error_code ec;
-    boost::filesystem::remove(tmp_path, ec);
-    REQUIRE_FALSE(bytes.empty());
-    return std::make_shared<std::vector<unsigned char>>(std::move(bytes));
-}
-
 // A hard-edged black/white checkerboard, the worst case for a height map: every texel boundary is a
 // step, which is precisely the relief the post-process smoothing exists to round off.
 static std::shared_ptr<std::vector<unsigned char>> make_checkerboard_png(size_t w = 16, size_t h = 16)
@@ -2653,61 +2626,6 @@ TEST_CASE("TextureDisplacement: a texture of flat colours is told apart from a c
     CHECK(d.flat_share < 0.85f);
 }
 
-TEST_CASE("A mirrored tile folds at its seam instead of wrapping to the far edge", "[TextureDisplacement]")
-{
-    // Mirrored repeat exists so a tile edge lines up with itself, which means the texel past the edge
-    // is the edge again. Wrapping the bilinear neighbour instead blends the image's two opposite edges
-    // together: on a ramp from black to white it turned the white edge into near-black at every seam,
-    // a visible line and a disagreement with the preview, where the GPU binds GL_MIRRORED_REPEAT.
-    TextureDisplacementLayer layer;
-    layer.image_data = make_rgb_png(8, 8, [](size_t x, size_t) {
-        const uint8_t v = uint8_t(x * 36); // 0 at the left edge, 252 at the right
-        return std::array<uint8_t, 3>{ v, v, v };
-    });
-    const DecodedHeightTexture tex = decode_height_texture(layer);
-    REQUIRE(tex.width == 8);
-    const float bright = 252.f / 255.f;
-
-    // Either side of a seam the fold puts the bright edge, not a blend with the dark one.
-    for (const float u : { 0.999f, 1.001f, 2.999f, 3.001f }) {
-        INFO("u = " << u);
-        CHECK_THAT(tex.sample(Vec2f(u, 0.5f), true, TextureTileMethod::MirroredRepeat),
-                   WithinAbs(bright, 0.02f));
-    }
-
-    // Plain repeat is the opposite case and must keep wrapping: its next tile really does start at the
-    // far edge, so just inside the seam the neighbour is the dark one.
-    CHECK(tex.sample(Vec2f(0.999f, 0.5f), true, TextureTileMethod::Repeat) < 0.1f);
-}
-
-TEST_CASE("A two-colour ramp is not mistaken for an image of flat colours", "[TextureDisplacement]")
-{
-    // The histogram alone cannot tell these two apart: a ramp between two colours visits as few
-    // coarse bins as the two colours on their own, and both score far above the flat-share
-    // threshold. What separates them is that the ramp fills its colour axis and the pair does not.
-    const std::array<uint8_t, 3> a{ 0x4f, 0xc3, 0x08 };
-    const std::array<uint8_t, 3> b{ 0xd4, 0x2f, 0x25 };
-
-    TextureDisplacementLayer ramp;
-    ramp.image_data = make_rgb_png(96, 96, [&](size_t, size_t y) {
-        const float t = float(y) / 95.f;
-        return std::array<uint8_t, 3>{ uint8_t(std::lround(a[0] + (b[0] - a[0]) * t)),
-                                       uint8_t(std::lround(a[1] + (b[1] - a[1]) * t)),
-                                       uint8_t(std::lround(a[2] + (b[2] - a[2]) * t)) };
-    });
-    const TextureDetail ramp_detail = analyze_texture_detail(ramp);
-    CHECK(ramp_detail.flat_share >= 0.85f);     // the old signal, on its own, calls this flat
-    CHECK(ramp_detail.axis_coverage > 0.8f);    // but its colours run the length of the axis
-    CHECK_FALSE(ramp_detail.flat_colors);       // so mixes stay available
-
-    // The same two colours as areas rather than a ramp: nothing in between, so no mix would serve it.
-    TextureDisplacementLayer two_tone;
-    two_tone.image_data = make_rgb_png(96, 96, [&](size_t, size_t y) { return y < 48 ? a : b; });
-    const TextureDetail two_tone_detail = analyze_texture_detail(two_tone);
-    CHECK(two_tone_detail.axis_coverage < 0.25f);
-    CHECK(two_tone_detail.flat_colors);
-}
-
 TEST_CASE("Each layer's texture is sampled only on its own painted area", "[TextureDisplacement]")
 {
     // Two layers with different textures and depths, one painted on the cube's top, one on its -X side.

tests/slic3rutils/CMakeLists.txt

@@ -5,10 +5,13 @@ add_executable(${_TEST_NAME}_tests
     test_config_value_formatter.cpp
     test_creality_cfs_match.cpp
     test_dev_mapping.cpp
+    test_dev_extder_system.cpp
     test_device_access.cpp
     test_moonraker_discovery.cpp
     test_network_discovery.cpp
     test_filament_bitmap_utils.cpp
+    test_colour_picker_field.cpp
+    test_filament_color_picker.cpp
     test_device_progress.cpp
     test_device_manager_integration.cpp
     test_web_media_controller.cpp

tests/slic3rutils/test_colour_picker_field.cpp

@@ -0,0 +1,47 @@
+#include "slic3r/GUI/Field.hpp"
+#include "libslic3r/Config.hpp"
+#include <boost/any.hpp>
+#include <catch2/catch_test_macros.hpp>
+#include <string>
+#include <wx/colour.h>
+#include <wx/string.h>
+
+using namespace Slic3r;
+using namespace Slic3r::GUI;
+
+namespace {
+class TestColourPicker : public ColourPicker {
+public:
+    TestColourPicker() : ColourPicker(ConfigOptionDef{}, "filament_colour") {}
+    std::string value() { return boost::any_cast<std::string>(get_value()); }
+};
+}
+
+TEST_CASE("Undefined color fields remain distinct from opaque black", "[ColourPickerField]")
+{
+    TestColourPicker field;
+    REQUIRE(field.value().empty());
+    field.set_value(std::string("#000000"));
+    REQUIRE(field.value() == "#000000");
+    field.set_value(std::string("invalid color"));
+    REQUIRE(field.value().empty());
+    field.set_value(boost::any(wxString("#123456")));
+    REQUIRE(field.value() == "#123456");
+    field.set_value(std::string());
+    REQUIRE(field.value().empty());
+}
+
+TEST_CASE("Programmatic color field assignment stays silent", "[ColourPickerField]")
+{
+    TestColourPicker field;
+    int changes = 0;
+    field.m_on_change = [&](const std::string&, const boost::any&) { ++changes; };
+    field.set_value(std::string("#123456"), false);
+    field.set_value(boost::any(wxString("#654321")), true);
+    REQUIRE(changes == 0);
+    REQUIRE(field.value() == "#654321");
+    field.m_disable_change_event = true;
+    field.set_value(std::string("#FF0000"));
+    REQUIRE(field.value() == "#FF0000");
+    REQUIRE(changes == 0);
+}

tests/slic3rutils/test_dev_extder_system.cpp

@@ -0,0 +1,158 @@
+// Match the include environment that libslic3r_gui TUs get from pchheader.hpp: Windows.h with
+// WIN32_LEAN_AND_MEAN/NOMINMAX must come first so rpcndr.h's `byte` is processed before <cstddef>
+// makes std::byte a competing candidate (otherwise the Windows COM headers pulled in via
+// DeviceManager.hpp error with an ambiguous `byte`). wx/timer.h must precede DeviceManager.hpp,
+// which includes DeviceErrorDialog.hpp (uses wxTimerEvent) before its own wx/timer.h include.
+#include <string>
+#include <utility>
+#include <vector>
+#ifdef WIN32
+    #ifndef WIN32_LEAN_AND_MEAN
+        #define WIN32_LEAN_AND_MEAN
+    #endif
+    #ifndef NOMINMAX
+        #define NOMINMAX
+    #endif
+    #include <Windows.h>
+#endif
+
+#include <catch2/catch_all.hpp>
+
+#include <wx/timer.h>
+
+#include "slic3r/GUI/DeviceManager.hpp"
+#include "slic3r/GUI/DeviceCore/DevExtruderSystem.h"
+
+#include <nlohmann/json.hpp>
+
+using json = nlohmann::json;
+using namespace Slic3r;
+
+TEST_CASE("Extruder state decodes a generic toolhead set", "[DevExtderSystem]")
+{
+    MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+
+    // device.extruder.state packing: count 0..3, current 4..7, target 8..11,
+    // switch 12..14, loading 15..18, busy 19.
+    const int extruder_count   = 4;
+    const int current_extruder = 2;
+    const int switch_state     = ES_BUSY;
+    const int loading_extruder = 1;
+    const int state = extruder_count | (current_extruder << 4) | (3 << 8) |
+                      (switch_state << 12) | (loading_extruder << 15) | (1 << 19);
+
+    json extruder = { {"state", state}, {"info", json::array()} };
+    for (int id = 0; id < extruder_count; ++id) {
+        // info: bit 1 has filament, bit 3 nozzle present.
+        // temp: current 0..15, target 16..31. spre/snow/star: slot 0..7, ams 8..15.
+        extruder["info"].push_back({
+            {"id", id},
+            {"filam_bak", json::array({id})},
+            {"info", (id % 2 == 0 ? 2 : 0) | 8},
+            {"temp", (200 + id) | ((250 + id) << 16)},
+            {"spre", 10 << 8},
+            {"snow", id | ((20 + id) << 8)},
+            {"star", 30 << 8},
+            {"stat", 0},
+            {"hnow", id},
+        });
+    }
+
+    ExtderSystemParser::ParseV2_0(extruder, obj.GetExtderSystem());
+
+    REQUIRE(obj.GetExtderSystem()->GetTotalExtderCount() == extruder_count);
+    CHECK(obj.GetExtderSystem()->GetCurrentExtderId() == current_extruder);
+    CHECK(static_cast<int>(obj.GetExtderSystem()->GetSwitchState()) == switch_state);
+    CHECK(obj.GetExtderSystem()->GetLoadingExtderId() == loading_extruder);
+    CHECK(obj.GetExtderSystem()->IsBusyLoading());
+
+    for (int id = 0; id < extruder_count; ++id) {
+        const auto ext = obj.GetExtderSystem()->GetExtderById(id);
+        REQUIRE(ext.has_value());
+        INFO("extruder " << id);
+        CHECK(ext->GetExtId() == id);
+        CHECK(ext->GetCurrentTemp() == 200 + id);
+        CHECK(ext->GetTargetTemp() == 250 + id);
+        CHECK(ext->HasFilamentInExt() == (id % 2 == 0));
+        CHECK(ext->GetFilamBackup() == std::vector<int>{id});
+        CHECK(ext->GetSlotPre().ams_id == "10");
+        CHECK(ext->GetSlotNow().ams_id == std::to_string(20 + id));
+        CHECK(ext->GetSlotNow().slot_id == std::to_string(id));
+        CHECK(ext->GetSlotTarget().ams_id == "30");
+        CHECK(ext->GetNozzleId() == id);
+    }
+}
+
+TEST_CASE("Legacy single-toolhead parser fills only the main extruder", "[DevExtderSystem]")
+{
+    MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+    REQUIRE(obj.GetExtderSystem()->GetTotalExtderCount() == 1);
+
+    // ParseV1_0 is the legacy single/dual fallback. It returns unless the system reports exactly
+    // one toolhead, so it only ever writes MAIN_EXTRUDER_ID's fields.
+    const json legacy = {
+        {"nozzle_temper", 210},
+        {"nozzle_target_temper", 245},
+        {"ams", {{"tray_now", "2"}, {"tray_tar", "3"}}}
+    };
+    ExtderSystemParser::ParseV1_0(legacy, obj.GetExtderSystem());
+
+    const auto ext = obj.GetExtderSystem()->GetExtderById(MAIN_EXTRUDER_ID);
+    REQUIRE(ext.has_value());
+    CHECK(ext->GetCurrentTemp() == 210);
+    CHECK(ext->GetTargetTemp() == 245);
+
+    // Below 0x80 the tray pointer encodes ams_id = value / 4, slot_id = value % 4.
+    CHECK(ext->GetSlotNow().ams_id == "0");
+    CHECK(ext->GetSlotNow().slot_id == "2");
+    CHECK(ext->GetSlotTarget().ams_id == "0");
+    CHECK(ext->GetSlotTarget().slot_id == "3");
+    CHECK(obj.GetExtderSystem()->IsBusyLoading());
+    CHECK(obj.GetExtderSystem()->GetLoadingExtderId() == MAIN_EXTRUDER_ID);
+}
+
+// ParseV2_0 does not enforce the documented extruder dialect invariants: the count in `state` and
+// the id ordering of `info[]` are trusted, not checked. This test pins the resulting behavior.
+TEST_CASE("Malformed extruder payload is stored by info array position", "[DevExtderSystem]")
+{
+    const auto extder_info = [](int id) {
+        // Every key ParseV2_0 reads must be present.
+        return json{ {"id", id}, {"filam_bak", json::array()}, {"info", 0}, {"temp", 0},
+                     {"spre", 0}, {"snow", 0}, {"star", 0}, {"stat", 0}, {"hnow", 0} };
+    };
+
+    SECTION("state count disagrees with info length") {
+        MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+
+        // `state` reports 2 toolheads but info[] carries 3.
+        json info = json::array();
+        for (int id = 0; id < 3; ++id)
+            info.push_back(extder_info(id));
+        ExtderSystemParser::ParseV2_0(json{ {"state", 2}, {"info", info} }, obj.GetExtderSystem());
+
+        // The info array wins: three toolheads are stored. m_total_extder_count still holds 2, so
+        // GetTotalExtderCount() would trip its debug assert; only the stored vector is inspected.
+        CHECK(obj.GetExtderSystem()->GetTotalExtderSize() == 3);
+        for (int id = 0; id < 3; ++id) {
+            const auto ext = obj.GetExtderSystem()->GetExtderById(id);
+            REQUIRE(ext.has_value());
+            CHECK(ext->GetExtId() == id);
+        }
+    }
+
+    SECTION("info id differs from the array index") {
+        MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+
+        // ids 1 and 2 sit at array positions 0 and 1.
+        json info = json::array({extder_info(1), extder_info(2)});
+        ExtderSystemParser::ParseV2_0(json{ {"state", 2}, {"info", info} }, obj.GetExtderSystem());
+
+        // Toolheads are stored by array position; the payload id is kept but is not the lookup key.
+        const auto first = obj.GetExtderSystem()->GetExtderById(0);
+        REQUIRE(first.has_value());
+        CHECK(first->GetExtId() == 1);
+        const auto second = obj.GetExtderSystem()->GetExtderById(1);
+        REQUIRE(second.has_value());
+        CHECK(second->GetExtId() == 2);
+    }
+}

tests/slic3rutils/test_dev_mapping.cpp

@@ -13,10 +13,14 @@
     #include <Windows.h>
 #endif
 
+#include <set>
+#include <string>
+#include <utility>
+#include <vector>
+
 #include <catch2/catch_test_macros.hpp>
 #include "slic3r/GUI/DeviceCore/DevDefs.h"
 #include "libslic3r/ProjectTask.hpp"
-#include <vector>
 #include <catch2/catch_message.hpp>
 
 #include <catch2/catch_all.hpp>
@@ -65,6 +69,162 @@ TEST_CASE("AMS tray placeholder state follows the latest status", "[DevFilaSyste
     CHECK_FALSE(tray->is_slot_placeholder);
 }
 
+TEST_CASE("Agent filament slots preserve every extruder and AMS binding", "[DevFilaSystem]")
+{
+    MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+
+    const json filament = json::parse(R"({
+        "units": [
+            { "id": "0", "extruder": 0, "slots": [
+                { "index": 0, "loaded": true, "material": "PLA", "color": "FF5733FF" },
+                { "index": 1, "loaded": true, "material": "PLA", "color": "33C1FFFF" },
+                { "index": 2, "loaded": true, "material": "PLA", "color": "8D33FFFF" },
+                { "index": 3, "loaded": false, "material": "",    "color": "00000000" }
+            ] },
+            { "id": "1", "extruder": 1, "slots": [
+                { "index": 0, "loaded": true, "material": "ASA", "color": "33C1FFFF" },
+                { "index": 1, "loaded": true, "material": "ASA", "color": "8D33FFFF" },
+                { "index": 2, "loaded": true, "material": "ASA", "color": "FF5733FF" },
+                { "index": 3, "loaded": false, "material": "",    "color": "00000000" }
+            ] },
+            { "id": "2", "extruder": 2, "slots": [
+                { "index": 0, "loaded": true, "material": "ABS", "color": "8D33FFFF" },
+                { "index": 1, "loaded": true, "material": "ABS", "color": "FF5733FF" },
+                { "index": 2, "loaded": true, "material": "ABS", "color": "33C1FFFF" },
+                { "index": 3, "loaded": false, "material": "",    "color": "00000000" }
+            ] },
+            { "id": "3", "extruder": 3, "slots": [
+                { "index": 0, "loaded": true, "material": "PETG", "color": "FF5733FF" },
+                { "index": 1, "loaded": true, "material": "PETG", "color": "33C1FFFF" },
+                { "index": 2, "loaded": true, "material": "PETG", "color": "8D33FFFF" },
+                { "index": 3, "loaded": false, "material": "",    "color": "00000000" }
+            ] }
+        ],
+        "external": [
+            { "extruder": 3, "loaded": true, "material": "PETG", "preset_id": "P3" },
+            { "extruder": 0, "loaded": true, "material": "PLA",  "preset_id": "P0" },
+            { "extruder": 2, "loaded": false, "material": "ABS", "preset_id": "P2" },
+            { "extruder": 1, "loaded": true, "material": "ASA",  "preset_id": "P1" }
+        ]
+    })");
+
+    DevFilaSystemParser::ParseAgentFilament(filament, &obj, obj.GetFilaSystem().get());
+
+    REQUIRE(obj.vt_slot.size() == 4);
+    CHECK(obj.vt_slot[0].id == "255");
+    CHECK(obj.vt_slot[1].id == "254");
+    CHECK(obj.vt_slot[2].id == "253");
+    CHECK(obj.vt_slot[3].id == "252");
+    CHECK(obj.vt_slot[0].setting_id == "P0");
+    CHECK(obj.vt_slot[1].setting_id == "P1");
+    CHECK(obj.vt_slot[2].setting_id == "P2");
+    CHECK(obj.vt_slot[3].setting_id == "P3");
+
+    REQUIRE(obj.GetFilaSystem()->GetAmsCount() == 4);
+    for (int extruder = 0; extruder < 4; ++extruder) {
+        const auto& ams = obj.GetFilaSystem()->GetAmsList().at(std::to_string(extruder));
+        CHECK(ams->GetExtruderId() == extruder);
+        CHECK(ams->GetBindedExtruderSet() == std::set<int>{extruder});
+        REQUIRE(ams->GetTrays().size() == 4);
+        CHECK(ams->GetTrays().at("0")->color != ams->GetTrays().at("1")->color);
+        CHECK(ams->GetTrays().at("1")->color != ams->GetTrays().at("2")->color);
+        CHECK_FALSE(ams->GetTrays().at("3")->is_exists);
+    }
+
+    CHECK(obj.contains_tray("253", "0"));
+    CHECK(obj.get_tray("253", "0").setting_id == "P2");
+    CHECK(obj.GetFilaSystem()->GetExtruderIdByAmsId("253") == 2);
+
+    const auto tray_index_map = obj.GetFilaSystem()->GetTrayIndexMap();
+    REQUIRE(tray_index_map.count(252) == 1);
+    CHECK(tray_index_map.at(252).first == 252);
+    CHECK(tray_index_map.at(252).second == 0);
+}
+
+TEST_CASE("Generic AMS tray index map uses cumulative lane counts", "[DevMapping]")
+{
+    MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+
+    // A well-formed generic payload pairs "units" with "external". An empty external array resets
+    // vt_slot, clearing the default virtual tray (255) MachineObject's constructor seeds; otherwise
+    // that phantom external tray lands in GetTrayIndexMap and inflates the map size.
+    json filament = { {"units", json::array()}, {"external", json::array()} };
+    for (int ams_id = 0; ams_id < 2; ++ams_id) {
+        json unit = {
+            {"id", std::to_string(ams_id)},
+            {"extruder", ams_id},
+            {"slots", json::array()}
+        };
+        for (int slot_id = 0; slot_id < 5; ++slot_id)
+            unit["slots"].push_back({{"index", slot_id}, {"loaded", false}});
+        filament["units"].push_back(std::move(unit));
+    }
+
+    DevFilaSystemParser::ParseAgentFilament(filament, &obj, obj.GetFilaSystem().get());
+
+    const auto tray_index_map = obj.GetFilaSystem()->GetTrayIndexMap();
+    REQUIRE(tray_index_map.size() == 10);
+    CHECK(tray_index_map.at(0).first == 0);
+    CHECK(tray_index_map.at(0).second == 0);
+    CHECK(tray_index_map.at(4).first == 0);
+    CHECK(tray_index_map.at(4).second == 4);
+    CHECK(tray_index_map.at(5).first == 1);
+    CHECK(tray_index_map.at(5).second == 0);
+    CHECK(tray_index_map.at(9).first == 1);
+    CHECK(tray_index_map.at(9).second == 4);
+}
+
+TEST_CASE("Generic tray index map handles unequal per-unit slot counts", "[DevMapping]")
+{
+    MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+
+    // An "external" array must accompany "units" so vt_slot is reset (see the cumulative test above).
+    json filament = { {"units", json::array()}, {"external", json::array()} };
+    const std::vector<int> slot_counts = {4, 12};
+    for (int ams_id = 0; ams_id < static_cast<int>(slot_counts.size()); ++ams_id) {
+        json unit = { {"id", std::to_string(ams_id)}, {"extruder", ams_id}, {"slots", json::array()} };
+        for (int slot_id = 0; slot_id < slot_counts[ams_id]; ++slot_id)
+            unit["slots"].push_back({{"index", slot_id}, {"loaded", false}});
+        filament["units"].push_back(std::move(unit));
+    }
+
+    DevFilaSystemParser::ParseAgentFilament(filament, &obj, obj.GetFilaSystem().get());
+
+    const auto tray_index_map = obj.GetFilaSystem()->GetTrayIndexMap();
+    REQUIRE(tray_index_map.size() == 16);
+    // Unit 0 occupies global lanes 0..3; unit 1 continues at 4..15 because the counter advances
+    // by the reported tray count, not by a fixed four-slot stride.
+    CHECK(tray_index_map.at(0).first == 0);
+    CHECK(tray_index_map.at(0).second == 0);
+    CHECK(tray_index_map.at(3).first == 0);
+    CHECK(tray_index_map.at(3).second == 3);
+    CHECK(tray_index_map.at(4).first == 1);
+    CHECK(tray_index_map.at(4).second == 0);
+    CHECK(tray_index_map.at(15).first == 1);
+    CHECK(tray_index_map.at(15).second == 11);
+}
+
+TEST_CASE("A generic AMS unit reports its reported tray count", "[DevFilaSystem]")
+{
+    MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");
+
+    json filament = { {"units", json::array()}, {"external", json::array()} };
+    const std::vector<int> slot_counts = {8, 1};
+    for (int ams_id = 0; ams_id < static_cast<int>(slot_counts.size()); ++ams_id) {
+        json unit = { {"id", std::to_string(ams_id)}, {"extruder", ams_id}, {"slots", json::array()} };
+        for (int slot_id = 0; slot_id < slot_counts[ams_id]; ++slot_id)
+            unit["slots"].push_back({{"index", slot_id}, {"loaded", false}});
+        filament["units"].push_back(std::move(unit));
+    }
+
+    DevFilaSystemParser::ParseAgentFilament(filament, &obj, obj.GetFilaSystem().get());
+
+    // Non-Bambu units are not capped at the four-slot Bambu contract; the reported tray count wins.
+    const auto& ams_list = obj.GetFilaSystem()->GetAmsList();
+    REQUIRE(ams_list.at("0")->GetSlotCount() == 8);
+    REQUIRE(ams_list.at("1")->GetSlotCount() == 1);
+}
+
 TEST_CASE("Switch-bound AMS trays map to the left extruder", "[DevMapping]")
 {
     MachineObject obj(nullptr, nullptr, "test", "test_dev", "127.0.0.1");

tests/slic3rutils/test_filament_bitmap_utils.cpp

@@ -22,6 +22,13 @@
 #include <cmath>
 
 #include <wx/colour.h>
+#ifdef __WXMSW__
+#include <wx/bitmap.h>
+#include <wx/image.h>
+#include <cstdlib>
+#include <utility>
+#include <catch2/generators/catch_generators.hpp>
+#endif
 #include <wx/string.h>
 
 #include "libslic3r/FilamentMixer.hpp"
@@ -260,3 +267,71 @@ TEST_CASE("sample_gradient_ramp returns nothing without a usable curve or step c
     curve.points = {{0.0, kGradientMaxRatio, NAN, NAN}, {1.0, kGradientMinRatio, NAN, NAN}};
     REQUIRE(Slic3r::GUI::sample_gradient_ramp(wxColour(255, 0, 0), wxColour(0, 0, 255), curve, 0).empty());
 }
+
+// The headless GTK/macOS suite does not initialize GUI display/font stock objects.
+// Exercise native bitmap pixels on Windows without adding that dependency elsewhere.
+#ifdef __WXMSW__
+TEST_CASE("Filament gradient pixels follow both endpoint directions without changing input", "[FilamentBitmapUtils]")
+{
+    const bool reverse = GENERATE(false, true);
+    const std::vector<wxColour> colors = reverse ? std::vector<wxColour>{wxColour(0, 0, 255), wxColour(255, 0, 0)}
+                                                 : std::vector<wxColour>{wxColour(255, 0, 0), wxColour(0, 0, 255)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(64, 16), true);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    // Interior pixels avoid backend-specific rasterization at the gradient boundary.
+    for (const auto& sample : {std::pair<int, wxColour>{2, colors.front()}, {61, colors.back()}}) {
+        REQUIRE(std::abs(int(image.GetRed(sample.first, 8)) - int(sample.second.Red())) <= 16);
+        REQUIRE(std::abs(int(image.GetBlue(sample.first, 8)) - int(sample.second.Blue())) <= 16);
+    }
+    REQUIRE(colors == original);
+}
+
+TEST_CASE("Filament halves preserve the same caller color order as gradients", "[FilamentBitmapUtils]")
+{
+    const bool reverse = GENERATE(false, true);
+    const std::vector<wxColour> colors = reverse ? std::vector<wxColour>{wxColour(0, 0, 255), wxColour(255, 0, 0)}
+                                                 : std::vector<wxColour>{wxColour(255, 0, 0), wxColour(0, 0, 255)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(64, 16), false);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    require_same_rgb(wxColour(image.GetRed(16, 8), image.GetGreen(16, 8), image.GetBlue(16, 8)), colors.front());
+    require_same_rgb(wxColour(image.GetRed(48, 8), image.GetGreen(48, 8), image.GetBlue(48, 8)), colors.back());
+    REQUIRE(colors == original);
+}
+
+TEST_CASE("Three color filament stripes retain caller order", "[FilamentBitmapUtils]")
+{
+    const std::vector<wxColour> colors{wxColour(0, 0, 255), wxColour(0, 255, 0), wxColour(255, 0, 0)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(72, 24), false);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    for (int i = 0; i < 3; ++i) {
+        const int x = 12 + i * 24;
+        require_same_rgb(wxColour(image.GetRed(x, 12), image.GetGreen(x, 12), image.GetBlue(x, 12)), colors[i]);
+    }
+    REQUIRE(colors == original);
+}
+
+TEST_CASE("Four color filament quadrants retain caller order", "[FilamentBitmapUtils]")
+{
+    const std::vector<wxColour> colors{wxColour(0, 0, 255), wxColour(0, 255, 0), wxColour(255, 0, 0), wxColour(255, 255, 0)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(64, 32), false);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    for (int i = 0; i < 4; ++i) {
+        const int x = i % 2 ? 48 : 16, y = i / 2 ? 24 : 8;
+        require_same_rgb(wxColour(image.GetRed(x, y), image.GetGreen(x, y), image.GetBlue(x, y)), colors[i]);
+    }
+    REQUIRE(colors == original);
+}
+
+#endif // __WXMSW__

tests/slic3rutils/test_filament_color_picker.cpp

@@ -0,0 +1,179 @@
+#include "slic3r/GUI/ColorPickerDialog.hpp"
+#include "libslic3r/Color.hpp"
+
+#include <algorithm>
+#include <limits>
+#include <stdexcept>
+#include <optional>
+#include <string>
+#include <vector>
+#include <cstddef>
+#include <catch2/catch_test_macros.hpp>
+#include <catch2/generators/catch_generators.hpp>
+
+using namespace Slic3r;
+using namespace Slic3r::GUI;
+
+// One color more than an ordered gradient may hold.
+static std::vector<std::string> too_many_gradient_colors()
+{
+    return std::vector<std::string>(COLOR_PICKER_MAX_GRADIENT_COLORS + 1, "#FF0000");
+}
+
+TEST_CASE("Project gradient direction survives editing and RGB serialization", "[FilamentColorPicker]")
+{
+    const std::vector<std::string> endpoints = {"#FF0000", "#0000FF"};
+    const FilamentColorPickerValue stored{endpoints, true};
+    const auto initial = filament_color_picker_selection(stored);
+    REQUIRE(initial);
+    REQUIRE(filament_color_picker_result(*initial).colors == endpoints);
+    REQUIRE_FALSE(filament_color_picker_changed(*initial, initial));
+    REQUIRE_FALSE(filament_color_picker_changed(*initial, std::nullopt));
+    const auto reverse = filament_color_picker_selection({{endpoints[1], endpoints[0]}, true});
+    REQUIRE(filament_color_picker_changed(*initial, reverse));
+    REQUIRE(filament_color_picker_result(*reverse).colors.front() == endpoints.back());
+}
+
+TEST_CASE("Unrepresentable project colors remain unchanged until a different selection is confirmed", "[FilamentColorPicker]")
+{
+    const auto value = GENERATE(FilamentColorPickerValue{too_many_gradient_colors(), true},
+                                FilamentColorPickerValue{{"#FF0000", "#0000FF"}, false});
+    REQUIRE_FALSE(filament_color_picker_selection(value));
+    const auto seed = filament_color_picker_initial(value);
+    REQUIRE_FALSE(filament_color_picker_changed(seed, seed));
+    REQUIRE_FALSE(filament_color_picker_changed(seed, std::nullopt));
+    const auto changed = filament_color_picker_selection({{"#FE0000"}, false});
+    REQUIRE(filament_color_picker_changed(seed, changed));
+    REQUIRE(filament_color_picker_result(*changed).colors == std::vector<std::string>{"#FE0000"});
+}
+
+TEST_CASE("Filament seeds preserve primary alpha when colors are invalid or absent", "[FilamentColorPicker]")
+{
+    const FilamentColorPickerValue stale{{"invalid", "#00FF00"}, false, "#12345680"};
+    REQUIRE_FALSE(filament_color_picker_selection(stale));
+    REQUIRE(filament_color_picker_result(filament_color_picker_initial(stale)).colors == std::vector<std::string>{"#12345680"});
+    const auto value = filament_color_picker_selection({{"#12345680", "#ABCDEF01"}, true});
+    REQUIRE(value);
+    REQUIRE(filament_color_picker_result(*value).colors == std::vector<std::string>{"#12345680", "#ABCDEF01"});
+    const auto missing = filament_color_picker_initial({});
+    REQUIRE(filament_color_picker_result(missing).colors == std::vector<std::string>{"#000000"});
+}
+
+TEST_CASE("Filament project colors round trip every alpha boundary with compatible opaque spelling", "[FilamentColorPicker]")
+{
+    const auto hex = GENERATE(std::string("#12345600"), std::string("#12345601"),
+                              std::string("#12345680"), std::string("#123456FE"),
+                              std::string("#123456FF"), std::string("#123456"));
+    const FilamentColorPickerValue stored{{hex}, false};
+    const auto selection = filament_color_picker_selection(stored);
+    REQUIRE(selection);
+    REQUIRE_FALSE(filament_color_picker_changed(*selection, selection));
+    REQUIRE_FALSE(filament_color_picker_changed(*selection, std::nullopt));
+    const auto result = filament_color_picker_result(*selection);
+    const std::string expected = hex == "#123456FF" ? "#123456" : hex;
+    REQUIRE(result.colors == std::vector<std::string>{expected});
+    ColorRGBA decoded;
+    REQUIRE(decode_color(result.colors.front(), decoded));
+    REQUIRE(filament_color_picker_result(ColorSelection{decoded}).colors == result.colors);
+    const auto reloaded = filament_color_picker_selection(result);
+    REQUIRE(reloaded);
+    REQUIRE(filament_color_picker_result(*reloaded).colors == result.colors);
+}
+
+TEST_CASE("Alpha only filament edits preserve ordered independent gradient endpoint alpha", "[FilamentColorPicker]")
+{
+    const auto original = filament_color_picker_selection({{"#FF000000", "#0000FF80"}, true});
+    const auto edited = filament_color_picker_selection({{"#FF000001", "#0000FFFE"}, true});
+    REQUIRE(original);
+    REQUIRE(edited);
+    REQUIRE(filament_color_picker_changed(*original, edited));
+    const auto result = filament_color_picker_result(*edited);
+    REQUIRE(result.gradient);
+    REQUIRE(result.colors == std::vector<std::string>{"#FF000001", "#0000FFFE"});
+    const auto reloaded = filament_color_picker_selection(result);
+    REQUIRE(reloaded);
+    REQUIRE_FALSE(filament_color_picker_changed(*edited, reloaded));
+    const auto reversed = filament_color_picker_selection({{result.colors[1], result.colors[0]}, true});
+    REQUIRE(filament_color_picker_changed(*edited, reversed));
+    const auto solid = filament_color_picker_selection({{"#12345680"}, false});
+    const auto alpha_only = filament_color_picker_selection({{"#12345681"}, false});
+    REQUIRE(solid);
+    REQUIRE(alpha_only);
+    REQUIRE(filament_color_picker_changed(*solid, alpha_only));
+    REQUIRE(filament_color_picker_result(*alpha_only).colors == std::vector<std::string>{"#12345681"});
+    const auto mixed = filament_color_picker_selection({{"#FF0000FF", "#0000FF00"}, true});
+    REQUIRE(mixed);
+    REQUIRE(filament_color_picker_result(*mixed).colors == std::vector<std::string>{"#FF0000", "#0000FF00"});
+}
+
+TEST_CASE("Unrepresentable filament seeds retain first endpoint or valid primary alpha", "[FilamentColorPicker]")
+{
+    auto too_many = too_many_gradient_colors();
+    too_many.front() = "#FF000000";
+    const auto value = GENERATE_COPY(FilamentColorPickerValue{too_many, true},
+                                FilamentColorPickerValue{{"#FF000000", "#0000FF80"}, false},
+                                FilamentColorPickerValue{{"invalid", "#FF0000"}, true, "#FF000000"});
+    REQUIRE_FALSE(filament_color_picker_selection(value));
+    const auto initial = filament_color_picker_initial(value);
+    REQUIRE(filament_color_picker_result(initial).colors == std::vector<std::string>{"#FF000000"});
+    REQUIRE_FALSE(filament_color_picker_changed(initial, initial));
+    REQUIRE_FALSE(filament_color_picker_changed(initial, std::nullopt));
+    const auto edited = filament_color_picker_selection({{"#FF000001"}, false});
+    REQUIRE(filament_color_picker_changed(initial, edited));
+}
+
+TEST_CASE("Ordered multi-color gradients round trip up to the color limit", "[FilamentColorPicker]")
+{
+    const std::vector<std::string> all = {"#FF0000", "#FFFF0080", "#00FF00", "#00FFFF01", "#0000FF", "#FF00FF00", "#123456"};
+    for (std::size_t count = 2; count <= std::min(all.size(), COLOR_PICKER_MAX_GRADIENT_COLORS); ++count) {
+        const std::vector<std::string> colors(all.begin(), all.begin() + count);
+        const auto selection = filament_color_picker_selection({colors, true});
+        REQUIRE(selection);
+        const auto result = filament_color_picker_result(*selection);
+        REQUIRE(result.gradient);
+        REQUIRE(result.colors == colors);
+        REQUIRE_FALSE(filament_color_picker_changed(*selection, filament_color_picker_selection(result)));
+        std::vector<std::string> reordered = colors;
+        std::swap(reordered.front(), reordered.back());
+        REQUIRE(filament_color_picker_changed(*selection, filament_color_picker_selection({reordered, true})));
+    }
+    REQUIRE_FALSE(filament_color_picker_selection({too_many_gradient_colors(), true}));
+}
+
+TEST_CASE("Filament selections require complete hexadecimal colors and exact endpoint counts", "[FilamentColorPicker]")
+{
+    const std::string hex = GENERATE("", "112233", "#ABC", "#1234567", "#123456789", "#GG2233", "#11223Z", "#112233G0", " #112233", "#112233 ");
+    REQUIRE_FALSE(filament_color_picker_selection({{hex}, false}));
+    REQUIRE_FALSE(filament_color_picker_selection({{"#112233", hex}, true}));
+    const auto malformed = GENERATE(FilamentColorPickerValue{{}, false},
+                                   FilamentColorPickerValue{{}, true},
+                                   FilamentColorPickerValue{{"#112233"}, true});
+    REQUIRE_FALSE(filament_color_picker_selection(malformed));
+}
+
+TEST_CASE("Every RGBA byte survives the public filament conversion round trip", "[FilamentColorPicker]")
+{
+    constexpr char digits[] = "0123456789ABCDEF";
+    for (int byte = 0; byte < 256; ++byte) {
+        std::string hex = "#";
+        for (int channel = 0; channel < 4; ++channel) {
+            hex += digits[byte >> 4];
+            hex += digits[byte & 15];
+        }
+        const auto selection = filament_color_picker_selection({{hex}, false});
+        REQUIRE(selection);
+        const auto result = filament_color_picker_result(*selection);
+        REQUIRE(result.colors == std::vector<std::string>{byte == 255 ? hex.substr(0, 7) : hex});
+        REQUIRE_FALSE(filament_color_picker_changed(*selection, filament_color_picker_selection(result)));
+    }
+}
+
+TEST_CASE("Filament serialization rejects invalid native RGBA channels", "[FilamentColorPicker]")
+{
+    const float invalid = GENERATE(-0.1f, 1.1f, std::numeric_limits<float>::infinity(), std::numeric_limits<float>::quiet_NaN());
+    const int channel = GENERATE(0, 1, 2, 3);
+    ColorRGBA color;
+    color[channel] = invalid;
+    REQUIRE_THROWS_AS(filament_color_picker_result(color), std::invalid_argument);
+    REQUIRE_THROWS_AS(filament_color_picker_result(ColorGradient{ColorRGBA::WHITE(), color}), std::invalid_argument);
+}