@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

package/dist/ui/icons/index.js

@@ -1,79 +1,91 @@
-import brush_default from "./images/brush.js";
-import eraser_default from "./images/eraser.js";
-import cursor_default from "./images/cursor.js";
-import rectangle_mask_default from "./images/rectangle-mask.js";
-import circle_mask_default from "./images/circle-mask.js";
-import polygon_mask_default from "./images/polygon-mask.js";
-import freehand_mask_default from "./images/freehand-mask.js";
-import eyedropper_default from "./images/eyedropper.js";
-import zoom_default from "./images/zoom.js";
-import zoom_in_default from "./images/zoom-in.js";
-import zoom_out_default from "./images/zoom-out.js";
-import pan_default from "./images/pan.js";
-import undo_default from "./images/undo.js";
-import redo_default from "./images/redo.js";
-import layers_default from "./images/layers.js";
-import locked_default from "./images/locked.js";
-import unlocked_default from "./images/unlocked.js";
-import visible_default from "./images/visible.js";
-import hidden_default from "./images/hidden.js";
-import linked_default from "./images/linked.js";
-import unlinked_default from "./images/unlinked.js";
-import pressure_default from "./images/pressure.js";
-import focus_pen_default from "./images/focus-pen.js";
-import tilt_default from "./images/tilt.js";
-import randomise_default from "./images/randomise.js";
-import flip_horizontal_default from "./images/flip-horizontal.js";
-import flip_vertical_default from "./images/flip-vertical.js";
-import rotate_90_left_default from "./images/rotate-90-left.js";
-import rotate_90_right_default from "./images/rotate-90-right.js";
-import clipboard_default from "./images/clipboard.js";
-import smoothing_linear_default from "./images/smoothing-linear.js";
-import smoothing_bezier_quad_default from "./images/smoothing-bezier-quad.js";
-import smoothing_bezier_cubic_default from "./images/smoothing-bezier-cubic.js";
-import sun_default from "./images/sun.js";
-import moon_default from "./images/moon.js";
-import star_default from "./images/star.js";
+import icon_brush_2x_default from "./images/icon-brush@2x.js";
+import icon_eraser_2x_default from "./images/icon-eraser@2x.js";
+import icon_cursor_2x_default from "./images/icon-cursor@2x.js";
+import icon_rectangle_mask_2x_default from "./images/icon-rectangle-mask@2x.js";
+import icon_circle_mask_2x_default from "./images/icon-circle-mask@2x.js";
+import icon_polygon_mask_2x_default from "./images/icon-polygon-mask@2x.js";
+import icon_freehand_mask_2x_default from "./images/icon-freehand-mask@2x.js";
+import icon_eyedropper_2x_default from "./images/icon-eyedropper@2x.js";
+import icon_zoom_2x_default from "./images/icon-zoom@2x.js";
+import icon_zoom_in_2x_default from "./images/icon-zoom-in@2x.js";
+import icon_zoom_out_2x_default from "./images/icon-zoom-out@2x.js";
+import icon_pan_2x_default from "./images/icon-pan@2x.js";
+import icon_undo_2x_default from "./images/icon-undo@2x.js";
+import icon_redo_2x_default from "./images/icon-redo@2x.js";
+import icon_layers_2x_default from "./images/icon-layers@2x.js";
+import icon_locked_2x_default from "./images/icon-locked@2x.js";
+import icon_unlocked_2x_default from "./images/icon-unlocked@2x.js";
+import icon_visible_2x_default from "./images/icon-visible@2x.js";
+import icon_hidden_2x_default from "./images/icon-hidden@2x.js";
+import icon_linked_2x_default from "./images/icon-linked@2x.js";
+import icon_unlinked_2x_default from "./images/icon-unlinked@2x.js";
+import icon_pressure_2x_default from "./images/icon-pressure@2x.js";
+import icon_focus_pen_2x_default from "./images/icon-focus-pen@2x.js";
+import icon_tilt_2x_default from "./images/icon-tilt@2x.js";
+import icon_randomise_2x_default from "./images/icon-randomise@2x.js";
+import icon_flip_horizontal_2x_default from "./images/icon-flip-horizontal@2x.js";
+import icon_flip_vertical_2x_default from "./images/icon-flip-vertical@2x.js";
+import icon_rotate_90_left_2x_default from "./images/icon-rotate-90-left@2x.js";
+import icon_rotate_90_right_2x_default from "./images/icon-rotate-90-right@2x.js";
+import icon_rotate_2x_default from "./images/icon-rotate@2x.js";
+import icon_horizontal_size_2x_default from "./images/icon-horizontal-size@2x.js";
+import icon_vertical_size_2x_default from "./images/icon-vertical-size@2x.js";
+import icon_diagonal_tlbr_size_2x_default from "./images/icon-diagonal-tlbr-size@2x.js";
+import icon_diagonal_trbl_size_2x_default from "./images/icon-diagonal-trbl-size@2x.js";
+import icon_clipboard_2x_default from "./images/icon-clipboard@2x.js";
+import icon_smoothing_linear_2x_default from "./images/icon-smoothing-linear@2x.js";
+import icon_smoothing_bezier_quad_2x_default from "./images/icon-smoothing-bezier-quad@2x.js";
+import icon_smoothing_bezier_cubic_2x_default from "./images/icon-smoothing-bezier-cubic@2x.js";
+import icon_sun_2x_default from "./images/icon-sun@2x.js";
+import icon_moon_2x_default from "./images/icon-moon@2x.js";
+import icon_star_2x_default from "./images/icon-star@2x.js";
+import icon_cog_2x_default from "./images/icon-cog@2x.js";
 import { html } from "lit";
 // src/ui/icons/index.ts
 /** The icons that come with PaintCanvas, as URLs */
 var DEFAULT_ICONS = {
-	brush: brush_default,
-	eraser: eraser_default,
-	cursor: cursor_default,
-	rectangleMask: rectangle_mask_default,
-	circleMask: circle_mask_default,
-	polygonMask: polygon_mask_default,
-	freehandMask: freehand_mask_default,
-	eyedropper: eyedropper_default,
-	zoom: zoom_default,
-	zoomIn: zoom_in_default,
-	zoomOut: zoom_out_default,
-	pan: pan_default,
-	undo: undo_default,
-	redo: redo_default,
-	layers: layers_default,
-	locked: locked_default,
-	unlocked: unlocked_default,
-	visible: visible_default,
-	hidden: hidden_default,
-	linked: linked_default,
-	unlinked: unlinked_default,
-	pressure: pressure_default,
-	focusPen: focus_pen_default,
-	tilt: tilt_default,
-	randomise: randomise_default,
-	flipHorizontal: flip_horizontal_default,
-	flipVertical: flip_vertical_default,
-	rotate90Left: rotate_90_left_default,
-	rotate90Right: rotate_90_right_default,
-	clipboard: clipboard_default,
-	smoothingLinear: smoothing_linear_default,
-	smoothingBezierQuad: smoothing_bezier_quad_default,
-	smoothingBezierCubic: smoothing_bezier_cubic_default,
-	sun: sun_default,
-	moon: moon_default,
-	star: star_default
+	brush: icon_brush_2x_default,
+	eraser: icon_eraser_2x_default,
+	cursor: icon_cursor_2x_default,
+	rectangleMask: icon_rectangle_mask_2x_default,
+	circleMask: icon_circle_mask_2x_default,
+	polygonMask: icon_polygon_mask_2x_default,
+	freehandMask: icon_freehand_mask_2x_default,
+	eyedropper: icon_eyedropper_2x_default,
+	zoom: icon_zoom_2x_default,
+	zoomIn: icon_zoom_in_2x_default,
+	zoomOut: icon_zoom_out_2x_default,
+	pan: icon_pan_2x_default,
+	undo: icon_undo_2x_default,
+	redo: icon_redo_2x_default,
+	layers: icon_layers_2x_default,
+	locked: icon_locked_2x_default,
+	unlocked: icon_unlocked_2x_default,
+	visible: icon_visible_2x_default,
+	hidden: icon_hidden_2x_default,
+	linked: icon_linked_2x_default,
+	unlinked: icon_unlinked_2x_default,
+	pressure: icon_pressure_2x_default,
+	focusPen: icon_focus_pen_2x_default,
+	tilt: icon_tilt_2x_default,
+	randomise: icon_randomise_2x_default,
+	flipHorizontal: icon_flip_horizontal_2x_default,
+	flipVertical: icon_flip_vertical_2x_default,
+	rotate90Left: icon_rotate_90_left_2x_default,
+	rotate90Right: icon_rotate_90_right_2x_default,
+	rotate: icon_rotate_2x_default,
+	horizontalSize: icon_horizontal_size_2x_default,
+	verticalSize: icon_vertical_size_2x_default,
+	diagonalTlbrSize: icon_diagonal_tlbr_size_2x_default,
+	diagonalTrblSize: icon_diagonal_trbl_size_2x_default,
+	clipboard: icon_clipboard_2x_default,
+	smoothingLinear: icon_smoothing_linear_2x_default,
+	smoothingBezierQuad: icon_smoothing_bezier_quad_2x_default,
+	smoothingBezierCubic: icon_smoothing_bezier_cubic_2x_default,
+	sun: icon_sun_2x_default,
+	moon: icon_moon_2x_default,
+	star: icon_star_2x_default,
+	cog: icon_cog_2x_default
 };
 /**
 * The icons PaintCanvas's elements show, by name. Implementers can replace any icon (or add their own) with an image

package/dist/ui/index.d.ts

@@ -7,15 +7,26 @@ export { PcButtonGroup } from "./elements/PcButtonGroup";
 export { PcIconToggle } from "./elements/PcIconToggle";
 export { PcToggleCheckbox } from "./elements/PcToggleCheckbox";
 export { PcSlider } from "./elements/PcSlider";
-export { PcContextMenu, type MenuItem } from "./elements/PcContextMenu";
+export { PcNumberSlider, fitNumber } from "./elements/PcNumberSlider";
+export { PcBrushSize, sizeText } from "./elements/PcBrushSize";
+export { PointerDrag, DRAG_THRESHOLD, dragDelta } from "./drag";
+export { markDismissingPress, isDismissingPress } from "./dismiss";
+export { PcMenu, isMenuItem, menuSections, type MenuItem, type MenuLabel, type MenuDivider, type MenuEntry, } from "./elements/PcMenu";
+export { PcContextMenu, CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, menuLeft, menuTop, type MenuPlacement, } from "./elements/PcContextMenu";
 export { PcDialog, CANCEL_CHOICE, type DialogChoice, } from "./elements/PcDialog";
 export { PcToast, TOAST_DURATION_MS, type ToastKind } from "./elements/PcToast";
 export { PcInfoTip } from "./elements/PcInfoTip";
 export { PcPopover } from "./elements/PcPopover";
 export { PcPanel } from "./elements/PcPanel";
+export { PcPane, PANE_COLLAPSE_EVENT, type PaneEdge, type PaneOrientation, } from "./elements/PcPane";
 export { PcInputSettings, type InputSettingsLike, } from "./elements/PcInputSettings";
 export { PcMatch } from "./elements/PcMatch";
+export { PcColourPair, COLOUR_CLICK_EVENT } from "./elements/PcColourPair";
+export { PcClipboardTools, CLIPBOARD_TOOLS } from "./elements/PcClipboardTools";
+export { PcShortcutSettings, type ShortcutSettingsLike, } from "./elements/PcShortcutSettings";
+export { PcAppSettings } from "./elements/PcAppSettings";
+export { PcPanelColours, LONG_PRESS_MS, type ColourModel, } from "./elements/PcPanelColours";
 export { PcStats, formatBytes } from "./elements/PcStats";
 export { PcThemePicker, THEMES, THEME_ICONS, isTheme, type Theme, } from "./elements/PcThemePicker";
 export { PaintCanvasElement } from "./elements/PaintCanvas";
-export { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, sideModeFor, type InputKind, type LayoutState, type SideMode, type SideModeRule, } from "./layout";
+export { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, showsRail, sideModeFor, type InputKind, type LayoutState, type SideMode, type SideModeRule, } from "./layout";

package/dist/ui/index.js

@@ -1,3 +1,4 @@
+import { THEMES, isTheme } from "../lib/classes/UiSettings/index.js";
 import { DARK_TOKENS, LIGHT_TOKENS, TOKENS_CSS, installTokens, tokens } from "./tokens/index.js";
 import { DEFAULT_ICONS, IconRegistry, icons } from "./icons/index.js";
 import { PcElement, defineElement, emit } from "./base/index.js";
@@ -7,16 +8,27 @@ import { PcButtonGroup } from "./elements/PcButtonGroup/index.js";
 import { PcIconToggle } from "./elements/PcIconToggle/index.js";
 import { PcToggleCheckbox } from "./elements/PcToggleCheckbox/index.js";
 import { PcSlider } from "./elements/PcSlider/index.js";
-import { PcContextMenu } from "./elements/PcContextMenu/index.js";
+import { PcNumberSlider, fitNumber } from "./elements/PcNumberSlider/index.js";
+import { PcBrushSize, sizeText } from "./elements/PcBrushSize/index.js";
+import { DRAG_THRESHOLD, PointerDrag, dragDelta } from "./drag/index.js";
+import { isDismissingPress, markDismissingPress } from "./dismiss/index.js";
+import { PcMenu, isMenuItem, menuSections } from "./elements/PcMenu/index.js";
+import { CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, PcContextMenu, menuLeft, menuTop } from "./elements/PcContextMenu/index.js";
 import { CANCEL_CHOICE, PcDialog } from "./elements/PcDialog/index.js";
 import { PcToast, TOAST_DURATION_MS } from "./elements/PcToast/index.js";
 import { PcInfoTip } from "./elements/PcInfoTip/index.js";
 import { PcPopover } from "./elements/PcPopover/index.js";
 import { PcPanel } from "./elements/PcPanel/index.js";
+import { PANE_COLLAPSE_EVENT, PcPane } from "./elements/PcPane/index.js";
 import { PcInputSettings } from "./elements/PcInputSettings/index.js";
 import { PcMatch } from "./elements/PcMatch/index.js";
+import { COLOUR_CLICK_EVENT, PcColourPair } from "./elements/PcColourPair/index.js";
+import { CLIPBOARD_TOOLS, PcClipboardTools } from "./elements/PcClipboardTools/index.js";
+import { PcShortcutSettings } from "./elements/PcShortcutSettings/index.js";
+import { PcAppSettings } from "./elements/PcAppSettings/index.js";
+import { LONG_PRESS_MS, PcPanelColours } from "./elements/PcPanelColours/index.js";
 import { PcStats, formatBytes } from "./elements/PcStats/index.js";
-import { PcThemePicker, THEMES, THEME_ICONS, isTheme } from "./elements/PcThemePicker/index.js";
+import { PcThemePicker, THEME_ICONS } from "./elements/PcThemePicker/index.js";
 import { PaintCanvasElement } from "./elements/PaintCanvas/index.js";
-import { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, sideModeFor } from "./layout/index.js";
-export { CANCEL_CHOICE, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, IconRegistry, LIGHT_TOKENS, LayoutStateController, PaintCanvasElement, PcButton, PcButtonGroup, PcContextMenu, PcDialog, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcPanel, PcPopover, PcSlider, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, defineElement, emit, formatBytes, icons, installTokens, isTheme, matchesState, parseSideModes, sideModeFor, tokens };
+import { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, STATE_EVENT, matchesState, parseSideModes, showsRail, sideModeFor } from "./layout/index.js";
+export { CANCEL_CHOICE, CLIPBOARD_TOOLS, COLOUR_CLICK_EVENT, CONTEXT_MENU_TOGGLE_EVENT, DARK_TOKENS, DEFAULT_ICONS, DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, DRAG_THRESHOLD, IconRegistry, LIGHT_TOKENS, LONG_PRESS_MS, LayoutStateController, MENU_MARGIN, PANE_COLLAPSE_EVENT, PaintCanvasElement, PcAppSettings, PcBrushSize, PcButton, PcButtonGroup, PcClipboardTools, PcColourPair, PcContextMenu, PcDialog, PcElement, PcIcon, PcIconToggle, PcInfoTip, PcInputSettings, PcMatch, PcMenu, PcNumberSlider, PcPane, PcPanel, PcPanelColours, PcPopover, PcShortcutSettings, PcSlider, PcStats, PcThemePicker, PcToast, PcToggleCheckbox, PointerDrag, STATE_EVENT, THEMES, THEME_ICONS, TOAST_DURATION_MS, TOKENS_CSS, defineElement, dragDelta, emit, fitNumber, formatBytes, icons, installTokens, isDismissingPress, isMenuItem, isTheme, markDismissingPress, matchesState, menuLeft, menuSections, menuTop, parseSideModes, showsRail, sideModeFor, sizeText, tokens };

package/dist/ui/layout/index.d.ts

@@ -1,8 +1,16 @@
 import type { ReactiveController, ReactiveControllerHost } from "lit";
 /** How a side of the `<paint-canvas>` layout shows its content */
