HTML in Canvas: Render Real DOM Inside <canvas>

import { LitElement, html, css, nothing } from 'lit';
import { supportsHtmlInCanvas } from '@demos/supports-html-in-canvas';
import { customElement, property, state, query } from 'lit/decorators.js';
import * as THREE from 'three';
import { buildLamp, disposeLamp, setBaseFinish, setBulbState, setShadeColor, STUDIO_PALETTES } from './lamp';
import type { LampHandle } from './lamp';
import type {
	BaseFinish,
	ConfiguratorConfigChangeDetail,
	ConfiguratorLayout,
	ConfiguratorMode,
	ConfiguratorSelectDetail,
	ConfiguratorSelectSource,
	ConfiguratorTheme,
	LampConfig,
	LampPartId,
	ProductConfiguratorEventMap,
	SceneObject,
	ShadeSwatch,
} from './types';

declare global {

	interface CanvasRenderingContext2D {

		/**
		 * Draws a laid-out DOM child of the canvas into the bitmap and returns the alignment transform.
		 *
		 * Experimental, part of the Chromium-only HTML-in-Canvas origin trial, so it is absent from `lib.dom.d.ts` and declared here.
		 * Writing the returned matrix into the element's `style.transform` is what keeps focus, hit testing, and accessibility geometry on the drawn pixels.
		 */
		drawElementImage( element: Element, dx: number, dy: number, dwidth?: number, dheight?: number ): DOMMatrix;
	}

	interface OffscreenCanvasRenderingContext2D {

		/**
		 * The offscreen mirror of {@link CanvasRenderingContext2D.drawElementImage}, declared for completeness so a worker path type-checks too.
		 */
		drawElementImage( element: Element, dx: number, dy: number, dwidth?: number, dheight?: number ): DOMMatrix;
	}

	interface HTMLCanvasElement {

		/**
		 * Opts the canvas in to the experimental model, so its direct children lay out and become drawable and hit-testable.
		 *
		 * Reflects the `layoutsubtree` HTML attribute, and is absent from `lib.dom.d.ts` because the feature is still flag-gated.
		 */
		layoutSubtree: boolean;

		/**
		 * Forces a `paint` event on the next frame, the way `requestAnimationFrame` schedules a draw.
		 */
		requestPaint(): void;
	}
}

/**
 * The swatches the shade can be recolored to, a small neutral-to-bold range so the recolor reads in both themes.
 *
 * It is a module constant rather than a property because the swatch set is part of the lamp's design, not data a harness owns, and the first entry is the default the lamp opens on.
 */
const SHADE_SWATCHES: ReadonlyArray<ShadeSwatch> = [
	{ id: 'porcelain', label: 'Porcelain', hex: '#e9e7e0' },
	{ id: 'cobalt', label: 'Cobalt', hex: '#2257e6' },
	{ id: 'moss', label: 'Moss', hex: '#3f7d5a' },
	{ id: 'clay', label: 'Clay', hex: '#c2683f' },
];

/**
 * The aspect ratio of the canvas, its height as a fraction of its width, so the stage reserves the right height before WebGL sizes itself.
 */
const CANVAS_ASPECT = 0.62;

/**
 * The labelled parts the lamp draws, in the order the overlay stacks them, so the four ids the geometry and inspector know about have a single declared source.
 */
const PART_IDS: ReadonlyArray<LampPartId> = [ 'shade', 'arm', 'bulb', 'base' ];

/**
 * A shared black color reused when a part's selection highlight is cleared, so the highlight reset allocates nothing per frame.
 */
const BLACK = new THREE.Color( 0x000000 );

/**
 * A real-time 3D product configurator: a procedural desk lamp in a WebGL canvas, with a raycast selection, an orbit drag, and an inspector, that moves its UI between three ownership models.
 *
 * The lamp is graphics the DOM cannot draw, owned by the canvas, and the labels and inspector are interface, owned by the DOM, so `mode` decides which layer carries them.
 * `canvas-only` paints the labels and a faux inspector onto a flat overlay canvas with no focusable DOM, the trap; `dom-overlay` is the version that ships, projecting each part's 3D anchor to a real HTML label kept glued as the lamp orbits, with the real inspector beside it; `html-in-canvas` feature-detects the experimental `drawElementImage` path, draws the real label nodes into the flat overlay canvas, and writes the returned alignment transform back, falling back to `dom-overlay` when the API is absent.
 * Selection is a raycast from the camera, the 3D replacement for the old 2D hit test, and the inspector recolors the shade, switches the base finish, and toggles the bulb, which relights the scene.
 *
 * @element product-configurator
 * @slot header - Sits above the stage in the left column, for a harness caption over the canvas.
 * @slot panel - Stacks under the real inspector in the right column of the `split` layout, for a harness control panel beside the canvas.
 * @slot footer - Spans both columns under the stage in the `split` layout, for a tall report or log that would otherwise strand the canvas column if stacked in the narrow side column.
 * @fires object-select - Fired when the selected part changes, carrying a `ConfiguratorSelectDetail`.
 * @fires config-change - Fired after an inspector edit, carrying the whole `LampConfig`.
 * @cssprop [--configurator-accent=#2257e6] - The selection and focus color used by the labels and the inspector.
 */
@customElement( 'product-configurator' )
export class ProductConfigurator extends LitElement {

	/**
	 * The selectable parts, the four named meshes of the lamp.
	 *
	 * It is `attribute: false` because an array binds as a property (`.objects=${parts}`) and never round-trips through a string attribute.
	 * It has no default, since inventing the parts inside the component would hide the contract that the parent names the scene; the component builds a mesh for each known id and skips any other.
	 */
	@property( { attribute: false } )
	objects: SceneObject[] = [];

	/**
	 * Which ownership model the configurator renders.
	 *
	 * `html-in-canvas` is a request, not a guarantee: when the experimental API is absent the component renders `dom-overlay` instead, so the selected mode and the active mode can differ.
	 */
	@property( { type: String } )
	mode: ConfiguratorMode = 'dom-overlay';

	/**
	 * How the canvas and the inspector are arranged.
	 *
	 * Defaults to `stacked` so a standalone embed keeps the inspector under the canvas; a harness sets `split` to get the glass-demo shape, the canvas in a left column and the inspector plus a `panel` slot in one right column, collapsing back to a single stacked column on a narrow width.
	 */
	@property( { type: String } )
	layout: ConfiguratorLayout = 'stacked';

	/**
	 * Whether to deliberately skip writing the alignment transform back to the drawn label.
	 *
	 * Teaching switch for the experimental path: with the sync omitted, the focus ring and click target drift off the drawn pixels, which is the failure the article makes visible.
	 * It does nothing outside `html-in-canvas` mode on a supporting build.
	 */
	@property( { type: Boolean, attribute: 'omit-transform-sync' } )
	omitTransformSync = false;

	/**
	 * The id of the currently selected part, or `null` when nothing is selected.
	 *
	 * It is a controllable property: leave it unset and the component manages selection itself from a raycast or a keyboard pick, or bind it (`.selectedId=${id}`) to drive several configurators from one shared selection, the way the review demo syncs three modes.
	 * Either way consumers also hear changes through the `object-select` event, and the component writes the property on every pick so the uncontrolled case stays in sync.
	 */
	@property( { attribute: 'selected-id' } )
	selectedId: string | null = null;

	/**
	 * The viewport canvas Three.js renders the lamp into, resolved by Lit after the first render.
	 */
	@query( '.viewport' )
	private $viewport!: HTMLCanvasElement;

	/**
	 * The flat 2D overlay canvas stacked over the WebGL canvas, used to paint the faux UI in `canvas-only` and to host the drawn labels in `html-in-canvas`.
	 */
	@query( '.overlay-canvas' )
	private $overlayCanvas?: HTMLCanvasElement;

	/**
	 * The selected page theme, resolved on connect and kept in sync at runtime, so the studio is lit to match the page in light and dark.
	 *
	 * It is `@state` so a runtime theme flip re-renders, and the scene recolors through {@link applyTheme} rather than a rebuild.
	 */
	@state()
	private theme: ConfiguratorTheme = 'light';

	/**
	 * The lamp's configurable state, the shade swatch, the base finish, and the bulb, edited by the inspector.
	 *
	 * It is `@state` so an edit re-renders the inspector and re-runs the overlay draw, and it opens on the first swatch with a matte base and a lit bulb so the lamp reads as switched on.
	 */
	@state()
	private config: LampConfig = {
		shadeSwatchId: SHADE_SWATCHES[ 0 ].id,
		baseFinish: 'matte',
		bulbOn: true,
	};

	/**
	 * Whether the live 2D context exposes the experimental `drawElementImage` method.
	 *
	 * Resolved on connect from a scratch canvas, so it gates the experimental path per render rather than trusting the requested `mode`.
	 * It is `@state` so flipping it triggers the re-render that mounts the drawn label nodes, since `activeMode` reads it during `render`.
	 */
	@state()
	private supportsHtmlInCanvas = false;

	/**
	 * The Three.js scene, camera, and renderer, created once the viewport exists.
	 */
	private scene: THREE.Scene | null = null;
	private camera: THREE.PerspectiveCamera | null = null;
	private renderer: THREE.WebGLRenderer | null = null;

	/**
	 * The built lamp and the handles to its parts, materials, and light, or `null` before the scene is built.
	 */
	private lamp: LampHandle | null = null;

	/**
	 * The studio floor mesh, kept so its geometry and material can be disposed on teardown.
	 */
	private floorMesh: THREE.Mesh | null = null;

