@lvl99dotcom/paintcanvas 0.5.0 → 0.7.0

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcLayerItem/style.css?inline
-var style_default = "/* A white row with space around its parts. The middle column can shrink, so the row never grows wider than its panel */\n:host {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n.name.active {\n  font-weight: bold;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity on the left and blend mode on the right. The blend\n   mode gets a set share of the width rather than its own: browsers size dropdowns differently (Safari and Firefox as\n   wide as the longest option, Chrome as the chosen one), which would otherwise push the row wider than its panel */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) minmax(0, 2fr);\n  align-items: center;\n  gap: 4px 6px;\n  min-width: 0;\n}\n.details .name {\n  grid-column: 2 / -1;\n}\n.details .name,\n.details select {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n.details input[type=\"range\"] {\n  grid-column: 1 / 3;\n  min-width: 0;\n  margin: 0;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n}\n.handle::part(button) {\n  min-width: 0;\n  padding: 0;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle::part(button) {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle::part(button) {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle::part(button) {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
+var style_default = "/* A white row with space around its parts. The middle column can shrink, so the row never grows wider than its panel */\n:host {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;\n  align-items: center;\n  column-gap: 6px;\n  position: relative;\n  padding: 6px;\n  border: 1px solid var(--pc-surface-active);\n  background: var(--pc-surface);\n}\n/* The selected layer: purple, so it stands out */\n:host([active]) {\n  border-color: var(--pc-accent);\n  background: var(--pc-accent);\n  color: var(--pc-accent-text);\n}\n:host([active]) .name {\n  font-weight: bold;\n}\n/* The opacity slider's track and handle in the row's text colour, so they show on purple */\n:host([active]) .opacity {\n  --pc-accent: var(--pc-accent-text);\n  --pc-border: rgb(255 255 255 / 45%);\n}\n/* The name, on one line (cut short with \"…\"); renamed from the actions menu */\n.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.thumbnail {\n  width: 30px;\n  height: 30px;\n}\n/* Thumbnail on the left and name on the right; under them, opacity, then blend mode, each the full width. The blend\n   mode never sets its own width: browsers size dropdowns differently (Safari and Firefox as wide as the longest option,\n   Chrome as the chosen one), which would otherwise push the row wider than its panel */\n.details {\n  display: grid;\n  grid-template-columns: 30px minmax(0, 1fr);\n  align-items: center;\n  gap: 4px 6px;\n  min-width: 0;\n}\n.details .opacity,\n.details select {\n  grid-column: 1 / -1;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n}\n/* The reorder handle drags with mouse, pen or touch (touch drags it rather than scrolling the panel) */\n.handle {\n  /* As tall as the row */\n  align-self: stretch;\n}\n.handle::part(button) {\n  min-width: 0;\n  padding: 0;\n  cursor: grab;\n  touch-action: none;\n}\n/* While dragged: the row floats with the pointer, out of the list (the layers menu places it), and the cursor shows\n   what dropping would do (\"+\" duplicates on \"New Layer\") */\n:host([dragging]) {\n  position: fixed;\n  z-index: 10;\n  opacity: 0.9;\n  background: Canvas;\n  box-shadow: var(--pc-shadow);\n}\n:host([dragging]) .handle::part(button) {\n  cursor: grabbing;\n}\n:host([drop-action=\"duplicate\"]) .handle::part(button) {\n  cursor: copy;\n}\n:host([drop-action=\"none\"]) .handle::part(button) {\n  cursor: no-drop;\n}\n/* Alpha lock and visibility: boxed icon toggles like the settings bar's, darker while on */\n.alpha-lock,\n.visibility {\n  width: 30px;\n  height: 30px;\n  padding: 2px;\n  border: 1px solid var(--pc-border);\n  border-radius: 4px;\n  background: var(--pc-surface);\n  cursor: pointer;\n}\n.alpha-lock:hover,\n.visibility:hover {\n  background: var(--pc-surface-hover);\n}\n.alpha-lock[aria-pressed=\"true\"],\n.visibility[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.alpha-lock:focus-visible,\n.visibility:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n}\n.alpha-lock img,\n.visibility img {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: auto;\n}\n";
 export { style_default as default };

