@sealpixel/ui 1.0.0-rc.0

package/dist/tools/resize.js

@@ -0,0 +1,91 @@
+import { RESIZE_DEFAULT_OPTIONS } from '@sealpixel/plugins';
+import { html, nothing } from 'lit';
+import { icons } from '../icons.js';
+import { opId } from './finetune.js';
+/** Whether the two dimensions move together. Kept across panel renders. */
+let linked = true;
+export const resizeTool = {
+    id: 'resize',
+    icon: icons.resize,
+    label: 'tool.resize',
+    panel: (ctx) => {
+        const target = ctx.document.resize.target;
+        const options = ctx.options('resize') ?? RESIZE_DEFAULT_OPTIONS;
+        const commit = (patch) => ctx.dispatch({
+            type: 'resize.set',
+            id: opId(),
+            ...(target === null ? { fit: options.defaultFit } : {}),
+            ...patch,
+        });
+        const num = (e) => {
+            const v = e.target.value.trim();
+            return v === '' ? null : Math.max(1, Math.round(Number(v)));
+        };
+        const src = ctx.state.source;
+        const ratio = src && src.width > 0 ? src.height / src.width : 1;
+        /**
+         * With the link closed the two fields are one measurement: typing either
+         * side writes both, so the log carries the size that will be rendered
+         * rather than one number and a rule for finding the other.
+         */
+        const setWidth = (w) => commit(linked && w !== null
+            ? { width: w, height: Math.max(1, Math.round(w * ratio)) }
+            : { width: w });
+        const setHeight = (h) => commit(linked && h !== null
+            ? { width: Math.max(1, Math.round(h / ratio)), height: h }
+            : { height: h });
+        // The resting value is the source's own size, so a field never sits empty
+        // saying nothing about what will come out.
+        const shownWidth = target?.width ?? src?.width ?? null;
+        const shownHeight = target?.height ?? src?.height ?? null;
+        const derived = (own) => (own == null ? 'derived' : '');
+        return html `
+      <div class="rows">
+        <div class="field">
+          <span>${ctx.t('resize.size')}</span>
+          <div class="dims">
+            <input class=${derived(target?.width)} data-field="width" type="number" min="1" max=${options.max?.width ?? nothing} inputmode="numeric" aria-label=${ctx.t('resize.width')} .value=${shownWidth?.toString() ?? ''} @change=${(e) => setWidth(num(e))} />
+            <sealpixel-button
+              variant="ghost"
+              data-action="link"
+              ?pressed=${linked}
+              .label=${ctx.t(linked ? 'resize.linked' : 'resize.unlinked')}
+              @click=${() => {
+            linked = !linked;
+            ctx.refresh();
+        }}
+              >${linked ? icons.link : icons.linkOff}</sealpixel-button
+            >
+            <input class=${derived(target?.height)} data-field="height" type="number" min="1" max=${options.max?.height ?? nothing} inputmode="numeric" aria-label=${ctx.t('resize.height')} .value=${shownHeight?.toString() ?? ''} @change=${(e) => setHeight(num(e))} />
+          </div>
+        </div>
+        ${
+        // A closed link never squeezes the image, so there is nothing for a
+        // fit mode to decide.
+        linked
+            ? nothing
+            : html `<label class="field">
+                <span>${ctx.t('resize.fit')}</span>
+                <select data-field="fit" .value=${target?.fit ?? options.defaultFit} @change=${(e) => commit({ fit: e.target.value })}>
+                  ${options.fits.map((f) => html `<option value=${f} ?selected=${(target?.fit ?? options.defaultFit) === f}>${ctx.t(`resize.fit.${f}`)}</option>`)}
+                </select>
+              </label>`}
+        ${options.upscale
+            ? html `<label class="field check">
+                <input data-field="upscale" type="checkbox" .checked=${target?.upscale ?? false} @change=${(e) => commit({ upscale: e.target.checked })} />
+                <span>${ctx.t('resize.upscale')}</span>
+              </label>`
+            : nothing}
+        <sealpixel-button variant="ghost" data-action="reset" ?disabled=${target === null} .label=${ctx.t('resize.clear')} @click=${() => ctx.dispatch({ type: 'resize.clear', id: opId() })}>
+          ${ctx.t('resize.clear')}
+        </sealpixel-button>
+      </div>
+      ${options.presets.length > 0
+            ? html `<div class="strip choice" role="group" aria-label=${ctx.t('resize.presets')}>
+              ${options.presets.map((p) => html `<sealpixel-button data-preset=${p.label} variant="ghost" ?pressed=${target?.width === (p.width ?? null) && target?.height === (p.height ?? null)} @click=${() => commit({ width: p.width ?? null, height: p.height ?? null })}>${p.label}</sealpixel-button>`)}
+            </div>`
+            : nothing}
+    `;
+    },
+};
+//# sourceMappingURL=resize.js.map