	/**
	 * The studio floor material, kept so a theme change can recolor it in place.
	 */
	private floorMaterial: THREE.MeshStandardMaterial | null = null;

	/**
	 * The themed studio lights, kept so a theme change can dim or lift them to match the palette.
	 */
	private themedLights: {
		ambient: THREE.AmbientLight | null;
		key: THREE.DirectionalLight | null;
		rim: THREE.DirectionalLight | null;
	} = { ambient: null, key: null, rim: null };

	/**
	 * The reusable raycaster for the part-selection pick, allocated once.
	 */
	private readonly raycaster = new THREE.Raycaster();

	/**
	 * A reusable vector for projecting a part anchor, so the overlay sync allocates nothing per frame.
	 */
	private readonly projected = new THREE.Vector3();

	/**
	 * The overlay canvas 2D context, cached after the first paint so the per-frame draw does not re-acquire it.
	 */
	private overlayCtx: CanvasRenderingContext2D | null = null;

	/**
	 * The CSS-pixel size the overlay backing store was last sized for, so it is only resized when the box actually changes rather than every frame.
	 */
	private overlaySize = { width: 0, height: 0, dpr: 0 };

	/**
	 * The resolved selection accent as a Three.js color, cached so the per-frame highlight does not call `getComputedStyle`, and refreshed on a theme change.
	 */
	private readonly accent = new THREE.Color( 0x2257e6 );

	/**
	 * The themed colors the flat overlay paints with, cached and refreshed on a theme change so the canvas-only and drawn-label paints do not read the DOM every frame.
	 *
	 * The canvas cannot inherit a CSS color, so these mirror the tokens the rest of the page uses, resolved once per theme rather than once per frame.
	 */
	private overlayColors = {
		ink: '#17171a',
		surface: '#ffffff',
		accent: '#2257e6',
		accentInk: '#ffffff',
		fontSans: 'system-ui, sans-serif',
		fontMono: 'monospace',
	};

	/**
	 * The current screen position of each part's overlay label, in CSS pixels, recomputed on every rendered frame while the lamp is on screen.
	 *
	 * It is the bridge from the 3D scene to the 2D layers: the DOM-overlay labels read it for their `left` and `top`, and the canvas-only and drawn-label paints read it to place text, so all three layers stay glued to the orbiting model from one projection.
	 */
	@state()
	private anchorPoints: Record<string, { x: number; y: number; visible: boolean }> = {};

	/**
	 * The orbit yaw and pitch in radians, driven by the drag and applied to the lamp group each frame.
	 *
	 * The lamp rotates rather than the camera, so the studio lighting stays fixed and the part the reader turns toward stays lit; the pitch is bounded so the lamp never tips past a readable angle.
	 */
	private orbit = { yaw: 0.5, pitch: 0.05 };

	/**
	 * Whether a drag-to-orbit gesture is in progress, and the last pointer position it was sampled at.
	 */
	private isDragging = false;

	/**
	 * The id of the pointer that started the current gesture, so a second finger or pen mid-drag cannot steer, end, or cancel a gesture it does not own.
	 *
	 * `isPrimary` is not enough as a filter, since touch and pen each get their own primary pointer; the id is the one key that names this exact contact.
	 */
	private activePointerId: number | null = null;
	private lastPointer = { x: 0, y: 0 };

	/**
	 * Whether the pointer moved past a small threshold during the current gesture, so a press-and-release in place still counts as a select rather than being eaten as a drag.
	 */
	private dragMoved = false;

	/**
	 * Whether the viewport is currently on screen, so the render loop only runs while the demo is visible.
	 */
	private isVisible = true;

	/**
	 * Whether {@link setUp} has wired the scene, listeners, and observers, so its two entry points, the first update and a reconnect, can never double-wire them.
	 */
	private isSetUp = false;

	/**
	 * The media query that fires when `devicePixelRatio` changes, so the renderer and the overlay can be re-corrected on a zoom or a move to a different-density display.
	 *
	 * It is recreated on each change because the query is pinned to a single resolution, which is the lifecycle the canvas makes the author own.
	 */
	private dprQuery: MediaQueryList | null = null;

	/**
	 * The media query the studio watches so it follows the OS color scheme when the page has not pinned a theme, retained so its listener tears down on disconnect.
	 */
	private themeMedia: MediaQueryList | null = null;

	/**
	 * The observer watching `data-theme` on the document element, so an in-page theme toggle re-lights the studio at runtime, retained so it disconnects cleanly.
	 */
	private themeObserver: MutationObserver | null = null;

	/**
	 * The resize and intersection observers, tracked so they tear down cleanly on disconnect.
	 */
	private resizeObserver: ResizeObserver | null = null;
	private intersectionObserver: IntersectionObserver | null = null;

	/**
	 * The animation-frame handle, cleared on disconnect or when the demo scrolls offscreen so a hidden lamp stops its loop.
	 */
	private frame = 0;

	/**
	 * Whether the next animation frame has work to do.
	 *
	 * Nothing in the scene self-animates, so the loop keeps its frame cadence but skips the render and the overlay sync until an orbit, a selection, a config edit, a theme flip, or a resize marks the scene dirty through {@link requestRender}; label-only rendering changes in the experimental mode, a focus ring appearing on a drawn label, arrive through the canvas `paint` event and never need the flag.
	 */
	private needsRender = false;

	/**
	 * Styles for the component, scoped to its shadow root.
	 */
	static styles = css`
		:host {
			display: block;
			/* The host is a size container, so the split layout collapses on the embed's own width rather than the viewport's. */
			container-type: inline-size;
			font-family: var( --font-sans, system-ui, sans-serif );
			color: var( --ink, #17171a );
			/* Resolve the selection accent into a private name; reading --configurator-accent first, then the themed --accent, then the brand, avoids the self-reference cycle that redefining --accent here would cause when a host sets --configurator-accent to the page accent. */
			--cfg-accent: var( --configurator-accent, var( --accent, #2257e6 ) );
		}

		/* The stacked default keeps the canvas and inspector in one column; the split layout puts the canvas on the left and the inspector plus the harness panel in one right column, the glass-demo shape. */
		.layout {
			display: grid;
			gap: var( --space-4, 16px );
		}

		.layout.split {
			grid-template-columns: minmax( 0, 1fr ) 17rem;
			grid-template-areas:
				'main side'
				'footer footer';
			align-items: start;
		}

		.layout.split .main {
			grid-area: main;
		}

		.layout.split .side {
			grid-area: side;
		}

		/* The tall trailing content spans both columns under the stage, so a long report no longer strands the canvas column. */
		.layout.split .footer {
			grid-area: footer;
		}

		/* The left column: anything slotted into the header sits above the stage, and the stage carries the canvas. */
		.main {
			display: flex;
			flex-direction: column;
			gap: var( --space-3, 12px );
			min-width: 0;
		}

		/* The header slot collapses to nothing when the harness slots no caption, so a bare embed shows just the stage. */
		slot[name='header']::slotted( * ) {
			margin: 0;
		}

		/* The right column of the split layout: the real inspector stacked above whatever the harness slots in, so every control reads as one column beside the canvas. */
		.side {
			display: flex;
			flex-direction: column;
			gap: var( --space-4, 16px );
			min-width: 0;
		}

		.layout.split .inspector {
			margin-top: 0;
		}

		/* Collapse to a single stacked column when the embed itself is too narrow for a comfortable two-column split. */
		@container ( width <= 38rem ) {
			.layout.split {
				grid-template-columns: minmax( 0, 1fr );
				grid-template-areas:
					'main'
					'side'
					'footer';
			}
		}

		.stage {
			position: relative;
			width: 100%;
			aspect-ratio: 100 / 62;
			border-radius: var( --radius-md, 11px );
			border: 1px solid var( --line, #e7e6e2 );
			overflow: hidden;
			background: var( --surface, #fff );
		}

		canvas.viewport {
			display: block;
			width: 100%;
			height: 100%;
			touch-action: none;
			cursor: grab;
		}

		.stage.dragging canvas.viewport {
			cursor: grabbing;
		}

		/* The flat overlay canvas sits exactly over the WebGL canvas in CSS-pixel space, the painted faux UI in canvas-only and the drawn-label host in html-in-canvas. */
		canvas.overlay-canvas {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		/* The DOM-overlay layer sits over the canvas in CSS-pixel space, the bookkeeping the experimental API folds into the platform. */
		.overlay {
			position: absolute;
			inset: 0;
			pointer-events: none;
		}

		.overlay .label {
			position: absolute;
			transform: translate( -50%, -50% );
			padding: 3px 9px;
			font: inherit;
			font-size: 12px;
			font-weight: 500;
			line-height: 1.4;
			white-space: nowrap;
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: var( --radius-pill, 999px );
			background: var( --surface, #fff );
			color: var( --ink, #17171a );
			box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.16 );
			cursor: pointer;
			pointer-events: auto;
		}

		.overlay .label:hover {
			border-color: var( --cfg-accent );
		}

		.overlay .label:focus-visible {
			outline: 2px solid var( --cfg-accent );
			outline-offset: 2px;
		}

		.overlay .label[aria-pressed='true'] {
			border-color: var( --cfg-accent );
			background: var( --cfg-accent );
			color: var( --accent-ink, #fff );
		}

		/*
		 * The drawn labels are real children of the overlay canvas in the experimental path: laid out and hit-testable, never display:none, anchored at the canvas origin with style.transform reserved for the platform alignment matrix that places and keeps them on the drawn pixels.
		 * Their look is kept identical to the DOM-overlay label above, the small light pill with ink text and a hairline border, so the only difference a reader can tell between the two modes is the mechanism, not the size or color of the pill.
		 */
		canvas.overlay-canvas .drawn-label {
			position: absolute;
			top: 0;
			left: 0;
			padding: 3px 9px;
			font: inherit;
			font-size: 12px;
			font-weight: 500;
			line-height: 1.4;
			white-space: nowrap;
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: var( --radius-pill, 999px );
			background: var( --surface, #fff );
			color: var( --ink, #17171a );
			box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.16 );
			cursor: pointer;
			pointer-events: auto;
		}

		canvas.overlay-canvas .drawn-label:focus-visible {
			outline: 2px solid var( --cfg-accent );
			outline-offset: 2px;
		}

		canvas.overlay-canvas .drawn-label[aria-pressed='true'] {
			border-color: var( --cfg-accent );
			background: var( --cfg-accent );
			color: var( --accent-ink, #fff );
		}

		.inspector {
			margin-top: var( --space-3, 12px );
			padding: var( --space-4, 16px );
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: var( --radius-md, 11px );
			background: var( --surface, #fff );
		}

		.inspector .head {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: var( --space-3, 12px );
			margin-bottom: var( --space-3, 12px );
		}

		.inspector h3 {
			margin: 0;
			font-size: 14px;
			color: var( --ink, #17171a );
		}

		.inspector .part-tag {
			font-family: var( --font-mono, monospace );
			font-size: 11px;
			color: var( --ink-faint, #71717b );
		}

		.field {
			display: flex;
			flex-direction: column;
			gap: 6px;
			margin-bottom: var( --space-3, 12px );
		}

		.field:last-child {
			margin-bottom: 0;
		}

		.field > .field-label {
			font-family: var( --font-mono, monospace );
			font-size: 10px;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var( --ink-faint, #71717b );
		}

		.swatches {
			display: flex;
			gap: 8px;
		}

		.swatch {
			width: 28px;
			height: 28px;
			padding: 0;
			border-radius: 50%;
			border: 2px solid var( --line, #e7e6e2 );
			cursor: pointer;
		}

		.swatch[aria-pressed='true'] {
			border-color: var( --cfg-accent );
			box-shadow: 0 0 0 2px var( --surface, #fff ), 0 0 0 4px var( --cfg-accent );
		}

		.segmented {
			display: inline-flex;
			border: 1px solid var( --line, #e7e6e2 );
			border-radius: var( --radius-sm, 7px );
			overflow: hidden;
			width: max-content;
		}

		.segmented button {
			padding: 7px 14px;
			font: inherit;
			font-size: 13px;
			border: 0;
			background: var( --bg, #fcfcfb );
			color: var( --ink, #17171a );
			cursor: pointer;
		}

		.segmented button + button {
			border-left: 1px solid var( --line, #e7e6e2 );
		}

		.segmented button[aria-pressed='true'] {
			background: var( --cfg-accent );
			color: var( --accent-ink, #fff );
		}

		.switch {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			background: none;
			border: 0;
			padding: 0;
			font: inherit;
			font-size: 13px;
			color: var( --ink, #17171a );
			cursor: pointer;
		}

		.switch .track {
			position: relative;
			width: 36px;
			height: 20px;
			border-radius: 999px;
			background: var( --line, #e7e6e2 );
			transition: background 0.2s ease;
			flex: none;
		}

		.switch .track.on {
			background: var( --cfg-accent );
		}

		.switch .knob {
			position: absolute;
			top: 2px;
			left: 2px;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: #fff;
			transition: transform 0.2s ease;
		}

		.switch .track.on .knob {
			transform: translateX( 16px );
		}
	`;

