@sealpixel/ui 1.0.0-rc.0

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,yBA4FlB,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,IAAI,yBAsChB,CAAC"}

package/dist/theme.js

@@ -0,0 +1,150 @@
+import { css } from 'lit';
+/**
+ * Design tokens. Every component reads these custom properties, so a host
+ * page restyles the editor by setting them on `<sealpixel-editor>`.
+ *
+ * The default look: deep graphite surfaces with a coral accent, soft 12 px
+ * radii, quiet borders and one elevated panel. Dark text on the accent keeps
+ * AA contrast; muted text stays above 4.5:1 on every surface.
+ *
+ * Motion runs on three durations and three curves. `--sealpixel-ease` is the
+ * standard curve for a state change the pointer already explains, such as hover
+ * or press. `--sealpixel-ease-out` decelerates hard and suits something that
+ * arrives: a panel, a toast, a view that settles after a fit.
+ * `--sealpixel-ease-spring` overshoots a little and stays reserved for a control
+ * the finger is on, where the overshoot reads as give and not as a bounce.
+ */
+export const tokens = css `
+  :host {
+    --sealpixel-color-bg: #0f1117;
+    --sealpixel-color-surface: #161923;
+    --sealpixel-color-surface-2: #1f2330;
+    --sealpixel-color-surface-3: #2a2f3d;
+    --sealpixel-color-border: #2b3040;
+    --sealpixel-color-fg: #eef0f6;
+    --sealpixel-color-fg-muted: #a3a9b8;
+    --sealpixel-color-accent: #ff6f4c;
+    --sealpixel-color-accent-fg: #1c0d08;
+    --sealpixel-color-accent-soft: rgba(255, 111, 76, 0.16);
+    --sealpixel-color-danger: #ef5a5a;
+    --sealpixel-color-focus: #ff9b7e;
+    --sealpixel-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+    --sealpixel-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --sealpixel-shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.32);
+    --sealpixel-radius: 12px;
+    --sealpixel-radius-sm: 8px;
+    --sealpixel-space: 8px;
+    --sealpixel-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --sealpixel-font-size: 14px;
+    --sealpixel-toolbar-size: 72px;
+    --sealpixel-panel-size: 112px;
+    --sealpixel-touch-target: 44px;
+    /*
+     * Height of a control in the bar. A mouse hits a 32 px target without
+     * trying and nine of them stop reading as nine boxes; a finger does not,
+     * so below it goes back to the full touch target. Both clear the 24 px
+     * WCAG 2.2 minimum.
+     */
+    --sealpixel-control-height: 32px;
+    --sealpixel-radius-pill: 999px;
+    --sealpixel-stage-checker-a: #1a1d27;
+    --sealpixel-stage-checker-b: #13161e;
+    --sealpixel-duration-fast: 120ms;
+    --sealpixel-duration: 200ms;
+    --sealpixel-duration-slow: 320ms;
+    --sealpixel-ease: cubic-bezier(0.3, 0, 0.2, 1);
+    --sealpixel-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --sealpixel-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+    /* The one-shot shorthand that hosts already override. */
+    --sealpixel-transition: var(--sealpixel-duration-fast) var(--sealpixel-ease);
+    color-scheme: dark;
+  }
+  :host([theme='light']) {
+    --sealpixel-color-bg: #f4f2ee;
+    --sealpixel-color-surface: #ffffff;
+    --sealpixel-color-surface-2: #f1efea;
+    --sealpixel-color-surface-3: #e6e3dc;
+    --sealpixel-color-border: #e1ded6;
+    --sealpixel-color-fg: #1a1a1f;
+    --sealpixel-color-fg-muted: #5f6370;
+    --sealpixel-color-accent: #d9481f;
+    --sealpixel-color-accent-fg: #ffffff;
+    --sealpixel-color-accent-soft: rgba(217, 72, 31, 0.12);
+    --sealpixel-color-danger: #c73a3f;
+    --sealpixel-color-focus: #d9481f;
+    --sealpixel-shadow: 0 10px 30px rgba(30, 20, 10, 0.12);
+    --sealpixel-shadow-sm: 0 1px 2px rgba(30, 20, 10, 0.08);
+    --sealpixel-shadow-raised: 0 4px 12px rgba(30, 20, 10, 0.12);
+    --sealpixel-stage-checker-a: #e9e6df;
+    --sealpixel-stage-checker-b: #f4f2ee;
+    color-scheme: light;
+  }
+  @media (pointer: coarse) {
+    :host {
+      --sealpixel-control-height: var(--sealpixel-touch-target);
+    }
+  }
+  @media (prefers-color-scheme: light) {
+    :host([theme='auto']) {
+      --sealpixel-color-bg: #f4f2ee;
+      --sealpixel-color-surface: #ffffff;
+      --sealpixel-color-surface-2: #f1efea;
+      --sealpixel-color-surface-3: #e6e3dc;
+      --sealpixel-color-border: #e1ded6;
+      --sealpixel-color-fg: #1a1a1f;
+      --sealpixel-color-fg-muted: #5f6370;
+      --sealpixel-color-accent: #d9481f;
+      --sealpixel-color-accent-fg: #ffffff;
+      --sealpixel-color-accent-soft: rgba(217, 72, 31, 0.12);
+      --sealpixel-color-danger: #c73a3f;
+      --sealpixel-color-focus: #d9481f;
+      --sealpixel-shadow: 0 10px 30px rgba(30, 20, 10, 0.12);
+      --sealpixel-shadow-sm: 0 1px 2px rgba(30, 20, 10, 0.08);
+      --sealpixel-shadow-raised: 0 4px 12px rgba(30, 20, 10, 0.12);
+      --sealpixel-stage-checker-a: #e9e6df;
+      --sealpixel-stage-checker-b: #f4f2ee;
+      color-scheme: light;
+    }
+  }
+`;
+/** Shared base styles for every component. */
+export const base = css `
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  :host {
+    font-family: var(--sealpixel-font);
+    font-size: var(--sealpixel-font-size);
+    color: var(--sealpixel-color-fg);
+    -webkit-font-smoothing: antialiased;
+  }
+  :focus-visible {
+    outline: 2px solid var(--sealpixel-color-focus);
+    outline-offset: 2px;
+  }
+  /*
+   * The author-level "important" here also beats the inline transforms the
+   * stage writes, so a reduced-motion view jumps to its target and never
+   * glides.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      transition: none !important;
+      animation: none !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+`;
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC;AAEF,8CAA8C;AAC9C,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCtB,CAAC"}