package/dist/tools/resize.js.map

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

package/dist/tools/sticker.d.ts

@@ -0,0 +1,8 @@
+import type { UiTool } from '../tool.js';
+/**
+ * Stickers live in crop space, so the normal (cropped) preview is the right
+ * stage. Assets come from the plugin's declarations or from an upload, which
+ * is registered on the session and recorded in the log.
+ */
+export declare const stickerTool: UiTool;
+//# sourceMappingURL=sticker.d.ts.map

package/dist/tools/sticker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticker.d.ts","sourceRoot":"","sources":["../../src/tools/sticker.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,YAAY,CAAC;AAyBxD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,MA2JzB,CAAC"}

package/dist/tools/sticker.js

@@ -0,0 +1,156 @@
+import { STICKER_DEFAULT_OPTIONS } from '@sealpixel/plugins';
+import { html, nothing, svg } from 'lit';
+import { icons } from '../icons.js';
+import { deleteHandle, toPx } from './delete-handle.js';
+import { opId } from './finetune.js';
+const state = {
+    selected: null,
+    drag: null,
+};
+/**
+ * Stickers live in crop space, so the normal (cropped) preview is the right
+ * stage. Assets come from the plugin's declarations or from an upload, which
+ * is registered on the session and recorded in the log.
+ */
+export const stickerTool = {
+    id: 'sticker',
+    icon: icons.sticker,
+    label: 'tool.sticker',
+    deactivate: () => {
+        state.selected = null;
+        state.drag = null;
+    },
+    panel: (ctx) => {
+        const doc = ctx.document.sticker;
+        const options = ctx.options('sticker') ?? STICKER_DEFAULT_OPTIONS;
+        const declared = options.library.length > 0
+            ? options.library
+            : (ctx.session.registry.byId.get('sticker')?.assets ?? []);
+        const uploaded = options.upload ? (ctx.state.history.log.assets ?? []) : [];
+        const full = options.max !== null && doc.items.length >= options.max;
+        const labelOf = (a) => a.label ?? a.id.replace(/^sticker\./, '');
+        const sel = doc.items.find((i) => i.id === state.selected) ?? null;
+        const add = (asset) => {
+            const id = opId();
+            ctx.dispatch({
+                type: 'sticker.add',
+                id,
+                asset,
+                rect: { x: 0.35, y: 0.35, width: 0.3, height: 0.3 },
+            });
+            state.selected = id;
+        };
+        const update = (patch) => sel && ctx.dispatch({ type: 'sticker.update', id: opId(), itemId: sel.id, ...patch });
+        const upload = async (e) => {
+            const file = e.target.files?.[0];
+            if (!file)
+                return;
+            const bytes = new Uint8Array(await file.arrayBuffer());
+            const decl = await ctx.session.addAsset(bytes, {
+                id: `sticker.${file.name
+                    .replace(/\.[^.]+$/, '')
+                    .replace(/[^a-z0-9-]/gi, '-')
+                    .toLowerCase()}`,
+            });
+            add(decl.id);
+        };
+        return html `
+      ${options.upload
+            ? html `<label class="field">
+        <span>${ctx.t('sticker.upload')}</span>
+        <input data-field="upload" type="file" accept="image/png,image/jpeg,image/webp" ?disabled=${full} @change=${upload} />
+      </label>`
+            : nothing}
+      ${declared.length + uploaded.length > 0
+            ? html `<div class="grid choice" role="list" aria-label=${ctx.t('sticker.library')}>
+            ${[...declared, ...uploaded].map((a) => html `<sealpixel-button role="listitem" data-asset=${a.id} ?disabled=${full} @click=${() => add(a.id)}>${labelOf(a)}</sealpixel-button>`)}
+          </div>`
+            : html `<p class="hint">${ctx.t('sticker.hint.empty')}</p>`}
+      ${sel
+            ? html `
+            <sealpixel-slider data-param="rotation" .label=${ctx.t('sticker.rotation')} .value=${Number(((sel.rotation * 180) / Math.PI).toFixed(1))} .min=${-180} .max=${180} .step=${1} .format=${(v) => `${v.toFixed(0)}°`} @commit=${(e) => update({ rotation: (e.detail * Math.PI) / 180 })}></sealpixel-slider>
+            <sealpixel-slider data-param="opacity" .label=${ctx.t('sticker.opacity')} .value=${sel.opacity} .min=${0} .max=${1} .step=${0.01} @commit=${(e) => update({ opacity: e.detail })}></sealpixel-slider>
+            <div class="row">
+              <sealpixel-button data-action="flip-x" ?pressed=${sel.flipX} @click=${() => update({ flipX: !sel.flipX })}>⇋</sealpixel-button>
+              <sealpixel-button data-action="flip-y" ?pressed=${sel.flipY} @click=${() => update({ flipY: !sel.flipY })}>⇅</sealpixel-button>
+            </div>
+`
+            : null}
+    `;
+    },
+    overlay: (ctx) => {
+        const doc = ctx.document.sticker;
+        const { width: W, height: H, zoom } = ctx.stage;
+        if (!W || !H)
+            return svg ``;
+        const sw = 1.5 / zoom;
+        const hr = 7 / zoom;
+        const toN = (e) => {
+            const p = ctx.stage.toImage(e.clientX, e.clientY);
+            return [p.x / W, p.y / H];
+        };
+        const begin = (item, mode) => (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            state.selected = item.id;
+            const start = toN(e);
+            state.drag = { id: item.id, rect: item.rect, mode, start };
+            const move = (ev) => {
+                if (!state.drag)
+                    return;
+                const q = toN(ev);
+                const dx = q[0] - start[0];
+                const dy = q[1] - start[1];
+                state.drag.rect =
+                    mode === 'move'
+                        ? { ...item.rect, x: item.rect.x + dx, y: item.rect.y + dy }
+                        : {
+                            ...item.rect,
+                            width: Math.max(0.02, item.rect.width + dx),
+                            height: Math.max(0.02, item.rect.height + dy),
+                        };
+                ctx.refresh();
+            };
+            const up = () => {
+                window.removeEventListener('pointermove', move);
+                window.removeEventListener('pointerup', up);
+                window.removeEventListener('pointercancel', up);
+                const d = state.drag;
+                state.drag = null;
+                if (d && JSON.stringify(d.rect) !== JSON.stringify(item.rect)) {
+                    ctx.dispatch({ type: 'sticker.update', id: opId(), itemId: item.id, rect: d.rect });
+                }
+                ctx.refresh();
+            };
+            window.addEventListener('pointermove', move);
+            window.addEventListener('pointerup', up);
+            window.addEventListener('pointercancel', up);
+        };
+        const selectedItem = doc.items.find((i) => i.id === state.selected) ?? null;
+        return svg `
+      <rect data-interactive x="0" y="0" width=${W} height=${H} fill="transparent" @pointerdown=${(e) => {
+            e.stopPropagation();
+            state.selected = null;
+            ctx.refresh();
+        }} />
+      ${doc.items.map((item) => {
+            const r = state.drag?.id === item.id ? state.drag.rect : item.rect;
+            const selected = state.selected === item.id;
+            const cx = (r.x + r.width / 2) * W;
+            const cy = (r.y + r.height / 2) * H;
+            const deg = (item.rotation * 180) / Math.PI;
+            return svg `<g transform=${`rotate(${deg} ${cx} ${cy})`}>
+          <rect data-interactive data-item=${item.id} x=${r.x * W} y=${r.y * H} width=${r.width * W} height=${r.height * H} fill="rgba(255,255,255,0.001)" stroke=${selected ? 'var(--sealpixel-color-accent)' : 'rgba(255,255,255,0.6)'} stroke-width=${sw} stroke-dasharray=${selected ? 'none' : `${4 / zoom} ${3 / zoom}`} style="cursor:move" @pointerdown=${begin(item, 'move')} />
+          ${selected ? svg `<circle data-interactive data-handle="scale" cx=${(r.x + r.width) * W} cy=${(r.y + r.height) * H} r=${hr} fill="white" stroke="var(--sealpixel-color-accent)" stroke-width=${sw} style="cursor:nwse-resize" @pointerdown=${begin(item, 'scale')} />` : null}
+        </g>`;
+        })}
+      ${selectedItem
+            ? deleteHandle(toPx(state.drag?.id === selectedItem.id ? state.drag.rect : selectedItem.rect, W, H), ctx.stage, ctx.t('sticker.delete'), () => {
+                state.selected = null;
+                ctx.dispatch({ type: 'sticker.remove', id: opId(), itemId: selectedItem.id });
+            })
+            : nothing}
+    `;
+    },
+};
+//# sourceMappingURL=sticker.js.map

