@sealpixel/ui 1.0.0-rc.0

package/dist/components/sealpixel-stepper.js

@@ -0,0 +1,248 @@
+import { css, html, LitElement } from 'lit';
+import { base } from '../theme.js';
+/** Delay before a held button starts repeating, then the interval between steps. */
+const REPEAT_DELAY_MS = 400;
+const REPEAT_MS = 60;
+/**
+ * A number with a floor. Where the dial is for a value the user feels their way
+ * to from a middle, this is for one they already know: a font size, a line
+ * width, a corner radius. It reads, it types, and it nudges by one, which is
+ * everything a magnitude needs and none of what a wheel is good at. It also
+ * costs about a fifth of the width.
+ *
+ * The value is a real `input[type=number]`, so the keyboard, the spinbutton
+ * role and the value semantics are the platform's. Holding a button repeats;
+ * holding Shift steps by ten.
+ *
+ * Emits `slide` while a held button is repeating (tier-A hints) and `commit`
+ * when the value settles, so a held button writes one operation and not forty.
+ */
+export class SealpixelStepper extends LitElement {
+    static { this.styles = [
+        base,
+        css `
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        justify-content: center;
+        align-items: baseline;
+        gap: calc(var(--sealpixel-space) * 0.75);
+        margin-bottom: 2px;
+      }
+      label {
+        color: var(--sealpixel-color-fg-muted);
+        font-size: 11px;
+        letter-spacing: 0.012em;
+      }
+      .box {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        height: var(--sealpixel-control-height);
+        padding: 2px;
+        background: var(--sealpixel-color-surface-2);
+        border: 1px solid transparent;
+        border-radius: var(--sealpixel-radius-pill);
+      }
+      :host([disabled]) .box {
+        opacity: 0.45;
+      }
+      button {
+        width: calc(var(--sealpixel-control-height) - 6px);
+        height: calc(var(--sealpixel-control-height) - 6px);
+        display: grid;
+        place-items: center;
+        border: 0;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--sealpixel-color-fg-muted);
+        font: inherit;
+        font-size: 15px;
+        line-height: 1;
+        cursor: pointer;
+        transition:
+          background var(--sealpixel-transition),
+          color var(--sealpixel-transition),
+          transform var(--sealpixel-duration) var(--sealpixel-ease-spring);
+      }
+      button:hover:not(:disabled) {
+        background: var(--sealpixel-color-surface);
+        color: var(--sealpixel-color-fg);
+      }
+      button:active:not(:disabled) {
+        transform: scale(0.9);
+        transition-duration: var(--sealpixel-duration-fast);
+      }
+      button:disabled {
+        opacity: 0.4;
+        cursor: default;
+      }
+      /*
+       * The field sizes to its digits rather than to the platform's idea of a
+       * number box, and the native spinners go: the two buttons are the spinner.
+       */
+      input {
+        width: 3.4em;
+        min-width: 0;
+        height: 100%;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--sealpixel-color-fg);
+        font: inherit;
+        font-size: 13px;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        appearance: textfield;
+      }
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+      input:focus {
+        outline: none;
+      }
+      .box:has(input:focus-visible) {
+        outline: 2px solid var(--sealpixel-color-focus);
+        outline-offset: 2px;
+      }
+      .unit {
+        padding-right: 6px;
+        color: var(--sealpixel-color-fg-muted);
+        font-size: 11px;
+      }
+    `,
+    ]; }
+    static { this.properties = {
+        label: { type: String },
+        value: { type: Number },
+        min: { type: Number },
+        max: { type: Number },
+        step: { type: Number },
+        unit: { type: String },
+        decimals: { type: Number },
+        disabled: { type: Boolean, reflect: true },
+    }; }
+    constructor() {
+        super();
+        this.timer = null;
+        this.repeating = false;
+        this.hold = (e, dir) => {
+            if (this.disabled || (e.button !== 0 && e.pointerType === 'mouse'))
+                return;
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            this.repeating = false;
+            this.bump(dir, e.shiftKey, false);
+            this.timer = setTimeout(() => {
+                this.repeating = true;
+                this.timer = setInterval(() => this.bump(dir, e.shiftKey, true), REPEAT_MS);
+            }, REPEAT_DELAY_MS);
+        };
+        this.release = () => {
+            if (this.timer !== null) {
+                clearTimeout(this.timer);
+                clearInterval(this.timer);
+                this.timer = null;
+            }
+            // A single tap already committed; only a repeat still owes one.
+            if (this.repeating) {
+                this.repeating = false;
+                this.emit('commit');
+            }
+        };
+        this.onChange = (e) => {
+            const raw = Number(e.target.value);
+            this.value = this.clamp(Number.isFinite(raw) ? raw : this.value);
+            // Put the clamped value back, so 9999 in a 0..512 field does not stay there.
+            e.target.value = this.value.toFixed(this.decimals);
+            this.emit('commit');
+        };
+        this.onKeydown = (e) => {
+            // The field's own arrow handling ignores `decimals` and never fires until
+            // blur, so the stepper takes them and commits straight away.
+            const dir = e.key === 'ArrowUp' ? 1 : e.key === 'ArrowDown' ? -1 : 0;
+            if (dir === 0)
+                return;
+            e.preventDefault();
+            this.bump(dir, e.shiftKey, false);
+        };
+        this.label = '';
+        this.value = 0;
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.unit = '';
+        this.decimals = 0;
+        this.disabled = false;
+    }
+    render() {
+        const id = 'stepper';
+        return html `
+      <div class="row">
+        <label for=${id}>${this.label}</label>
+      </div>
+      <div class="box" part="stepper">
+        <button
+          type="button"
+          part="step-down"
+          aria-label=${`${this.label} −`}
+          ?disabled=${this.disabled || this.value <= this.min}
+          @pointerdown=${(e) => this.hold(e, -1)}
+          @pointerup=${this.release}
+          @pointercancel=${this.release}
+          @pointerleave=${this.release}
+        >−</button>
+        <input
+          part="input"
+          id=${id}
+          type="number"
+          inputmode="decimal"
+          .value=${this.value.toFixed(this.decimals)}
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          ?disabled=${this.disabled}
+          aria-label=${this.label}
+          @change=${this.onChange}
+          @keydown=${this.onKeydown}
+        />
+        ${this.unit ? html `<span class="unit" aria-hidden="true">${this.unit}</span>` : ''}
+        <button
+          type="button"
+          part="step-up"
+          aria-label=${`${this.label} +`}
+          ?disabled=${this.disabled || this.value >= this.max}
+          @pointerdown=${(e) => this.hold(e, 1)}
+          @pointerup=${this.release}
+          @pointercancel=${this.release}
+          @pointerleave=${this.release}
+        >+</button>
+      </div>
+    `;
+    }
+    clamp(v) {
+        const factor = 10 ** this.decimals;
+        const rounded = Math.round(v * factor) / factor;
+        return Math.min(this.max, Math.max(this.min, rounded));
+    }
+    emit(name) {
+        this.dispatchEvent(new CustomEvent(name, { detail: this.value, bubbles: true, composed: true }));
+    }
+    /** One step. `live` reports progress; the commit follows when the button goes up. */
+    bump(dir, shift, live) {
+        const next = this.clamp(this.value + dir * this.step * (shift ? 10 : 1));
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.emit(live ? 'slide' : 'commit');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.release();
+    }
+}
+//# sourceMappingURL=sealpixel-stepper.js.map

