fix: tests

Merge branch 'main' into feat/preset-plugin-apis
feat: introduce plugin APIs for mutable presets
2026-10-15 20:01:31 +00:00 · 2026-10-15 21:00:39 +08:00 · 2026-10-15 20:46:38 +08:00 · 2026-10-15 20:32:49 +08:00 · 2026-10-15 20:28:13 +08:00 · 2026-10-15 19:43:07 +08:00
107 changed files with 47071 additions and 6727 deletions
@@ -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.
@@ -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
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><rect x="7" y="12" width="1" height="1" style="fill:#fefefe;"/><path d="M4.5,5.5c0-1.71,1.43-3.09,3.16-3,1.62.08,2.84,1.54,2.84,3.17h0c0,.61-.25,1.2-.69,1.62l-2.31,2.24v.97" style="fill:none; stroke:#fefefe; stroke-linecap:round; stroke-linejoin:round;"/></svg>
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><rect x="1.5" y="3.5" width="12" height="8" rx="1" ry="1" style="fill:none; stroke:#fefefe; stroke-linecap:round; stroke-linejoin:round;"/><path d="M3,5h1v1h-1Z M5,5h1v1h-1Z M7,5h1v1h-1Z M9,5h1v1h-1Z M11,5h1v1h-1Z M4,7h1v1h-1Z M6,7h1v1h-1Z M8,7h1v1h-1Z M10,7h1v1h-1Z M5,9h5v1h-5Z" style="fill:#fefefe;"/></svg>
@@ -592,6 +592,10 @@
 			"name": "SUNLU PETG @base",
 			"sub_path": "filament/SUNLU/SUNLU PETG @base.json"
 		},
+		{
+			"name": "School House Spools PETG @base",
+			"sub_path": "filament/SchoolHouseSpools/School House Spools PETG @base.json"
+		},
 		{
 			"name": "eSUN PETG @base",
 			"sub_path": "filament/eSUN/eSUN PETG @base.json"
@@ -1096,6 +1100,10 @@
 			"name": "SUNLU Wood PLA @base",
 			"sub_path": "filament/SUNLU/SUNLU Wood PLA @base.json"
 		},
+		{
+			"name": "School House Spools PLA @base",
+			"sub_path": "filament/SchoolHouseSpools/School House Spools PLA @base.json"
+		},
 		{
 			"name": "Valment PLA @base",
 			"sub_path": "filament/Valment/Valment PLA @base.json"
@@ -2260,6 +2268,10 @@
 			"name": "SUNLU PETG @System",
 			"sub_path": "filament/SUNLU/SUNLU PETG @System.json"
 		},
+		{
+			"name": "School House Spools PETG @System",
+			"sub_path": "filament/SchoolHouseSpools/School House Spools PETG @System.json"
+		},
 		{
 			"name": "eSUN PETG @System",
 			"sub_path": "filament/eSUN/eSUN PETG @System.json"
@@ -3812,6 +3824,10 @@
 			"name": "SUNLU Wood PLA @System",
 			"sub_path": "filament/SUNLU/SUNLU Wood PLA @System.json"
 		},
+		{
+			"name": "School House Spools PLA @System",
+			"sub_path": "filament/SchoolHouseSpools/School House Spools PLA @System.json"
+		},
 		{
 			"name": "Valment PLA @System",
 			"sub_path": "filament/Valment/Valment PLA @System.json"
@@ -0,0 +1,18 @@
+{
+	"type": "filament",
+	"name": "School House Spools PETG @System",
+	"inherits": "School House Spools PETG @base",
+	"from": "system",
+	"setting_id": "RSu2orfhR8ktT36h",
+	"instantiation": "true",
+	"filament_max_volumetric_speed": [
+		"13"
+	],
+	"filament_long_retractions_when_cut": [
+		"1"
+	],
+	"filament_retraction_distances_when_cut": [
+		"18"
+	],
+	"compatible_printers": []
+}
@@ -0,0 +1,80 @@
+{
+	"type": "filament",
+	"name": "School House Spools PETG @base",
+	"inherits": "fdm_filament_pet",
+	"from": "system",
+	"filament_id": "OFnaCGQ9",
+	"instantiation": "false",
+	"cool_plate_temp": [
+		"0"
+	],
+	"cool_plate_temp_initial_layer": [
+		"0"
+	],
+	"eng_plate_temp": [
+		"70"
+	],
+	"eng_plate_temp_initial_layer": [
+		"70"
+	],
+	"fan_cooling_layer_time": [
+		"30"
+	],
+	"fan_max_speed": [
+		"40"
+	],
+	"fan_min_speed": [
+		"10"
+	],
+	"filament_cost": [
+		"16.00"
+	],
+	"filament_density": [
+		"1.25"
+	],
+	"filament_flow_ratio": [
+		"0.95"
+	],
+	"filament_max_volumetric_speed": [
+		"8"
+	],
+	"filament_multitool_ramming_flow": [
+		"8"
+	],
+	"filament_vendor": [
+		"School House Spools"
+	],
+	"hot_plate_temp": [
+		"70"
+	],
+	"hot_plate_temp_initial_layer": [
+		"70"
+	],
+	"nozzle_temperature": [
+		"252"
+	],
+	"nozzle_temperature_initial_layer": [
+		"252"
+	],
+	"nozzle_temperature_range_high": [
+		"270"
+	],
+	"nozzle_temperature_range_low": [
+		"230"
+	],
+	"overhang_fan_speed": [
+		"90"
+	],
+	"overhang_fan_threshold": [
+		"10%"
+	],
+	"slow_down_layer_time": [
+		"12"
+	],
+	"textured_plate_temp": [
+		"70"
+	],
+	"textured_plate_temp_initial_layer": [
+		"70"
+	]
+}
@@ -0,0 +1,18 @@
+{
+	"type": "filament",
+	"name": "School House Spools PLA @System",
+	"inherits": "School House Spools PLA @base",
+	"from": "system",
+	"setting_id": "3rHJk6SVAvFzyHI0",
+	"instantiation": "true",
+	"filament_max_volumetric_speed": [
+		"21"
+	],
+	"filament_long_retractions_when_cut": [
+		"1"
+	],
+	"filament_retraction_distances_when_cut": [
+		"18"
+	],
+	"compatible_printers": []
+}
@@ -0,0 +1,35 @@
+{
+	"type": "filament",
+	"name": "School House Spools PLA @base",
+	"inherits": "fdm_filament_pla",
+	"from": "system",
+	"filament_id": "OFHzwmT9",
+	"instantiation": "false",
+	"filament_cost": [
+		"17.00"
+	],
+	"filament_density": [
+		"1.26"
+	],
+	"filament_flow_ratio": [
+		"0.98"
+	],
+	"filament_max_volumetric_speed": [
+		"12"
+	],
+	"filament_vendor": [
+		"School House Spools"
+	],
+	"filament_scarf_seam_type": [
+		"none"
+	],
+	"filament_scarf_height": [
+		"10%"
+	],
+	"filament_scarf_gap": [
+		"0%"
+	],
+	"filament_scarf_length": [
+		"10"
+	]
+}
@@ -1,6 +1,6 @@
 {
 	"name": "RatRig",
-	"version": "02.04.00.06",
+	"version": "02.04.00.07",
 	"force_update": "0",
 	"description": "RatRig configurations",
 	"machine_model_list": [
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -107,7 +107,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -107,7 +107,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -107,7 +107,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -106,7 +106,7 @@
 	"z_hop": [
 		"0.2"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single] TOTAL_LAYER_COUNT={total_layer_count} X0={first_layer_print_min[0]} Y0={first_layer_print_min[1]} X1={first_layer_print_max[0]} Y1={first_layer_print_max[1]}",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n_ON_LAYER_CHANGE LAYER={layer_num + 1}",
 	"change_filament_gcode": "M600",
@@ -131,7 +131,7 @@
 	"bed_exclude_area": [
 		"0x0"
 	],
-	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] BED_TEMP=[bed_temperature_initial_layer_single]",
+	"machine_start_gcode": "START_PRINT EXTRUDER_TEMP=[nozzle_temperature_initial_layer] EXTRUDER_OTHER_LAYER_TEMP=[nozzle_temperature] BED_TEMP=[bed_temperature_initial_layer_single]",
 	"machine_end_gcode": "END_PRINT",
 	"layer_change_gcode": ";AFTER_LAYER_CHANGE\n;[layer_z]",
 	"before_layer_change_gcode": ";BEFORE_LAYER_CHANGE\n;[layer_z]\nG92 E0\n",
@@ -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};
+});
@@ -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);
+});
@@ -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");
+})();
@@ -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"]);
+});
@@ -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>
@@ -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;
+})();
@@ -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; }
@@ -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
@@ -10,6 +10,11 @@ function OnInit()
 	// Orca: fallback timeout in case the C++ -> JS signal fails (e.g., WebKit issues).
 	// Jump to the target page after 3 minutes so slow computers don't get stuck on a partially loaded page.
 	setTimeout("JumpToTarget()",180*1000);
+
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="userguide_loading_page_ready";
+	SendWXMessage(JSON.stringify(tSend));
 }

 function HandleStudio( pVal )