package/dist/tools/sticker.js.map

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

package/dist/tools/watermark.d.ts

@@ -0,0 +1,3 @@
+import type { UiTool } from '../tool.js';
+export declare const watermarkTool: UiTool;
+//# sourceMappingURL=watermark.d.ts.map

package/dist/tools/watermark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.d.ts","sourceRoot":"","sources":["../../src/tools/watermark.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAiB,MAAM,YAAY,CAAC;AAkCxD,eAAO,MAAM,aAAa,EAAE,MAkF3B,CAAC"}

package/dist/tools/watermark.js

@@ -0,0 +1,102 @@
+import { WATERMARK_DEFAULT_OPTIONS } from '@sealpixel/plugins';
+import { html, nothing } from 'lit';
+import { icons } from '../icons.js';
+import { opId } from './finetune.js';
+const ANCHORS = ['tl', 'tc', 'tr', 'cl', 'c', 'cr', 'bl', 'bc', 'br'];
+const hex = (c) => `#${[c[0], c[1], c[2]]
+    .map((v) => Math.round(v * 255)
+    .toString(16)
+    .padStart(2, '0'))
+    .join('')}`;
+const fromHex = (h, a = 1) => [
+    Number.parseInt(h.slice(1, 3), 16) / 255,
+    Number.parseInt(h.slice(3, 5), 16) / 255,
+    Number.parseInt(h.slice(5, 7), 16) / 255,
+    a,
+];
+export const watermarkTool = {
+    id: 'watermark',
+    icon: icons.watermark,
+    label: 'tool.watermark',
+    panel: (ctx) => {
+        const wm = ctx.document.watermark.watermark;
+        const set = (patch) => ctx.dispatch({ type: 'watermark.set', id: opId(), ...patch });
+        const text = wm?.source.kind === 'text' ? wm.source : null;
+        const options = ctx.options('watermark') ?? WATERMARK_DEFAULT_OPTIONS;
+        const declared = options.image
+            ? [
+                ...(ctx.session.registry.byId.get('watermark')?.assets ?? []),
+                ...(ctx.session.registry.byId.get('sticker')?.assets ?? []),
+                ...(ctx.state.history.log.assets ?? []),
+            ]
+            : [];
+        const fonts = ctx.session.registry.byId.get('annotate')?.assets ?? [];
+        const defaultFont = fonts[0]?.id ?? 'font.roboto';
+        const d = options.defaults;
+        const fresh = wm === null
+            ? {
+                ...(d.anchor ? { anchor: d.anchor } : {}),
+                ...(d.margin !== undefined ? { margin: d.margin } : {}),
+                ...(d.scale !== undefined ? { scale: d.scale } : {}),
+                ...(d.opacity !== undefined ? { opacity: d.opacity } : {}),
+                ...(d.tile !== undefined ? { tile: d.tile } : {}),
+            }
+            : {};
+        const anchors = ANCHORS.filter((a) => options.anchors.includes(a));
+        if (options.lock) {
+            return html `<p class="hint" data-locked>${ctx.t('watermark.locked')}</p>`;
+        }
+        return html `
+      <div class="row choice">
+        ${options.text
+            ? html `<sealpixel-button data-source="text" ?pressed=${text !== null} @click=${() => set({ ...fresh, source: { kind: 'text', text: text?.text ?? ctx.t('watermark.defaultText'), font: text?.font ?? defaultFont, color: text?.color ?? [1, 1, 1, 1] } })}>${ctx.t('watermark.text')}</sealpixel-button>`
+            : nothing}
+        ${declared.map((a) => html `<sealpixel-button data-source=${a.id} ?pressed=${wm?.source.kind === 'asset' && wm.source.asset === a.id} @click=${() => set({ ...fresh, source: { kind: 'asset', asset: a.id } })}>${a.label ?? a.id.replace(/^(sticker|asset|watermark)\./, '')}</sealpixel-button>`)}
+        ${wm ? html `<sealpixel-button data-action="clear" variant="ghost" @click=${() => ctx.dispatch({ type: 'watermark.clear', id: opId() })}>${ctx.t('watermark.clear')}</sealpixel-button>` : null}
+      </div>
+      ${wm
+            ? html `
+            <div class="rows">
+              ${text
+                ? html `<label class="field"><span>${ctx.t('watermark.textValue')}</span><input data-field="text" type="text" .value=${text.text} @change=${(e) => set({ source: { ...text, text: e.target.value || ' ' } })} /></label>
+                    <label class="field"><span>${ctx.t('watermark.color')}</span><input data-field="color" type="color" .value=${hex(text.color)} @change=${(e) => set({ source: { ...text, color: fromHex(e.target.value) } })} /></label>`
+                : null}
+              <label class="field">
+                <span>${ctx.t('watermark.anchor')}</span>
+                <select
+                  data-field="anchor"
+                  ?disabled=${wm.tile !== null}
+                  @change=${(e) => set({ anchor: e.target.value })}
+                >
+                  ${anchors.map((a) => html `<option data-anchor=${a} value=${a} ?selected=${wm.anchor === a}>${ANCHOR_GLYPH[a]} ${ctx.t(`watermark.anchor.${a}`)}</option>`)}
+                </select>
+              </label>
+              <sealpixel-slider data-param="scale" .label=${ctx.t('watermark.scale')} .value=${wm.scale} .min=${options.scaleRange.min} .max=${options.scaleRange.max} .step=${options.scaleRange.step} .format=${(v) => `${Math.round(v * 100)}%`} @commit=${(e) => set({ scale: e.detail })}></sealpixel-slider>
+              ${
+            // Tiling repeats the mark across the image, so there is no edge
+            // to keep a margin from; the gap between repeats replaces it.
+            wm.tile
+                ? html `<sealpixel-slider data-param="tile-rotation" .label=${ctx.t('watermark.tileRotation')} .value=${Number(((wm.tile.rotation * 180) / Math.PI).toFixed(0))} .min=${-90} .max=${90} .step=${1} .format=${(v) => `${v.toFixed(0)}°`} @commit=${(e) => set({ tile: { ...wm.tile, rotation: (e.detail * Math.PI) / 180 } })}></sealpixel-slider>
+                    <sealpixel-stepper data-param="tile-gap" .label=${ctx.t('watermark.tileGap')} .value=${wm.tile.gapX} .min=${0} .max=${400} .step=${1} unit="px" @commit=${(e) => set({ tile: { ...wm.tile, gapX: e.detail, gapY: e.detail } })}></sealpixel-stepper>`
+                : html `<sealpixel-stepper data-param="margin" .label=${ctx.t('watermark.margin')} .value=${wm.margin} .min=${0} .max=${200} .step=${1} unit="px" @commit=${(e) => set({ margin: e.detail })}></sealpixel-stepper>`}
+              <label class="field check">
+                <input data-field="tile" type="checkbox" .checked=${wm.tile !== null} @change=${(e) => set({ tile: e.target.checked ? { gapX: 24, gapY: 24, rotation: -0.4 } : null })} />
+                <span>${ctx.t('watermark.tile')}</span>
+              </label>
+            </div>`
+            : null}
+    `;
+    },
+};
+const ANCHOR_GLYPH = {
+    tl: '↖',
+    tc: '↑',
+    tr: '↗',
+    cl: '←',
+    c: '•',
+    cr: '→',
+    bl: '↙',
+    bc: '↓',
+    br: '↘',
+};
+//# sourceMappingURL=watermark.js.map

