@sealpixel/ui 1.0.0-rc.0 → 1.0.0-rc.2

package/dist/components/pincel-stage.js

@@ -1,233 +0,0 @@
-import { css, html, LitElement, svg } from 'lit';
-import { GestureController } from '../controllers/gesture-controller.js';
-import { base } from '../theme.js';
-/**
- * Shows the preview on a canvas, fitted and zoomable, with an SVG overlay in
- * image pixel coordinates for tool gizmos. Tier-A hints (CSS filter and
- * transform) are applied to the canvas until the next preview arrives.
- */
-export class PincelStage extends LitElement {
-    static { this.styles = [
-        base,
-        css `
-      :host {
-        display: block;
-        position: relative;
-        overflow: hidden;
-        background-color: var(--pincel-color-bg);
-        background-image:
-          linear-gradient(45deg, var(--pincel-stage-checker-a) 25%, transparent 25%),
-          linear-gradient(-45deg, var(--pincel-stage-checker-a) 25%, transparent 25%),
-          linear-gradient(45deg, transparent 75%, var(--pincel-stage-checker-a) 75%),
-          linear-gradient(-45deg, transparent 75%, var(--pincel-stage-checker-a) 75%);
-        background-size: 16px 16px;
-        background-position: 0 0, 0 8px, 8px -8px, -8px 0;
-        touch-action: none;
-        user-select: none;
-      }
-      .viewport {
-        position: absolute;
-        inset: 0;
-      }
-      .content {
-        position: absolute;
-        left: 0;
-        top: 0;
-        transform-origin: 0 0;
-        will-change: transform;
-      }
-      canvas {
-        display: block;
-        image-rendering: auto;
-        transform-origin: 50% 50%;
-        box-shadow: var(--pincel-shadow, none);
-      }
-      svg.overlay {
-        position: absolute;
-        left: 0;
-        top: 0;
-        overflow: visible;
-        pointer-events: none;
-      }
-      svg.overlay [data-interactive] {
-        pointer-events: all;
-      }
-      .status {
-        position: absolute;
-        right: var(--pincel-space);
-        bottom: var(--pincel-space);
-        padding: 3px 9px;
-        border-radius: 999px;
-        background: color-mix(in srgb, var(--pincel-color-surface) 85%, transparent);
-        color: var(--pincel-color-fg-muted);
-        font-size: 12px;
-        font-variant-numeric: tabular-nums;
-        pointer-events: none;
-        backdrop-filter: blur(6px);
-      }
-      .pending {
-        position: absolute;
-        left: var(--pincel-space);
-        top: var(--pincel-space);
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: var(--pincel-color-accent);
-        opacity: 0.8;
-      }
-    `,
-    ]; }
-    static { this.properties = {
-        preview: { attribute: false },
-        pending: { type: Boolean },
-        overlay: { attribute: false },
-        hintFilter: { attribute: false },
-        hintTransform: { attribute: false },
-        zoom: { type: Number },
-        panEnabled: { type: Boolean },
-    }; }
-    constructor() {
-        super();
-        this.canvas = null;
-        this.drawnVersion = -1;
-        this.pan = { x: 0, y: 0 };
-        this.fitted = false;
-        this.resizeObserver = null;
-        this.gestures = new GestureController(this, {
-            drag: (e) => {
-                if (!this.panEnabled)
-                    return;
-                this.pan = { x: this.pan.x + e.dx, y: this.pan.y + e.dy };
-                this.requestUpdate();
-            },
-            pinch: (e) => this.zoomAround(e.scale, e.cx, e.cy, e.dx, e.dy),
-            wheelZoom: (e) => this.zoomAround(e.factor, e.cx, e.cy, 0, 0),
-            wheelPan: (e) => {
-                this.pan = { x: this.pan.x + e.dx, y: this.pan.y + e.dy };
-                this.requestUpdate();
-            },
-        });
-        this.preview = null;
-        this.pending = false;
-        this.overlay = null;
-        this.hintFilter = '';
-        this.hintTransform = '';
-        this.zoom = 1;
-        this.panEnabled = true;
-    }
-    get geometry() {
-        return this.preview?.geometry ?? null;
-    }
-    get imageWidth() {
-        return this.preview?.image.width ?? 0;
-    }
-    get imageHeight() {
-        return this.preview?.image.height ?? 0;
-    }
-    /** Converts a client point into preview image pixels. */
-    toImage(clientX, clientY) {
-        const r = this.getBoundingClientRect();
-        return {
-            x: (clientX - r.left - this.pan.x) / this.zoom,
-            y: (clientY - r.top - this.pan.y) / this.zoom,
-        };
-    }
-    fit() {
-        const w = this.imageWidth;
-        const h = this.imageHeight;
-        if (!w || !h)
-            return;
-        const r = this.getBoundingClientRect();
-        const margin = 24;
-        const zoom = Math.min((r.width - margin) / w, (r.height - margin) / h, 4);
-        this.zoom = Math.max(zoom, 0.01);
-        this.pan = { x: (r.width - w * this.zoom) / 2, y: (r.height - h * this.zoom) / 2 };
-        this.fitted = true;
-        this.requestUpdate();
-        this.viewChanged();
-    }
-    /** Zoom or pan changed: overlays scale their gizmos by zoom and must re-render. */
-    viewChanged() {
-        this.dispatchEvent(new CustomEvent('stage-view', { detail: { zoom: this.zoom, pan: this.pan } }));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.fitted)
-                this.fit();
-        });
-        this.resizeObserver.observe(this);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.resizeObserver?.disconnect();
-    }
-    firstUpdated() {
-        this.canvas = this.renderRoot.querySelector('canvas');
-        this.gestures.attach(this.renderRoot.querySelector('.viewport'));
-    }
-    updated(changed) {
-        if (changed.has('preview'))
-            this.draw();
-    }
-    draw() {
-        const canvas = this.canvas;
-        const preview = this.preview;
-        if (!canvas || !preview)
-            return;
-        const { image } = preview;
-        const sizeChanged = canvas.width !== image.width || canvas.height !== image.height;
-        if (sizeChanged) {
-            canvas.width = image.width;
-            canvas.height = image.height;
-        }
-        if (preview.version !== this.drawnVersion || sizeChanged) {
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-                const data = new Uint8ClampedArray(image.data.byteLength);
-                data.set(image.data);
-                ctx.putImageData(new ImageData(data, image.width, image.height), 0, 0);
-            }
-            this.drawnVersion = preview.version;
-            // A real preview landed: drop tier-A hints.
-            this.hintFilter = '';
-            this.hintTransform = '';
-        }
-        if (!this.fitted || sizeChanged)
-            this.fit();
-    }
-    zoomAround(factor, cx, cy, dx, dy) {
-        const next = Math.min(16, Math.max(0.05, this.zoom * factor));
-        const k = next / this.zoom;
-        this.pan = { x: cx - (cx - this.pan.x) * k + dx, y: cy - (cy - this.pan.y) * k + dy };
-        this.zoom = next;
-        this.fitted = false;
-        this.requestUpdate();
-        this.viewChanged();
-    }
-    render() {
-        const w = this.imageWidth;
-        const h = this.imageHeight;
-        const transform = `translate(${this.pan.x}px, ${this.pan.y}px) scale(${this.zoom})`;
-        return html `
-      <div class="viewport" part="viewport">
-        <div class="content" style="transform:${transform}">
-          <canvas
-            part="canvas"
-            width=${w}
-            height=${h}
-            style="filter:${this.hintFilter || 'none'};transform:${this.hintTransform || 'none'}"
-            role="img"
-            aria-label="preview"
-          ></canvas>
-          ${this.overlay
-            ? svg `<svg class="overlay" part="overlay" width=${w} height=${h} viewBox="0 0 ${w} ${h}">${this.overlay}</svg>`
-            : null}
-        </div>
-      </div>
-      ${this.pending ? html `<div class="pending" aria-hidden="true"></div>` : null}
-      <div class="status" part="status" aria-hidden="true">${Math.round(this.zoom * 100)}%</div>
-    `;
-    }
-}
-//# sourceMappingURL=pincel-stage.js.map

