triiiceratops 0.9.12 → 0.10.0

package/dist/plugins/image-manipulation/ImageManipulationController.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    import {
+        VIEWER_STATE_KEY,
+        type ViewerState,
+    } from '../../state/viewer.svelte';
+    import { DEFAULT_FILTERS, type ImageFilters } from './types';
+    import { applyFilters } from './filters';
+    import ImageManipulationPanel from './ImageManipulationPanel.svelte';
+
+    // Props from the plugin system
+    let { isOpen = false, close } = $props();
+
+    const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
+    let filters = $state<ImageFilters>({ ...DEFAULT_FILTERS });
+
+    // React to filter changes and apply to OSD
+    $effect(() => {
+        if (viewerState?.osdViewer) {
+            applyFilters(viewerState.osdViewer, filters);
+        }
+    });
+
+    // Reset filters when a new image is opened (canvas change)
+    let lastCanvasId = $state(viewerState?.canvasId);
+    $effect(() => {
+        if (viewerState?.canvasId !== lastCanvasId) {
+            lastCanvasId = viewerState?.canvasId;
+            filters = { ...DEFAULT_FILTERS };
+        }
+    });
+
+    function handleFilterChange(newFilters: ImageFilters) {
+        filters = newFilters;
+    }
+
+    function handleReset() {
+        filters = { ...DEFAULT_FILTERS };
+    }
+</script>
+
+<!--
+    We render the generic panel, passing our state and handlers.
+    The controller is responsible for the "Smart" logic (applying filters to OSD),
+    while the panel handles the UI.
+-->
+<div class="h-full">
+    <ImageManipulationPanel
+        {filters}
+        onFilterChange={handleFilterChange}
+        onReset={handleReset}
+        onClose={close}
+    />
+</div>

package/dist/plugins/image-manipulation/ImageManipulationController.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const ImageManipulationController: import("svelte").Component<{
+    isOpen?: boolean;
+    close: any;
+}, {}, "">;
+type ImageManipulationController = ReturnType<typeof ImageManipulationController>;
+export default ImageManipulationController;

package/dist/plugins/image-manipulation/ImageManipulationPanel.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import X from 'phosphor-svelte/lib/X';
     import ArrowCounterClockwise from 'phosphor-svelte/lib/ArrowCounterClockwise';
+    import { setLocale, locales } from '../../paraglide/runtime';
+    import * as m from '../../paraglide/messages';
     import type { ImageFilters } from './types';
 
     let {
@@ -8,11 +10,13 @@
         onFilterChange,
         onReset,
         onClose,
+        locale,
     }: {
         filters: ImageFilters;
         onFilterChange: (filters: ImageFilters) => void;
         onReset: () => void;
         onClose: () => void;
+        locale?: string;
     } = $props();
 
     function updateFilter<K extends keyof ImageFilters>(
@@ -21,6 +25,12 @@
     ) {
         onFilterChange({ ...filters, [key]: value });
     }
+
+    $effect(() => {
+        if (locale && locales.includes(locale as any)) {
+            setLocale(locale as any);
+        }
+    });
 </script>
 
 <div
@@ -28,11 +38,11 @@
 >
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b border-base-300">
-        <h2 class="text-lg font-semibold">Image Adjustments</h2>
+        <h2 class="text-lg font-semibold">{m.image_adjustments_title()}</h2>
         <button
             class="btn btn-sm btn-ghost btn-circle"
             onclick={onClose}
-            aria-label="Close panel"
+            aria-label={m.close()}
         >
             <X size={20} />
         </button>
@@ -43,7 +53,7 @@
         <!-- Brightness -->
         <div class="form-control">
             <label class="label" for="brightness-slider">
-                <span class="label-text">Brightness</span>
+                <span class="label-text">{m.image_filters_brightness()}</span>
                 <span class="label-text-alt">{filters.brightness}%</span>
             </label>
             <input
@@ -61,7 +71,7 @@
         <!-- Contrast -->
         <div class="form-control">
             <label class="label" for="contrast-slider">