@@ -0,0 +1,957 @@
+# /// script
+# requires-python = ">=3.12"
+#
+# [tool.orcaslicer.plugin]
+# id = "preset-update-demo"
+# name = "Preset Update Demo"
+# description = "Edits any setting of the currently edited process, printer, or filament preset through the preset host API."
+# author = "OrcaSlicer contributors"
+# version = "0.2.0"
+# type = "script"
+# ///
+"""Preset Update Demo — edit any setting of the current preset from a plugin window.
+
+Install this file in the local ``orca_plugins`` directory, enable the plugin, then run
+"Preset Update Demo" from the Plugins dialog. The window lists every setting of the
+preset the matching settings tab is editing right now — process, printer, or filament —
+with its current serialized value, and writes a value back through
+``orca.host.preset.<type>.update(...)``.
+
+Process and printer each have one edited preset, taken from
+``current_process_preset()`` / ``current_printer_preset()``. Filament presets are
+addressed by slot instead: the window reads one preset per slot from
+``current_filament_presets()`` (slot numbers are one-based, matching Orca's labels),
+shows the selected slot's preset, and writes through
+``orca.host.preset.filament.update(slot, key, value)``.
+
+Any assigned slot can be edited: the backend selects that slot's preset through Orca's
+normal preset selection before it writes, so applying can switch the filament tab and Orca
+may ask about unsaved changes first. Only an empty slot, whose mount resolves to no preset,
+is unavailable — the window says so instead of offering an edit. A slot whose preset is not
+the one the filament settings already have open gets an informational note that applying
+will switch to it; it is never presented as a refusal. Two slots that mount the same preset
+are one preset, so editing through either of them changes both; the window marks those
+slots and says which they are.
+
+Every row is one ``config_keys()`` entry carrying ``config_value(key)``.
+
+What ``update()`` does, and what it does not:
+
+  * it runs the same validation and UI update path as editing the setting by hand, so
+    the change lands in the preset the tab is editing and is never written to disk here
+    — the preset shows as modified in OrcaSlicer once it differs from the saved one;
+  * it accepts only settings of that preset category. A key that belongs to another
+    category, or a value the setting would reject, raises an error and writes nothing;
+  * it is refused when the selected printer's technology does not use that tab (the
+    print and filament tabs do nothing under SLA), so this demo covers the three FFF
+    categories only;
+  * a setting whose page has not been built yet still runs its owning settings group's
+    checks and callbacks; behavior that requires an actual widget (such as widget-specific
+    parsing or clamping) only runs when the field exists;
+  * on a filament slot it selects that slot's preset first, so Orca may prompt about
+    unsaved changes in the filament tab before the value is written.
+
+Values are OrcaSlicer's serialized config syntax — the same text a preset file stores —
+so numbers are plain, percentages keep their ``%``, booleans are ``1``/``0``, choices use
+the setting's internal key, and lists are semicolon-separated.
+"""
+
+import orca
+
+
+# The three preset categories the main tabs edit. Each key is both the value the page
+# sends and the attribute name on orca.host.preset that carries the matching editor.
+KINDS = (
+    {"kind": "process", "label": "Process"},
+    {"kind": "printer", "label": "Printer"},
+    {"kind": "filament", "label": "Filament"},
+)
+KIND_KEYS = {item["kind"] for item in KINDS}
+
+
+def _editor(kind):
+    """The host.PresetEditor for a category (orca.host.preset.process / printer).
+
+    Filament is not reached through this helper: it is addressed by slot, so it calls
+    orca.host.preset.filament.update(slot, key, value) directly.
+    """
+    return getattr(orca.host.preset, kind)
+
+
+def _current_preset(bundle, kind):
+    """The single preset the matching settings tab edits right now, as a host.Preset.
+
+    Only the process and printer categories have one such preset; filament presets are
+    addressed by slot instead (see _slot_presets).
+    """
+    if kind == "process":
+        return bundle.current_process_preset()
+    return bundle.current_printer_preset()
+
+
+def _slot_presets(bundle):
+    """The filament preset mounted in each slot, in slot order; a slot may be None."""
+    return list(bundle.current_filament_presets())
+
+
+def _preset_is_open(preset, edited):
+    """Whether this slot's preset is the one the filament settings already have open.
+
+    A slot with an assigned preset can be edited either way: applying to another slot makes
+    the backend select that slot's preset first. This only distinguishes the slot that
+    switches nothing from the ones that will switch the filament tab.
+    """
+    return preset is not None and preset.name == edited.name
+
+
+def _filament_slots(presets, edited):
+    """One entry per mounted slot: its one-based number, preset name, and open flag.
+
+    The number is the slot label Orca shows; the name is None for a slot that mounts no
+    preset, which is the only kind that cannot be edited.
+    """
+    return [
+        {
+            "slot": index + 1,
+            "name": None if preset is None else preset.name,
+            "open": _preset_is_open(preset, edited),
+        }
+        for index, preset in enumerate(presets)
+    ]
+
+
+def _as_slot(value):
+    """A requested slot as an int, or None when it is not a whole number."""
+    if isinstance(value, bool):
+        return None
+    if isinstance(value, int):
+        return value
+    if isinstance(value, float) and value.is_integer():
+        return int(value)
+    return None
+
+
+def _clamp_slot(slot, count):
+    """The slot to display: the requested one, kept inside the available range."""
+    if count <= 0:
+        return 0
+    number = _as_slot(slot)
+    if number is None or number < 1:
+        return 1
+    return number if number <= count else count
+
+
+def _parse_slot(slot, count):
+    """Validate a requested filament slot against the mounted slots (one-based)."""
+    if count == 0:
+        raise RuntimeError("No filament slots are mounted")
+    number = _as_slot(slot)
+    if number is None:
+        raise RuntimeError("A filament slot number is required")
+    if number < 1 or number > count:
+        raise RuntimeError("Filament slot %d is out of range (1-%d)" % (number, count))
+    return number
+
+
+def _rows(preset):
+    """Every setting of the preset, sorted by key, as [{k, v}].
+
+    config_value() returns None for a key the preset does not carry; the page shows
+    those as empty rather than "None".
+    """
+    rows = []
+    for key in sorted(preset.config_keys()):
+        value = preset.config_value(key)
+        rows.append({"k": key, "v": "" if value is None else str(value)})
+    return rows
+
+
+def _state(bundle, kind, slot, message="", error=""):
+    """The payload the page renders: shown preset, rows, slots, result line."""
+    payload = {"command": "state", "kind": kind, "message": message, "error": error}
+    if kind == "filament":
+        presets = _slot_presets(bundle)
+        edited = bundle.filaments.edited_preset()
+        effective = _clamp_slot(slot, len(presets))
+        preset = None if effective == 0 else presets[effective - 1]
+        payload["slots"] = _filament_slots(presets, edited)
+        payload["slot"] = effective
+        # An empty slot has nothing to edit; any assigned slot is editable, and one that is
+        # not already open makes the backend select it first.
+        payload["assigned"] = preset is not None
+        payload["switches"] = preset is not None and not _preset_is_open(preset, edited)
+        payload["edited_name"] = edited.name
+    else:
+        preset = _current_preset(bundle, kind)
+    payload["preset"] = None if preset is None else {
+        "name": preset.name,
+        "is_dirty": bool(preset.is_dirty),
+        "is_system": bool(preset.is_system),
+    }
+    payload["rows"] = [] if preset is None else _rows(preset)
+    return payload
+
+
+def _apply(kind, key, value, slot=None):
+    """Set one setting of the preset the page is showing, through the host API.
+
+    A filament preset is addressed by slot number; process and printer each resolve
+    their single edited preset themselves, so no slot is passed to them.
+    """
+    if kind == "filament":
+        orca.host.preset.filament.update(slot, key, value)
+        return
+    _editor(kind).update(key, value)
+
+
+PAGE = r"""<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<style>
+  :root {
+    --bg:        var(--orca-bg, #fafafa);
+    --fg:        var(--orca-fg, #1b1e23);
+    --muted:     var(--orca-muted, #6b7280);
+    --border:    var(--orca-border, #dadee3);
+    --accent:    var(--orca-accent, #0e7c86);
+    --accent-fg: var(--orca-accent-fg, #ffffff);
+    --ui:        var(--orca-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+    --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --surface:   rgba(127, 127, 127, .09);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg:     var(--orca-bg, #23262a);
+      --fg:     var(--orca-fg, #e6e8ea);
+      --muted:  var(--orca-muted, #9aa1a9);
+      --border: var(--orca-border, #383c42);
+    }
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    margin: 0; background: var(--bg); color: var(--fg);
+    font: 13px/1.45 var(--ui);
+    display: flex; flex-direction: column; overflow: hidden;
+  }
+  button { font: inherit; cursor: pointer; }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+  /* header ------------------------------------------------------------- */
+  header {
+    flex: none; display: flex; align-items: center; gap: 10px;
+    padding: 9px 14px; border-bottom: 1px solid var(--border);
+  }
+  .logo { color: var(--accent); font-size: 15px; line-height: 1; }
+  h1 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: .01em; }
+
+  .seg {
+    display: flex; gap: 2px; margin-left: auto; padding: 2px;
+    border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
+  }
+  .seg button {
+    border: 0; background: transparent; color: var(--muted);
+    padding: 4px 13px; border-radius: 7px;
+    transition: background .15s ease, color .15s ease;
+  }
+  .seg button:hover { color: var(--fg); }
+  .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
+
+  .iconbtn {
+    width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px;
+    background: transparent; color: var(--fg); display: grid; place-items: center;
+    font-size: 13px; transition: background .15s ease;
+  }
+  .iconbtn:hover:enabled { background: var(--surface); }
+  .iconbtn:disabled { opacity: .5; }
+
+  /* preset bar --------------------------------------------------------- */
+  .presetbar {
+    flex: none; display: flex; align-items: center; gap: 8px;
+    padding: 7px 14px; border-bottom: 1px solid var(--border); font-size: 12px;
+  }
+  .presetbar .name {
+    font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    max-width: 60%;
+  }
+  .spacer { flex: 1; }
+  .tag {
+    border: 1px solid var(--border); color: var(--muted); border-radius: 999px;
+    padding: 1px 8px; font-size: 11px; white-space: nowrap;
+  }
+  .tag.on { border-color: transparent; background: var(--accent); color: var(--accent-fg); }
+
+  /* filament slots ----------------------------------------------------- */
+  .slotbar { flex: none; padding: 7px 14px 8px; border-bottom: 1px solid var(--border); }
+  .slotrow { display: flex; align-items: center; gap: 9px; min-width: 0; }
+  .slotlabel {
+    flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
+    color: var(--muted);
+  }
+  .slots { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px;
+           max-height: 84px; overflow-y: auto; }
+  .chip {
+    display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 190px;
+    padding: 2px 10px 2px 3px; border: 1px solid var(--border); border-radius: 999px;
+    background: transparent; color: var(--fg);
+    transition: background .15s ease, color .15s ease, border-color .15s ease;
+  }
+  .chip:hover { background: var(--surface); }
+  .chip .n {
+    flex: none; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px;
+    display: grid; place-items: center; background: var(--surface); color: var(--muted);
+    font-size: 11px; font-variant-numeric: tabular-nums;
+  }
+  /* the slot whose preset the filament settings already have open, so applying switches nothing */
+  .chip.open .n { box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); }
+  .chip .s {
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font-size: 11px; color: var(--muted);
+  }
+  .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+  .chip[aria-pressed="true"] .n {
+    background: rgba(255, 255, 255, .22); color: var(--accent-fg); box-shadow: none;
+  }
+  .chip[aria-pressed="true"] .s { color: var(--accent-fg); }
+  /* a slot that mounts the preset the page is showing: editing either changes both */
+  .chip.linked::after {
+    content: ""; flex: none; width: 5px; height: 5px;
+    border-radius: 50%; background: var(--accent);
+  }
+  .slotnote {
+    margin-top: 7px; padding-left: 8px; border-left: 2px solid var(--accent);
+    font-size: 11px; line-height: 1.5; color: var(--muted);
+  }
+  .slotnote:empty { display: none; }
+
+  /* panes -------------------------------------------------------------- */
+  main { flex: 1; display: flex; min-height: 0; }
+
+  .list-pane {
+    flex: none; width: 45%; min-width: 250px; min-height: 0;
+    display: flex; flex-direction: column; border-right: 1px solid var(--border);
+  }
+  .search {
+    flex: none; display: flex; align-items: center; gap: 8px;
+    padding: 8px 10px; border-bottom: 1px solid var(--border);
+  }
+  .search input {
+    flex: 1; min-width: 0; font: inherit; color: var(--fg); background: var(--bg);
+    border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px;
+  }
+  .rows { flex: 1; min-height: 0; overflow-y: auto; padding: 3px 0; }
+
+  .row {
+    display: flex; align-items: baseline; gap: 8px; width: 100%;
+    padding: 5px 10px; text-align: left; border: 0; border-left: 3px solid transparent;
+    background: transparent; color: var(--fg);
+  }
+  .row:hover { background: var(--surface); }
+  .row[aria-selected="true"] { background: var(--surface); border-left-color: var(--accent); }
+  .row .k {
+    flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .row .v {
+    flex: none; max-width: 40%; font-family: var(--mono); font-size: 11px;
+    color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .row .dot {
+    flex: none; align-self: center; width: 6px; height: 6px; border-radius: 50%;
+    background: var(--accent); visibility: hidden;
+  }
+  .row.changed .dot { visibility: visible; }
+  @keyframes flash {
+    0%   { box-shadow: inset 0 0 0 2px var(--accent); }
+    100% { box-shadow: inset 0 0 0 2px transparent; }
+  }
+  .row.flash { animation: flash .7s ease-out; }
+  @media (prefers-reduced-motion: reduce) {
+    .row.flash { animation: none; }
+  }
+
+  .empty { color: var(--muted); padding: 14px 12px; }
+  .nil { font-style: italic; opacity: .75; }
+
+  /* editor ------------------------------------------------------------- */
+  .edit-pane {
+    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px;
+    padding: 12px 14px; overflow-y: auto;
+  }
+  .edit-key { font-family: var(--mono); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
+  .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+  .current {
+    margin: 0; max-height: 108px; overflow: auto;
+    font-family: var(--mono); font-size: 12px;
+    background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
+    padding: 7px 10px; white-space: pre-wrap; overflow-wrap: anywhere;
+  }
+  textarea {
+    width: 100%; min-height: 74px; resize: vertical;
+    font-family: var(--mono); font-size: 12px; color: var(--fg); background: var(--bg);
+    border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px;
+  }
+  .actions { display: flex; gap: 8px; align-items: center; }
+  button.primary {
+    padding: 5px 14px; border-radius: 7px; border: 1px solid var(--accent);
+    background: var(--accent); color: var(--accent-fg);
+  }
+  button.ghost {
+    padding: 5px 12px; border-radius: 7px; border: 1px solid var(--border);
+    background: transparent; color: var(--fg);
+  }
+  button.primary:disabled, button.ghost:disabled { opacity: .5; cursor: default; }
+  button.primary:hover:enabled { filter: brightness(1.08); }
+  button.ghost:hover:enabled { background: var(--surface); }
+
+  .notice {
+    padding: 8px 11px; border: 1px solid var(--border); border-left: 3px solid var(--accent);
+    border-radius: 7px; background: var(--surface);
+    font-size: 12px; line-height: 1.5; color: var(--muted);
+  }
+  .notice b { color: var(--fg); font-weight: 600; }
+  .notice:empty { display: none; }
+
+  .syntax {
+    margin-top: 2px; padding: 9px 11px; border: 1px solid var(--border);
+    border-left: 3px solid var(--accent); border-radius: 7px;
+    font-size: 12px; line-height: 1.55; color: var(--muted);
+  }
+  .syntax b { color: var(--fg); font-weight: 600; }
+  .syntax code { font-family: var(--mono); font-size: 11.5px; color: var(--fg); }
+
+  /* status ------------------------------------------------------------- */
+  footer {
+    flex: none; min-height: 30px; padding: 7px 14px;
+    border-top: 1px solid var(--border); font-size: 12px; color: var(--muted);
+  }
+  footer.ok { color: #0f8a5f; }
+  footer.err { color: #c8382c; }
+</style>
+</head>
+<body>
+  <header>
+    <span class="logo">◈</span>
+    <h1>Preset update</h1>
+    <div class="seg" id="seg"></div>
+    <button class="iconbtn" id="refresh" title="Reload the current values">⟳</button>
+    <button class="iconbtn" id="close" title="Close">✕</button>
+  </header>
+
+  <div class="presetbar">
+    <span class="name" id="pname">Loading…</span>
+    <span id="ptag"></span>
+    <span class="spacer"></span>
+    <span class="tag" id="pcount">0 settings</span>
+  </div>
+
+  <div class="slotbar" id="slotbar" hidden>
+    <div class="slotrow">
+      <span class="slotlabel">Filament slots</span>
+      <div class="slots" id="slots"></div>
+    </div>
+    <div class="slotnote" id="slotnote"></div>
+  </div>
+
+  <main>
+    <section class="list-pane">
+      <div class="search">
+        <input id="q" type="search" placeholder="Search settings…" autocomplete="off" spellcheck="false">
+        <span class="tag" id="qcount">0</span>
+      </div>
+      <div class="rows" id="rows"></div>
+    </section>
+
+    <section class="edit-pane">
+      <div class="edit-key" id="ekey">Select a setting</div>
+      <div class="lbl">Current value</div>
+      <pre class="current" id="ecur">—</pre>
+      <label class="lbl" for="evalue">New value</label>
+      <textarea id="evalue" spellcheck="false" autocomplete="off"
+                placeholder="Serialized value" disabled></textarea>
+      <div class="notice" id="notice"></div>
+      <div class="actions">
+        <button class="primary" id="apply" disabled>Apply</button>
+        <button class="ghost" id="reset" disabled>Reset to current</button>
+      </div>
+      <div class="syntax">
+        <b>Values use OrcaSlicer's serialized config syntax</b> — the same text a preset
+        file stores. Numbers are plain (<code>0.2</code>, <code>3</code>) and percentages keep
+        their sign (<code>15%</code>). On/off is <code>1</code> or <code>0</code>. A choice uses
+        the setting's own key, e.g. <code>grid</code>. Lists are semicolon-separated
+        (<code>0.4;0.4;0.4</code>, or <code>"#FF0000";"#00FF00"</code>). Text keeps its
+        escapes, so a line break stays <code>\n</code>. A key that does not belong to this
+        preset, or a value the setting would reject, comes back as an error and writes
+        nothing. The edit lands in the preset the tab is editing and stays unsaved.
+      </div>
+    </section>
+  </main>
+
+  <footer id="status"></footer>
+
+<script>
+'use strict';
+
+const SEG = [['process', 'Process'], ['printer', 'Printer'], ['filament', 'Filament']];
+const IDLE = 'Edits apply to the preset shown here and stay unsaved until you save '
+  + 'or export it.';
+
+const S = {
+  kind: 'process',
+  slot: 1,              // selected filament slot (one-based); ignored by the other kinds
+  slots: [],            // [{slot, name, open}] from current_filament_presets()
+  preset: null,
+  rows: [],
+  selected: null,
+  changed: {},          // "kind/preset/key" -> true, for edits made in this window
+  pending: null,        // {kind, slot, preset, key} of an apply awaiting its reply
+  error: '',            // the last error the plugin reported, if any
+  assigned: true,       // filament only: the shown slot mounts a preset, so it is editable
+  switches: false,      // filament only: applying will select that preset in the filament tab
+  editedName: null,     // filament only: the preset the filament settings have open
+  busy: true,
+  filter: '',
+  statusText: '',
+  statusCls: '',
+};
+
+const $ = id => document.getElementById(id);
+const esc = s => String(s == null ? '' : s)
+  .replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
+
+/* ------------------------------------------------------------------ paint */
+function paint() {
+  paintSeg();
+  const p = S.preset;
+  const slotTag = S.kind === 'filament' && S.slot
+    ? '<span class="tag">slot ' + S.slot + '</span>' : '';
+  $('pname').textContent = p ? p.name : (S.busy ? 'Loading…' : 'No preset');
+  $('pname').title = p ? p.name : '';
+  $('ptag').innerHTML = slotTag + (p
+    ? '<span class="tag">' + (p.is_system ? 'system' : 'user') + '</span>'
+      + (p.is_dirty ? '<span class="tag on">modified</span>' : '<span class="tag">saved</span>')
+    : '');
+  $('pcount').textContent = S.rows.length + (S.rows.length === 1 ? ' setting' : ' settings');
+  $('refresh').disabled = S.busy;
+  paintSlots();
+  paintNotice();
+  renderList();
+  paintEditor();
+  paintStatus();
+}
+
+function paintSeg() {
+  // Built once (see buildSeg) so a click never loses focus; only the state is repainted.
+  document.querySelectorAll('#seg button').forEach(b =>
+    b.setAttribute('aria-pressed', String(b.dataset.kind === S.kind)));
+}
+
+/* the filament slot strip: one chip per mounted slot, shown for filament only */
+function paintSlots() {
+  const show = S.kind === 'filament' && (S.slots.length > 0 || S.busy);
+  $('slotbar').hidden = !show;
+  if (!show) { $('slots').innerHTML = ''; $('slotnote').innerHTML = ''; return; }
+  // Rebuilding the chips drops keyboard focus; put it back on the same slot's chip.
+  const focused = document.activeElement && document.activeElement.dataset
+    ? document.activeElement.dataset.slot : null;
+  $('slots').innerHTML = S.slots.map(s => {
+    const selected = s.slot === S.slot;
+    const linked = !selected && sharesSelected(s.name);
+    const label = s.name == null ? '<span class="nil">empty slot</span>' : esc(s.name);
+    const hint = s.name ? ': ' + s.name : ': no preset';
+    return '<button type="button" class="chip' + (linked ? ' linked' : '')
+      + (s.open ? ' open' : '') + '"'
+      + ' data-slot="' + s.slot + '" aria-pressed="' + selected + '"'
+      + ' title="' + esc('Filament slot ' + s.slot + hint
+                         + (s.open ? ' — open in the filament settings' : '')) + '">'
+      + '<span class="n">' + s.slot + '</span><span class="s">' + label + '</span></button>';
+  }).join('');
+  $('slotnote').innerHTML = shareNote();
+  if (focused) {
+    const chip = document.querySelector('#slots .chip[data-slot="' + focused + '"]');
+    if (chip) chip.focus();
+  }
+}
+
+function slotName(slot) {
+  const found = S.slots.find(s => s.slot === slot);
+  return found && found.name ? found.name : null;
+}
+
+// Applying selects the slot's preset first, so say when that switches the filament tab. An
+// empty slot is the only unavailable one, and it says so instead of offering an edit.
+function paintNotice() {
+  const el = $('notice');
+  if (S.kind !== 'filament' || S.busy) { el.innerHTML = ''; return; }
+  // With nothing mounted the list already says so; avoid naming a slot number here.
+  if (!S.slots.length) { el.innerHTML = ''; return; }
+  const name = S.preset ? S.preset.name : null;
+  if (!name) {
+    el.innerHTML = 'Slot ' + S.slot + ' holds no filament preset. Assign one in the '
+      + 'OrcaSlicer filament settings first.';
+    return;
+  }
+  if (!S.switches) { el.innerHTML = ''; return; }
+  const open = S.editedName
+    ? ', while the filament settings have <b>' + esc(S.editedName) + '</b> open'
+    : '';
+  el.innerHTML = 'Slot ' + S.slot + ' uses <b>' + esc(name) + '</b>' + open
+    + '. Applying switches the filament tab to <b>' + esc(name) + '</b> first — Orca may '
+    + 'ask about unsaved changes there — then sets the value.';
+}
+
+function sharesSelected(name) {
+  const current = slotName(S.slot);
+  return !!name && !!current && name === current;
+}
+
+function listSlots(numbers) {
+  if (numbers.length === 1) return String(numbers[0]);
+  return numbers.slice(0, -1).join(', ') + ' and ' + numbers[numbers.length - 1];
+}
+
+// Slots mounting the same preset are one preset, so say which slots an edit reaches.
+function shareNote() {
+  const name = slotName(S.slot);
+  if (!name) return '';
+  const sharing = S.slots.filter(s => s.name === name).map(s => s.slot);
+  if (sharing.length < 2) return '';
+  return 'Slots ' + listSlots(sharing) + ' mount the same filament preset, so an edit '
+    + 'here changes every one of them.';
+}
+
+function changedKey(presetName, key) {
+  return S.kind + '/' + (presetName || '?') + '/' + key;
+}
+
+function paintStatus() {
+  const el = $('status');
+  if (S.statusText) {
+    el.textContent = S.statusText;
+    el.className = S.statusCls;
+  } else if (S.busy) {
+    el.textContent = 'Working…';
+    el.className = '';
+  } else {
+    el.textContent = IDLE;
+    el.className = '';
+  }
+}
+
+function setStatus(text, cls) {
+  S.statusText = text || '';
+  S.statusCls = cls || '';
+  paintStatus();
+}
+
+function visibleRows() {
+  const q = S.filter.trim().toLowerCase();
+  if (!q) return S.rows;
+  return S.rows.filter(r => r.k.toLowerCase().includes(q) || r.v.toLowerCase().includes(q));
+}
+
+function renderList() {
+  const scroller = $('rows');
+  const top = scroller.scrollTop;
+  $('qcount').textContent = String(visibleRows().length);
+
+  if (!S.rows.length) {
+    let text = 'This preset reports no settings.';
+    if (S.busy) text = 'Loading settings…';
+    else if (S.error) text = 'These values could not be read — see the message below.';
+    else if (S.kind === 'filament' && !S.slots.length) text = 'No filament slots are mounted.';
+    else if (S.kind === 'filament' && !S.preset) text = 'This filament slot has no preset.';
+    scroller.innerHTML = '<div class="empty">' + text + '</div>';
+    return;
+  }
+  const rows = visibleRows();
+  if (!rows.length) {
+    scroller.innerHTML = '<div class="empty">No setting matches “' + esc(S.filter) + '”.</div>';
+    return;
+  }
+  scroller.innerHTML = rows.map(r => {
+    const value = r.v === '' ? '<span class="nil">empty</span>' : esc(r.v);
+    return '<button type="button" class="row'
+      + (S.changed[changedKey(S.preset && S.preset.name, r.k)] ? ' changed' : '') + '"'
+      + ' data-key="' + esc(r.k) + '"'
+      + ' aria-selected="' + (r.k === S.selected) + '"'
+      + ' title="' + esc(r.k + ' = ' + r.v) + '">'
+      + '<span class="k">' + esc(r.k) + '</span>'
+      + '<span class="v">' + value + '</span>'
+      + '<span class="dot"></span></button>';
+  }).join('');
+  scroller.scrollTop = top;
+}
+
+function paintEditor() {
+  const row = S.rows.find(r => r.k === S.selected) || null;
+  // Every assigned slot is editable now that applying selects the slot's preset first, so
+  // Apply is off only for an empty slot, a missing selection, or a request in flight.
+  const selected = !!row && !S.busy;
+  $('ekey').textContent = row ? row.k : 'Select a setting';
+  $('ecur').textContent = row ? (row.v === '' ? '(empty)' : row.v) : '—';
+  $('evalue').disabled = !selected;
+  $('apply').disabled = !selected || !S.assigned;
+  $('reset').disabled = !selected;
+}
+
+/* --------------------------------------------------------------- actions */
+function buildSeg() {
+  $('seg').innerHTML = SEG.map(([kind, label]) =>
+    '<button type="button" data-kind="' + kind + '">' + label + '</button>').join('');
+}
+
+function selectKey(key) {
+  S.selected = key;
+  const row = S.rows.find(r => r.k === key);
+  $('evalue').value = row ? row.v : '';
+  // Repaint the rows in place so the scroll position of a long list is kept.
+  document.querySelectorAll('#rows .row').forEach(el =>
+    el.setAttribute('aria-selected', String(el.dataset.key === key)));
+  paintEditor();
+}
+
+function switchKind(kind) {
+  S.kind = kind;
+  S.selected = null;
+  S.pending = null;
+  S.preset = null;
+  S.rows = [];
+  S.busy = true;
+  $('evalue').value = '';
+  setStatus('', '');
+  paint();
+  orca.postMessage({command: 'state', kind: kind, slot: S.slot});
+}
+
+// Two slots that mount the same preset show the same settings, so only a switch to a
+// different preset drops the current selection and the value being typed.
+function selectSlot(slot) {
+  if (S.busy || slot === S.slot) return;
+  const same = !!slotName(slot) && slotName(slot) === slotName(S.slot);
+  S.slot = slot;
+  S.pending = null;
+  S.busy = true;
+  if (!same) {
+    S.preset = null;
+    S.rows = [];
+    S.selected = null;
+    $('evalue').value = '';
+  }
+  setStatus('', '');
+  paint();
+  orca.postMessage({command: 'state', kind: S.kind, slot: slot});
+}
+
+function reload() {
+  if (S.busy) return;
+  S.busy = true;
+  S.pending = null;
+  setStatus('', '');
+  paint();
+  orca.postMessage({command: 'state', kind: S.kind, slot: S.slot});
+}
+
+function applyValue() {
+  const row = S.rows.find(r => r.k === S.selected);
+  // Mirror the Apply button: only a missing selection, a request in flight, or an empty
+  // slot blocks an edit, so Enter cannot send one the button itself would refuse.
+  if (!row || S.busy || !S.assigned) return;
+  S.pending = {
+    kind: S.kind, slot: S.slot,
+    preset: S.preset ? S.preset.name : null, key: row.k,
+  };
+  S.busy = true;
+  setStatus('', '');
+  paint();
+  orca.postMessage({command: 'apply', kind: S.kind, slot: S.slot, key: row.k,
+                    value: $('evalue').value});
+}
+
+function flashKey(key) {
+  document.querySelectorAll('#rows .row').forEach(el => {
+    if (el.dataset.key !== key) return;
+    el.classList.remove('flash');
+    void el.offsetWidth;    // restart the animation if it ran on this row already
+    el.classList.add('flash');
+    el.addEventListener('animationend', () => el.classList.remove('flash'), {once: true});
+  });
+}
+
+/* ----------------------------------------------------------------- wiring */
+buildSeg();
+
+$('seg').addEventListener('click', e => {
+  const button = e.target.closest('[data-kind]');
+  if (!button || S.busy || button.dataset.kind === S.kind) return;
+  switchKind(button.dataset.kind);
+});
+
+$('rows').addEventListener('click', e => {
+  const row = e.target.closest('.row');
+  if (row && !S.busy) selectKey(row.dataset.key);
+});
+
+$('slots').addEventListener('click', e => {
+  const chip = e.target.closest('[data-slot]');
+  if (chip && !S.busy) selectSlot(Number(chip.dataset.slot));
+});
+
+$('q').addEventListener('input', e => {
+  S.filter = e.target.value;
+  renderList();
+});
+
+$('apply').addEventListener('click', applyValue);
+
+$('reset').addEventListener('click', () => {
+  const row = S.rows.find(r => r.k === S.selected);
+  if (row) $('evalue').value = row.v;
+});
+
+$('evalue').addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); applyValue(); }
+  else if (e.key === 'Escape') { e.preventDefault(); $('reset').click(); }
+});
+
+$('refresh').addEventListener('click', reload);
+$('close').addEventListener('click', () => orca.close());
+
+/* -------------------------------------------------------------- messages */
+orca.onMessage(msg => {
+  if (!msg || msg.command !== 'state') return;
+  if (msg.kind !== S.kind) return;      // a reply for a category we already left
+
+  const pending = S.pending;
+  S.busy = false;
+  S.pending = null;
+  S.slots = msg.slots || [];
+  // Adopt the slot the plugin actually used (it clamps a slot that no longer exists).
+  if (S.kind === 'filament' && typeof msg.slot === 'number') S.slot = msg.slot;
+  S.preset = msg.preset || null;
+  S.rows = msg.rows || [];
+  S.error = msg.error || '';
+  // Filament editability is a slot concern; process and printer have a single edited preset.
+  S.assigned = S.kind === 'filament' ? !!msg.assigned : true;
+  S.switches = S.kind === 'filament' ? !!msg.switches : false;
+  S.editedName = S.kind === 'filament' ? (msg.edited_name || null) : null;
+  if (S.selected && !S.rows.some(r => r.k === S.selected)) S.selected = null;
+
+  if (msg.error) {
+    // Keep the typed value so it can be corrected, and keep the current selection.
+    setStatus('⚠ ' + msg.error, 'err');
+  } else {
+    if (pending) S.changed[changedKey(pending.preset, pending.key)] = true;
+    setStatus(msg.message || '', msg.message ? 'ok' : '');
+  }
+
+  paint();
+
+  if (!msg.error && pending) {
+    const row = S.rows.find(r => r.k === pending.key);
+    if (row) {                       // show the value as the preset now stores it
+      $('evalue').value = row.v;
+      flashKey(row.k);
+    }
+  }
+});
+
+paint();
+orca.postMessage({command: 'state', kind: S.kind, slot: S.slot});
+</script>
+</body>
+</html>"""
+
+
+class PresetUpdateDemo(orca.script.ScriptPluginCapabilityBase):
+    window = None
+    kind = "process"      # the category the open window is showing, for a re-run refresh
+    slot = 1              # the filament slot the open window is showing
+
+    def get_name(self):
+        return "Preset update demo"
+
+    def execute(self):
+        try:
+            if self.window is not None and self.window.is_open():
+                self._post_state(self.kind, self.slot)
+                return orca.ExecutionResult.success("Preset update demo refreshed.")
+            self.window = orca.host.ui.create_window(
+                title="Preset update demo", html=PAGE, width=820, height=560,
+                on_message=self.on_message, on_close=self.on_close,
+            )
+            return orca.ExecutionResult.success("Preset update demo opened.")
+        except Exception as error:
+            message = "Preset update demo failed: %s" % error
+            orca.host.ui.message(message, title="Preset update demo", buttons="ok", icon="error")
+            return orca.ExecutionResult.failure(orca.PluginResult.RecoverableError, message)
+
+    def on_close(self):
+        self.window = None
+
+    def _post_state(self, kind="process", slot=1, message="", error=""):
+        try:
+            payload = _state(orca.host.preset_bundle(), kind, slot, message, error)
+        except Exception as state_error:
+            payload = {"command": "state", "kind": kind, "slot": slot, "slots": [],
+                       "assigned": False, "switches": False, "edited_name": None,
+                       "preset": None, "rows": [], "message": message,
+                       "error": str(state_error)}
+        if self.window is not None and self.window.is_open():
+            self.window.post(payload)
+
+    def on_message(self, message):
+        kind = "process"
+        slot = 1
+        try:
+            message = message or {}
+            kind = message.get("kind", "process")
+            if not isinstance(kind, str) or kind not in KIND_KEYS:
+                raise RuntimeError("Unknown preset category %r" % (kind,))
+            self.kind = kind
+            slot = message.get("slot", 1)
+
+            command = message.get("command")
+            if command == "state":
+                self.slot = slot
+                self._post_state(kind, slot)
+                return
+            if command == "apply":
+                key = message.get("key")
+                value = message.get("value")
+                if not isinstance(key, str) or not key:
+                    raise RuntimeError("A setting key is required")
+                if not isinstance(value, str):
+                    raise RuntimeError("A value string is required")
+                where = ""
+                if kind == "filament":
+                    presets = _slot_presets(orca.host.preset_bundle())
+                    # Validate the slot strictly: an out-of-range slot must fail loudly
+                    # rather than edit a different filament. A slot with no preset has
+                    # nothing to write, which is the only slot shape the backend refuses.
+                    slot = _parse_slot(slot, len(presets))
+                    if presets[slot - 1] is None:
+                        raise RuntimeError("Filament slot %d has no preset to edit" % slot)
+                    _apply(kind, key, value, slot)
+                    where = " on slot %d" % slot
+                else:
+                    _apply(kind, key, value)
+                shown = value if value else "(empty)"
+                self.slot = slot
+                self._post_state(
+                    kind, slot,
+                    message='Set %s = "%s"%s. The edit stays in the preset tab until you save it.'
+                            % (key, shown, where),
+                )
+                return
+            raise RuntimeError("Unknown command %r" % (command,))
+        except Exception as error:
+            safe_kind = kind if isinstance(kind, str) and kind in KIND_KEYS else "process"
+            self._post_state(safe_kind, slot, error=str(error))
+
+
+@orca.plugin
+class PresetUpdateDemoPackage(orca.base):
+    def register_capabilities(self):
+        orca.register_capability(PresetUpdateDemo)
@@ -858,11 +858,10 @@ void PrintObject::contour_z()
    BOOST_LOG_TRIVIAL(debug) << "Contouring in parallel - start";

    TriangleMesh mesh = this->m_model_object->raw_mesh();