-export type SideMode = "docked" | "rail" | "floating";
+export type SideMode = "docked" | "rail" | "floating" | "overlay";
 /** All side modes */
 export declare const SIDE_MODES: readonly SideMode[];
+/**
+ * Whether a side mode shows its panels from a rail of buttons: `rail`, and `overlay` (a rail over the canvas).
+ *
+ * @example
+ * showsRail("overlay"); // true
+ * showsRail("docked"); // false
+ */
+export declare const showsRail: (mode: SideMode) => boolean;
 /** A side mode, and the layout width below which it applies (none for the mode used otherwise) */
 export interface SideModeRule {
     mode: SideMode;

package/dist/ui/layout/index.js

@@ -3,8 +3,17 @@
 var SIDE_MODES = [
 	"docked",
 	"rail",
-	"floating"
+	"floating",
+	"overlay"
 ];
+/**
+* Whether a side mode shows its panels from a rail of buttons: `rail`, and `overlay` (a rail over the canvas).
+*
+* @example
+* showsRail("overlay"); // true
+* showsRail("docked"); // false
+*/
+var showsRail = (mode) => mode === "rail" || mode === "overlay";
 /** Side modes used unless the implementer chooses others: docked, and a rail below 600px wide */
 var DEFAULT_SIDE_MODES = "docked, rail@600";
 /** Layout width (CSS pixels) below which the layout counts as narrow, unless the implementer chooses another */
@@ -93,4 +102,4 @@ var LayoutStateController = class {
 		this.source = void 0;
 	}
 };
