@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,36 @@
+import { nothing } from "lit";
+import { PcElement } from "../../base";
+/**
+ * An icon from the icon registry (see `icons`), by name. With a `label`, screen readers read it; without one, it's
+ * decorative and hidden from them. Sized by `--pc-icon-size`.
+ *
+ * @example
+ * html`<pc-icon name="brush" label="Brush"></pc-icon>`
+ */
+export declare class PcIcon extends PcElement {
+    static properties: {
+        name: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The icon's name in the registry */
+    name: string;
+    /** What the icon means, for screen readers (empty for a decorative icon) */
+    label: string;
+    constructor();
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

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

@@ -0,0 +1,43 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcIcon/index.ts
+/**
+* An icon from the icon registry (see `icons`), by name. With a `label`, screen readers read it; without one, it's
+* decorative and hidden from them. Sized by `--pc-icon-size`.
+*
+* @example
+* html`<pc-icon name="brush" label="Brush"></pc-icon>`
+*/
+var PcIcon = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		name: { type: String },
+		label: { type: String }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+        width: var(--pc-icon-size);
+        height: var(--pc-icon-size);
+        flex: none;
+      }
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        filter: var(--pc-icon-filter);
+      }
+    `];
+	constructor() {
+		super();
+		this.name = "";
+		this.label = "";
+	}
+	render() {
+		const url = this.icons.get(this.name);
+		if (!url) return nothing;
+		return this.label ? html`<img part="image" src=${url} alt=${this.label} />` : html`<img part="image" src=${url} alt="" aria-hidden="true" />`;
+	}
+};
+defineElement("pc-icon", PcIcon);
+export { PcIcon };

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

@@ -0,0 +1,46 @@
+import { PcElement } from "../../base";
+import "../PcIcon";
+/**
+ * An on/off setting shown as its icon in a box, purple while on (the icon stays the same). Its `label` names it for screen
+ * readers and as a tooltip. Fires `change` when the user turns it on or off.
+ *
+ * @example
+ * html`<pc-icon-toggle icon="pressure" label="Pressure" .checked=${on} @change=${toggle}></pc-icon-toggle>`
+ */
+export declare class PcIconToggle extends PcElement {
+    static properties: {
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        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[];
+    icon: string;
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    constructor();
+    /** Follow the user's change, and tell listeners */
+    private onChange;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,87 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcIconToggle/index.ts
+/**
+* An on/off setting shown as its icon in a box, purple while on (the icon stays the same). Its `label` names it for screen
+* readers and as a tooltip. Fires `change` when the user turns it on or off.
+*
+* @example
+* html`<pc-icon-toggle icon="pressure" label="Pressure" .checked=${on} @change=${toggle}></pc-icon-toggle>`
+*/
+var PcIconToggle = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		icon: { type: String },
+		label: { type: String },
+		checked: {
+			type: Boolean,
+			reflect: true
+		},
+		disabled: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+      }
+      label {
+        position: relative;
+        display: inline-flex;
+        padding: 2px;
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        cursor: pointer;
+      }
+      label:hover {
+        background: var(--pc-surface-hover);
+      }
+      :host([checked]) label {
+        border-color: var(--pc-accent);
+        background: var(--pc-accent);
+      }
+      label:has(input:focus-visible) {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
+      :host([disabled]) label {
+        opacity: 0.4;
+        cursor: default;
+      }
+      input {
+        position: absolute;
+        inset: 0;
+        margin: 0;
+        opacity: 0;
+        cursor: inherit;
+      }
+    `];
+	constructor() {
+		super();
+		this.icon = "";
+		this.label = "";
+		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="toggle" title=${this.label}>
+      <input
+        type="checkbox"
+        .checked=${live(this.checked)}
+        ?disabled=${this.disabled}
+        aria-label=${this.label}
+        @change=${this.onChange}
+      />
+      <pc-icon name=${this.icon}></pc-icon>
+    </label>`;
+	}
+};
+defineElement("pc-icon-toggle", PcIconToggle);
+export { PcIconToggle };

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

@@ -0,0 +1,40 @@
+import { PcElement } from "../../base";
+/**
+ * A small ⓘ button that shows a short explanation (the element's content) beside it, and hides it again when pressed
+ * again, when focus or a press goes elsewhere, or with Escape.
+ *
+ * @example
+ * html`<pc-info-tip>Focus pen mode stops fingers and palms from drawing.</pc-info-tip>`
+ */
+export declare class PcInfoTip extends PcElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The button's name for screen readers (default "More information", translated) */
+    label?: string;
+    open: boolean;
+    private readonly onPointerDown;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Escape hides the tip */
+    private onKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,95 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcInfoTip/index.ts
+/**
+* A small ⓘ button that shows a short explanation (the element's content) beside it, and hides it again when pressed
+* again, when focus or a press goes elsewhere, or with Escape.
+*
+* @example
+* html`<pc-info-tip>Focus pen mode stops fingers and palms from drawing.</pc-info-tip>`
+*/
+var PcInfoTip = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		label: { type: String },
+		open: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        position: relative;
+        display: inline-flex;
+      }
+      button {
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        border: 1px solid var(--pc-border);
+        border-radius: 50%;
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font: bold 12px var(--pc-font);
+        cursor: pointer;
+      }
+      button:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+      [role="tooltip"] {
+        position: absolute;
+        z-index: 10;
+        top: calc(100% + var(--pc-space-1));
+        left: 0;
+        width: max-content;
+        max-width: 240px;
+        padding: var(--pc-space-2);
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        color: var(--pc-text);
+        box-shadow: var(--pc-shadow);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size-small);
+      }
+    `];
+	onPointerDown = (event) => {
+		if (this.open && !event.composedPath().includes(this)) this.open = false;
+	};
+	constructor() {
+		super();
+		this.open = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("pointerdown", this.onPointerDown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("pointerdown", this.onPointerDown, true);
+	}
+	/** Escape hides the tip */
+	onKeyDown(event) {
+		if (event.key === "Escape" && this.open) {
+			event.preventDefault();
+			this.open = false;
+		}
+	}
+	render() {
+		return html`<button
+        part="button"
+        type="button"
+        aria-label=${this.label || this.t("paintCanvas.common.moreInformation")}
+        aria-expanded=${String(this.open)}
+        aria-describedby=${this.open ? "tip" : nothing}
+        @click=${() => this.open = !this.open}
+        @keydown=${this.onKeyDown}
+        @blur=${() => this.open = false}
+      >
+        i
+      </button>
+      ${this.open ? html`<div id="tip" part="tip" role="tooltip"><slot></slot></div>` : nothing}`;
+	}
+};
+defineElement("pc-info-tip", PcInfoTip);
+export { PcInfoTip };

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