package/dist/components/pincel-stage.js.map

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

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

@@ -1,30 +0,0 @@
-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 PincelToolbar 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=pincel-toolbar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pincel-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/pincel-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,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA4EpB;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/pincel-toolbar.js

@@ -1,127 +0,0 @@
-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 PincelToolbar extends LitElement {
-    static { this.styles = [
-        base,
-        css `
-      :host {
-        display: flex;
-        padding: 4px;
-        background: var(--pincel-color-surface);
-        border-top: 1px solid var(--pincel-color-border);
-        overflow: auto;
-        scrollbar-width: thin;
-      }
-      .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(--pincel-color-border);
-      }
-      :host([orientation='vertical']) .tools {
-        flex-direction: column;
-        margin: 0;
-      }
-      button {
-        min-width: var(--pincel-touch-target);
-        min-height: calc(var(--pincel-touch-target) + 10px);
-        border: 1px solid transparent;
-        border-radius: var(--pincel-radius);
-        background: transparent;
-        color: var(--pincel-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(--pincel-transition),
-          color var(--pincel-transition);
-      }
-      button:hover {
-        color: var(--pincel-color-fg);
-        background: var(--pincel-color-surface-2);
-      }
-      button[aria-pressed='true'] {
-        color: var(--pincel-color-accent);
-        background: var(--pincel-color-accent-soft, var(--pincel-color-surface-2));
-      }
-      .icon {
-        font-size: 20px;
-        line-height: 1;
-        width: 28px;
-        height: 28px;
-        display: grid;
-        place-items: center;
-        border-radius: 8px;
-      }
-      button[aria-pressed='true'] .icon {
-        background: var(--pincel-color-accent);
-        color: var(--pincel-color-accent-fg);
-      }
-      .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=pincel-toolbar.js.map

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

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