-export { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, SIDE_MODES, STATE_EVENT, findLayout, matchesState, parseSideModes, sideModeFor };
+export { DEFAULT_NARROW_WIDTH, DEFAULT_SIDE_MODES, LayoutStateController, SIDE_MODES, STATE_EVENT, findLayout, matchesState, parseSideModes, showsRail, sideModeFor };

package/dist/ui/tokens/index.d.ts

@@ -5,16 +5,17 @@ export declare const LIGHT_TOKENS: TokenValues;
 /** The dark theme's tokens that differ from the light theme's */
 export declare const DARK_TOKENS: TokenValues;
 /**
- * The page-level stylesheet: light tokens on the page, so every element inherits them and the implementer can override
- * any token on `:root` or any ancestor. `data-pc-theme="dark"` on an ancestor switches what's inside it to the dark
- * theme, and `data-pc-theme="auto"` follows the device.
+ * The page-level stylesheet: tokens on the page, so every element inherits them and the implementer can override any
+ * token on `:root` or any ancestor. The page follows the device's theme (light or dark) unless its root element's
+ * `data-pc-theme` is `"light"` or `"dark"`; on an ancestor, `data-pc-theme` switches what's inside it to that theme
+ * (`"system"` follows the device).
  */
 export declare const PAGE_TOKENS_CSS: string;
 /** The design tokens as text: the page-level stylesheet (kept for including in the implementer's own stylesheets) */
 export declare const TOKENS_CSS: string;
 /**
  * Elements' shared styles: a `theme` attribute switches one element (and what's inside it) to the light, dark or
- * automatic theme, and `.pc-visually-hidden` hides text from view but not from screen readers.
+ * system theme, and `.pc-visually-hidden` hides text from view but not from screen readers.
  *
  * @example
  * static styles = [tokens, css`button { color: var(--pc-text); }`];

package/dist/ui/tokens/index.js

@@ -1,3 +1,4 @@
+import { DELETE_CURSOR } from "../../lib/rendering/cursors/index.js";
 import { unsafeCSS } from "lit";
 // src/ui/tokens/index.ts
 /** The light theme's tokens: colours, spacing, corner radius, fonts and focus ring */
