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

package/dist/components/pincel-editor.js

@@ -1,794 +0,0 @@
-import { canonicalJson, createAssetResolver, createEditorSession, } from '@pincel/core';
-import { defaultPlugins } from '@pincel/plugins';
-import { css, html, LitElement, nothing } from 'lit';
-import { SessionController } from '../controllers/session-controller.js';
-import { createI18n } from '../i18n.js';
-import { resolveLocale } from '../locales/index.js';
-import { base, tokens } from '../theme.js';
-import { toolsFor } from '../tools/index.js';
-/**
- * The default editor. Headless `EditorSession` underneath; this element adds
- * the responsive shell, tools and events.
- *
- * Events: `pincel:ready`, `pincel:load`, `pincel:change` ({ log, index }),
- * `pincel:process` (ExportResult), `pincel:error` (PincelError).
- */
-export class PincelEditor extends LitElement {
-    static { this.styles = [
-        tokens,
-        base,
-        css `
-      :host {
-        display: block;
-        container-type: inline-size;
-        background: var(--pincel-color-bg);
-        color: var(--pincel-color-fg);
-        height: 100%;
-        min-height: 320px;
-        min-width: 0;
-        overflow: hidden;
-      }
-      :host(:focus) {
-        outline: none;
-      }
-      .root {
-        position: relative;
-        display: grid;
-        height: 100%;
-        min-width: 0;
-        grid-template:
-          'nav' auto
-          'stage' 1fr
-          'panel' auto
-          'toolbar' auto / 1fr;
-        padding-bottom: env(safe-area-inset-bottom);
-      }
-      .root > * {
-        min-width: 0;
-        min-height: 0;
-      }
-      pincel-stage {
-        grid-area: stage;
-        min-height: 160px;
-      }
-      pincel-nav {
-        grid-area: nav;
-      }
-      pincel-toolbar {
-        grid-area: toolbar;
-      }
-      .panel {
-        grid-area: panel;
-        background: var(--pincel-color-surface);
-        border-top: 1px solid var(--pincel-color-border);
-        padding: var(--pincel-space) calc(var(--pincel-space) * 1.5);
-        max-height: 34cqh;
-        overflow: auto;
-        display: grid;
-        gap: var(--pincel-space);
-        align-content: start;
-        scrollbar-width: thin;
-      }
-      /* Phones: option grids become one horizontal strip so the stage keeps its height. */
-      .panel .grid,
-      .panel .strip {
-        display: flex;
-        gap: var(--pincel-space);
-        overflow-x: auto;
-        scrollbar-width: none;
-        padding-bottom: 2px;
-        scroll-snap-type: x proximity;
-      }
-      .panel .grid::-webkit-scrollbar,
-      .panel .strip::-webkit-scrollbar {
-        display: none;
-      }
-      .panel .grid > *,
-      .panel .strip > * {
-        flex: 0 0 auto;
-        min-width: 96px;
-        scroll-snap-align: start;
-      }
-      .panel .strip > * {
-        min-width: 0;
-      }
-      .panel .row.compact > pincel-button {
-        flex: 1 1 0;
-      }
-      /* Phones: sibling groups share one line and hints make room for the stage. */
-      .panel .rows {
-        display: flex;
-        gap: var(--pincel-space);
-        align-items: end;
-      }
-      .panel .rows > * {
-        flex: 1 1 0;
-        min-width: 0;
-      }
-      .panel .rows .row {
-        flex-wrap: nowrap;
-      }
-      .panel .rows .row > pincel-button {
-        flex: 1 1 0;
-        min-width: 0;
-      }
-      .panel .rows select,
-      .panel .rows input:not([type='checkbox']):not([type='color']) {
-        width: 100%;
-        min-width: 0;
-      }
-      .panel .rows > .field:has(input[type='color']),
-      .panel .rows > .field.check {
-        flex: 0 0 auto;
-      }
-      .panel .rows > .field:has(input[type='color']) input {
-        width: var(--pincel-touch-target);
-      }
-      .panel .hint {
-        display: none;
-      }
-      .panel:empty {
-        display: none;
-      }
-      .toast {
-        position: absolute;
-        left: 50%;
-        bottom: calc(var(--pincel-toolbar-size) + var(--pincel-space) * 2);
-        transform: translateX(-50%);
-        display: flex;
-        align-items: center;
-        gap: var(--pincel-space);
-        max-width: calc(100% - var(--pincel-space) * 4);
-        padding: calc(var(--pincel-space) * 1.25) calc(var(--pincel-space) * 2);
-        border-radius: 999px;
-        background: color-mix(in srgb, var(--pincel-color-surface) 92%, transparent);
-        border: 1px solid var(--pincel-color-border);
-        box-shadow: var(--pincel-shadow, 0 8px 24px rgba(0, 0, 0, 0.3));
-        color: var(--pincel-color-fg);
-        font-size: 13px;
-        white-space: nowrap;
-        backdrop-filter: blur(8px);
-        cursor: pointer;
-        z-index: 2;
-        animation: pincel-toast-in var(--pincel-transition) both;
-      }
-      .toast code {
-        font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
-        color: var(--pincel-color-fg-muted);
-        padding: 2px 8px;
-        border-radius: 999px;
-        background: var(--pincel-color-surface-2);
-      }
-      @keyframes pincel-toast-in {
-        from {
-          opacity: 0;
-          transform: translate(-50%, 8px);
-        }
-      }
-      @container (min-width: 48rem) {
-        .root {
-          grid-template:
-            'nav nav nav' auto
-            'toolbar stage panel' 1fr / var(--pincel-toolbar-size) 1fr var(--pincel-panel-size);
-        }
-        .panel {
-          border-top: none;
-          border-left: 1px solid var(--pincel-color-border);
-          max-height: none;
-          padding: calc(var(--pincel-space) * 1.5) calc(var(--pincel-space) * 2);
-          gap: calc(var(--pincel-space) * 1.25);
-        }
-        .panel .grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
-          overflow: visible;
-        }
-        .panel .grid > * {
-          min-width: 0;
-        }
-        .panel .rows {
-          display: grid;
-          gap: calc(var(--pincel-space) * 1.25);
-        }
-        .panel .rows > .field:has(input[type='color']) input {
-          width: 100%;
-        }
-        .panel .hint {
-          display: block;
-        }
-        .toast {
-          left: calc(var(--pincel-toolbar-size) + (100% - var(--pincel-toolbar-size) - var(--pincel-panel-size)) / 2);
-          bottom: calc(var(--pincel-space) * 2);
-        }
-      }
-      .panel .row {
-        display: flex;
-        gap: var(--pincel-space);
-        flex-wrap: wrap;
-      }
-      .panel .field {
-        display: grid;
-        gap: 4px;
-        color: var(--pincel-color-fg-muted);
-      }
-      .panel .hint {
-        margin: 0;
-        color: var(--pincel-color-fg-muted);
-        font-size: 12px;
-      }
-      .panel .list {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        display: grid;
-        gap: 4px;
-      }
-      .panel .list li {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-      }
-      .panel .list li > pincel-button:first-child {
-        flex: 1;
-      }
-      .panel .anchors {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 4px;
-        max-width: 180px;
-      }
-      .panel .field.check {
-        grid-template-columns: auto 1fr;
-        align-items: center;
-      }
-      .panel textarea {
-        font: inherit;
-        color: var(--pincel-color-fg);
-        background: var(--pincel-color-surface-2);
-        border: 1px solid var(--pincel-color-border);
-        border-radius: var(--pincel-radius-sm);
-        padding: var(--pincel-space);
-        resize: vertical;
-      }
-      .panel input[type='color'] {
-        min-height: var(--pincel-touch-target);
-        padding: 2px;
-        width: 100%;
-      }
-      .panel input:not([type='checkbox']),
-      .panel select {
-        font: inherit;
-        color: var(--pincel-color-fg);
-        background: var(--pincel-color-surface-2);
-        border: 1px solid var(--pincel-color-border);
-        border-radius: var(--pincel-radius-sm);
-        min-height: var(--pincel-touch-target);
-        padding: 0 var(--pincel-space);
-      }
-      .empty {
-        grid-area: stage;
-        display: grid;
-        place-content: center;
-        gap: var(--pincel-space);
-        text-align: center;
-        color: var(--pincel-color-fg-muted);
-        padding: var(--pincel-space);
-      }
-      .empty.dragover {
-        outline: 2px dashed var(--pincel-color-accent);
-        outline-offset: -8px;
-      }
-      .error {
-        grid-area: nav;
-        align-self: end;
-        justify-self: center;
-        margin-top: calc(var(--pincel-toolbar-size) + 4px);
-        z-index: 1;
-        padding: 6px 10px;
-        border-radius: var(--pincel-radius);
-        background: var(--pincel-color-danger);
-        color: white;
-        font-size: 12px;
-      }
-    `,
-    ]; }
-    static { this.properties = {
-        plugins: { attribute: false },
-        session: { attribute: false },
-        renderer: { attribute: false },
-        assets: { attribute: false },
-        server: { attribute: false },
-        serverEndpoint: { type: String, attribute: 'server-endpoint' },
-        src: { attribute: false },
-        editLog: { attribute: false },
-        defaultEditLog: { attribute: false },
-        output: { attribute: false },
-        theme: { type: String, reflect: true },
-        locale: { type: String },
-        dictionary: { attribute: false },
-        tools: { attribute: false },
-        activeTool: { type: String, attribute: 'active-tool' },
-        showExport: { type: String, attribute: 'show-export' },
-        _busy: { state: true },
-        _processListeners: { state: true },
-        _toast: { state: true },
-        _dragover: { state: true },
-        _wide: { state: true },
-        _pluginTools: { state: true },
-    }; }
-    /**
-     * Used when no `renderer` property is set. `@pincel/element` installs a
-     * factory that starts the bundled worker; without it the editor renders inline.
-     */
-    static { this.defaultRendererFactory = null; }
-    constructor() {
-        super();
-        this.resizeObserver = null;
-        this.toolLoads = new Set();
-        this.ctl = new SessionController(this, null);
-        this.i18n = createI18n('en');
-        this.ownsSession = false;
-        this.lastEmittedVersion = -1;
-        this.lastAppliedControlled = '';
-        this.hint = null;
-        this.previousTool = null;
-        this.loadedSrc = null;
-        this.lastError = null;
-        this.sessionRenderer = null;
-        this.sessionAssets = null;
-        this.sessionServer = null;
-        this.onPointerDown = () => {
-            if (!this.matches(':focus-within'))
-                this.focus({ preventScroll: true });
-        };
-        this.onKeydown = (e) => {
-            const session = this.ctl.session;
-            if (!session || session.getState().status !== 'ready')
-                return;
-            const mod = e.metaKey || e.ctrlKey;
-            if (mod && e.key.toLowerCase() === 'z') {
-                e.preventDefault();
-                if (e.shiftKey)
-                    session.redo();
-                else
-                    session.undo();
-            }
-            else if (mod && e.key.toLowerCase() === 'y') {
-                e.preventDefault();
-                session.redo();
-            }
-        };
-        this.toastTimer = null;
-        this.plugins = null;
-        this.session = null;
-        this.renderer = null;
-        this.assets = null;
-        this.server = null;
-        this.serverEndpoint = null;
-        this.src = null;
-        this.editLog = undefined;
-        this.defaultEditLog = undefined;
-        this.output = { format: 'image/png' };
-        this.theme = 'dark';
-        this.locale = 'en';
-        this.dictionary = null;
-        this.tools = null;
-        this.activeTool = null;
-        this.showExport = 'auto';
-        this._busy = false;
-        this._processListeners = 0;
-        this._toast = null;
-        this._dragover = false;
-        this._wide = false;
-        this._pluginTools = {};
-    }
-    addEventListener(type, listener, options) {
-        super.addEventListener(type, listener, options);
-        if (type === 'pincel:process')
-            this._processListeners += 1;
-    }
-    removeEventListener(type, listener, options) {
-        super.removeEventListener(type, listener, options);
-        if (type === 'pincel:process' && this._processListeners > 0)
-            this._processListeners -= 1;
-    }
-    /** The live session, created on first connection when none was passed. */
-    getSession() {
-        if (!this.ctl.session)
-            this.ensureSession();
-        return this.ctl.session;
-    }
-    getEditLog() {
-        return this.getSession().getEditLog();
-    }
-    setEditLog(saved, index) {
-        this.getSession().setEditLog(saved, index);
-    }
-    undo() {
-        this.getSession().undo();
-    }
-    redo() {
-        this.getSession().redo();
-    }
-    timeTravel(index) {
-        this.getSession().timeTravel(index);
-    }
-    async export(output = this.output, options = {}) {
-        return this.getSession().export({ output, ...options });
-    }
-    async download(options = {}) {
-        return this.getSession().download({ output: this.output, ...options });
-    }
-    ensureSession() {
-        if (this.ctl.session)
-            return;
-        if (this.session) {
-            this.ctl.session = this.session;
-            return;
-        }
-        const plugins = this.plugins ?? defaultPlugins;
-        const renderer = this.renderer ?? PincelEditor.defaultRendererFactory?.(plugins) ?? null;
-        this.sessionRenderer = renderer;
-        const assets = this.assets ?? createAssetResolver({ assets: plugins.flatMap((p) => p.assets ?? []) });
-        const server = this.server ?? (this.serverEndpoint ? { endpoint: this.serverEndpoint } : null);
-        this.sessionServer = server;
-        this.sessionAssets = this.assets;
-        const session = createEditorSession({
-            plugins,
-            assets,
-            ...(renderer ? { renderer } : {}),
-            ...(server ? { server } : {}),
-        });
-        this.ownsSession = true;
-        this.ctl.session = session;
-        this.dispatchEvent(new CustomEvent('pincel:ready', { bubbles: true, composed: true }));
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.ensureSession();
-        // Keyboard shortcuts need focus inside the editor. WebKit does not focus
-        // buttons on click, so pull focus in on any pointer interaction.
-        if (!this.hasAttribute('tabindex'))
-            this.tabIndex = -1;
-        this.addEventListener('keydown', this.onKeydown);
-        this.addEventListener('pointerdown', this.onPointerDown);
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const width = entries[0]?.contentRect.width ?? this.clientWidth;
-            this._wide = width >= 768;
-        });
-        this.resizeObserver.observe(this);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('keydown', this.onKeydown);
-        this.removeEventListener('pointerdown', this.onPointerDown);
-        this.resizeObserver?.disconnect();
-        if (this.ownsSession) {
-            this.ctl.session?.dispose();
-            this.ctl.session = null;
-            this.ownsSession = false;
-        }
-    }
-    willUpdate(changed) {
-        if (changed.has('locale') || changed.has('dictionary')) {
-            this.i18n = createI18n(this.locale, this.dictionary ?? resolveLocale(this.locale));
-        }
-        if (changed.has('session') && this.session && this.session !== this.ctl.session) {
-            if (this.ownsSession)
-                this.ctl.session?.dispose();
-            this.ownsSession = false;
-            this.ctl.session = this.session;
-        }
-        // A new plugin list or renderer needs a new session; reload the current source into it.
-        if ((changed.has('plugins') ||
-            changed.has('renderer') ||
-            changed.has('assets') ||
-            changed.has('server') ||
-            changed.has('serverEndpoint')) &&
-            this.ownsSession &&
-            !this.sessionMatchesProps()) {
-            this.ctl.session?.dispose();
-            this.ctl.session = null;
-            this.ownsSession = false;
-            this.toolLoads.clear();
-            this._pluginTools = {};
-            this.lastEmittedVersion = -1;
-            this.ensureSession();
-            if (this.loadedSrc)
-                void this.loadSource(this.loadedSrc);
-        }
-        if (changed.has('src') && this.src && this.src !== this.loadedSrc) {
-            this.loadedSrc = this.src;
-            void this.loadSource(this.src);
-        }
-        if (changed.has('editLog') && this.editLog !== undefined)
-            this.applyControlled();
-    }
-    updated() {
-        const state = this.ctl.state;
-        const session = this.ctl.session;
-        if (!state || !session)
-            return;
-        if (state.version !== this.lastEmittedVersion && state.status === 'ready') {
-            this.lastEmittedVersion = state.version;
-            const detail = session.getEditLog();
-            this.lastAppliedControlled = canonicalJson(detail);
-            this.dispatchEvent(new CustomEvent('pincel:change', { detail, bubbles: true, composed: true }));
-        }
-        if (state.error && state.error !== this.lastError) {
-            this.lastError = state.error;
-            this.dispatchEvent(new CustomEvent('pincel:error', { detail: state.error, bubbles: true, composed: true }));
-        }
-        this.syncActiveTool();
-    }
-    async loadSource(src) {
-        const session = this.getSession();
-        try {
-            const saved = this.editLog !== undefined ? this.editLog : this.defaultEditLog;
-            const bytes = src instanceof Uint8Array ? src : src;
-            const descriptor = await session.load(bytes, saved === undefined ? {} : { editLog: saved });
-            this.dispatchEvent(new CustomEvent('pincel:load', { detail: descriptor, bubbles: true, composed: true }));
-            if (!this.activeTool) {
-                const first = this.currentTools()[0];
-                if (first)
-                    this.activeTool = first.id;
-            }
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('pincel:error', { detail: error, bubbles: true, composed: true }));
-        }
-    }
-    applyControlled() {
-        const session = this.ctl.session;
-        if (!session || session.getState().status !== 'ready' || this.editLog === undefined)
-            return;
-        const wanted = this.editLog;
-        if (wanted === null)
-            return;
-        const key = canonicalJson(wanted);
-        if (key === this.lastAppliedControlled)
-            return;
-        try {
-            session.setEditLog(wanted, wanted.index);
-            this.lastAppliedControlled = key;
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('pincel:error', { detail: error, bubbles: true, composed: true }));
-        }
-    }
-    /** Whether the owned session was built from the current `plugins` and `renderer`. */
-    sessionMatchesProps() {
-        const session = this.ctl.session;
-        if (!session)
-            return false;
-        if (this.renderer && this.renderer !== this.sessionRenderer)
-            return false;
-        if (this.assets && this.assets !== this.sessionAssets)
-            return false;
-        const wantServer = this.server ?? (this.serverEndpoint ? { endpoint: this.serverEndpoint } : null);
-        if (JSON.stringify(wantServer?.endpoint ?? null) !==
-            JSON.stringify(this.sessionServer?.endpoint ?? null))
-            return false;
-        if (wantServer !== this.sessionServer && wantServer?.fetch !== this.sessionServer?.fetch)
-            return false;
-        const want = (this.plugins ?? defaultPlugins).map((p) => p.id).join(',');
-        const have = session.registry.plugins
-            .map((p) => p.id)
-            .sort()
-            .join(',');
-        return want.split(',').sort().join(',') === have;
-    }
-    currentTools() {
-        const plugins = this.plugins ?? defaultPlugins;
-        this.loadPluginTools(plugins);
-        return toolsFor(plugins, { ...this._pluginTools, ...(this.tools ?? {}) });
-    }
-    /** Plugins may ship their own tool; load each once and re-render when it arrives. */
-    loadPluginTools(plugins) {
-        for (const plugin of plugins) {
-            if (!plugin.tool || this.toolLoads.has(plugin.id))
-                continue;
-            this.toolLoads.add(plugin.id);
-            plugin
-                .tool()
-                .then((tool) => {
-                this._pluginTools = { ...this._pluginTools, [plugin.id]: tool };
-            })
-                .catch((error) => {
-                this.dispatchEvent(new CustomEvent('pincel:error', { detail: error, bubbles: true, composed: true }));
-            });
-        }
-    }
-    get stage() {
-        return this.renderRoot.querySelector('pincel-stage');
-    }
-    toolContext(state) {
-        const session = this.getSession();
-        const stage = this.stage;
-        return {
-            session,
-            state,
-            document: state.document,
-            dispatch: (op) => session.dispatch(op),
-            t: this.i18n.t,
-            stage: {
-                width: state.preview?.image.width ?? 0,
-                height: state.preview?.image.height ?? 0,
-                zoom: stage?.zoom ?? 1,
-                geometry: state.preview?.geometry ?? null,
-                toImage: (x, y) => stage?.toImage(x, y) ?? { x: 0, y: 0 },
-            },
-            hint: (hint) => {
-                this.hint = hint;
-                const s = this.stage;
-                if (s) {
-                    s.hintFilter = hint?.filter ?? '';
-                    s.hintTransform = hint?.transform ?? '';
-                }
-            },
-            refresh: () => this.requestUpdate(),
-            layout: this._wide ? 'wide' : 'narrow',
-        };
-    }
-    syncActiveTool() {
-        const state = this.ctl.state;
-        if (!state || state.status !== 'ready')
-            return;
-        const tool = this.currentTools().find((t) => t.id === this.activeTool) ?? null;
-        if (tool === this.previousTool)
-            return;
-        const ctx = this.toolContext(state);
-        this.previousTool?.deactivate?.(ctx);
-        tool?.activate?.(ctx);
-        this.previousTool = tool;
-    }
-    async onExport() {
-        const session = this.getSession();
-        this._busy = true;
-        try {
-            const result = await session.export({ output: this.output });
-            this.dispatchEvent(new CustomEvent('pincel:process', { detail: result, bubbles: true, composed: true }));
-            this.toast('toast.exported', result);
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('pincel:error', { detail: error, bubbles: true, composed: true }));
-        }
-        finally {
-            this._busy = false;
-        }
-    }
-    async onDownload() {
-        const session = this.getSession();
-        this._busy = true;
-        try {
-            const { result } = await session.download({ output: this.output });
-            this.dispatchEvent(new CustomEvent('pincel:process', { detail: result, bubbles: true, composed: true }));
-            this.toast('toast.downloaded', result);
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('pincel:error', { detail: error, bubbles: true, composed: true }));
-        }
-        finally {
-            this._busy = false;
-        }
-    }
-    announce(text) {
-        const live = this.renderRoot.querySelector('#live');
-        if (live)
-            live.textContent = text;
-    }
-    /** Brief confirmation over the stage: format, size and hash of the result. */
-    toast(key, result) {
-        const format = result.mimeType.replace('image/', '').toUpperCase();
-        const size = result.bytes ? formatBytes(result.bytes.byteLength) : 'server';
-        const text = this.i18n.t(key, { format, width: result.width, height: result.height, size });
-        this._toast = { text, hash: result.hash.slice(0, 12) };
-        this.announce(text);
-        if (this.toastTimer)
-            clearTimeout(this.toastTimer);
-        this.toastTimer = setTimeout(() => {
-            this._toast = null;
-            this.toastTimer = null;
-        }, 5000);
-    }
-    onFiles(files) {
-        const file = files?.[0];
-        if (file)
-            this.src = file;
-    }
-    render() {
-        const state = this.ctl.state;
-        const tools = this.currentTools();
-        const tool = tools.find((t) => t.id === this.activeTool) ?? null;
-        const ready = state?.status === 'ready';
-        const ctx = state && ready ? this.toolContext(state) : null;
-        const wide = this._wide;
-        return html `
-      <div class="root" part="root">
-        <pincel-nav
-          part="nav"
-          exportparts="undo, redo, history, export, download, dimensions, button"
-          .state=${state}
-          .t=${this.i18n.t}
-          .busy=${this._busy}
-          .canExport=${(state?.resident ?? false) || this.server !== null || this.serverEndpoint !== null}
-          .showExport=${this.showExport === 'always' || (this.showExport === 'auto' && this._processListeners > 0)}
-          @nav-undo=${() => this.getSession().undo()}
-          @nav-redo=${() => this.getSession().redo()}
-          @nav-time-travel=${(e) => this.getSession().timeTravel(e.detail)}
-          @nav-export=${() => this.onExport()}
-          @nav-download=${() => this.onDownload()}
-        ></pincel-nav>
-        ${ready
-            ? html `<pincel-stage
-              part="stage"
-              exportparts="viewport, canvas, overlay, status"
-              .preview=${state?.preview ?? null}
-              .pending=${state?.previewPending ?? false}
-              .overlay=${ctx && tool?.overlay ? tool.overlay(ctx) : null}
-              @stage-view=${() => this.requestUpdate()}
-            ></pincel-stage>`
-            : this.renderEmpty(state)}
-        <div class="panel" part="panel">${ctx && tool ? tool.panel(ctx) : nothing}</div>
-        <pincel-toolbar
-          part="toolbar"
-          exportparts="tool"
-          .tools=${tools}
-          .active=${this.activeTool}
-          .t=${this.i18n.t}
-          .orientation=${wide ? 'vertical' : 'horizontal'}
-          @tool-select=${(e) => {
-            this.activeTool = e.detail;
-        }}
-        ></pincel-toolbar>
-        ${state?.error ? html `<div class="error" role="alert">${this.i18n.t('editor.error', { message: state.error.message })}</div>` : nothing}
-        ${this._toast
-            ? html `<div class="toast" part="toast" data-testid="toast" @click=${() => {
-                this._toast = null;
-            }}>
-                <span>${this._toast.text}</span>
-                <code>${this._toast.hash}</code>
-              </div>`
-            : nothing}
-        <span id="live" class="visually-hidden" role="status" aria-live="polite"></span>
-      </div>
-    `;
-    }
-    renderEmpty(state) {
-        if (state?.status === 'loading') {
-            return html `<div class="empty" part="empty" role="status">${this.i18n.t('editor.loading')}</div>`;
-        }
-        return html `<div
-      class="empty ${this._dragover ? 'dragover' : ''}"
-      part="empty"
-      @dragover=${(e) => {
-            e.preventDefault();
-            this._dragover = true;
-        }}
-      @dragleave=${() => {
-            this._dragover = false;
-        }}
-      @drop=${(e) => {
-            e.preventDefault();
-            this._dragover = false;
-            this.onFiles(e.dataTransfer?.files ?? null);
-        }}
-    >
-      <p>${this.i18n.t('editor.empty')}</p>
-      <label>
-        <input class="visually-hidden" type="file" accept="image/png,image/jpeg,image/webp" @change=${(e) => this.onFiles(e.target.files)} />
-        <pincel-button variant="primary" @click=${(e) => e.currentTarget.previousElementSibling.click()}>
-          ${this.i18n.t('editor.choose')}
-        </pincel-button>
-      </label>
-    </div>`;
-    }
-}
-function formatBytes(n) {
-    if (n < 1024)
-        return `${n} B`;
-    if (n < 1024 * 1024)
-        return `${(n / 1024).toFixed(n < 10240 ? 1 : 0)} KB`;
-    return `${(n / (1024 * 1024)).toFixed(1)} MB`;
-}
-//# sourceMappingURL=pincel-editor.js.map