@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,3 @@
+// src/ui/elements/PcCanvas/style.css?inline
+var style_default = ":host {\n  display: block;\n  position: absolute;\n  inset: 0;\n  touch-action: none;\n}\ncanvas {\n  display: block;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\ncanvas.outlines,\ncanvas.sampler {\n  pointer-events: none;\n}\ncanvas.overlay {\n  pointer-events: none;\n  /* Inverts what is underneath so the brush outline is visible on any colour */\n  mix-blend-mode: difference;\n}\n";
+export { style_default as default };

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

@@ -0,0 +1,96 @@
+import { PcElement } from "../../base";
+import type PaintCanvas from "../../../lib/classes/PaintCanvas";
+import type { Insets, Rect } from "../../../lib/classes/Viewport";
+/** Largest map width or height in CSS pixels */
+export declare const MAP_SIZE = 90;
+/** Shortest time between thumbnail redraws, in milliseconds (redrawing the whole canvas is slow) */
+export declare const MAP_REDRAW_INTERVAL = 250;
+/**
+ * Convert the visible area into percentage offsets and sizes within the map, clamped to the canvas.
+ *
+ * @example
+ * viewportFrame({ x: 500, y: 0, width: 1000, height: 1000 }, 2000, 2000);
+ * // { left: 25, top: 0, width: 50, height: 50 }
+ */
+export declare const viewportFrame: (viewport: Rect, canvasWidth: number, canvasHeight: number) => {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * Canvas map: a small live picture of the whole canvas with a frame showing the part the user can see.
+ * Clicking or dragging on the map moves the view there.
+ *
+ * @example
+ * html`<pc-canvas-map .app=${app}></pc-canvas-map>`
+ */
+export declare class PcCanvasMap extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        insets: {
+            attribute: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /**
+     * Space covered by the interface on each side (CSS pixels), kept clear when fitting or centring the canvas. Without
+     * it, a toolbar on the left and (with the interface shown) a panel taking 37.5% on the right are assumed.
+     */
+    insets?: Insets;
+    /** The insets in effect (see `insets`) */
+    private get activeInsets();
+    /** Device pixels per CSS pixel (replaceable for tests) */
+    pixelRatio: () => number;
+    private changes;
+    private watchedLayers?;
+    /** Other people's drawings in a session, which also change the thumbnail */
+    private watchedRemote?;
+    private readonly onLayersChange;
+    private lastDrawn;
+    private pendingDraw?;
+    private dragging;
+    /** The thumbnail canvas */
+    get canvas(): HTMLCanvasElement | null;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    updated(): void;
+    /**
+     * Listen for changes to a layer stack (replacing any previous one).
+     */
+    private watchLayers;
+    /**
+     * Redraw the thumbnail soon, no more often than `MAP_REDRAW_INTERVAL`, once drawing pauses (see `BackgroundWork`).
+     */
+    scheduleThumbnail(): void;
+    /**
+     * Draw the whole canvas into the map now.
+     */
+    drawThumbnail(): void;
+    /**
+     * Move the view to the canvas point under a pointer on the map.
+     */
+    private moveViewTo;
+    /**
+     * Start moving the view.
+     */
+    private onPointerDown;
+    /**
+     * Keep moving the view while dragging.
+     */
+    private onPointerMove;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,187 @@
+import style_default from "./style.js";
+import { NO_TEXT_SELECTION_CSS } from "../../styles/index.js";
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { interfaceInsets } from "../PcCanvas/index.js";
+import { drawFlattened } from "../../../lib/rendering/compositing/index.js";
+import { fitSize } from "../../../lib/rendering/checkerboard/index.js";
+import { html, unsafeCSS } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+// src/ui/elements/PcCanvasMap/index.ts
+/** Largest map width or height in CSS pixels */
+var MAP_SIZE = 90;
+/** Shortest time between thumbnail redraws, in milliseconds (redrawing the whole canvas is slow) */
+var MAP_REDRAW_INTERVAL = 250;
+/**
+* Convert the visible area into percentage offsets and sizes within the map, clamped to the canvas.
+*
+* @example
+* viewportFrame({ x: 500, y: 0, width: 1000, height: 1000 }, 2000, 2000);
+* // { left: 25, top: 0, width: 50, height: 50 }
+*/
+var viewportFrame = (viewport, canvasWidth, canvasHeight) => {
+	const clampPercent = (value) => Math.max(0, Math.min(100, value));
+	const left = clampPercent(viewport.x / canvasWidth * 100);
+	const top = clampPercent(viewport.y / canvasHeight * 100);
+	return {
+		left,
+		top,
+		width: clampPercent((viewport.x + viewport.width) / canvasWidth * 100) - left,
+		height: clampPercent((viewport.y + viewport.height) / canvasHeight * 100) - top
+	};
+};
+/**
+* Canvas map: a small live picture of the whole canvas with a frame showing the part the user can see.
+* Clicking or dragging on the map moves the view there.
+*
+* @example
+* html`<pc-canvas-map .app=${app}></pc-canvas-map>`
+*/
+var PcCanvasMap = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		insets: { attribute: false }
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(NO_TEXT_SELECTION_CSS),
+		unsafeCSS(style_default)
+	];
+	/** The insets in effect (see `insets`) */
+	get activeInsets() {
+		const app = this.app;
+		return this.insets ?? interfaceInsets(app.viewport.width, app.interfaceVisible);
+	}
+	/** Device pixels per CSS pixel (replaceable for tests) */
+	pixelRatio = () => window.devicePixelRatio || 1;
+	changes = new ChangeController(this, () => [this.app, this.app?.viewport]);
+	watchedLayers;
+	/** Other people's drawings in a session, which also change the thumbnail */
+	watchedRemote;
+	onLayersChange = () => this.scheduleThumbnail();
+	lastDrawn = 0;
+	pendingDraw;
+	dragging = false;
+	/** The thumbnail canvas */
+	get canvas() {
+		return this.renderRoot.querySelector("canvas");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.watchLayers(void 0);
+		clearTimeout(this.pendingDraw);
+		this.pendingDraw = void 0;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		const app = this.app;
+		if (!app) return;
+		const size = fitSize(app.width, app.height, 90, 90);
+		this.style.width = `${size.width}px`;
+		this.style.height = `${size.height}px`;
+	}
+	updated() {
+		const layers = this.app?.layers;
+		if (layers !== this.watchedLayers) {
+			this.watchLayers(layers);
+			this.drawThumbnail();
+		}
+	}
+	/**
+	* Listen for changes to a layer stack (replacing any previous one).
+	*/
+	watchLayers(layers) {
+		this.watchedLayers?.removeEventListener("change", this.onLayersChange);
+		this.watchedLayers = layers;
+		layers?.addEventListener("change", this.onLayersChange);
+		const remote = layers ? this.app?.external : void 0;
+		this.watchedRemote?.removeEventListener("change", this.onLayersChange);
+		this.watchedRemote = remote;
+		remote?.addEventListener("change", this.onLayersChange);
+	}
+	/**
+	* Redraw the thumbnail soon, no more often than `MAP_REDRAW_INTERVAL`, once drawing pauses (see `BackgroundWork`).
+	*/
+	scheduleThumbnail() {
+		if (this.pendingDraw) return;
+		const wait = Math.max(0, this.lastDrawn + 250 - Date.now());
+		this.pendingDraw = setTimeout(() => {
+			this.pendingDraw = void 0;
+			this.app?.background.run("map", () => this.drawThumbnail());
+		}, wait);
+	}
+	/**
+	* Draw the whole canvas into the map now.
+	*/
+	drawThumbnail() {
+		const app = this.app;
+		const canvas = this.canvas;
+		if (!app || !canvas) return;
+		const size = fitSize(app.width, app.height, 90, 90);
+		const ratio = this.pixelRatio();
+		canvas.width = Math.round(size.width * ratio);
+		canvas.height = Math.round(size.height * ratio);
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		drawFlattened(ctx, app.drawables, app.width, app.height, canvas.width, canvas.height);
+		this.lastDrawn = Date.now();
+	}
+	/**
+	* Move the view to the canvas point under a pointer on the map.
+	*/
+	moveViewTo(event) {
+		const app = this.app;
+		if (!app) return;
+		const rect = this.getBoundingClientRect();
+		const x = (event.clientX - rect.left) / rect.width * app.width;
+		const y = (event.clientY - rect.top) / rect.height * app.height;
+		app.viewport.centreOn({
+			x,
+			y
+		}, this.activeInsets);
+	}
+	/**
+	* Start moving the view.
+	*/
+	onPointerDown(event) {
+		this.dragging = true;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		this.moveViewTo(event);
+	}
+	/**
+	* Keep moving the view while dragging.
+	*/
+	onPointerMove(event) {
+		if (this.dragging) this.moveViewTo(event);
+	}
+	render() {
+		const app = this.app;
+		const frame = app ? viewportFrame(app.viewport.visibleRect(), app.width, app.height) : {
+			left: 0,
+			top: 0,
+			width: 100,
+			height: 100
+		};
+		return html`
+      <canvas
+        aria-label=${this.t("paintCanvas.canvas.map")}
+        @pointerdown=${this.onPointerDown}
+        @pointermove=${this.onPointerMove}
+        @pointerup=${() => this.dragging = false}
+        @pointercancel=${() => this.dragging = false}
+      ></canvas>
+      <div
+        class="frame"
+        style=${styleMap({
+			left: `${frame.left}%`,
+			top: `${frame.top}%`,
+			width: `${frame.width}%`,
+			height: `${frame.height}%`
+		})}
+      ></div>
+    `;
+	}
+};
+defineElement("pc-canvas-map", PcCanvasMap);
+export { MAP_REDRAW_INTERVAL, MAP_SIZE, PcCanvasMap, viewportFrame };

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