	/**
	 * Resolves the page theme and the experimental-API support before the first render, so the studio opens in the page's palette and the first render already knows the active mode.
	 *
	 * On a reconnect it also re-runs {@link setUp}: the shadow DOM survives a re-parenting, so `hasUpdated` stays true, `firstUpdated` never fires again, and the wiring {@link tearDown} removed has to come back here, with the `@query` fields still resolving into the kept shadow root.
	 */
	connectedCallback(): void {
		super.connectedCallback();
		this.theme = this.detectTheme();
		this.resolveSupport();

		if ( this.hasUpdated ) {
			this.setUp();
		}
	}

	/**
	 * Runs the shared {@link setUp} once the viewport canvas exists after the first render.
	 */
	protected firstUpdated(): void {
		this.setUp();
	}

	/**
	 * Builds the scene, wires the controls, observers, and theme listeners, and kicks the loop.
	 *
	 * It is shared by `firstUpdated` and a reconnect, because `firstUpdated` only ever fires once: without `connectedCallback` re-running this, a configurator moved to a new parent would come back with everything {@link tearDown} released still gone.
	 * The `isSetUp` guard keeps the two entry points from wiring the scene twice.
	 * It also refuses to wire a detached element: an append and remove in the same task still runs the pending first update after disconnection, and window listeners wired there would never hear the disconnect that already happened.
	 */
	private setUp(): void {
		if ( this.isSetUp || ! this.isConnected ) {
			return;
		}

		this.isSetUp = true;
		this.refreshAccent();
		this.initScene();
		this.applySelectionHighlight();
		this.bindEvents();
		this.bindThemeListeners();
		this.observeDevicePixelRatio();
		this.startLoop();
	}

	/**
	 * Re-runs the overlay paint whenever a property that changes the flat layers updates, so a mode switch, a selection, or a config edit repaints the canvas-only UI or the drawn labels.
	 *
	 * A selection, mode, or objects change also marks the scene dirty through {@link requestRender}, so the gated loop draws the change on its next frame.
	 * The 3D scene redraws itself in the loop, so this only touches the flat overlay, and only when the loop is paused does it need to force one; the guarded call keeps a visible, animating demo from double-painting.
	 * The `anchorPoints` guard is what keeps a paused offscreen demo from looping: {@link syncOverlay} writes the `anchorPoints` `@state`, which schedules another update, so re-running `syncOverlay` on that follow-up would project, write `anchorPoints` again, and never terminate; skipping the call when the only change is `anchorPoints` lets a real change like a theme, selection, mode, or config edit sync the overlay exactly once and then settle.
	 */
	protected updated( changed: Map<PropertyKey, unknown> ): void {
		if ( changed.has( 'selectedId' ) ) {
			this.applySelectionHighlight();
			this.requestRender();
		}

		if ( changed.has( 'mode' ) || changed.has( 'objects' ) ) {
			this.requestRender();
		}

		if ( this.frame === 0 && ! changed.has( 'anchorPoints' ) ) {
			this.syncOverlay();
		}
	}

	/**
	 * Tears the configurator down through the shared {@link tearDown} when it leaves the document.
	 */
	disconnectedCallback(): void {
		super.disconnectedCallback();
		this.tearDown();
	}

	/**
	 * Stops the loop and tears down every observer, listener, and the WebGL context so a removed configurator leaks nothing.
	 *
	 * It is the mirror of {@link setUp} rather than the body of `disconnectedCallback`, so a reconnected configurator can rebuild exactly what this released; clearing `isSetUp` is what re-arms that rebuild.
	 */
	private tearDown(): void {
		this.isSetUp = false;
		this.stopLoop();

		this.resizeObserver?.disconnect();
		this.resizeObserver = null;
		this.intersectionObserver?.disconnect();
		this.intersectionObserver = null;
		this.dprQuery?.removeEventListener( 'change', this.onDevicePixelRatioChange );
		this.dprQuery = null;
		this.themeMedia?.removeEventListener( 'change', this.onThemeMediaChange );
		this.themeMedia = null;
		this.themeObserver?.disconnect();
		this.themeObserver = null;

		this.$viewport?.removeEventListener( 'pointerdown', this.onPointerDown );
		window.removeEventListener( 'pointermove', this.onPointerMove );
		window.removeEventListener( 'pointerup', this.onPointerUp );
		window.removeEventListener( 'pointercancel', this.onPointerCancel );
		this.$overlayCanvas?.removeEventListener( 'paint', this.onOverlayPaint );

		if ( this.lamp ) {
			disposeLamp( this.lamp );
			this.lamp = null;
		}

		this.floorMesh?.geometry.dispose();
		this.floorMesh = null;
		this.floorMaterial?.dispose();
		this.floorMaterial = null;
		this.renderer?.dispose();
		this.renderer = null;

		// The window listeners that would release a live gesture are gone now, so the flags reset here; a stale drag would otherwise let plain hover motion orbit the lamp after a reconnect, since a mouse keeps a stable pointerId.
		this.isDragging = false;
		this.dragMoved = false;
		this.activePointerId = null;
	}

	/**
	 * The mode actually rendered, which is the requested mode unless `html-in-canvas` was asked for without support.
	 *
	 * This is the single place the requested-versus-active split is resolved, so the template and the overlay paint agree on which layer owns the labels.
	 */
	private get activeMode(): ConfiguratorMode {
		if ( this.mode === 'html-in-canvas' && ! this.supportsHtmlInCanvas ) {
			return 'dom-overlay';
		}

		return this.mode;
	}

	/**
	 * The studio palette for the current theme, the one object the scene materials and lights read.
	 */
	private get palette() {
		return STUDIO_PALETTES[ this.theme ];
	}