@@ -20,6 +21,8 @@ var LIGHT_TOKENS = {
 	border: "#999999",
 	text: "#000000",
 	"text-muted": "#666666",
+	"map-border": "#999999",
+	"map-frame": "#000000",
 	shadow: "0 4px 16px rgb(0 0 0 / 25%)",
 	backdrop: "rgb(0 0 0 / 40%)",
 	accent: "#8f3de8",
@@ -37,12 +40,15 @@ var LIGHT_TOKENS = {
 	"radius-pill": "999px",
 	"control-size": "32px",
 	"icon-size": "24px",
+	"side-button-size": "52px",
+	"side-icon-size": "40px",
 	font: "Arial, Helvetica, sans-serif",
 	"font-size": "14px",
 	"font-size-small": "12px",
 	focus: "#000000",
 	"focus-width": "3px",
-	"color-scheme": "light"
+	"color-scheme": "light",
+	"delete-cursor": DELETE_CURSOR
 };
 /** The dark theme's tokens that differ from the light theme's */
 var DARK_TOKENS = {
@@ -56,7 +62,7 @@ var DARK_TOKENS = {
 	"text-muted": "#b0b0b0",
 	shadow: "0 4px 16px rgb(0 0 0 / 60%)",
 	backdrop: "rgb(0 0 0 / 60%)",
-	accent: "#a463f0",
+	accent: "#9449ed",
 	"dismiss-text": "#ff5cb8",
 	disabled: "#6b6b6b",
 	"icon-filter": "none",
@@ -71,18 +77,19 @@ var DARK_TOKENS = {
 */
 var declarations = (values) => Object.entries(values).map(([name, value]) => `--pc-${name}: ${value};`).join(" ");
 /**
-* The page-level stylesheet: light tokens on the page, so every element inherits them and the implementer can override
-* any token on `:root` or any ancestor. `data-pc-theme="dark"` on an ancestor switches what's inside it to the dark
-* theme, and `data-pc-theme="auto"` follows the device.
+* The page-level stylesheet: tokens on the page, so every element inherits them and the implementer can override any
+* token on `:root` or any ancestor. The page follows the device's theme (light or dark) unless its root element's
+* `data-pc-theme` is `"light"` or `"dark"`; on an ancestor, `data-pc-theme` switches what's inside it to that theme
+* (`"system"` follows the device).
 */
 var PAGE_TOKENS_CSS = `:root, [data-pc-theme="light"] { ${declarations(LIGHT_TOKENS)} }
 [data-pc-theme="dark"] { ${declarations(DARK_TOKENS)} }
-@media (prefers-color-scheme: dark) { [data-pc-theme="auto"] { ${declarations(DARK_TOKENS)} } }`;
+@media (prefers-color-scheme: dark) { :root:not([data-pc-theme="light"]), [data-pc-theme="system"] { ${declarations(DARK_TOKENS)} } }`;
 /** The design tokens as text: the page-level stylesheet (kept for including in the implementer's own stylesheets) */
 var TOKENS_CSS = PAGE_TOKENS_CSS;
 /**
 * Elements' shared styles: a `theme` attribute switches one element (and what's inside it) to the light, dark or
-* automatic theme, and `.pc-visually-hidden` hides text from view but not from screen readers.
+* system theme, and `.pc-visually-hidden` hides text from view but not from screen readers.
 *
 * @example
 * static styles = [tokens, css`button { color: var(--pc-text); }`];
@@ -92,7 +99,7 @@ var tokens = unsafeCSS(`:host([theme="light"]) { ${declarations(LIGHT_TOKENS)} }
 	...LIGHT_TOKENS,
 	...DARK_TOKENS
 })} }
