@sealpixel/svelte 1.0.0-rc.0

package/README.md

@@ -0,0 +1,5 @@
+# @sealpixel/svelte
+
+```svelte
+<SealpixelEditor {src} bind:editLog={log} onprocess={(r) => console.log(r.hash)} />
+```

package/dist/store.d.ts

@@ -0,0 +1,11 @@
+import { type EditorSession, type SessionOptions, type SessionState } from '@sealpixel/core';
+/**
+ * Headless use in Svelte 5: a store-contract object (`subscribe`) plus the
+ * session. Works with `$store` auto-subscription and with runes via
+ * `fromStore`. Call `dispose()` in `onDestroy`.
+ */
+export declare function createSealpixelStore(options: SessionOptions): {
+    session: EditorSession;
+    subscribe: (run: (state: SessionState) => void) => () => void;
+    dispose: () => void;
+};

package/dist/store.js

@@ -0,0 +1,18 @@
+import { createEditorSession, } from '@sealpixel/core';
+/**
+ * Headless use in Svelte 5: a store-contract object (`subscribe`) plus the
+ * session. Works with `$store` auto-subscription and with runes via
+ * `fromStore`. Call `dispose()` in `onDestroy`.
+ */
+export function createSealpixelStore(options) {
+    const session = createEditorSession(options);
+    return {
+        session,
+        subscribe(run) {
+            run(session.getState());
+            return session.subscribe(run);
+        },
+        dispose: () => session.dispose(),
+    };
+}
+//# sourceMappingURL=store.js.map

package/dist/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,GAIpB,MAAM,iBAAiB,CAAC;AAEzB;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAAuB;IAK1D,MAAM,OAAO,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO;QACL,OAAO;QACP,SAAS,CAAC,GAAG;YACX,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;YACxB,OAAO,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE;KACjC,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@sealpixel/svelte",
+  "version": "1.0.0-rc.0",
+  "description": "Svelte 5 bindings for the Sealpixel image editor: <SealpixelEditor> with a bindable editLog and createSealpixelStore for headless use.",
+  "license": "BUSL-1.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/9feet/sealpixel.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://docs.sealpixel.dev",
+  "bugs": "https://github.com/9feet/sealpixel/issues",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "svelte": "./src/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "svelte": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings"
+  },
+  "dependencies": {
+    "@sealpixel/core": "workspace:*",
+    "@sealpixel/element": "workspace:*",
+    "@sealpixel/ui": "workspace:*"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sealpixel/config": "workspace:*",
+    "@types/node": "^24.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.9.0"
+  }
+}