-    if (m_model_object->instances.size() != 1) {
-        throw RuntimeError("ContourZ: unexpected number of instances");
-    }
-
-    ModelInstance *inst = m_model_object->instances.front();
+    // A PrintObject groups the instances that share their whole transformation but the XY shift: an
+    // instance rotated, scaled or mirrored differently is a PrintObject of its own. So the first
+    // instance stands for all of them.
+    const ModelInstance *inst = m_instances.front().model_instance;
    Point                    center_offset = this->center_offset();
    Geometry::Transformation trans = inst->get_transformation();

@@ -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
@@ -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>
@@ -82,6 +85,96 @@ static std::string float_to_string_with_precision(float value, int precision = 3
    return stream.str();
 }

+static std::string colour_to_ams_string(const wxColour& color)
+{
+    char col_buf[10];
+    sprintf(col_buf, "%02X%02X%02X%02X", (int)color.Red(), (int)color.Green(), (int)color.Blue(), (int)color.Alpha());
+    return col_buf;
+}
+
+static wxColour mix_colour(const wxColour& left, const wxColour& right, double ratio)
+{
+    ratio = std::max(0.0, std::min(1.0, ratio));
+    auto mix_channel = [ratio](unsigned char l, unsigned char r) {
+        return static_cast<unsigned char>(std::round(l + (r - l) * ratio));
+    };
+    return wxColour(mix_channel(left.Red(), right.Red()),
+                    mix_channel(left.Green(), right.Green()),
+                    mix_channel(left.Blue(), right.Blue()),
+                    mix_channel(left.Alpha(), right.Alpha()));
+}
+
+static std::vector<ColorPickerPopup::ColorItem> collect_ams_color_items(DevFilaSystem* fila_system)
+{
+    std::vector<ColorPickerPopup::ColorItem> items;
+    if (!fila_system) return items;
+
+    for (const auto& ams_pair : fila_system->GetAmsList()) {
+        DevAms* ams = ams_pair.second;
+        if (!ams) continue;
+
+        for (const auto& tray_pair : ams->GetTrays()) {
+            DevAmsTray* tray = tray_pair.second;
+            if (!tray || !tray->is_tray_info_ready()) continue;
+
+            ColorPickerPopup::ColorItem item;
+            for (const std::string& col : tray->cols) {
+                item.colors.emplace_back(DevAmsTray::decode_color(col));
+            }
+            if (item.colors.empty() && !tray->color.empty()) {
+                item.colors.emplace_back(DevAmsTray::decode_color(tray->color));
+            }
+            if (item.colors.empty()) continue;
+
+            item.ctype = item.colors.size() > 1 ? tray->ctype : 2;
+            items.emplace_back(std::move(item));
+        }
+    }
+
+    return items;
+}
+
+static std::vector<ColorPickerPopup::ColorItem> collect_preset_color_items(const std::string& filament_id)
+{
+    std::vector<ColorPickerPopup::ColorItem> items;
+    if (filament_id.empty()) return items;
+
+    auto* clr_query = GUI::wxGetApp().get_filament_color_code_query();
+    if (!clr_query) return items;
+
+    auto* agent = wxGetApp().getAgent();
+    const std::string catalog_id = agent ? agent->from_orca_filament_id(filament_id) : filament_id;
+    FilamentColorCodes* color_codes = clr_query->GetFilaInfoMap(wxString::FromUTF8(catalog_id));
+    if (!color_codes || !color_codes->GetFilamentColor2CodeMap()) return items;
+
+    std::set<std::string> seen;
+    for (const auto& color_pair : *color_codes->GetFilamentColor2CodeMap()) {
+        const FilamentColor& fila_color = color_pair.first;
+        FilamentColorCode* color_code = color_pair.second;
+        if (!color_code || fila_color.GetColors().empty()) continue;
+
+        ColorPickerPopup::ColorItem item;
+        item.ctype = fila_color.ColorCount() < 2 ? 2 :
+            (fila_color.m_color_type == FilamentColor::ColorType::GRADIENT_CLR ? 0 : 1);
+        item.name = color_code->GetFilaColorName();
+
+        std::string key = std::to_string(item.ctype);
+        for (const wxColour& color : fila_color.GetColors()) {
+            item.colors.emplace_back(color);
+            char rgba[9];
+            std::snprintf(rgba, sizeof(rgba), "%02X%02X%02X%02X",
+                static_cast<unsigned>(color.Red()), static_cast<unsigned>(color.Green()),
+                static_cast<unsigned>(color.Blue()), static_cast<unsigned>(color.Alpha()));
+            key += "|" + std::string(rgba);
+        }
+
+        if (item.colors.empty() || !seen.insert(key).second) continue;
+        items.emplace_back(std::move(item));
+    }
+
+    return items;
+}
+
 AMSMaterialsSetting::AMSMaterialsSetting(wxWindow *parent, wxWindowID id)
    : DPIDialog(parent, id, _L("AMS Materials Setting"), wxDefaultPosition, wxDefaultSize, wxCAPTION | wxCLOSE_BOX)
    , m_color_picker_popup(ColorPickerPopup(this))