package/dist/tools/watermark.js.map

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

package/dist/view-mapping.d.ts

@@ -0,0 +1,23 @@
+import type { Geometry } from '@sealpixel/core';
+/** SVG-style affine: x' = a·x + c·y + e, y' = b·x + d·y + f. */
+export type Affine = [number, number, number, number, number, number];
+export declare const IDENTITY: Affine;
+/** `outer ∘ inner`: applies `inner` first. */
+export declare function compose(outer: Affine, inner: Affine): Affine;
+export declare function apply(m: Affine, x: number, y: number): {
+    x: number;
+    y: number;
+};
+export declare function invert(m: Affine): Affine;
+/** Uniform scale factor of the affine (√|det|): source px per preview px. */
+export declare function scaleOf(m: Affine): number;
+export declare function sameAffine(a: Affine | null, b: Affine | null, eps?: number): boolean;
+/**
+ * Maps preview (proxy output) pixels of the rendered log back to logical
+ * source pixels, walking the stage geometry in reverse. Crop supplies its
+ * inverse affine, resize a scale or (with cover) a source rectangle; every
+ * other stage keeps its size. The stage uses it to keep the same source
+ * region in view when the preview switches between cropped and uncropped.
+ */
+export declare function previewToSource(g: Geometry): Affine;
+//# sourceMappingURL=view-mapping.d.ts.map

