@lvl99dotcom/paintcanvas 0.3.0 → 0.4.0

package/dist/ui/elements/PcPanelColours/index.js

@@ -0,0 +1,650 @@
+import style_default from "./style.js";
+import { PALETTE_FILE_FORMAT } from "../../../lib/palette/schema.js";
+import { ICON_CONTROLS_CSS, NO_TEXT_SELECTION_CSS, PILLS_CSS } from "../../styles/index.js";
+import { defineElement, emit } from "../../base/index.js";
+import { PcPanel } from "../PcPanel/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import "../PcColourPair/index.js";
+import "../PcMenu/index.js";
+import { CANCEL_CHOICE } from "../PcDialog/index.js";
+import { hexToHsl, hexToRgb, hslToHex, normaliseHex, rgbToHex } from "../../../lib/utils/colour/index.js";
+import { PALETTE_FILE_ERRORS, PaletteFileError, exportPaletteFile, paletteFileName, parsePaletteFile } from "../../../lib/palette/index.js";
+import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
+import { html, nothing, unsafeCSS } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcPanelColours/index.ts
+/** Each colour model's channels */
+var CHANNELS = {
+	rgb: [
+		{
+			key: "r",
+			name: "paintCanvas.palette.red",
+			max: 255
+		},
+		{
+			key: "g",
+			name: "paintCanvas.palette.green",
+			max: 255
+		},
+		{
+			key: "b",
+			name: "paintCanvas.palette.blue",
+			max: 255
+		}
+	],
+	hsl: [
+		{
+			key: "h",
+			name: "paintCanvas.palette.hue",
+			max: 360
+		},
+		{
+			key: "s",
+			name: "paintCanvas.palette.saturation",
+			max: 100
+		},
+		{
+			key: "l",
+			name: "paintCanvas.palette.lightness",
+			max: 100
+		}
+	]
+};
+/** Hues the hue slider's track passes through, every 60 degrees from red back to red */
+var HUE_STOPS = [
+	0,
+	60,
+	120,
+	180,
+	240,
+	300,
+	360
+].map((h) => hslToHex({
+	h,
+	s: 100,
+	l: 50
+}));
+/**
+* The CSS gradient a channel's slider track shows: the colours its values give, from the lowest to the highest, keeping
+* the colour's other values. Red, green and blue go from none to all of that channel (e.g. red from `rgb(0, g, b)` to
+* `rgb(255, g, b)`), saturation from grey to full colour, and lightness from black through the colour to white. Hue goes
+* through every hue at full saturation, so it never shows as grey.
+*
+* @example
+* channelGradient("r", { r: 0, g: 128, b: 255 }, { h: 210, s: 100, l: 50 }); // "linear-gradient(to right, #0080ff, #ff80ff)"
+* channelGradient("s", { r: 77, g: 179, b: 77 }, { h: 120, s: 40, l: 50 }); // "linear-gradient(to right, #808080, #00ff00)"
+*/
+var channelGradient = (key, rgb, hsl) => {
+	const { h, s, l } = hsl;
+	/** The colour with no and all of an RGB channel */
+	const rgbStops = (channel) => [rgbToHex({
+		...rgb,
+		[channel]: 0
+	}), rgbToHex({
+		...rgb,
+		[channel]: 255
+	})];
+	return `linear-gradient(to right, ${{
+		r: rgbStops("r"),
+		g: rgbStops("g"),
+		b: rgbStops("b"),
+		h: HUE_STOPS,
+		s: [hslToHex({
+			h,
+			s: 0,
+			l
+		}), hslToHex({
+			h,
+			s: 100,
+			l
+		})],
+		l: [
+			0,
+			50,
+			100
+		].map((lightness) => hslToHex({
+			h,
+			s,
+			l: lightness
+		}))
+	}[key].join(", ")})`;
+};
+/** The colour models in tab order */
+var MODELS = ["rgb", "hsl"];
+/** How long a touch is held on a saved colour to open its menu (milliseconds) */
+var LONG_PRESS_MS = 500;
+/** How far a touch can move and still count as held still (CSS pixels) */
+var LONG_PRESS_SLOP = 10;
+/** Translation keys of the palette file error messages */
+var PALETTE_FILE_ERROR_KEYS = {
+	[PALETTE_FILE_ERRORS.incompatible]: "paintCanvas.palette.fileIncompatible",
+	[PALETTE_FILE_ERRORS.read]: "paintCanvas.palette.fileReadFailed"
+};
+/** The dialog's choice that deletes the colour */
+var DELETE_CHOICE = "delete";
+/**
+* Keep a number within a range, rounded to a whole number.
+*/
+var clampWhole = (value, max) => Math.round(Math.min(max, Math.max(0, value)));
+/**
+* The colour palette menu: the foreground and background colours (the selected one is configured), its hex value, RGB
+* and HSL sliders, the saved colours, and buttons to import and export them as a JSON file.
+*
+* - Pressing the foreground or background colour selects it.
+* - Pressing a saved colour sets the selected colour; [+] saves the selected colour.
+* - A saved colour is deleted, after asking, by clicking it with Alt/Option held (the cursor shows an "X"), from its
+*   menu (right-click, a long press on touch screens, or the context menu key), or with Delete or Backspace. Arrow keys,
+*   Home and End move between saved colours.
+* - Escape closes it (closes the canvas's open panel).
+*
+* Fires `pc-toast` after importing, or when importing or exporting fails.
+*
+* @example
+* html`<pc-panel-colours .app=${app}></pc-panel-colours>`
+*/
+var PcPanelColours = class extends PcPanel {
+	static properties = {
+		...PcPanel.properties,
+		app: { attribute: false },
+		model: { type: String },
+		hexDraft: { state: true },
+		menu: { state: true },
+		confirming: { state: true }
+	};
+	static styles = [
+		...PcPanel.styles,
+		unsafeCSS(NO_TEXT_SELECTION_CSS),
+		unsafeCSS(ICON_CONTROLS_CSS),
+		unsafeCSS(PILLS_CSS),
+		unsafeCSS(style_default)
+	];
+	/** Saves exported files (replaceable for tests) */
+	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
+	/** The HSL values shown, kept while they give the selected colour (so hue stays put for greys) */
+	hsl = {
+		h: 0,
+		s: 0,
+		l: 0
+	};
+	/** The saved colour that is reached with Tab (the others with arrow keys) */
+	focusIndex = 0;
+	/** A touch being held on a saved colour, until it opens its menu */
+	press;
+	/** Whether a long press opened a menu, so the click that follows is ignored */
+	longPressed = false;
+	changes = new ChangeController(this, () => [this.app, this.app?.palette]);
+	onKey = (event) => {
+		if (event.key === "Alt") this.toggleAttribute("deleting", event.type === "keydown");
+	};
+	onBlur = () => this.removeAttribute("deleting");
+	constructor() {
+		super();
+		this.model = "rgb";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener("keydown", this.onKey);
+		window.addEventListener("keyup", this.onKey);
+		window.addEventListener("blur", this.onBlur);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("keydown", this.onKey);
+		window.removeEventListener("keyup", this.onKey);
+		window.removeEventListener("blur", this.onBlur);
+		this.cancelPress();
+	}
+	/** The selected colour's value, e.g. `#000000` */
+	get colour() {
+		const app = this.app;
+		return app.colours[app.selectedColour];
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (!this.app) return;
+		if (hslToHex(this.hsl) !== this.colour) this.hsl = hexToHsl(this.colour);
+		const count = this.app.palette.colours.length;
+		this.focusIndex = Math.max(0, Math.min(this.focusIndex, count - 1));
+	}
+	/** Set the selected colour */
+	setColour(colour) {
+		const app = this.app;
+		app.setColour(colour, app.selectedColour);
+	}
+	/** Select the pressed colour */
+	onColourClick(event) {
+		this.app?.selectColour(event.detail.slot);
+	}
+	/** Follow the hex value as it's typed, setting the colour once it's a full 6-digit value */
+	onHexInput(event) {
+		const value = event.target.value;
+		const hex = normaliseHex(value);
+		if (hex && value.replace(/[\s#]/g, "").length === 6) {
+			this.hexDraft = void 0;
+			this.setColour(hex);
+			return;
+		}
+		this.hexDraft = value;
+	}
+	/** Set the colour from a typed hex value (including 3 digits) when done, or show the colour again if it isn't one */
+	onHexChange(event) {
+		const hex = normaliseHex(event.target.value);
+		this.hexDraft = void 0;
+		if (hex) this.setColour(hex);
+	}
+	/** Switch colour model with the arrow keys, Home and End, as tabs do */
+	onTabKeyDown(event) {
+		const index = MODELS.indexOf(this.model);
+		const last = MODELS.length - 1;
+		const next = {
+			ArrowRight: index === last ? 0 : index + 1,
+			ArrowLeft: index === 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		this.selectModel(MODELS[next], true);
+	}
+	/** Show a colour model's sliders */
+	async selectModel(model, focus = false) {
+		this.model = model;
+		if (!focus) return;
+		await this.updateComplete;
+		this.renderRoot.querySelector(`[role="tab"][data-model="${model}"]`)?.focus();
+	}
+	/** Change one channel of the colour model shown */
+	onChannel(channel, event) {
+		const input = event.target;
+		if (input.value === "") return;
+		const value = clampWhole(input.valueAsNumber, channel.max);
+		if (this.model === "rgb") {
+			this.setColour(rgbToHex({
+				...hexToRgb(this.colour),
+				[channel.key]: value
+			}));
+			return;
+		}
+		this.hsl = {
+			...this.hsl,
+			[channel.key]: value
+		};
+		this.setColour(hslToHex(this.hsl));
+		this.requestUpdate();
+	}
+	/** Set the selected colour from a saved colour, or ask to delete it with Alt/Option held */
+	onSwatchClick(event, index) {
+		this.focusIndex = index;
+		if (this.longPressed) {
+			this.longPressed = false;
+			return;
+		}
+		if (event.altKey) {
+			this.confirming = index;
+			return;
+		}
+		this.setColour(this.app?.palette.colours[index]);
+	}
+	/** Open a saved colour's menu where it was right-clicked */
+	onSwatchContextMenu(event, index) {
+		event.preventDefault();
+		this.focusIndex = index;
+		this.menu = {
+			index,
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+	/** Start waiting for a touch held on a saved colour to open its menu */
+	onSwatchPointerDown(event, index) {
+		this.longPressed = false;
+		if (event.pointerType !== "touch") return;
+		this.cancelPress();
+		const { clientX: x, clientY: y } = event;
+		this.press = {
+			x,
+			y,
+			timer: setTimeout(() => {
+				this.press = void 0;
+				this.longPressed = true;
+				this.focusIndex = index;
+				this.menu = {
+					index,
+					x,
+					y
+				};
+			}, 500)
+		};
+	}
+	/** Stop waiting for a long press when the touch moves away */
+	onSwatchPointerMove(event) {
+		const press = this.press;
+		if (press && Math.hypot(event.clientX - press.x, event.clientY - press.y) > LONG_PRESS_SLOP) this.cancelPress();
+	}
+	/** Stop waiting for a long press */
+	cancelPress() {
+		clearTimeout(this.press?.timer);
+		this.press = void 0;
+	}
+	/**
+	* Move between saved colours, ask to delete one, or open its menu, with the keyboard. Keys used here don't reach the
+	* keyboard shortcuts (e.g. Delete doesn't also delete the masked image data).
+	*/
+	onSwatchKeyDown(event, index) {
+		if (event.key === "Delete" || event.key === "Backspace") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.confirming = index;
+			return;
+		}
+		if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+			event.preventDefault();
+			event.stopPropagation();
+			const rect = event.currentTarget.getBoundingClientRect();
+			this.menu = {
+				index,
+				x: rect.left,
+				y: rect.bottom
+			};
+			return;
+		}
+		const last = this.app.palette.colours.length - 1;
+		const columns = this.columns();
+		const next = {
+			ArrowRight: index + 1,
+			ArrowLeft: index - 1,
+			ArrowDown: index + columns,
+			ArrowUp: index - columns,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0 || next < 0 || next > last) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.focusSwatch(next);
+	}
+	/** How many saved colours fit in a row */
+	columns() {
+		const grid = this.renderRoot.querySelector(".swatches");
+		const width = grid.querySelector(".swatch").offsetWidth;
+		return width > 0 ? Math.max(1, Math.floor(grid.clientWidth / width)) : 1;
+	}
+	/** Focus a saved colour */
+	async focusSwatch(index) {
+		this.focusIndex = index;
+		this.requestUpdate();
+		await this.updateComplete;
+		this.renderRoot.querySelector(`.swatch[data-index="${index}"]`)?.focus();
+	}
+	/** Save the selected colour */
+	onAdd() {
+		this.app?.palette.add(this.colour);
+	}
+	/** Delete the saved colour that was asked about, if confirmed */
+	onConfirm(event) {
+		event.stopPropagation();
+		const index = this.confirming;
+		this.confirming = void 0;
+		const { palette } = this.app;
+		if (event.detail.value === DELETE_CHOICE) palette.remove(index);
+		const count = palette.colours.length;
+		if (count > 0) this.focusSwatch(Math.min(index, count - 1));
+	}
+	/** Close the palette with Escape (unless a dialog or menu is open, which closes first) */
+	onKeyDown(event) {
+		if (event.key !== "Escape" || this.confirming !== void 0 || this.menu !== void 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.app?.closePanel();
+	}
+	/**
+	* Import the colours in a colour palette file, adding them after the saved ones (leaving out ones already saved).
+	*/
+	async importFile(file) {
+		const app = this.app;
+		if (!app) return;
+		let text;
+		try {
+			text = await file.text();
+		} catch {
+			this.toastError(PALETTE_FILE_ERRORS.read);
+			return;
+		}
+		try {
+			const colours = parsePaletteFile(text, [app.names.paletteFileFormat, PALETTE_FILE_FORMAT]);
+			const count = app.palette.merge(colours);
+			emit(this, "pc-toast", {
+				message: this.t("paintCanvas.palette.imported", { count }),
+				kind: "success"
+			});
+		} catch (error) {
+			this.toastError(error instanceof PaletteFileError ? error.message : PALETTE_FILE_ERRORS.read);
+		}
+	}
+	/**
+	* Export the saved colours as a colour palette file.
+	*/
+	async exportFile() {
+		const app = this.app;
+		if (!app) return;
+		try {
+			await this.saveFile(new Blob([exportPaletteFile(app.palette.colours, app.names.paletteFileFormat)], { type: "application/json" }), paletteFileName(void 0, app.names.filePrefix));
+		} catch {
+			emit(this, "pc-toast", {
+				message: this.t("paintCanvas.palette.exportFailed"),
+				kind: "error"
+			});
+		}
+	}
+	/** Show a palette file error (one of `PALETTE_FILE_ERRORS`) in the chosen language */
+	toastError(message) {
+		emit(this, "pc-toast", {
+			message: this.t(PALETTE_FILE_ERROR_KEYS[message]),
+			kind: "error"
+		});
+	}
+	/** The colour model tabs and the selected model's sliders */
+	renderChannels() {
+		const rgb = hexToRgb(this.colour);
+		const values = this.model === "rgb" ? rgb : this.hsl;
+		return html`<div class="channels">
+      <div
+        role="tablist"
+        aria-label=${this.t("paintCanvas.palette.model")}
+        @keydown=${this.onTabKeyDown}
+      >
+        ${MODELS.map((model) => html`<button
+              type="button"
+              role="tab"
+              id="tab-${model}"
+              data-model=${model}
+              aria-selected=${this.model === model}
+              aria-controls="sliders"
+              tabindex=${this.model === model ? 0 : -1}
+              @click=${() => void this.selectModel(model)}
+            >
+              ${this.t(`paintCanvas.palette.${model}`)}
+            </button>`)}
+      </div>
+      <div
+        id="sliders"
+        class="sliders"
+        role="tabpanel"
+        aria-labelledby="tab-${this.model}"
+      >
+        ${CHANNELS[this.model].map((channel) => {
+			const value = String(values[channel.key]);
+			const name = this.t(channel.name);
+			return html`<span class="letter" aria-hidden="true"
+              >${channel.key.toUpperCase()}</span
+            ><input
+              type="range"
+              data-channel=${channel.key}
+              style="--track: ${channelGradient(channel.key, rgb, this.hsl)}"
+              min="0"
+              max=${channel.max}
+              aria-label=${name}
+              .value=${live(value)}
+              @input=${(e) => this.onChannel(channel, e)}
+            /><input
+              type="number"
+              data-channel=${channel.key}
+              min="0"
+              max=${channel.max}
+              aria-label=${name}
+              .value=${live(value)}
+              @change=${(e) => this.onChannel(channel, e)}
+            />`;
+		})}
+      </div>
+    </div>`;
+	}
+	/** The saved colours and the [+] button */
+	renderSwatches(app) {
+		const colours = app.palette.colours;
+		const canAdd = !colours.includes(this.colour) && colours.length < 1e3;
+		return html`<div
+      class="swatches"
+      role="group"
+      aria-label=${this.t("paintCanvas.palette.saved")}
+    >
+      ${colours.map((colour, index) => html`<button
+            type="button"
+            class="swatch"
+            data-index=${index}
+            style="--colour: ${colour}"
+            title=${colour}
+            aria-label=${colour}
+            aria-haspopup="menu"
+            aria-pressed=${colour === this.colour}
+            tabindex=${index === this.focusIndex ? 0 : -1}
+            @click=${(e) => this.onSwatchClick(e, index)}
+            @contextmenu=${(e) => this.onSwatchContextMenu(e, index)}
+            @pointerdown=${(e) => this.onSwatchPointerDown(e, index)}
+            @pointermove=${this.onSwatchPointerMove}
+            @pointerup=${this.cancelPress}
+            @pointercancel=${this.cancelPress}
+            @keydown=${(e) => this.onSwatchKeyDown(e, index)}
+          ></button>`)}
+      <button
+        type="button"
+        class="add"
+        title=${this.t("paintCanvas.palette.add", { colour: this.colour })}
+        aria-label=${this.t("paintCanvas.palette.add", { colour: this.colour })}
+        ?disabled=${!canAdd}
+        @click=${this.onAdd}
+      >
+        +
+      </button>
+    </div>`;
+	}
+	/** The saved colour's menu, while open */
+	renderMenu() {
+		const menu = this.menu;
+		if (!menu) return nothing;
+		const items = [{
+			value: DELETE_CHOICE,
+			label: this.t("paintCanvas.palette.deleteColour"),
+			danger: true
+		}];
+		return html`<pc-menu
+      open
+      .x=${menu.x}
+      .y=${menu.y}
+      label=${this.t("paintCanvas.palette.colourActions", { colour: this.app.palette.colours[menu.index] })}
+      .items=${items}
+      @pc-select=${() => this.confirming = menu.index}
+      @pc-close=${() => {
+			this.menu = void 0;
+			if (this.confirming === void 0) this.focusSwatch(menu.index);
+		}}
+    ></pc-menu>`;
+	}
+	/** The dialog asking before deleting a saved colour, while asking */
+	renderConfirmation() {
+		if (this.confirming === void 0) return nothing;
+		const choices = [{
+			value: DELETE_CHOICE,
+			label: this.t("paintCanvas.palette.deleteConfirm"),
+			cancelling: true
+		}, {
+			value: CANCEL_CHOICE,
+			label: this.t("paintCanvas.common.dismiss"),
+			variant: "dismiss"
+		}];
+		return html`<pc-dialog
+      heading=${this.t("paintCanvas.palette.deleteColour")}
+      message=${this.t("paintCanvas.palette.deleteMessage")}
+      .choices=${choices}
+      @pc-choose=${this.onConfirm}
+    ></pc-dialog>`;
+	}
+	get defaultIcon() {
+		return "";
+	}
+	get defaultLabel() {
+		return this.t("paintCanvas.palette.label");
+	}
+	renderBody() {
+		const app = this.app;
+		if (!app) return nothing;
+		return html`<div class="palette" @keydown=${this.onKeyDown}>
+        <div class="top">
+          <div class="current">
+            <pc-colour-pair
+              .app=${app}
+              @pc-colour-click=${this.onColourClick}
+            ></pc-colour-pair>
+            <input
+              class="hex"
+              spellcheck="false"
+              autocomplete="off"
+              maxlength="7"
+              aria-label=${this.t("paintCanvas.palette.hex")}
+              aria-invalid=${this.hexDraft !== void 0 && !normaliseHex(this.hexDraft)}
+              .value=${live(this.hexDraft ?? this.colour.toUpperCase())}
+              @input=${this.onHexInput}
+              @change=${this.onHexChange}
+            />
+          </div>
+          ${this.renderChannels()}
+        </div>
+        ${this.renderSwatches(app)}
+        <div class="actions">
+          <button
+            type="button"
+            class="pill import"
+            @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
+          >
+            ${this.t("paintCanvas.palette.import")}
+          </button>
+          <button
+            type="button"
+            class="pill export"
+            @click=${() => void this.exportFile()}
+          >
+            ${this.t("paintCanvas.palette.export")}
+          </button>
+          <!-- Chosen through "Import" -->
+          <label class="visually-hidden">
+            ${this.t("paintCanvas.palette.importFile")}
+            <input
+              type="file"
+              class="import-file"
+              tabindex="-1"
+              accept="application/json,.json"
+              @change=${(e) => {
+			const input = e.target;
+			const file = input.files?.[0];
+			input.value = "";
+			if (file) this.importFile(file);
+		}}
+            />
+          </label>
+        </div>
+      </div>
+      ${this.renderMenu()} ${this.renderConfirmation()}`;
+	}
+};
+defineElement("pc-panel-colours", PcPanelColours);
+export { LONG_PRESS_MS, PcPanelColours, channelGradient };

package/dist/ui/elements/PcPanelColours/style.js

@@ -0,0 +1,3 @@
+// src/ui/elements/PcPanelColours/style.css?inline
+var style_default = ".palette {\n  display: flex;\n  flex-direction: column;\n  gap: var(--pc-space-2);\n}\n\n/* The colours and their hex value beside the colour model's sliders */\n.top {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n.current {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  width: 76px;\n  border: 1px solid var(--pc-border);\n}\n.current pc-colour-pair {\n  --pc-colour-pair-size: 76px;\n}\n.hex {\n  box-sizing: border-box;\n  width: 100%;\n  min-height: var(--pc-control-size);\n  padding: var(--pc-space-1);\n  border: 0;\n  border-top: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.hex[aria-invalid=\"true\"] {\n  outline: 2px solid var(--pc-dismiss-text);\n  outline-offset: -2px;\n}\n.hex:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.channels {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--pc-border);\n}\n[role=\"tablist\"] {\n  display: flex;\n}\n[role=\"tab\"] {\n  flex: 1;\n  min-height: 28px;\n  border: 0;\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-surface-active);\n  color: var(--pc-text);\n  font: inherit;\n  cursor: pointer;\n}\n[role=\"tab\"] + [role=\"tab\"] {\n  border-left: 1px solid var(--pc-border);\n}\n[role=\"tab\"][aria-selected=\"true\"] {\n  border-bottom-color: transparent;\n  background: var(--pc-surface);\n  font-weight: bold;\n}\n[role=\"tab\"]:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n.sliders {\n  display: grid;\n  flex: 1;\n  grid-template-columns: auto minmax(0, 1fr) 3.6em;\n  gap: var(--pc-space-1);\n  align-items: center;\n  padding: var(--pc-space-1) var(--pc-space-2);\n  background: var(--pc-surface);\n}\n.letter {\n  font-weight: bold;\n}\n/* Each slider's track shows the colours its values give (--track, set per slider), under a round white handle with a\n   dark outline that shows on any colour */\n.sliders input[type=\"range\"] {\n  width: 100%;\n  min-width: 0;\n  height: 20px;\n  margin: 0;\n  background: transparent;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n}\n.sliders input[type=\"range\"]::-webkit-slider-runnable-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-moz-range-track {\n  height: 10px;\n  border: 1px solid var(--pc-border);\n  border-radius: var(--pc-radius-pill);\n  background: var(--track);\n}\n.sliders input[type=\"range\"]::-webkit-slider-thumb {\n  width: 16px;\n  height: 16px;\n  margin-top: -4px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n  -webkit-appearance: none;\n}\n.sliders input[type=\"range\"]::-moz-range-thumb {\n  box-sizing: border-box;\n  width: 16px;\n  height: 16px;\n  border: 2px solid #000000;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 0 0 1px #ffffff;\n}\n.sliders input[type=\"number\"] {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 2px var(--pc-space-1);\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: var(--pc-font-size-small);\n  font-variant-numeric: tabular-nums;\n}\n.sliders input:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 1px;\n}\n\n/* Saved colours: square swatches in a grid that scrolls */\n.swatches {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));\n  align-content: start;\n  min-height: 64px;\n  max-height: 132px;\n  overflow-y: auto;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n.swatch,\n.add {\n  aspect-ratio: 1;\n  min-width: 32px;\n  padding: 0;\n  border: 0;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  cursor: pointer;\n}\n.swatch {\n  background: var(--colour);\n  /* Long presses open the colour's menu instead of the browser's */\n  -webkit-touch-callout: none;\n  touch-action: manipulation;\n}\n.swatch[aria-pressed=\"true\"] {\n  box-shadow:\n    inset 0 0 0 2px #ffffff,\n    inset 0 0 0 3px #000000;\n}\n:host([deleting]) .swatch {\n  cursor: var(--pc-delete-cursor);\n}\n.add {\n  background: var(--pc-surface);\n  color: var(--pc-text);\n  font: inherit;\n  font-size: 20px;\n  font-weight: bold;\n}\n.add:hover:not(:disabled) {\n  background: var(--pc-surface-hover);\n}\n.add:disabled {\n  color: var(--pc-disabled);\n  cursor: default;\n}\n.swatch:focus-visible,\n.add:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: -3px;\n}\n\n.actions {\n  display: flex;\n  gap: var(--pc-space-2);\n}\n/* Same size as the brush menu's Import and Export */\n.actions button.pill {\n  flex: 1;\n  padding: 4px 8px;\n}\n";
+export { style_default as default };

package/dist/ui/elements/{PcLayersMenu → PcPanelLayers}/index.d.ts

@@ -1,4 +1,5 @@
-import { PcElement } from "../../base";
+import { nothing } from "lit";
+import { PcPanel } from "../PcPanel";
 import { type LayerDropAction } from "../PcLayerItem";
 import "../PcLayerItem";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
@@ -52,9 +53,9 @@ export declare const dropSlot: (rows: readonly {
  * highlighted for touch). Escape cancels the drag. Moves and duplicates are announced to screen readers.
  *
  * @example
- * html`<pc-layers-menu .app=${app}></pc-layers-menu>`
+ * html`<pc-panel-layers .app=${app}></pc-panel-layers>`
  */
-export declare class PcLayersMenu extends PcElement {
+export declare class PcPanelLayers extends PcPanel {
     static properties: {
         app: {
             attribute: boolean;
@@ -65,6 +66,16 @@ export declare class PcLayersMenu extends PcElement {
         announcement: {
             state: boolean;
         };
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -103,6 +114,8 @@ export declare class PcLayersMenu extends PcElement {
      * layer keeps its row (and a drag its handle) as the ghost moves.
      */
     private renderRows;
-    render(): import("lit").TemplateResult<1>;
+    protected get defaultIcon(): string;
+    protected get defaultLabel(): string;
+    protected renderBody(): import("lit").TemplateResult<1> | typeof nothing;
 }
 export {};