@sealpixel/ui 1.0.0-rc.0

package/dist/components/pincel-stage.js

@@ -0,0 +1,233 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -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 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,127 @@
+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

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

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export declare class SealpixelButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pressed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    disabled: boolean;
+    pressed: boolean;
+    variant: 'default' | 'primary' | 'ghost';
+    label: string;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=sealpixel-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sealpixel-button.d.ts","sourceRoot":"","sources":["../../src/components/sealpixel-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAsFpB;IAEF,OAAgB,UAAU;;;;;;;;;;;;;;;;MAKxB;IAEM,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;;IAUb,MAAM;CAYhB"}

package/dist/components/sealpixel-button.js

@@ -0,0 +1,117 @@
+import { css, html, LitElement } from 'lit';
+import { base } from '../theme.js';
+export class SealpixelButton extends LitElement {
+    static { this.styles = [
+        base,
+        css `
+      :host {
+        display: inline-block;
+      }
+      /*
+       * The fill carries the button, not an outline. On a surface two steps
+       * lighter than the bar a control reads on its own, and a row of six
+       * outlined boxes was competing with the photo above it. The border stays
+       * declared, transparent, so a theme can put it back and nothing shifts.
+       */
+      button {
+        min-width: var(--sealpixel-control-height);
+        min-height: var(--sealpixel-control-height);
+        padding: 0 calc(var(--sealpixel-space) * 1.5);
+        border: 1px solid transparent;
+        border-radius: var(--sealpixel-radius-pill);
+        background: var(--sealpixel-color-surface-2);
+        color: var(--sealpixel-color-fg);
+        font: inherit;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--sealpixel-space);
+        width: 100%;
+        transition:
+          background var(--sealpixel-transition),
+          border-color var(--sealpixel-transition),
+          color var(--sealpixel-transition),
+          box-shadow var(--sealpixel-duration) var(--sealpixel-ease-out),
+          opacity var(--sealpixel-transition),
+          transform var(--sealpixel-duration) var(--sealpixel-ease-spring);
+      }
+      button:hover:not(:disabled) {
+        background: var(--sealpixel-color-surface-3, var(--sealpixel-color-surface-2));
+      }
+      /*
+       * The press scales down rather than nudging the button down by a pixel.
+       * A translate moves the label against a static border and reads as a
+       * glitch on a 44 px target; the scale keeps every edge moving together.
+       * It also settles fast enough to finish inside a normal tap.
+       */
+      button:active:not(:disabled) {
+        transform: scale(0.96);
+        transition-duration: var(--sealpixel-duration-fast);
+        transition-timing-function: var(--sealpixel-ease);
+      }
+      button:disabled {
+        opacity: 0.45;
+        cursor: default;
+      }
+      :host([variant='primary']) button {
+        background: var(--sealpixel-color-accent);
+        border-color: var(--sealpixel-color-accent);
+        color: var(--sealpixel-color-accent-fg);
+      }
+      :host([variant='ghost']) button {
+        background: transparent;
+        border-color: transparent;
+      }
+      :host([pressed]) button {
+        background: var(--sealpixel-color-accent-soft, transparent);
+        border-color: var(--sealpixel-color-accent);
+        color: var(--sealpixel-color-fg);
+      }
+      /*
+       * A brightness filter used to do this. It repaints the whole button
+       * including its text and washes out a light accent, so the hover now
+       * lifts the button instead of bleaching it.
+       */
+      :host([variant='primary']) button {
+        box-shadow: var(--sealpixel-shadow-sm, none);
+      }
+      :host([variant='primary']) button:hover:not(:disabled) {
+        box-shadow: var(--sealpixel-shadow-raised, none);
+        transform: translateY(-1px);
+      }
+      :host([variant='primary']) button:active:not(:disabled) {
+        box-shadow: var(--sealpixel-shadow-sm, none);
+        transform: scale(0.96);
+      }
+    `,
+    ]; }
+    static { this.properties = {
+        disabled: { type: Boolean, reflect: true },
+        pressed: { type: Boolean, reflect: true },
+        variant: { type: String, reflect: true },
+        label: { type: String },
+    }; }
+    constructor() {
+        super();
+        this.disabled = false;
+        this.pressed = false;
+        this.variant = 'default';
+        this.label = '';
+    }
+    render() {
+        return html `<button
+      part="button"
+      type="button"
+      ?disabled=${this.disabled}
+      aria-pressed=${this.pressed ? 'true' : 'false'}
+      aria-label=${this.label || undefined}
+      title=${this.label || undefined}
+    >
+      <slot></slot>
+    </button>`;
+    }
+}
+//# sourceMappingURL=sealpixel-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sealpixel-button.js","sourceRoot":"","sources":["../../src/components/sealpixel-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,OAAO,eAAgB,SAAQ,UAAU;aAC7B,WAAM,GAAG;QACvB,IAAI;QACJ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmFF;KACF,CAAC;aAEc,eAAU,GAAG;QAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QAC1C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QACzC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;QACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACxB,CAAC;IAOF;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QACzB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,QAAQ;qBACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACjC,IAAI,CAAC,KAAK,IAAI,SAAS;cAC5B,IAAI,CAAC,KAAK,IAAI,SAAS;;;cAGvB,CAAC;IACb,CAAC"}