-                <span class="label-text">Contrast</span>
+                <span class="label-text">{m.image_filters_contrast()}</span>
                 <span class="label-text-alt">{filters.contrast}%</span>
             </label>
             <input
@@ -79,7 +89,7 @@
         <!-- Saturation -->
         <div class="form-control">
             <label class="label" for="saturation-slider">
-                <span class="label-text">Saturation</span>
+                <span class="label-text">{m.image_filters_saturation()}</span>
                 <span class="label-text-alt">{filters.saturation}%</span>
             </label>
             <input
@@ -95,11 +105,11 @@
         </div>
 
         <!-- Effects -->
-        <div class="divider">Effects</div>
+        <div class="divider">{m.image_filters_effects()}</div>
 
         <div class="form-control">
             <label class="label cursor-pointer">
-                <span class="label-text">Invert Colors</span>
+                <span class="label-text">{m.image_filters_invert()}</span>
                 <input
                     type="checkbox"
                     checked={filters.invert}
@@ -112,7 +122,7 @@
 
         <div class="form-control">
             <label class="label cursor-pointer">
-                <span class="label-text">Grayscale</span>
+                <span class="label-text">{m.image_filters_grayscale()}</span>
                 <input
                     type="checkbox"
                     checked={filters.grayscale}
@@ -128,7 +138,7 @@
     <div class="p-4 border-t border-base-300">
         <button class="btn btn-outline btn-block" onclick={onReset}>
             <ArrowCounterClockwise size={20} />
-            Reset to Default
+            {m.image_filters_reset()}
         </button>
     </div>
 </div>

package/dist/plugins/image-manipulation/ImageManipulationPanel.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     onFilterChange: (filters: ImageFilters) => void;
     onReset: () => void;
     onClose: () => void;
+    locale?: string;
 };
 declare const ImageManipulationPanel: import("svelte").Component<$$ComponentProps, {}, "">;
 type ImageManipulationPanel = ReturnType<typeof ImageManipulationPanel>;

package/dist/plugins/image-manipulation/iife-entry.d.ts

@@ -0,0 +1,13 @@
+/**
+ * IIFE entry point for the Image Manipulation plugin.
+ * This file is used to build a standalone script that can be loaded via <script> tag.
+ *
+ * Usage:
+ * <script src="triiiceratops-element.iife.js"></script>
+ * <script src="triiiceratops-plugin-image-manipulation.iife.js"></script>
+ * <script>
+ *   const viewer = document.querySelector('triiiceratops-viewer');
+ *   viewer.plugins = [window.TriiiceratopsPlugins.ImageManipulation];
+ * </script>
+ */
+export {};

package/dist/plugins/image-manipulation/iife-entry.js

@@ -0,0 +1,17 @@
+/**
+ * IIFE entry point for the Image Manipulation plugin.
+ * This file is used to build a standalone script that can be loaded via <script> tag.
+ *
+ * Usage:
+ * <script src="triiiceratops-element.iife.js"></script>
+ * <script src="triiiceratops-plugin-image-manipulation.iife.js"></script>
+ * <script>
+ *   const viewer = document.querySelector('triiiceratops-viewer');
+ *   viewer.plugins = [window.TriiiceratopsPlugins.ImageManipulation];
+ * </script>
+ */
+import { ImageManipulationPlugin } from './index';
+// Ensure the namespace exists (should already be created by the element script)
+window.TriiiceratopsPlugins = window.TriiiceratopsPlugins || {};
+// Register the plugin
+window.TriiiceratopsPlugins.ImageManipulation = ImageManipulationPlugin;

package/dist/plugins/image-manipulation/index.d.ts

@@ -1,3 +1,17 @@
-export { ImageManipulationPlugin } from './ImageManipulationPlugin.svelte';
+import type { PluginDef } from '../../types/plugin';
+import ImageManipulationController from './ImageManipulationController.svelte';
+import SlidersIcon from 'phosphor-svelte/lib/Sliders';
+/**
+ * Pre-configured Image Manipulation plugin.
+ *
+ * Usage:
+ * ```svelte
+ * import { ImageManipulationPlugin } from 'triiiceratops/plugins/image-manipulation';
+ *
+ * <TriiiceratopsViewer plugins={[ImageManipulationPlugin]} />
+ * ```
+ */
+export declare const ImageManipulationPlugin: PluginDef;
+export { ImageManipulationController, SlidersIcon };
 export type { ImageFilters } from './types';
 export { DEFAULT_FILTERS } from './types';