package/dist/tool.d.ts

@@ -0,0 +1,70 @@
+import type { AnyPlugin, Document, EditorSession, Geometry, Operation, SessionState } from '@sealpixel/core';
+import type { TemplateResult } from 'lit';
+import type { I18n } from './i18n.js';
+/** Live view of the stage the tool draws onto. Image coordinates are preview pixels. */
+export interface StageInfo {
+    width: number;
+    height: number;
+    zoom: number;
+    geometry: Geometry | null;
+    /** Converts a client (viewport) point into preview image pixels. */
+    toImage: (clientX: number, clientY: number) => {
+        x: number;
+        y: number;
+    };
+}
+export interface UiToolContext {
+    session: EditorSession;
+    state: SessionState;
+    document: Document;
+    dispatch: (op: Operation) => void;
+    t: I18n['t'];
+    stage: StageInfo;
+    /**
+     * Tier-A preview: apply a cheap CSS approximation to the stage while the
+     * user drags. Cleared automatically when the next real preview lands.
+     */
+    hint: (hint: {
+        filter?: string;
+        transform?: string;
+    } | null) => void;
+    /** Ask the host to re-render (for transient tool state). */
+    refresh: () => void;
+    /**
+     * Asks the stage to animate the next preview into place instead of cutting
+     * to it. For a tool whose whole job was to change the framing, the movement
+     * is the only thing that tells the user the change landed. A gesture that
+     * arrives first cancels it.
+     */
+    animateNextView: () => void;
+    /**
+     * Clips the preview on the stage to a CSS shape, or clears it with null.
+     * Crop uses it to show its result: clipping takes the removed pixels away,
+     * so the stage's own backdrop runs through the gap instead of a painted
+     * rectangle standing in for it.
+     */
+    clipPreview: (clip: string | null) => void;
+    /**
+     * `narrow` below 48rem (phones): the panel is a bottom sheet with little
+     * height, so tools should show one control at a time. `wide` otherwise.
+     */
+    layout: 'wide' | 'narrow';
+    /** The resolved options of a registered plugin; undefined when it has none. */
+    options: <T>(pluginId: string) => T | undefined;
+}
+export interface UiTool {
+    /** Plugin id this tool belongs to. */
+    id: string;
+    icon: TemplateResult | string;
+    /** i18n key. */
+    label: string;
+    panel: (ctx: UiToolContext) => TemplateResult;
+    /** SVG content rendered inside the stage overlay, in image pixel coordinates. */
+    overlay?: (ctx: UiToolContext) => TemplateResult;
+    /** Called when the tool becomes active or inactive. */
+    activate?: (ctx: UiToolContext) => void;
+    deactivate?: (ctx: UiToolContext) => void;
+    shortcuts?: Record<string, (ctx: UiToolContext) => void>;
+}
+export type ToolFactory = (plugin: AnyPlugin) => UiTool;
+//# sourceMappingURL=tool.d.ts.map

package/dist/tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../src/tool.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,YAAY,EACb,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtC,wFAAwF;AACxF,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,oEAAoE;IACpE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzE;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,IAAI,CAAC;IAClC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,IAAI,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrE,4DAA4D;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,+EAA+E;IAC/E,OAAO,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,CAAC;CACjD;AAED,MAAM,WAAW,MAAM;IACrB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,cAAc,CAAC;IAC9C,iFAAiF;IACjF,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,cAAc,CAAC;IACjD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC,CAAC;CAC1D;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,SAAS,KAAK,MAAM,CAAC"}

package/dist/tool.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tool.js.map

package/dist/tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.js","sourceRoot":"","sources":["../src/tool.ts"],"names":[],"mappings":""}

package/dist/tools/annotate.d.ts

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

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

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