package/dist/view-mapping.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-mapping.d.ts","sourceRoot":"","sources":["../src/view-mapping.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,gEAAgE;AAChE,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEtE,eAAO,MAAM,QAAQ,EAAE,MAA2B,CAAC;AAEnD,8CAA8C;AAC9C,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAW5D;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAE/E;AAED,wBAAgB,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CASxC;AAED,6EAA6E;AAC7E,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEzC;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,SAAO,GAAG,OAAO,CAGlF;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,QAAQ,GAAG,MAAM,CAsBnD"}

package/dist/view-mapping.js

@@ -0,0 +1,72 @@
+export const IDENTITY = [1, 0, 0, 1, 0, 0];
+/** `outer ∘ inner`: applies `inner` first. */
+export function compose(outer, inner) {
+    const [a1, b1, c1, d1, e1, f1] = outer;
+    const [a2, b2, c2, d2, e2, f2] = inner;
+    return [
+        a1 * a2 + c1 * b2,
+        b1 * a2 + d1 * b2,
+        a1 * c2 + c1 * d2,
+        b1 * c2 + d1 * d2,
+        a1 * e2 + c1 * f2 + e1,
+        b1 * e2 + d1 * f2 + f1,
+    ];
+}
+export function apply(m, x, y) {
+    return { x: m[0] * x + m[2] * y + m[4], y: m[1] * x + m[3] * y + m[5] };
+}
+export function invert(m) {
+    const [a, b, c, d, e, f] = m;
+    const det = a * d - b * c;
+    if (!det)
+        return IDENTITY;
+    const ia = d / det;
+    const ib = -b / det;
+    const ic = -c / det;
+    const id = a / det;
+    return [ia, ib, ic, id, -(ia * e + ic * f), -(ib * e + id * f)];
+}
+/** Uniform scale factor of the affine (√|det|): source px per preview px. */
+export function scaleOf(m) {
+    return Math.sqrt(Math.abs(m[0] * m[3] - m[1] * m[2])) || 1;
+}
+export function sameAffine(a, b, eps = 1e-6) {
+    if (!a || !b)
+        return a === b;
+    return a.every((v, i) => Math.abs(v - b[i]) < eps);
+}
+/**
+ * Maps preview (proxy output) pixels of the rendered log back to logical
+ * source pixels, walking the stage geometry in reverse. Crop supplies its
+ * inverse affine, resize a scale or (with cover) a source rectangle; every
+ * other stage keeps its size. The stage uses it to keep the same source
+ * region in view when the preview switches between cropped and uncropped.
+ */
+export function previewToSource(g) {
+    let m = IDENTITY;
+    for (const s of [...g.stages].reverse()) {
+        let step;
+        if (s.transform)
+            step = s.transform;
+        else if (s.cropRect) {
+            const [x, y, w, h] = s.cropRect;
+            step = [w / s.actualOut.width, 0, 0, h / s.actualOut.height, x, y];
+        }
+        else if (s.actualIn.width !== s.actualOut.width || s.actualIn.height !== s.actualOut.height) {
+            step = [
+                s.actualIn.width / s.actualOut.width,
+                0,
+                0,
+                s.actualIn.height / s.actualOut.height,
+                0,
+                0,
+            ];
+        }
+        else
+            continue;
+        m = compose(step, m);
+    }
+    const k = 1 / (g.scale || 1);
+    return compose([k, 0, 0, k, 0, 0], m);
+}
+//# sourceMappingURL=view-mapping.js.map