package/dist/plugins/image-manipulation/index.js

@@ -1,2 +1,22 @@
-export { ImageManipulationPlugin } from './ImageManipulationPlugin.svelte';
+import ImageManipulationController from './ImageManipulationController.svelte';
+import SlidersIcon from 'phosphor-svelte/lib/Sliders';
+/**
+ * Pre-configured Image Manipulation plugin.
+ *
+ * Usage:
+ * ```svelte
+ * import { ImageManipulationPlugin } from 'triiiceratops/plugins/image-manipulation';
+ *
+ * <TriiiceratopsViewer plugins={[ImageManipulationPlugin]} />
+ * ```
+ */
+export const ImageManipulationPlugin = {
+    id: 'image-manipulation',
+    name: 'image_adjustments_title',
+    icon: SlidersIcon,
+    panel: ImageManipulationController,
+    position: 'left',
+};
+// Individual exports for customization
+export { ImageManipulationController, SlidersIcon };
 export { DEFAULT_FILTERS } from './types';

package/dist/plugins/image-manipulation.js

@@ -0,0 +1,265 @@
+import "svelte/internal/disclose-version";
+import * as e from "svelte/internal/client";
+import { getContext as s0 } from "svelte";
+import { l as l0, s as i0, X as n0, c as o0, V as c0, g as v0 } from "../X-DZEgXrJ8.js";
+import { A as d0 } from "../ArrowCounterClockwise-aFffCOKw.js";
+import { i as _0, a as g0, b as f0, g as u0, c as h0, e as m0, d as p0, f as b0 } from "../image_filters_reset-BEIf-_QA.js";
+const G = {
+  brightness: 100,
+  contrast: 100,
+  saturation: 100,
+  invert: !1,
+  grayscale: !1
+};
+function V0(b, a) {
+  var l;
+  const t = (l = b.drawer) == null ? void 0 : l.canvas;
+  if (!t) return;
+  const r = [];
+  a.brightness !== 100 && r.push(`brightness(${a.brightness / 100})`), a.contrast !== 100 && r.push(`contrast(${a.contrast / 100})`), a.saturation !== 100 && r.push(`saturate(${a.saturation / 100})`), a.invert && r.push("invert(1)"), a.grayscale && r.push("grayscale(1)"), t.style.filter = r.length > 0 ? r.join(" ") : "none";
+}
+var x0 = e.from_html('<div class="w-72 h-full bg-base-200 border-l border-base-300 shadow-xl flex flex-col"><div class="flex items-center justify-between p-4 border-b border-base-300"><h2 class="text-lg font-semibold"> </h2> <button class="btn btn-sm btn-ghost btn-circle"><!></button></div> <div class="flex-1 overflow-y-auto p-4 space-y-6"><div class="form-control"><label class="label" for="brightness-slider"><span class="label-text"> </span> <span class="label-text-alt"> </span></label> <input id="brightness-slider" type="range" min="0" max="200" class="range range-sm range-primary"/></div> <div class="form-control"><label class="label" for="contrast-slider"><span class="label-text"> </span> <span class="label-text-alt"> </span></label> <input id="contrast-slider" type="range" min="0" max="200" class="range range-sm range-secondary"/></div> <div class="form-control"><label class="label" for="saturation-slider"><span class="label-text"> </span> <span class="label-text-alt"> </span></label> <input id="saturation-slider" type="range" min="0" max="200" class="range range-sm range-accent"/></div> <div class="divider"> </div> <div class="form-control"><label class="label cursor-pointer"><span class="label-text"> </span> <input type="checkbox" class="toggle toggle-primary"/></label></div> <div class="form-control"><label class="label cursor-pointer"><span class="label-text"> </span> <input type="checkbox" class="toggle toggle-secondary"/></label></div></div> <div class="p-4 border-t border-base-300"><button class="btn btn-outline btn-block"><!> </button></div></div>');
+function Z0(b, a) {
+  e.push(a, !0);
+  function t(s, u) {
+    a.onFilterChange({ ...a.filters, [s]: u });
+  }
+  e.user_effect(() => {
+    a.locale && l0.includes(a.locale) && i0(a.locale);
+  });
+  var r = x0(), l = e.child(r), V = e.child(l), Z = e.child(V, !0);
+  e.reset(V);
+  var o = e.sibling(V, 2);
+  o.__click = function(...s) {
+    var u;
+    (u = a.onClose) == null || u.apply(this, s);
+  };
+  var A = e.child(o);
+  n0(A, { size: 20 }), e.reset(o), e.reset(l);
+  var c = e.sibling(l, 2), y = e.child(c), I = e.child(y), T = e.child(I), D = e.child(T, !0);
+  e.reset(T);
+  var j = e.sibling(T, 2), i = e.child(j);
+  e.reset(j), e.reset(I);
+  var n = e.sibling(I, 2);
+  e.remove_input_defaults(n), n.__input = (s) => t("brightness", +s.currentTarget.value), e.reset(y);
+  var h = e.sibling(y, 2), M = e.child(h), w = e.child(M), v = e.child(w, !0);
+  e.reset(w);
+  var x = e.sibling(w, 2), K = e.child(x);
+  e.reset(x), e.reset(M);
+  var F = e.sibling(M, 2);
+  e.remove_input_defaults(F), F.__input = (s) => t("contrast", +s.currentTarget.value), e.reset(h);
+  var z = e.sibling(h, 2), d = e.child(z), m = e.child(d), O = e.child(m, !0);
+  e.reset(m);
+  var L = e.sibling(m, 2), W = e.child(L);
+  e.reset(L), e.reset(d);
+  var _ = e.sibling(d, 2);
+  e.remove_input_defaults(_), _.__input = (s) => t("saturation", +s.currentTarget.value), e.reset(z);
+  var p = e.sibling(z, 2), X = e.child(p, !0);
+  e.reset(p);
+  var E = e.sibling(p, 2), P = e.child(E), g = e.child(P), C = e.child(g, !0);
+  e.reset(g);
+  var R = e.sibling(g, 2);
+  e.remove_input_defaults(R), R.__change = (s) => t("invert", s.currentTarget.checked), e.reset(P), e.reset(E);
+  var U = e.sibling(E, 2), B = e.child(U), f = e.child(B), k = e.child(f, !0);
+  e.reset(f);
+  var Y = e.sibling(f, 2);
+  e.remove_input_defaults(Y), Y.__change = (s) => t("grayscale", s.currentTarget.checked), e.reset(B), e.reset(U), e.reset(c);
+  var H = e.sibling(c, 2), q = e.child(H);
+  q.__click = function(...s) {
+    var u;
+    (u = a.onReset) == null || u.apply(this, s);
+  };
+  var J = e.child(q);
+  d0(J, { size: 20 });
+  var N = e.sibling(J);
+  e.reset(q), e.reset(H), e.reset(r), e.template_effect(
+    (s, u, Q, S, $, e0, a0, t0, r0) => {
+      e.set_text(Z, s), e.set_attribute(o, "aria-label", u), e.set_text(D, Q), e.set_text(i, `${a.filters.brightness ?? ""}%`), e.set_value(n, a.filters.brightness), e.set_text(v, S), e.set_text(K, `${a.filters.contrast ?? ""}%`), e.set_value(F, a.filters.contrast), e.set_text(O, $), e.set_text(W, `${a.filters.saturation ?? ""}%`), e.set_value(_, a.filters.saturation), e.set_text(X, e0), e.set_text(C, a0), e.set_checked(R, a.filters.invert), e.set_text(k, t0), e.set_checked(Y, a.filters.grayscale), e.set_text(N, ` ${r0 ?? ""}`);
+    },
+    [
+      () => _0(),
+      () => o0(),
+      () => g0(),
+      () => f0(),
+      () => u0(),
+      () => h0(),
+      () => m0(),
+      () => p0(),
+      () => b0()
+    ]
+  ), e.append(b, r), e.pop();
+}
+e.delegate(["click", "input", "change"]);
+var A0 = e.from_html('<div class="h-full"><!></div>');
+function y0(b, a) {
+  e.push(a, !0), e.prop(a, "isOpen", 3, !1);
+  const t = s0(c0);
+  let r = e.state(e.proxy({ ...G }));
+  e.user_effect(() => {
+    t != null && t.osdViewer && V0(t.osdViewer, e.get(r));
+  });
+  let l = e.state(e.proxy(t == null ? void 0 : t.canvasId));
+  e.user_effect(() => {
+    (t == null ? void 0 : t.canvasId) !== e.get(l) && (e.set(l, t == null ? void 0 : t.canvasId, !0), e.set(r, { ...G }, !0));
+  });
+  function V(c) {
+    e.set(r, c, !0);
+  }
+  function Z() {
+    e.set(r, { ...G }, !0);
+  }
+  var o = A0(), A = e.child(o);
+  Z0(A, {
+    get filters() {
+      return e.get(r);
+    },
+    onFilterChange: V,
+    onReset: Z,
+    get onClose() {
+      return a.close;
+    }
+  }), e.reset(o), e.append(b, o), e.pop();
+}
+var M0 = e.from_svg('<path d="M68,102.06V40a12,12,0,0,0-24,0v62.06a36,36,0,0,0,0,67.88V216a12,12,0,0,0,24,0V169.94a36,36,0,0,0,0-67.88ZM56,148a12,12,0,1,1,12-12A12,12,0,0,1,56,148ZM164,88a36.07,36.07,0,0,0-24-33.94V40a12,12,0,0,0-24,0V54.06a36,36,0,0,0,0,67.88V216a12,12,0,0,0,24,0V121.94A36.07,36.07,0,0,0,164,88Zm-36,12a12,12,0,1,1,12-12A12,12,0,0,1,128,100Zm108,68a36.07,36.07,0,0,0-24-33.94V40a12,12,0,0,0-24,0v94.06a36,36,0,0,0,0,67.88V216a12,12,0,0,0,24,0V201.94A36.07,36.07,0,0,0,236,168Zm-36,12a12,12,0,1,1,12-12A12,12,0,0,1,200,180Z"></path>'), w0 = e.from_svg('<path d="M80,136a24,24,0,1,1-24-24A24,24,0,0,1,80,136Zm48-72a24,24,0,1,0,24,24A24,24,0,0,0,128,64Zm72,80a24,24,0,1,0,24,24A24,24,0,0,0,200,144Z" opacity="0.2"></path><path d="M64,105V40a8,8,0,0,0-16,0v65a32,32,0,0,0,0,62v49a8,8,0,0,0,16,0V167a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,56,152Zm80-95V40a8,8,0,0,0-16,0V57a32,32,0,0,0,0,62v97a8,8,0,0,0,16,0V119a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,128,104Zm104,64a32.06,32.06,0,0,0-24-31V40a8,8,0,0,0-16,0v97a32,32,0,0,0,0,62v17a8,8,0,0,0,16,0V199A32.06,32.06,0,0,0,232,168Zm-32,16a16,16,0,1,1,16-16A16,16,0,0,1,200,184Z"></path>', 1), C0 = e.from_svg('<path d="M84,136a28,28,0,0,1-20,26.83V216a8,8,0,0,1-16,0V162.83a28,28,0,0,1,0-53.66V40a8,8,0,0,1,16,0v69.17A28,28,0,0,1,84,136Zm52-74.83V40a8,8,0,0,0-16,0V61.17a28,28,0,0,0,0,53.66V216a8,8,0,0,0,16,0V114.83a28,28,0,0,0,0-53.66Zm72,80V40a8,8,0,0,0-16,0V141.17a28,28,0,0,0,0,53.66V216a8,8,0,0,0,16,0V194.83a28,28,0,0,0,0-53.66Z"></path>'), k0 = e.from_svg('<path d="M62,106.6V40a6,6,0,0,0-12,0v66.6a30,30,0,0,0,0,58.8V216a6,6,0,0,0,12,0V165.4a30,30,0,0,0,0-58.8ZM56,154a18,18,0,1,1,18-18A18,18,0,0,1,56,154Zm78-95.4V40a6,6,0,0,0-12,0V58.6a30,30,0,0,0,0,58.8V216a6,6,0,0,0,12,0V117.4a30,30,0,0,0,0-58.8ZM128,106a18,18,0,1,1,18-18A18,18,0,0,1,128,106Zm102,62a30.05,30.05,0,0,0-24-29.4V40a6,6,0,0,0-12,0v98.6a30,30,0,0,0,0,58.8V216a6,6,0,0,0,12,0V197.4A30.05,30.05,0,0,0,230,168Zm-30,18a18,18,0,1,1,18-18A18,18,0,0,1,200,186Z"></path>'), I0 = e.from_svg('<path d="M64,105V40a8,8,0,0,0-16,0v65a32,32,0,0,0,0,62v49a8,8,0,0,0,16,0V167a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,56,152Zm80-95V40a8,8,0,0,0-16,0V57a32,32,0,0,0,0,62v97a8,8,0,0,0,16,0V119a32,32,0,0,0,0-62Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,128,104Zm104,64a32.06,32.06,0,0,0-24-31V40a8,8,0,0,0-16,0v97a32,32,0,0,0,0,62v17a8,8,0,0,0,16,0V199A32.06,32.06,0,0,0,232,168Zm-32,16a16,16,0,1,1,16-16A16,16,0,0,1,200,184Z"></path>'), T0 = e.from_svg('<path d="M60,108.29V40a4,4,0,0,0-8,0v68.29a28,28,0,0,0,0,55.42V216a4,4,0,0,0,8,0V163.71a28,28,0,0,0,0-55.42ZM56,156a20,20,0,1,1,20-20A20,20,0,0,1,56,156Zm76-95.71V40a4,4,0,0,0-8,0V60.29a28,28,0,0,0,0,55.42V216a4,4,0,0,0,8,0V115.71a28,28,0,0,0,0-55.42ZM128,108a20,20,0,1,1,20-20A20,20,0,0,1,128,108Zm100,60a28,28,0,0,0-24-27.71V40a4,4,0,0,0-8,0V140.29a28,28,0,0,0,0,55.42V216a4,4,0,0,0,8,0V195.71A28,28,0,0,0,228,168Zm-28,20a20,20,0,1,1,20-20A20,20,0,0,1,200,188Z"></path>'), F0 = e.from_svg('<svg><!><rect width="256" height="256" fill="none"></rect><!></svg>');
+function z0(b, a) {
+  e.push(a, !0);
+  const t = v0();
+  let r = e.rest_props(a, ["$$slots", "$$events", "$$legacy", "children"]), l = e.derived(() => a.weight ?? t.weight ?? "regular"), V = e.derived(() => a.color ?? t.color ?? "currentColor"), Z = e.derived(() => a.size ?? t.size ?? "1em"), o = e.derived(() => a.mirrored ?? t.mirrored ?? !1);
+  function A(i) {
+    let { weight: n, color: h, size: M, mirrored: w, ...v } = i;
+    return v;
+  }
+  var c = F0();
+  e.attribute_effect(
+    c,
+    (i, n) => ({
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      width: e.get(Z),
+      height: e.get(Z),
+      fill: e.get(V),
+      transform: e.get(o) ? "scale(-1, 1)" : void 0,
+      viewBox: "0 0 256 256",
+      ...i,
+      ...n
+    }),
+    [() => A(t), () => A(r)]
+  );
+  var y = e.child(c);
+  {
+    var I = (i) => {
+      var n = e.comment(), h = e.first_child(n);
+      e.snippet(h, () => a.children), e.append(i, n);
+    };
+    e.if(y, (i) => {
+      a.children && i(I);
+    });
+  }
+  var T = e.sibling(y, 2);
+  {
+    var D = (i) => {
+      var n = M0();
+      e.append(i, n);
+    }, j = (i) => {
+      var n = e.comment(), h = e.first_child(n);
+      {
+        var M = (v) => {
+          var x = w0();
+          e.next(), e.append(v, x);
+        }, w = (v) => {
+          var x = e.comment(), K = e.first_child(x);
+          {
+            var F = (d) => {
+              var m = C0();
+              e.append(d, m);
+            }, z = (d) => {
+              var m = e.comment(), O = e.first_child(m);
+              {
+                var L = (_) => {
+                  var p = k0();
+                  e.append(_, p);
+                }, W = (_) => {
+                  var p = e.comment(), X = e.first_child(p);
+                  {
+                    var E = (g) => {
+                      var C = I0();
+                      e.append(g, C);
+                    }, P = (g) => {
+                      var C = e.comment(), R = e.first_child(C);
+                      {
+                        var U = (f) => {
+                          var k = T0();
+                          e.append(f, k);
+                        }, B = (f) => {
+                          var k = e.text();
+                          k.nodeValue = (console.error('Unsupported icon weight. Choose from "thin", "light", "regular", "bold", "fill", or "duotone".'), ""), e.append(f, k);
+                        };
+                        e.if(
+                          R,
+                          (f) => {
+                            e.get(l) === "thin" ? f(U) : f(B, !1);
+                          },
+                          !0
+                        );
+                      }
+                      e.append(g, C);
+                    };
+                    e.if(
+                      X,
+                      (g) => {
+                        e.get(l) === "regular" ? g(E) : g(P, !1);
+                      },
+                      !0
+                    );
+                  }
+                  e.append(_, p);
+                };
+                e.if(
+                  O,
+                  (_) => {
+                    e.get(l) === "light" ? _(L) : _(W, !1);
+                  },
+                  !0
+                );
+              }
+              e.append(d, m);
+            };
+            e.if(
+              K,
+              (d) => {
+                e.get(l) === "fill" ? d(F) : d(z, !1);
+              },
+              !0
+            );
+          }
+          e.append(v, x);
+        };
+        e.if(
+          h,
+          (v) => {
+            e.get(l) === "duotone" ? v(M) : v(w, !1);
+          },
+          !0
+        );
+      }
+      e.append(i, n);
+    };
+    e.if(T, (i) => {
+      e.get(l) === "bold" ? i(D) : i(j, !1);
+    });
+  }
+  e.reset(c), e.append(b, c), e.pop();
+}
+const U0 = {
+  id: "image-manipulation",
+  name: "image_adjustments_title",
+  icon: z0,
+  panel: y0,
+  position: "left"
+};
+export {
+  G as DEFAULT_FILTERS,
+  y0 as ImageManipulationController,
+  U0 as ImageManipulationPlugin,
+  z0 as SlidersIcon
+};

