Project the texture in the model's own orientation, and stop the preview tiling

The bake frame took its orientation from the world, so turning a part on the plate slid the decoration across its surface. Turning a part is a print-time decision - clearance, supports, warping - and it should not be a design one. The frame now takes its orientation from the model and keeps world scale, so a tile is still tiling_scale printed millimetres whatever the instance's scale. The rotation is separated out by polar decomposition rather than by assuming the linear part is a rotation times a scale, since a sheared or mirrored placement is legal here. A reflection is deliberately left with the scale, so a mirrored instance still makes the frame's determinant negative and the bake still flips the normals it derives. The preview shaders rebuild that frame themselves from a world position, so they take the same rotation through a uniform; without it the fast preview and the bake would disagree, which is the class of bug this is fixing. The gizmo's own way back out to world carries the rotation too, which it did not need to when the frame was world-aligned. Tiling in the fast preview: - the sampler wrap mode was set on the height texture but not on the colour texture, which sits on its own unit and is sampled at the same uv. So with Tile off the relief stopped at one placement while the colour carried on repeating around it. - outside a single placement the colour then came out black, because a zero texture border cannot say "no colour here", only "the colour is black here". The shader now tests the uv the way sample_layer_color() does and leaves the surface its own colour. The placement gizmo is a tile of a planar projection, so it is offered only for the mappings that have one. An unwrap cuts the surface into islands and packs them, and a model's own UV channel is whatever its author drew: one tile lands there as an arbitrary curved patch with no rectangle to take hold of. Those two say so and point at the UV editor instead.
Merge remote-tracking branch 'origin/main' into HEAD
2026-10-16 20:31:14 +00:00 · 2026-10-15 15:45:47 +02:00 · 2026-10-15 13:13:26 +02:00 · 2026-10-15 13:13:26 +02:00 · 2026-10-15 07:30:57 -03:00 · 2026-10-15 17:41:23 +08:00
99 changed files with 38358 additions and 2687 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
@@ -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",
@@ -36,6 +36,11 @@ uniform int       palette_b[64];
 uniform float     prefer_pure_de; // PREFER_PURE_DE: how much better than a single filament a mix must be
 uniform sampler2D color_tex;     // the layer's colour image, sampled at the same uv as the height
 uniform bool      has_color_tex;
+// False means the texture is a single placement, not a repeat. The sampler's wrap mode can express
+// that for the *height* - a zero border reads as no displacement - but not for colour, because a
+// zero border is indistinguishable from the image genuinely being black there. So the uv is tested
+// instead, which is what sample_layer_color() does on the CPU side.
+uniform bool      tile_enabled;
 uniform bool volume_mirrored;

 uniform mat4 view_model_matrix;
@@ -45,6 +50,14 @@ uniform sampler2D height_tex;
 uniform vec2      height_tex_texel;
 uniform float      depth_mm;
 uniform float      tiling_scale;
+// Tile extent along v, in mm. Zero or negative means "the same as tiling_scale" - the square tile
+// every layer had before the two axes could differ - which is also what layer_tile_mm() does on the
+// CPU side, so an unset uniform behaves exactly as this shader always did.
+uniform float      tiling_scale_v;
+// Mirror the texture along one axis of the tile. Both default to false, which GLSL guarantees for an
+// uninitialised bool uniform, so a shader whose caller has not set them behaves exactly as before.
+uniform bool       mirror_u;
+uniform bool       mirror_v;
 // Height map width / height. Scales the v axis so a non-square image keeps its proportions
 // instead of being squeezed into a square tile - mirrors libslic3r's apply_uv_transform().
 uniform float      tex_aspect;
@@ -54,6 +67,12 @@ uniform bool       invert;
 uniform float      midlevel;      // the height that means "don't move"; needed by the parallax step
 uniform vec3       eye_model_pos; // camera position in the texture frame (world minus tex_anchor)
 uniform vec3       tex_anchor;    // the volume's origin in world space: the texture frame's origin
+// The placement's rotation and its inverse, so this shader turns a world position into the texture
+// frame exactly as texture_displacement_bake_frame() does. Both are passed rather than one
+// transposed here, because GLSL 110 has no transpose(). Identity leaves the old world-aligned
+// behaviour, which is what an unset uniform gives.
+uniform mat3       tex_rot;     // world -> texture frame
+uniform mat3       tex_rot_inv; // texture frame -> world
 uniform bool       use_vertex_uv;
 // 2x3 affine (lin = (m00, m01, m10, m11), tr = (m02, m12)) applied to the dragged island's uv; see the
 // 140 variant. Identity when nothing is dragged.
@@ -162,13 +181,29 @@ void projection_axes(vec3 p, vec3 n, out vec3 t, out vec3 b, out vec2 units_per_
    }
 }