package/dist/ui/elements/PcPanelBrushes/index.d.ts

@@ -1,5 +1,6 @@
 import { nothing } from "lit";
 import { PcPanel } from "../PcPanel";
+import { type ConfirmFn } from "../../ask";
 import "../PcBrushSize";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import type BrushSettings from "../../../lib/classes/BrushSettings";
@@ -8,8 +9,7 @@ import { DELETE_CURSOR } from "../../../lib/rendering/cursors";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /** Cursor over a preset that a click deletes (Alt/Option held): the `--pc-delete-cursor` token's default */
 export { DELETE_CURSOR };
-/** Asks the user to confirm; replaceable for tests */
-export type ConfirmFn = (message: string) => boolean;
+export type { ConfirmFn } from "../../ask";
 /** Largest shape preview in a preset tile, in CSS pixels */
 export declare const MAX_PREVIEW_SIZE = 30;
 /** Smallest shape preview in a preset tile, in CSS pixels */
@@ -73,6 +73,7 @@ export declare class PcPanelBrushes extends PcPanel {
     app?: PaintCanvas;
     /** Which settings this menu controls */
     kind: "brush" | "eraser";
+    /** Asks the user to confirm, in a dialog (replaceable for tests) */
     confirm: ConfirmFn;
     /** Saves exported presets (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;

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

@@ -3,6 +3,7 @@ import { BRUSH_PRESET_FILE_FORMAT } from "../../../lib/presets/schema.js";
 import { NO_TEXT_SELECTION_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
 import { defineElement } from "../../base/index.js";
 import { PcPanel } from "../PcPanel/index.js";
+import { askConfirm, deletePresetQuestion } from "../../ask/index.js";
 import "../PcBrushSize/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import { groupPresetsByAuthor } from "../../../lib/brushes/authors/index.js";
@@ -77,7 +78,8 @@ var PcPanelBrushes = class extends PcPanel {
 		unsafeCSS(WINDOWS_CSS),
 		unsafeCSS(PILLS_CSS)
 	];
-	confirm = (message) => window.confirm(message);
+	/** Asks the user to confirm, in a dialog (replaceable for tests) */
+	confirm = (options) => askConfirm(this.renderRoot, options);
 	/** Saves exported presets (replaceable for tests) */
 	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
 	changes = new ChangeController(this, () => [this.app, this.settings]);
@@ -127,7 +129,7 @@ var PcPanelBrushes = class extends PcPanel {
 		const app = this.app;
 		if (!app) return;
 		const name = preset.name ?? preset.id;
-		if (!this.confirm(this.t("paintCanvas.presets.deleteConfirm", { name }))) return;
+		if (!await this.confirm(deletePresetQuestion(this.translations, name))) return;
 		try {
 			await app.customPresets.remove(preset.id);
 			this.emit("pc-toast", {
@@ -287,14 +289,14 @@ var PcPanelBrushes = class extends PcPanel {
       <div class="actions">
         <button
           type="button"
-          class="pill new-preset"
+          class="pill-s new-preset"
           @click=${() => this.emit("pc-new-preset", this.kind)}
         >
           ${this.t("paintCanvas.brushMenu.create")}
         </button>
         <button
           type="button"
-          class="pill import"
+          class="pill-s import"
           @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
         >
           ${this.t("paintCanvas.brushMenu.import")}
@@ -317,7 +319,7 @@ var PcPanelBrushes = class extends PcPanel {
         </label>
         <button
           type="button"
-          class="pill export"
+          class="pill-s export"
           @click=${() => void this.exportFile()}
         >
           ${this.t("paintCanvas.brushMenu.export")}

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcPanelBrushes/style.css?inline
-var style_default = "/* Narrower than other panels by default (set --pc-panel-width to change it) */\n:host {\n  --pc-panel-default-width: 240px;\n}\n/* The current preset on one row: its shape, name and size */\n.current {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 4px 8px;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n}\n.current-shape {\n  flex: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--pc-text);\n}\n.current-shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n.name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.size {\n  flex: none;\n  align-self: stretch;\n  margin: -4px -8px -4px 0;\n  border-left: 1px solid var(--pc-border);\n}\n/* The presets scroll, at most 400px tall, or less so the whole menu fits under the settings bar in a shorter window */\n.presets {\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: min(400px, calc(100vh - 180px));\n  overflow-y: auto;\n}\nh3 {\n  margin: 4px 0;\n  font-size: 14px;\n}\nul {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  align-content: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n:host([deleting]) li button.custom {\n  cursor: var(--pc-delete-cursor);\n}\n/* Create, Import and Export side by side */\n.actions {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.actions button.pill {\n  padding: 4px 8px;\n}\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\nli button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  border: none;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n  cursor: pointer;\n}\nli button:hover {\n  background: var(--pc-surface-hover);\n}\nli button[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.shape {\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: 100% 100%;\n}\n";
+var style_default = "/* Narrower than other panels by default (set --pc-panel-width to change it) */\n:host {\n  --pc-panel-default-width: 240px;\n}\n/* The current preset on one row: its shape, name and size */\n.current {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 4px 8px;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n}\n.current-shape {\n  flex: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--pc-text);\n}\n.current-shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n.name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.size {\n  flex: none;\n  align-self: stretch;\n  margin: -4px -8px -4px 0;\n  border-left: 1px solid var(--pc-border);\n}\n/* The presets scroll, at most 400px tall, or less so the whole menu fits under the settings bar in a shorter window */\n.presets {\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: min(400px, calc(100vh - 180px));\n  overflow-y: auto;\n}\nh3 {\n  margin: 4px 0;\n  font-size: 14px;\n}\nul {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  align-content: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n:host([deleting]) li button.custom {\n  cursor: var(--pc-delete-cursor);\n}\n/* Create, Import and Export side by side */\n.actions {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\nli button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  border: none;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n  cursor: pointer;\n}\nli button:hover {\n  background: var(--pc-surface-hover);\n}\nli button[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.shape {\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: 100% 100%;\n}\n";
 export { style_default as default };

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

@@ -613,14 +613,14 @@ var PcPanelColours = class extends PcPanel {
         <div class="actions">
           <button
             type="button"
-            class="pill import"
+            class="pill-s import"
             @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
           >
             ${this.t("paintCanvas.palette.import")}
           </button>
           <button
             type="button"
-            class="pill export"
+            class="pill-s export"
             @click=${() => void this.exportFile()}
           >
             ${this.t("paintCanvas.palette.export")}

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

@@ -1,3 +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";
+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/* Import and Export share the row */\n.actions button.pill-s {\n  flex: 1;\n}\n";
 export { style_default as default };

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

@@ -199,7 +199,7 @@ var PcPanelLayers = class extends PcPanel {
       ${this.renderRows(layers)}
       <button
         type="button"
-        class="pill new ${this.drag?.action === "duplicate" ? "drop-target" : ""}"
+        class="pill-s new ${this.drag?.action === "duplicate" ? "drop-target" : ""}"
         ?disabled=${!layers.canCreate}
         @click=${() => layers.create()}
       >

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

@@ -1,3 +1,3 @@
 // src/ui/elements/PcPanelLayers/style.css?inline
-var style_default = "/* \"New Layer\": a full-width purple pill */\nbutton.new {\n  width: 100%;\n  min-height: 40px;\n}\n/* Where a dragged layer would land: a full-width block with its name, as tall as the row (set by the menu) */\n.ghost {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  border: 2px dashed;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* Dropping a dragged layer here duplicates it (highlighted for touch, where there is no \"+\" cursor) */\nbutton.new.drop-target {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n/* For screen readers only */\n.announcement {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n";
+var style_default = "/* \"New Layer\": a full-width purple pill */\nbutton.new {\n  width: 100%;\n}\n/* Where a dragged layer would land: a full-width block with its name, as tall as the row (set by the menu) */\n.ghost {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  border: 2px dashed;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* Dropping a dragged layer here duplicates it (highlighted for touch, where there is no \"+\" cursor) */\nbutton.new.drop-target {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n/* For screen readers only */\n.announcement {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n";
 export { style_default as default };

package/dist/ui/elements/PcProfileEditor/index.d.ts

@@ -0,0 +1,103 @@
+import { PcElement } from "../../base";
+import { type ConfirmFn, type PromptFn } from "../../ask";
+import "../PcDialogWindow";
+import "../PcProfileGraph";
+import "../PcContextMenu";
+import "../PcButton";
+import ProfileGraphs from "../../../lib/classes/ProfileGraphs";
+import { type ProfilePoint } from "../../../lib/profiles";
+/** What the editor's `pc-save` gives: the points to use and the graph they came from (undefined for an unsaved one) */
+export interface ProfileSaveDetail {
+    points: ProfilePoint[];
+    profileId?: string;
+}
+/**
+ * A window for editing a brush setting's profile graph (see `<pc-profile-graph>`): a drop-down of the presets and the
+ * user's own graphs (it says "Custom" once the graph is edited, or for one that isn't saved), a ⋮ menu (New graph,
+ * Duplicate…, Rename… and Delete…, the last two for the user's own graphs), the graph, and Save, Reset and Dismiss.
+ *
+ * - Choosing a graph in the drop-down loads its points.
+ * - New graph starts from a straight line, and Duplicate… saves a copy of the current graph under a name ("Custom" to
+ *   start with); Rename… and Delete… ask first.
+ * - Save uses the graph (firing `pc-save` with its points and ID); an edited or unsaved graph is first saved with a name
+ *   it asks for, asking before replacing another of the user's graphs with that name.
+ * - Reset goes back to the graph it opened with; Dismiss, ⨉ and Escape close it (`pc-close`) without changing anything.
+ *
+ * Graphs are saved in `profiles` (the canvas's `ProfileGraphs`).
+ *
+ * @example
+ * html`<pc-profile-editor .profiles=${app.profiles} .points=${points} profile-id="overweight" label="Width"
+ *   @pc-save=${(e) => use(e.detail)} @pc-close=${close}></pc-profile-editor>`
+ */
+export declare class PcProfileEditor extends PcElement {
+    static properties: {
+        profiles: {
+            attribute: boolean;
+        };
+        points: {
+            attribute: boolean;
+        };
+        profileId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        draft: {
+            state: boolean;
+        };
+        sourceId: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** Where graphs are saved (the canvas's `ProfileGraphs`) */
+    profiles: ProfileGraphs;
+    /** The points it opens with */
+    points?: ProfilePoint[];
+    /** The ID of the graph it opens with, if it's one of the presets or saved graphs */
+    profileId?: string;
+    /** The setting's name, e.g. "Width" */
+    label: string;
+    /** The points being edited */
+    draft: ProfilePoint[];
+    /** The graph the points came from, until they're edited */
+    sourceId?: string;
+    /** Asks the user to confirm, in a dialog (replaceable for tests) */
+    confirm: ConfirmFn;
+    /** Asks the user for text, in a dialog (replaceable for tests) */
+    prompt: PromptFn;
+    constructor();
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** Go back to the graph it opened with */
+    reset(): void;
+    /** Load a graph's points */
+    load(id: string): void;
+    /** Whether the graph being edited is one of the user's own, unchanged */
+    private get ownSource();
+    /**
+     * Ask for a name and save the points as one of the user's graphs, asking before replacing another with that name.
+     * Returns the saved graph's ID, or undefined if it wasn't saved.
+     */
+    private saveAs;
+    /**
+     * Use the graph: save it first when it's edited or unsaved (asking for a name), then fire `pc-save`.
+     */
+    save(): Promise<void>;
+    /** Do one of the ⋮ menu's actions */
+    act(action: string): Promise<void>;
+    /** A graph's name: the presets' in the chosen language */
+    private graphName;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,259 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { askConfirm, askText } from "../../ask/index.js";
+import "../PcDialogWindow/index.js";
+import "../PcProfileGraph/index.js";
+import "../PcContextMenu/index.js";
+import "../PcButton/index.js";
+import ProfileGraphs from "../../../lib/classes/ProfileGraphs/index.js";
+import { linearPoints, samePoints } from "../../../lib/profiles/index.js";
+import { css, html } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcProfileEditor/index.ts
+/** The value of the drop-down's "Custom" option */
+var CUSTOM = "";
+/**
+* A window for editing a brush setting's profile graph (see `<pc-profile-graph>`): a drop-down of the presets and the
+* user's own graphs (it says "Custom" once the graph is edited, or for one that isn't saved), a ⋮ menu (New graph,
+* Duplicate…, Rename… and Delete…, the last two for the user's own graphs), the graph, and Save, Reset and Dismiss.
+*
+* - Choosing a graph in the drop-down loads its points.
+* - New graph starts from a straight line, and Duplicate… saves a copy of the current graph under a name ("Custom" to
+*   start with); Rename… and Delete… ask first.
+* - Save uses the graph (firing `pc-save` with its points and ID); an edited or unsaved graph is first saved with a name
+*   it asks for, asking before replacing another of the user's graphs with that name.
+* - Reset goes back to the graph it opened with; Dismiss, ⨉ and Escape close it (`pc-close`) without changing anything.
+*
+* Graphs are saved in `profiles` (the canvas's `ProfileGraphs`).
+*
+* @example
+* html`<pc-profile-editor .profiles=${app.profiles} .points=${points} profile-id="overweight" label="Width"
+*   @pc-save=${(e) => use(e.detail)} @pc-close=${close}></pc-profile-editor>`
+*/
+var PcProfileEditor = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		profiles: { attribute: false },
+		points: { attribute: false },
+		profileId: {
+			type: String,
+			attribute: "profile-id"
+		},
+		label: { type: String },
+		draft: { state: true },
+		sourceId: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: contents;
+      }
+      pc-dialog-window {
+        --pc-dialog-width: 340px;
+      }
+      .choose {
+        display: flex;
+        align-items: center;
+        gap: var(--pc-space-2);
+        width: 100%;
+      }
+      select {
+        flex: 1;
+        min-width: 0;
+        min-height: var(--pc-control-size);
+        padding: 0 var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font: inherit;
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+      }
+    `];
+	/** Asks the user to confirm, in a dialog (replaceable for tests) */
+	confirm = (options) => askConfirm(this.renderRoot, options);
+	/** Asks the user for text, in a dialog (replaceable for tests) */
+	prompt = (options) => askText(this.renderRoot, options);
+	constructor() {
+		super();
+		this.profiles = new ProfileGraphs();
+		this.label = "";
+		this.draft = linearPoints();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("points") || changed.has("profileId")) this.reset();
+	}
+	/** Go back to the graph it opened with */
+	reset() {
+		this.draft = structuredClone(this.points ?? linearPoints());
+		const source = this.profiles.get(this.profileId);
+		this.sourceId = source && samePoints(source.points, this.draft) ? source.id : void 0;
+	}
+	/** Load a graph's points */
+	load(id) {
+		const graph = this.profiles.get(id);
+		if (!graph) return;
+		this.draft = structuredClone(graph.points);
+		this.sourceId = graph.id;
+	}
+	/** Whether the graph being edited is one of the user's own, unchanged */
+	get ownSource() {
+		return this.sourceId !== void 0 && !this.profiles.isPreset(this.sourceId);
+	}
+	/**
+	* Ask for a name and save the points as one of the user's graphs, asking before replacing another with that name.
+	* Returns the saved graph's ID, or undefined if it wasn't saved.
+	*/
+	async saveAs(value) {
+		const name = (await this.prompt({
+			heading: this.t("paintCanvas.profileEditor.saveHeading"),
+			label: this.t("paintCanvas.profileEditor.name"),
+			value,
+			confirm: this.t("paintCanvas.common.save"),
+			cancel: this.t("paintCanvas.common.cancel")
+		}))?.trim();
+		if (!name) return void 0;
+		const existing = this.profiles.findByName(name);
+		if (existing && !await this.confirm({
+			heading: this.t("paintCanvas.profileEditor.replaceHeading"),
+			message: this.t("paintCanvas.profileEditor.replaceConfirm", { name }),
+			confirm: this.t("paintCanvas.presets.replace"),
+			cancel: this.t("paintCanvas.common.cancel"),
+			cancelling: true
+		})) return void 0;
+		const saved = this.profiles.save({
+			id: existing?.id,
+			name,
+			points: this.draft
+		});
+		if (saved) this.sourceId = saved.id;
+		return saved?.id;
+	}
+	/**
+	* Use the graph: save it first when it's edited or unsaved (asking for a name), then fire `pc-save`.
+	*/
+	async save() {
+		const id = this.sourceId ?? await this.saveAs(this.t("paintCanvas.profileEditor.custom"));
+		if (!id) return;
+		emit(this, "pc-save", {
+			points: structuredClone(this.draft),
+			profileId: id
+		});
+	}
+	/** Do one of the ⋮ menu's actions */
+	async act(action) {
+		const graph = this.profiles.get(this.sourceId);
+		if (action === "new") {
+			this.draft = linearPoints();
+			this.sourceId = void 0;
+		} else if (action === "duplicate") await this.saveAs(this.t("paintCanvas.profileEditor.custom"));
+		else if (action === "rename" && graph && this.ownSource) {
+			const name = await this.prompt({
+				heading: this.t("paintCanvas.profileEditor.renameHeading"),
+				label: this.t("paintCanvas.profileEditor.name"),
+				value: graph.name,
+				confirm: this.t("paintCanvas.common.save"),
+				cancel: this.t("paintCanvas.common.cancel")
+			});
+			if (name && this.profiles.rename(graph.id, name)) this.requestUpdate();
+		} else if (action === "delete" && graph && this.ownSource) {
+			if (await this.confirm({
+				heading: this.t("paintCanvas.profileEditor.deleteHeading"),
+				message: this.t("paintCanvas.profileEditor.deleteConfirm", { name: graph.name }),
+				confirm: this.t("paintCanvas.common.delete"),
+				cancel: this.t("paintCanvas.common.cancel"),
+				cancelling: true
+			}) && this.profiles.remove(graph.id)) this.sourceId = void 0;
+		}
+	}
+	/** A graph's name: the presets' in the chosen language */
+	graphName(id, name) {
+		return this.profiles.isPreset(id) ? this.t(`paintCanvas.profiles.${id}`) : name;
+	}
+	render() {
+		const own = this.ownSource;
+		const items = [
+			{
+				value: "new",
+				label: this.t("paintCanvas.profileEditor.new")
+			},
+			{
+				value: "duplicate",
+				label: this.t("paintCanvas.profileEditor.duplicate")
+			},
+			{
+				value: "rename",
+				label: this.t("paintCanvas.profileEditor.rename"),
+				disabled: !own
+			},
+			{
+				value: "delete",
+				label: this.t("paintCanvas.profileEditor.delete"),
+				disabled: !own,
+				danger: true
+			}
+		];
+		const title = this.t("paintCanvas.profileEditor.title", { param: this.label });
+		return html`<pc-dialog-window
+      open
+      shaded
+      label=${title}
+      @pc-dismiss=${(event) => {
+			event.preventDefault();
+			emit(this, "pc-close");
+		}}
+    >
+      <div slot="header-middle" class="choose">
+        <select
+          aria-label=${title}
+          .value=${live(this.sourceId ?? CUSTOM)}
+          @change=${(event) => this.load(event.target.value)}
+        >
+          ${this.sourceId === void 0 ? html`<option value=${CUSTOM}>
+                  ${this.t("paintCanvas.profileEditor.custom")}
+                </option>` : ""}
+          ${this.profiles.all.map((graph) => html`<option
+                value=${graph.id}
+                .selected=${graph.id === this.sourceId}
+              >
+                ${this.graphName(graph.id, graph.name)}
+              </option>`)}
+        </select>
+        <pc-context-menu
+          label=${this.t("paintCanvas.profileEditor.actions")}
+          .items=${items}
+          @pc-select=${(event) => void this.act(event.detail.value)}
+        ></pc-context-menu>
+      </div>
+      <pc-profile-graph
+        slot="body"
+        label=${title}
+        .points=${this.draft}
+        @pc-change=${(event) => {
+			this.draft = event.detail.points;
+			this.sourceId = void 0;
+		}}
+      ></pc-profile-graph>
+      <div slot="footer-middle" class="actions">
+        <pc-button class="save" @click=${() => void this.save()}>
+          ${this.t("paintCanvas.common.save")}
+        </pc-button>
+        <pc-button class="reset" variant="cancel" @click=${() => this.reset()}>
+          ${this.t("paintCanvas.profileEditor.reset")}
+        </pc-button>
+        <pc-button
+          class="dismiss"
+          variant="dismiss"
+          @click=${() => emit(this, "pc-close")}
+        >
+          ${this.t("paintCanvas.common.dismiss")}
+        </pc-button>
+      </div>
+    </pc-dialog-window>`;
+	}
+};
+defineElement("pc-profile-editor", PcProfileEditor);
+export { PcProfileEditor };

package/dist/ui/elements/PcProfileGraph/index.d.ts

@@ -0,0 +1,84 @@
+import { PcElement } from "../../base";
+import { Interpolation, type ProfilePoint } from "../../../lib/profiles";
+/**
+ * The SVG path of a curve through points, drawn as short straight pieces (y is flipped: up is less negative).
+ *
+ * @example
+ * curvePath(linearPoints()); // "M0,10 L0.1,9.9 …"
+ */
+export declare const curvePath: (points: readonly ProfilePoint[]) => string;
+/**
+ * Move a point within the grid, keeping it between its neighbours (and the first and last points at the edges), to
+ * multiples of 0.1. Returns new points.
+ *
+ * @example
+ * movePoint(points, 1, 4.04, -3); // points[1] at { x: 4, y: -3 }
+ */
+export declare const movePoint: (points: readonly ProfilePoint[], index: number, x: number, y: number) => ProfilePoint[];
+/**
+ * A profile graph to edit (see `@lvl99dotcom/paintcanvas/lib/profiles`): a 10 × 10 grid with the curve through its
+ * points, from the setting's min at the bottom left to its max at the top right.
+ *
+ * - Pressing the line adds a point there (smooth), selected.
+ * - Pressing a point selects it; dragging moves it (between its neighbours; the first and last stay at the edges).
+ * - With a point selected, the arrow keys move it a grid unit, and the buttons below make it a sharp corner (linear)
+ *   or smooth (bezier cubic), or remove it (−; not the first or last).
+ *
+ * Points are focusable buttons (Tab moves between them; focusing one selects it). Fires `pc-change` (detail:
+ * `{ points }`) whenever the points change, after changing `points` itself.
+ *
+ * @example
+ * html`<pc-profile-graph .points=${points} @pc-change=${(e) => (points = e.detail.points)}></pc-profile-graph>`
+ */
+export declare class PcProfileGraph extends PcElement {
+    static properties: {
+        points: {
+            attribute: boolean;
+        };
+        selected: {
+            type: NumberConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The points, from left to right */
+    points: ProfilePoint[];
+    /** The selected point's index, if any */
+    selected?: number;
+    /** The graph's name for screen readers */
+    label: string;
+    /** The point being dragged */
+    private dragging?;
+    constructor();
+    /** Change the points and tell listeners */
+    private setPoints;
+    /** A pointer's position in grid units */
+    private gridAt;
+    /**
+     * Add a point (smooth) where a press on the line is, and select it. Does nothing away from the line or when full.
+     */
+    private onGraphDown;
+    /** Select a point and start dragging it */
+    private startDrag;
+    private onMove;
+    private onUp;
+    /** Move the selected point a grid unit with the arrow keys */
+    private onPointKeyDown;
+    /** Make the selected point a sharp corner or smooth */
+    setInterpolation(i: Interpolation): void;
+    /** Remove the selected point (not the first or last) */
+    removeSelected(): void;
+    render(): import("lit").TemplateResult<1>;
+}