	/**
	 * The four selectable parts that map onto a real lamp mesh, in the lamp's stacking order.
	 *
	 * The component only knows the four lamp ids, so it filters the bound scene to them and keeps them in a stable order, which keeps the overlay labels and the raycast list aligned with the geometry the helper built.
	 */
	private get parts(): SceneObject[] {
		const byId = new Map( this.objects.map( ( object ) => [ object.id, object ] ) );
		const ordered: SceneObject[] = [];

		for ( const id of PART_IDS ) {
			const object = byId.get( id );

			if ( object ) {
				ordered.push( object );
			}
		}

		return ordered;
	}

	/**
	 * The selected part, or `undefined` when nothing is selected or the selection is not a known lamp part.
	 */
	private get selectedPart(): SceneObject | undefined {
		return this.parts.find( ( part ) => part.id === this.selectedId );
	}

	/**
	 * Records whether the drawn-label path can run, through the shared {@link supportsHtmlInCanvas} predicate that feature-detects the full path, `drawElementImage` on a live 2D context and `requestPaint` on the canvas, rather than sniffing a UA string.
	 *
	 * It runs from `connectedCallback`, since the probe needs only `document`, so the first render already knows the answer instead of flipping the mode an update cycle later.
	 */
	private resolveSupport(): void {
		this.supportsHtmlInCanvas = supportsHtmlInCanvas();
	}

	/**
	 * Resolves the page theme the same way the demo page decides it: an explicit `data-theme` on the document element wins, and the OS color scheme is the fallback when nothing is pinned.
	 *
	 * @returns The theme the studio should light for right now.
	 */
	private detectTheme(): ConfiguratorTheme {
		const pinned = document.documentElement.dataset.theme;

		if ( pinned === 'dark' || pinned === 'light' ) {
			return pinned;
		}

		return window.matchMedia( '(prefers-color-scheme: dark)' ).matches ? 'dark' : 'light';
	}

	/**
	 * The current size of the viewport canvas in CSS pixels, read from the element so it is right in both standalone and embedded contexts.
	 */
	private viewportSize(): { width: number; height: number } {
		return {
			width: this.$viewport.clientWidth || 600,
			height: this.$viewport.clientHeight || Math.round( 600 * CANVAS_ASPECT ),
		};
	}

	/**
	 * Creates the scene, camera, renderer, the studio floor and lighting, and the lamp, then frames the camera on the lamp.
	 */
	private initScene(): void {
		const palette = this.palette;
		const scene = new THREE.Scene();
		scene.background = new THREE.Color( palette.background );
		this.scene = scene;

		const size = this.viewportSize();
		const camera = new THREE.PerspectiveCamera( 38, size.width / size.height, 0.1, 100 );
		camera.position.set( 0, 0.55, 5.6 );
		camera.lookAt( 0, 0.26, 0 );
		this.camera = camera;

		const renderer = new THREE.WebGLRenderer( { canvas: this.$viewport, antialias: true, alpha: true } );
		renderer.setSize( size.width, size.height, false );
		renderer.setPixelRatio( Math.min( window.devicePixelRatio || 1, 2 ) );
		renderer.toneMapping = THREE.ACESFilmicToneMapping;
		renderer.toneMappingExposure = 1.1;
		this.renderer = renderer;

		this.buildStudio( scene );
		this.buildLampInto( scene );
	}

	/**
	 * Builds the studio floor and the three-point lighting from the current palette, keeping each so a theme change can recolor or re-level it.
	 *
	 * @param scene - The scene to add the studio to.
	 */
	private buildStudio( scene: THREE.Scene ): void {
		const palette = this.palette;

		const floorMaterial = new THREE.MeshStandardMaterial( { color: palette.floor, roughness: 0.95, metalness: 0.05 } );
		const floor = new THREE.Mesh( new THREE.CircleGeometry( 6, 64 ), floorMaterial );
		floor.rotation.x = -Math.PI / 2;
		floor.position.y = -0.95;
		scene.add( floor );
		this.floorMesh = floor;
		this.floorMaterial = floorMaterial;

		const ambient = new THREE.AmbientLight( 0xffffff, palette.ambient );
		scene.add( ambient );
		this.themedLights.ambient = ambient;

		const key = new THREE.DirectionalLight( 0xffffff, palette.key );
		key.position.set( 2.6, 4, 3.2 );
		scene.add( key );
		this.themedLights.key = key;

		const rim = new THREE.DirectionalLight( 0xbcd0ff, palette.rim );
		rim.position.set( -3, 2.2, -2.6 );
		scene.add( rim );
		this.themedLights.rim = rim;
	}

	/**
	 * Builds the lamp from the helper in the lamp's current config and adds it to the scene, applying the current orbit so it opens at a readable three-quarter angle.
	 *
	 * @param scene - The scene to add the lamp to.
	 */
	private buildLampInto( scene: THREE.Scene ): void {
		const lamp = buildLamp( this.palette, this.shadeHex(), this.config.baseFinish, this.config.bulbOn );
		lamp.group.rotation.set( this.orbit.pitch, this.orbit.yaw, 0 );
		scene.add( lamp.group );
		this.lamp = lamp;
	}

	/**
	 * The hex color of the currently selected shade swatch, falling back to the first swatch when the stored id is unknown.
	 */
	private shadeHex(): string {
		const swatch = SHADE_SWATCHES.find( ( entry ) => entry.id === this.config.shadeSwatchId ) ?? SHADE_SWATCHES[ 0 ];
		return swatch.hex;
	}

	/**
	 * Wires the orbit pointer listeners, the overlay's `paint` listener, the resize observer that keeps the renderer matched to the embedded stage, and the intersection observer that pauses the loop offscreen.
	 *
	 * The orbit starts on a `pointerdown` on the viewport and tracks on the window so a drag that leaves the canvas keeps rotating, and a release without a meaningful move is treated as a select on the same press.
	 * The `paint` listener registers once, because the overlay canvas is rendered in every mode and so survives a mode switch; on a build without the experimental API the event never fires, which leaves the handler inert.
	 */
	private bindEvents(): void {
		this.$viewport.addEventListener( 'pointerdown', this.onPointerDown );
		window.addEventListener( 'pointermove', this.onPointerMove );
		window.addEventListener( 'pointerup', this.onPointerUp );
		window.addEventListener( 'pointercancel', this.onPointerCancel );
		this.$overlayCanvas?.addEventListener( 'paint', this.onOverlayPaint );

		this.resizeObserver = new ResizeObserver( () => this.onResize() );
		this.resizeObserver.observe( this.$viewport );

		this.intersectionObserver = new IntersectionObserver(
			( entries ) => this.onIntersection( entries ),
			{ threshold: 0.01 },
		);
		this.intersectionObserver.observe( this.$viewport );
	}

	/**
	 * Wires the two ways the page theme can change at runtime: the OS color scheme and an in-page `data-theme` toggle, both funnelled through {@link refreshTheme}.
	 */
	private bindThemeListeners(): void {
		this.themeMedia = window.matchMedia( '(prefers-color-scheme: dark)' );
		this.themeMedia.addEventListener( 'change', this.onThemeMediaChange );

		this.themeObserver = new MutationObserver( () => this.refreshTheme() );
		this.themeObserver.observe( document.documentElement, { attributes: true, attributeFilter: [ 'data-theme' ] } );
	}

	/**
	 * Re-resolves the OS color scheme into the studio when the system theme flips.
	 */
	private onThemeMediaChange = (): void => {
		this.refreshTheme();
	};

	/**
	 * Re-resolves the theme and, when it actually changed, recolors the studio and the shared metal so the lamp follows the page.
	 */
	private refreshTheme(): void {
		const next = this.detectTheme();

		if ( next === this.theme ) {
			return;
		}

		this.theme = next;
		this.applyTheme();
	}

	/**
	 * Pushes the current palette onto the live scene: the background, the floor, the lights, and the shared metal tone of the arm and base, so a runtime theme change lands without rebuilding the scene.
	 */
	private applyTheme(): void {
		const palette = this.palette;

		if ( this.scene ) {
			this.scene.background = new THREE.Color( palette.background );
		}

		this.floorMaterial?.color.setHex( palette.floor );

		if ( this.themedLights.ambient ) {
			this.themedLights.ambient.intensity = palette.ambient;
		}

		if ( this.themedLights.key ) {
			this.themedLights.key.intensity = palette.key;
		}

		if ( this.themedLights.rim ) {
			this.themedLights.rim.intensity = palette.rim;
		}

		if ( this.lamp ) {
			this.lamp.baseMaterial.color.setHex( palette.metal );
			this.lamp.armMaterial.color.setHex( palette.metal );
		}

		this.refreshAccent();
		this.applySelectionHighlight();
		this.requestRender();
	}

	/**
	 * Sizes the WebGL backing store and the overlay backing store for the current device pixel ratio, and rebuilds the one-shot listener for the next change.
	 *
	 * `matchMedia( '(resolution: Ndppx)' )` only watches the current ratio, so a move to a different-density display needs the query rebuilt each time; the renderer caps the ratio at two so a very dense display does not balloon the backing store.
	 */
	private observeDevicePixelRatio(): void {
		this.dprQuery?.removeEventListener( 'change', this.onDevicePixelRatioChange );
		const dpr = window.devicePixelRatio || 1;
		this.dprQuery = window.matchMedia( `(resolution: ${ dpr }dppx)` );
		this.dprQuery.addEventListener( 'change', this.onDevicePixelRatioChange, { once: true } );
		this.renderer?.setPixelRatio( Math.min( dpr, 2 ) );
	}

