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

package/dist/components/lumbra-editor.js

@@ -1,873 +0,0 @@
-import { canonicalJson, configurePlugins, createAssetResolver, createEditorSession, LumbraError, } from '@lumbra/core';
-import { defaultPlugins } from '@lumbra/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';
-/** `plugin-options='{"filter":{...}}'` attribute ↔ property. */
-const jsonAttribute = {
-    fromAttribute: (value) => {
-        if (value === null || value.trim() === '')
-            return null;
-        try {
-            return JSON.parse(value);
-        }
-        catch {
-            console.warn('[lumbra] plugin-options is not valid JSON');
-            return null;
-        }
-    },
-    toAttribute: (value) => (value ? JSON.stringify(value) : null),
-};
-/**
- * The default editor. Headless `EditorSession` underneath; this element adds
- * the responsive shell, tools and events.
- *
- * Events: `lumbra:ready`, `lumbra:load`, `lumbra:change` ({ log, index }),
- * `lumbra:process` (ExportResult), `lumbra:error` (LumbraError).
- */
-export class LumbraEditor extends LitElement {
-    static { this.styles = [
-        tokens,
-        base,
-        css `
-      :host {
-        display: block;
-        container-type: inline-size;
-        background: var(--lumbra-color-bg);
-        color: var(--lumbra-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;
-      }
-      lumbra-stage {
-        grid-area: stage;
-        min-height: 160px;
-      }
-      lumbra-nav {
-        grid-area: nav;
-      }
-      lumbra-toolbar {
-        grid-area: toolbar;
-      }
-      .panel {
-        grid-area: panel;
-        background: var(--lumbra-color-surface);
-        border-top: 1px solid var(--lumbra-color-border);
-        padding: var(--lumbra-space) calc(var(--lumbra-space) * 1.5);
-        max-height: 34cqh;
-        overflow: auto;
-        display: grid;
-        gap: var(--lumbra-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(--lumbra-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 > lumbra-button {
-        flex: 1 1 0;
-      }
-      /* Phones: sibling groups share one line and hints make room for the stage. */
-      .panel .rows {
-        display: flex;
-        gap: var(--lumbra-space);
-        align-items: end;
-      }
-      .panel .rows > * {
-        flex: 1 1 0;
-        min-width: 0;
-      }
-      .panel .rows .row {
-        flex-wrap: nowrap;
-      }
-      .panel .rows .row > lumbra-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(--lumbra-touch-target);
-      }
-      .panel .hint {
-        display: none;
-      }
-      .panel .swatches {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 6px;
-        margin-bottom: 6px;
-      }
-      .panel .swatch {
-        width: 28px;
-        height: 28px;
-        border-radius: 50%;
-        border: 2px solid var(--lumbra-color-border);
-        cursor: pointer;
-        padding: 0;
-      }
-      .panel .swatch[aria-pressed='true'] {
-        border-color: var(--lumbra-color-accent);
-        box-shadow: 0 0 0 2px var(--lumbra-color-accent-soft);
-      }
-      .panel:empty {
-        display: none;
-      }
-      .toast {
-        position: absolute;
-        left: 50%;
-        bottom: calc(var(--lumbra-toolbar-size) + var(--lumbra-space) * 2);
-        transform: translateX(-50%);
-        display: flex;
-        align-items: center;
-        gap: var(--lumbra-space);
-        max-width: calc(100% - var(--lumbra-space) * 4);
-        padding: calc(var(--lumbra-space) * 1.25) calc(var(--lumbra-space) * 2);
-        border-radius: 999px;
-        background: color-mix(in srgb, var(--lumbra-color-surface) 92%, transparent);
-        border: 1px solid var(--lumbra-color-border);
-        box-shadow: var(--lumbra-shadow, 0 8px 24px rgba(0, 0, 0, 0.3));
-        color: var(--lumbra-color-fg);
-        font-size: 13px;
-        white-space: nowrap;
-        backdrop-filter: blur(8px);
-        cursor: pointer;
-        z-index: 2;
-        animation: lumbra-toast-in var(--lumbra-transition) both;
-      }
-      .toast code {
-        font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
-        color: var(--lumbra-color-fg-muted);
-        padding: 2px 8px;
-        border-radius: 999px;
-        background: var(--lumbra-color-surface-2);
-      }
-      @keyframes lumbra-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(--lumbra-toolbar-size) 1fr var(--lumbra-panel-size);
-        }
-        .panel {
-          border-top: none;
-          border-left: 1px solid var(--lumbra-color-border);
-          max-height: none;
-          padding: calc(var(--lumbra-space) * 1.5) calc(var(--lumbra-space) * 2);
-          gap: calc(var(--lumbra-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(--lumbra-space) * 1.25);
-        }
-        .panel .rows > .field:has(input[type='color']) input {
-          width: 100%;
-        }
-        .panel .hint {
-          display: block;
-        }
-        .toast {
-          left: calc(var(--lumbra-toolbar-size) + (100% - var(--lumbra-toolbar-size) - var(--lumbra-panel-size)) / 2);
-          bottom: calc(var(--lumbra-space) * 2);
-        }
-      }
-      .panel .row {
-        display: flex;
-        gap: var(--lumbra-space);
-        flex-wrap: wrap;
-      }
-      .panel .field {
-        display: grid;
-        gap: 4px;
-        color: var(--lumbra-color-fg-muted);
-      }
-      .panel .hint {
-        margin: 0;
-        color: var(--lumbra-color-fg-muted);
-        font-size: 12px;
-      }
-      .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(--lumbra-color-fg);
-        background: var(--lumbra-color-surface-2);
-        border: 1px solid var(--lumbra-color-border);
-        border-radius: var(--lumbra-radius-sm);
-        padding: var(--lumbra-space);
-        resize: vertical;
-      }
-      .panel input[type='color'] {
-        min-height: var(--lumbra-touch-target);
-        padding: 2px;
-        width: 100%;
-      }
-      .panel input:not([type='checkbox']),
-      .panel select {
-        font: inherit;
-        color: var(--lumbra-color-fg);
-        background: var(--lumbra-color-surface-2);
-        border: 1px solid var(--lumbra-color-border);
-        border-radius: var(--lumbra-radius-sm);
-        min-height: var(--lumbra-touch-target);
-        padding: 0 var(--lumbra-space);
-      }
-      .empty {
-        grid-area: stage;
-        display: grid;
-        place-content: center;
-        gap: var(--lumbra-space);
-        text-align: center;
-        color: var(--lumbra-color-fg-muted);
-        padding: var(--lumbra-space);
-      }
-      .empty.dragover {
-        outline: 2px dashed var(--lumbra-color-accent);
-        outline-offset: -8px;
-      }
-      .error {
-        grid-area: nav;
-        align-self: end;
-        justify-self: center;
-        margin-top: calc(var(--lumbra-toolbar-size) + 4px);
-        z-index: 1;
-        padding: 6px 10px;
-        border-radius: var(--lumbra-radius);
-        background: var(--lumbra-color-danger);
-        color: white;
-        font-size: 12px;
-      }
-    `,
-    ]; }
-    static { this.properties = {
-        plugins: { attribute: false },
-        pluginOptions: { attribute: 'plugin-options', converter: jsonAttribute },
-        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' },
-        showDownload: { type: String, attribute: 'show-download' },
-        showHistory: { type: String, attribute: 'show-history' },
-        downloadLabel: { type: String, attribute: 'download-label' },
-        _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. `@lumbra/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 (this.showHistory === 'none')
-                return;
-            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.pluginOptions = 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.showDownload = 'always';
-        this.showHistory = 'all';
-        this.downloadLabel = null;
-        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 === 'lumbra:process')
-            this._processListeners += 1;
-    }
-    removeEventListener(type, listener, options) {
-        super.removeEventListener(type, listener, options);
-        if (type === 'lumbra:process' && this._processListeners > 0)
-            this._processListeners -= 1;
-    }
-    /** A renderer the editor made through the factory dies with the session; a host's renderer lives on. */
-    disposeOwnedRenderer() {
-        if (this.sessionRenderer && this.sessionRenderer !== this.renderer) {
-            this.sessionRenderer.dispose();
-        }
-        this.sessionRenderer = null;
-    }
-    /** `plugins` (or the defaults) with `pluginOptions` applied. Invalid options raise `lumbra:error`. */
-    effectivePlugins() {
-        const base = this.plugins ?? defaultPlugins;
-        if (!this.pluginOptions)
-            return base;
-        try {
-            return configurePlugins(base, this.pluginOptions);
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('lumbra:error', { detail: error, bubbles: true, composed: true }));
-            return base;
-        }
-    }
-    /** 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.effectivePlugins();
-        const renderer = this.renderer ?? LumbraEditor.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('lumbra: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.disposeOwnedRenderer();
-            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.disposeOwnedRenderer();
-            }
-            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('pluginOptions') ||
-            changed.has('renderer') ||
-            changed.has('assets') ||
-            changed.has('server') ||
-            changed.has('serverEndpoint')) &&
-            this.ownsSession &&
-            !this.sessionMatchesProps()) {
-            this.ctl.session?.dispose();
-            this.disposeOwnedRenderer();
-            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('lumbra:change', { detail, bubbles: true, composed: true }));
-        }
-        if (state.error && state.error !== this.lastError) {
-            this.lastError = state.error;
-            this.dispatchEvent(new CustomEvent('lumbra: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 });
-            // Option defaults become real ops in an otherwise empty log (SPEC A6.7).
-            if (saved === undefined && session.getState().history.log.ops.length === 0) {
-                for (const op of session.registry.initialOps(descriptor)) {
-                    session.dispatch({
-                        ...op,
-                        id: `init-${Math.random().toString(36).slice(2, 8)}`,
-                    });
-                }
-            }
-            this.dispatchEvent(new CustomEvent('lumbra: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('lumbra: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('lumbra: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;
-        // Compare id, version and resolved options (options JSON may contain commas, so no string splitting).
-        const key = (plugins) => canonicalJson([...plugins]
-            .sort((a, b) => a.id.localeCompare(b.id))
-            .map((p) => [p.id, p.version, p.options ?? null]));
-        return key(this.effectivePlugins()) === key(session.registry.plugins);
-    }
-    currentTools() {
-        const plugins = this.effectivePlugins();
-        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('lumbra:error', { detail: error, bubbles: true, composed: true }));
-            });
-        }
-    }
-    get stage() {
-        return this.renderRoot.querySelector('lumbra-stage');
-    }
-    toolContext(state) {
-        const session = this.getSession();
-        const stage = this.stage;
-        return {
-            session,
-            state,
-            document: state.document,
-            dispatch: (op) => {
-                try {
-                    session.dispatch(op);
-                }
-                catch (error) {
-                    // A tool asked for something the options forbid: tell the user, keep the log intact.
-                    if (error instanceof LumbraError && error.name === 'OPTION_VIOLATION') {
-                        this._toast = { text: error.message, hash: '' };
-                        this.announce(error.message);
-                        return;
-                    }
-                    throw error;
-                }
-            },
-            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',
-            options: (pluginId) => session.registry.byId.get(pluginId)?.options,
-        };
-    }
-    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('lumbra:process', { detail: result, bubbles: true, composed: true }));
-            this.toast('toast.exported', result);
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('lumbra: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('lumbra:process', { detail: result, bubbles: true, composed: true }));
-            this.toast('toast.downloaded', result);
-        }
-        catch (error) {
-            this.dispatchEvent(new CustomEvent('lumbra: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">
-        <lumbra-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)}
-          .showDownload=${this.showDownload !== 'never'}
-          .showHistory=${this.showHistory}
-          .downloadLabel=${this.downloadLabel}
-          @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()}
-        ></lumbra-nav>
-        ${ready
-            ? html `<lumbra-stage
-              part="stage"
-              exportparts="viewport, canvas, overlay, status"
-              .preview=${state?.preview ?? null}
-              .t=${this.i18n.t}
-              .pending=${state?.previewPending ?? false}
-              .overlay=${ctx && tool?.overlay ? tool.overlay(ctx) : null}
-              @stage-view=${() => this.requestUpdate()}
-            ></lumbra-stage>`
-            : this.renderEmpty(state)}
-        <div class="panel" part="panel">${ctx && tool ? tool.panel(ctx) : nothing}</div>
-        <lumbra-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;
-        }}
-        ></lumbra-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>
-                ${this._toast.hash ? html `<code>${this._toast.hash}</code>` : nothing}
-              </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)} />
-        <lumbra-button variant="primary" @click=${(e) => e.currentTarget.previousElementSibling.click()}>
-          ${this.i18n.t('editor.choose')}
-        </lumbra-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=lumbra-editor.js.map