@@ -737,8 +830,19 @@ void AMSMaterialsSetting::on_select_ok(wxCommandEvent &event)
    nozzle_temp_min.ToLong(&nozzle_temp_min_int);
    nozzle_temp_max.ToLong(&nozzle_temp_max_int);
    wxColour color = m_clr_picker->m_colour;
-    char col_buf[10];
-    sprintf(col_buf, "%02X%02X%02X%02X", (int)color.Red(), (int)color.Green(), (int)color.Blue(), (int)color.Alpha());
+    std::string tray_color = colour_to_ams_string(color);
+    std::vector<std::string> tray_colors;
+    int tray_ctype = 2;
+    // Only firmware advertising fun2[23] receives the manual multi-color fields.
+    if (obj->is_support_filament_manual_multi_color) {
+        for (const wxColour& selected_color : m_clr_picker->m_cols) {
+            tray_colors.emplace_back(colour_to_ams_string(selected_color));
+        }
+        if (tray_colors.empty()) {
+            tray_colors.emplace_back(tray_color);
+        }
+        tray_ctype = tray_colors.size() > 1 ? m_clr_picker->ctype : 2;
+    }

    if (ams_filament_id.empty() || nozzle_temp_min.empty() || nozzle_temp_max.empty() || m_filament_type.empty()) {
        BOOST_LOG_TRIVIAL(trace) << "Invalid Setting id";
@@ -757,13 +861,33 @@ void AMSMaterialsSetting::on_select_ok(wxCommandEvent &event)
                            << ", tray_info_idx (filament_id) = " << ams_filament_id
                            << ", setting_id = " << ams_setting_id
                            << ", tray_type = " << m_filament_type
-                            << ", tray_color = " << col_buf
+                            << ", tray_color = " << tray_color
                            << ", nozzle_temp_min = " << nozzle_temp_min_int
                            << ", nozzle_temp_max = " << nozzle_temp_max_int;

    // set filament
    if (m_is_third) {
-        obj->command_ams_filament_settings(ams_id, slot_id, ams_filament_id, ams_setting_id, std::string(col_buf), m_filament_type, nozzle_temp_min_int, nozzle_temp_max_int);
+        obj->command_ams_filament_settings(ams_id, slot_id, ams_filament_id, ams_setting_id, tray_color, m_filament_type, nozzle_temp_min_int, nozzle_temp_max_int,
+                                           tray_colors, tray_ctype);
+
+        // Refresh the edited tray immediately while its MQTT acknowledgement is pending.
+        DevAmsTray* tray = nullptr;
+        if (is_virtual_tray()) {
+            for (auto& virtual_tray : obj->vt_slot) {
+                if (virtual_tray.id == std::to_string(ams_id)) {
+                    tray = &virtual_tray;
+                    break;
+                }
+            }
+        } else {
+            tray = obj->GetFilaSystem()->GetAmsTray(std::to_string(ams_id), std::to_string(slot_id));
+        }
+        if (tray) {
+            tray->color = tray_color;
+            tray->cols = tray_colors;
+            tray->ctype = tray_ctype;
+            tray->set_hold_count();
+        }
    }

    //reset param
@@ -920,8 +1044,15 @@ void AMSMaterialsSetting::set_ctype(int ctype)

 void AMSMaterialsSetting::on_picker_color(wxCommandEvent& event)
 {
-    unsigned int color_num  = event.GetInt();
-    set_color(wxColour(color_num>>24&0xFF, color_num>>16&0xFF, color_num>>8&0xFF, color_num&0xFF));
+    std::vector<wxColour> colors = m_color_picker_popup.get_selected_colours();
+    if (colors.empty()) {
+        unsigned int color_num = event.GetInt();
+        colors.emplace_back(color_num >> 24 & 0xFF, color_num >> 16 & 0xFF, color_num >> 8 & 0xFF, color_num & 0xFF);
+    }
+
+    set_ctype(m_color_picker_popup.get_selected_ctype());
+    set_color(colors.front());
+    set_colors(colors);
 }

 void AMSMaterialsSetting::on_clr_picker(wxMouseEvent &event)
@@ -936,14 +1067,12 @@ void AMSMaterialsSetting::on_clr_picker(wxMouseEvent &event)
        }
    }

-    std::vector<wxColour> ams_colors;
-    obj->GetFilaSystem()->CollectAmsColors(ams_colors);
-
+    m_color_picker_popup.set_ams_colours(collect_ams_color_items(obj->GetFilaSystem().get()));
+    m_color_picker_popup.set_preset_colours(collect_preset_color_items(ams_filament_id));
+    m_color_picker_popup.set_def_colour(m_clr_picker->m_colour, m_clr_picker->m_cols, m_clr_picker->ctype);
    wxPoint img_pos = m_clr_picker->ClientToScreen(wxPoint(0, 0));
    wxPoint popup_pos(img_pos.x - m_color_picker_popup.GetSize().x - FromDIP(95), img_pos.y - FromDIP(65));
    m_color_picker_popup.Position(popup_pos, wxSize(0, 0));
-    m_color_picker_popup.set_ams_colours(ams_colors);
-    m_color_picker_popup.set_def_colour(m_clr_picker->m_colour);
    m_color_picker_popup.Popup();
 }

@@ -1732,7 +1861,46 @@ void ColorPicker::doRender(wxDC& dc)
    auto radius = m_show_full ? size.x / 2 - FromDIP(1) : size.x / 2;
    if (m_selected) radius -= FromDIP(1);