package/dist/components/sealpixel-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sealpixel-stepper.js","sourceRoot":"","sources":["../../src/components/sealpixel-stepper.ts"],"names":[],"mappings":"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"}

package/dist/components/sealpixel-toolbar.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import type { UiTool } from '../tool.js';
+/** Tool switcher with roving tabindex. Horizontal on narrow layouts, vertical on wide. */
+export declare class SealpixelToolbar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        tools: {
+            attribute: boolean;
+        };
+        active: {
+            type: StringConstructor;
+        };
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        t: {
+            attribute: boolean;
+        };
+    };
+    tools: UiTool[];
+    active: string | null;
+    orientation: 'horizontal' | 'vertical';
+    t: (key: string) => string;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+    private select;
+    private onKeydown;
+}
+//# sourceMappingURL=sealpixel-toolbar.d.ts.map

package/dist/components/sealpixel-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sealpixel-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/sealpixel-toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEzC,0FAA0F;AAC1F,qBAAa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAkGpB;IAEF,OAAgB,UAAU;;;;;;;;;;;;;;MAKxB;IAEM,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;;IAU1B,MAAM;IAkBf,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,SAAS,CAiBf;CACH"}

package/dist/components/sealpixel-toolbar.js

@@ -0,0 +1,149 @@
+import { css, html, LitElement } from 'lit';
+import { base } from '../theme.js';
+/** Tool switcher with roving tabindex. Horizontal on narrow layouts, vertical on wide. */
+export class SealpixelToolbar extends LitElement {
+    static { this.styles = [
+        base,
+        css `
+      :host {
+        display: flex;
+        padding: 4px;
+        background: var(--sealpixel-color-surface);
+        border-top: 1px solid var(--sealpixel-color-border);
+        overflow: auto;
+        scrollbar-width: thin;
+        /* Arrow keys move the roving tabindex; the scroll follows it smoothly. */
+        scroll-behavior: smooth;
+      }
+      .tools {
+        display: flex;
+        gap: 4px;
+        /* Centres when it fits, scrolls from the first button when it does not. */
+        margin: auto;
+      }
+      :host([orientation='vertical']) {
+        border-top: none;
+        border-right: 1px solid var(--sealpixel-color-border);
+      }
+      :host([orientation='vertical']) .tools {
+        flex-direction: column;
+        margin: 0;
+      }
+      button {
+        min-width: var(--sealpixel-touch-target);
+        min-height: calc(var(--sealpixel-touch-target) + 10px);
+        border: 1px solid transparent;
+        border-radius: var(--sealpixel-radius);
+        background: transparent;
+        color: var(--sealpixel-color-fg-muted);
+        font: inherit;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        padding: 6px 4px;
+        max-width: 100%;
+        transition:
+          background var(--sealpixel-transition),
+          color var(--sealpixel-transition);
+      }
+      button:hover {
+        color: var(--sealpixel-color-fg);
+        background: var(--sealpixel-color-surface-2);
+      }
+      button[aria-pressed='true'] {
+        color: var(--sealpixel-color-accent);
+        background: var(--sealpixel-color-accent-soft, var(--sealpixel-color-surface-2));
+      }
+      .icon {
+        font-size: 20px;
+        line-height: 1;
+        width: 28px;
+        height: 28px;
+        display: grid;
+        place-items: center;
+        border-radius: 8px;
+        /*
+         * The filled pill is the one element that says which tool is open, so
+         * it is the one that earns a spring. Colour and shadow ride the
+         * standard curve underneath, otherwise the overshoot shows up as a
+         * flash of accent at the edges.
+         */
+        transition:
+          transform var(--sealpixel-duration) var(--sealpixel-ease-spring),
+          background var(--sealpixel-duration) var(--sealpixel-ease),
+          color var(--sealpixel-duration) var(--sealpixel-ease),
+          box-shadow var(--sealpixel-duration) var(--sealpixel-ease);
+      }
+      button:hover .icon {
+        transform: translateY(-1px);
+      }
+      button[aria-pressed='true'] .icon {
+        background: var(--sealpixel-color-accent);
+        color: var(--sealpixel-color-accent-fg);
+        box-shadow: var(--sealpixel-shadow-sm, none);
+        transform: none;
+      }
+      button:active .icon {
+        transform: scale(0.92);
+        transition-duration: var(--sealpixel-duration-fast);
+      }
+      .label {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `,
+    ]; }
+    static { this.properties = {
+        tools: { attribute: false },
+        active: { type: String },
+        orientation: { type: String, reflect: true },
+        t: { attribute: false },
+    }; }
+    constructor() {
+        super();
+        this.onKeydown = (e) => {
+            const keys = this.orientation === 'vertical' ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
+            const dir = e.key === keys[0] ? -1 : e.key === keys[1] ? 1 : 0;
+            if (dir === 0)
+                return;
+            e.preventDefault();
+            const idx = Math.max(0, this.tools.findIndex((t) => t.id === this.active));
+            const next = this.tools[(idx + dir + this.tools.length) % this.tools.length];
+            if (next) {
+                this.select(next.id);
+                this.updateComplete.then(() => this.renderRoot.querySelector(`[data-tool="${next.id}"]`)?.focus());
+            }
+        };
+        this.tools = [];
+        this.active = null;
+        this.orientation = 'horizontal';
+        this.t = (k) => k;
+    }
+    render() {
+        return html `<div class="tools" role="toolbar" aria-orientation=${this.orientation} @keydown=${this.onKeydown}>
+      ${this.tools.map((tool, i) => html `<button
+          part="tool"
+          type="button"
+          data-tool=${tool.id}
+          aria-pressed=${this.active === tool.id ? 'true' : 'false'}
+          tabindex=${this.active === tool.id || (this.active === null && i === 0) ? 0 : -1}
+          @click=${() => this.select(tool.id)}
+        >
+          <span class="icon" aria-hidden="true">${tool.icon}</span>
+          <span class="label">${this.t(tool.label)}</span>
+        </button>`)}
+    </div>`;
+    }
+    select(id) {
+        this.dispatchEvent(new CustomEvent('tool-select', { detail: id, bubbles: true, composed: true }));
+    }
+}
+//# sourceMappingURL=sealpixel-toolbar.js.map