@@ -0,0 +1,3 @@
+// src/ui/elements/PcCanvasMap/style.css?inline
+var style_default = ":host {\n  display: block;\n  position: relative;\n  touch-action: none;\n  /* A solid grey border, drawn outside so the map and its frame keep their size and position */\n  outline: 1px solid var(--pc-border);\n}\ncanvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n/* The part of the canvas the user can see */\n.frame {\n  position: absolute;\n  outline: 1px solid var(--pc-text);\n  pointer-events: none;\n}\n";
+export { style_default as default };

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

@@ -0,0 +1,72 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+/** An item in a context menu */
+export interface MenuItem {
+    /** What `pc-select` gives when it's chosen */
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Shown in the cancelling colour, e.g. for deleting */
+    danger?: boolean;
+}
+/**
+ * A menu of actions, e.g. for a layer. While `open`, it shows its items at `x`, `y` (in the page's viewport) and takes
+ * keyboard focus: arrow keys, Home and End move between items, Enter or Space chooses one, and Escape or Tab closes it.
+ * Fires `pc-select` with the chosen item's value, and `pc-close` when it should close (after choosing, Escape, Tab, or a
+ * press outside it). The implementer sets `open` to false in response.
+ *
+ * @example
+ * html`<pc-context-menu open .x=${10} .y=${20} label="Layer actions" .items=${items}
+ *   @pc-select=${(e) => act(e.detail.value)} @pc-close=${close}></pc-context-menu>`
+ */
+export declare class PcContextMenu extends PcElement {
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        items: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        x: {
+            type: NumberConstructor;
+        };
+        y: {
+            type: NumberConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    open: boolean;
+    items: readonly MenuItem[];
+    /** Names the menu for screen readers */
+    label: string;
+    x: number;
+    y: number;
+    private readonly onPointerDown;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    /** The enabled items' buttons */
+    private buttons;
+    /** Tell listeners the menu should close */
+    close(): void;
+    /** Choose an item, then close */
+    private choose;
+    /** Move focus between items, or close */
+    private onKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,148 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcContextMenu/index.ts
+/**
+* A menu of actions, e.g. for a layer. While `open`, it shows its items at `x`, `y` (in the page's viewport) and takes
+* keyboard focus: arrow keys, Home and End move between items, Enter or Space chooses one, and Escape or Tab closes it.
+* Fires `pc-select` with the chosen item's value, and `pc-close` when it should close (after choosing, Escape, Tab, or a
+* press outside it). The implementer sets `open` to false in response.
+*
+* @example
+* html`<pc-context-menu open .x=${10} .y=${20} label="Layer actions" .items=${items}
+*   @pc-select=${(e) => act(e.detail.value)} @pc-close=${close}></pc-context-menu>`
+*/
+var PcContextMenu = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		open: {
+			type: Boolean,
+			reflect: true
+		},
+		items: { attribute: false },
+		label: { type: String },
+		x: { type: Number },
+		y: { type: Number }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        position: fixed;
+        z-index: 10;
+        display: none;
+      }
+      :host([open]) {
+        display: block;
+      }
+      [role="menu"] {
+        display: flex;
+        min-width: 160px;
+        flex-direction: column;
+        padding: var(--pc-space-1) 0;
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        box-shadow: var(--pc-shadow);
+      }
+      button {
+        padding: var(--pc-space-2) var(--pc-space-3);
+        border: 0;
+        background: transparent;
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+        text-align: start;
+        cursor: pointer;
+      }
+      button:hover:not(:disabled),
+      button:focus-visible {
+        background: var(--pc-surface-hover);
+        outline: none;
+      }
+      button:focus-visible {
+        box-shadow: inset 0 0 0 var(--pc-focus-width) var(--pc-focus);
+      }
+      button.danger {
+        color: var(--pc-dismiss-text);
+      }
+      button:disabled {
+        color: var(--pc-text-muted);
+        cursor: default;
+      }
+    `];
+	onPointerDown = (event) => {
+		if (this.open && !event.composedPath().includes(this)) this.close();
+	};
+	constructor() {
+		super();
+		this.open = false;
+		this.items = [];
+		this.label = "";
+		this.x = 0;
+		this.y = 0;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("pointerdown", this.onPointerDown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("pointerdown", this.onPointerDown, true);
+	}
+	updated(changed) {
+		this.style.left = `${this.x}px`;
+		this.style.top = `${this.y}px`;
+		if (changed.has("open") && this.open) this.buttons()[0]?.focus();
+	}
+	/** The enabled items' buttons */
+	buttons() {
+		return [...this.renderRoot.querySelectorAll("button")].filter((button) => !button.disabled);
+	}
+	/** Tell listeners the menu should close */
+	close() {
+		emit(this, "pc-close");
+	}
+	/** Choose an item, then close */
+	choose(item) {
+		emit(this, "pc-select", { value: item.value });
+		this.close();
+	}
+	/** Move focus between items, or close */
+	onKeyDown(event) {
+		const buttons = this.buttons();
+		const index = buttons.indexOf(this.renderRoot.activeElement);
+		const last = buttons.length - 1;
+		const target = {
+			ArrowDown: index >= last ? 0 : index + 1,
+			ArrowUp: index <= 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (target !== void 0) {
+			event.preventDefault();
+			buttons[target]?.focus();
+		} else if (event.key === "Escape" || event.key === "Tab") {
+			event.preventDefault();
+			this.close();
+		}
+	}
+	render() {
+		return html`<div
+      part="menu"
+      role="menu"
+      aria-label=${this.label}
+      @keydown=${this.onKeyDown}
+    >
+      ${this.items.map((item) => html`<button
+            part="item"
+            type="button"
+            role="menuitem"
+            class=${item.danger ? "danger" : nothing}
+            ?disabled=${item.disabled}
+            data-value=${item.value}
+            @click=${() => this.choose(item)}
+          >
+            ${item.label}
+          </button>`)}
+    </div>`;
+	}
+};
+defineElement("pc-context-menu", PcContextMenu);
+export { PcContextMenu };

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

@@ -0,0 +1,63 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+import "../PcButton";
+import type { ButtonVariant } from "../PcButton";
+/** A button in a dialog */
+export interface DialogChoice {
+    /** What `pc-choose` gives when it's chosen */
+    value: string;
+    label: string;
+    /** Shown as cancelling (pink), e.g. for a choice that removes something */
+    cancelling?: boolean;
+    /** The button's style instead (e.g. `dismiss`: pink text without a background) */
+    variant?: ButtonVariant;
+}
+/** What `pc-choose` gives when the dialog is dismissed with Escape */
+export declare const CANCEL_CHOICE = "cancel";
+/**
+ * A modal window asking the user to choose, over a dimmed backdrop, with a heading, a message, any content of its own,
+ * and its choices, each on its own row (the cancel choice and those marked `cancelling` in pink, the others purple,
+ * unless a choice gives its own `variant`).
+ * Focus moves to the first choice when it opens. Fires `pc-choose` with the chosen value (`cancel` for Escape, pressed
+ * anywhere while it's open).
+ *
+ * @example
+ * html`<pc-dialog heading="Delete layer" message='Delete "Sketch"?'
+ *   .choices=${[{ value: "delete", label: "Delete", cancelling: true }, { value: "cancel", label: "Cancel" }]}
+ *   @pc-choose=${(e) => choose(e.detail.value)}></pc-dialog>`
+ */
+export declare class PcDialog extends PcElement {
+    static properties: {
+        heading: {
+            type: StringConstructor;
+        };
+        message: {
+            type: StringConstructor;
+        };
+        choices: {
+            attribute: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    heading: string;
+    message: string;
+    choices: readonly DialogChoice[];
+    constructor();
+    firstUpdated(changed: PropertyValues<this>): void;
+    /** Choose one of the choices (or `cancel`) */
+    choose(value: string): void;
+    private readonly onKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,114 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcDialog/index.ts
+/** What `pc-choose` gives when the dialog is dismissed with Escape */
+var CANCEL_CHOICE = "cancel";
+/**
+* A modal window asking the user to choose, over a dimmed backdrop, with a heading, a message, any content of its own,
+* and its choices, each on its own row (the cancel choice and those marked `cancelling` in pink, the others purple,
+* unless a choice gives its own `variant`).
+* Focus moves to the first choice when it opens. Fires `pc-choose` with the chosen value (`cancel` for Escape, pressed
+* anywhere while it's open).
+*
+* @example
+* html`<pc-dialog heading="Delete layer" message='Delete "Sketch"?'
+*   .choices=${[{ value: "delete", label: "Delete", cancelling: true }, { value: "cancel", label: "Cancel" }]}
+*   @pc-choose=${(e) => choose(e.detail.value)}></pc-dialog>`
+*/
+var PcDialog = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		heading: { type: String },
+		message: { type: String },
+		choices: { attribute: false }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        position: fixed;
+        z-index: 20;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--pc-space-3);
+        background: var(--pc-backdrop);
+      }
+      [role="dialog"] {
+        display: flex;
+        width: 100%;
+        max-width: 400px;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        padding: var(--pc-space-3);
+        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);
+      }
+      h2 {
+        margin: 0;
+        font-size: 1.2em;
+      }
+      p {
+        margin: 0;
+      }
+      .choices {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+      }
+    `];
+	constructor() {
+		super();
+		this.heading = "";
+		this.message = "";
+		this.choices = [];
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		const first = this.renderRoot.querySelector("pc-button");
+		if (first) first.updateComplete.then(() => first.focus());
+	}
+	/** Choose one of the choices (or `cancel`) */
+	choose(value) {
+		emit(this, "pc-choose", { value });
+	}
+	onKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		this.choose(CANCEL_CHOICE);
+	};
+	connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener("keydown", this.onKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("keydown", this.onKeyDown);
+	}
+	render() {
+		return html`<div
+      part="dialog"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="heading"
+      aria-describedby=${this.message ? "message" : nothing}
+    >
+      <h2 id="heading" part="heading">${this.heading}</h2>
+      ${this.message ? html`<p id="message" part="message">${this.message}</p>` : nothing}
+      <slot></slot>
+      <div class="choices" part="choices">
+        ${this.choices.map((choice) => html`<pc-button
+              variant=${choice.variant ?? (choice.value === "cancel" || choice.cancelling ? "cancel" : "accent")}
+              data-value=${choice.value}
+              @click=${() => this.choose(choice.value)}
+              >${choice.label}</pc-button
+            >`)}
+      </div>
+    </div>`;
+	}
+};
+defineElement("pc-dialog", PcDialog);
+export { CANCEL_CHOICE, PcDialog };