@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,54 @@
+import { nothing, type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+import type PaintCanvas from "../../../lib/classes/PaintCanvas";
+/**
+ * A size in bytes in the largest unit it has at least one of, to one decimal place (whole bytes), for a locale.
+ *
+ * @example
+ * formatBytes(84_560, "en-GB"); // "84.6 kB"
+ * formatBytes(512, "en-GB"); // "512 byte"
+ */
+export declare const formatBytes: (bytes: number, locale?: string) => string;
+/**
+ * A line of small text about the canvas: its size; while the drawing is kept in the browser, how much its layer
+ * images take there; the zoom level; and the colour under the pointer (with a swatch; a dash when the pointer isn't
+ * over the canvas). The colour follows the pointer at most once a frame. It's not announced to screen readers as it
+ * changes, as it changes with every pointer move.
+ *
+ * @example
+ * html`<pc-stats .app=${app}></pc-stats>`
+ */
+export declare class PcStats extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The canvas described */
+    app?: PaintCanvas;
+    private changes;
+    /** The canvas whose pointer is followed */
+    private followed?;
+    /** The animation frame the next update waits for, if any */
+    private frame?;
+    private readonly onPointer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /**
+     * Follow a canvas's pointer (or none), instead of the one followed before.
+     */
+    private follow;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

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

@@ -0,0 +1,144 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { zoomPercent } from "../PcToolSettings/index.js";
+import { css, html, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+// src/ui/elements/PcStats/index.ts
+/** Units for sizes in bytes, each 1000 times the one before */
+var BYTE_UNITS = [
+	"byte",
+	"kilobyte",
+	"megabyte",
+	"gigabyte"
+];
+/**
+* A size in bytes in the largest unit it has at least one of, to one decimal place (whole bytes), for a locale.
+*
+* @example
+* formatBytes(84_560, "en-GB"); // "84.6 kB"
+* formatBytes(512, "en-GB"); // "512 byte"
+*/
+var formatBytes = (bytes, locale) => {
+	const step = Math.min(Math.max(Math.floor(Math.log10(bytes) / 3), 0), BYTE_UNITS.length - 1);
+	return new Intl.NumberFormat(locale, {
+		style: "unit",
+		unit: BYTE_UNITS[step],
+		unitDisplay: "short",
+		maximumFractionDigits: step === 0 ? 0 : 1
+	}).format(bytes / 1e3 ** step);
+};
+/**
+* A line of small text about the canvas: its size; while the drawing is kept in the browser, how much its layer
+* images take there; the zoom level; and the colour under the pointer (with a swatch; a dash when the pointer isn't
+* over the canvas). The colour follows the pointer at most once a frame. It's not announced to screen readers as it
+* changes, as it changes with every pointer move.
+*
+* @example
+* html`<pc-stats .app=${app}></pc-stats>`
+*/
+var PcStats = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: block;
+        padding: 2px var(--pc-space-2);
+        border-top: 1px solid var(--pc-border);
+        background: var(--pc-bar);
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size-small);
+      }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2px var(--pc-space-3);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      li {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        white-space: nowrap;
+        font-variant-numeric: tabular-nums;
+      }
+      .swatch {
+        width: 10px;
+        height: 10px;
+        border: 1px solid var(--pc-border);
+      }
+    `];
+	changes = new ChangeController(this, () => [
+		this.app,
+		this.app?.viewport,
+		this.app?.autosave
+	]);
+	/** The canvas whose pointer is followed */
+	followed;
+	/** The animation frame the next update waits for, if any */
+	frame;
+	onPointer = () => {
+		this.frame ??= requestAnimationFrame(() => {
+			this.frame = void 0;
+			this.requestUpdate();
+		});
+	};
+	connectedCallback() {
+		super.connectedCallback();
+		this.follow(this.app);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.follow(void 0);
+		if (this.frame !== void 0) cancelAnimationFrame(this.frame);
+		this.frame = void 0;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("app") && this.isConnected) this.follow(this.app);
+	}
+	/**
+	* Follow a canvas's pointer (or none), instead of the one followed before.
+	*/
+	follow(app) {
+		this.followed?.removeEventListener("pointer", this.onPointer);
+		this.followed = app;
+		app?.addEventListener("pointer", this.onPointer);
+	}
+	render() {
+		const app = this.app;
+		if (!app) return nothing;
+		const colour = app.pointer && app.sampleColour(app.pointer);
+		const autosave = app.autosave;
+		return html`<ul
+      part="stats"
+      aria-label=${this.t("paintCanvas.stats.label")}
+    >
+      <li class="size">
+        ${this.t("paintCanvas.stats.size", {
+			width: app.width,
+			height: app.height
+		})}
+      </li>
+      ${autosave ? html`<li class="stored">
+              ${this.t("paintCanvas.stats.stored", { size: formatBytes(autosave.storedBytes, this.translations.locale) })}
+            </li>` : nothing}
+      <li class="zoom">
+        ${this.t("paintCanvas.stats.zoom", { zoom: zoomPercent(app.viewport.zoom) })}
+      </li>
+      <li class="colour">
+        ${this.t("paintCanvas.stats.colour", { colour: colour ?? "—" })}
+        ${colour ? html`<span
+                class="swatch"
+                style=${styleMap({ background: colour })}
+              ></span>` : nothing}
+      </li>
+    </ul>`;
+	}
+};
+defineElement("pc-stats", PcStats);
+export { PcStats, formatBytes };

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

@@ -0,0 +1,56 @@
+import { PcElement } from "../../base";
+import type { IconName } from "../../icons";
+import "../PcButtonGroup";
+/** The themes to pick from: light, dark, or following the device (auto) */
+export declare const THEMES: readonly ["light", "dark", "auto"];
+export type Theme = (typeof THEMES)[number];
+/** Each theme's icon */
+export declare const THEME_ICONS: Readonly<Record<Theme, IconName>>;
+/**
+ * Whether a value is one of the themes.
+ *
+ * @example
+ * isTheme("dark"); // true
+ * isTheme(undefined); // false
+ */
+export declare const isTheme: (value: unknown) => value is Theme;
+/**
+ * Picks the light, dark or automatic theme (which follows the device), as a labelled group of three radios joined into
+ * one pill (a joined `<pc-button-group>`), each with its icon (sun, moon and star) and name; the picked one is purple.
+ * Shows the theme of its `target` (the page's root element by default; light unless it has another), and sets the
+ * target's `data-pc-theme` when the user picks one, firing `change` (detail: the theme).
+ *
+ * @example
+ * html`<pc-theme-picker @change=${(e) => save(e.detail)}></pc-theme-picker>`
+ */
+export declare class PcThemePicker extends PcElement {
+    static properties: {
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The theme shown as picked */
+    theme: Theme;
+    /** The element whose `data-pc-theme` is shown and set (the page's root element by default) */
+    target?: HTMLElement;
+    constructor();
+    connectedCallback(): void;
+    /** The element whose theme is shown and set */
+    private get themeTarget();
+    /**
+     * Pick a theme: show it, set it on the target and tell listeners.
+     *
+     * @example
+     * picker.pick("auto");
+     */
+    pick(theme: Theme): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,134 @@
+import { ICON_CONTROLS_CSS } from "../../styles/index.js";
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html, unsafeCSS } from "lit";
+// src/ui/elements/PcThemePicker/index.ts
+/** The themes to pick from: light, dark, or following the device (auto) */
+var THEMES = [
+	"light",
+	"dark",
+	"auto"
+];
+/** Each theme's icon */
+var THEME_ICONS = {
+	light: "sun",
+	dark: "moon",
+	auto: "star"
+};
+/**
+* Whether a value is one of the themes.
+*
+* @example
+* isTheme("dark"); // true
+* isTheme(undefined); // false
+*/
+var isTheme = (value) => THEMES.includes(value);
+/**
+* Picks the light, dark or automatic theme (which follows the device), as a labelled group of three radios joined into
+* one pill (a joined `<pc-button-group>`), each with its icon (sun, moon and star) and name; the picked one is purple.
+* Shows the theme of its `target` (the page's root element by default; light unless it has another), and sets the
+* target's `data-pc-theme` when the user picks one, firing `change` (detail: the theme).
+*
+* @example
+* html`<pc-theme-picker @change=${(e) => save(e.detail)}></pc-theme-picker>`
+*/
+var PcThemePicker = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		theme: {
+			type: String,
+			reflect: true
+		}
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(ICON_CONTROLS_CSS),
+		css`
+      :host {
+        display: block;
+      }
+      fieldset {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        min-width: 0;
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      legend {
+        margin-bottom: var(--pc-space-1);
+        padding: 0;
+      }
+      /* As wide as the picker, with the options sharing the width */
+      pc-button-group {
+        display: flex;
+      }
+      pc-button-group::part(group) {
+        flex: 1;
+      }
+      /* One pill: the button group gives each option its corners */
+      .icon-toggle {
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        padding: 2px var(--pc-space-2);
+        border-radius: var(--pc-group-radius, var(--pc-radius-small));
+      }
+      /* The picked option's border shows over its neighbours' */
+      .icon-toggle:has(input:checked) {
+        z-index: 1;
+        color: var(--pc-accent-text);
+      }
+      .icon-toggle:has(input:focus-visible) {
+        z-index: 2;
+      }
+    `
+	];
+	/** The element whose `data-pc-theme` is shown and set (the page's root element by default) */
+	target;
+	constructor() {
+		super();
+		this.theme = "light";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		const current = this.themeTarget.dataset.pcTheme;
+		if (isTheme(current)) this.theme = current;
+	}
+	/** The element whose theme is shown and set */
+	get themeTarget() {
+		return this.target ?? document.documentElement;
+	}
+	/**
+	* Pick a theme: show it, set it on the target and tell listeners.
+	*
+	* @example
+	* picker.pick("auto");
+	*/
+	pick(theme) {
+		this.theme = theme;
+		this.themeTarget.dataset.pcTheme = theme;
+		emit(this, "change", theme);
+	}
+	render() {
+		return html`<fieldset>
+      <legend>${this.t("paintCanvas.theme.label")}</legend>
+      <pc-button-group joined>
+        ${THEMES.map((theme) => html`<label class="icon-toggle" data-theme=${theme}>
+              <input
+                type="radio"
+                name="theme"
+                value=${theme}
+                .checked=${this.theme === theme}
+                @change=${() => this.pick(theme)}
+              />
+              <img src=${this.iconUrl(THEME_ICONS[theme])} alt="" />
+              <span>${this.t(`paintCanvas.theme.${theme}`)}</span>
+            </label>`)}
+      </pc-button-group>
+    </fieldset>`;
+	}
+};
+defineElement("pc-theme-picker", PcThemePicker);
+export { PcThemePicker, THEMES, THEME_ICONS, isTheme };

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

@@ -0,0 +1,58 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+import "../PcButton";
+/** What a toast tells: a notice, an error or a success (each has its own colour) */
+export type ToastKind = "info" | "error" | "success";
+/** How long a toast shows before dismissing itself, unless told otherwise (milliseconds) */
+export declare const TOAST_DURATION_MS = 5000;
+/**
+ * A short message, e.g. "Saved", coloured by its kind: a notice (`info`), an `error` (red) or a `success` (green). An
+ * error is announced at once; others politely. It dismisses itself after `duration` milliseconds (0 keeps it), or with
+ * its dismiss button. With an `action`, it shows that button too. Fires `pc-action` and `pc-dismiss`. The buttons move
+ * under the message when there isn't room beside it. The implementer places it (e.g. near the bottom of the screen).
+ *
+ * @example
+ * html`<pc-toast message="Preset deleted" action="Undo" @pc-action=${restore} @pc-dismiss=${hide}></pc-toast>`
+ */
+export declare class PcToast extends PcElement {
+    static properties: {
+        message: {
+            type: StringConstructor;
+        };
+        kind: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        action: {
+            type: StringConstructor;
+        };
+        duration: {
+            type: NumberConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    message: string;
+    /** "info" (default), "error" or "success" */
+    kind: ToastKind;
+    /** Label of an extra button (e.g. "Undo"), if any */
+    action?: string;
+    /** Milliseconds before it dismisses itself (0 keeps it until dismissed) */
+    duration: number;
+    private timer?;
+    constructor();
+    updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    /** Tell listeners it should go */
+    dismiss(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,110 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcToast/index.ts
+/** How long a toast shows before dismissing itself, unless told otherwise (milliseconds) */
+var TOAST_DURATION_MS = 5e3;
+/**
+* A short message, e.g. "Saved", coloured by its kind: a notice (`info`), an `error` (red) or a `success` (green). An
+* error is announced at once; others politely. It dismisses itself after `duration` milliseconds (0 keeps it), or with
+* its dismiss button. With an `action`, it shows that button too. Fires `pc-action` and `pc-dismiss`. The buttons move
+* under the message when there isn't room beside it. The implementer places it (e.g. near the bottom of the screen).
+*
+* @example
+* html`<pc-toast message="Preset deleted" action="Undo" @pc-action=${restore} @pc-dismiss=${hide}></pc-toast>`
+*/
+var PcToast = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		message: { type: String },
+		kind: {
+			type: String,
+			reflect: true
+		},
+		action: { type: String },
+		duration: { type: Number }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: block;
+      }
+      .toast {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--pc-space-2);
+        align-items: center;
+        padding: var(--pc-space-2) var(--pc-space-3);
+        border-radius: var(--pc-radius);
+        background: var(--pc-text);
+        color: var(--pc-surface);
+        box-shadow: var(--pc-shadow);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      :host([kind="error"]) .toast {
+        background: var(--pc-red);
+        color: #ffffff;
+      }
+      :host([kind="success"]) .toast {
+        background: var(--pc-green);
+        color: #ffffff;
+      }
+      p {
+        /* Wide enough to read; the buttons wrap under it when there isn't room */
+        flex: 1 1 16em;
+        margin: 0;
+      }
+      .buttons {
+        display: flex;
+        gap: var(--pc-space-1);
+      }
+      /* The dismiss button's text is the toast's colour */
+      .buttons pc-button[variant="dismiss"] {
+        color: inherit;
+      }
+      pc-button[variant="dismiss"]::part(button) {
+        color: inherit;
+      }
+    `];
+	timer;
+	constructor() {
+		super();
+		this.message = "";
+		this.kind = "info";
+		this.duration = TOAST_DURATION_MS;
+	}
+	updated(changed) {
+		if (!changed.has("message") && !changed.has("duration")) return;
+		clearTimeout(this.timer);
+		if (this.duration > 0) this.timer = setTimeout(() => this.dismiss(), this.duration);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearTimeout(this.timer);
+	}
+	/** Tell listeners it should go */
+	dismiss() {
+		clearTimeout(this.timer);
+		emit(this, "pc-dismiss");
+	}
+	render() {
+		return html`<div
+      class="toast"
+      part="toast"
+      role=${this.kind === "error" ? "alert" : "status"}
+    >
+      <p part="message">${this.message}</p>
+      <div class="buttons">
+        ${this.action ? html`<pc-button
+                variant="pill"
+                @click=${() => emit(this, "pc-action")}
+                >${this.action}</pc-button
+              >` : nothing}
+        <pc-button variant="dismiss" @click=${() => this.dismiss()}
+          >${this.t("paintCanvas.common.dismiss")}</pc-button
+        >
+      </div>
+    </div>`;
+	}
+};
+defineElement("pc-toast", PcToast);
+export { PcToast, TOAST_DURATION_MS };

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