	/**
	 * Re-corrects the backing stores after the device pixel ratio changes, then re-arms the watcher and repaints.
	 */
	private onDevicePixelRatioChange = (): void => {
		this.observeDevicePixelRatio();
		this.onResize();
	};

	/**
	 * Resizes the renderer and updates the camera aspect when the viewport's CSS box changes, then repaints the overlay.
	 */
	private onResize(): void {
		if ( ! this.camera || ! this.renderer ) {
			return;
		}

		const size = this.viewportSize();
		this.camera.aspect = size.width / size.height;
		this.camera.updateProjectionMatrix();
		this.renderer.setSize( size.width, size.height, false );
		this.requestRender();
		this.syncOverlay();
	}

	/**
	 * Pauses or resumes the render loop as the demo scrolls in and out of view, so an offscreen lamp costs no frames.
	 *
	 * @param entries - The intersection records for the observed viewport.
	 */
	private onIntersection( entries: IntersectionObserverEntry[] ): void {
		for ( const entry of entries ) {
			this.isVisible = entry.isIntersecting;

			if ( this.isVisible ) {
				this.startLoop();
			} else {
				this.stopLoop();
			}
		}
	}

	/**
	 * Begins a drag-to-orbit gesture, recording the start pointer so motion is measured as a delta and a press in place can still resolve to a select.
	 *
	 * Only the primary pointer's primary button starts a gesture: a right or middle click falls through to the browser, since a context menu can swallow the matching release and leave a phantom drag armed, and a gesture already in progress owns the viewport, so a new contact of any type is ignored until the owning pointer releases, because `isPrimary` is per pointer type and a first touch mid-mouse-drag would otherwise pass the guard and steal the gesture.
	 *
	 * @param event - The pointerdown on the viewport.
	 */
	private onPointerDown = ( event: PointerEvent ): void => {
		if ( this.activePointerId !== null || ! event.isPrimary || event.button !== 0 ) {
			return;
		}

		this.isDragging = true;
		this.dragMoved = false;
		this.activePointerId = event.pointerId;
		this.lastPointer = { x: event.clientX, y: event.clientY };
	};

	/**
	 * Applies a drag delta to the orbit yaw and pitch while a gesture is active, bounding the pitch so the lamp stays framed.
	 *
	 * Once the pointer has moved past a few pixels the gesture is marked as a drag, so the matching release orbits rather than selecting.
	 *
	 * @param event - The pointermove on the window.
	 */
	private onPointerMove = ( event: PointerEvent ): void => {
		if ( ! this.isDragging || event.pointerId !== this.activePointerId ) {
			return;
		}

		const dx = event.clientX - this.lastPointer.x;
		const dy = event.clientY - this.lastPointer.y;
		this.lastPointer = { x: event.clientX, y: event.clientY };

		if ( Math.abs( dx ) + Math.abs( dy ) > 3 ) {
			this.dragMoved = true;
		}

		this.orbit.yaw += dx * 0.01;
		this.orbit.pitch += dy * 0.01;
		this.orbit.pitch = Math.max( -0.5, Math.min( 0.6, this.orbit.pitch ) );
		this.requestRender();
	};

	/**
	 * Ends the gesture, and when the pointer never moved past the drag threshold, treats the release as a raycast select on the part under it.
	 *
	 * @param event - The pointerup on the window.
	 */
	private onPointerUp = ( event: PointerEvent ): void => {
		if ( ! this.isDragging || event.pointerId !== this.activePointerId ) {
			return;
		}

		this.isDragging = false;
		this.activePointerId = null;

		if ( ! this.dragMoved ) {
			this.pickAt( event );
		}
	};

	/**
	 * Abandons the gesture when the browser cancels the owning pointer, a touch scroll takeover or a system sheet, without treating the interruption as a select.
	 *
	 * Only the gesture's own pointer can cancel it, so an unrelated contact being cancelled leaves a live drag alone.
	 */
	private onPointerCancel = ( event: PointerEvent ): void => {
		if ( event.pointerId !== this.activePointerId ) {
			return;
		}

		this.isDragging = false;
		this.activePointerId = null;
	};

	/**
	 * Raycasts from the camera through a pointer position and selects the lamp part it hits, or clears the selection on a miss.
	 *
	 * This is the article's 3D hit-testing lesson: there is still no built-in canvas hit test, so the pointer is converted into normalized device coordinates, `raycaster.setFromCamera` builds the ray, and `intersectObjects` against the whole lamp group resolves the nearest hit to a part id, the raycast that replaces the old `isPointInPath`.
	 * Every visible mesh carries the id of the part it belongs to, so a click on a cosmetic piece like the shade cap or the neck still selects; a hit whose chain carries no id, the additive glow halo, falls through to the next hit rather than eating the click, and the selection only clears when nothing in the list resolves.
	 * In `canvas-only` the painted UI sits on top of the scene, so its pills, swatches, and panel are hit-tested first, more controls whose geometry has to be re-derived by hand because no DOM exists to do it.
	 *
	 * @param event - The pointer event whose position to pick at.
	 */
	private pickAt( event: PointerEvent ): void {
		if ( ! this.camera || ! this.lamp ) {
			return;
		}

		if ( this.activeMode === 'canvas-only' && this.pickFauxUiAt( event ) ) {
			return;
		}

		const rect = this.$viewport.getBoundingClientRect();
		const ndc = new THREE.Vector2(
			( ( event.clientX - rect.left ) / rect.width ) * 2 - 1,
			-( ( event.clientY - rect.top ) / rect.height ) * 2 + 1,
		);
		this.raycaster.setFromCamera( ndc, this.camera );

		const hits = this.raycaster.intersectObjects( this.lamp.group.children, true );

		for ( const hit of hits ) {
			const id = this.partIdForObject( hit.object );

			if ( id ) {
				this.select( id, 'canvas' );
				return;
			}
		}

		this.select( null, 'canvas' );
	}

	/**
	 * Hit-tests the painted faux UI by hand, the part label pills first, then the inspector's swatch row, then the panel body, and applies whatever the matching real control would do.
	 *
	 * This mirrors the exact geometry {@link paintPill} and {@link paintFauxInspector} paint (the pill boxes around the visible anchors, the swatch centers and radius, the {@link fauxPanelRect} box), because painted pixels carry no hit regions of their own.
	 * That duplication is the point the trap teaches: the mouse path can be made to feel complete, but every painted control costs a hand-derived hit region like this, the demo now pays that cost for all of them, and focus, the accessibility tree, and text selection still get nothing.
	 * A hit on the panel body that lands on no control still returns `true`, so a click on the painted inspector never raycasts the scene through it.
	 * The swatch hit radius is a couple of pixels wider than the painted circle so the click is comfortable, the kind of forgiveness a real `<button>` gives for free.
	 *
	 * @param event - The pointer event whose position to test.
	 * @returns Whether the point landed on the painted UI, with the matching action applied.
	 */
	private pickFauxUiAt( event: PointerEvent ): boolean {
		const rect = this.$viewport.getBoundingClientRect();
		const px = event.clientX - rect.left;
		const py = event.clientY - rect.top;

		// Test in reverse paint order, so the topmost painted thing wins: the swatches sit on the panel, the panel covers any pill it overlaps, and the pills sit over the scene.
		const panel = this.fauxPanelRect( rect.width, rect.height );
		const swatchY = panel.y + 54 + 8;
		let swatchX = panel.x + 12 + 8;

		for ( const swatch of SHADE_SWATCHES ) {
			if ( Math.hypot( px - swatchX, py - swatchY ) <= 10 ) {
				this.onSelectSwatch( swatch.id );
				return true;
			}

			swatchX += 24;
		}

		if ( px >= panel.x && px <= panel.x + panel.width && py >= panel.y && py <= panel.y + panel.height ) {
			return true;
		}

		const ctx = this.overlayCtx;

		if ( ctx ) {
			ctx.font = `600 12px ${ this.overlayColors.fontSans }`;

			// Within the pills the test also runs in reverse paint order, since a later-painted pill covers an earlier one where they overlap: one more stacking decision the DOM normally owns and painted UI has to re-derive.
			for ( const part of [ ...this.parts ].reverse() ) {
				const point = this.anchorPoints[ part.id ];

				if ( ! point || ! point.visible ) {
					continue;
				}

				const padX = 9;
				const boxWidth = ctx.measureText( part.label ).width + padX * 2;
				const boxHeight = 22;
				const x = point.x - boxWidth / 2;
				const y = point.y - boxHeight / 2;

				if ( px >= x && px <= x + boxWidth && py >= y && py <= y + boxHeight ) {
					this.select( part.id, 'canvas' );
					return true;
				}
			}
		}

		return false;
	}

	/**
	 * Resolves the part a hit object belongs to by walking its ancestry to the first stamped `userData.partId`.
	 *
	 * The geometry helper stamps every visible mesh, cosmetic pieces included, so a hit anywhere on the lamp maps to the part a user believes they clicked; the glow sprite is left unstamped on purpose, so this returns `null` for it and the caller moves on to the next hit.
	 *
	 * @param object - The object the raycaster returned.
	 * @returns The part id stamped on the object or an ancestor, or `null` when the chain carries none.
	 */
	private partIdForObject( object: THREE.Object3D ): LampPartId | null {
		let current: THREE.Object3D | null = object;

		while ( current ) {
			const stamped = current.userData.partId;
			const id = PART_IDS.find( ( partId ) => partId === stamped );

			if ( id ) {
				return id;
			}

			current = current.parent;
		}

		return null;
	}