+// Tile extents in mm, u then v, with the v fallback layer_tile_mm() applies.
+vec2 tile_mm()
+{
+    float su = (tiling_scale > 1e-6) ? tiling_scale : 1.0;
+    return vec2(su, (tiling_scale_v > 1e-6) ? tiling_scale_v : su);
+}
+
+// +1 or -1 per axis, matching layer_mirror_sign() on the CPU side.
+vec2 mirror_sign()
+{
+    return vec2(mirror_u ? -1.0 : 1.0, mirror_v ? -1.0 : 1.0);
+}
+
 vec2 project_uv(vec3 p, vec3 n)
 {
    vec2 planar = projection_raw(p, n);
-    planar *= (tiling_scale > 1e-6) ? (1.0 / tiling_scale) : 1.0;
    float cs = cos(rotation_rad);
    float sn = sin(rotation_rad);
    vec2 r = vec2(planar.x * cs - planar.y * sn, planar.x * sn + planar.y * cs);
+    // Extents divide after the rotation, so a tile whose two sides differ stays a rotated rectangle
+    // instead of shearing. With a square tile the two orders agree exactly. The mirror is a sign on
+    // the same division, in the tile's own frame.
+    r *= mirror_sign() / tile_mm();
    // After the rotation, so the rotation stays a rotation rather than becoming a shear.
    r.y *= tex_aspect;
    return r + uv_offset;
@@ -237,9 +272,12 @@ void main()

    // World millimetres throughout, like the bake - see the 140 variant.
    vec3 triangle_normal = normalize(cross(dFdx(world_pos.xyz), dFdy(world_pos.xyz)));
-    vec3 tex_pos = world_pos.xyz - tex_anchor; // the frame the texture is projected in, as the bake does
+    vec3 tex_pos = tex_rot * (world_pos.xyz - tex_anchor); // the frame the texture is projected in, as the bake does
    if (volume_mirrored)
        triangle_normal = -triangle_normal;
+    // The same normal in that frame. triangle_normal itself stays in world, because the lighting at
+    // the end of this shader needs it there.
+    vec3 tex_normal = tex_rot * triangle_normal;

    // Where the colour is read from. Both branches below already compute the uv this fragment's
    // *height* came from - including the parallax-marched one on the triplanar path - and the colour
@@ -270,14 +308,14 @@ void main()
    } else if (weight > 0.0) {
        vec3 t, b;
        vec2 units_per_mm;
-        projection_axes(tex_pos, triangle_normal, t, b, units_per_mm);
+        projection_axes(tex_pos, tex_normal, t, b, units_per_mm);

        // Parallax occlusion mapping: march the view ray through the height shell and shade at the
        // first point where it drops below the displaced surface (see header).
        float amp      = (invert ? -1.0 : 1.0) * depth_mm * clamp(weight, 0.0, 1.0);
-        vec3  view_dir = normalize(eye_model_pos - tex_pos);
-        float v_dot_n  = dot(view_dir, triangle_normal);
-        vec2  uv       = project_uv(tex_pos, triangle_normal);
+        vec3  view_dir = normalize(tex_rot * eye_model_pos - tex_pos);
+        float v_dot_n  = dot(view_dir, tex_normal);
+        vec2  uv       = project_uv(tex_pos, tex_normal);

        // The shell the displaced surface lives inside, as signed heights along the normal. Taken from
        // both ends of h in [0, 1] so it stays correct for an inverted layer or a raised midlevel,
@@ -289,18 +327,18 @@ void main()
        // How far, in mm, sweeping the ray across the shell slides the sample point sideways. Below half
        // a texel there is no parallax to find and the march would be pure cost - which is the common
        // case of looking straight down at a surface.
-        float sweep = length(view_dir - triangle_normal * v_dot_n) * (h_hi - h_lo) / max(v_dot_n, 1e-4);
-        if (v_dot_n > 0.05 && sweep > 0.5 * tiling_scale * height_tex_texel.x) {
+        float sweep = length(view_dir - tex_normal * v_dot_n) * (h_hi - h_lo) / max(v_dot_n, 1e-4);
+        if (v_dot_n > 0.05 && sweep > 0.5 * min(tile_mm().x, tile_mm().y) * height_tex_texel.x) {
            // A point at ray parameter s (model_pos + view_dir * s) sits at height s * v_dot_n above the
            // undisplaced surface. Start at the top of the shell, where the ray is outside the surface
            // by construction, and step inward; the crossing is what this pixel actually sees.
            float s        = h_hi / v_dot_n;
            float ds       = (h_hi - h_lo) / (v_dot_n * float(PARALLAX_STEPS));
-            vec2  prev_uv  = project_uv(tex_pos + view_dir * s, triangle_normal);
+            vec2  prev_uv  = project_uv(tex_pos + view_dir * s, tex_normal);
            float prev_gap = h_hi - amp * (H_AT(prev_uv) - midlevel); // >= 0 by construction
            for (int i = 0; i < PARALLAX_STEPS; ++i) {
                s -= ds;
-                vec2  cur_uv = project_uv(tex_pos + view_dir * s, triangle_normal);
+                vec2  cur_uv = project_uv(tex_pos + view_dir * s, tex_normal);
                float gap    = s * v_dot_n - amp * (H_AT(cur_uv) - midlevel);
                if (gap <= 0.0) {
                    // Crossed between the last two samples - interpolating the hit is what stops it
@@ -322,18 +360,23 @@ void main()
        float hU = texture2D(height_tex, uv + vec2(0.0, height_tex_texel.y)).r;

        vec2 dh_duv = vec2((hR - hL) / (2.0 * height_tex_texel.x), (hU - hD) / (2.0 * height_tex_texel.y));
-        float inv_tiling = (tiling_scale > 1e-6) ? (1.0 / tiling_scale) : 1.0;
-        float amplitude  = (invert ? -1.0 : 1.0) * depth_mm * inv_tiling * clamp(weight, 0.0, 1.0);
+        vec2  tile       = tile_mm();
+        float amplitude  = (invert ? -1.0 : 1.0) * depth_mm * clamp(weight, 0.0, 1.0);

        float cs = cos(rotation_rad);
        float sn = sin(rotation_rad);
-        // One uv unit is tiling_scale mm along u but tiling_scale / tex_aspect mm along v, so the v
-        // component of the gradient carries the extra factor before being rotated back into t/b.
-        vec2  g     = vec2(dh_duv.x, dh_duv.y * tex_aspect);
+        // One uv unit is tile.x mm along u but tile.y / tex_aspect mm along v, so each component of
+        // the uv-space gradient carries its own factor before being rotated back into t/b.
+        // Each component carries its own extent and its own mirror sign, both of which project_uv()
+        // applied on the way in; without the sign a mirrored layer would light as though it were not.
+        vec2  ms    = mirror_sign();
+        vec2  g     = vec2(dh_duv.x * ms.x / tile.x, dh_duv.y * tex_aspect * ms.y / tile.y);
        // ...and back out of raw-projection units into millimetres along t / b; see the 140 variant.
        vec2  slope = amplitude * vec2(g.x * cs + g.y * sn, -g.x * sn + g.y * cs) * units_per_mm;

-        vec3 gradient = slope.x * t + slope.y * b;
+        // t and b came out of the texture frame, so the gradient is in it too and has to come back
+        // to world before it perturbs the normal the lighting uses.
+        vec3 gradient = tex_rot_inv * (slope.x * t + slope.y * b);
        gradient -= triangle_normal * dot(triangle_normal, gradient);
        triangle_normal = normalize(triangle_normal - gradient);
    }
@@ -353,7 +396,9 @@ void main()
    // Only the albedo - the specular term (intensity.y) stays white - so a coloured fragment reads as
    // the same material under the same light, and the relief this preview exists to show is unaffected.
    vec3 albedo = uniform_color.rgb;
-    if (palette_count > 0 && has_color_tex && have_uv && weight > 0.0)
+    bool uv_covered = tile_enabled ||
+                      (all(greaterThanEqual(color_uv, vec2(0.0))) && all(lessThan(color_uv, vec2(1.0))));
+    if (palette_count > 0 && has_color_tex && have_uv && weight > 0.0 && uv_covered)
        albedo = palette_rgb[nearest_palette_entry(texture2D(color_tex, color_uv).rgb)];
    gl_FragColor = vec4(vec3(intensity.y) + albedo * intensity.x, uniform_color.a);
 }
@@ -16,7 +16,16 @@ uniform bool volume_mirrored;
 uniform int   mode;
 uniform float checker_freq;
 uniform float tiling_scale;
+// Tile extent along v, in mm. Zero or negative means "the same as tiling_scale" - see
+// layer_tile_mm() on the CPU side, so an unset uniform behaves exactly as this shader always did.
+uniform float tiling_scale_v;
+// Mirror along one tile axis; false by default, so an unset uniform is the old behaviour.
+uniform bool  mirror_u;
+uniform bool  mirror_v;
 uniform vec3  tex_anchor; // the volume's origin in world space
+// The placement's rotation, so this overlay projects the same frame the bake does. Identity, which
+// is what an unset uniform gives, leaves the old world-aligned behaviour.
+uniform mat3  tex_rot;    // world -> texture frame
 uniform float rotation_rad;
 uniform vec2  uv_offset;
 uniform bool  use_vertex_uv;
@@ -79,13 +88,30 @@ vec2 projection_raw(vec3 p, vec3 n)
    return vec2(box_face_sign(n.z) * p.x, -p.y);
 }

+
+// Tile extents in mm, u then v, with the v fallback layer_tile_mm() applies.
+vec2 tile_mm()
+{
+    float su = (tiling_scale > 1e-6) ? tiling_scale : 1.0;
+    return vec2(su, (tiling_scale_v > 1e-6) ? tiling_scale_v : su);
+}
+
+// +1 or -1 per axis, matching layer_mirror_sign() on the CPU side.
+vec2 mirror_sign()
+{
+    return vec2(mirror_u ? -1.0 : 1.0, mirror_v ? -1.0 : 1.0);
+}
+
 vec2 project_uv(vec3 p, vec3 n)
 {
    vec2 planar = projection_raw(p, n);
-    planar *= (tiling_scale > 1e-6) ? (1.0 / tiling_scale) : 1.0;
    float cs = cos(rotation_rad);
    float sn = sin(rotation_rad);
    vec2 r = vec2(planar.x * cs - planar.y * sn, planar.x * sn + planar.y * cs);
+    // Extents divide after the rotation, so a tile whose two sides differ stays a rotated rectangle
+    // instead of shearing. With a square tile the two orders agree exactly. The mirror is a sign on
+    // the same division, in the tile's own frame.
+    r *= mirror_sign() / tile_mm();
    r.y *= tex_aspect; // after the rotation, so the rotation stays a rotation rather than a shear
    return r + uv_offset;
 }
@@ -105,7 +131,7 @@ void main()

    // World space anchored at the volume's origin, like the bake and the shaded preview.
    vec3 triangle_normal = normalize(cross(dFdx(world_pos.xyz), dFdy(world_pos.xyz)));
-    vec3 tex_pos = world_pos.xyz - tex_anchor;
+    vec3 tex_pos = tex_rot * (world_pos.xyz - tex_anchor);
    if (volume_mirrored)
        triangle_normal = -triangle_normal;

@@ -113,7 +139,7 @@ void main()
    if (mode == 1) {
        base = heatmap(distortion);
    } else {
-        vec2 uv = use_vertex_uv ? vertex_uv : project_uv(tex_pos, triangle_normal);
+        vec2 uv = use_vertex_uv ? vertex_uv : project_uv(tex_pos, tex_rot * triangle_normal);
        vec2 c  = floor(uv * checker_freq);
        float check = mod(c.x + c.y, 2.0);
        base = (check < 0.5) ? vec3(0.22, 0.23, 0.26) : vec3(0.82, 0.83, 0.86);
@@ -95,6 +95,11 @@ uniform int       palette_b[64];
 uniform float     prefer_pure_de; // PREFER_PURE_DE: how much better than a single filament a mix must be
 uniform sampler2D color_tex;     // the layer's colour image, sampled at the same uv as the height
 uniform bool      has_color_tex;
+// False means the texture is a single placement, not a repeat. The sampler's wrap mode can express
+// that for the *height* - a zero border reads as no displacement - but not for colour, because a
+// zero border is indistinguishable from the image genuinely being black there. So the uv is tested
+// instead, which is what sample_layer_color() does on the CPU side.
+uniform bool      tile_enabled;
 uniform bool volume_mirrored;

 uniform mat4 view_model_matrix;
@@ -104,6 +109,14 @@ uniform sampler2D height_tex;
 uniform vec2      height_tex_texel; // (1/width, 1/height) of height_tex
 uniform float      depth_mm;
 uniform float      tiling_scale;
+// Tile extent along v, in mm. Zero or negative means "the same as tiling_scale" - the square tile
+// every layer had before the two axes could differ - which is also what layer_tile_mm() does on the
+// CPU side, so an unset uniform behaves exactly as this shader always did.
+uniform float      tiling_scale_v;
+// Mirror the texture along one axis of the tile. Both default to false, which GLSL guarantees for an
+// uninitialised bool uniform, so a shader whose caller has not set them behaves exactly as before.
+uniform bool       mirror_u;
+uniform bool       mirror_v;
 // Height map width / height. Scales the v axis so a non-square image keeps its proportions
 // instead of being squeezed into a square tile - mirrors libslic3r's apply_uv_transform().
 uniform float      tex_aspect;
@@ -113,6 +126,12 @@ uniform bool       invert;
 uniform float      midlevel;      // the height that means "don't move"; needed by the parallax step
 uniform vec3       eye_model_pos; // camera position in the texture frame (world minus tex_anchor)
 uniform vec3       tex_anchor;    // the volume's origin in world space: the texture frame's origin
+// The placement's rotation and its inverse, so this shader turns a world position into the texture
+// frame exactly as texture_displacement_bake_frame() does. Both are passed rather than one
+// transposed here, because GLSL 110 has no transpose(). Identity leaves the old world-aligned
+// behaviour, which is what an unset uniform gives.
+uniform mat3       tex_rot;     // world -> texture frame
+uniform mat3       tex_rot_inv; // texture frame -> world
 uniform bool       use_vertex_uv; // true: sample at vertex_uv with a derived tangent frame (LSCM)
 // A 2x3 affine (columns packed as lin = (m00, m01, m10, m11), tr = (m02, m12)) applied to the uv of
 // the island currently being dragged in the UV editor (island_active > 0.5). Identity when nothing is
@@ -228,13 +247,29 @@ void projection_axes(vec3 p, vec3 n, out vec3 t, out vec3 b, out vec2 units_per_
    }
 }

+// Tile extents in mm, u then v, with the v fallback layer_tile_mm() applies.
+vec2 tile_mm()
+{
+    float su = (tiling_scale > 1e-6) ? tiling_scale : 1.0;
+    return vec2(su, (tiling_scale_v > 1e-6) ? tiling_scale_v : su);
+}
+
+// +1 or -1 per axis, matching layer_mirror_sign() on the CPU side.
+vec2 mirror_sign()
+{
+    return vec2(mirror_u ? -1.0 : 1.0, mirror_v ? -1.0 : 1.0);
+}
+
 vec2 project_uv(vec3 p, vec3 n)
 {
    vec2 planar = projection_raw(p, n);
-    planar *= (tiling_scale > 1e-6) ? (1.0 / tiling_scale) : 1.0;
    float cs = cos(rotation_rad);
    float sn = sin(rotation_rad);
    vec2 r = vec2(planar.x * cs - planar.y * sn, planar.x * sn + planar.y * cs);
+    // Extents divide after the rotation, so a tile whose two sides differ stays a rotated rectangle
+    // instead of shearing. With a square tile the two orders agree exactly. The mirror is a sign on
+    // the same division, in the tile's own frame.
+    r *= mirror_sign() / tile_mm();
    // After the rotation, so the rotation stays a rotation rather than becoming a shear.
    r.y *= tex_aspect;
    return r + uv_offset;
@@ -305,9 +340,12 @@ void main()
    // printed part whatever the instance's scale or rotation, so the preview has to project from the
    // world position and perturb the world normal.
    vec3 triangle_normal = normalize(cross(dFdx(world_pos.xyz), dFdy(world_pos.xyz)));
-    vec3 tex_pos = world_pos.xyz - tex_anchor; // the frame the texture is projected in, as the bake does
+    vec3 tex_pos = tex_rot * (world_pos.xyz - tex_anchor); // the frame the texture is projected in, as the bake does
    if (volume_mirrored)
        triangle_normal = -triangle_normal;
+    // The same normal in that frame. triangle_normal itself stays in world, because the lighting at
+    // the end of this shader needs it there.
+    vec3 tex_normal = tex_rot * triangle_normal;

    // Where the colour is read from. Both branches below already compute the uv this fragment's
    // *height* came from - including the parallax-marched one on the triplanar path - and the colour
@@ -351,14 +389,14 @@ void main()
        // closed-form uv here, unlike the LSCM case.
        vec3 t, b;
        vec2 units_per_mm;
-        projection_axes(tex_pos, triangle_normal, t, b, units_per_mm);
+        projection_axes(tex_pos, tex_normal, t, b, units_per_mm);

        // Parallax occlusion mapping: march the view ray through the height shell and shade at the
        // first point where it drops below the displaced surface (see header).
        float amp      = (invert ? -1.0 : 1.0) * depth_mm * clamp(weight, 0.0, 1.0);
-        vec3  view_dir = normalize(eye_model_pos - tex_pos);
-        float v_dot_n  = dot(view_dir, triangle_normal);
-        vec2  uv       = project_uv(tex_pos, triangle_normal);
+        vec3  view_dir = normalize(tex_rot * eye_model_pos - tex_pos);
+        float v_dot_n  = dot(view_dir, tex_normal);
+        vec2  uv       = project_uv(tex_pos, tex_normal);

        // The shell the displaced surface lives inside, as signed heights along the normal. Taken from
        // both ends of h in [0, 1] so it stays correct for an inverted layer or a raised midlevel,
@@ -370,18 +408,18 @@ void main()
        // How far, in mm, sweeping the ray across the shell slides the sample point sideways. Below half
        // a texel there is no parallax to find and the march would be pure cost - which is the common
        // case of looking straight down at a surface.
-        float sweep = length(view_dir - triangle_normal * v_dot_n) * (h_hi - h_lo) / max(v_dot_n, 1e-4);
-        if (v_dot_n > 0.05 && sweep > 0.5 * tiling_scale * height_tex_texel.x) {
+        float sweep = length(view_dir - tex_normal * v_dot_n) * (h_hi - h_lo) / max(v_dot_n, 1e-4);
+        if (v_dot_n > 0.05 && sweep > 0.5 * min(tile_mm().x, tile_mm().y) * height_tex_texel.x) {
            // A point at ray parameter s (model_pos + view_dir * s) sits at height s * v_dot_n above the
            // undisplaced surface. Start at the top of the shell, where the ray is outside the surface
            // by construction, and step inward; the crossing is what this pixel actually sees.
            float s        = h_hi / v_dot_n;
            float ds       = (h_hi - h_lo) / (v_dot_n * float(PARALLAX_STEPS));
-            vec2  prev_uv  = project_uv(tex_pos + view_dir * s, triangle_normal);
+            vec2  prev_uv  = project_uv(tex_pos + view_dir * s, tex_normal);
            float prev_gap = h_hi - amp * (H_AT(prev_uv) - midlevel); // >= 0 by construction
            for (int i = 0; i < PARALLAX_STEPS; ++i) {
                s -= ds;
-                vec2  cur_uv = project_uv(tex_pos + view_dir * s, triangle_normal);
+                vec2  cur_uv = project_uv(tex_pos + view_dir * s, tex_normal);
                float gap    = s * v_dot_n - amp * (H_AT(cur_uv) - midlevel);
                if (gap <= 0.0) {
                    // Crossed between the last two samples - interpolating the hit is what stops it
@@ -405,23 +443,28 @@ void main()
        // Central difference, per uv unit (not per texel).
        vec2 dh_duv = vec2((hR - hL) / (2.0 * height_tex_texel.x), (hU - hD) / (2.0 * height_tex_texel.y));

-        // uv -> mm is 1/tiling_scale for the triplanar projection, so this turns the uv-space
-        // gradient into a real surface slope.
-        float inv_tiling = (tiling_scale > 1e-6) ? (1.0 / tiling_scale) : 1.0;
-        float amplitude  = (invert ? -1.0 : 1.0) * depth_mm * inv_tiling * clamp(weight, 0.0, 1.0);
+        // uv -> mm is the reciprocal of the tile extents, applied per component below, which is what
+        // turns the uv-space gradient into a real surface slope.
+        vec2  tile       = tile_mm();
+        float amplitude  = (invert ? -1.0 : 1.0) * depth_mm * clamp(weight, 0.0, 1.0);
        // uv was rotated by project_uv() while t/b are the unrotated model axes, so rotate the
        // gradient back into the axes' frame.
        float cs = cos(rotation_rad);
        float sn = sin(rotation_rad);
-        // One uv unit is tiling_scale mm along u but tiling_scale / tex_aspect mm along v, so the v
-        // component of the gradient carries the extra factor before being rotated back into t/b.
-        vec2  g     = vec2(dh_duv.x, dh_duv.y * tex_aspect);
+        // One uv unit is tile.x mm along u but tile.y / tex_aspect mm along v, so each component of
+        // the uv-space gradient carries its own factor before being rotated back into t/b.
+        // Each component carries its own extent and its own mirror sign, both of which project_uv()
+        // applied on the way in; without the sign a mirrored layer would light as though it were not.
+        vec2  ms    = mirror_sign();
+        vec2  g     = vec2(dh_duv.x * ms.x / tile.x, dh_duv.y * tex_aspect * ms.y / tile.y);
        // ...and back out of raw-projection units into millimetres of travel along t / b, which is a
        // no-op except for the spherical longitude (see projection_axes()). After the inverse rotation,
        // because units_per_mm is expressed in the t/b frame rather than in uv.
        vec2  slope = amplitude * vec2(g.x * cs + g.y * sn, -g.x * sn + g.y * cs) * units_per_mm;

-        vec3 gradient = slope.x * t + slope.y * b;
+        // t and b came out of the texture frame, so the gradient is in it too and has to come back
+        // to world before it perturbs the normal the lighting uses.
+        vec3 gradient = tex_rot_inv * (slope.x * t + slope.y * b);
        gradient -= triangle_normal * dot(triangle_normal, gradient);
        triangle_normal = normalize(triangle_normal - gradient);
    }
@@ -441,7 +484,9 @@ void main()
    // Only the albedo - the specular term (intensity.y) stays white - so a coloured fragment reads as
    // the same material under the same light, and the relief this preview exists to show is unaffected.
    vec3 albedo = uniform_color.rgb;
-    if (palette_count > 0 && has_color_tex && have_uv && weight > 0.0)
+    bool uv_covered = tile_enabled ||
+                      (all(greaterThanEqual(color_uv, vec2(0.0))) && all(lessThan(color_uv, vec2(1.0))));
+    if (palette_count > 0 && has_color_tex && have_uv && weight > 0.0 && uv_covered)
        albedo = palette_rgb[nearest_palette_entry(texture(color_tex, color_uv).rgb)];
    out_color = vec4(vec3(intensity.y) + albedo * intensity.x, uniform_color.a);
 }
@@ -25,7 +25,16 @@ uniform bool volume_mirrored;
 uniform int   mode;          // 0 checker, 1 distortion
 uniform float checker_freq;  // checker squares per uv unit (one uv unit == one texture tile)
 uniform float tiling_scale;
+// Tile extent along v, in mm. Zero or negative means "the same as tiling_scale" - see
+// layer_tile_mm() on the CPU side, so an unset uniform behaves exactly as this shader always did.
+uniform float tiling_scale_v;
+// Mirror along one tile axis; false by default, so an unset uniform is the old behaviour.
+uniform bool  mirror_u;
+uniform bool  mirror_v;
 uniform vec3  tex_anchor; // the volume's origin in world space
+// The placement's rotation, so this overlay projects the same frame the bake does. Identity, which
+// is what an unset uniform gives, leaves the old world-aligned behaviour.
+uniform mat3  tex_rot;    // world -> texture frame
 uniform float rotation_rad;
 uniform vec2  uv_offset;
 uniform bool  use_vertex_uv;
@@ -90,13 +99,30 @@ vec2 projection_raw(vec3 p, vec3 n)
    return vec2(box_face_sign(n.z) * p.x, -p.y);
 }

+
+// Tile extents in mm, u then v, with the v fallback layer_tile_mm() applies.
+vec2 tile_mm()
+{
+    float su = (tiling_scale > 1e-6) ? tiling_scale : 1.0;
+    return vec2(su, (tiling_scale_v > 1e-6) ? tiling_scale_v : su);
+}
+
+// +1 or -1 per axis, matching layer_mirror_sign() on the CPU side.
+vec2 mirror_sign()
+{
+    return vec2(mirror_u ? -1.0 : 1.0, mirror_v ? -1.0 : 1.0);
+}
+
 vec2 project_uv(vec3 p, vec3 n)
 {
    vec2 planar = projection_raw(p, n);
-    planar *= (tiling_scale > 1e-6) ? (1.0 / tiling_scale) : 1.0;
    float cs = cos(rotation_rad);
    float sn = sin(rotation_rad);
    vec2 r = vec2(planar.x * cs - planar.y * sn, planar.x * sn + planar.y * cs);
+    // Extents divide after the rotation, so a tile whose two sides differ stays a rotated rectangle
+    // instead of shearing. With a square tile the two orders agree exactly. The mirror is a sign on
+    // the same division, in the tile's own frame.
+    r *= mirror_sign() / tile_mm();
    r.y *= tex_aspect; // after the rotation, so the rotation stays a rotation rather than a shear
    return r + uv_offset;
 }
@@ -117,7 +143,7 @@ void main()

    // World space anchored at the volume's origin, like the bake and the shaded preview.
    vec3 triangle_normal = normalize(cross(dFdx(world_pos.xyz), dFdy(world_pos.xyz)));
-    vec3 tex_pos = world_pos.xyz - tex_anchor;
+    vec3 tex_pos = tex_rot * (world_pos.xyz - tex_anchor);
    if (volume_mirrored)
        triangle_normal = -triangle_normal;

@@ -125,7 +151,7 @@ void main()
    if (mode == 1) {
        base = heatmap(distortion);
    } else {
-        vec2 uv = use_vertex_uv ? vertex_uv : project_uv(tex_pos, triangle_normal);
+        vec2 uv = use_vertex_uv ? vertex_uv : project_uv(tex_pos, tex_rot * triangle_normal);
        vec2 c  = floor(uv * checker_freq);
        float check = mod(c.x + c.y, 2.0);
        // Two distinct greys, plus a faint tint on one set so orientation is readable at a glance.
@@ -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
@@ -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();

@@ -1,6 +1,7 @@
 #include "TextureDisplacement.hpp"

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

    // `normalized_uv` drops the two steps that only mean something for a coordinate measured on the
@@ -2237,7 +2176,18 @@ struct UVTransform
    // rotation and offset. See apply_uv_transform(); TextureProjectionMethod::ModelUV is what needs it.
    UVTransform(const TextureDisplacementLayer &layer, float aspect_, bool normalized_uv = false)
    {
-        scale = (normalized_uv || layer.tiling_scale <= 1e-6f) ? 1.f : (1.f / layer.tiling_scale);
+        // The mirror folds into the reciprocal: it is a negation of the same coordinate, so there is
+        // nothing to do per sample beyond carrying the sign here. A normalized uv has no millimetre
+        // tiling to divide by, but a mirror is still a mirror, so the sign applies either way.
+        const Vec2f sign = layer_mirror_sign(layer);
+        if (normalized_uv) {
+            inv_u = sign.x();
+            inv_v = sign.y();
+        } else {
+            const Vec2f tile = layer_tile_mm(layer);
+            inv_u = sign.x() / tile.x();
+            inv_v = sign.y() / tile.y();
+        }
        const float rad = layer.rotation_deg * float(M_PI) / 180.f;
        cs     = std::cos(rad);
        sn     = std::sin(rad);
@@ -2246,9 +2196,11 @@ struct UVTransform
    }
    Vec2f operator()(const Vec2f &planar) const
    {
-        const Vec2f scaled = planar * scale;
-        Vec2f       rotated(scaled.x() * cs - scaled.y() * sn, scaled.x() * sn + scaled.y() * cs);
-        // See apply_uv_transform() for why the aspect correction follows the rotation.
+        // See apply_uv_transform() for why both the tile extents and the aspect correction follow
+        // the rotation rather than preceding it.
+        Vec2f rotated(planar.x() * cs - planar.y() * sn, planar.x() * sn + planar.y() * cs);
+        rotated.x() *= inv_u;
+        rotated.y() *= inv_v;
        if (aspect > 0.f && aspect != 1.f)
            rotated.y() *= aspect;
        return rotated + offset;
@@ -2268,26 +2220,43 @@ inline Vec3f triplanar_weights(const Vec3f &normal)

 Vec2f apply_uv_transform(const Vec2f &planar, const TextureDisplacementLayer &layer, float aspect, bool normalized_uv)
 {
-    // A uv that is already normalized has no millimetre scale to divide by and no aspect to correct -
-    // see the header. UVTransform does the same, and the two must stay in step.
-    const float scale = (normalized_uv || layer.tiling_scale <= 1e-6f) ? 1.f : (1.f / layer.tiling_scale);
-    const Vec2f scaled = planar * scale;
-
    const float rad = layer.rotation_deg * float(M_PI) / 180.f;
    const float cs  = std::cos(rad);
    const float sn  = std::sin(rad);
-    Vec2f       rotated(scaled.x() * cs - scaled.y() * sn, scaled.x() * sn + scaled.y() * cs);
+    Vec2f       rotated(planar.x() * cs - planar.y() * sn, planar.x() * sn + planar.y() * cs);
+
+    // The tile extents. Dividing here rather than before the rotation is what makes a non-square
+    // tile a rotated *rectangle* on the surface: scaling the two axes of an already-rotated
+    // coordinate by different amounts would be a shear, so the rotation has to come first and the
+    // extents divide in the tile's own frame. With a square tile the two orders agree exactly,
+    // R being linear - which is why this is not a change in behaviour for any existing layer.
+    //
+    // The mirror rides along as a sign on the same division. It is in the tile's own frame too, so
+    // it mirrors along the tile's axes rather than the world's, and because the offset is what
+    // positions the tile, mirroring about the tile's middle is a matter of the offset the gizmo
+    // writes alongside it, not of anything here.
+    // A uv that is already normalized has no millimetre scale to divide by - see the header - but it
+    // can still be mirrored, so the sign is applied in both cases and only the extents are skipped.
+    // UVTransform does the same, and the two must stay in step.
+    const Vec2f sign = layer_mirror_sign(layer);
+    if (normalized_uv) {
+        rotated.x() *= sign.x();
+        rotated.y() *= sign.y();
+    } else {
+        const Vec2f tile = layer_tile_mm(layer);
+        rotated.x() *= sign.x() / tile.x();
+        rotated.y() *= sign.y() / tile.y();
+    }

    // Non-square textures. Without this the [0,1] square of uv covers the whole image whatever its
-    // proportions, so a 2:1 image is squeezed into a square tile and every feature in it comes out
-    // half as wide as it should be. `tiling_scale` is the tile's size along u; the tile is
-    // `tiling_scale * height / width` mm along v, which is exactly what keeps texels square - so
-    // dividing v by that extent is the same as multiplying it by width / height. A square texture has
-    // aspect 1 and is untouched, which is why this changes nothing for the shipped library.
+    // proportions, so a 2:1 image is squeezed into one tile and every feature in it comes out half
+    // as wide as it should be. The tile is `layer_tile_mm().y() * height / width` mm along v, which
+    // is exactly what keeps texels square - so dividing v by that extent is the same as multiplying
+    // it by width / height. A square texture has aspect 1 and is untouched, which is why this
+    // changes nothing for the shipped library.
    //
-    // Applied after the rotation, not before: scaling one axis of an already-rotated coordinate is a
-    // shear, and doing it the other way round would make "Rotation" skew the pattern instead of
-    // turning it.
+    // Applied after the rotation, like the extents, and for the same reason: scaling one axis of an
+    // already-rotated coordinate before turning it would be a shear.
    if (!normalized_uv && aspect > 0.f && aspect != 1.f)
        rotated.y() *= aspect;

@@ -3631,13 +3600,36 @@ void texture_displacement_patch_frame(const indexed_triangle_set &patch, const s
           (an.y() <= an.x() && an.y() <= an.z()) ? Vec3f::UnitY() : Vec3f::UnitZ();
 }

+Matrix3d texture_displacement_frame_rotation(const Transform3d &volume_to_world)
+{
+    // Separated out by polar decomposition rather than by assuming the linear part is a clean
+    // rotation times a scale: a sheared or mirrored placement is legal here. A reflection is left
+    // behind with the scale on purpose, so a mirrored instance still makes the bake frame's
+    // determinant negative and the bake still knows to flip the normals it derives.
+    const Matrix3d                   linear = volume_to_world.linear();
+    Eigen::JacobiSVD<Matrix3d>       svd(linear, Eigen::ComputeFullU | Eigen::ComputeFullV);
+    Matrix3d                         rotation = svd.matrixU() * svd.matrixV().transpose();
+    if (rotation.determinant() < 0.0) {
+        Matrix3d u = svd.matrixU();
+        u.col(2) *= -1.0;
+        rotation = u * svd.matrixV().transpose();
+    }
+    return rotation.transpose(); // world -> texture frame
+}
+
 Transform3d texture_displacement_bake_frame(const Transform3d &volume_to_world)
 {
-    // World orientation and scale, but the origin moved to where the volume's own origin sits: the
-    // texture then rides with the model when it is moved about the plate (and a single, untiled stamp
-    // starts on the model rather than at the plate's corner), while a tile is still `tiling_scale`
-    // printed millimetres whatever the instance's scale.
-    return Eigen::Translation3d(-volume_to_world.translation()) * volume_to_world;
+    // The model's own orientation, world scale, and the origin moved to where the volume's origin
+    // sits. So the texture rides with the model however it is moved *and* however it is turned,
+    // while a tile is still `tiling_scale` printed millimetres whatever the instance's scale, and a
+    // single untiled stamp starts on the model rather than at the plate's corner.
+    //
+    // Orientation used to come from the world too, which meant turning a part on the plate slid the
+    // decoration across its surface. Turning a part is a print-time decision - clearance, supports,
+    // warping - and it should not be a design one.
+    Transform3d unrotate = Transform3d::Identity();
+    unrotate.linear()    = texture_displacement_frame_rotation(volume_to_world);
+    return unrotate * Eigen::Translation3d(-volume_to_world.translation()) * volume_to_world;
 }

 Transform3d texture_displacement_volume_to_world(const ModelVolume &volume)
@@ -5848,7 +5840,13 @@ std::string texture_displacement_layers_to_json(const std::vector<TextureDisplac

        j["depth_mm"]     = l.depth_mm;
        j["tiling_scale"] = l.tiling_scale;
-        j["rotation_deg"] = l.rotation_deg;
+        // The v extent and the mirroring. Written unconditionally, including the <= 0 "same as u"
+        // sentinel, so a project says plainly that the tile was square rather than leaving a reader
+        // to infer it from a missing key.
+        j["tiling_scale_v"] = l.tiling_scale_v;
+        j["mirror_u"]       = l.mirror_u;
+        j["mirror_v"]       = l.mirror_v;
+        j["rotation_deg"]   = l.rotation_deg;
        j["offset"]       = vec2_to_json(l.offset);
        j["invert"]       = l.invert;
        j["midlevel"]     = l.midlevel;
@@ -5956,6 +5954,12 @@ bool texture_displacement_layers_from_json(const std::string

                read(j, "depth_mm", l.depth_mm);
                read(j, "tiling_scale", l.tiling_scale);
+                // Absent in a project written before the tile could be rectangular or mirrored, and
+                // then each keeps its default: -1 for the v extent, which layer_tile_mm() reads as
+                // "square", and false for the mirrors. So an older project loads as what it was.
+                read(j, "tiling_scale_v", l.tiling_scale_v);
+                read(j, "mirror_u", l.mirror_u);
+                read(j, "mirror_v", l.mirror_v);
                read(j, "rotation_deg", l.rotation_deg);
                if (const auto o = j.find("offset"); o != j.end())
                    l.offset = vec2_from_json(*o, l.offset);
@@ -225,7 +225,17 @@ struct TextureDisplacementLayer
    std::shared_ptr<std::vector<unsigned char>> image_data;

    float depth_mm     = 0.4f; // maximum displacement along the surface normal, in mm
-    float tiling_scale = 12.5f; // size of one texture tile, in mm
+    float tiling_scale = 12.5f; // size of one texture tile along u, in mm
+    // Size of one tile along v, in mm. Anything <= 0 means "whatever tiling_scale is", which is both
+    // the default and what a layer created before the tile could be non-square meant - so an older
+    // undo snapshot still comes back as the square tile it was.
+    float tiling_scale_v = -1.f;
+    // Mirror the texture along one axis of the tile. Set by dragging a width or height handle back
+    // through the tile's middle, which is how a side handle behaves in an image editor: the extent
+    // cannot go negative, so the sign lives here instead. Both default to off, which is what every
+    // layer written before this meant.
+    bool  mirror_u = false;
+    bool  mirror_v = false;
    float rotation_deg = 0.f;
    Vec2f offset       = Vec2f::Zero();
    bool  invert       = false;
@@ -362,7 +372,8 @@ struct TextureDisplacementLayer
           static_cast<int>(tile_method), static_cast<int>(projection_method), lscm_seam_angle_deg, islands,
           static_cast<int>(blend_mode), midlevel, island_padding_mm, lscm_seam_edges, view_project_right,
           view_project_up, smoothing, edge_smoothing, edge_smoothing_amount, auto_connect_islands, island_groups,
-           lscm_uv_overrides, view_project_projective, view_project_matrix, color_enabled);
+           lscm_uv_overrides, view_project_projective, view_project_matrix, color_enabled, tiling_scale_v,
+           mirror_u, mirror_v);
    }
    template<class Archive> void load(Archive &ar)
    {
@@ -374,7 +385,7 @@ struct TextureDisplacementLayer
           tile_method_int, projection_method_int, lscm_seam_angle_deg, islands, blend_mode_int, midlevel,
           island_padding_mm, lscm_seam_edges, view_project_right, view_project_up, smoothing, edge_smoothing,
           edge_smoothing_amount, auto_connect_islands, island_groups, lscm_uv_overrides, view_project_projective,
-           view_project_matrix, color_enabled);
+           view_project_matrix, color_enabled, tiling_scale_v, mirror_u, mirror_v);
        image_data        = blob.empty() ? nullptr : std::make_shared<std::vector<unsigned char>>(blob.begin(), blob.end());
        tile_method       = static_cast<TextureTileMethod>(tile_method_int);
        projection_method = static_cast<TextureProjectionMethod>(projection_method_int);
@@ -383,6 +394,25 @@ struct TextureDisplacementLayer
 };


+// The layer's tile extents in mm, u first. The v extent falls back to the u one whenever
+// tiling_scale_v is unset, so "unset means square" is written down once and every consumer - the
+// bake, the preview shaders, the UV pane and the placement gizmo - agrees on what a layer with no
+// v extent means.
+inline Vec2f layer_tile_mm(const TextureDisplacementLayer &layer)
+{
+    const float su = (layer.tiling_scale > 1e-6f) ? layer.tiling_scale : 1.f;
+    return Vec2f(su, (layer.tiling_scale_v > 1e-6f) ? layer.tiling_scale_v : su);
+}
+
+// +1 or -1 per axis, for the layer's mirroring. A separate factor from the extents rather than a
+// signed extent: the extents are a size the panel shows and the refinement measures texels against,
+// and letting one of them go negative would mean every one of those places had to remember to take
+// the magnitude.
+inline Vec2f layer_mirror_sign(const TextureDisplacementLayer &layer)
+{
+    return Vec2f(layer.mirror_u ? -1.f : 1.f, layer.mirror_v ? -1.f : 1.f);
+}
+
 // Settings that apply to the whole layer stack rather than to one layer, held per ModelVolume next
 // to texture_displacement_layers and consumed by build_texture_displacement().
 struct TextureDisplacementOptions
@@ -504,15 +534,6 @@ struct TextureDetail
    // verdict: a "flat-colour" image (tiles, logos, camouflage) whose colours should each print in a
    // single filament, versus a photograph or gradient where interleaved filament mixes pay off.
    float flat_share  = 0.f;
-    // Share of the image's principal colour axis that actually carries pixels, in 32 steps. A ramp
-    // covers it end to end; a few flat colours sit in spikes with gaps between them. The histogram
-    // above cannot tell those apart - a two-colour gradient occupies as few bins as the two colours
-    // on their own - so both are needed before an image counts as flat.
-    //
-    // Zero when there was nothing to measure: an image of one colour, or too few pixels to fit an
-    // axis through. That is the right default, because it leaves the flat-share test deciding on its
-    // own, exactly as it did before this signal existed.
-    float axis_coverage = 0.f;
    bool  flat_colors = false;
 };
 TextureDetail analyze_texture_detail(const TextureDisplacementLayer &layer);
@@ -677,14 +698,19 @@ Vec2f project_planar(const Vec3f &position, const Vec3f &normal);
 // projection method, without going through project_texture_displacement_uv()'s own dispatch
 // (which only knows how to compute the *analytic* methods from a single vertex + normal).
 // `aspect` is the height map's width / height. It scales the v axis so a non-square image is not
-// squeezed into a square tile: `tiling_scale` is the tile's size along u, and the tile is
-// `tiling_scale * height / width` mm along v, which keeps texels square. 1 (the default) is the
-// square case and leaves the coordinate exactly as it always was.
+// squeezed into a square tile: the tile is `layer_tile_mm().y() * height / width` mm along v, which
+// keeps texels square. 1 (the default) is the square case and leaves the coordinate exactly as it
+// always was.
+//
+// The tile extents divide *after* the rotation, not before. With one extent that made no difference
+// (R is linear, so R(p / s) == R(p) / s), but with two it is what keeps a non-square tile a rotated
+// rectangle on the surface instead of a sheared parallelogram. The layer's mirroring is a sign on
+// that same division.
 //
 // `normalized_uv` says the coordinate is already a uv rather than a millimetre measurement on the
-// model - which is what TextureProjectionMethod::ModelUV hands in. Then neither the tiling scale (mm
+// model - which is what TextureProjectionMethod::ModelUV hands in. Then neither the tile extents (mm
 // per tile is meaningless for it) nor the aspect correction (the artist's layout already accounts for
-// the image's proportions) applies, and only the rotation and offset are left.
+// the image's proportions) applies, and only the rotation, the mirroring and the offset are left.
 Vec2f apply_uv_transform(const Vec2f &planar, const TextureDisplacementLayer &layer, float aspect = 1.f,
                         bool normalized_uv = false);

@@ -1056,6 +1082,10 @@ indexed_triangle_set build_texture_displacement(const indexed_triangle_set
 Transform3d texture_displacement_volume_to_world(const ModelVolume &volume);
 // The frame the bake and the previews project the texture in: `volume_to_world` with its translation
 // removed, i.e. world orientation and scale about the volume's own origin. See build_texture_displacement().
+// The rotation that carries a world direction into the texture's frame, i.e. the inverse of the
+// placement's own rotation. Exposed because the preview shaders rebuild the frame themselves from a
+// world position and have to turn it the same way the bake does, or the two disagree.
+Matrix3d texture_displacement_frame_rotation(const Transform3d &volume_to_world);
 Transform3d texture_displacement_bake_frame(const Transform3d &volume_to_world);

 // Area-weighted vertex normals of `its` - the directions the bake both projects and displaces along.
@@ -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>
@@ -1963,11 +1966,6 @@ ColorPickerPopup::ColorPickerPopup(wxWindow* parent)
    sizer_custom->Add(m_ts_stbitmap_custom, 0, wxEXPAND, 0);
    m_custom_cp->Layout();

-    m_clrData = new wxColourData();
-    m_clrData->SetChooseFull(true);
-    m_clrData->SetChooseAlpha(false);
-
-
    m_sizer_box->Add(0, 0, 0, wxTOP, FromDIP(10));
    m_sizer_box->Add(m_sizer_ams, 1, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
    m_sizer_box->Add(m_ams_fg_sizer, 0, wxEXPAND|wxLEFT|wxRIGHT, FromDIP(10));
@@ -1991,46 +1989,34 @@ ColorPickerPopup::ColorPickerPopup(wxWindow* parent)
    wxGetApp().UpdateDarkUIWin(this);
 }

-void ColorPickerPopup::on_custom_clr_picker(wxMouseEvent& event)
+void ColorPickerPopup::on_custom_clr_picker(wxMouseEvent& /*event*/)
 {
-    std::vector<std::string> colors = wxGetApp().app_config->get_custom_color_from_config();
-    for (int i = 0; i < colors.size(); i++) {
-        m_clrData->SetCustomColour(i, string_to_wxColor(colors[i]));
+    const bool was_shown = IsShown();
+    std::optional<wxColour> picker_color;
+    {
+        const ColorRGBA initial(m_def_col.Red(), m_def_col.Green(), m_def_col.Blue(), static_cast<unsigned char>(255));
+        // Snapshot the custom control's anchor before releasing the transient popup grab.
+        ColorPickerDialog dialog(GetParent(), initial, {}, false, m_custom_cp);
+        Dismiss();
+        if (dialog.ShowModal() == wxID_OK && dialog.selection()) {
+            const auto& result = std::get<ColorRGBA>(*dialog.selection());
+            picker_color = wxColour(static_cast<unsigned char>(std::lround(result.r() * 255.f)),
+                                    static_cast<unsigned char>(std::lround(result.g() * 255.f)),
+                                    static_cast<unsigned char>(std::lround(result.b() * 255.f)));
+        }
+    } // Destroy the modal before restoring the first-level popup and its focus/grab.
+    if (!picker_color) {
+        if (was_shown) Popup();
+        return;
    }
-    auto clr_dialog = new wxColourDialog(nullptr, m_clrData);
-    wxColour picker_color;

-    if (clr_dialog->ShowModal() == wxID_OK) {
-        m_clrData = &(clr_dialog->GetColourData());
-        if (colors.size() != CUSTOM_COLOR_COUNT) {
-            colors.resize(CUSTOM_COLOR_COUNT);
-        }
-        for (int i = 0; i < CUSTOM_COLOR_COUNT; i++) {
-            colors[i] = color_to_string(m_clrData->GetCustomColour(i));
-        }
-        wxGetApp().app_config->save_custom_color_to_config(colors);
-
-        picker_color = wxColour(
-            m_clrData->GetColour().Red(),
-            m_clrData->GetColour().Green(),
-            m_clrData->GetColour().Blue(),
-            255
-        );
-
-        if (picker_color.Alpha() == 0) {
-             m_ts_stbitmap_custom->Show();
-        }
-        else {
-            m_ts_stbitmap_custom->Hide();
-            m_custom_cp->SetBackgroundColor(picker_color);
-        }
-
-        set_def_colour(picker_color);
-        wxCommandEvent evt(EVT_SELECTED_COLOR);
-        unsigned long g_col = ((picker_color.Red() & 0xff) << 24) + ((picker_color.Green() & 0xff) << 16) + ((picker_color.Blue() & 0xff) << 8) + (picker_color.Alpha() & 0xff);
-        evt.SetInt(g_col);
-        wxPostEvent(GetParent(), evt);
-    }
+    set_def_colour(*picker_color);
+    wxCommandEvent evt(EVT_SELECTED_COLOR);
+    const std::uint32_t packed = (std::uint32_t(picker_color->Red()) << 24) |
+                                 (std::uint32_t(picker_color->Green()) << 16) |
+                                 (std::uint32_t(picker_color->Blue()) << 8) | 255u;
+    evt.SetInt(static_cast<int>(packed));
+    wxPostEvent(GetParent(), evt);
 }

 void ColorPickerPopup::set_ams_colours(std::vector<wxColour> ams)
@@ -85,7 +85,6 @@ public:
    ScalableBitmap m_ts_bitmap_custom;
    wxStaticBitmap* m_ts_stbitmap_custom;
    StaticBox* m_custom_cp;
-    wxColourData* m_clrData;
    StaticBox* m_def_color_box;
    wxFlexGridSizer* m_ams_fg_sizer;
    wxColour m_def_col;
@@ -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
@@ -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;
@@ -103,7 +103,7 @@ public:
    // actually pick it. Stops early once another mix would make no noticeable difference, so a texture
    // the filaments already cover gets few mixes or none.
    //
-    // Ratios are k/d for d up to MIX_MAX_DENOMINATOR: the slicer interleaves a mix layer by layer,
+    // Ratios are the short-cycle ones (k/d for d up to 6): the slicer interleaves a mix layer by layer,
    // and a long cycle prints as visible bands rather than as a colour. A mix's `rgb` is the colour its
    // mixed filament slot will show (blend_color_multi(), as the sidebar computes it), so the match, the
    // preview and the slot all agree on what the mix looks like.
@@ -508,25 +508,120 @@ private:
    // is where the live adjustment is applied. Called whenever the panel moves or reverts it.
    void invalidate_adjust_textures();

-    // "Adjust Texture" mode: instead of painting, dragging an on-canvas handle changes the active
-    // layer's offset. The handle is a flat panel lying in the paint patch's own tangent plane
-    // (a "pan" - drag anywhere on it for free 2D movement), plus two arrows along the patch's
-    // own U/V axes that constrain the drag to just that one axis for precise nudging. Anchored to
-    // the centroid/average-normal of the active layer's current paint patch (see
-    // libslic3r::compute_layer_paint_anchor()), so nothing is drawn if it has nothing painted yet.
+    // "Adjust Texture" mode: instead of painting, the active layer's placement is a control lying
+    // on the model. The gizmo is one tile of the texture in the paint patch's own tangent plane:
+    // where it sits is the layer's offset, how it is turned is rotation_deg, how big it is is the
+    // tile extents - so each handle is one of the values it edits rather than a stand-in for it.
+    // Anchored to the centroid/average-normal of the active layer's paint patch (see
+    // libslic3r::compute_layer_paint_anchor()), so nothing is drawn until something is painted.
    //
-    // NOTE: the drag direction/sign below is this session's best-effort reasoning about which way
-    // the texture should appear to move as the handle is dragged - it could not be visually
-    // confirmed while writing it (no way to render/see pixels in this environment), so it may
-    // need a one-line sign flip once actually tested.
+    // Drawn through ImGui's foreground draw list rather than the "flat" shader, which is what gives
+    // it antialiased sub-pixel strokes, rounded joins, a contrast halo and the numeric readout. The
+    // cost is that render_adjust_texture_gizmo() has to be called from inside the gizmo's ImGui
+    // frame (see on_render_input_window()), not from on_render() with the rest of the GL drawing.
+    // Move is the whole interior, free in both axes. AxisMove is the four arrows, each holding a
+    // move to one of the tile's axes. EdgeScale is the four edge bars, one tile extent each, and
+    // CornerScale the four corner grips, which take both extents at once.
+    //
+    // The arrows and the bars share the same four rays out of the tile, so they are kept apart by
+    // distance rather than direction: the bar hugs its edge, then a clear gap, then the arrow well
+    // outside it. adjust_pick() leans on that - see the order it tests them in.
+    enum class AdjustHandle { None, Move, AxisMove, EdgeScale, CornerScale, Rotate };
+
+    // The gizmo's geometry for one frame, in screen pixels. Worked out once and shared by the
+    // drawing and the hit test, so the two cannot disagree about where a handle is. Everything
+    // except the frame itself is a fixed number of pixels, which is what keeps the control equally
+    // usable on a 5 mm part and a 500 mm one - the old handle scaled with the volume's bounding box
+    // and so was unusable at both ends.
+    struct AdjustFrame
+    {
+        bool  valid  = false;
+        Vec2d center = Vec2d::Zero();
+        // +u+v, +u-v, -u-v, -u+v. A scale grip sits on each.
+        std::array<Vec2d, 4> corner{};
+        // +u, -u, +v, -v: the middle of each edge, and the two ends of the bar that sits just
+        // outside it. The bar's ends are kept rather than recomputed so the drawing and the hit test
+        // cannot end up with it in two different places.
+        std::array<Vec2d, 4> edge_mid{};
+        std::array<Vec2d, 4> bar_a{};
+        std::array<Vec2d, 4> bar_b{};
+        // The axis arrow further out on the same ray: where its shaft starts and where its chevron
+        // ends. Kept, like the bar's ends, so the drawing and the hit test cannot disagree.
+        std::array<Vec2d, 4> arm_base{};
+        std::array<Vec2d, 4> arm_tip{};
+        std::array<Vec2d, 4> arm_dir{}; // unit, pointing outward from the centre
+        // A ring is placed off every corner, but only one is drawn and only that one can be picked:
+        // four marks for a single operation is clutter, and whichever corner the cursor is near is
+        // the one worth offering. `rotate_shown` says which, and see update_rotate_corner() for why
+        // it does not simply track the nearest.
+        std::array<Vec2d, 4> rotate_at{};
+        int                  rotate_shown = 0;
+        // The tile projects to less than ADJUST_MIN_TILE_PX across, so the frame was drawn at that
+        // floor instead. It is dashed to say so, and the readout still gives the true millimetres.
+        bool clamped = false;
+        // What the frame was built from, in mesh-local mm: the tile's own (rotated) edge directions
+        // and its extents. The drag arithmetic reuses these rather than recomputing them, so it
+        // cannot end up working against a different tile than the one on screen.
+        Vec3f e_u = Vec3f::UnitX(), e_v = Vec3f::UnitY();
+        Vec2f tile_mm = Vec2f::Ones();     // (u, v) as stored on the layer
+        Vec2f half_planar = Vec2f::Ones(); // half extents in planar mm, v already aspect-corrected
+        Vec2f center_planar = Vec2f::Zero();
+    };
+
    bool update_adjust_anchor(); // recomputes m_adjust_anchor_pos/normal; false if nothing painted
+    // The selected instance's volume-to-world transform, which the bake frame is derived from.
+    bool adjust_volume_to_world(Transform3d &out) const;
+    // The anchor, carried from mesh-local into the bake frame. Converted on every use rather than
+    // stored converted: the object can be moved, rotated or scaled while this mode is open, and a
+    // stored copy would quietly describe the shape it used to be. The expensive part - finding the
+    // paint patch's centroid - stays cached in the local members.
+    bool adjust_anchor_in_frame(Vec3f &pos, Vec3f &normal) const;
+    // Drops every scrap of live gizmo state. Called from each of the several ways out of the mode -
+    // the panel's toggle, collapsing the card, switching to seam marking, closing the gizmo - so a
+    // stale hover highlight or a half-finished drag cannot survive into the next time it is opened.
+    void end_adjust_texture_mode();
    bool on_mouse_adjust_texture(const wxMouseEvent &mouse_event);
    void render_adjust_texture_gizmo();
+    // This frame's gizmo geometry, or an invalid frame when there is nothing to draw.
+    AdjustFrame adjust_frame() const;
+    // Which handle is under `mouse`, with `index` set to the arm or corner it belongs to. Tested
+    // outermost first; see the hit-area board of the design for the order and the radii.
+    AdjustHandle adjust_pick(const Vec2d &mouse, const AdjustFrame &f, int &index) const;
+    // Chooses which corner carries the rotate ring. The nearest to the cursor, but it only moves once
+    // the newcomer is clearly nearer, because without that margin the ring flits between two corners
+    // every time the cursor wanders along the line equidistant from both. Never moves during a drag.
+    void update_rotate_corner(const AdjustFrame &f, const Vec2d &mouse);
+
+    // Where the tile's centre sits, in planar mm relative to the anchor, for a layer's placement.
+    // Not the patch centroid: the gizmo *is* the texture's placement, so it has to travel as the
+    // offset changes - pinning it to the centroid is what made the old handle look broken, the
+    // texture sliding while the handle stayed put.
+    static Vec2f adjust_handle_planar(const TextureDisplacementLayer &layer, float aspect);
+    // The exact inverse: the offset that puts the tile's centre at `planar`. Rotating or resizing
+    // the tile changes where a given offset places it, so every drag recomputes the offset from the
+    // centre it wants to keep - which is what makes rotate and scale act *in place* rather than
+    // swinging the tile around the anchor.
+    static Vec2f adjust_offset_for_planar(const Vec2f &planar, float rot_deg, const Vec2f &tile_mm,
+                                          const Vec2f &mirror_sign, float aspect);
+    // The mesh-local-to-world transform of the selected instance, the (unrotated) tangent basis and
+    // the lifted anchor the whole gizmo is built on. False when there is nothing to build on - which
+    // is the single place that decides the gizmo is not drawable, so the drawing, the hit test and
+    // the drag cannot disagree about it.
+    bool adjust_basis(Transform3d &trafo, Vec3f &u_axis, Vec3f &v_axis, Vec3f &base) const;
+    // Screen-space quad of a tile with the given placement. Used for the pre-drag ghost, which is
+    // drawn from the captured start placement rather than from the layer, the layer having already
+    // been moved by then.
+    bool adjust_quad_for(const Vec2f &center_planar, float rot_deg, const Vec2f &tile_mm,
+                         std::array<Vec2d, 4> &out) const;
+    // Where the cursor meets the drag plane, in planar mm relative to the anchor. The plane is
+    // deliberately the *fixed* anchor plane rather than the tile's current position: measuring a
+    // drag against a plane the drag itself moves is a feedback loop.
+    bool adjust_planar_under(const Vec2d &mouse, Vec2f &planar) const;
    // Draws a small '+'/'-' next to the mouse over the 3D view while painting/selecting, so it is
    // obvious whether the next stroke adds paint (default) or erases it (Shift). Uses ImGui's
    // foreground draw list, so it must be called from inside the gizmo's ImGui frame.
    void render_paint_cursor_hint();
-    // Mesh-local tangent-plane basis at m_adjust_anchor_normal: box_projection_axes(), so dragging
+    // Bake-frame tangent-plane basis at m_adjust_anchor_normal: box_projection_axes(), so dragging
    // on-canvas maps consistently onto offset whichever face the anchor is on.
    void adjust_tangent_basis(Vec3f &u_axis, Vec3f &v_axis) const;

@@ -1118,23 +1213,47 @@ private:
    // See the "Adjust Texture" block of private methods above.
    bool  m_adjust_texture_mode      = false;
    bool  m_adjust_anchor_valid      = false;
-    Vec3f m_adjust_anchor_pos        = Vec3f::Zero();  // mesh-local
-    Vec3f m_adjust_anchor_normal     = Vec3f::UnitZ(); // mesh-local
+    // Mesh-local, as compute_layer_paint_anchor() produces them. Everything else about the gizmo
+    // works in the bake frame - world orientation and scale, origin at the volume's own, which is
+    // where the texture is projected (texture_displacement_bake_frame()) - so these go through
+    // adjust_anchor_in_frame() at the point of use. A tile is so many *printed* millimetres whatever
+    // the instance's scale, which is why measuring the gizmo in mesh-local millimetres made its tile
+    // differ from the rendered one by exactly that scale.
+    Vec3f m_adjust_anchor_pos        = Vec3f::Zero();
+    Vec3f m_adjust_anchor_normal     = Vec3f::UnitZ();

-    // Pan: free drag anywhere on the flat panel, moves offset along both axes. AxisU/AxisV: drag
-    // the corresponding arrow, moves offset along only that one axis.
-    enum class AdjustHandle { None, Pan, AxisU, AxisV };
-    AdjustHandle m_adjust_drag_handle       = AdjustHandle::None;
-    Vec2f        m_adjust_drag_start_offset = Vec2f::Zero();
-    // Anchor-relative planar position (see project_planar()) of the point under the mouse at the
-    // moment the current drag started; every subsequent frame's delta is measured against this,
-    // rather than accumulated frame-to-frame, to avoid drift.
-    Vec2f m_adjust_drag_start_planar = Vec2f::Zero();
+    // What the cursor is over, and what is being dragged. `index` picks the arm or the corner
+    // (0..3, in AdjustFrame's order); it is -1 for Move and Rotate, which have only one of each.
+    // Only ever one of each is set, so two handles can never both look live.
+    // Which corner currently carries the rotate ring. Persists between frames, which is what gives
+    // update_rotate_corner() something to apply its margin against.
+    int          m_adjust_rotate_corner = 0;
+    AdjustHandle m_adjust_hover_kind  = AdjustHandle::None;
+    int          m_adjust_hover_index = -1;
+    AdjustHandle m_adjust_drag_kind   = AdjustHandle::None;
+    int          m_adjust_drag_index  = -1;

-    // Lazily-built unit quad (the pan panel) and unit line-with-arrowhead (reused, rotated, for
-    // both the U and V axis arrows), transformed into place at render time.
-    GLModel m_adjust_panel_glmodel;
-    GLModel m_adjust_arrow_glmodel;
+    // Everything the live drag is measured against, captured once on mouse-down. Every frame's
+    // delta is taken from these rather than accumulated frame to frame, so a long drag cannot
+    // drift away from the cursor.
+    Vec2f m_adjust_drag_start_center = Vec2f::Zero(); // tile centre, planar mm
+    Vec2f m_adjust_drag_start_grab   = Vec2f::Zero(); // the grabbed point, planar mm
+    // How far the grab landed from the handle's own position, in planar mm. A scale drag reads the
+    // extents straight off the cursor, so without subtracting this the tile would jump by however
+    // far inside the generous hit radius the click happened to fall.
+    Vec2f m_adjust_drag_grab_bias    = Vec2f::Zero();
+    float m_adjust_drag_start_rot    = 0.f;
+    Vec2f m_adjust_drag_start_tile   = Vec2f::Ones(); // (u, v) extents as stored
+    float m_adjust_drag_start_angle  = 0.f;           // planar angle of the grab, radians
+    // The mirroring the layer had when the drag began. A width or height handle dragged back through
+    // the tile's middle toggles its axis against this, rather than against whatever the last frame
+    // left behind, so dragging back and forth across the middle cannot ratchet the flag.
+    bool  m_adjust_drag_start_mirror_u = false;
+    bool  m_adjust_drag_start_mirror_v = false;
+
+    // The live value to put in the readout pill, built by the drag and drawn by the renderer in the
+    // same frame. Empty when no drag is running, which is also when no pill is drawn.
+    std::string m_adjust_readout;

    std::map<std::string, wxString> m_desc;

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

@@ -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);
@@ -297,9 +297,12 @@ void UVEditorCanvas::set_island_fill_colors(std::vector<ColorRGBA> colors)
    Refresh();
 }

-void UVEditorCanvas::set_uv_transform(float tiling_scale, float rotation_deg, bool tile_enabled, bool tile_mirrored)
+void UVEditorCanvas::set_uv_transform(float tiling_scale, float tiling_scale_v, const Vec2f &mirror_sign,
+                                      float rotation_deg, bool tile_enabled, bool tile_mirrored)
 {
    m_tiling_scale          = (std::abs(tiling_scale) > 1e-6f) ? tiling_scale : 1.f;
+    m_tiling_scale_v        = (tiling_scale_v > 1e-6f) ? tiling_scale_v : m_tiling_scale;
+    m_mirror_sign           = mirror_sign;
    m_rotation_deg          = rotation_deg;
    m_tile_enabled          = tile_enabled;
    m_tile_mirrored         = tile_mirrored;
@@ -661,11 +664,18 @@ Vec2f UVEditorCanvas::island_centroid(int island) const

 Vec2f UVEditorCanvas::uv_delta_to_unwrap(const Vec2f &delta_uv) const
 {
-    // apply_uv_transform() maps unwrap -> uv as  uv = R(unwrap / tiling) + offset, so the inverse of
-    // a *delta* (the translation drops out) is  unwrap = tiling * R^-1(delta_uv).
+    // apply_uv_transform() maps unwrap -> uv as  uv = S^-1 R(unwrap) + offset, with S the tile
+    // extents, so the inverse of a *delta* (the translation drops out) is  unwrap = R^-1(S delta_uv).
+    // The extents therefore multiply *before* the inverse rotation, which is the mirror image of the
+    // forward order; with a square tile the two are interchangeable, with a rectangular one they are
+    // not.
    const float rad = m_rotation_deg * float(M_PI) / 180.f;
    const float cs = std::cos(rad), sn = std::sin(rad);
-    return Vec2f(delta_uv.x() * cs + delta_uv.y() * sn, -delta_uv.x() * sn + delta_uv.y() * cs) * m_tiling_scale;
+    // The mirror is its own sign on the same axis, and a negation is its own inverse, so it comes
+    // back out here exactly as it went in.
+    const Vec2f scaled(delta_uv.x() * m_tiling_scale * m_mirror_sign.x(),
+                       delta_uv.y() * m_tiling_scale_v * m_mirror_sign.y());
+    return Vec2f(scaled.x() * cs + scaled.y() * sn, -scaled.x() * sn + scaled.y() * cs);
 }

 Vec2f UVEditorCanvas::snap_correction(int island) const
@@ -2180,7 +2190,10 @@ UVEditorPanel::UVEditorPanel(wxWindow *parent) : wxPanel(parent, wxID_ANY)
 void UVEditorPanel::apply_state(const UVEditorCanvas::PaneState &s)
 {
    const wxString name = s.has_layer ? s.layer_name : _L("No layer mapped with Unwrap");
-    const wxString tile = s.has_layer ? wxString::Format(_L("%.1f mm tile"), s.tile_mm) : wxString();
+    // A square tile reads as one number; only a genuinely rectangular one is worth two.
+    const wxString tile = !s.has_layer                         ? wxString() :
+                          std::abs(s.tile_mm_v - s.tile_mm) < 0.005f ? wxString::Format(_L("%.1f mm tile"), s.tile_mm) :
+                          wxString::Format(_L("%.1f x %.1f mm tile"), s.tile_mm, s.tile_mm_v);
    const bool     relayout = m_layer_name->GetLabel() != name || m_tile->GetLabel() != tile;
    m_layer_name->SetLabel(name);
    m_tile->SetLabel(tile);
@@ -91,7 +91,10 @@ public:
    // space, back into the unwrap's mm space - which is where a TextureIsland's offset actually
    // lives (see apply_uv_transform()). The tile settings come along because the background has to
    // repeat exactly the way the height sampler does, or the pane would stop showing what gets baked.
-    void set_uv_transform(float tiling_scale, float rotation_deg, bool tile_enabled, bool tile_mirrored);
+    // `tiling_scale_v` is the tile's extent along v; pass <= 0 for a square tile, matching
+    // layer_tile_mm().
+    void set_uv_transform(float tiling_scale, float tiling_scale_v, const Vec2f &mirror_sign,
+                          float rotation_deg, bool tile_enabled, bool tile_mirrored);

    // Same 8-bit grayscale pixels build_texture_displacement()'s height sampling uses, shown
    // beneath the wireframe (expanded to RGBA on upload) so the unwrap can be checked against the
@@ -129,7 +132,8 @@ public:
    {
        bool                       has_layer       = false; // an active layer mapped with Unwrap
        wxString                   layer_name;
-        float                      tile_mm         = 0.f;
+        float                      tile_mm         = 0.f; // tile extent along u
+        float                      tile_mm_v       = 0.f; // along v; equal to tile_mm for a square tile
        std::vector<unsigned char> thumbnail_rgb;           // thumbnail_px square, 3 bytes per pixel; empty for none
        int                        thumbnail_px    = 0;
        float                      seam_angle_deg  = 40.f;
@@ -292,8 +296,10 @@ private:
    GLModel m_grid_glmodel;
    float   m_grid_step = 0.f; // the UV step m_grid_glmodel was built for; 0 = not built

-    float m_tiling_scale  = 1.f;
-    float m_rotation_deg  = 0.f;
+    float m_tiling_scale   = 1.f;
+    float m_tiling_scale_v = 1.f; // already resolved: never the "unset" sentinel, see set_uv_transform()
+    Vec2f m_mirror_sign    = Vec2f::Ones(); // +1 or -1 per axis, see layer_mirror_sign()
+    float m_rotation_deg   = 0.f;
    bool  m_tile_enabled  = true;
    bool  m_tile_mirrored = false;
    bool  m_snap_enabled  = false;
@@ -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 {
@@ -30,6 +30,7 @@
 #include "libslic3r/Line.hpp"
 #include "libslic3r/ExtrusionEntity.hpp"
 #include "libslic3r/BoundingBox.hpp"
+#include <functional>
 #include <map>
 #include <set>
 #include <string>
@@ -596,3 +597,127 @@ TEST_CASE("Body centering survives islands merging and splitting between layers"
        }
    }
 }
+
+TEST_CASE("Z contouring slices an object that has several instances", "[PrintObject]")
+{
+    Print print;
+    Model model;
+    place_two_cube_instances_apart(10., { { "zaa_enabled", "1" } }, print, model);
+    REQUIRE(print.objects().size() == 1);
+    REQUIRE(print.objects().front()->instances().size() == 2);
+
+    CHECK_NOTHROW(print.process());
+    CHECK(print.objects().front()->is_step_done(posContouring));
+}
+
+TEST_CASE("Z contouring slices instances of one object that are turned differently", "[PrintObject]")
+{
+    // An instance turned about Z is sliced as a PrintObject of its own, with the same ModelObject behind it.
+    Print print;
+    Model model;
+    place_two_cube_instances_apart(10., { { "zaa_enabled", "1" } }, print, model);
+    model.objects.front()->instances.back()->set_rotation(Z, PI / 4.);
+    print.apply(model, DynamicPrintConfig(print.full_print_config()));
+    REQUIRE(print.objects().size() == 2);
+
+    CHECK_NOTHROW(print.process());
+    for (const PrintObject *object : print.objects())
+        CHECK(object->is_step_done(posContouring));
+}
+
+// A box tilted about X, so that its top slopes along Y and Z contouring has a surface to follow, with
+// one instance for each Z rotation given, laid out in a row.
+static void slice_tilted_box_instances(const std::vector<double> &z_rotations, Print &print, Model &model)
+{
+    DynamicPrintConfig config = DynamicPrintConfig::full_print_config();
+    config.set_deserialize_strict({ { "zaa_enabled", "1" } });
+
+    TriangleMesh box = make_cube(20, 20, 10);
+    box.rotate_x(float(PI / 12.));
+    ModelObject *object = model.add_object();
+    object->add_volume(std::move(box));
+    for (size_t idx = 0; idx < z_rotations.size(); ++idx) {
+        ModelInstance *instance = object->add_instance();
+        instance->set_offset(Vec3d(50. + 50. * double(idx), 100., 0.));
+        instance->set_rotation(Z, z_rotations[idx]);
+    }
+    object->ensure_on_bed();
+    print.auto_assign_extruders(object);
+    print.apply(model, config);
+    print.validate();
+    print.set_status_silent();
+    print.process();
+}
+
+// The Z that contouring gave each point of the object's extrusions, by layer and by XY in the
+// PrintObject's own frame, which does not depend on where its instances stand on the bed.
+static std::vector<std::map<std::pair<coord_t, coord_t>, coord_t>> contoured_heights(const PrintObject &object)
+{
+    std::vector<std::map<std::pair<coord_t, coord_t>, coord_t>> heights(object.layer_count());
+    for (size_t layer_idx = 0; layer_idx < object.layer_count(); ++layer_idx) {
+        auto &layer_heights = heights[layer_idx];
+        std::function<void(const ExtrusionEntity &)> visit = [&](const ExtrusionEntity &entity) {
+            if (const auto *path = dynamic_cast<const ExtrusionPath *>(&entity)) {
+                if (path->z_contoured)
+                    for (const Point3 &pt : path->polyline.points)
+                        layer_heights[{ pt.x(), pt.y() }] = pt.z();
+            } else if (const auto *multipath = dynamic_cast<const ExtrusionMultiPath *>(&entity)) {
+                for (const ExtrusionPath &path : multipath->paths)
+                    visit(path);
+            } else if (const auto *loop = dynamic_cast<const ExtrusionLoop *>(&entity)) {
+                for (const ExtrusionPath &path : loop->paths)
+                    visit(path);
+            } else if (const auto *collection = dynamic_cast<const ExtrusionEntityCollection *>(&entity)) {
+                for (const ExtrusionEntity *child : collection->entities)
+                    visit(*child);
+            }
+        };
+        for (const LayerRegion *region : object.get_layer(int(layer_idx))->regions()) {
+            visit(region->perimeters);
+            visit(region->fills);
+        }
+    }
+    return heights;
+}
+
+TEST_CASE("Z contouring follows the surface of each instance as it is turned", "[PrintObject]")
+{
+    // Two instances of a box with a sloped top, the second turned a quarter turn about Z: its top slopes
+    // along X instead of Y. Each is contoured against the box turned as that instance is, so it has to
+    // match the same box placed alone with that turn.
+    Print print;
+    Model model;
+    slice_tilted_box_instances({ 0., PI / 2. }, print, model);
+    REQUIRE(print.objects().size() == 2);
+
+    for (const PrintObject *object : print.objects()) {
+        const double z_rotation = object->instances().front().model_instance->get_rotation().z();
+        Print reference;
+        Model reference_model;
+        slice_tilted_box_instances({ z_rotation }, reference, reference_model);
+        REQUIRE(reference.objects().size() == 1);
+
+        const auto heights           = contoured_heights(*object);
+        const auto reference_heights = contoured_heights(*reference.objects().front());
+        REQUIRE(heights.size() == reference_heights.size());
+
+        size_t matched = 0, lifted = 0;
+        for (size_t layer_idx = 0; layer_idx < heights.size(); ++layer_idx) {
+            const coord_t print_z = scaled(object->get_layer(int(layer_idx))->print_z);
+            for (const auto &[xy, z] : heights[layer_idx]) {
+                const auto it = reference_heights[layer_idx].find(xy);
+                if (it == reference_heights[layer_idx].end())
+                    continue;
+                INFO("layer " << layer_idx << ", rotation " << z_rotation);
+                CHECK(std::abs(z - it->second) <= scaled(0.001));
+                ++matched;
+                if (std::abs(z - print_z) > scaled(0.01))
+                    ++lifted;
+            }
+        }
+        INFO("rotation " << z_rotation);
+        // Enough points in common to mean something, and contouring did move some of them.
+        CHECK(matched > 100);
+        CHECK(lifted > 0);
+    }
+}
@@ -94,33 +94,6 @@ static std::shared_ptr<std::vector<unsigned char>> make_flat_rgb_png(uint8_t r,
    return std::make_shared<std::vector<unsigned char>>(std::move(bytes));
 }

-// An RGB image built by a caller-supplied function of the pixel position, written through the same
-// temp-file round trip the flat helpers above use.
-static std::shared_ptr<std::vector<unsigned char>> make_rgb_png(
-    size_t w, size_t h, const std::function<std::array<uint8_t, 3>(size_t, size_t)> &at)
-{
-    std::vector<uint8_t> rgb;
-    rgb.reserve(w * h * 3);
-    for (size_t y = 0; y < h; ++y)
-        for (size_t x = 0; x < w; ++x) {
-            const std::array<uint8_t, 3> c = at(x, y);
-            rgb.insert(rgb.end(), { c[0], c[1], c[2] });
-        }
-    const boost::filesystem::path tmp_path = boost::filesystem::temp_directory_path()
-        / boost::filesystem::unique_path("texdisp_test_%%%%%%%%.png");
-    REQUIRE(Slic3r::png::write_rgb_to_file(tmp_path.string(), w, h, rgb));
-
-    std::vector<unsigned char> bytes;
-    {
-        std::ifstream ifs(tmp_path.string(), std::ios::binary);
-        bytes.assign(std::istreambuf_iterator<char>(ifs), std::istreambuf_iterator<char>());
-    }
-    boost::system::error_code ec;
-    boost::filesystem::remove(tmp_path, ec);
-    REQUIRE_FALSE(bytes.empty());
-    return std::make_shared<std::vector<unsigned char>>(std::move(bytes));
-}
-
 // A hard-edged black/white checkerboard, the worst case for a height map: every texel boundary is a
 // step, which is precisely the relief the post-process smoothing exists to round off.
 static std::shared_ptr<std::vector<unsigned char>> make_checkerboard_png(size_t w = 16, size_t h = 16)
@@ -2653,61 +2626,6 @@ TEST_CASE("TextureDisplacement: a texture of flat colours is told apart from a c
    CHECK(d.flat_share < 0.85f);
 }

-TEST_CASE("A mirrored tile folds at its seam instead of wrapping to the far edge", "[TextureDisplacement]")
-{
-    // Mirrored repeat exists so a tile edge lines up with itself, which means the texel past the edge
-    // is the edge again. Wrapping the bilinear neighbour instead blends the image's two opposite edges
-    // together: on a ramp from black to white it turned the white edge into near-black at every seam,
-    // a visible line and a disagreement with the preview, where the GPU binds GL_MIRRORED_REPEAT.
-    TextureDisplacementLayer layer;
-    layer.image_data = make_rgb_png(8, 8, [](size_t x, size_t) {
-        const uint8_t v = uint8_t(x * 36); // 0 at the left edge, 252 at the right
-        return std::array<uint8_t, 3>{ v, v, v };
-    });
-    const DecodedHeightTexture tex = decode_height_texture(layer);
-    REQUIRE(tex.width == 8);
-    const float bright = 252.f / 255.f;
-
-    // Either side of a seam the fold puts the bright edge, not a blend with the dark one.
-    for (const float u : { 0.999f, 1.001f, 2.999f, 3.001f }) {
-        INFO("u = " << u);
-        CHECK_THAT(tex.sample(Vec2f(u, 0.5f), true, TextureTileMethod::MirroredRepeat),
-                   WithinAbs(bright, 0.02f));
-    }
-
-    // Plain repeat is the opposite case and must keep wrapping: its next tile really does start at the
-    // far edge, so just inside the seam the neighbour is the dark one.
-    CHECK(tex.sample(Vec2f(0.999f, 0.5f), true, TextureTileMethod::Repeat) < 0.1f);
-}
-
-TEST_CASE("A two-colour ramp is not mistaken for an image of flat colours", "[TextureDisplacement]")
-{
-    // The histogram alone cannot tell these two apart: a ramp between two colours visits as few
-    // coarse bins as the two colours on their own, and both score far above the flat-share
-    // threshold. What separates them is that the ramp fills its colour axis and the pair does not.
-    const std::array<uint8_t, 3> a{ 0x4f, 0xc3, 0x08 };
-    const std::array<uint8_t, 3> b{ 0xd4, 0x2f, 0x25 };
-
-    TextureDisplacementLayer ramp;
-    ramp.image_data = make_rgb_png(96, 96, [&](size_t, size_t y) {
-        const float t = float(y) / 95.f;
-        return std::array<uint8_t, 3>{ uint8_t(std::lround(a[0] + (b[0] - a[0]) * t)),
-                                       uint8_t(std::lround(a[1] + (b[1] - a[1]) * t)),
-                                       uint8_t(std::lround(a[2] + (b[2] - a[2]) * t)) };
-    });
-    const TextureDetail ramp_detail = analyze_texture_detail(ramp);
-    CHECK(ramp_detail.flat_share >= 0.85f);     // the old signal, on its own, calls this flat
-    CHECK(ramp_detail.axis_coverage > 0.8f);    // but its colours run the length of the axis
-    CHECK_FALSE(ramp_detail.flat_colors);       // so mixes stay available
-
-    // The same two colours as areas rather than a ramp: nothing in between, so no mix would serve it.
-    TextureDisplacementLayer two_tone;
-    two_tone.image_data = make_rgb_png(96, 96, [&](size_t, size_t y) { return y < 48 ? a : b; });
-    const TextureDetail two_tone_detail = analyze_texture_detail(two_tone);
-    CHECK(two_tone_detail.axis_coverage < 0.25f);
-    CHECK(two_tone_detail.flat_colors);
-}
-
 TEST_CASE("Each layer's texture is sampled only on its own painted area", "[TextureDisplacement]")
 {
    // Two layers with different textures and depths, one painted on the cube's top, one on its -X side.
@@ -9,6 +9,8 @@ add_executable(${_TEST_NAME}_tests
    test_moonraker_discovery.cpp
    test_network_discovery.cpp
    test_filament_bitmap_utils.cpp
+    test_colour_picker_field.cpp
+    test_filament_color_picker.cpp
    test_device_progress.cpp
    test_device_manager_integration.cpp
    test_web_media_controller.cpp
@@ -0,0 +1,47 @@
+#include "slic3r/GUI/Field.hpp"
+#include "libslic3r/Config.hpp"
+#include <boost/any.hpp>
+#include <catch2/catch_test_macros.hpp>
+#include <string>
+#include <wx/colour.h>
+#include <wx/string.h>
+
+using namespace Slic3r;
+using namespace Slic3r::GUI;
+
+namespace {
+class TestColourPicker : public ColourPicker {
+public:
+    TestColourPicker() : ColourPicker(ConfigOptionDef{}, "filament_colour") {}
+    std::string value() { return boost::any_cast<std::string>(get_value()); }
+};
+}
+
+TEST_CASE("Undefined color fields remain distinct from opaque black", "[ColourPickerField]")
+{
+    TestColourPicker field;
+    REQUIRE(field.value().empty());
+    field.set_value(std::string("#000000"));
+    REQUIRE(field.value() == "#000000");
+    field.set_value(std::string("invalid color"));
+    REQUIRE(field.value().empty());
+    field.set_value(boost::any(wxString("#123456")));
+    REQUIRE(field.value() == "#123456");
+    field.set_value(std::string());
+    REQUIRE(field.value().empty());
+}
+
+TEST_CASE("Programmatic color field assignment stays silent", "[ColourPickerField]")
+{
+    TestColourPicker field;
+    int changes = 0;
+    field.m_on_change = [&](const std::string&, const boost::any&) { ++changes; };
+    field.set_value(std::string("#123456"), false);
+    field.set_value(boost::any(wxString("#654321")), true);
+    REQUIRE(changes == 0);
+    REQUIRE(field.value() == "#654321");
+    field.m_disable_change_event = true;
+    field.set_value(std::string("#FF0000"));
+    REQUIRE(field.value() == "#FF0000");
+    REQUIRE(changes == 0);
+}
@@ -22,6 +22,13 @@
 #include <cmath>

 #include <wx/colour.h>
+#ifdef __WXMSW__
+#include <wx/bitmap.h>
+#include <wx/image.h>
+#include <cstdlib>
+#include <utility>
+#include <catch2/generators/catch_generators.hpp>
+#endif
 #include <wx/string.h>

 #include "libslic3r/FilamentMixer.hpp"
@@ -260,3 +267,71 @@ TEST_CASE("sample_gradient_ramp returns nothing without a usable curve or step c
    curve.points = {{0.0, kGradientMaxRatio, NAN, NAN}, {1.0, kGradientMinRatio, NAN, NAN}};
    REQUIRE(Slic3r::GUI::sample_gradient_ramp(wxColour(255, 0, 0), wxColour(0, 0, 255), curve, 0).empty());
 }
+
+// The headless GTK/macOS suite does not initialize GUI display/font stock objects.
+// Exercise native bitmap pixels on Windows without adding that dependency elsewhere.
+#ifdef __WXMSW__
+TEST_CASE("Filament gradient pixels follow both endpoint directions without changing input", "[FilamentBitmapUtils]")
+{
+    const bool reverse = GENERATE(false, true);
+    const std::vector<wxColour> colors = reverse ? std::vector<wxColour>{wxColour(0, 0, 255), wxColour(255, 0, 0)}
+                                                 : std::vector<wxColour>{wxColour(255, 0, 0), wxColour(0, 0, 255)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(64, 16), true);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    // Interior pixels avoid backend-specific rasterization at the gradient boundary.
+    for (const auto& sample : {std::pair<int, wxColour>{2, colors.front()}, {61, colors.back()}}) {
+        REQUIRE(std::abs(int(image.GetRed(sample.first, 8)) - int(sample.second.Red())) <= 16);
+        REQUIRE(std::abs(int(image.GetBlue(sample.first, 8)) - int(sample.second.Blue())) <= 16);
+    }
+    REQUIRE(colors == original);
+}
+
+TEST_CASE("Filament halves preserve the same caller color order as gradients", "[FilamentBitmapUtils]")
+{
+    const bool reverse = GENERATE(false, true);
+    const std::vector<wxColour> colors = reverse ? std::vector<wxColour>{wxColour(0, 0, 255), wxColour(255, 0, 0)}
+                                                 : std::vector<wxColour>{wxColour(255, 0, 0), wxColour(0, 0, 255)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(64, 16), false);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    require_same_rgb(wxColour(image.GetRed(16, 8), image.GetGreen(16, 8), image.GetBlue(16, 8)), colors.front());
+    require_same_rgb(wxColour(image.GetRed(48, 8), image.GetGreen(48, 8), image.GetBlue(48, 8)), colors.back());
+    REQUIRE(colors == original);
+}
+
+TEST_CASE("Three color filament stripes retain caller order", "[FilamentBitmapUtils]")
+{
+    const std::vector<wxColour> colors{wxColour(0, 0, 255), wxColour(0, 255, 0), wxColour(255, 0, 0)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(72, 24), false);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    for (int i = 0; i < 3; ++i) {
+        const int x = 12 + i * 24;
+        require_same_rgb(wxColour(image.GetRed(x, 12), image.GetGreen(x, 12), image.GetBlue(x, 12)), colors[i]);
+    }
+    REQUIRE(colors == original);
+}
+
+TEST_CASE("Four color filament quadrants retain caller order", "[FilamentBitmapUtils]")
+{
+    const std::vector<wxColour> colors{wxColour(0, 0, 255), wxColour(0, 255, 0), wxColour(255, 0, 0), wxColour(255, 255, 0)};
+    const auto original = colors;
+    const wxBitmap bitmap = Slic3r::GUI::create_filament_bitmap(colors, wxSize(64, 32), false);
+    REQUIRE(bitmap.IsOk());
+    const wxImage image = bitmap.ConvertToImage();
+    REQUIRE(image.IsOk());
+    for (int i = 0; i < 4; ++i) {
+        const int x = i % 2 ? 48 : 16, y = i / 2 ? 24 : 8;
+        require_same_rgb(wxColour(image.GetRed(x, y), image.GetGreen(x, y), image.GetBlue(x, y)), colors[i]);
+    }
+    REQUIRE(colors == original);
+}
+
+#endif // __WXMSW__
@@ -0,0 +1,179 @@
+#include "slic3r/GUI/ColorPickerDialog.hpp"
+#include "libslic3r/Color.hpp"
+
+#include <algorithm>
+#include <limits>
+#include <stdexcept>
+#include <optional>
+#include <string>
+#include <vector>
+#include <cstddef>
+#include <catch2/catch_test_macros.hpp>
+#include <catch2/generators/catch_generators.hpp>
+
+using namespace Slic3r;
+using namespace Slic3r::GUI;
+
+// One color more than an ordered gradient may hold.
+static std::vector<std::string> too_many_gradient_colors()
+{
+    return std::vector<std::string>(COLOR_PICKER_MAX_GRADIENT_COLORS + 1, "#FF0000");
+}
+
+TEST_CASE("Project gradient direction survives editing and RGB serialization", "[FilamentColorPicker]")
+{
+    const std::vector<std::string> endpoints = {"#FF0000", "#0000FF"};
+    const FilamentColorPickerValue stored{endpoints, true};
+    const auto initial = filament_color_picker_selection(stored);
+    REQUIRE(initial);
+    REQUIRE(filament_color_picker_result(*initial).colors == endpoints);
+    REQUIRE_FALSE(filament_color_picker_changed(*initial, initial));
+    REQUIRE_FALSE(filament_color_picker_changed(*initial, std::nullopt));
+    const auto reverse = filament_color_picker_selection({{endpoints[1], endpoints[0]}, true});
+    REQUIRE(filament_color_picker_changed(*initial, reverse));
+    REQUIRE(filament_color_picker_result(*reverse).colors.front() == endpoints.back());
+}
+
+TEST_CASE("Unrepresentable project colors remain unchanged until a different selection is confirmed", "[FilamentColorPicker]")
+{
+    const auto value = GENERATE(FilamentColorPickerValue{too_many_gradient_colors(), true},
+                                FilamentColorPickerValue{{"#FF0000", "#0000FF"}, false});
+    REQUIRE_FALSE(filament_color_picker_selection(value));
+    const auto seed = filament_color_picker_initial(value);
+    REQUIRE_FALSE(filament_color_picker_changed(seed, seed));
+    REQUIRE_FALSE(filament_color_picker_changed(seed, std::nullopt));
+    const auto changed = filament_color_picker_selection({{"#FE0000"}, false});
+    REQUIRE(filament_color_picker_changed(seed, changed));
+    REQUIRE(filament_color_picker_result(*changed).colors == std::vector<std::string>{"#FE0000"});
+}
+
+TEST_CASE("Filament seeds preserve primary alpha when colors are invalid or absent", "[FilamentColorPicker]")
+{
+    const FilamentColorPickerValue stale{{"invalid", "#00FF00"}, false, "#12345680"};
+    REQUIRE_FALSE(filament_color_picker_selection(stale));
+    REQUIRE(filament_color_picker_result(filament_color_picker_initial(stale)).colors == std::vector<std::string>{"#12345680"});
+    const auto value = filament_color_picker_selection({{"#12345680", "#ABCDEF01"}, true});
+    REQUIRE(value);
+    REQUIRE(filament_color_picker_result(*value).colors == std::vector<std::string>{"#12345680", "#ABCDEF01"});
+    const auto missing = filament_color_picker_initial({});
+    REQUIRE(filament_color_picker_result(missing).colors == std::vector<std::string>{"#000000"});
+}
+
+TEST_CASE("Filament project colors round trip every alpha boundary with compatible opaque spelling", "[FilamentColorPicker]")
+{
+    const auto hex = GENERATE(std::string("#12345600"), std::string("#12345601"),
+                              std::string("#12345680"), std::string("#123456FE"),
+                              std::string("#123456FF"), std::string("#123456"));
+    const FilamentColorPickerValue stored{{hex}, false};
+    const auto selection = filament_color_picker_selection(stored);
+    REQUIRE(selection);
+    REQUIRE_FALSE(filament_color_picker_changed(*selection, selection));
+    REQUIRE_FALSE(filament_color_picker_changed(*selection, std::nullopt));
+    const auto result = filament_color_picker_result(*selection);
+    const std::string expected = hex == "#123456FF" ? "#123456" : hex;
+    REQUIRE(result.colors == std::vector<std::string>{expected});
+    ColorRGBA decoded;
+    REQUIRE(decode_color(result.colors.front(), decoded));
+    REQUIRE(filament_color_picker_result(ColorSelection{decoded}).colors == result.colors);
+    const auto reloaded = filament_color_picker_selection(result);
+    REQUIRE(reloaded);
+    REQUIRE(filament_color_picker_result(*reloaded).colors == result.colors);
+}
+
+TEST_CASE("Alpha only filament edits preserve ordered independent gradient endpoint alpha", "[FilamentColorPicker]")
+{
+    const auto original = filament_color_picker_selection({{"#FF000000", "#0000FF80"}, true});
+    const auto edited = filament_color_picker_selection({{"#FF000001", "#0000FFFE"}, true});
+    REQUIRE(original);
+    REQUIRE(edited);
+    REQUIRE(filament_color_picker_changed(*original, edited));
+    const auto result = filament_color_picker_result(*edited);
+    REQUIRE(result.gradient);
+    REQUIRE(result.colors == std::vector<std::string>{"#FF000001", "#0000FFFE"});
+    const auto reloaded = filament_color_picker_selection(result);
+    REQUIRE(reloaded);
+    REQUIRE_FALSE(filament_color_picker_changed(*edited, reloaded));
+    const auto reversed = filament_color_picker_selection({{result.colors[1], result.colors[0]}, true});
+    REQUIRE(filament_color_picker_changed(*edited, reversed));
+    const auto solid = filament_color_picker_selection({{"#12345680"}, false});
+    const auto alpha_only = filament_color_picker_selection({{"#12345681"}, false});
+    REQUIRE(solid);
+    REQUIRE(alpha_only);
+    REQUIRE(filament_color_picker_changed(*solid, alpha_only));
+    REQUIRE(filament_color_picker_result(*alpha_only).colors == std::vector<std::string>{"#12345681"});
+    const auto mixed = filament_color_picker_selection({{"#FF0000FF", "#0000FF00"}, true});
+    REQUIRE(mixed);
+    REQUIRE(filament_color_picker_result(*mixed).colors == std::vector<std::string>{"#FF0000", "#0000FF00"});
+}
+
+TEST_CASE("Unrepresentable filament seeds retain first endpoint or valid primary alpha", "[FilamentColorPicker]")
+{
+    auto too_many = too_many_gradient_colors();
+    too_many.front() = "#FF000000";
+    const auto value = GENERATE_COPY(FilamentColorPickerValue{too_many, true},
+                                FilamentColorPickerValue{{"#FF000000", "#0000FF80"}, false},
+                                FilamentColorPickerValue{{"invalid", "#FF0000"}, true, "#FF000000"});
+    REQUIRE_FALSE(filament_color_picker_selection(value));
+    const auto initial = filament_color_picker_initial(value);
+    REQUIRE(filament_color_picker_result(initial).colors == std::vector<std::string>{"#FF000000"});
+    REQUIRE_FALSE(filament_color_picker_changed(initial, initial));
+    REQUIRE_FALSE(filament_color_picker_changed(initial, std::nullopt));
+    const auto edited = filament_color_picker_selection({{"#FF000001"}, false});
+    REQUIRE(filament_color_picker_changed(initial, edited));
+}
+
+TEST_CASE("Ordered multi-color gradients round trip up to the color limit", "[FilamentColorPicker]")
+{
+    const std::vector<std::string> all = {"#FF0000", "#FFFF0080", "#00FF00", "#00FFFF01", "#0000FF", "#FF00FF00", "#123456"};
+    for (std::size_t count = 2; count <= std::min(all.size(), COLOR_PICKER_MAX_GRADIENT_COLORS); ++count) {
+        const std::vector<std::string> colors(all.begin(), all.begin() + count);
+        const auto selection = filament_color_picker_selection({colors, true});
+        REQUIRE(selection);
+        const auto result = filament_color_picker_result(*selection);
+        REQUIRE(result.gradient);
+        REQUIRE(result.colors == colors);
+        REQUIRE_FALSE(filament_color_picker_changed(*selection, filament_color_picker_selection(result)));
+        std::vector<std::string> reordered = colors;
+        std::swap(reordered.front(), reordered.back());
+        REQUIRE(filament_color_picker_changed(*selection, filament_color_picker_selection({reordered, true})));
+    }
+    REQUIRE_FALSE(filament_color_picker_selection({too_many_gradient_colors(), true}));
+}
+
+TEST_CASE("Filament selections require complete hexadecimal colors and exact endpoint counts", "[FilamentColorPicker]")
+{
+    const std::string hex = GENERATE("", "112233", "#ABC", "#1234567", "#123456789", "#GG2233", "#11223Z", "#112233G0", " #112233", "#112233 ");
+    REQUIRE_FALSE(filament_color_picker_selection({{hex}, false}));
+    REQUIRE_FALSE(filament_color_picker_selection({{"#112233", hex}, true}));
+    const auto malformed = GENERATE(FilamentColorPickerValue{{}, false},
+                                   FilamentColorPickerValue{{}, true},
+                                   FilamentColorPickerValue{{"#112233"}, true});
+    REQUIRE_FALSE(filament_color_picker_selection(malformed));
+}
+
+TEST_CASE("Every RGBA byte survives the public filament conversion round trip", "[FilamentColorPicker]")
+{
+    constexpr char digits[] = "0123456789ABCDEF";
+    for (int byte = 0; byte < 256; ++byte) {
+        std::string hex = "#";
+        for (int channel = 0; channel < 4; ++channel) {
+            hex += digits[byte >> 4];
+            hex += digits[byte & 15];
+        }
+        const auto selection = filament_color_picker_selection({{hex}, false});
+        REQUIRE(selection);
+        const auto result = filament_color_picker_result(*selection);
+        REQUIRE(result.colors == std::vector<std::string>{byte == 255 ? hex.substr(0, 7) : hex});
+        REQUIRE_FALSE(filament_color_picker_changed(*selection, filament_color_picker_selection(result)));
+    }
+}
+
+TEST_CASE("Filament serialization rejects invalid native RGBA channels", "[FilamentColorPicker]")
+{
+    const float invalid = GENERATE(-0.1f, 1.1f, std::numeric_limits<float>::infinity(), std::numeric_limits<float>::quiet_NaN());
+    const int channel = GENERATE(0, 1, 2, 3);
+    ColorRGBA color;
+    color[channel] = invalid;
+    REQUIRE_THROWS_AS(filament_color_picker_result(color), std::invalid_argument);
+    REQUIRE_THROWS_AS(filament_color_picker_result(ColorGradient{ColorRGBA::WHITE(), color}), std::invalid_argument);
+}
Author	SHA1	Message	Date
ExPikaPaka	fbaed8a512	Project the texture in the model's own orientation, and stop the preview tiling The bake frame took its orientation from the world, so turning a part on the plate slid the decoration across its surface. Turning a part is a print-time decision - clearance, supports, warping - and it should not be a design one. The frame now takes its orientation from the model and keeps world scale, so a tile is still tiling_scale printed millimetres whatever the instance's scale. The rotation is separated out by polar decomposition rather than by assuming the linear part is a rotation times a scale, since a sheared or mirrored placement is legal here. A reflection is deliberately left with the scale, so a mirrored instance still makes the frame's determinant negative and the bake still flips the normals it derives. The preview shaders rebuild that frame themselves from a world position, so they take the same rotation through a uniform; without it the fast preview and the bake would disagree, which is the class of bug this is fixing. The gizmo's own way back out to world carries the rotation too, which it did not need to when the frame was world-aligned. Tiling in the fast preview: - the sampler wrap mode was set on the height texture but not on the colour texture, which sits on its own unit and is sampled at the same uv. So with Tile off the relief stopped at one placement while the colour carried on repeating around it. - outside a single placement the colour then came out black, because a zero texture border cannot say "no colour here", only "the colour is black here". The shader now tests the uv the way sample_layer_color() does and leaves the surface its own colour. The placement gizmo is a tile of a planar projection, so it is offered only for the mappings that have one. An unwrap cuts the surface into islands and packs them, and a model's own UV channel is whatever its author drew: one tile lands there as an arbitrary curved patch with no rectangle to take hold of. Those two say so and point at the UV editor instead.	2026-10-15 15:45:47 +02:00
ExPikaPaka	597b2abac4	Merge remote-tracking branch 'origin/main' into HEAD	2026-10-15 13:13:26 +02:00
ExPikaPaka	ba4de8c1fc	Measure the placement gizmo in the frame the texture is projected in The gizmo worked in mesh-local millimetres while the texture is projected in the bake frame - world orientation and scale, anchored at the volume's origin. On an unscaled object the two agree, which is why this went unnoticed; on a scaled one the drawn tile differed from the rendered one by exactly the object's scale, and a rotated one would have skewed its axes as well. The anchor is carried into that frame at the point of use rather than stored converted, since the object can be moved, turned or scaled without leaving the mode. Getting from the frame to the screen is then a translation and nothing more, which is the point: rotation and scale are what a tile's millimetres must not be measured through. Also in this commit: a pale casing outside the dark halo, because a dark halo alone disappears against a dark backdrop and a photographic texture offers both within one tile; one rotate ring instead of four, moved to whichever corner the cursor is nearest and held there by a margin so it does not flit between two; one constant for the casing's width, after the move grip's dots turned out to carry nearly twice the casing of everything around them; a request for one more frame when a panel edit changes a preview parameter, since the panel is drawn after the 3D view and the edit was otherwise a frame late; and an animated illustration for the square-tile lock.	2026-10-15 13:13:26 +02: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
ExPikaPaka	7bce53a773	Merge branch 'main' into texture-placement-gizmo Three files conflicted, all in the texture displacement subsystem that main has been working on in parallel. apply_uv_transform and UVTransform gained main's normalized_uv parameter for TextureProjectionMethod::ModelUV. A normalized uv has no millimetre tile to divide by, so the extents are skipped for it, but the mirroring still applies: a mirror is a placement choice and means the same thing on a model's own UV layout as on a projected one. The aspect correction stays skipped, as main has it. adjust_tangent_basis now calls main's box_projection_axes instead of restating the dominant-axis choice, which also picks up main's fix to the texture's orientation. The gizmo derives its whole frame from that basis, so it follows the new conventions without needing to know about them. The basic settings rows took main's float_row, which carries the tooltip and its media as arguments, and its disabling of tile size under ModelUV. The square lock and the second extent join that disabled block, being the same millimetres from another angle. Layers now persist to the .3mf as JSON, which they did not when this branch started, so tiling_scale_v, mirror_u and mirror_v are written and read there too. The reader keeps the default for a missing key, so a project written before the tile could be rectangular or mirrored still loads as a square, unmirrored one.	2026-10-15 09:54:52 +02: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
ExPikaPaka	e65113af6d	Add edge and corner resize, mirroring and a square lock to the gizmo Follows the first pass on the placement gizmo. Handles and hit radii are twice the size, and the minimum frame with them, so the corner zones cannot bury the move area on a small tile. Each edge carries a bar that sets one tile extent, so width and height can be set on the model rather than only in the panel. The four axis arrows stay, further out on the same rays, kept apart from the bars by distance. Dragging a width or height handle back through the tile's middle mirrors the texture on that axis instead of sticking at the minimum extent. The new mirror_u and mirror_v ride as a sign on the same division as the tile extents, in apply_uv_transform and in all four shaders, and the shaded shaders' normal gradient carries the sign too. The frame was centred on uv 0, which is a corner of the image, so it straddled the four tiles meeting there and rotation pivoted on that corner. It is now centred on uv (0.5, 0.5): the frame bounds one whole tile and rotating or scaling turns and resizes the image about its middle. A scale drag read the extents straight off the cursor, so grabbing a handle anywhere inside its hit radius jumped the tile by that much. The offset of the grab from the handle is now subtracted. The square-tile lock is an icon on the Tile size row instead of a text link, reusing lock_closed.svg and lock_open.svg.	2026-10-12 09:31:32 +02:00
ExPikaPaka	91ab04e823	Redesign the texture placement gizmo and give the tile two extents The on-canvas control for a texture layer's placement was a translucent orange quad with two hairline GL arrows. It moved the texture and nothing else, had no hover state, took no notice of the theme, and sized itself from the volume's bounding box, which left it tiny on small parts and huge on large ones. Rotation and tile size were panel-only numbers. The gizmo is now one tile of the texture lying in the paint patch's tangent plane, so it draws the three values it edits: where it sits is the offset, how it is turned is the rotation, how big it is is the tile extents. It carries four chevron arms for an axis-constrained move (the silhouette of the panel's own Adjust placement icon), a six-dot move grip taken from the drag icon, a corner grip on each corner for the extents, and a ring on a short stem for the rotation. Colours come from ImGuiWrapper's COL_ORCA and the icon grey rather than raw orange and yellow. It is drawn through ImGui's foreground draw list instead of the flat shader, which is what allows antialiased sub-pixel strokes, rounded joins, a contrast halo under every stroke and a numeric readout by the cursor. That halo matters because a volume stays the same neutral grey whatever the theme, so the accent alone cannot carry contrast; the halo strength and the handle fill do. Handle sizes and hit radii are in screen pixels, so the control is equally usable at any zoom or model size, and a tile that projects below 44px is drawn at that floor and dashed to say it is not to scale. Picking is a real point-in-quad test rather than a circle through the corners, so a move can no longer start from empty space beside the tile. Rotating or resizing changes where a given offset places the tile, so every drag recomputes the offset from the centre it means to keep. That is what makes rotate and scale act in place instead of swinging the tile around the anchor, and it leaves one place that writes offset. Tile size gains a second extent. tiling_scale_v holds the v extent in mm and anything <= 0 means "same as u", which is both the default and what every layer written before this meant, so existing layers and older undo snapshots still read back as the square tiles they were. The new layer_tile_mm() states that fallback once and every consumer goes through it: the bake, both preview shaders, the UV pane and the gizmo. The panel shows one slider until the lock is opened, and the lock state is the data rather than a separate flag that could fall out of step with it. The extents now divide after the rotation in apply_uv_transform() and in all four shaders. Dividing two different extents before it would shear the tile rather than rotate it; with a square tile both orders are algebraically identical, so no existing layer changes. The inverse in UVEditorCanvas::uv_delta_to_unwrap() and the island matrix in uv_editor_island_transforms() follow the same reordering, and the texel size used for refinement and step cutting now takes the finer extent.	2026-10-12 08:04:35 +02:00