package/src/SealpixelEditor.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+import '@sealpixel/element';
+import type {
+  AnyPlugin,
+  AssetResolver,
+  ExportResult,
+  OutputOptions,
+  PluginOptionsMap,
+  Renderer,
+  SealpixelError,
+  SessionOptions,
+  SourceDescriptor,
+} from '@sealpixel/core';
+import type { SealpixelEditor as SealpixelEditorElement } from '@sealpixel/element';
+
+interface EditLogState {
+  log: unknown;
+  index: number;
+}
+
+let {
+  src = null,
+  editLog = $bindable(undefined),
+  defaultEditLog = undefined,
+  plugins = null,
+  pluginOptions = null,
+  renderer = null,
+  assets = null,
+  server = null,
+  output = { format: 'image/png' },
+  theme = 'dark',
+  locale = 'en',
+  dictionary = null,
+  activeTool = null,
+  showExport = 'auto',
+  showDownload = 'always',
+  showHistory = 'all',
+  downloadLabel = null,
+  onprocess,
+  onerror,
+  onload,
+  onready,
+  class: className = '',
+  style = '',
+}: {
+  src?: File | Blob | Uint8Array | string | null;
+  editLog?: EditLogState | undefined;
+  defaultEditLog?: EditLogState | undefined;
+  plugins?: readonly AnyPlugin[] | null;
+  pluginOptions?: PluginOptionsMap | null;
+  renderer?: Renderer | null;
+  assets?: AssetResolver | null;
+  server?: SessionOptions['server'] | null;
+  output?: OutputOptions;
+  theme?: 'dark' | 'light' | 'auto';
+  locale?: string;
+  dictionary?: Record<string, string> | null;
+  activeTool?: string | null;
+  showExport?: 'auto' | 'always' | 'never';
+  showDownload?: 'always' | 'never';
+  showHistory?: 'all' | 'buttons' | 'none';
+  downloadLabel?: string | null;
+  onprocess?: (result: ExportResult) => void;
+  onerror?: (error: SealpixelError) => void;
+  onload?: (descriptor: SourceDescriptor) => void;
+  onready?: () => void;
+  class?: string;
+  style?: string;
+} = $props();
+
+let el: SealpixelEditorElement | undefined = $state();
+
+export function getSession() {
+  return el?.getSession();
+}
+export function getEditLog() {
+  return el?.getEditLog();
+}
+export function undo() {
+  el?.undo();
+}
+export function redo() {
+  el?.redo();
+}
+export function download(options?: Parameters<SealpixelEditorElement['download']>[0]) {
+  return el?.download(options);
+}
+
+// Property assignments: custom-element properties are objects, not attributes.
+$effect(() => {
+  if (!el) return;
+  el.plugins = plugins;
+  el.pluginOptions = pluginOptions;
+  el.renderer = renderer;
+  el.assets = assets;
+  el.server = server;
+  el.output = output;
+  el.locale = locale;
+  el.dictionary = dictionary;
+  el.activeTool = activeTool;
+  el.setAttribute('show-export', showExport);
+  el.setAttribute('show-download', showDownload);
+  el.setAttribute('show-history', showHistory);
+  if (downloadLabel === null) el.removeAttribute('download-label');
+  else el.setAttribute('download-label', downloadLabel);
+  el.defaultEditLog = defaultEditLog;
+});
+$effect(() => {
+  if (el) el.src = src;
+});
+$effect(() => {
+  if (el && editLog !== undefined) el.editLog = editLog;
+});
+// Custom event names contain a colon, which Svelte attributes cannot express.
+$effect(() => {
+  const node = el;
+  if (!node) return;
+  const onChange = (e: Event) => {
+    editLog = (e as CustomEvent<EditLogState>).detail;
+  };
+  const onProcess = (e: Event) => onprocess?.((e as CustomEvent<ExportResult>).detail);
+  const onError = (e: Event) => onerror?.((e as CustomEvent<SealpixelError>).detail);
+  const onLoad = (e: Event) => onload?.((e as CustomEvent<SourceDescriptor>).detail);
+  const onReady = () => onready?.();
+  node.addEventListener('sealpixel:change', onChange);
+  // Only attach when the host handles results: the editor shows Export while someone listens.
+  if (onprocess) node.addEventListener('sealpixel:process', onProcess);
+  node.addEventListener('sealpixel:error', onError);
+  node.addEventListener('sealpixel:load', onLoad);
+  node.addEventListener('sealpixel:ready', onReady);
+  return () => {
+    node.removeEventListener('sealpixel:change', onChange);
+    if (onprocess) node.removeEventListener('sealpixel:process', onProcess);
+    node.removeEventListener('sealpixel:error', onError);
+    node.removeEventListener('sealpixel:load', onLoad);
+    node.removeEventListener('sealpixel:ready', onReady);
+  };
+});
+</script>
+
+<sealpixel-editor bind:this={el} {theme} class={className} {style}></sealpixel-editor>

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export { createSealpixelStore } from '../dist/store.js';
+export { default as SealpixelEditor } from './SealpixelEditor.svelte';

package/src/index.js

@@ -0,0 +1,2 @@
+export { createSealpixelStore } from '../dist/store.js';
+export { default as SealpixelEditor } from './SealpixelEditor.svelte';

package/src/store.ts

@@ -0,0 +1,27 @@
+import {
+  createEditorSession,
+  type EditorSession,
+  type SessionOptions,
+  type SessionState,
+} from '@sealpixel/core';
+
+/**
+ * Headless use in Svelte 5: a store-contract object (`subscribe`) plus the
+ * session. Works with `$store` auto-subscription and with runes via
+ * `fromStore`. Call `dispose()` in `onDestroy`.
+ */
+export function createSealpixelStore(options: SessionOptions): {
+  session: EditorSession;
+  subscribe: (run: (state: SessionState) => void) => () => void;
+  dispose: () => void;
+} {
+  const session = createEditorSession(options);
+  return {
+    session,
+    subscribe(run) {
+      run(session.getState());
+      return session.subscribe(run);
+    },
+    dispose: () => session.dispose(),
+  };
+}