	/**
	 * Starts the render loop if it is not already running and the demo is on screen, and marks the scene dirty so the first frame back repaints.
	 */
	private startLoop(): void {
		if ( this.frame === 0 && this.isVisible ) {
			this.frame = requestAnimationFrame( this.renderLoop );
		}

		this.requestRender();
	}

	/**
	 * Stops the render loop and clears the frame handle so it can be restarted cleanly.
	 */
	private stopLoop(): void {
		if ( this.frame !== 0 ) {
			cancelAnimationFrame( this.frame );
			this.frame = 0;
		}
	}

	/**
	 * Marks the scene dirty so the next animation frame renders the WebGL view and re-syncs the overlay.
	 */
	private requestRender(): void {
		this.needsRender = true;
	}

	/**
	 * The render loop: applies the orbit to the lamp, draws the WebGL frame, and re-syncs the overlay so the labels stay glued as the model turns.
	 *
	 * The loop stays hot at the frame cadence while the demo is on screen, but the work is gated on {@link needsRender}: an idle frame re-arms itself and returns, so a lamp nobody is touching renders nothing and writes no fresh `anchorPoints`, and the first frame after a change does the full pass.
	 */
	private renderLoop = (): void => {
		this.frame = requestAnimationFrame( this.renderLoop );

		if ( ! this.needsRender ) {
			return;
		}

		if ( ! this.renderer || ! this.scene || ! this.camera || ! this.lamp ) {
			return;
		}

		this.needsRender = false;
		this.lamp.group.rotation.set( this.orbit.pitch, this.orbit.yaw, 0 );
		this.renderer.render( this.scene, this.camera );
		this.syncOverlay();
	};

	/**
	 * Lifts the emissive of the selected part and rests every other part, so the selection reads in 3D as a glow on the chosen mesh in either theme.
	 *
	 * It runs on a selection or theme change rather than every frame, since the emissive persists in the material between renders, and the cached accent keeps it off the `getComputedStyle` path.
	 * The bulb is left to its own lit glow, so selecting it does not fight the bulb toggle; its overlay label and inspector heading still mark the selection.
	 */
	private applySelectionHighlight(): void {
		if ( ! this.lamp ) {
			return;
		}

		for ( const id of PART_IDS ) {
			if ( id === 'bulb' ) {
				continue;
			}

			const material = this.lamp.parts[ id ].material;

			if ( Array.isArray( material ) || ! ( material instanceof THREE.MeshStandardMaterial ) ) {
				continue;
			}

			const selected = id === this.selectedId;
			material.emissive.copy( selected ? this.accent : BLACK );
			material.emissiveIntensity = selected ? 0.32 : 0;
		}
	}

	/**
	 * Projects each part's 3D anchor to a CSS-pixel screen position and stores it, then repaints the flat overlay for the active mode.
	 *
	 * This is the alignment bookkeeping the article says the overlay owns: the anchor is taken into world space through the lamp's matrix, projected with the camera, and converted from normalized device coordinates to CSS pixels against the canvas rect, which keeps the projection device-pixel-ratio correct because the rect is in CSS pixels while the WebGL backing store carries the ratio separately.
	 */
	private syncOverlay(): void {
		if ( ! this.camera || ! this.lamp ) {
			return;
		}

		const rect = this.$viewport.getBoundingClientRect();
		const width = rect.width || 1;
		const height = rect.height || 1;
		this.lamp.group.updateMatrixWorld();
		const next: Record<string, { x: number; y: number; visible: boolean }> = {};

		for ( const id of PART_IDS ) {
			this.projected.copy( this.lamp.anchors[ id ] );
			this.lamp.group.localToWorld( this.projected );
			this.projected.project( this.camera );
			next[ id ] = {
				x: ( this.projected.x * 0.5 + 0.5 ) * width,
				y: ( -this.projected.y * 0.5 + 0.5 ) * height,
				visible: this.projected.z < 1,
			};
		}

		this.anchorPoints = next;
		this.paintFlatOverlay();
	}

	/**
	 * Repaints the flat overlay canvas for the active mode: the faux UI in `canvas-only`, a requested `paint` event for the drawn labels in `html-in-canvas`, and a clear in `dom-overlay` where real HTML owns the labels.
	 *
	 * The experimental branch neither draws nor clears here; it calls `requestPaint()` and {@link onOverlayPaint} clears and draws inside the event, so a platform-initiated paint, a focus ring appearing on a drawn label, repaints the whole canvas atomically instead of compositing over pixels this pass left behind. The shared {@link supportsHtmlInCanvas} predicate gates the mode on both methods, so the branch only runs where the request is real.
	 */
	private paintFlatOverlay(): void {
		const $canvas = this.$overlayCanvas;

		if ( ! $canvas ) {
			return;
		}

		if ( ! this.overlayCtx ) {
			this.overlayCtx = $canvas.getContext( '2d' );
		}

		const ctx = this.overlayCtx;

		if ( ! ctx ) {
			return;
		}

		const rect = this.$viewport.getBoundingClientRect();
		const dpr = window.devicePixelRatio || 1;
		const cssWidth = rect.width || 1;
		const cssHeight = rect.height || 1;

		// Resize the backing store when the box or the device pixel ratio changes, since assigning width or height clears and reallocates the canvas, which would flicker if done every frame; keying on dpr too reallocates when only the ratio shifts (a display move or browser zoom that leaves the CSS box bit-identical), matching the WebGL side that already re-sizes for the new ratio.
		if ( this.overlaySize.width !== cssWidth || this.overlaySize.height !== cssHeight || this.overlaySize.dpr !== dpr ) {
			$canvas.width = Math.round( cssWidth * dpr );
			$canvas.height = Math.round( cssHeight * dpr );
			this.overlaySize = { width: cssWidth, height: cssHeight, dpr };
		}

		if ( this.activeMode === 'html-in-canvas' ) {
			$canvas.requestPaint();
			return;
		}

		ctx.setTransform( dpr, 0, 0, dpr, 0, 0 );
		ctx.clearRect( 0, 0, cssWidth, cssHeight );

		if ( this.activeMode === 'canvas-only' ) {
			this.paintFauxUi( ctx, cssWidth, cssHeight );
		}
	}

	/**
	 * Paints the canvas-only trap: every part label and a faux inspector panel, all as raw pixels with no DOM behind them.
	 *
	 * It looks like a working configurator, but the text is pixels that cannot be selected, found in page, or reached with a Tab key or a screen reader, which is the trap a real 3D scene invites because it is exactly where someone reaches for drawing the UI onto the canvas too.
	 *
	 * @param ctx - The overlay 2D context, scaled so one unit is one CSS pixel.
	 * @param width - The overlay width in CSS pixels.
	 * @param height - The overlay height in CSS pixels.
	 */
	private paintFauxUi( ctx: CanvasRenderingContext2D, width: number, height: number ): void {
		for ( const part of this.parts ) {
			const point = this.anchorPoints[ part.id ];

			if ( ! point || ! point.visible ) {
				continue;
			}

			this.paintPill( ctx, part.label, point.x, point.y, part.id === this.selectedId );
		}

		this.paintFauxInspector( ctx, width, height );
	}

	/**
	 * Paints one rounded label pill centered on a point, the faux equivalent of an overlay label, from the cached themed colors.
	 *
	 * @param ctx - The overlay 2D context.
	 * @param text - The label text.
	 * @param cx - The pill center x in CSS pixels.
	 * @param cy - The pill center y in CSS pixels.
	 * @param selected - Whether to fill the pill with the accent.
	 */
	private paintPill( ctx: CanvasRenderingContext2D, text: string, cx: number, cy: number, selected: boolean ): void {
		const colors = this.overlayColors;
		ctx.font = `600 12px ${ colors.fontSans }`;
		const padX = 9;
		const boxWidth = ctx.measureText( text ).width + padX * 2;
		const boxHeight = 22;
		const x = cx - boxWidth / 2;
		const y = cy - boxHeight / 2;

		const pill = new Path2D();
		pill.roundRect( x, y, boxWidth, boxHeight, 11 );
		ctx.fillStyle = selected ? colors.accent : colors.surface;
		ctx.fill( pill );
		ctx.lineWidth = 1;
		ctx.strokeStyle = selected ? colors.accent : this.withAlpha( colors.ink, 0.18 );
		ctx.stroke( pill );

		ctx.fillStyle = selected ? colors.accentInk : colors.ink;
		ctx.textBaseline = 'middle';
		ctx.fillText( text, x + padX, y + boxHeight / 2 );
	}

	/**
	 * The faux inspector panel's box in CSS pixels, one derivation shared by the painter and the hand-built hit test so the drawn panel and its hit region cannot drift apart.
	 *
	 * @param width - The overlay width in CSS pixels.
	 * @param height - The overlay height in CSS pixels.
	 * @returns The panel's position and size.
	 */
	private fauxPanelRect( width: number, height: number ): { x: number; y: number; width: number; height: number } {
		const panelWidth = Math.min( 190, width - 24 );
		const panelHeight = 96;

		return {
			x: width - panelWidth - 12,
			y: height - panelHeight - 12,
			width: panelWidth,
			height: panelHeight,
		};
	}