package/dist/view-mapping.js.map

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

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@sealpixel/ui",
+  "version": "1.0.0-rc.0",
+  "description": "Default, themeable Sealpixel editor UI as Web Components (Lit). Optional: the core is headless.",
+  "license": "BUSL-1.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/9feet/sealpixel.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://docs.sealpixel.dev",
+  "bugs": "https://github.com/9feet/sealpixel/issues",
+  "type": "module",
+  "sideEffects": [
+    "./dist/components/*.js",
+    "./dist/define.js"
+  ],
+  "files": [
+    "dist",
+    "themes",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./define": {
+      "types": "./dist/define.d.ts",
+      "default": "./dist/define.js"
+    },
+    "./locales/*": {
+      "default": "./dist/locales/*.js"
+    },
+    "./package.json": "./package.json",
+    "./themes/*": "./themes/*"
+  },
+  "dependencies": {
+    "lit": "^3.3.0",
+    "@sealpixel/core": "1.0.0-rc.0",
+    "@sealpixel/plugins": "1.0.0-rc.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0",
+    "vitest": "^4.0.0",
+    "@sealpixel/wasm": "1.0.0-rc.0",
+    "@sealpixel/config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  }
+}

package/themes/default.css

@@ -0,0 +1,23 @@
+/* Default tokens (graphite + coral). Included in the component; here for hosts that want the values as a starting point. */
+sealpixel-editor {
+  --sealpixel-color-bg: #0f1117;
+  --sealpixel-color-surface: #161923;
+  --sealpixel-color-surface-2: #1f2330;
+  --sealpixel-color-surface-3: #2a2f3d;
+  --sealpixel-color-border: #2b3040;
+  --sealpixel-color-fg: #eef0f6;
+  --sealpixel-color-fg-muted: #a3a9b8;
+  --sealpixel-color-accent: #ff6f4c;
+  --sealpixel-color-accent-fg: #1c0d08;
+  --sealpixel-color-accent-soft: rgba(255, 111, 76, 0.16);
+  --sealpixel-color-danger: #ef5a5a;
+  --sealpixel-color-focus: #ff9b7e;
+  --sealpixel-radius: 12px;
+  --sealpixel-radius-sm: 8px;
+  --sealpixel-space: 8px;
+  --sealpixel-font: "Inter", system-ui, sans-serif;
+  --sealpixel-font-size: 14px;
+  --sealpixel-toolbar-size: 72px;
+  --sealpixel-panel-size: 112px;
+  --sealpixel-touch-target: 44px;
+}