@@ -0,0 +1,69 @@
+import { nothing } from "lit";
+import { PcElement } from "../../base";
+import { type InputSettingsData } from "../../../lib/classes/InputSettings";
+/** Settings `pc-input-settings` can change: PaintCanvas's `InputSettings`, or anything with the same data and `update` */
+export interface InputSettingsLike extends EventTarget {
+    readonly data: Readonly<InputSettingsData>;
+    update(changes: Partial<InputSettingsData>): void;
+}
+/**
+ * How the user's input devices control the canvas: scrolling and pinching (with Cmd/Ctrl + scroll to zoom on devices
+ * with a mouse or trackpad), focus pen mode, which touch gesture undoes, redoes, copies and pastes (on touch devices),
+ * and the language. Changes apply straight away. Hide focus pen mode or the language with `focusPen` and `languages`
+ * set to false. Fires `pc-language-change` (with the locale) when the user picks a language.
+ *
+ * @example
+ * html`<pc-input-settings .settings=${canvas.input}></pc-input-settings>`
+ */
+export declare class PcInputSettings extends PcElement {
+    static properties: {
+        settings: {
+            attribute: boolean;
+        };
+        focusPen: {
+            type: BooleanConstructor;
+        };
+        languages: {
+            type: BooleanConstructor;
+        };
+        touch: {
+            type: BooleanConstructor;
+        };
+        modifier: {
+            type: StringConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The settings shown and changed */
+    settings?: InputSettingsLike;
+    /** Whether to show focus pen mode (default true) */
+    focusPen: boolean;
+    /** Whether to show the language (default true) */
+    languages: boolean;
+    /** Whether the device is a phone or tablet: shows touch gestures, hides Cmd/Ctrl + scroll (detected by default) */
+    touch: boolean;
+    /** Name of the zoom modifier key ("Cmd" or "Ctrl", detected by default) */
+    modifier: string;
+    private changes;
+    constructor();
+    /** A checkbox for an on/off setting */
+    private toggle;
+    /**
+     * The touch gestures: which gesture undoes, redoes, copies and pastes. Choosing a gesture another action uses swaps
+     * them.
+     */
+    private renderGestures;
+    /** The language picker */
+    private renderLanguage;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

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

@@ -0,0 +1,154 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { languageName } from "../../../lib/i18n/index.js";
+import { isTouchDevice, zoomModifierName } from "../../../lib/classes/InputSettings/index.js";
+import { GESTURE_ACTIONS, TOUCH_GESTURES, assignGesture } from "../../../lib/utils/gestures/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcInputSettings/index.ts
+/** Translation keys of the gesture actions' names */
+var ACTION_KEYS = {
+	undo: "paintCanvas.common.undo",
+	redo: "paintCanvas.common.redo",
+	copy: "paintCanvas.common.copy",
+	paste: "paintCanvas.common.paste"
+};
+/**
+* How the user's input devices control the canvas: scrolling and pinching (with Cmd/Ctrl + scroll to zoom on devices
+* with a mouse or trackpad), focus pen mode, which touch gesture undoes, redoes, copies and pastes (on touch devices),
+* and the language. Changes apply straight away. Hide focus pen mode or the language with `focusPen` and `languages`
+* set to false. Fires `pc-language-change` (with the locale) when the user picks a language.
+*
+* @example
+* html`<pc-input-settings .settings=${canvas.input}></pc-input-settings>`
+*/
+var PcInputSettings = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		settings: { attribute: false },
+		focusPen: { type: Boolean },
+		languages: { type: Boolean },
+		touch: { type: Boolean },
+		modifier: { type: String }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      fieldset {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: var(--pc-space-1) var(--pc-space-2);
+        align-items: center;
+        margin: 0;
+        padding: var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius);
+      }
+      legend {
+        padding: 0 var(--pc-space-1);
+        font-weight: bold;
+      }
+      .toggle {
+        display: flex;
+        grid-column: 1 / -1;
+        gap: var(--pc-space-2);
+        align-items: center;
+      }
+      input[type="checkbox"] {
+        accent-color: var(--pc-accent);
+      }
+      input:focus-visible,
+      select:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+    `];
+	changes = new ChangeController(this, () => [this.settings]);
+	constructor() {
+		super();
+		this.focusPen = true;
+		this.languages = true;
+		this.touch = isTouchDevice();
+		this.modifier = zoomModifierName();
+	}
+	/** A checkbox for an on/off setting */
+	toggle(data, key, label) {
+		return html`<label class="toggle">
+      <input
+        type="checkbox"
+        name=${key}
+        .checked=${data[key]}
+        @change=${(e) => this.settings?.update({ [key]: e.target.checked })}
+      />
+      ${label}
+    </label>`;
+	}
+	/**
+	* The touch gestures: which gesture undoes, redoes, copies and pastes. Choosing a gesture another action uses swaps
+	* them.
+	*/
+	renderGestures(data) {
+		return html`<fieldset part="gestures">
+      <legend>${this.t("paintCanvas.inputSettings.gestures")}</legend>
+      ${GESTURE_ACTIONS.map((action) => html`<label for="gesture-${action}"
+              >${this.t(ACTION_KEYS[action])}</label
+            >
+            <select
+              id="gesture-${action}"
+              name="gesture-${action}"
+              @change=${(e) => this.settings?.update({ gestures: assignGesture(data.gestures, action, e.target.value) })}
+            >
+              ${[...TOUCH_GESTURES, "off"].map((gesture) => html`<option
+                    value=${gesture}
+                    ?selected=${data.gestures[action] === gesture}
+                  >
+                    ${this.t(gesture === "off" ? "paintCanvas.common.off" : `paintCanvas.gesture.${gesture}`)}
+                  </option>`)}
+            </select>`)}
+    </fieldset>`;
+	}
+	/** The language picker */
+	renderLanguage() {
+		const translations = this.translations;
+		return html`<fieldset part="language">
+      <label for="language"
+        >${this.t("paintCanvas.inputSettings.language")}</label
+      >
+      <select
+        id="language"
+        name="language"
+        @change=${(e) => {
+			const locale = e.target.value;
+			translations.setLocale(locale).then(() => emit(this, "pc-language-change", { locale }));
+		}}
+      >
+        ${translations.locales.map((locale) => html`<option
+              value=${locale}
+              lang=${locale}
+              ?selected=${translations.locale === locale}
+            >
+              ${languageName(locale)}
+            </option>`)}
+      </select>
+    </fieldset>`;
+	}
+	render() {
+		const data = this.settings?.data;
+		if (!data) return nothing;
+		return html`<fieldset part="controls">
+        <legend>${this.t("paintCanvas.inputSettings.title")}</legend>
+        ${this.toggle(data, "scrollPan", this.t(this.touch ? "paintCanvas.inputSettings.touchPan" : "paintCanvas.inputSettings.scrollPan"))}
+        ${this.toggle(data, "pinchZoom", this.t("paintCanvas.inputSettings.pinchZoom"))}
+        ${this.touch ? nothing : this.toggle(data, "modifierScrollZoom", this.t("paintCanvas.inputSettings.modifierScrollZoom", { key: this.modifier }))}
+        ${this.focusPen ? this.toggle(data, "focusPen", this.t("paintCanvas.inputSettings.focusPen")) : nothing}
+      </fieldset>
+      ${this.touch ? this.renderGestures(data) : nothing}
+      ${this.languages ? this.renderLanguage() : nothing}`;
+	}
+};
+defineElement("pc-input-settings", PcInputSettings);
+export { PcInputSettings };