@sealpixel/ui 1.0.0-rc.0

package/dist/components/pincel-editor.js

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