package/themes/high-contrast.css

@@ -0,0 +1,30 @@
+/* High contrast: WCAG AAA text contrast, thick focus rings, no translucency. */
+sealpixel-editor {
+  --sealpixel-color-bg: #000000;
+  --sealpixel-color-surface: #000000;
+  --sealpixel-color-surface-2: #1a1a1a;
+  --sealpixel-color-surface-3: #333333;
+  --sealpixel-color-accent-soft: #333300;
+  --sealpixel-shadow: none;
+  --sealpixel-shadow-sm: none;
+  --sealpixel-shadow-raised: none;
+  --sealpixel-color-border: #ffffff;
+  --sealpixel-color-fg: #ffffff;
+  --sealpixel-color-fg-muted: #ffff00;
+  --sealpixel-color-accent: #ffff00;
+  --sealpixel-color-accent-fg: #000000;
+  --sealpixel-color-danger: #ff6666;
+  --sealpixel-color-focus: #00ffff;
+  --sealpixel-radius: 4px;
+  --sealpixel-radius-sm: 2px;
+  --sealpixel-font-size: 16px;
+  --sealpixel-touch-target: 48px;
+  --sealpixel-stage-checker-a: #333333;
+  --sealpixel-stage-checker-b: #000000;
+  color-scheme: dark;
+}
+sealpixel-editor *:focus-visible,
+sealpixel-editor::part(button):focus-visible {
+  outline: 3px solid #00ffff;
+  outline-offset: 3px;
+}