@@ -0,0 +1,37 @@
+import { PcElement } from "../../base";
+/**
+ * An on/off switch with its text (the element's content) beside it, e.g. for settings. Fires `change` when the user
+ * turns it on or off.
+ *
+ * @example
+ * html`<pc-toggle-checkbox .checked=${pinchZoom} @change=${toggle}>Pinch to zoom</pc-toggle-checkbox>`
+ */
+export declare class PcToggleCheckbox extends PcElement {
+    static properties: {
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    checked: boolean;
+    disabled: boolean;
+    constructor();
+    /** Follow the user's change, and tell listeners */
+    private onChange;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,105 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcToggleCheckbox/index.ts
+/**
+* An on/off switch with its text (the element's content) beside it, e.g. for settings. Fires `change` when the user
+* turns it on or off.
+*
+* @example
+* html`<pc-toggle-checkbox .checked=${pinchZoom} @change=${toggle}>Pinch to zoom</pc-toggle-checkbox>`
+*/
+var PcToggleCheckbox = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		checked: {
+			type: Boolean,
+			reflect: true
+		},
+		disabled: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: flex;
+      }
+      label {
+        display: flex;
+        flex: 1;
+        gap: var(--pc-space-2);
+        align-items: center;
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+        cursor: pointer;
+      }
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: default;
+      }
+      input {
+        position: relative;
+        flex: none;
+        width: 36px;
+        height: 20px;
+        margin: 0;
+        border-radius: var(--pc-radius-pill);
+        background: var(--pc-disabled);
+        appearance: none;
+        cursor: inherit;
+      }
+      input::before {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #ffffff;
+        content: "";
+        transition: transform 0.15s;
+      }
+      input:checked {
+        background: var(--pc-accent);
+      }
+      input:checked::before {
+        transform: translateX(16px);
+      }
+      input:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        input::before {
+          transition: none;
+        }
+      }
+    `];
+	constructor() {
+		super();
+		this.checked = false;
+		this.disabled = false;
+	}
+	/** Follow the user's change, and tell listeners */
+	onChange(event) {
+		this.checked = event.target.checked;
+		emit(this, "change", { checked: this.checked });
+	}
+	render() {
+		return html`<label part="label">
+      <input
+        part="switch"
+        type="checkbox"
+        role="switch"
+        .checked=${live(this.checked)}
+        ?disabled=${this.disabled}
+        @change=${this.onChange}
+      />
+      <span><slot></slot></span>
+    </label>`;
+	}
+};
+defineElement("pc-toggle-checkbox", PcToggleCheckbox);
+export { PcToggleCheckbox };