package/dist/components/sealpixel-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sealpixel-toolbar.js","sourceRoot":"","sources":["../../src/components/sealpixel-toolbar.ts"],"names":[],"mappings":"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"}

package/dist/controllers/gesture-controller.d.ts

@@ -0,0 +1,65 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface GestureHandlers {
+    /** One pointer moved. `dx`, `dy` in CSS pixels since the last event. */
+    drag?: (e: {
+        x: number;
+        y: number;
+        dx: number;
+        dy: number;
+        pointerType: string;
+    }) => void;
+    dragStart?: (e: {
+        x: number;
+        y: number;
+        target: EventTarget | null;
+    }) => void;
+    dragEnd?: () => void;
+    tap?: (e: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Two pointers: scale and rotation deltas around the midpoint. */
+    pinch?: (e: {
+        cx: number;
+        cy: number;
+        scale: number;
+        rotation: number;
+        dx: number;
+        dy: number;
+    }) => void;
+    /** Wheel with ctrl/meta, or trackpad pinch. `factor` > 1 zooms in. */
+    wheelZoom?: (e: {
+        cx: number;
+        cy: number;
+        factor: number;
+    }) => void;
+    /** Return `false` to leave the event to the page (it scrolls instead of the stage). */
+    wheelPan?: (e: {
+        dx: number;
+        dy: number;
+    }) => boolean | undefined;
+}
+/**
+ * Pointer Events only. Recognises drag, tap, two-finger pinch/rotate/pan and
+ * wheel gestures. Works the same for mouse, touch and pen.
+ */
+export declare class GestureController implements ReactiveController {
+    private handlers;
+    private pointers;
+    private last;
+    private moved;
+    private pinchPrev;
+    private element;
+    constructor(host: ReactiveControllerHost, handlers: GestureHandlers);
+    attach(element: HTMLElement): void;
+    detach(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private local;
+    private onDown;
+    private onMove;
+    private onUp;
+    private onWheel;
+    private pinchState;
+}
+//# sourceMappingURL=gesture-controller.d.ts.map

package/dist/controllers/gesture-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture-controller.d.ts","sourceRoot":"","sources":["../../src/controllers/gesture-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1F,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5C,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE;QACV,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,KAAK,IAAI,CAAC;IACX,sEAAsE;IACtE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACpE,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,GAAG,SAAS,CAAC;CACnE;AAOD;;;GAGG;AACH,qBAAa,iBAAkB,YAAW,kBAAkB;IASxD,OAAO,CAAC,QAAQ;IARlB,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,IAAI,CAAkB;IAC9B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAwE;IACzF,OAAO,CAAC,OAAO,CAA4B;gBAGzC,IAAI,EAAE,sBAAsB,EACpB,QAAQ,EAAE,eAAe;IAKnC,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAYlC,MAAM,IAAI,IAAI;IAWd,aAAa,IAAI,IAAI;IACrB,gBAAgB,IAAI,IAAI;IAIxB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,MAAM,CAYZ;IAEF,OAAO,CAAC,MAAM,CAsBZ;IAEF,OAAO,CAAC,IAAI,CAaV;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,UAAU;CASnB"}

package/dist/controllers/gesture-controller.js

@@ -0,0 +1,125 @@
+/**
+ * Pointer Events only. Recognises drag, tap, two-finger pinch/rotate/pan and
+ * wheel gestures. Works the same for mouse, touch and pen.
+ */
+export class GestureController {
+    constructor(host, handlers) {
+        this.handlers = handlers;
+        this.pointers = new Map();
+        this.last = null;
+        this.moved = false;
+        this.pinchPrev = null;
+        this.element = null;
+        this.onDown = (e) => {
+            if (e.button !== 0 && e.pointerType === 'mouse')
+                return;
+            this.element.setPointerCapture(e.pointerId);
+            const p = this.local(e);
+            this.pointers.set(e.pointerId, p);
+            if (this.pointers.size === 1) {
+                this.last = p;
+                this.moved = false;
+                this.handlers.dragStart?.({ ...p, target: e.target });
+            }
+            else if (this.pointers.size === 2) {
+                this.pinchPrev = this.pinchState();
+            }
+        };
+        this.onMove = (e) => {
+            if (!this.pointers.has(e.pointerId))
+                return;
+            const p = this.local(e);
+            this.pointers.set(e.pointerId, p);
+            if (this.pointers.size === 1 && this.last) {
+                const dx = p.x - this.last.x;
+                const dy = p.y - this.last.y;
+                if (Math.abs(dx) + Math.abs(dy) > 0)
+                    this.moved = true;
+                this.last = p;
+                this.handlers.drag?.({ ...p, dx, dy, pointerType: e.pointerType });
+            }
+            else if (this.pointers.size === 2 && this.pinchPrev) {
+                const now = this.pinchState();
+                this.handlers.pinch?.({
+                    cx: now.cx,
+                    cy: now.cy,
+                    scale: this.pinchPrev.dist === 0 ? 1 : now.dist / this.pinchPrev.dist,
+                    rotation: now.angle - this.pinchPrev.angle,
+                    dx: now.cx - this.pinchPrev.cx,
+                    dy: now.cy - this.pinchPrev.cy,
+                });
+                this.pinchPrev = now;
+            }
+        };
+        this.onUp = (e) => {
+            if (!this.pointers.has(e.pointerId))
+                return;
+            const wasSingle = this.pointers.size === 1;
+            this.pointers.delete(e.pointerId);
+            if (wasSingle) {
+                if (!this.moved)
+                    this.handlers.tap?.(this.local(e));
+                this.handlers.dragEnd?.();
+                this.last = null;
+            }
+            if (this.pointers.size < 2)
+                this.pinchPrev = null;
+            if (this.pointers.size === 1) {
+                this.last = [...this.pointers.values()][0] ?? null;
+            }
+        };
+        this.onWheel = (e) => {
+            const p = this.local(e);
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                this.handlers.wheelZoom?.({ cx: p.x, cy: p.y, factor: Math.exp(-e.deltaY * 0.01) });
+            }
+            else if (this.handlers.wheelPan) {
+                if (this.handlers.wheelPan({ dx: -e.deltaX, dy: -e.deltaY }) !== false)
+                    e.preventDefault();
+            }
+        };
+        host.addController(this);
+    }
+    attach(element) {
+        if (this.element === element)
+            return;
+        this.detach();
+        this.element = element;
+        element.style.touchAction = 'none';
+        element.addEventListener('pointerdown', this.onDown);
+        element.addEventListener('pointermove', this.onMove);
+        element.addEventListener('pointerup', this.onUp);
+        element.addEventListener('pointercancel', this.onUp);
+        element.addEventListener('wheel', this.onWheel, { passive: false });
+    }
+    detach() {
+        const el = this.element;
+        if (!el)
+            return;
+        el.removeEventListener('pointerdown', this.onDown);
+        el.removeEventListener('pointermove', this.onMove);
+        el.removeEventListener('pointerup', this.onUp);
+        el.removeEventListener('pointercancel', this.onUp);
+        el.removeEventListener('wheel', this.onWheel);
+        this.element = null;
+    }
+    hostConnected() { }
+    hostDisconnected() {
+        this.detach();
+    }
+    local(e) {
+        const r = this.element.getBoundingClientRect();
+        return { x: e.clientX - r.left, y: e.clientY - r.top };
+    }
+    pinchState() {
+        const [a, b] = [...this.pointers.values()];
+        return {
+            dist: Math.hypot(b.x - a.x, b.y - a.y),
+            angle: Math.atan2(b.y - a.y, b.x - a.x),
+            cx: (a.x + b.x) / 2,
+            cy: (a.y + b.y) / 2,
+        };
+    }
+}
+//# sourceMappingURL=gesture-controller.js.map

package/dist/controllers/gesture-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gesture-controller.js","sourceRoot":"","sources":["../../src/controllers/gesture-controller.ts"],"names":[],"mappings":"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"}

package/dist/controllers/session-controller.d.ts

@@ -0,0 +1,15 @@
+import type { EditorSession, SessionState } from '@sealpixel/core';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** Re-renders the host whenever the session state changes. */
+export declare class SessionController implements ReactiveController {
+    private readonly host;
+    private _session;
+    private unsubscribe;
+    state: SessionState | null;
+    constructor(host: ReactiveControllerHost, _session: EditorSession | null);
+    get session(): EditorSession | null;
+    set session(next: EditorSession | null);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=session-controller.d.ts.map

package/dist/controllers/session-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-controller.d.ts","sourceRoot":"","sources":["../../src/controllers/session-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE,8DAA8D;AAC9D,qBAAa,iBAAkB,YAAW,kBAAkB;IAKxD,OAAO,CAAC,QAAQ,CAAC,IAAI;IACrB,OAAO,CAAC,QAAQ;IALlB,OAAO,CAAC,WAAW,CAA6B;IAChD,KAAK,EAAE,YAAY,GAAG,IAAI,CAAQ;gBAGf,IAAI,EAAE,sBAAsB,EACrC,QAAQ,EAAE,aAAa,GAAG,IAAI;IAMxC,IAAI,OAAO,IAAI,aAAa,GAAG,IAAI,CAElC;IAED,IAAI,OAAO,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,EAQrC;IAED,aAAa,IAAI,IAAI;IAQrB,gBAAgB,IAAI,IAAI;CAIzB"}