-    if (alpha == 0) {
+    if (m_show_full && m_cols.size() > 1) {
+        if (ctype == 0) {
+            const double center_x = size.x / 2.0;
+            const double center_y = size.y / 2.0;
+            const double draw_radius = radius;
+            dc.SetPen(*wxTRANSPARENT_PEN);
+            for (int x = 0; x < size.x; ++x) {
+                const double dx = x + 0.5 - center_x;
+                if (std::abs(dx) > draw_radius) continue;
+
+                const double half_height = std::sqrt(std::max(0.0, draw_radius * draw_radius - dx * dx));
+                const int top = std::max(0, static_cast<int>(std::ceil(center_y - half_height)));
+                const int bottom = std::min(size.y - 1, static_cast<int>(std::floor(center_y + half_height)));
+                const double pos = size.x > 1 ? static_cast<double>(x) / (size.x - 1) : 0.0;
+                const double scaled = pos * (m_cols.size() - 1);
+                const size_t idx = std::min(static_cast<size_t>(scaled), m_cols.size() - 2);
+                const double ratio = scaled - idx;
+
+                if (top <= bottom) {
+                    dc.SetBrush(wxBrush(mix_colour(m_cols[idx], m_cols[idx + 1], ratio)));
+                    dc.DrawRectangle(x, top, 1, bottom - top + 1);
+                }
+            }
+        }
+        else {
+            float ev_angle = 360.0 / m_cols.size();
+            const float overlap = 2.0f;
+            wxPoint center(size.x / 2, size.y / 2);
+            dc.SetPen(*wxTRANSPARENT_PEN);
+            dc.SetBrush(wxBrush(m_cols.front()));
+            dc.DrawCircle(center.x, center.y, radius);
+            for (int i = 0; i < m_cols.size(); i++) {
+                dc.SetBrush(m_cols[i]);
+                float startAngle = 270.0f + i * ev_angle;
+                float endAngle = startAngle + ev_angle;
+                dc.DrawEllipticArc(center.x - radius, center.y - radius, 2 * radius, 2 * radius, startAngle - overlap, endAngle + overlap);
+            }
+        }
+    }
+    else if (alpha == 0) {
        wxSize bmp_size = m_bitmap_transparent_def.GetBmpSize();
        int center_x = (size.x - bmp_size.x) / 2;
        int center_y = (size.y - bmp_size.y) / 2;
@@ -1774,52 +1942,6 @@ void ColorPicker::doRender(wxDC& dc)
        dc.SetPen(wxPen(wxColour("#6B6B6B")));
        dc.SetBrush(*wxTRANSPARENT_BRUSH);
        dc.DrawCircle(size.x / 2, size.y / 2, radius);
-
-        if (m_cols.size() > 1) {
-            if (ctype == 0) {
-                int left = FromDIP(0);
-                float total_width = size.x;
-                int gwidth = std::round(total_width / (m_cols.size() - 1));
-
-                for (int i = 0; i < m_cols.size() - 1; i++) {
-
-                    if ((left + gwidth) > (size.x)) {
-                        gwidth = size.x - left;
-                    }
-
-                    auto rect = wxRect(left, 0, gwidth, size.y);
-                    dc.GradientFillLinear(rect, m_cols[i], m_cols[i + 1], wxEAST);
-                    left += gwidth;
-                }
-                if (wxGetApp().dark_mode()) {
-                    dc.DrawBitmap(m_bitmap_border_dark, wxPoint(0, 0));
-                }
-                else {
-                    dc.DrawBitmap(m_bitmap_border, wxPoint(0, 0));
-                }
-            }
-            else {
-                float ev_angle = 360.0 / m_cols.size();
-                float startAngle = 270.0;
-                float endAngle = 270.0;
-                dc.SetPen(*wxTRANSPARENT_PEN);
-                for (int i = 0; i < m_cols.size(); i++) {
-                    dc.SetBrush(m_cols[i]);
-                    endAngle += ev_angle;
-                    endAngle = endAngle > 360.0 ? endAngle - 360.0 : endAngle;
-                    wxPoint center(size.x / 2, size.y / 2);
-                    dc.DrawEllipticArc(center.x - radius, center.y - radius, 2 * radius, 2 * radius, startAngle, endAngle);
-                    startAngle += ev_angle;
-                    startAngle = startAngle > 360.0 ? startAngle - 360.0 : startAngle;
-                }
-                if (wxGetApp().dark_mode()) {
-                    dc.DrawBitmap(m_bitmap_border_dark, wxPoint(0, 0));
-                }
-                else {
-                    dc.DrawBitmap(m_bitmap_border, wxPoint(0, 0));
-                }
-            }
-        }
    }

    if (m_is_empty) {
@@ -1888,19 +2010,21 @@ ColorPickerPopup::ColorPickerPopup(wxWindow* parent)
    m_ams_fg_sizer->SetNonFlexibleGrowMode(wxFLEX_GROWMODE_SPECIFIED);

    //other
-    wxFlexGridSizer* fg_sizer;
-    fg_sizer = new wxFlexGridSizer(0, 8, 0, 0);
-    fg_sizer->SetFlexibleDirection(wxBOTH);
-    fg_sizer->SetNonFlexibleGrowMode(wxFLEX_GROWMODE_SPECIFIED);
+    m_other_fg_sizer = new wxFlexGridSizer(0, 8, 0, 0);
+    m_other_fg_sizer->SetFlexibleDirection(wxBOTH);
+    m_other_fg_sizer->SetNonFlexibleGrowMode(wxFLEX_GROWMODE_SPECIFIED);


    for (wxColour col : m_def_colors) {
        auto cp = new ColorPicker(m_def_color_box, wxID_ANY, wxDefaultPosition, wxDefaultSize);
        cp->set_color(col);
+        cp->set_colors({col});
+        cp->ctype = 2;
        cp->set_selected(false);
        cp->SetBackgroundColour(StateColor::darkModeColorFor(wxColour(238,238,238)));
        m_color_pickers.push_back(cp);
-        fg_sizer->Add(cp, 0, wxALL, FromDIP(3));
+        m_default_color_pickers.push_back(cp);
+        m_other_fg_sizer->Add(cp, 0, wxALL, FromDIP(3));
        cp->Bind(wxEVT_LEFT_DOWN, [this, cp](auto& e) {
            set_def_colour(cp->m_colour);

@@ -1963,16 +2087,11 @@ 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));
    m_sizer_box->Add(m_sizer_other, 1, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
-    m_sizer_box->Add(fg_sizer, 0, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
+    m_sizer_box->Add(m_other_fg_sizer, 0, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
    m_sizer_box->Add(m_sizer_custom, 0, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
    m_sizer_box->Add(m_custom_cp, 0, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(16));
    m_sizer_box->Add(0, 0, 0, wxTOP, FromDIP(10));
@@ -1983,7 +2102,7 @@ ColorPickerPopup::ColorPickerPopup(wxWindow* parent)
    m_def_color_box->Fit();

    m_sizer_main->Add(m_def_color_box, 0, wxALL | wxEXPAND, 10);
-    SetSizer(m_sizer_main);
+    SetSizerAndFit(m_sizer_main);
    Layout();
    Fit();

@@ -1991,55 +2110,45 @@ 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)
+void ColorPickerPopup::set_ams_colours(const std::vector<ColorItem>& ams)
 {
+    m_ams_fg_sizer->Clear(false);
    if (m_ams_color_pickers.size() > 0) {
        for (ColorPicker* col_pick:m_ams_color_pickers) {

            std::vector<ColorPicker*>::iterator iter = find(m_color_pickers.begin(), m_color_pickers.end(), col_pick);
            if (iter != m_color_pickers.end()) {
+                col_pick->Hide();
                col_pick->Destroy();
                m_color_pickers.erase(iter);
            }
@@ -2049,17 +2158,22 @@ void ColorPickerPopup::set_ams_colours(std::vector<wxColour> ams)
    }


-    m_ams_colors = ams;
-    for (wxColour col : m_ams_colors) {
+    m_ams_color_items = ams;
+    for (const ColorItem& item : m_ams_color_items) {
+        if (item.colors.empty()) continue;
+
        auto cp = new ColorPicker(m_def_color_box, wxID_ANY, wxDefaultPosition, wxDefaultSize);
-        cp->set_color(col);
+        cp->set_color(item.colors.front());
+        cp->set_colors(item.colors);
+        cp->ctype = item.colors.size() > 1 ? item.ctype : 2;
+        cp->set_show_full(true);
        cp->set_selected(false);
        cp->SetBackgroundColour(StateColor::darkModeColorFor(wxColour(238,238,238)));
        m_color_pickers.push_back(cp);
        m_ams_color_pickers.push_back(cp);
        m_ams_fg_sizer->Add(cp, 0, wxALL, FromDIP(3));
        cp->Bind(wxEVT_LEFT_DOWN, [this, cp](auto& e) {
-            set_def_colour(cp->m_colour);
+            set_def_colour(cp->m_colour, cp->m_cols, cp->ctype);

            wxCommandEvent evt(EVT_SELECTED_COLOR);
            unsigned long g_col = ((cp->m_colour.Red() & 0xff) << 24) + ((cp->m_colour.Green() & 0xff) << 16) + ((cp->m_colour.Blue() & 0xff) << 8) + (cp->m_colour.Alpha() & 0xff);
@@ -2072,9 +2186,68 @@ void ColorPickerPopup::set_ams_colours(std::vector<wxColour> ams)
    Fit();
 }

-void ColorPickerPopup::set_def_colour(wxColour col)
+void ColorPickerPopup::set_preset_colours(const std::vector<ColorItem>& preset_colors)
+{
+    m_other_fg_sizer->Clear(false);
+    if (!m_preset_color_pickers.empty()) {
+        for (ColorPicker* col_pick : m_preset_color_pickers) {
+            auto iter = std::find(m_color_pickers.begin(), m_color_pickers.end(), col_pick);
+            if (iter != m_color_pickers.end()) {
+                col_pick->Hide();
+                col_pick->Destroy();
+                m_color_pickers.erase(iter);
+            }
+        }
+        m_preset_color_pickers.clear();
+    }
+
+    for (const ColorItem& item : preset_colors) {
+        if (item.colors.empty()) continue;
+
+        auto cp = new ColorPicker(m_def_color_box, wxID_ANY, wxDefaultPosition, wxDefaultSize);
+        cp->set_color(item.colors.front());
+        cp->set_colors(item.colors);
+        cp->ctype = item.colors.size() > 1 ? item.ctype : 2;
+        cp->set_show_full(true);
+        cp->set_selected(false);
+        cp->SetBackgroundColour(StateColor::darkModeColorFor(wxColour(238,238,238)));
+        if (!item.name.empty()) {
+            cp->SetToolTip(item.name);
+        }
+
+        m_color_pickers.push_back(cp);
+        m_preset_color_pickers.push_back(cp);
+        cp->Bind(wxEVT_LEFT_DOWN, [this, cp](auto& e) {
+            set_def_colour(cp->m_colour, cp->m_cols, cp->ctype);
+
+            wxCommandEvent evt(EVT_SELECTED_COLOR);
+            unsigned long g_col = ((cp->m_colour.Red() & 0xff) << 24) + ((cp->m_colour.Green() & 0xff) << 16) + ((cp->m_colour.Blue() & 0xff) << 8) + (cp->m_colour.Alpha() & 0xff);
+            evt.SetInt(g_col);
+            wxPostEvent(GetParent(), evt);
+        });
+    }
+
+    const bool show_default_colours = m_preset_color_pickers.empty();
+    for (ColorPicker* cp : m_default_color_pickers) {
+        cp->Show(show_default_colours);
+    }
+    for (ColorPicker* cp : (show_default_colours ? m_default_color_pickers : m_preset_color_pickers)) {
+        m_other_fg_sizer->Add(cp, 0, wxALL, FromDIP(3));
+    }
+
+    m_other_fg_sizer->Layout();
+    Layout();
+    Fit();
+}
+
+void ColorPickerPopup::set_def_colour(wxColour col, std::vector<wxColour> cols, int ctype)
 {
    m_def_col = col;
+    if (cols.empty()) {
+        cols.push_back(col);
+    }
+    m_def_cols = cols;
+    m_def_ctype = m_def_cols.size() > 1 ? ctype : 2;

    for (ColorPicker* cp : m_color_pickers) {
        if (cp->m_selected) {
@@ -2083,7 +2256,8 @@ void ColorPickerPopup::set_def_colour(wxColour col)
    }

    for (ColorPicker* cp : m_color_pickers) {
-        if (cp->m_colour == m_def_col) {
+        if (!cp->IsShown()) continue;
+        if (cp->ctype == m_def_ctype && cp->m_cols == m_def_cols) {
            cp->set_selected(true);
            break;
        }
@@ -82,15 +82,22 @@ public:
 class ColorPickerPopup : public PopupWindow
 {
 public:
+    struct ColorItem
+    {
+        std::vector<wxColour> colors;
+        int                   ctype = 2;
+        wxString              name;
+    };
+
    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;
+    wxFlexGridSizer* m_other_fg_sizer;
    wxColour m_def_col;
    std::vector<wxColour> m_def_colors;
-    std::vector<wxColour> m_ams_colors;
+    std::vector<ColorItem> m_ams_color_items;
    std::vector<ColorPicker*> m_color_pickers;
    std::vector<ColorPicker*> m_ams_color_pickers;

@@ -98,13 +105,20 @@ public:
    ColorPickerPopup(wxWindow* parent);
    ~ColorPickerPopup() {};
    void on_custom_clr_picker(wxMouseEvent& event);
-    void set_ams_colours(std::vector<wxColour> ams);
-    void set_def_colour(wxColour col);
+    void set_ams_colours(const std::vector<ColorItem>& ams);
+    void set_preset_colours(const std::vector<ColorItem>& preset_colors);
+    void set_def_colour(wxColour col, std::vector<wxColour> cols = {}, int ctype = 2);
+    const std::vector<wxColour>& get_selected_colours() const { return m_def_cols; }
+    int get_selected_ctype() const { return m_def_ctype; }
    void paintEvent(wxPaintEvent& evt);
    virtual void OnDismiss() wxOVERRIDE;
    virtual bool ProcessLeftDown(wxMouseEvent& event) wxOVERRIDE;

-public:
+private:
+    std::vector<ColorPicker*> m_default_color_pickers;
+    std::vector<ColorPicker*> m_preset_color_pickers;
+    std::vector<wxColour> m_def_cols;
+    int m_def_ctype = 2;
 };


@@ -747,7 +747,9 @@ Print::ApplyStatus BackgroundSlicingProcess::apply(const Model& model, const Dyn

    // Orca: prevent resetting under gcode viewer mode
    if (invalidated != PrintBase::APPLY_STATUS_UNCHANGED) {
-        const auto plater = GUI::wxGetApp().mainframe->m_plater;
+        // Use the app’s plater accessor instead of going through mainframe, otherwise anything during startup that reaches apply() 
+        // (loading presets, config or input files, e.g. from the CLI) therefore dereferences a null `mainframe` and crashes.
+        const auto plater = GUI::wxGetApp().plater();
        if (plater && plater->only_gcode_mode()) {
            invalidated = PrintBase::APPLY_STATUS_UNCHANGED;
        }
@@ -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
@@ -1798,7 +1798,8 @@ int MachineObject::command_ams_calibrate(int ams_id)
    return command_with_dialog(m_agent->command_ams_calibrate(get_dev_id(), ams_id, MachineObject::m_sequence_id++, is_lan_mode_printer()));
 }

-int MachineObject::command_ams_filament_settings(int ams_id, int slot_id, std::string filament_id, std::string setting_id, std::string tray_color, std::string tray_type, int nozzle_temp_min, int nozzle_temp_max)
+int MachineObject::command_ams_filament_settings(int ams_id, int slot_id, std::string filament_id, std::string setting_id, std::string tray_color, std::string tray_type,
+                                                 int nozzle_temp_min, int nozzle_temp_max, const std::vector<std::string>& tray_colors, int tray_ctype)
 {
    int tag_tray_id = 0;
    int tag_ams_id  = ams_id;
@@ -1827,6 +1828,10 @@ int MachineObject::command_ams_filament_settings(int ams_id, int slot_id, std::s
    j["print"]["nozzle_temp_min"]   = nozzle_temp_min;
    j["print"]["nozzle_temp_max"]   = nozzle_temp_max;
    j["print"]["tray_type"]         = tray_type;
+    if (!tray_colors.empty()) {
+        j["print"]["cols"]  = tray_colors;
+        j["print"]["ctype"] = tray_ctype;
+    }

    return this->publish_json(j);
 }
@@ -5478,6 +5483,7 @@ void MachineObject::parse_new_info(json print)
        is_support_pa_mode = (get_flag_bits_no_border(fun2, 3) == 1);
        is_support_remote_dry = (get_flag_bits_no_border(fun2, 5) == 1);
        is_support_check_track_switch_match_slice_printer = get_flag_bits_no_border(fun2, 19) == 1;
+        is_support_filament_manual_multi_color = (get_flag_bits_no_border(fun2, 23) == 1);

        if (DevPrinterConfigUtil::support_print_check_firmware_for_tpu_left(printer_type)) {
            m_firmware_support_print_tpu_left = get_flag_bits_no_border(fun2, 7) == 1;
@@ -674,6 +674,7 @@ public:
    bool is_support_remote_dry = false;
    bool is_support_check_track_switch_match_slice_printer{false};
    bool is_support_pa_mode{false};
+    bool is_support_filament_manual_multi_color{false};
    std::optional<bool> m_firmware_support_print_tpu_left;

    bool installed_upgrade_kit{false};
@@ -804,7 +805,7 @@ public:
    int command_ams_switch_filament(bool switch_filament);
    int command_ams_air_print_detect(bool air_print_detect);
    int command_ams_calibrate(int ams_id);
-    int command_ams_filament_settings(int ams_id, int slot_id, std::string filament_id, std::string setting_id, std::string tray_color, std::string tray_type, int nozzle_temp_min, int nozzle_temp_max);
+    int command_ams_filament_settings(int ams_id, int slot_id, std::string filament_id, std::string setting_id, std::string tray_color, std::string tray_type, int nozzle_temp_min, int nozzle_temp_max, const std::vector<std::string>& tray_colors = {}, int tray_ctype = 2);
    int command_ams_select_tray(std::string tray_id);
    int command_ams_refresh_rfid(int ams_id, int slot_id);
    int command_ams_control(std::string action);
@@ -96,7 +96,7 @@ void FilamentColorCodeQuery::LoadFromLocal()
                    const auto& fila_color_strs = json_data_item["fila_color"].get<std::vector<wxString>>();
                    for (const auto& color_str : fila_color_strs) {
                        if (color_str.size() > 3) /* Skip the value like "#0"*/{
-                            fila_color.m_colors.emplace(wxColour(color_str));
+                            fila_color.AddColor(wxColour(color_str));
                        }
                    }
                }
@@ -87,6 +87,17 @@ struct FilamentColor

 public:
    size_t ColorCount() const noexcept { return m_colors.size(); }
+    // Preserve catalog endpoint order for display while retaining set-based lookup identity.
+    const std::vector<wxColour>& GetColors() const noexcept { return m_color_list; }
+    void AddColor(const wxColour& color)
+    {
+        if (m_colors.insert(color).second) m_color_list.push_back(color);
+    }
+
+private:
+    std::vector<wxColour> m_color_list;
+
+public:

    void EndSet(int ctype)
    {
@@ -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()
@@ -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 {
@@ -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);
    }
 }

@@ -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);
        });
    }

@@ -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;
@@ -83,11 +83,13 @@ namespace Slic3r::GUI::GLGizmoUtils {
        bool  clicked = toolbar_circular_button(icon, "##wiki_guide_btn", scale);
        if (url && *url && clicked)
            wxLaunchDefaultBrowser(wxString::FromUTF8(url));
+        // ImGuiWrapper::tooltip keeps the text readable on the dark tooltip background whatever text colour the
+        // host window pushed; a negative wrap position keeps the URL on one line.
        if (ImGui::IsItemHovered()){
            if(url && *url)
-                ImGui::SetTooltip("%s\n%s", _u8L("Wiki Guide").c_str(), url);
+                wxGetApp().imgui()->tooltip(_u8L("Wiki Guide") + "\n" + url, -1.f);
            else
-                ImGui::SetTooltip("%s", _u8L("Wiki Guide").c_str());
+                wxGetApp().imgui()->tooltip(_u8L("Wiki Guide"), -1.f);
        }
        return clicked; // for dynamically generated links
    }
@@ -101,9 +103,9 @@ namespace Slic3r::GUI::GLGizmoUtils {
            wxLaunchDefaultBrowser(wxString::FromUTF8(url));
        if (ImGui::IsItemHovered()){
            if(url && *url)
-                ImGui::SetTooltip("%s\n%s", _u8L("Video Guide").c_str(), url);
+                wxGetApp().imgui()->tooltip(_u8L("Video Guide") + "\n" + url, -1.f);
            else
-                ImGui::SetTooltip("%s", _u8L("Video Guide").c_str());
+                wxGetApp().imgui()->tooltip(_u8L("Video Guide"), -1.f);
        }
        return clicked; // for dynamically generated links
    }
@@ -857,11 +857,12 @@ void GizmoObjectManipulation::do_render_move_window(ImGuiWrapper *imgui_wrapper,
    if (render_combo(imgui_wrapper, "", modes, selection_idx, 0, coord_combo_width)) {
        combox_changed = true;
    }
+    ImGuiWrapper::pop_combo_style();
+    // After pop_combo_style(): its light popup background would hide the tooltip's white text.
    if (ImGui::IsItemHovered()) {
        auto tooltip_str = _L("Coordinate system used for transform actions.");
        imgui_wrapper->tooltip(tooltip_str, imgui_wrapper->calc_text_size(tooltip_str).x + 3 * space_size);
    }
-    ImGuiWrapper::pop_combo_style();

    // ORCA use TextColored to match axes color
    float offset_to_center = (unit_size - ImGui::CalcTextSize("O").x) / 2;
@@ -964,11 +965,12 @@ void GizmoObjectManipulation::do_render_move_window(ImGuiWrapper *imgui_wrapper,
        if (render_combo(imgui_wrapper, "", align_modes, align_mode_idx, 0, coord_combo_width))
            m_align_to_parent = align_mode_idx + 1 == align_modes.size();
        ImGui::PopID();
+        ImGuiWrapper::pop_combo_style();
+        // After pop_combo_style(): its light popup background would hide the tooltip's white text.
        if (ImGui::IsItemHovered()) {
            wxString tooltip_str = _L("Reference for alignment");
            imgui_wrapper->tooltip(tooltip_str, imgui_wrapper->calc_text_size(tooltip_str).x + 3 * space_size);
        }
-        ImGuiWrapper::pop_combo_style();

        const bool dark_mode    = wxGetApp().dark_mode();
        int        current_axis = -1;
@@ -1377,11 +1379,12 @@ void GizmoObjectManipulation::do_render_scale_input_window(ImGuiWrapper* imgui_w
    if (render_combo(imgui_wrapper, "", modes, selection_idx, 0, coord_combo_width)) {
        combox_changed = true;
    }
+    ImGuiWrapper::pop_combo_style();
+    // After pop_combo_style(): its light popup background would hide the tooltip's white text.
    if (ImGui::IsItemHovered()) {
        auto tooltip_str = _L("Coordinate system used for transform actions.");
        imgui_wrapper->tooltip(tooltip_str, imgui_wrapper->calc_text_size(tooltip_str).x + 3 * space_size);
    }
-    ImGuiWrapper::pop_combo_style();

    // ORCA use TextColored to match axes color
    float offset_to_center = (unit_size - ImGui::CalcTextSize("O").x) / 2;
@@ -816,6 +816,18 @@ DPIFrame(NULL, wxID_ANY, "", wxDefaultPosition, wxDefaultSize, BORDERLESS_FRAME_

 bool MainFrame::handle_global_shortcut(const KeyChord& chord)
 {
+    // ImGui draws its text fields (the text tool's box, a sketch value field) on the GL canvas, so
+    // while one of them is typed into the focused wx window is that canvas or an in-canvas frame:
+    // neither is a wxControl, so focus_keeps_space() cannot see it and CHAR_HOOK takes the chord
+    // here first -- Space opened the Speed Dial, Ctrl+P the Preferences, and the field never saw
+    // the key. ImGui raises WantCaptureKeyboard while one of its items owns the keyboard, so leave
+    // the key to it then. A focused wxControl (text field, list, web view) is untouched: those
+    // keep their own keys, and ImGui's flag can outlive the focus moving to one of them.
+    wxWindow* const focus = wxWindow::FindFocus();
+    ImGuiWrapper* const imgui = wxGetApp().imgui();
+    if (focus != nullptr && imgui != nullptr && imgui->want_keyboard() && dynamic_cast<wxControl*>(focus) == nullptr)
+        return false;
+
    const std::optional<Shortcut> shortcut = wxGetApp().shortcuts().lookup(ShortcutContext::Global, chord);
    if (!shortcut.has_value())
        return false;
@@ -1332,6 +1332,21 @@ boost::any ConfigOptionsGroup::get_config_value2(const DynamicPrintConfig& confi
    return ret;
 }

+bool ConfigOptionsGroup::commit_config_value(const t_config_option_key& opt_key, int opt_index)
+{
+    if (m_config == nullptr)
+        return false;
+
+    // m_opt_map is filled while the option lines are created, so it still resolves the option when
+    // the group's controls (and thus its fields) have not been built yet.
+    const std::string opt_id = option_id_in_map(m_opt_map, opt_key, opt_index);
+    if (opt_id.empty())
+        return false;
+
+    on_change_OG(opt_id, get_config_value2(*m_config, opt_key, opt_index));
+    return true;
+}
+
 Field* ConfigOptionsGroup::get_fieldc(const t_config_option_key& opt_key, int opt_index)
 {
    Field* field = get_field(opt_key);
@@ -119,6 +119,37 @@ using column_t = std::function<wxWindow*(wxWindow* parent, const Line&)>;
 using t_optionfield_map = std::map<t_config_option_key, t_field>;
 using t_opt_map = std::map< std::string, std::pair<std::string, int> >;

+// The option id a group's option map holds for opt_key, and the index it carries. `opt_index` is
+// an in/out parameter: a negative value asks for the option's single entry, an explicit one selects
+// that index. Returns an empty string when the map does not own the option, or when a negative index
+// matches several entries -- a vector option the GUI edits one index at a time, which has no single
+// value to commit. A group fills the map while its option lines are created (OptionsGroup::append_line
+// / ConfigOptionsGroup::get_option), so this resolves an option even before its controls (and its
+// field) have been built.
+inline std::string option_id_in_map(const t_opt_map& options, const t_config_option_key& opt_key, int& opt_index)
+{
+    if (opt_index >= 0) {
+        for (const auto& opt : options) {
+            if (opt.second.first == opt_key && opt.second.second == opt_index) {
+                opt_index = opt.second.second;
+                return opt.first;
+            }
+        }
+        return {};
+    }
+
+    std::string opt_id;
+    for (const auto& opt : options) {
+        if (opt.second.first != opt_key)
+            continue;
+        if (!opt_id.empty())
+            return {}; // several entries: a vector option, not one value
+        opt_id    = opt.first;
+        opt_index = opt.second.second;
+    }
+    return opt_id;
+}
+
 class OptionsGroup {
 public:
    const bool staticbox{true};
@@ -332,6 +363,15 @@ public:
 	boost::any	get_config_value(const DynamicPrintConfig& config, const std::string& opt_key, int opt_index = -1);
 	// BBS: restore all pages in preset
 	boost::any	get_config_value2(const DynamicPrintConfig& config, const std::string& opt_key, int opt_index = -1);
+	// Re-run this group's committed-change path for one of its options without a widget event:
+	// build the option's value from the config this group edits (get_config_value2, the same form
+	// the option's field reports) and dispatch on_change_OG(), so the group's option-specific
+	// conversion (e.g. the printer_agent canonicalization) and its registered change handler run
+	// exactly as for a hand edit. The option map is filled while the option lines are created, so
+	// this resolves an option whose field is not built yet (a lazy page, or an option the GUI has
+	// no field for). Returns false when this group does not own the option, or when opt_index < 0
+	// matches several entries (a vector option the GUI edits index by index has no single value).
+	bool		commit_config_value(const t_config_option_key& opt_key, int opt_index = -1);
 	Field*		get_fieldc(const t_config_option_key& opt_key, int opt_index);
 	std::pair<OG_CustomCtrl*, bool*>	get_custom_ctrl_with_blinking_ptr(const t_config_option_key& opt_key, int opt_index/* = -1*/);

@@ -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);
    }
 }

@@ -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; }

@@ -46,6 +46,7 @@
 #include "slic3r/GUI/DeviceCore/DevConfigUtil.h"
 #include <deque>
 #include <exception>
+#include <stdexcept>
 #include "libslic3r/LifecycleEvents.hpp"
 #include "libslic3r/Point.hpp"
 #include "slic3r/GUI/SettingsIndex.hpp"
@@ -1645,6 +1646,101 @@ void Tab::load_config(const DynamicPrintConfig& config)
    }
 }

+// The option keys a preset of `type` may hold. The tab's config shares the global
+// print_config_def with every other preset type, so membership has to be checked against the
+// preset type's own key list instead of the config definition, or a printer setting could be
+// written into the process preset.
+static const std::vector<std::string>& preset_type_options(Preset::Type type)
+{
+    static const std::vector<std::string> none;
+    switch (type) {
+    case Preset::TYPE_PRINT:    return Preset::print_options();
+    case Preset::TYPE_FILAMENT: return Preset::filament_options();
+    case Preset::TYPE_PRINTER:  return Preset::printer_options();
+    default:                    return none;
+    }
+}
+
+static const char* preset_type_name(Preset::Type type)
+{
+    switch (type) {
+    case Preset::TYPE_PRINT:    return "process";
+    case Preset::TYPE_FILAMENT: return "filament";
+    case Preset::TYPE_PRINTER:  return "printer";
+    default:                    return "preset";
+    }
+}
+
+// Set one option of the currently edited preset from its serialized string form, then run the
+// same update path a hand edit runs. The edited preset is not saved: it only becomes dirty,
+// exactly as if the field had been edited by hand.
+void Tab::apply_preset_config_value(const std::string& opt_key, const std::string& value)
+{
+    if (m_config == nullptr)
+        throw std::runtime_error("The preset configuration is not available");
+    if (wxGetApp().plater() == nullptr)
+        throw std::runtime_error("OrcaSlicer main window is not available");
+
+    const std::vector<std::string>& options = preset_type_options(m_type);
+    if (std::find(options.begin(), options.end(), opt_key) == options.end())
+        throw std::invalid_argument(format("Unknown %1% preset setting \"%2%\"", preset_type_name(m_type), opt_key));
+
+    // Parse strictly, keeping a backup: the strict deserializer can already have mutated the option
+    // when it rejects a bad value, so a failed update has to restore the preset it was given.
+    const ConfigOption*           previous_option = m_config->option(opt_key);
+    std::unique_ptr<ConfigOption> previous(previous_option != nullptr ? previous_option->clone() : nullptr);
+    try {
+        m_config->set_deserialize_strict(opt_key, value);
+    } catch (const ConfigurationError& err) {
+        if (previous)
+            m_config->set_key_value(opt_key, previous.release());
+        else
+            m_config->erase(opt_key);
+        throw std::invalid_argument(err.what());
+    }
+
+    // Run the same commit path the GUI runs for this setting, so its key-specific behaviour
+    // (ConfigOptionsGroup::on_change_OG, including the printer_agent canonicalization, the group's
+    // pre-checks and Tab::on_value_change()) runs exactly as for a hand edit. A built field supplies
+    // the field's typed/clamped value; otherwise the owning ConfigOptionsGroup builds the value from
+    // the config it edits and dispatches the same on_change_OG(). The field is refreshed from the
+    // config just committed first, so it reports the committed value rather than a stale one.
+    bool committed = false;
+    if (Page* field_page = nullptr; Field* field = get_field(opt_key, &field_page)) {
+        field_page->reload_config();
+        field->field_changed();
+        committed = true;
+    } else {
+        for (const PageShp& page : m_pages) {
+            for (const ConfigOptionsGroupShp& group : page->m_optgroups) {
+                if (group->commit_config_value(opt_key)) {
+                    committed = true;
+                    break;
+                }
+            }
+            if (committed)
+                break;
+        }
+    }
+
+    if (committed) {
+        // The commit path already ran update_dirty() (dirty flag, preset combo and, on the printer
+        // tab, the printer-agent switch); refresh the visible page and push the config to the plater.
+        reload_config();
+        update();
+    } else {
+        // The GUI edits this setting through a custom widget rather than a group (e.g.
+        // compatible_printers), so take the same shared no-field commit path the widget uses. Saved
+        // mode skips the value write (the strict parse above already did it) and keeps the path's
+        // compatibility recompute, dirty flag, preset-combo and plater updates.
+        load_key_value(opt_key, boost::any(), /*saved_value=*/true);
+        // The widget itself normally re-reads its value after load_key_value(); with no widget to do
+        // that, sync the visible page so a custom widget (the compatible-printers row) reflects the
+        // new value.
+        reload_config();
+    }
+}
+
 // Reload current $self->{config} (aka $self->{presets}->edited_preset->config) into the UI fields.
 void Tab::reload_config()
 {
@@ -424,6 +424,17 @@ public:
 	//BBS update plater presets if update_plater_presets = true
 	void			update_tab_ui(bool update_plater_presets = false);
 	void			load_config(const DynamicPrintConfig& config);
+	// Host/plugin API: set one option of this tab's currently edited preset from its serialized
+	// string value, then run the same committed-change path a field edit runs. `opt_key` must be a
+	// setting of this tab's preset type, so a key of another preset type (e.g. a printer setting
+	// passed to the process tab) is rejected instead of written silently. `value` is parsed by the
+	// strict config deserializer, which raises std::invalid_argument for an unknown key or a value
+	// the option cannot parse, and leaves the preset unchanged. The key-specific behaviour runs
+	// through its ConfigOptionsGroup::on_change_OG(): with the option's built field it uses the
+	// field's typed value, otherwise the owning group builds the value and dispatches the same call,
+	// so a not-yet-built field still gets it. A key the GUI edits through a custom widget instead
+	// takes the shared no-field commit path, Tab::load_key_value() in saved mode.
+	void			apply_preset_config_value(const std::string& opt_key, const std::string& value);
 	virtual void	reload_config();
    void            update_mode();
    void            update_visibility();
@@ -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);
@@ -451,6 +451,16 @@ void GuideFrame::on_profile_loaded()
    SaveProfileData();
    const std::string strAll = m_ProfileJson.dump(-1, ' ', false, json::error_handler_t::ignore);
    BOOST_LOG_TRIVIAL(info) << __FUNCTION__ << ", finished, json contents:\n" << strAll;
+    m_profile_ready = true;
+    notify_profile_loaded();
+}
+
+// The data is often ready before the loading page has run its scripts, and a
+// call into a page without HandleStudio is lost, so the message waits for both.
+void GuideFrame::notify_profile_loaded()
+{
+    if (!m_profile_ready || !m_page_ready)
+        return;
    json res;
    res["command"]     = "userguide_profile_load_finish";
    res["sequence_id"] = "10001";
@@ -546,7 +556,11 @@ void GuideFrame::OnScriptMessage(wxWebViewEvent &evt)
        wxString strCmd = j["command"];
        BOOST_LOG_TRIVIAL(trace) << "GuideFrame::OnScriptMessage;Command:" << strCmd;

-        if (strCmd == "close_page") {
+        if (strCmd == "userguide_loading_page_ready") {
+            m_page_ready = true;
+            notify_profile_loaded();
+        }
+        else if (strCmd == "close_page") {
            this->EndModal(wxID_CANCEL);
        }
        if (strCmd == "user_clause") {
@@ -102,6 +102,7 @@ public:
    int LoadProfileFamily(std::string strVendor, std::string strFilePath);
    void init_guide_paths();
    void on_profile_loaded();
+    void notify_profile_loaded();
    bool BuildProfileJson(const PresetBundle& bundle, bool require_all_resource_vendors);
    bool BuildProfileDataFromPresetBundle();
    bool BuildProfileDataFromVendors();
@@ -142,6 +143,10 @@ private:

    //First Load
    bool bFirstComplete{false};
+    // The loading page gets userguide_profile_load_finish once both are true;
+    // every instance of it reports in, so the flag is never reset.
+    bool m_profile_ready{false};
+    bool m_page_ready{false};
    // Set once in the destructor. Read through `this` by the loading thread
    // (joined before `this` dies) and captured as the shared_ptr by CallAfter
    // lambdas so they don't touch `this` after the object is freed.
@@ -38,6 +38,8 @@
 #include <cstddef>
 #include <wx/simplebook.h>
 #include <wx/dcgraph.h>
+#include <wx/graphics.h>
+#include <memory>

 #include <boost/log/trivial.hpp>
 #include <wx/timer.h>
@@ -1409,22 +1411,17 @@ void AMSLib::render_lite_lib(wxDC& dc)

    dc.SetPen(wxPen(*wxTRANSPARENT_PEN));
    if (m_info.material_cols.size() > 1) {
-        int left = FromDIP(10);
-        int gwidth = std::round(libsize.x / (m_info.material_cols.size() - 1));
-        //gradient
+        wxRect color_rect(FromDIP(10), FromDIP(10), libsize.x - FromDIP(18), libsize.y - FromDIP(18));
        if (m_info.ctype == 0) {
-            for (int i = 0; i < m_info.material_cols.size() - 1; i++) {
-                auto rect = wxRect(left, FromDIP(10), libsize.x - FromDIP(18), libsize.y - FromDIP(18));
-                fill_gradient_rect_east(dc, rect, m_info.material_cols[i], m_info.material_cols[i + 1]);
-                left += gwidth;
-            }
+            fill_gradient_rect_east(dc, color_rect, m_info.material_cols.front(), m_info.material_cols.back());
        }
        else {
            int cols_size = m_info.material_cols.size();
            for (int i = 0; i < cols_size; i++) {
                dc.SetBrush(wxBrush(m_info.material_cols[i]));
-                float x = FromDIP(10) + ((float)libsize.x - FromDIP(18)) * i / cols_size;
-                dc.DrawRoundedRectangle(x, FromDIP(10), ((float)libsize.x - FromDIP(17)) / cols_size, libsize.y - FromDIP(20), 0);
+                int x = color_rect.x + color_rect.width * i / cols_size;
+                int next_x = color_rect.x + color_rect.width * (i + 1) / cols_size;
+                dc.DrawRectangle(x, color_rect.y, next_x - x, color_rect.height);
            }
            dc.SetBrush(wxBrush(tmp_lib_colour));
        }
@@ -1516,7 +1513,27 @@ void AMSLib::render_generic_lib(wxDC &dc)
    int top = height - curr_height;

    if (m_ams_model == EXT_AMS){
-        dc.DrawRoundedRectangle(FromDIP(1), FromDIP(1), size.x - FromDIP(2), size.y - FromDIP(1), m_radius - 1);
+        wxRect color_rect(FromDIP(1), FromDIP(1), size.x - FromDIP(2), size.y - FromDIP(1));
+        if ((m_info.ctype == 0 || m_info.ctype == 1) && m_info.material_cols.size() > 1 && alpha != 0) {
+            if (m_info.ctype == 0) {
+                fill_gradient_rect_east(dc, color_rect, m_info.material_cols.front(), m_info.material_cols.back());
+            }
+            else {
+                int cols_size = static_cast<int>(m_info.material_cols.size());
+                for (int i = 0; i < cols_size; i++) {
+                    dc.SetPen(wxPen(*wxTRANSPARENT_PEN));
+                    dc.SetBrush(wxBrush(m_info.material_cols[i]));
+                    int x      = color_rect.x + color_rect.width * i / cols_size;
+                    int next_x = color_rect.x + color_rect.width * (i + 1) / cols_size;
+                    dc.DrawRectangle(x, color_rect.y, next_x - x, color_rect.height);
+                }
+            }
+            dc.SetPen(wxPen(*wxTRANSPARENT_PEN));
+            dc.SetBrush(wxBrush(tmp_lib_colour));
+        }
+        else {
+            dc.DrawRoundedRectangle(color_rect.x, color_rect.y, color_rect.width, color_rect.height, m_radius - 1);
+        }
        if (alpha == 0) {
            dc.DrawBitmap(m_bitmap_transparent_def.bmp(), FromDIP(2), FromDIP(2));
        }
@@ -2844,30 +2861,38 @@ void AMSPreview::doRender(wxDC &dc)
        //dc.DrawRoundedRectangle((size.x - rec_size.x) / 2, (size.y - rec_size.y) / 2, rec_size.x, rec_size.y, FromDIP(2));
        if (iter.material_cols.size() > 1)
        {
-            int fleft = (size.x - AMS_ITEM_CUBE_SIZE.x) / 2;
-
-            float total_width = AMS_ITEM_CUBE_SIZE.x;
-            int gwidth = (total_width / (iter.material_cols.size()));
-            if (iter.ctype == 0) {
-                for (int i = 0; i < iter.material_cols.size() - 1; i++) {
-
-                    if ((fleft + gwidth) > (AMS_ITEM_CUBE_SIZE.x)) {
-                        gwidth = (fleft + AMS_ITEM_CUBE_SIZE.x) - fleft;
-                    }
-
-                    auto rect = wxRect(fleft, (size.y - AMS_ITEM_CUBE_SIZE.y) / 2, gwidth, AMS_ITEM_CUBE_SIZE.y);
-                    fill_gradient_rect_east(dc, rect, iter.material_cols[i], iter.material_cols[i + 1]);
-                    fleft += gwidth;
-                }
+            const wxSize swatch_size = m_ams_item_type == AMSModel::N3S_AMS ? AMS_ITEM_CUBE_SIZE : AMS_ITEM_CUBE_SIZE2;
+            const wxRect rect((size.x - swatch_size.x) / 2, (size.y - swatch_size.y) / 2, swatch_size.x, swatch_size.y);
+            const int radius = m_ams_item_type == AMSModel::N3S_AMS ? 0 : FromDIP(3);
+            std::unique_ptr<wxGraphicsContext> owned_gc;
+            wxGraphicsContext* gc = dc.GetGraphicsContext();
+            if (!gc) {
+                owned_gc.reset(wxGraphicsContext::CreateFromUnknownDC(dc));
+                gc = owned_gc.get();
            }
-            else {
-                int cols_size = iter.material_cols.size();
-                for (int i = 0; i < cols_size; i++) {
-                    dc.SetPen(wxPen(*wxTRANSPARENT_PEN));
-                    dc.SetBrush(wxBrush(iter.material_cols[i]));
-                    float x = (size.x - AMS_ITEM_CUBE_SIZE.x) / 2 + total_width * i / cols_size;
-                    dc.DrawRectangle(x, (size.y - AMS_ITEM_CUBE_SIZE.y) / 2, total_width / cols_size, AMS_ITEM_CUBE_SIZE.y);
+            if (gc) {
+                wxGraphicsGradientStops stops(iter.material_cols.front(), iter.material_cols.back());
+                const size_t count = iter.material_cols.size();
+                if (iter.ctype == 0) {
+                    for (size_t i = 1; i + 1 < count; ++i)
+                        stops.Add(iter.material_cols[i], static_cast<float>(i) / (count - 1));
+                } else {
+                    // Two stops at each boundary keep multicolour bands distinct.
+                    for (size_t i = 1; i < count; ++i) {
+                        const float position = static_cast<float>(i) / count;
+                        stops.Add(iter.material_cols[i - 1], position);
+                        stops.Add(iter.material_cols[i], position);
+                    }
                }
+                gc->PushState();
+                gc->SetPen(*wxTRANSPARENT_PEN);
+                gc->SetBrush(gc->CreateLinearGradientBrush(rect.x, rect.y, rect.x + rect.width, rect.y, stops));
+                gc->DrawRoundedRectangle(rect.x, rect.y, rect.width, rect.height, radius);
+                gc->PopState();
+            } else {
+                dc.SetPen(*wxTRANSPARENT_PEN);
+                dc.SetBrush(iter.material_colour);
+                dc.DrawRoundedRectangle(rect, radius);
            }
        }
        else {
@@ -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){

@@ -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 {
@@ -17,6 +17,7 @@
 #include <slic3r/GUI/GUI_App.hpp>
 #include <slic3r/GUI/MainFrame.hpp>
 #include <slic3r/GUI/Plater.hpp>
+#include <slic3r/GUI/PresetComboBoxes.hpp> // TabPresetComboBox::set_filament_idx
 #include <slic3r/GUI/Tab.hpp>

 #include <pybind11/stl.h>
@@ -48,6 +49,110 @@ PresetCollection& printer_presets(PresetBundle& bundle)
    return static_cast<PresetCollection&>(bundle.printers);
 }

+// Handle to one category of currently edited preset. It is a category, not a snapshot: it always
+// resolves the preset the matching tab edits now, so it stays valid across preset switches.
+struct PresetEditor
+{
+    Preset::Type type = Preset::TYPE_INVALID;
+};
+
+const char* preset_tab_name(Preset::Type type)
+{
+    switch (type) {
+    case Preset::TYPE_PRINT:    return "process";
+    case Preset::TYPE_FILAMENT: return "filament";
+    case Preset::TYPE_PRINTER:  return "printer";
+    default:                    return "preset";
+    }
+}
+
+void update_edited_preset(Preset::Type type, const std::string& key, const std::string& value)
+{
+    PluginHostUi::run_on_ui_thread([&] {
+        GUI::GUI_App& app = GUI::wxGetApp();
+        if (app.is_closing())
+            throw std::runtime_error("OrcaSlicer is closing");
+        if (app.preset_bundle == nullptr)
+            throw std::runtime_error("Preset bundle is not available");
+        if (app.plater() == nullptr)
+            throw std::runtime_error("OrcaSlicer main window is not available");
+
+        GUI::Tab* tab = app.get_tab(type);
+        if (tab == nullptr)
+            throw std::runtime_error(std::string("The ") + preset_tab_name(type) + " preset tab is not available");
+        // The tab for this preset type exists, but the selected printer's technology may not use it
+        // (the print tab no-ops under SLA); refuse instead of writing a value the UI cannot apply.
+        if (!tab->supports_printer_technology(app.preset_bundle->printers.get_selected_preset().printer_technology()))
+            throw std::runtime_error(std::string("The ") + preset_tab_name(type)
+                                     + " preset is not available for the selected printer technology");
+
+        tab->apply_preset_config_value(key, value);
+    });
+}
+
+// Slot-addressed filament update. `slot_number` is 1-based, matching the GUI's filament slots and
+// the values PresetBundle::filament_presets holds. The slot's assigned preset is resolved to its
+// internal name; when that is not the preset the filament tab edits, the tab is switched through
+// Tab::select_preset() - the normal UI preselection flow, so a dirty edited preset still prompts
+// the user and a declined prompt cancels the call with a clear error and no change.
+void update_filament_slot(int slot_number, const std::string& key, const std::string& value)
+{
+    PluginHostUi::run_on_ui_thread([&] {
+        GUI::GUI_App& app = GUI::wxGetApp();
+        if (app.is_closing())
+            throw std::runtime_error("OrcaSlicer is closing");
+        if (app.preset_bundle == nullptr)
+            throw std::runtime_error("Preset bundle is not available");
+        if (app.plater() == nullptr)
+            throw std::runtime_error("OrcaSlicer main window is not available");
+
+        PresetBundle& bundle = *app.preset_bundle;
+        if (slot_number < 1 || static_cast<size_t>(slot_number) > bundle.filament_presets.size())
+            throw std::out_of_range("Filament slot " + std::to_string(slot_number) + " is out of range; slot numbers are 1-based and this printer has "
+                                    + std::to_string(bundle.filament_presets.size()) + " filament slot(s)");
+
+        const std::string& assigned_name = bundle.filament_presets[static_cast<size_t>(slot_number) - 1];
+        if (assigned_name.empty())
+            throw std::runtime_error("Filament slot " + std::to_string(slot_number) + " has no assigned filament preset");
+
+        // Resolve the assigned name the way the app does, so a renamed/aliased entry maps to the
+        // internal preset it now identifies. Copy the name out before selecting anything: the
+        // collection can be reallocated while switching.
+        Preset* slot_preset = bundle.filaments.find_preset(assigned_name);
+        if (slot_preset == nullptr)
+            throw std::runtime_error("Filament slot " + std::to_string(slot_number) + " is assigned \"" + assigned_name
+                                     + "\", which does not resolve to a filament preset");
+        const std::string target_name = slot_preset->name;
+
+        GUI::Tab* tab = app.get_tab(Preset::TYPE_FILAMENT);
+        if (tab == nullptr)
+            throw std::runtime_error("The filament preset tab is not available");
+        if (!tab->supports_printer_technology(bundle.printers.get_selected_preset().printer_technology()))
+            throw std::runtime_error("The filament preset is not available for the selected printer technology");
+
+        // Switch to the slot's preset through the normal preset selection, never a forced one, so the
+        // user's unsaved-changes prompt is honoured. A declined prompt returns false here.
+        if (bundle.filaments.get_edited_preset().name != target_name) {
+            if (!tab->select_preset(target_name))
+                throw std::runtime_error("Switching the edited filament preset to \"" + target_name + "\" for filament slot "
+                                         + std::to_string(slot_number) + " was canceled; the setting was not changed");
+        }
+
+        // select_preset() can still leave a different preset edited (e.g. the target disappeared), so
+        // re-check before writing anything.
+        if (bundle.filaments.get_edited_preset().name != target_name)
+            throw std::runtime_error("The edited filament preset is \"" + bundle.filaments.get_edited_preset().name
+                                     + "\", not \"" + target_name + "\"; the setting was not changed");
+
+        // Match PlaterPresetComboBox::switch_to_tab(): record which 0-based filament slot this tab
+        // combobox now edits, so the GUI shows the slot the value was written for.
+        if (GUI::TabPresetComboBox* combo = tab->get_combo_box())
+            combo->set_filament_idx(slot_number - 1);
+
+        tab->apply_preset_config_value(key, value);
+    });
+}
+
 void reload_local_bundle(const std::string& bundle_id)
 {
    bool        reloaded = false;
@@ -119,6 +224,47 @@ void host_bindings::register_presets(py::module_& host)
        .value("Plate", Preset::TYPE_PLATE)
        .value("Model", Preset::TYPE_MODEL);

+    py::class_<PresetEditor>(preset, "PresetEditor",
+                             "Handle to a category of currently edited preset. It is not a snapshot: it always "
+                             "resolves the preset the matching tab edits now, so it stays usable across preset "
+                             "switches. update() edits the preset in place; the change is not saved to disk.")
+        .def_readonly("type", &PresetEditor::type)
+        .def(
+            "update",
+            [](const PresetEditor& editor, const std::string& key, const std::string& value) {
+                update_edited_preset(editor.type, key, value);
+            },
+            py::arg("key"), py::arg("value"),
+            "Set one setting of the currently edited preset and run the same committed-change path as "
+            "editing the setting in the GUI; the edited preset becomes dirty until saved/exported. "
+            "key must be a setting of this preset category and value its serialized string form, "
+            "otherwise ValueError is raised and nothing is written. A setting edited through a field "
+            "runs that field's validation even before its page has been opened; one the GUI edits "
+            "outside a field (such as compatible printers) also recomputes preset compatibility.")
+        .def(
+            "update",
+            [](const PresetEditor& editor, int slot_number, const std::string& key, const std::string& value) {
+                if (editor.type != Preset::TYPE_FILAMENT)
+                    throw std::invalid_argument("The slot_number form of update() is only available on "
+                                                "orca.host.preset.filament; call update(key, value) on this editor");
+                update_filament_slot(slot_number, key, value);
+            },
+            py::arg("slot_number"), py::arg("key"), py::arg("value"),
+            "Set one setting of the filament preset assigned to a 1-based filament slot. When that preset "
+            "is not the one currently edited the call switches to it through the normal preset-selection "
+            "flow, so an unsaved edited preset still prompts the user and a declined prompt cancels the "
+            "call with an error and no change. An out-of-range, empty or unresolved slot is rejected with "
+            "a clear error. Other preset editors accept only update(key, value); this form raises "
+            "ValueError on them.");
+
+    // The three preset categories edited by the main tabs. `process` is the print/process preset,
+    // `printer` the machine preset and `filament` the currently edited filament preset (its
+    // 3-argument form addresses a 1-based filament slot); each only accepts its own settings, so a
+    // printer setting passed to `process` is rejected instead of written silently.
+    preset.attr("process")  = py::cast(PresetEditor{Preset::TYPE_PRINT});
+    preset.attr("printer")  = py::cast(PresetEditor{Preset::TYPE_PRINTER});
+    preset.attr("filament") = py::cast(PresetEditor{Preset::TYPE_FILAMENT});
+
    py::class_<Preset, std::unique_ptr<Preset, py::nodelete>>(host, "Preset")
        .def_readonly("type", &Preset::type)
        .def_readonly("name", &Preset::name)
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
peachismomo	dc9203126d	fix: tests	2026-10-15 21:00:39 +08:00
Ian Chua	8c2a1198d6	Merge branch 'main' into feat/preset-plugin-apis	2026-10-15 20:46:38 +08:00
Ian Chua	193cfc6dbf	feat: introduce plugin APIs for mutable presets	2026-10-15 20:32:49 +08:00
SoftFever	86905a8a20	Use a keyboard icon for the shortcut button and fix unreadable guide tooltips (#16515 ) * Fix unreadable text in wiki and video guide tooltips * Use a keyboard icon for the gizmo shortcut button * Fix blank tooltips on the Move and Scale gizmo combo boxes	2026-10-15 20:28:13 +08:00
Noisyfox	d4fabbf7c8	Fix AMS gradient rendering, color presets and printer writeback (#16252 ) * Fix external spool gradient and multicolor rendering * Display AMS gradients and multicolors in color popup * Preserve AMS gradient selection through color popup * Match popup selections by full filament color data * Align AMS Lite gradient geometry with BambuStudio * Align AMS color palette with BambuStudio presets * Match Bambu circular color rendering without background masks * Preserve AMS gradient colors when applying filament settings * Match AMS preview gradient swatches to the solid color shape	2026-10-15 19:43:07 +08:00
SoftFever	51efb24752	Complete traditional Chinese translations (#16513 )	2026-10-15 19:32:54 +08:00
SoftFever	cf9ec18df5	Complete the Simplified Chinese translations (#16512 )	2026-10-15 19:32:30 +08:00
Tobias Glothandyw4z	258f927a0f	Fix: Crash by null mainframe in BackgroundSlicingProcess for CLI (#15367 ) * add nullptr check * use plater from app instead mainframe --------- Co-authored-by: yw4z <ywsyildiz@gmail.com>	2026-10-15 14:14:26 +03:00
Arthur Porto	6aa613ccf0	Fix Z contouring failing on objects with several instances (#16461 ) * Let Z contouring slice objects that have several instances The contouring step refused any object with more than one instance. The instances of a PrintObject differ only by their XY shift, so the mesh is now placed with the first instance of the PrintObject being contoured. * Say in the Z contouring comment how instances map to print objects * Check that Z contouring follows each instance as it is turned	2026-10-15 07:30:57 -03:00
SoftFever	7599868797	Update locale	2026-10-15 17:41:23 +08:00
Lam Wei Lun	81ec931990	Keep global shortcuts out of in-canvas ImGui text fields Space opened the Speed Dial and Ctrl+P the Preferences while the text tool's box or a sketch value field was being typed into. Those fields are ImGui drawn on the GL canvas, so the canvas is the focused wx window and focus_keeps_space() cannot see them; the CHAR_HOOK handler took the chord first and the field never saw the key. Skip the global shortcut dispatch while ImGui reports that one of its items owns the keyboard and the focused window is not a wxControl.	2026-10-15 17:20:56 +08:00
Volodimer BabchynskyyandSoftFever	8fd97b5120	Pass EXTRUDER_OTHER_LAYER_TEMP in RatRig single-toolhead start G-code (#16444 ) RatOS 2.1 START_PRINT aborts when the parameter is missing. The IDEX profiles already pass it. Co-authored-by: SoftFever <103989404+SoftFever@users.noreply.github.com>	2026-10-15 16:57:47 +08:00
Paul	aacc36b9d2	Add official School House Spools PLA and PETG filament profiles (#15429 ) # Description Adds School House Spools PLA and PETG to the global Orca Filament Library. Both are standard PLA and PETG, so Bambu PLA Basic / PETG Basic served as the baseline for tuning values. The one intentional difference is PETG nozzle temperature (252°C vs Bambu's inherited 255°C default), based on our own testing. # Screenshots/Recordings/Graphs N/A ## Tests Ran scripts/assign_vendor_setting_ids.py to generate setting_id values, and scripts/orca_extra_profile_check.py --vendor="OrcaFilamentLibrary" --check-filaments --check-materials to validate. No new errors or warnings introduced (pre-existing unrelated errors in other vendors' profiles were not touched). [How to Download Pull Requests Artifacts for Testing](https://www.orcaslicer.com/wiki/how_to_download_pr_artifacts)	2026-10-15 16:36:21 +08:00
Noisyfoxandyw4z	26f5fd6251	Add a themed WebView color picker with persistent favorites (#16197 ) * 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>	2026-10-15 15:29:49 +08:00
HanifKoh	5d73410281	Tell the Setup Wizard's Loading Page Only Once It Has Loaded (#16475 ) The wizard's loading page waits for HandleStudio to be called with userguide_profile_load_finish and jumps to its target page on it; if the call never arrives, a fallback timer in the page jumps after 180 s. GuideFrame started the profile load from the first wxEVT_WEBVIEW_NAVIGATED event and ran HandleStudio in the page as soon as the data was ready. That event is the navigation's commit, before the page's scripts have run, and with the wizard's derived cache the data is ready about 100 ms later. Since the web view is created with an empty URL so the translated strings can be injected before the first load, the first navigated event is the commit of about:blank, so the data is ready before the real page has even begun loading and the call reaches a page without HandleStudio. WebKit drops the error and nothing retries, so on macOS the wizard often sits on "Loading..." for three minutes before the printer list appears. The loading page now reports in from its OnInit, the way the other wizard pages request what they need, and the host sends the message once both the data is ready and the page has reported; every instance of the page reports again, so one that replaced an earlier one gets its own message.	2026-10-15 13:44:06 +08:00