	/**
	 * Paints the faux inspector panel into the corner of the canvas, a picture of the real inspector with no DOM behind it, from the cached themed colors.
	 *
	 * The panel responds to the mouse only because {@link pickFauxUiAt} re-derives this exact geometry by hand, from the same {@link fauxPanelRect} box this painter draws; there is still no element, so nothing here can take focus, appear in the accessibility tree, or offer selectable text.
	 *
	 * @param ctx - The overlay 2D context.
	 * @param width - The overlay width in CSS pixels.
	 * @param height - The overlay height in CSS pixels.
	 */
	private paintFauxInspector( ctx: CanvasRenderingContext2D, width: number, height: number ): void {
		const colors = this.overlayColors;
		const box = this.fauxPanelRect( width, height );
		const x = box.x;
		const y = box.y;

		const panel = new Path2D();
		panel.roundRect( x, y, box.width, box.height, 10 );
		ctx.fillStyle = this.withAlpha( colors.surface, 0.95 );
		ctx.fill( panel );
		ctx.lineWidth = 1;
		ctx.strokeStyle = this.withAlpha( colors.ink, 0.16 );
		ctx.stroke( panel );

		const selected = this.selectedPart;
		ctx.fillStyle = colors.ink;
		ctx.textBaseline = 'alphabetic';
		ctx.font = `600 13px ${ colors.fontSans }`;
		ctx.fillText( selected ? selected.label : 'Inspector', x + 12, y + 24 );

		ctx.font = `11px ${ colors.fontMono }`;
		ctx.fillStyle = this.withAlpha( colors.ink, 0.6 );
		ctx.fillText( 'Shade color', x + 12, y + 46 );

		const swatchY = y + 54;
		let swatchX = x + 12;

		for ( const swatch of SHADE_SWATCHES ) {
			ctx.beginPath();
			ctx.arc( swatchX + 8, swatchY + 8, 8, 0, Math.PI * 2 );
			ctx.fillStyle = swatch.hex;
			ctx.fill();

			if ( swatch.id === this.config.shadeSwatchId ) {
				ctx.lineWidth = 2;
				ctx.strokeStyle = colors.accent;
				ctx.stroke();
			}

			swatchX += 24;
		}
	}

	/**
	 * Draws the real labels when the overlay canvas fires its `paint` event, so the experimental draw runs inside the event the way the canonical flow prescribes.
	 *
	 * The render loop and the sync passes never draw or clear the labels themselves; {@link paintFlatOverlay} requests a paint, and this handler clears the canvas and runs {@link drawLabelsIntoCanvas} when the event lands, so a platform-initiated paint, a focus ring appearing on a label, starts from its own clear instead of leaving residue over the last frame.
	 * The mode guard mirrors the experimental branch of the paint pass, since the listener stays wired in every mode, and the context guard covers an event that lands before the first paint pass has cached the 2D context.
	 */
	private onOverlayPaint = (): void => {
		const ctx = this.overlayCtx;
		const $canvas = this.$overlayCanvas;

		if ( this.activeMode !== 'html-in-canvas' || ! ctx || ! $canvas ) {
			return;
		}

		// Clear in device pixels under the identity transform, the same grid the label draw below runs on.
		ctx.setTransform( 1, 0, 0, 1, 0, 0 );
		ctx.clearRect( 0, 0, $canvas.width, $canvas.height );
		this.drawLabelsIntoCanvas( ctx );
	};

	/**
	 * Draws every visible real label node into the overlay canvas at its own 1:1 size and projected center, then writes each returned alignment matrix back, the experimental in-canvas-label path.
	 *
	 * Each label's `style.transform` is a platform-owned slot here. The node is already a reachable element the browser exposes in the accessibility tree and the tab order, because the overlay canvas keeps it a real DOM child under `layoutsubtree`; writing the matrix back is only what keeps that element's focus ring, hit target, and accessibility bounds aligned under its drawn pixels. When `omitTransformSync` is set the write is skipped so the reader can watch the focus ring and click target drift off the pixels.
	 *
	 * A label whose part is facing away is hidden rather than skipped in place: `visibility: hidden` also removes it from the tab order and the accessibility tree while it is offscreen, the same contract the DOM-overlay labels keep, where a skipped node would otherwise stay tabbable at its stale position.
	 *
	 * The work runs in three passes, the transform resets and visibility first, then every box measurement, then every draw and write-back, so the style writes cost at most two layout flushes per paint instead of one per label.
	 *
	 * The draw runs on the bare device-pixel grid, not under the `dpr` scale the faux UI paints with: the label node already rasterizes at the display's pixel density, so drawing it under an extra `dpr` transform would double its size, which is what made the drawn pills balloon. The projected center and the label box are scaled into device pixels by hand instead, so the drawn pill matches the DOM-overlay pill exactly, then the transform is restored for the next paint.
	 *
	 * The explainer's canonical flow routes this draw through the canvas `paint` event, and that is where it runs: the render loop and the sync passes only call `requestPaint()`, and {@link onOverlayPaint} invokes this method when the event fires. Calling `drawElementImage` outside the event is still defined behavior, but it draws the previous frame's snapshot of the element and throws before a first snapshot exists, which is why the handler owns the draw.
	 *
	 * @param ctx - The overlay 2D context, on a supporting build where `drawElementImage` exists.
	 */
	private drawLabelsIntoCanvas( ctx: CanvasRenderingContext2D ): void {
		const $host = this.$overlayCanvas;

		if ( ! $host ) {
			return;
		}

		const dpr = window.devicePixelRatio || 1;

		// Drop to the identity transform so one drawing unit is one backing-store pixel, the space the element bitmap is already rasterized in; the faux-UI dpr scale is restored at the end.
		ctx.setTransform( 1, 0, 0, 1, 0, 0 );

		// First pass: reset any prior alignment before measuring, so each box read is the label's own size rather than a previously skewed one, and hide the labels whose part is facing away.
		const drawable: Array<{ point: { x: number; y: number }; $node: HTMLElement }> = [];

		for ( const part of this.parts ) {
			const point = this.anchorPoints[ part.id ];
			const $node = $host.querySelector( `[data-part='${ part.id }']` );

			if ( ! ( $node instanceof HTMLElement ) ) {
				continue;
			}

			if ( ! point || ! point.visible ) {
				$node.style.visibility = 'hidden';
				continue;
			}

			$node.style.visibility = '';

			if ( ! this.omitTransformSync ) {
				$node.style.transform = '';
			}

			drawable.push( { point, $node } );
		}

		// Second pass: measure every box in one batch, so the writes above flush layout once rather than per label.
		const boxes = drawable.map( ( entry ) => entry.$node.getBoundingClientRect() );

		// Third pass: draw each label at its projected center and write the alignment matrix back.
		for ( const [ index, entry ] of drawable.entries() ) {
			const box = boxes[ index ];
			const dx = ( entry.point.x - box.width / 2 ) * dpr;
			const dy = ( entry.point.y - box.height / 2 ) * dpr;
			const alignment = ctx.drawElementImage( entry.$node, dx, dy );

			if ( ! this.omitTransformSync ) {
				entry.$node.style.transform = alignment.toString();
			}
		}

		ctx.setTransform( dpr, 0, 0, dpr, 0, 0 );
	}

	/**
	 * Reads a CSS custom property off the host, falling back to a literal when the token sheet has not loaded.
	 *
	 * A canvas paints raw pixels and cannot inherit a CSS color, so every themed color the faux UI draws is read here at paint time, which is what keeps the canvas-only labels legible in light and dark.
	 *
	 * @param name - The custom property to read.
	 * @param fallback - The literal color to use when the property is empty.
	 * @returns The resolved color string.
	 */
	private token( name: string, fallback: string ): string {
		const value = getComputedStyle( this ).getPropertyValue( name ).trim();
		return value || fallback;
	}

	/**
	 * Resolves the selection accent the same way the stylesheet does, reading the private `--cfg-accent` so the 3D highlight and the painted UI match the DOM controls in either theme.
	 */
	private accentColor(): string {
		return this.token( '--cfg-accent', '#2257e6' );
	}

	/**
	 * Re-reads the themed colors into the caches the render loop relies on: the accent as a Three.js color for the 3D highlight, and the token set the flat overlay paints with.
	 *
	 * It is called on connect and after a theme change, so every per-frame draw works from cached values rather than calling `getComputedStyle`.
	 * The flip side of that cache is staleness: a host that swaps `--configurator-accent` at runtime without a theme flip paints the old accent until the next theme change refreshes it.
	 */
	private refreshAccent(): void {
		const accent = this.accentColor();
		this.accent.set( accent );
		this.overlayColors = {
			ink: this.token( '--ink', '#17171a' ),
			surface: this.token( '--surface', '#ffffff' ),
			accent,
			accentInk: this.token( '--accent-ink', '#ffffff' ),
			fontSans: this.token( '--font-sans', 'system-ui, sans-serif' ),
			fontMono: this.token( '--font-mono', 'monospace' ),
		};
	}

	/**
	 * Returns a color string at a given alpha, parsing a `#rgb` or `#rrggbb` token into `rgba()` and mixing any other syntax toward transparent with `color-mix()`.
	 *
	 * The canvas needs an explicit alpha for the faux panel and pill borders, but the theme tokens are usually opaque hex, so the fast path parses those by hand; anything else goes through `color-mix()`, which any browser modern enough to hand us a non-hex token can paint.
	 *
	 * @param color - The base color, usually a hex token value.
	 * @param alpha - The alpha to apply, from 0 to 1.
	 * @returns An `rgba()` string for hex input, or a `color-mix()` expression for anything else.
	 */
	private withAlpha( color: string, alpha: number ): string {
		const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec( color.trim() );

		if ( ! match ) {
			return `color-mix( in srgb, ${ color } ${ Math.round( alpha * 100 ) }%, transparent )`;
		}

		const body = match[ 1 ];
		const full = body.length === 3 ? body.split( '' ).map( ( c ) => c + c ).join( '' ) : body;
		const r = parseInt( full.slice( 0, 2 ), 16 );
		const g = parseInt( full.slice( 2, 4 ), 16 );
		const b = parseInt( full.slice( 4, 6 ), 16 );
		return `rgba(${ r }, ${ g }, ${ b }, ${ alpha })`;
	}

