@sealpixel/ui 1.0.0-rc.0

package/dist/components/sealpixel-editor.js

@@ -0,0 +1,1245 @@
+import { canonicalJson, configurePlugins, createAssetResolver, createEditorSession, SealpixelError, } from '@sealpixel/core';
+import { defaultPlugins } from '@sealpixel/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('[sealpixel] 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: `sealpixel:ready`, `sealpixel:load`, `sealpixel:change` ({ log, index }),
+ * `sealpixel:process` (ExportResult), `sealpixel:error` (SealpixelError).
+ */
+export class SealpixelEditor extends LitElement {
+    static { this.styles = [
+        tokens,
+        base,
+        css `
+      :host {
+        display: block;
+        container-type: inline-size;
+        background: var(--sealpixel-color-bg);
+        color: var(--sealpixel-color-fg);
+        height: 100%;
+        min-height: 480px;
+        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;
+      }
+      sealpixel-stage {
+        grid-area: stage;
+        min-height: 160px;
+      }
+      sealpixel-nav {
+        grid-area: nav;
+      }
+      sealpixel-toolbar {
+        grid-area: toolbar;
+      }
+      .panel {
+        grid-area: panel;
+        background: var(--sealpixel-color-surface);
+        border-top: 1px solid var(--sealpixel-color-border);
+        padding: var(--sealpixel-space) calc(var(--sealpixel-space) * 1.5);
+        /*
+         * A fixed height, not a fitted one. A bar that grew and shrank as the
+         * user moved between tools would resize the stage under them, and the
+         * image would shift every time they changed their mind.
+         */
+        height: min(34cqh, var(--sealpixel-panel-size));
+        overflow: auto;
+        /*
+         * A bottom bar lays its blocks across the width and wraps, where the
+         * old right-hand column stacked them. Stacking five blocks in a bar
+         * that is one or two rows tall would push the last of them out of
+         * sight, so a block takes a full row only when it asks for one.
+         */
+        display: flex;
+        flex-wrap: wrap;
+        /*
+         * Safe centring places the blocks in the middle while they fit and
+         * at the start once they do not. Plain centring overflows a fixed bar
+         * at both ends, and nothing scrolls back to what sits above the top.
+         */
+        align-items: center;
+        align-content: safe center;
+        justify-content: safe center;
+        gap: var(--sealpixel-space) calc(var(--sealpixel-space) * 2);
+        scrollbar-width: thin;
+        scroll-behavior: smooth;
+      }
+      /*
+       * A dial needs room to be worth dragging, but it must not grow into all
+       * of it: a dial that stretches pushes the controls beside it against the
+       * two edges of the bar, and they stop reading as one group.
+       */
+      .panel > sealpixel-slider {
+        flex: 0 1 360px;
+        min-width: 240px;
+      }
+      /* Chips, presets and asset libraries always get their own full row. */
+      .panel > .strip,
+      .panel > .grid {
+        flex: 1 1 100%;
+      }
+      .panel > .row,
+      .panel > .rows,
+      .panel > .field,
+      .panel > .hint {
+        flex: 0 1 auto;
+      }
+      /*
+       * A tool panel has two kinds of control: the choice of what to work with
+       * (a shape, a frame style, a preset, a parameter) and the settings for
+       * whatever is chosen. The choice belongs at the bottom, next to the tool
+       * rail it continues, and its settings appear above it. Side by side they
+       * read as one undifferentiated row of buttons and it is not obvious which
+       * of them changes what.
+       *
+       * Ordering here rather than in each tool keeps a panel's source in
+       * reading order and lets a third-party tool join in with one class.
+       */
+      .panel > * {
+        order: 1;
+      }
+      /*
+       * Switching tools rebuilds the panel, so the rows rise on the new
+       * children and never on a value change inside the open tool, where Lit
+       * patches the same nodes.
+       *
+       * Transform only, deliberately. A fade would put the labels at partial
+       * opacity for a moment, and a contrast audit that samples the panel
+       * during that moment reports text it can read on screen as failing.
+       * Transform also keeps the panel's own height still, which the layout
+       * around it is measured against.
+       */
+      .panel > * {
+        animation: sealpixel-panel-in var(--sealpixel-duration) var(--sealpixel-ease-out) both;
+      }
+      .panel > *:nth-child(2) {
+        animation-delay: 25ms;
+      }
+      .panel > *:nth-child(n + 3) {
+        animation-delay: 50ms;
+      }
+      @keyframes sealpixel-panel-in {
+        from {
+          transform: translateY(8px);
+        }
+      }
+      /* Phones: option grids become one horizontal strip so the stage keeps its height. */
+      .panel .grid,
+      .panel .strip {
+        display: flex;
+        gap: var(--sealpixel-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;
+      }
+      /*
+       * The strip centres while it fits and scrolls from the first item once
+       * it does not, so a short row of presets is not stranded at the left
+       * edge of a wide bar.
+       */
+      .panel .strip {
+        justify-content: safe center;
+        align-items: end;
+        scroll-behavior: smooth;
+      }
+      .panel .chips {
+        gap: 2px;
+      }
+      /*
+       * A segmented control: one pill holds the row, the segments share it. Six
+       * separate buttons put six borders in a row and made the choice look like
+       * six unrelated actions; one container says they are one decision with
+       * one answer at a time.
+       */
+      .panel .group {
+        display: inline-flex;
+        gap: 2px;
+        padding: 2px;
+        background: var(--sealpixel-color-surface-2);
+        border-radius: var(--sealpixel-radius-pill);
+        flex: 0 0 auto;
+      }
+      .panel .group sealpixel-button::part(button) {
+        background: transparent;
+        border-color: transparent;
+        min-height: calc(var(--sealpixel-control-height) - 4px);
+        min-width: calc(var(--sealpixel-control-height) - 4px);
+        padding: 0 calc(var(--sealpixel-space) * 1.25);
+      }
+      .panel .group sealpixel-button:hover::part(button) {
+        background: color-mix(in srgb, var(--sealpixel-color-fg) 7%, transparent);
+      }
+      .panel .group sealpixel-button[pressed]::part(button) {
+        background: var(--sealpixel-color-surface);
+        color: var(--sealpixel-color-accent);
+        box-shadow: var(--sealpixel-shadow-sm, none);
+      }
+
+      /* Filter tiles: the image is the control, the label only names it. */
+      .panel .tiles {
+        gap: calc(var(--sealpixel-space) * 0.75);
+      }
+      /*
+       * The one control in the bar that gets bigger. Everywhere else the chrome
+       * shrank; here the chrome is the point, because a preset is judged by
+       * looking at it.
+       */
+      .panel .thumb {
+        display: block;
+        width: 100%;
+        height: 64px;
+        object-fit: cover;
+        border-radius: var(--sealpixel-radius);
+        background: var(--sealpixel-color-surface-2);
+        box-shadow: 0 0 0 1px var(--sealpixel-color-border);
+        transition:
+          box-shadow var(--sealpixel-duration) var(--sealpixel-ease),
+          transform var(--sealpixel-duration) var(--sealpixel-ease-spring);
+      }
+      .panel .tiles sealpixel-button {
+        min-width: 84px;
+        max-width: 84px;
+      }
+      .panel .tiles sealpixel-button::part(button) {
+        flex-direction: column;
+        gap: 6px;
+        padding: 0;
+        min-height: 0;
+        height: auto;
+        font-size: 11px;
+        background: transparent;
+        color: var(--sealpixel-color-fg-muted);
+      }
+      .panel .tiles sealpixel-button:hover .thumb {
+        transform: translateY(-2px);
+      }
+      .panel .tiles sealpixel-button[pressed] .thumb {
+        box-shadow:
+          0 0 0 2px var(--sealpixel-color-surface),
+          0 0 0 4px var(--sealpixel-color-accent);
+      }
+      .panel .tiles sealpixel-button[pressed]::part(button) {
+        background: transparent;
+        border-color: transparent;
+        color: var(--sealpixel-color-fg);
+      }
+      /* Separates the untouched image from the presets. */
+      .panel .divider {
+        flex: 0 0 auto;
+        align-self: stretch;
+        width: 1px;
+        min-width: 1px;
+        margin: 6px calc(var(--sealpixel-space) * 0.5);
+        background: var(--sealpixel-color-border);
+        opacity: 0.55;
+      }
+      .panel .row.compact > sealpixel-button {
+        flex: 0 0 auto;
+        min-width: 72px;
+      }
+      /* Phones: sibling groups share one line and hints make room for the stage. */
+      .panel .rows {
+        display: flex;
+        gap: var(--sealpixel-space);
+        align-items: end;
+      }
+      /*
+       * Content width, not an equal share. An equal share squeezed a text field
+       * and a colour well down to a few pixels each and their labels ran into
+       * one another; only a dial has a reason to take the leftover room.
+       */
+      .panel .rows > * {
+        flex: 0 1 auto;
+        min-width: 0;
+      }
+      /*
+       * A dial needs travel to be worth dragging. Inside a settings row it was
+       * sharing the width equally with a colour swatch and a checkbox and ended
+       * up a few ticks wide, which is not a control any more. The row grows to
+       * give it that width instead of shrinking to its contents.
+       */
+      /*
+       * A settings row scrolls sideways when it is wider than the bar, the way
+       * the choice row does. Letting it overflow instead left the last control
+       * cut off at the edge with nothing to say it was there.
+       */
+      .panel > .rows {
+        flex: 0 1 auto;
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-behavior: smooth;
+        padding-bottom: 1px;
+      }
+      .panel > .rows::-webkit-scrollbar {
+        display: none;
+      }
+      .panel > .rows > * {
+        flex-shrink: 0;
+      }
+      .panel .rows > sealpixel-slider {
+        flex: 0 1 260px;
+        min-width: 220px;
+      }
+      .panel .rows .row {
+        flex-wrap: nowrap;
+      }
+      .panel .rows .row > sealpixel-button {
+        flex: 1 1 0;
+        min-width: 0;
+      }
+      /*
+       * A field fills its label, but never shrinks to nothing: a text box a
+       * few pixels wide hides what was typed into it, and a select that narrow
+       * hides which option is chosen.
+       */
+      .panel .rows select,
+      .panel .rows input:not([type='checkbox']):not([type='color']) {
+        width: 100%;
+        min-width: 7em;
+      }
+      .panel .rows input[type='text'],
+      .panel .rows textarea {
+        min-width: 11em;
+      }
+      .panel .rows > .field:has(input[type='color']),
+      .panel .rows > .field.check {
+        flex: 0 0 auto;
+      }
+      /* A colour well is square, which makes the disc round. */
+      .panel .rows > .field:has(input[type='color']) input {
+        width: var(--sealpixel-control-height);
+        aspect-ratio: 1;
+      }
+      .panel .swatches {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-bottom: 6px;
+      }
+      .panel .swatch {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        border: 0;
+        box-shadow: 0 0 0 1px var(--sealpixel-color-border);
+        cursor: pointer;
+        padding: 0;
+        transition:
+          transform var(--sealpixel-duration) var(--sealpixel-ease-spring),
+          border-color var(--sealpixel-transition),
+          box-shadow var(--sealpixel-duration) var(--sealpixel-ease);
+      }
+      .panel .swatch:hover {
+        transform: scale(1.12);
+      }
+      .panel .swatch:active {
+        transform: scale(0.94);
+      }
+      /* The ring sits off the disc, so the colour itself is never covered. */
+      .panel .swatch[aria-pressed='true'] {
+        box-shadow:
+          0 0 0 2px var(--sealpixel-color-surface),
+          0 0 0 3.5px var(--sealpixel-color-accent);
+      }
+      .panel:empty {
+        display: none;
+      }
+      .toast {
+        position: absolute;
+        left: 50%;
+        bottom: calc(var(--sealpixel-toolbar-size) + var(--sealpixel-space) * 2);
+        /* Sits above the stage, never over the bar the user is working in. */
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: var(--sealpixel-space);
+        max-width: calc(100% - var(--sealpixel-space) * 4);
+        padding: calc(var(--sealpixel-space) * 1.25) calc(var(--sealpixel-space) * 2);
+        border-radius: 999px;
+        background: color-mix(in srgb, var(--sealpixel-color-surface) 92%, transparent);
+        border: 1px solid var(--sealpixel-color-border);
+        box-shadow: var(--sealpixel-shadow, 0 8px 24px rgba(0, 0, 0, 0.3));
+        color: var(--sealpixel-color-fg);
+        font-size: 13px;
+        white-space: nowrap;
+        backdrop-filter: blur(8px);
+        cursor: pointer;
+        z-index: 2;
+        animation: sealpixel-toast-in var(--sealpixel-duration) var(--sealpixel-ease-out) both;
+      }
+      .toast:hover {
+        border-color: var(--sealpixel-color-fg-muted);
+      }
+      .toast code {
+        font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+        color: var(--sealpixel-color-fg-muted);
+        padding: 2px 8px;
+        border-radius: 999px;
+        background: var(--sealpixel-color-surface-2);
+      }
+      @keyframes sealpixel-toast-in {
+        from {
+          opacity: 0;
+          transform: translate(-50%, 12px) scale(0.96);
+        }
+      }
+      /*
+       * Wide layouts move the tool rail to the left edge and nothing else. The
+       * panel stays a bottom bar at every width, so a control sits in the same
+       * place on a phone and on a desktop, and the stage keeps the full width
+       * it needs for a landscape image.
+       */
+      @container (min-width: 48rem) {
+        /*
+         * The rail runs the full height beside both the stage and the bar.
+         * Stopping it above the bar cost it the bar's height, and with ten or
+         * more tools the last of them ended up scrolled out of sight behind
+         * the settings of the one already open.
+         */
+        .root {
+          grid-template:
+            'nav nav' auto
+            'toolbar stage' 1fr
+            'toolbar panel' auto / var(--sealpixel-toolbar-size) 1fr;
+        }
+        .panel {
+          height: var(--sealpixel-panel-size);
+          padding: var(--sealpixel-space) calc(var(--sealpixel-space) * 2);
+        }
+        .toast {
+          bottom: calc(var(--sealpixel-space) * 2);
+        }
+      }
+      .panel .row {
+        display: flex;
+        gap: var(--sealpixel-space);
+        flex-wrap: wrap;
+      }
+      .panel > .choice {
+        order: 2;
+        flex: 1 1 100%;
+        justify-content: safe center;
+        /*
+         * Pinned to the foot of the bar. The choice is what gets the user out
+         * of the tool they are in, so it has to stay reachable even when a
+         * busy panel scrolls its settings.
+         */
+        position: sticky;
+        bottom: 0;
+        z-index: 1;
+        background: var(--sealpixel-color-surface);
+        padding-top: 4px;
+        /*
+         * One line that scrolls, never two that wrap. A wrapped second line
+         * falls below the bar and takes whatever was on it out of reach, and
+         * on a phone that was the reset button.
+         */
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-behavior: smooth;
+      }
+      .panel > .choice::-webkit-scrollbar {
+        display: none;
+      }
+      .panel > .choice > * {
+        flex-shrink: 0;
+      }
+      .panel .field {
+        display: grid;
+        gap: 3px;
+        justify-items: center;
+        color: var(--sealpixel-color-fg-muted);
+      }
+      /* The label names the control; it is not the thing being read. */
+      .panel .field > span,
+      .panel .field > .lab {
+        font-size: 11px;
+        letter-spacing: 0.012em;
+        line-height: 1.2;
+      }
+      .panel .hint {
+        margin: 0;
+        color: var(--sealpixel-color-fg-muted);
+        font-size: 12px;
+      }
+      /*
+       * Width and height are one measurement, so they sit against the link that
+       * binds them rather than being two fields that happen to be adjacent.
+       */
+      .panel .dims {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .panel .dims input[type='number'] {
+        width: 5.5em;
+        min-width: 0;
+        text-align: center;
+        font-variant-numeric: tabular-nums;
+        appearance: textfield;
+      }
+      .panel .dims input::-webkit-outer-spin-button,
+      .panel .dims input::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+      /* A value the link worked out, not one that was typed. */
+      .panel .dims input.derived {
+        color: var(--sealpixel-color-fg-muted);
+        font-weight: 400;
+      }
+      .panel .dims sealpixel-button::part(button) {
+        min-width: calc(var(--sealpixel-control-height) - 6px);
+        min-height: calc(var(--sealpixel-control-height) - 6px);
+        padding: 0;
+        background: transparent;
+        color: var(--sealpixel-color-fg-muted);
+      }
+      .panel .dims sealpixel-button[pressed]::part(button) {
+        background: var(--sealpixel-color-accent-soft);
+        color: var(--sealpixel-color-accent);
+      }
+      .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(--sealpixel-color-fg);
+        background: var(--sealpixel-color-surface-2);
+        border: 1px solid var(--sealpixel-color-border);
+        border-radius: var(--sealpixel-radius-sm);
+        padding: var(--sealpixel-space);
+        resize: vertical;
+      }
+      /* A colour is a disc, not a box: it shows the colour and nothing else. */
+      .panel input[type='color'] {
+        /* Without this the engine keeps its own swatch metrics inside the box
+           and the disc comes out an ellipse. */
+        appearance: none;
+        min-height: var(--sealpixel-control-height);
+        height: var(--sealpixel-control-height);
+        width: var(--sealpixel-control-height);
+        padding: 0;
+        border: 0;
+        border-radius: 50%;
+        background: transparent;
+        cursor: pointer;
+        overflow: hidden;
+      }
+      /* The swatch has to be told to fill the box; it does not by default. */
+      .panel input[type='color']::-webkit-color-swatch-wrapper {
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .panel input[type='color']::-webkit-color-swatch {
+        width: 100%;
+        height: 100%;
+        border: 0;
+        border-radius: 50%;
+        box-shadow: 0 0 0 1px var(--sealpixel-color-border);
+      }
+      .panel input[type='color']::-moz-color-swatch {
+        width: 100%;
+        height: 100%;
+        border: 0;
+        border-radius: 50%;
+        box-shadow: 0 0 0 1px var(--sealpixel-color-border);
+      }
+      .panel input:not([type='checkbox']):not([type='color']),
+      .panel select {
+        font: inherit;
+        font-size: 13px;
+        color: var(--sealpixel-color-fg);
+        background: var(--sealpixel-color-surface-2);
+        border: 1px solid transparent;
+        border-radius: var(--sealpixel-radius-pill);
+        min-height: var(--sealpixel-control-height);
+        padding: 0 calc(var(--sealpixel-space) * 1.5);
+      }
+      /*
+       * The chevron is drawn rather than left to the platform, so a select sits
+       * next to a pill button instead of looking like a form field that walked
+       * in from another page. The right padding keeps the text off it.
+       */
+      .panel select {
+        appearance: none;
+        padding-right: calc(var(--sealpixel-space) * 3);
+        background-image:
+          linear-gradient(45deg, transparent 50%, currentColor 50%),
+          linear-gradient(135deg, currentColor 50%, transparent 50%);
+        background-size: 5px 5px, 5px 5px;
+        background-position:
+          right 14px top 52%,
+          right 10px top 52%;
+        background-repeat: no-repeat;
+        color: var(--sealpixel-color-fg);
+      }
+      .empty {
+        grid-area: stage;
+        display: grid;
+        place-content: center;
+        gap: var(--sealpixel-space);
+        text-align: center;
+        color: var(--sealpixel-color-fg-muted);
+        padding: var(--sealpixel-space);
+      }
+      .empty {
+        transition:
+          background var(--sealpixel-duration) var(--sealpixel-ease),
+          color var(--sealpixel-duration) var(--sealpixel-ease);
+      }
+      .empty.dragover {
+        outline: 2px dashed var(--sealpixel-color-accent);
+        outline-offset: -8px;
+        background: var(--sealpixel-color-accent-soft, transparent);
+        color: var(--sealpixel-color-fg);
+      }
+      .error {
+        grid-area: nav;
+        align-self: end;
+        justify-self: center;
+        margin-top: calc(var(--sealpixel-toolbar-size) + 4px);
+        z-index: 1;
+        padding: 6px 10px;
+        border-radius: var(--sealpixel-radius);
+        background: var(--sealpixel-color-danger);
+        color: white;
+        font-size: 12px;
+        box-shadow: var(--sealpixel-shadow-raised, none);
+        animation: sealpixel-panel-in var(--sealpixel-duration) var(--sealpixel-ease-out) both;
+      }
+    `,
+    ]; }
+    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. `@sealpixel/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 === 'sealpixel:process')
+            this._processListeners += 1;
+    }
+    removeEventListener(type, listener, options) {
+        super.removeEventListener(type, listener, options);
+        if (type === 'sealpixel: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 `sealpixel:error`. */
+    effectivePlugins() {
+        const base = this.plugins ?? defaultPlugins;
+        if (!this.pluginOptions)
+            return base;
+        try {
+            return configurePlugins(base, this.pluginOptions);
+        }
+        catch (error) {
+            this.dispatchEvent(new CustomEvent('sealpixel: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 ?? SealpixelEditor.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('sealpixel: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('sealpixel:change', { detail, bubbles: true, composed: true }));
+        }
+        if (state.error && state.error !== this.lastError) {
+            this.lastError = state.error;
+            this.dispatchEvent(new CustomEvent('sealpixel: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.
+            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('sealpixel: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('sealpixel: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('sealpixel: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('sealpixel:error', { detail: error, bubbles: true, composed: true }));
+            });
+        }
+    }
+    get stage() {
+        return this.renderRoot.querySelector('sealpixel-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 SealpixelError && 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(),
+            animateNextView: () => this.stage?.glideNextView(),
+            clipPreview: (clip) => {
+                const s = this.stage;
+                if (s)
+                    s.clip = clip ?? '';
+            },
+            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('sealpixel:process', { detail: result, bubbles: true, composed: true }));
+            this.toast('toast.exported', result);
+        }
+        catch (error) {
+            this.dispatchEvent(new CustomEvent('sealpixel: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('sealpixel:process', { detail: result, bubbles: true, composed: true }));
+            this.toast('toast.downloaded', result);
+        }
+        catch (error) {
+            this.dispatchEvent(new CustomEvent('sealpixel: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">
+        <sealpixel-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()}
+        ></sealpixel-nav>
+        ${ready
+            ? html `<sealpixel-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()}
+            ></sealpixel-stage>`
+            : this.renderEmpty(state)}
+        <div class="panel" part="panel">${ctx && tool ? tool.panel(ctx) : nothing}</div>
+        <sealpixel-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;
+        }}
+        ></sealpixel-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)} />
+        <sealpixel-button variant="primary" @click=${(e) => e.currentTarget.previousElementSibling.click()}>
+          ${this.i18n.t('editor.choose')}
+        </sealpixel-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=sealpixel-editor.js.map