package/dist/state/i18n.svelte.js

@@ -3,10 +3,12 @@
 export { m } from '../paraglide/messages.js';
 import { getLocale, setLocale as baseSetLocale, overwriteSetLocale, } from '../paraglide/runtime.js';
 // For SSR compatibility, we use a simple variable instead of $state()
-let currentLocale = getLocale();
+let currentLocale = $state(getLocale());
+// Capture the original setLocale before overwriting it
+const originalSetLocale = baseSetLocale;
 // Wrap setLocale to track locale changes
 overwriteSetLocale((newLocale, options) => {
-    baseSetLocale(newLocale, options);
+    originalSetLocale(newLocale, options);
     currentLocale = getLocale();
 });
 export const language = {

package/dist/state/manifests.svelte.d.ts

@@ -6,7 +6,12 @@ interface ManifestEntry {
 }
 export declare class ManifestsState {
     manifests: Record<string, ManifestEntry>;
+    userAnnotations: Map<string, any[]>;
     constructor();
+    private userAnnotationKey;
+    setUserAnnotations(manifestId: string, canvasId: string, annotations: any[]): void;
+    clearUserAnnotations(manifestId: string, canvasId: string): void;
+    getUserAnnotations(manifestId: string, canvasId: string): any[];
     fetchManifest(manifestId: string): Promise<void>;
     getManifest(manifestId: string): any;
     fetchAnnotationList(url: string): Promise<void>;

package/dist/state/manifests.svelte.js

@@ -1,7 +1,33 @@
-import * as manifesto from "manifesto.js";
+import * as manifesto from 'manifesto.js';
 export class ManifestsState {
     manifests = $state({});
+    // User-created annotations (from plugins like annotation editor)
+    userAnnotations = $state(new Map());
     constructor() { }
+    // === User Annotations API ===
+    userAnnotationKey(manifestId, canvasId) {
+        return `${manifestId}::${canvasId}`;
+    }
+    setUserAnnotations(manifestId, canvasId, annotations) {
+        const key = this.userAnnotationKey(manifestId, canvasId);
+        // Create a new Map to trigger reactivity
+        const newMap = new Map(this.userAnnotations);
+        newMap.set(key, annotations);
+        this.userAnnotations = newMap;
+    }
+    clearUserAnnotations(manifestId, canvasId) {
+        const key = this.userAnnotationKey(manifestId, canvasId);
+        if (this.userAnnotations.has(key)) {
+            const newMap = new Map(this.userAnnotations);
+            newMap.delete(key);
+            this.userAnnotations = newMap;
+        }
+    }
+    getUserAnnotations(manifestId, canvasId) {
+        const key = this.userAnnotationKey(manifestId, canvasId);
+        return this.userAnnotations.get(key) ?? [];
+    }
+    // === Manifest Fetching ===
     async fetchManifest(manifestId) {
         if (this.manifests[manifestId]) {
             return; // Already fetched or fetching
@@ -21,7 +47,10 @@ export class ManifestsState {
             };
         }
         catch (error) {
-            this.manifests[manifestId] = { error: error.message, isFetching: false };
+            this.manifests[manifestId] = {
+                error: error.message,
+                isFetching: false,
+            };
         }
     }
     getManifest(manifestId) {
@@ -57,21 +86,21 @@ export class ManifestsState {
         return canvases;
     }
     getAnnotations(manifestId, canvasId) {
-        const m = this.getManifest(manifestId);
-        if (!m)
-            return [];
-        const canvas = m.getSequences()[0].getCanvasById(canvasId);
-        if (!canvas)
-            return [];
-        const annos = this.manualGetAnnotations(manifestId, canvasId);
-        return annos;
+        // Get manifest annotations
+        const manifestAnnos = this.manualGetAnnotations(manifestId, canvasId);
+        // Get user-created annotations
+        const userAnnos = this.getUserAnnotations(manifestId, canvasId);
+        // Merge both sources
+        return [...manifestAnnos, ...userAnnos];
     }
     // We can refactor this to use Manifesto's resource handling later if needed.
     manualGetAnnotations(manifestId, canvasId) {
         const manifestoObject = this.getManifest(manifestId);
         if (!manifestoObject)
             return [];
-        const canvas = manifestoObject.getSequences()[0].getCanvasById(canvasId);
+        const canvas = manifestoObject
+            .getSequences()[0]
+            .getCanvasById(canvasId);
         if (!canvas)
             return [];
         // Manifesto wraps the JSON. We can access the underlying JSON via canvas.__jsonld
@@ -87,7 +116,7 @@ export class ManifestsState {
         // IIIF v2 otherContent
         if (canvasJson.otherContent) {
             canvasJson.otherContent.forEach((content) => {
-                const id = content["@id"] || content.id;
+                const id = content['@id'] || content.id;
                 if (id && !content.resources) {
                     const externalList = this.manifests[id];
                     if (externalList) {
@@ -114,7 +143,7 @@ export class ManifestsState {
         // IIIF v3 annotations
         if (canvasJson.annotations) {
             canvasJson.annotations.forEach((content) => {
-                const id = content.id || content["@id"];
+                const id = content.id || content['@id'];
                 if (id && !content.items) {
                     const externalList = this.manifests[id];
                     if (externalList) {