-@media (prefers-color-scheme: dark) { :host([theme="auto"]) { ${declarations({
+@media (prefers-color-scheme: dark) { :host([theme="system"]) { ${declarations({
 	...LIGHT_TOKENS,
 	...DARK_TOKENS
 })} } }

package/locales/en-GB.json

@@ -5,6 +5,7 @@
   "paintCanvas.common.save": "Save",
   "paintCanvas.common.delete": "Delete",
   "paintCanvas.common.clear": "Clear",
+  "paintCanvas.common.cut": "Cut",
   "paintCanvas.common.copy": "Copy",
   "paintCanvas.common.paste": "Paste",
   "paintCanvas.common.undo": "Undo",
@@ -13,6 +14,7 @@
   "paintCanvas.common.moreInformation": "More information",
   "paintCanvas.common.width": "Width",
   "paintCanvas.common.height": "Height",
+  "paintCanvas.common.size": "Size",
   "paintCanvas.common.opacity": "Opacity",
   "paintCanvas.tool.brush": "Brush",
   "paintCanvas.tool.eraser": "Eraser",
@@ -25,8 +27,34 @@
   "paintCanvas.tool.zoom": "Zoom",
   "paintCanvas.tool.colourSample": "Colour sample",
   "paintCanvas.tool.withShortcut": "{tool} ({shortcut})",
+  "paintCanvas.colours.foreground": "Foreground colour ({colour})",
+  "paintCanvas.colours.background": "Background colour ({colour})",
+  "paintCanvas.palette.label": "Colour palette",
+  "paintCanvas.palette.hex": "Hex colour",
+  "paintCanvas.palette.model": "Colour model",
+  "paintCanvas.palette.rgb": "RGB",
+  "paintCanvas.palette.hsl": "HSL",
+  "paintCanvas.palette.red": "Red",
+  "paintCanvas.palette.green": "Green",
+  "paintCanvas.palette.blue": "Blue",
+  "paintCanvas.palette.hue": "Hue",
+  "paintCanvas.palette.saturation": "Saturation",
+  "paintCanvas.palette.lightness": "Lightness",
+  "paintCanvas.palette.saved": "Saved colours",
+  "paintCanvas.palette.add": "Save {colour} to the palette",
+  "paintCanvas.palette.colourActions": "{colour} actions",
+  "paintCanvas.palette.deleteColour": "Delete colour",
+  "paintCanvas.palette.deleteMessage": "Do you want to delete this colour?",
+  "paintCanvas.palette.deleteConfirm": "Yes, delete colour",
+  "paintCanvas.palette.import": "Import",
+  "paintCanvas.palette.export": "Export",
+  "paintCanvas.palette.importFile": "Import colour palette file",
+  "paintCanvas.palette.imported.one": "Added {count} colour",
+  "paintCanvas.palette.imported.other": "Added {count} colours",
+  "paintCanvas.palette.fileIncompatible": "Colour palette JSON file not compatible",
+  "paintCanvas.palette.fileReadFailed": "Failed to read colour palette JSON file",
+  "paintCanvas.palette.exportFailed": "Error exporting colour palette JSON file",
   "paintCanvas.toolbar.label": "Tools",
-  "paintCanvas.toolbar.currentColour": "Current colour",
   "paintCanvas.toolbar.layers": "Layers",
   "paintCanvas.toolbar.menu": "Menu",
   "paintCanvas.toolbar.undoWithShortcut": "Undo ({shortcut})",
@@ -35,6 +63,8 @@
   "paintCanvas.toolSettings.presets": "{tool} presets",
   "paintCanvas.toolSettings.configure": "Configure",
   "paintCanvas.toolSettings.constrainProportions": "Constrain proportions",
+  "paintCanvas.toolSettings.sizeSettings": "Size settings",
+  "paintCanvas.toolSettings.moreActions": "More actions",
   "paintCanvas.toolSettings.pressure": "Pressure",
   "paintCanvas.toolSettings.tilt": "Tilt",
   "paintCanvas.toolSettings.focusPen": "Focus pen mode",
@@ -50,7 +80,7 @@
   "paintCanvas.toolSettings.areaSample": "Area sample",
   "paintCanvas.brushMenu.presets": "{tool} presets",
   "paintCanvas.brushMenu.size": "{tool} size",
-  "paintCanvas.brushMenu.dragToResize": "Drag sideways to resize",
+  "paintCanvas.numberSlider.hint": "Drag sideways to change, or tap to type",
   "paintCanvas.brushMenu.newPreset": "New preset",
   "paintCanvas.brushMenu.create": "Create",
   "paintCanvas.brushMenu.import": "Import",
@@ -73,6 +103,8 @@
   "paintCanvas.brushConfig.eraserTitle": "Eraser configuration",
   "paintCanvas.brushConfig.presetName": "Name of the preset",
   "paintCanvas.brushConfig.shape": "Shape",
+  "paintCanvas.brushConfig.chooseShape": "Choose a shape",
+  "paintCanvas.brushConfig.customShape": "Custom",
   "paintCanvas.brushConfig.upload": "Upload",
   "paintCanvas.brushConfig.paste": "Paste",
   "paintCanvas.brushConfig.rotation": "Rotation",
@@ -89,6 +121,7 @@
   "paintCanvas.brushConfig.shapeFailed": "Couldn't use the brush shape",
   "paintCanvas.brushConfig.test": "Test",
   "paintCanvas.brushConfig.testArea": "Brush testing area",
+  "paintCanvas.brushConfig.showStrokePoints": "Show stroke points",
   "paintCanvas.shape.notPng": "Brush shapes must be PNG images",
   "paintCanvas.shape.tooLarge": "Brush shape images can be up to 2 MB",
   "paintCanvas.shape.readFailed": "Couldn't read the brush shape image",
@@ -167,6 +200,66 @@
   "paintCanvas.autosave.elsewhereMessage": "This drawing is open in another window or tab, and only one can draw on it at a time. Choose \"Draw here instead\" to continue in this window; the other one stops.",
   "paintCanvas.autosave.takeOver": "Draw here instead",
   "paintCanvas.autosave.failed": "Couldn't keep the drawing in this browser",
+  "paintCanvas.settings.saveFailed": "Couldn't keep your settings in this browser",
+  "paintCanvas.shortcuts.title": "Keyboard shortcuts",
+  "paintCanvas.shortcuts.recordHint": "Press the keys to use",
+  "paintCanvas.shortcuts.none": "None",
+  "paintCanvas.shortcuts.remove": "Remove the {action} shortcut",
+  "paintCanvas.shortcuts.fixed": "Can't be changed",
+  "paintCanvas.shortcuts.fixedUsed": "{keys} is used by {action}, which can't be changed",
+  "paintCanvas.shortcuts.moved": "{keys} moved from {from} to {to}",
+  "paintCanvas.shortcuts.reset": "Reset to defaults",
+  "paintCanvas.shortcuts.wasReset": "Keyboard shortcuts reset to defaults",
+  "paintCanvas.shortcuts.group.tools": "Tools",
+  "paintCanvas.shortcuts.group.brushes": "Brushes & erasers",
+  "paintCanvas.shortcuts.group.clipboard": "Clipboard",
+  "paintCanvas.shortcuts.group.masking": "Masking",
+  "paintCanvas.shortcuts.group.fills": "Fills and colours",
+  "paintCanvas.shortcuts.group.viewport": "View",
+  "paintCanvas.shortcuts.group.layers": "Layers",
+  "paintCanvas.shortcuts.group.history": "History",
+  "paintCanvas.shortcuts.group.general": "General",
+  "paintCanvas.shortcuts.pan": "Pan while held (back to the last tool when let go)",
+  "paintCanvas.shortcuts.tool-move": "Move",
+  "paintCanvas.shortcuts.tool-brush": "Brush",
+  "paintCanvas.shortcuts.tool-eraser": "Eraser",
+  "paintCanvas.shortcuts.tool-rectangle-mask": "Rectangle mask",
+  "paintCanvas.shortcuts.tool-circle-mask": "Circle mask",
+  "paintCanvas.shortcuts.tool-polygon-mask": "Polygon mask",
+  "paintCanvas.shortcuts.tool-freehand-mask": "Freehand mask",
+  "paintCanvas.shortcuts.tool-colour-sample": "Colour sampler",
+  "paintCanvas.shortcuts.tool-zoom": "Zoom",
+  "paintCanvas.shortcuts.brush-bigger": "Increase size",
+  "paintCanvas.shortcuts.brush-smaller": "Decrease size",
+  "paintCanvas.shortcuts.brush-more-opaque": "Increase opacity",
+  "paintCanvas.shortcuts.brush-less-opaque": "Decrease opacity",
+  "paintCanvas.shortcuts.cut": "Cut",
+  "paintCanvas.shortcuts.copy": "Copy",
+  "paintCanvas.shortcuts.paste": "Paste",
+  "paintCanvas.shortcuts.select-all": "Select all",
+  "paintCanvas.shortcuts.invert-selection": "Invert selection",
+  "paintCanvas.shortcuts.deselect": "Deselect",
+  "paintCanvas.shortcuts.fill-foreground": "Fill with foreground colour",
+  "paintCanvas.shortcuts.fill-background": "Fill with background colour",
+  "paintCanvas.shortcuts.swap-colours": "Swap foreground and background colours",
+  "paintCanvas.shortcuts.zoom-in": "Zoom in",
+  "paintCanvas.shortcuts.zoom-out": "Zoom out",
+  "paintCanvas.shortcuts.reset-zoom": "Zoom to 100%",
+  "paintCanvas.shortcuts.toggle-interface": "Show or hide the interface",
+  "paintCanvas.shortcuts.save": "Save as PNG",
+  "paintCanvas.shortcuts.undo": "Undo",
+  "paintCanvas.shortcuts.redo": "Redo",
+  "paintCanvas.shortcuts.delete": "Delete the masked area",
+  "paintCanvas.shortcuts.cancel": "Cancel",
+  "paintCanvas.shortcuts.commit": "Apply",
+  "paintCanvas.shortcuts.layerOpacity": "Set layer opacity to {percent}%",
+  "paintCanvas.settings.import": "Import settings",
+  "paintCanvas.settings.export": "Export settings",
+  "paintCanvas.settings.importFile": "Import settings file",
+  "paintCanvas.settings.imported": "Settings imported",
+  "paintCanvas.settings.fileIncompatible": "Settings JSON file not compatible",
+  "paintCanvas.settings.fileReadFailed": "Failed to read settings JSON file",
+  "paintCanvas.settings.exportFailed": "Error exporting settings JSON file",
   "paintCanvas.stats.label": "Canvas details",
   "paintCanvas.stats.size": "Canvas: {width} × {height} px",
   "paintCanvas.stats.zoom": "Zoom: {zoom}",
@@ -175,5 +268,5 @@
   "paintCanvas.theme.label": "Theme",
   "paintCanvas.theme.light": "Light",
   "paintCanvas.theme.dark": "Dark",
-  "paintCanvas.theme.auto": "Auto"
+  "paintCanvas.theme.system": "System"
 }