	/**
	 * Selects a part from a real overlay label, the keyboard-reachable path the raycast cannot provide.
	 *
	 * @param id - The id of the part the label represents.
	 */
	private onLabelClick( id: string ): void {
		this.select( id, 'overlay' );
	}

	/**
	 * Updates the selection and dispatches the typed `object-select` event, tagged with the layer it came from.
	 *
	 * The event fires on every pick, even a repeat of the current selection, so a demo log can record each raycast; the internal `selectedId` only changes when the target actually changes.
	 * The event is `composed` so it crosses the shadow boundary and `bubbles` so a listener on the host hears it.
	 *
	 * @param id - The id to select, or `null` to clear.
	 * @param source - Which layer triggered the selection, the raycast or a real overlay control.
	 */
	private select( id: string | null, source: ConfiguratorSelectSource ): void {
		if ( id !== this.selectedId ) {
			this.selectedId = id;
		}

		this.dispatchEvent(
			new CustomEvent<ConfiguratorSelectDetail>( 'object-select', {
				detail: { objectId: id, source },
				bubbles: true,
				composed: true,
			} ),
		);
	}

	/**
	 * Recolors the shade to a swatch, applying it to the live material and reporting the new config.
	 *
	 * @param swatchId - The id of the chosen swatch.
	 */
	private onSelectSwatch( swatchId: string ): void {
		this.config = { ...this.config, shadeSwatchId: swatchId };

		if ( this.lamp ) {
			setShadeColor( this.lamp, this.shadeHex() );
		}

		this.requestRender();
		this.emitConfigChange();
	}

	/**
	 * Switches the base finish, retuning the live base material and reporting the new config.
	 *
	 * @param finish - The finish to apply, matte or metal.
	 */
	private onSelectFinish( finish: BaseFinish ): void {
		this.config = { ...this.config, baseFinish: finish };

		if ( this.lamp ) {
			setBaseFinish( this.lamp, finish );
		}

		this.requestRender();
		this.emitConfigChange();
	}

	/**
	 * Toggles the bulb, relighting the scene through the helper and reporting the new config.
	 */
	private onToggleBulb(): void {
		const bulbOn = ! this.config.bulbOn;
		this.config = { ...this.config, bulbOn };

		if ( this.lamp ) {
			setBulbState( this.lamp, bulbOn );
		}

		this.requestRender();
		this.emitConfigChange();
	}

	/**
	 * Dispatches the typed `config-change` event with the whole current config after an inspector edit.
	 *
	 * It is `composed` and `bubbles` for the same reason the selection event is, so a host listener hears every edit without a cast.
	 */
	private emitConfigChange(): void {
		this.dispatchEvent(
			new CustomEvent<ConfiguratorConfigChangeDetail>( 'config-change', {
				detail: { config: this.config },
				bubbles: true,
				composed: true,
			} ),
		);
	}

	/**
	 * Types `addEventListener` for the configurator's own events so a listener receives the typed `CustomEvent` with no cast, and falls through to the standard signature for every other event.
	 */
	addEventListener<K extends keyof ProductConfiguratorEventMap>(
		type: K,
		listener: ( this: ProductConfigurator, ev: ProductConfiguratorEventMap[ K ] ) => void,
		options?: boolean | AddEventListenerOptions,
	): void;
	addEventListener(
		type: string,
		listener: EventListenerOrEventListenerObject,
		options?: boolean | AddEventListenerOptions,
	): void {
		super.addEventListener( type, listener, options );
	}

	/**
	 * Renders the WebGL viewport, the flat overlay canvas, the real DOM labels or the drawn-label nodes for the active mode, and the inspector and harness panel in the side column.
	 *
	 * The WebGL canvas always renders the lamp; what changes per mode is whether real HTML labels sit over it (`dom-overlay`), real label nodes are drawn into the overlay canvas (`html-in-canvas`), or the labels and a faux inspector are painted onto the overlay canvas with no DOM (`canvas-only`).
	 * The stage and the side column are always laid out by the same `.layout` grid: `stacked` keeps it one column so the side falls under the canvas, and `split` makes it two so the side becomes the right column, the glass-demo shape.
	 */
	render() {
		const active = this.activeMode;
		const parts = this.parts;

		return html`
			<div class=${ this.layout === 'split' ? 'layout split' : 'layout' }>
				<div class="main">
					<slot name="header"></slot>
					<div class=${ this.isDragging ? 'stage dragging' : 'stage' }>
						<canvas class="viewport" role="img" aria-label="A 3D desk lamp you can orbit by dragging. Click a part to select it."></canvas>

						<canvas class="overlay-canvas" aria-hidden=${ active === 'html-in-canvas' ? 'false' : 'true' } ?layoutsubtree=${ active === 'html-in-canvas' }>
							${ active === 'html-in-canvas'
								? parts.map( ( part ) => html`
									<button
										type="button"
										class="drawn-label"
										data-part=${ part.id }
										aria-pressed=${ part.id === this.selectedId }
										@click=${ () => this.onLabelClick( part.id ) }
									>${ part.label }</button>
								` )
								: nothing }
						</canvas>

						${ active === 'dom-overlay'
							? html`
								<div class="overlay">
									${ parts.map( ( part ) => {
										const point = this.anchorPoints[ part.id ];
										const shown = point && point.visible;
										return html`
											<button
												type="button"
												class="label"
												style="left: ${ point ? point.x : 0 }px; top: ${ point ? point.y : 0 }px; visibility: ${ shown ? 'visible' : 'hidden' };"
												aria-pressed=${ part.id === this.selectedId }
												@click=${ () => this.onLabelClick( part.id ) }
											>${ part.label }</button>
										`;
									} ) }
								</div>
							`
							: nothing }
					</div>
				</div>

				${ this.renderSide( active ) }
			</div>
		`;
	}

	/**
	 * Renders the side column of the layout, the real inspector when the mode has one stacked above the harness `panel` slot, and in `split` a full-width `footer` slot under both columns.
	 *
	 * In `split` it is always rendered so it forms the right column even in `canvas-only`, where the inspector is painted into the canvas and the slot still carries the harness panel. In `stacked` it is rendered only when there is something to show, the inspector for a mode that has one, so a bare `canvas-only` embed does not leave an empty row under the canvas.
	 * The `footer` row spans both columns and only renders in `split`, so a harness can drop a tall report or log there instead of stacking it in the narrow side column, where it would run far below the stage and strand the canvas column; an empty `footer` slot produces no box, so a harness that slots nothing renders exactly as before.
	 *
	 * @param active - The active mode, which decides whether a real DOM inspector exists.
	 * @returns The side-column template, or `nothing` when stacked with no inspector to show.
	 */
	private renderSide( active: ConfiguratorMode ) {
		const inspector = active === 'canvas-only' ? nothing : this.renderInspector();

		if ( this.layout !== 'split' && active === 'canvas-only' ) {
			return nothing;
		}

		return html`
			<div class="side">
				${ inspector }
				<slot name="panel"></slot>
			</div>
			${ this.layout === 'split'
				? html`<div class="footer"><slot name="footer"></slot></div>`
				: nothing }
		`;
	}

	/**
	 * Renders the real DOM inspector for the selected part: the shade swatches, the base finish, and the bulb toggle, each a real, keyboard-reachable control.
	 *
	 * It shows every control whatever the selected part, since the lamp is one product, and names the selected part in the heading so the selection still reads; with nothing selected the heading falls back to the whole lamp.
	 */
	private renderInspector() {
		const selected = this.selectedPart;

		return html`
			<div class="inspector">
				<div class="head">
					<h3>${ selected ? selected.label : 'Lamp' }</h3>
					${ selected ? html`<span class="part-tag">#${ selected.id }</span>` : nothing }
				</div>

				<div class="field">
					<span class="field-label">Shade color</span>
					<div class="swatches">
						${ SHADE_SWATCHES.map( ( swatch ) => html`
							<button
								type="button"
								class="swatch"
								style="background: ${ swatch.hex };"
								aria-label=${ swatch.label }
								aria-pressed=${ swatch.id === this.config.shadeSwatchId }
								@click=${ () => this.onSelectSwatch( swatch.id ) }
							></button>
						` ) }
					</div>
				</div>

				<div class="field">
					<span class="field-label">Base finish</span>
					<div class="segmented">
						<button type="button" aria-pressed=${ this.config.baseFinish === 'matte' } @click=${ () => this.onSelectFinish( 'matte' ) }>Matte</button>
						<button type="button" aria-pressed=${ this.config.baseFinish === 'metal' } @click=${ () => this.onSelectFinish( 'metal' ) }>Metal</button>
					</div>
				</div>

				<div class="field">
					<span class="field-label">Bulb</span>
					<button type="button" class="switch" aria-pressed=${ this.config.bulbOn } @click=${ () => this.onToggleBulb() }>
						<span class=${ this.config.bulbOn ? 'track on' : 'track' }><span class="knob"></span></span>
						<span>${ this.config.bulbOn ? 'On' : 'Off' }</span>
					</button>
				</div>
			</div>
		`;
	}

}

declare global {
	interface HTMLElementTagNameMap {
		'product-configurator': ProductConfigurator;
	}
}