entasis 0.11.0 → 0.12.0

package/dist/components/ImageZoom/imageZoom.lightbox.js

@@ -97,7 +97,8 @@ export class ImageZoomLightbox {
                 plugins: [lgMediumZoom],
                 licenseKey: this.zoom.licenseKey,
                 startAnimationDuration: transitionDuration,
-                escKey: this.zoom.closeOnEscape,
+                // Escape is handled here, so `onOpenChange` can be asked first (see attachEvents).
+                escKey: false,
                 hideScrollbar: this.zoom.lockScroll,
                 margin: Math.max(0, this.zoom.zoomMargin),
                 backgroundColor: this.zoom.backgroundColor,
@@ -124,6 +125,31 @@ export class ImageZoomLightbox {
         this.sync(this.zoom.isOpen);
     }
     attachEvents(root, imageElement) {
+        // A press on the trigger asks `onOpenChange` before LightGallery's own listener on the
+        // trigger opens the zoom; a cancelled press never reaches it.
+        this.addEvent(root, 'click', (event) => {
+            const trigger = this.triggerElement;
+            if (!trigger || !(event.target instanceof Node) || !trigger.contains(event.target))
+                return;
+            if (this.instance?.lgOpened || this.zoom.disabled)
+                return;
+            if (!this.zoom.requestOpenChange(true, { reason: 'trigger-press', event, trigger })) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }, { capture: true });
+        this.addEvent(window, 'keydown', (event) => {
+            const key = event;
+            if (key.key !== 'Escape' || key.defaultPrevented || !this.instance?.lgOpened)
+                return;
+            if (!this.zoom.closeOnEscape)
+                return;
+            // A cancelled Escape is left untouched for whatever handles it next.
+            if (!this.zoom.requestOpenChange(false, { reason: 'escape-key', event }))
+                return;
+            key.preventDefault();
+            this.close();
+        });
         this.addEvent(root, 'lgBeforeOpen', () => {
             this.previousFocus =
                 document.activeElement instanceof HTMLElement
@@ -138,9 +164,9 @@ export class ImageZoomLightbox {
             this.zoom.onAfterClose?.(this.zoom.payload);
         });
         this.addEvent(imageElement, 'load', this.handleImageLoad);
-        const handleScrollIntent = () => {
+        const handleScrollIntent = (event) => {
             if (this.zoom.isOpen && this.zoom.closeOnScroll)
-                this.close();
+                this.zoom.close(event);
         };
         const scrollOptions = { capture: true, passive: true };
         document.addEventListener('scroll', handleScrollIntent, scrollOptions);
@@ -152,14 +178,22 @@ export class ImageZoomLightbox {
             document.removeEventListener('touchmove', handleScrollIntent, scrollOptions);
         });
     }
+    // The medium-zoom layer closes on any click: on the zoomed image (`close-press`) or around it
+    // (`outside-press`, only with `closeOnClickOutside`). The click asks `onOpenChange` first; a
+    // cancelled one, like an outside click that may not close, stops before LightGallery sees it.
     attachOutsideClickPolicy(outer) {
         const handleClick = (event) => {
-            if (this.zoom.closeOnClickOutside)
+            if (!this.instance?.lgOpened)
                 return;
             const target = event.target;
-            if (target instanceof Element && target.closest('.lg-object'))
+            const onImage = target instanceof Element && !!target.closest('.lg-object');
+            if (!onImage && !this.zoom.closeOnClickOutside) {
+                event.stopImmediatePropagation();
                 return;
-            event.stopImmediatePropagation();
+            }
+            const reason = onImage ? 'close-press' : 'outside-press';
+            if (!this.zoom.requestOpenChange(false, { reason, event }))
+                event.stopImmediatePropagation();
         };
         this.addEvent(outer, 'click', handleClick, { capture: true });
     }

package/dist/components/ImageZoom/imageZoom.mcp.d.ts

@@ -1 +1 @@
-export declare const imageZoomDescription = "\n# ImageZoom\n\nImageZoom renders an accessible image trigger powered by LightGallery's Medium Zoom plugin. It\nanimates the source image into a focused full-viewport view while preserving controlled state,\nhigh-resolution sources, slots, focus restoration, and configurable dismissal.\n\n## Usage\n\n```svelte\n<script>\n\timport { ImageZoom } from 'entasis/image-zoom';\n</script>\n\n<ImageZoom\n\tsrc=\"/photos/desk-thumb.jpg\"\n\tzoomSrc=\"/photos/desk.jpg\"\n\tzoomWidth={2400}\n\tzoomHeight={1600}\n\talt=\"Desk setup with a laptop and notebook\"\n/>\n```\n\n## Props\n\n- **src**: string - Thumbnail image source. Optional when the children slot renders an image.\n- **alt**: string - Accessible image text. Optional when the children slot image has alt text.\n- **zoomSrc**: string - Full-size image source. Defaults to `src`.\n- **zoomWidth / zoomHeight**: number - Intrinsic dimensions of `zoomSrc`. Provide both when `zoomSrc` differs from the thumbnail so the origin transition and final image use the same rectangle.\n- **open**: boolean (bindable, default: false) - Controls the zoom layer.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **disabled**: boolean (default: false) - Prevents opening.\n- **width / height / srcset / sizes / loading / decoding** - Forwarded to the thumbnail image.\n- **zoomMargin**: number (default: 40) - Minimum viewport margin around the zoomed image.\n- Zoom animation duration now comes from the `motion` theme slot (default token `slower`); see Motion below.\n- **closeOnClickOutside**: boolean (default: true) - Closes from the backdrop.\n- **closeOnEscape**: boolean (default: true) - Closes on Escape.\n- **closeOnScroll**: boolean (default: true) - Closes on wheel, touch-scroll, page scroll, or nested-container scroll.\n- **lockScroll**: boolean (default: false) - Locks page scroll while open.\n- **buttonLabel**: string (default: \"Zoom image\") - Accessible trigger label.\n- **closeLabel**: string (default: \"Close image zoom\") - Accessible close/backdrop label.\n- **backgroundColor**: string (default: theme background) - CSS color used by the Medium Zoom backdrop.\n- **licenseKey**: string (default: LightGallery evaluation key) - LightGallery license key. A production key is required unless the consuming project is GPLv3-compatible.\n- **showIndicator**: boolean (default: true) - Toggles the thumbnail zoom indicator.\n- **indicatorPosition**: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" (default: \"top-right\") - Corner used for the thumbnail zoom indicator.\n- **class**: string - Additional root classes.\n- **theme**: ImageZoomThemeProps - Per-instance theme overrides.\n- **onOpenChange**: (open: boolean) => void - Fired once when the library requests a new open state.\n- **onAfterOpen**: (payload) => void - Fired after the open animation completes.\n- **onAfterClose**: (payload) => void - Fired after the close animation completes.\n\n## Slots\n\n- **children**: custom thumbnail content. Receives `ImageZoomPayload`. When `src` or `alt` are omitted, ImageZoom reads them from the first child `img`.\n- **caption**: caption rendered over the zoom layer. Receives `ImageZoomPayload`.\n- **indicator**: custom thumbnail zoom indicator content. Receives `ImageZoomPayload`.\n\n## Accessibility\n\n- The thumbnail trigger is a native `button type=\"button\"`.\n- LightGallery renders and manages the modal dialog layer.\n- Escape closes the dialog by default.\n- Page or nested-container scroll closes the dialog by default.\n- Focus remains trapped in the zoom layer and returns to the prior control after closing.\n- Reduced motion disables the zoom transition.\n\n## Examples\n\n### Controlled\n\n```svelte\n<script>\n\tlet open = false;\n</script>\n\n<ImageZoom bind:open src=\"/image.jpg\" alt=\"Product detail\" />\n```\n\n### High-resolution zoom source\n\n```svelte\n<ImageZoom\n\tsrc=\"/image-640.jpg\"\n\tzoomSrc=\"/image-2400.jpg\"\n\tzoomWidth={2400}\n\tzoomHeight={1600}\n\talt=\"Architectural detail\"\n/>\n```\n\n### Child image source\n\n```svelte\n<ImageZoom>\n\t{#snippet children()}\n\t\t<img src=\"/image.jpg\" alt=\"Architectural detail\" />\n\t{/snippet}\n</ImageZoom>\n```\n\n### Caption\n\n```svelte\n<ImageZoom src=\"/image.jpg\" alt=\"Mountain ridge\">\n\t{#snippet caption()}\n\t\t<span>Shot in the late afternoon.</span>\n\t{/snippet}\n</ImageZoom>\n```\n\n### Custom indicator\n\n```svelte\n<ImageZoom src=\"/image.jpg\" alt=\"Mountain ridge\" indicatorPosition=\"top-left\">\n\t{#snippet indicator()}\n\t\t<span>2x</span>\n\t{/snippet}\n</ImageZoom>\n```\n\n## Motion\n\n- **motion** theme slot: one preset (no variants). Only its resolved `duration` is used \u2014 it\n  becomes LightGallery's zoom animation duration (default token `slower`).\n- Ladder: `<Theme components={{ 'image-zoom': { motion } }}>` \u2192 `setImageZoomTheme({ motion })`\n  \u2192 `theme={{ motion: { duration: 250 } }}`. Reduced motion collapses it to 0.\n";
+export declare const imageZoomDescription = "\n# ImageZoom\n\nImageZoom renders an accessible image trigger powered by LightGallery's Medium Zoom plugin. It\nanimates the source image into a focused full-viewport view while preserving controlled state,\nhigh-resolution sources, slots, focus restoration, and configurable dismissal.\n\n## Usage\n\n```svelte\n<script>\n\timport { ImageZoom } from 'entasis/image-zoom';\n</script>\n\n<ImageZoom\n\tsrc=\"/photos/desk-thumb.jpg\"\n\tzoomSrc=\"/photos/desk.jpg\"\n\tzoomWidth={2400}\n\tzoomHeight={1600}\n\talt=\"Desk setup with a laptop and notebook\"\n/>\n```\n\n## Props\n\n- **src**: string - Thumbnail image source. Optional when the children slot renders an image.\n- **alt**: string - Accessible image text. Optional when the children slot image has alt text.\n- **zoomSrc**: string - Full-size image source. Defaults to `src`.\n- **zoomWidth / zoomHeight**: number - Intrinsic dimensions of `zoomSrc`. Provide both when `zoomSrc` differs from the thumbnail so the origin transition and final image use the same rectangle.\n- **open**: boolean (bindable, default: false) - Controls the zoom layer.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **disabled**: boolean (default: false) - Prevents opening.\n- **width / height / srcset / sizes / loading / decoding** - Forwarded to the thumbnail image.\n- **zoomMargin**: number (default: 40) - Minimum viewport margin around the zoomed image.\n- Zoom animation duration now comes from the `motion` theme slot (default token `slower`); see Motion below.\n- **closeOnClickOutside**: boolean (default: true) - Closes from the backdrop.\n- **closeOnEscape**: boolean (default: true) - Closes on Escape.\n- **closeOnScroll**: boolean (default: true) - Closes on wheel, touch-scroll, page scroll, or nested-container scroll.\n- **lockScroll**: boolean (default: false) - Locks page scroll while open.\n- **buttonLabel**: string (default: \"Zoom image\") - Accessible trigger label.\n- **closeLabel**: string (default: \"Close image zoom\") - Accessible close/backdrop label.\n- **backgroundColor**: string (default: theme background) - CSS color used by the Medium Zoom backdrop.\n- **licenseKey**: string (default: LightGallery evaluation key) - LightGallery license key. A production key is required unless the consuming project is GPLv3-compatible.\n- **showIndicator**: boolean (default: true) - Toggles the thumbnail zoom indicator.\n- **indicatorPosition**: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" (default: \"top-right\") - Corner used for the thumbnail zoom indicator.\n- **class**: string - Additional root classes.\n- **theme**: ImageZoomThemeProps - Per-instance theme overrides.\n- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Fired before the zoom opens or closes, with `details.reason` (`'trigger-press'`, `'escape-key'`, `'close-press'` for a click on the zoomed image, `'outside-press'`, `'imperative-action'` for `payload.open()` / `close()` and a scroll dismissal), `details.event` and `details.cancel()`, which keeps the state as it is.\n- **onAfterOpen**: (payload) => void - Fired once per open, after the open animation completes.\n- **onAfterClose**: (payload) => void - Fired once per close, after the close animation completes.\n\n## Slots\n\n- **children**: custom thumbnail content. Receives `ImageZoomPayload`. When `src` or `alt` are omitted, ImageZoom reads them from the first child `img`.\n- **caption**: caption rendered over the zoom layer. Receives `ImageZoomPayload`.\n- **indicator**: custom thumbnail zoom indicator content. Receives `ImageZoomPayload`.\n\n## Accessibility\n\n- The thumbnail trigger is a native `button type=\"button\"`.\n- LightGallery renders and manages the modal dialog layer.\n- Escape closes the dialog by default.\n- Page or nested-container scroll closes the dialog by default.\n- Focus remains trapped in the zoom layer and returns to the prior control after closing.\n- Reduced motion disables the zoom transition.\n\n## Examples\n\n### Controlled\n\n```svelte\n<script>\n\tlet open = false;\n</script>\n\n<ImageZoom bind:open src=\"/image.jpg\" alt=\"Product detail\" />\n```\n\n### High-resolution zoom source\n\n```svelte\n<ImageZoom\n\tsrc=\"/image-640.jpg\"\n\tzoomSrc=\"/image-2400.jpg\"\n\tzoomWidth={2400}\n\tzoomHeight={1600}\n\talt=\"Architectural detail\"\n/>\n```\n\n### Child image source\n\n```svelte\n<ImageZoom>\n\t{#snippet children()}\n\t\t<img src=\"/image.jpg\" alt=\"Architectural detail\" />\n\t{/snippet}\n</ImageZoom>\n```\n\n### Caption\n\n```svelte\n<ImageZoom src=\"/image.jpg\" alt=\"Mountain ridge\">\n\t{#snippet caption()}\n\t\t<span>Shot in the late afternoon.</span>\n\t{/snippet}\n</ImageZoom>\n```\n\n### Custom indicator\n\n```svelte\n<ImageZoom src=\"/image.jpg\" alt=\"Mountain ridge\" indicatorPosition=\"top-left\">\n\t{#snippet indicator()}\n\t\t<span>2x</span>\n\t{/snippet}\n</ImageZoom>\n```\n\n## Motion\n\n- **motion** theme slot: one preset (no variants). Only its resolved `duration` is used \u2014 it\n  becomes LightGallery's zoom animation duration (default token `slower`).\n- Ladder: `<Theme components={{ 'image-zoom': { motion } }}>` \u2192 `setImageZoomTheme({ motion })`\n  \u2192 `theme={{ motion: { duration: 250 } }}`. Reduced motion collapses it to 0.\n";

package/dist/components/ImageZoom/imageZoom.mcp.js

@@ -45,9 +45,9 @@ high-resolution sources, slots, focus restoration, and configurable dismissal.
 - **indicatorPosition**: "top-left" | "top-right" | "bottom-left" | "bottom-right" (default: "top-right") - Corner used for the thumbnail zoom indicator.
 - **class**: string - Additional root classes.
 - **theme**: ImageZoomThemeProps - Per-instance theme overrides.
-- **onOpenChange**: (open: boolean) => void - Fired once when the library requests a new open state.
-- **onAfterOpen**: (payload) => void - Fired after the open animation completes.
-- **onAfterClose**: (payload) => void - Fired after the close animation completes.
+- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Fired before the zoom opens or closes, with \`details.reason\` (\`'trigger-press'\`, \`'escape-key'\`, \`'close-press'\` for a click on the zoomed image, \`'outside-press'\`, \`'imperative-action'\` for \`payload.open()\` / \`close()\` and a scroll dismissal), \`details.event\` and \`details.cancel()\`, which keeps the state as it is.
+- **onAfterOpen**: (payload) => void - Fired once per open, after the open animation completes.
+- **onAfterClose**: (payload) => void - Fired once per close, after the close animation completes.
 
 ## Slots
 

package/dist/components/ImageZoom/imageZoom.props.d.ts

@@ -1,6 +1,7 @@
 import type { Slot, WithSlot } from '../Slot/slot.js';
 import type { WithAttachments } from '../../types/props.js';
 import type { ImageZoomThemeProps } from './imageZoom.theme.js';
+import type { OpenChangeHandler } from '../../utils/openChange.js';
 export type ImageZoomPayload = {
     /** Resolved thumbnail image source. */
     src: string;
@@ -75,11 +76,16 @@ export type ImageZoomProps = WithAttachments<WithSlot<{
     indicatorPosition?: ImageZoomIndicatorPosition;
     /** Additional CSS classes merged onto the root element. */
     class?: string;
-    /** Callback fired once when the library requests a new open state. */
-    onOpenChange?: (open: boolean) => void;
-    /** Callback fired after the open animation finishes. */
+    /**
+     * Called before the zoomed layer opens or closes, with the change details: `reason`
+     * (`'trigger-press'`, `'escape-key'`, `'close-press'` for a click on the zoomed image,
+     * `'outside-press'`, `'imperative-action'` for `payload.open()`/`close()` and a scroll
+     * dismissal), the originating `event` and `cancel()`, which keeps the state as it is.
+     */
+    onOpenChange?: OpenChangeHandler;
+    /** Callback fired once per open, after the open animation finishes. */
     onAfterOpen?: (payload: ImageZoomPayload) => void;
-    /** Callback fired after the close animation finishes. */
+    /** Callback fired once per close, after the close animation finishes. */
     onAfterClose?: (payload: ImageZoomPayload) => void;
     /** Per-instance theme overrides for image zoom parts. */
     theme?: ImageZoomThemeProps;

package/dist/components/ImageZoom/imageZoom.state.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Attachment } from 'svelte/attachments';
 import type { Messages } from '../../i18n/en.js';
+import { type OpenChangeDetails, type OpenChangeInit } from '../../utils/openChange.js';
 import type { ImageZoomPayload, ImageZoomProps } from './imageZoom.props.js';
 type MakeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 type ImageZoomStateOptions = MakeRequired<Pick<ImageZoomProps, 'src' | 'alt' | 'zoomSrc' | 'zoomWidth' | 'zoomHeight' | 'disabled' | 'zoomMargin' | 'closeOnClickOutside' | 'closeOnEscape' | 'closeOnScroll' | 'lockScroll' | 'closeLabel' | 'backgroundColor' | 'licenseKey' | 'onOpenChange' | 'onAfterOpen' | 'onAfterClose'>, 'disabled' | 'zoomMargin' | 'closeOnClickOutside' | 'closeOnEscape' | 'closeOnScroll' | 'lockScroll' | 'closeLabel' | 'backgroundColor' | 'licenseKey'> & {
@@ -10,7 +11,7 @@ type ImageZoomStateOptions = MakeRequired<Pick<ImageZoomProps, 'src' | 'alt' | '
     messages: Messages;
 };
 type ImageZoomAttachmentConfig = Pick<ImageZoomStateOptions, 'src' | 'alt' | 'zoomSrc' | 'zoomWidth' | 'zoomHeight' | 'disabled' | 'zoomMargin' | 'transitionDuration' | 'closeOnClickOutside' | 'closeOnEscape' | 'closeOnScroll' | 'lockScroll' | 'closeLabel' | 'backgroundColor' | 'licenseKey'>;
-declare const ImageZoomState_base: new (props: ImageZoomStateOptions) => {} & Omit<Pick<ImageZoomProps, "disabled" | "onOpenChange" | "alt" | "src" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "onAfterOpen" | "onAfterClose" | "zoomMargin" | "closeLabel" | "licenseKey" | "zoomSrc" | "zoomWidth" | "zoomHeight" | "closeOnScroll" | "backgroundColor">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "zoomMargin" | "closeLabel" | "licenseKey" | "closeOnScroll" | "backgroundColor"> & Required<Pick<Pick<ImageZoomProps, "disabled" | "onOpenChange" | "alt" | "src" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "onAfterOpen" | "onAfterClose" | "zoomMargin" | "closeLabel" | "licenseKey" | "zoomSrc" | "zoomWidth" | "zoomHeight" | "closeOnScroll" | "backgroundColor">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "zoomMargin" | "closeLabel" | "licenseKey" | "closeOnScroll" | "backgroundColor">> & {
+declare const ImageZoomState_base: new (props: ImageZoomStateOptions) => {} & Omit<Pick<ImageZoomProps, "disabled" | "onOpenChange" | "onAfterOpen" | "onAfterClose" | "alt" | "src" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "backgroundColor" | "zoomMargin" | "closeLabel" | "licenseKey" | "zoomSrc" | "zoomWidth" | "zoomHeight" | "closeOnScroll">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "backgroundColor" | "zoomMargin" | "closeLabel" | "licenseKey" | "closeOnScroll"> & Required<Pick<Pick<ImageZoomProps, "disabled" | "onOpenChange" | "onAfterOpen" | "onAfterClose" | "alt" | "src" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "backgroundColor" | "zoomMargin" | "closeLabel" | "licenseKey" | "zoomSrc" | "zoomWidth" | "zoomHeight" | "closeOnScroll">, "disabled" | "closeOnEscape" | "lockScroll" | "closeOnClickOutside" | "backgroundColor" | "zoomMargin" | "closeLabel" | "licenseKey" | "closeOnScroll">> & {
     isOpen: boolean;
     /** Zoom animation duration in ms, resolved from the `motion` theme slot. */
     transitionDuration: number;
@@ -18,19 +19,30 @@ declare const ImageZoomState_base: new (props: ImageZoomStateOptions) => {} & Om
     messages: Messages;
 };
 export declare class ImageZoomState extends ImageZoomState_base {
+    #private;
     private inferredSrc;
     private inferredAlt;
     private lightbox;
     resolvedSrc: string;
     resolvedAlt: string;
     zoomedSrc: string;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
+    /**
+     * Asks `onOpenChange` before the lightbox changes state. Returns `false` when the change was
+     * cancelled; otherwise the next matching lightbox event applies it without asking again.
+     */
+    requestOpenChange(nextOpen: boolean, input?: OpenChangeDetails | OpenChangeInit | Event): boolean;
+    open: (input?: OpenChangeDetails | OpenChangeInit | Event) => void;
+    close: (input?: OpenChangeDetails | OpenChangeInit | Event) => void;
+    toggle: (input?: OpenChangeDetails | OpenChangeInit | Event) => void;
     payload: ImageZoomPayload;
     constructor(options: ImageZoomStateOptions);
     attachRoot: (configuration: ImageZoomAttachmentConfig) => Attachment<HTMLElement>;
     setInferredMetadata(src: string, alt: string): void;
+    /**
+     * Applies the state the lightbox reached. A change `onOpenChange` already approved (every
+     * path the component drives) applies silently; any other one is reported, and cannot be
+     * cancelled any more, before it applies. `notify: false` applies silently (a disabled zoom).
+     */
     updateOpen(nextOpen: boolean, notify: boolean): void;
 }
 export {};

package/dist/components/ImageZoom/imageZoom.state.svelte.js

@@ -1,6 +1,7 @@
 import { untrack } from 'svelte';
 import { createBindableStateClass } from '../../utils/state.svelte.js';
 import { ImageZoomLightbox } from './imageZoom.lightbox.js';
+import { createOpenChangeDetails, requestOpenChange, resolveOpenChangeDetails } from '../../utils/openChange.js';
 export class ImageZoomState extends createBindableStateClass() {
     inferredSrc = $state('');
     inferredAlt = $state('');
@@ -8,19 +9,39 @@ export class ImageZoomState extends createBindableStateClass() {
     resolvedSrc = $derived(this.src || this.inferredSrc);
     resolvedAlt = $derived(this.alt ?? this.inferredAlt);
     zoomedSrc = $derived(this.zoomSrc || this.resolvedSrc);
-    open = () => {
-        if (!this.disabled)
+    /** The open state `onOpenChange` already approved, until the lightbox reports it. */
+    #approved = null;
+    /**
+     * Asks `onOpenChange` before the lightbox changes state. Returns `false` when the change was
+     * cancelled; otherwise the next matching lightbox event applies it without asking again.
+     */
+    requestOpenChange(nextOpen, input) {
+        if (this.isOpen === nextOpen)
+            return true;
+        if (!requestOpenChange(this.onOpenChange, nextOpen, resolveOpenChangeDetails(input))) {
+            return false;
+        }
+        this.#approved = nextOpen;
+        return true;
+    }
+    open = (input) => {
+        if (this.disabled || this.isOpen)
+            return;
+        if (this.requestOpenChange(true, input))
             this.lightbox.open();
     };
-    close = () => {
-        this.lightbox.close();
+    close = (input) => {
+        if (!this.isOpen)
+            return;
+        if (this.requestOpenChange(false, input))
+            this.lightbox.close();
     };
-    toggle = () => {
+    toggle = (input) => {
         if (this.isOpen) {
-            this.close();
+            this.close(input);
             return;
         }
-        this.open();
+        this.open(input);
     };
     payload = $derived({
         src: this.resolvedSrc,
@@ -51,11 +72,19 @@ export class ImageZoomState extends createBindableStateClass() {
         this.inferredSrc = src;
         this.inferredAlt = alt;
     }
+    /**
+     * Applies the state the lightbox reached. A change `onOpenChange` already approved (every
+     * path the component drives) applies silently; any other one is reported, and cannot be
+     * cancelled any more, before it applies. `notify: false` applies silently (a disabled zoom).
+     */
     updateOpen(nextOpen, notify) {
+        const approved = this.#approved === nextOpen;
+        this.#approved = null;
         if (this.isOpen === nextOpen)
             return;
+        if (notify && !approved) {
+            this.onOpenChange?.(nextOpen, createOpenChangeDetails({ cancelable: false }));
+        }
         this.isOpen = nextOpen;
-        if (notify)
-            this.onOpenChange?.(nextOpen);
     }
 }

package/dist/components/Kanban/kanban.theme.js

@@ -3,11 +3,13 @@ import { cva } from '../../utils/cva/index.js';
 // Vega-quiet board: columns are soft elevated surfaces, cards one surface step
 // above, the drop indicator comes from useDndList. Column color accents render
 // as a small dot next to the title (driven by data-color on the column).
+// The board scrolls on x, which makes it clip on y too, so `p-xs` keeps the ring and elevation
+// shadow of the outermost columns inside the scroll container instead of cropping them.
 const defaultKanban = cva({
-    base: 'flex w-full items-start gap-xl overflow-x-auto scrollbar-none'
+    base: 'flex w-full items-start gap-xl overflow-x-auto p-xs scrollbar-none'
 });
 const defaultKanbanColumn = cva({
-    base: 'bg-surface-raised ring-neutral-muted flex max-h-full w-72 shrink-0 flex-col rounded-lg ring-1'
+    base: 'bg-surface-raised ring-neutral-muted flex max-h-full w-full flex-col rounded-lg ring-1'
 });
 const defaultKanbanColumnHeader = cva({
     base: 'flex items-center gap-md',
@@ -109,8 +111,10 @@ const defaultKanbanCardWrapper = cva({
 });
 // Per-column wrapper (the dnd row of the board). `dragging` marks the dimmed
 // placeholder while a column is dragged.
+// Columns share the board's width between 15rem and 20rem, so a few columns fit inside narrow
+// containers such as a tab panel; more columns than fit scroll horizontally.
 const defaultKanbanColumnWrapper = cva({
-    base: 'shrink-0',
+    base: 'min-w-60 max-w-80 flex-1 basis-72',
     variants: {
         dragging: {
             true: 'opacity-40',

package/dist/components/Layout/layoutSpacing.d.ts

@@ -1,9 +1,9 @@
 export type LayoutSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type LayoutSpacingKey = LayoutSpacing;
-export declare const layoutGapClasses: Record<LayoutSpacing, "gap-xs" | "gap-md" | "gap-lg" | "gap-sm" | "gap-xl" | "gap-0">;
+export declare const layoutGapClasses: Record<LayoutSpacing, "gap-xs" | "gap-sm" | "gap-md" | "gap-lg" | "gap-xl" | "gap-0">;
 export declare const layoutRowGapClasses: Record<LayoutSpacing, "gap-y-0" | "gap-y-xs" | "gap-y-sm" | "gap-y-md" | "gap-y-lg" | "gap-y-xl">;
 export declare const layoutColumnGapClasses: Record<LayoutSpacing, "gap-x-0" | "gap-x-xs" | "gap-x-sm" | "gap-x-md" | "gap-x-lg" | "gap-x-xl">;
 export declare const layoutPaddingInlineClasses: Record<LayoutSpacing, "px-lg" | "px-xl" | "px-md" | "px-0" | "px-xs" | "px-sm">;
 export declare const layoutPaddingBlockClasses: Record<LayoutSpacing, "py-xs" | "py-sm" | "py-md" | "py-lg" | "py-0" | "py-xl">;
-export declare const layoutSpacingCssValues: Record<LayoutSpacing, "var(--space-xs)" | "var(--space-sm)" | "var(--space-md)" | "var(--space-lg)" | "var(--space-xl)" | "0px">;
+export declare const layoutSpacingCssValues: Record<LayoutSpacing, "0px" | "var(--space-xs)" | "var(--space-sm)" | "var(--space-md)" | "var(--space-lg)" | "var(--space-xl)">;
 export declare const toLayoutSpacingKey: (spacing: LayoutSpacing) => LayoutSpacingKey;

package/dist/components/LinkPreview/LinkPreview.svelte

@@ -40,6 +40,9 @@
 		transition,
 		size = 'normal',
 		disabled = false,
+		wrap = true,
+		anchorTo,
+		arrow = false,
 		class: className,
 		card,
 		popover,
@@ -173,6 +176,9 @@
 	{transition}
 	{size}
 	{disabled}
+	{wrap}
+	{anchorTo}
+	{arrow}
 	{popover}
 	card={{ color: card?.color ?? 'neutral', variant: card?.variant ?? 'solid', theme: card?.theme }}
 	{showBorders}
@@ -188,7 +194,7 @@
 			href={disabled ? undefined : href}
 			{target}
 			rel={resolvedRel}
-			class={classes.trigger({ disabled, className })}
+			class={classes.trigger({ disabled, wrap, className })}
 			data-status={previewState.status}
 			aria-describedby={id}
 			aria-disabled={disabled || undefined}

package/dist/components/LinkPreview/linkPreview.mcp.d.ts

@@ -1 +1 @@
-export declare const linkPreviewDescription = "\n# LinkPreview Component\n\nLinkPreview renders an anchor trigger with a HoverCard preview that loads link metadata asynchronously. It shows Skeleton placeholders while loading and displays title, description, site name, Open Graph image, and favicon when available.\n\n## Import\n\n```svelte\n<script>\n\timport { LinkPreview } from 'entasis/link-preview';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<LinkPreview href=\"https://svelte.dev\">Svelte</LinkPreview>\n```\n\nBy default, LinkPreview requests `/api/link-metadata?url=<href>` when the card opens. Browser-only fetching of arbitrary links is not reliable because most sites block cross-origin HTML reads, so applications should provide a server endpoint or a custom `fetchMetadata` function.\n\n## With Preloaded Metadata\n\n```svelte\n<LinkPreview\n\thref=\"https://entasis.dev\"\n\tmetadata={{\n\t\ttitle: 'Entasis',\n\t\tdescription: 'Configuration-first Svelte components.',\n\t\tsiteName: 'Entasis',\n\t\tfavicon: '/favicon.png'\n\t}}\n>\n\tEntasis\n</LinkPreview>\n```\n\n## Custom Fetcher\n\n```svelte\n<script>\n\tconst fetchMetadata = async (href, signal) => {\n\t\tconst response = await fetch(`/api/preview?href=${encodeURIComponent(href)}`, { signal });\n\t\tif (!response.ok) throw new Error('Preview unavailable');\n\t\treturn response.json();\n\t};\n</script>\n\n<LinkPreview href=\"https://example.com\" {fetchMetadata}>Example</LinkPreview>\n```\n\n## Props\n\n- **href**: string - URL opened by the trigger link and requested by the metadata loader.\n- **id**: string - Stable DOM id for the underlying HoverCard; falls back to a generated id.\n- **open**: boolean - Bindable open state.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **children**: string | Snippet<[LinkPreviewPayload]> - Trigger anchor content.\n- **metadata**: LinkPreviewMetadata - Preloaded metadata; skips network loading.\n- **fetchMetadata**: (href, signal) => Promise<LinkPreviewMetadata> - Custom async loader.\n- **metadataEndpoint**: string | (href) => string - Endpoint used when fetchMetadata is not provided. String endpoints receive ?url=<href>.\n- **prefetch**: boolean - Load metadata on mount instead of waiting for open.\n- **target**: string - Trigger anchor target.\n- **rel**: string - Trigger anchor rel. Defaults to noopener noreferrer for target=\"_blank\".\n- **fallbackTitle**: string - Title shown when metadata has no title.\n- **imageAlt**: string - Alt text for the preview image.\n- **showUrl**: boolean - Whether to show the URL line.\n- **loadingLabel**: string - Accessible label for the loading region.\n- **errorLabel**: string - Heading shown when metadata loading fails.\n- **position**: Popover placement - Preferred card placement.\n- **offset**: number - Gap between trigger and card.\n- **delay**: number - Open delay in milliseconds.\n- **closeDelay**: number - Close delay in milliseconds.\n- **openOnFocus**: boolean - Open when focus enters trigger or card.\n- **openOnClick**: boolean - Toggle card on click before navigation.\n- **closeOnEscape**: boolean - Close on Escape.\n- **closeOnClickOutside**: boolean - Close when clicking outside.\n- **directedTransition**: boolean - Use placement-aware transitions.\n- **transition**: object - Popover transition overrides.\n- **size**: 'small' | 'normal' | 'large' - Preview card size.\n- **disabled**: boolean - Disable opening and link navigation.\n- **class**: string - Trigger anchor classes.\n- **card**: Props forwarded to the inner Card as one object - `{ class, color, variant, theme }` (defaults: color 'neutral', variant 'solid').\n- **popover**: Props forwarded to the Popover panel as one object - `{ class, theme }`.\n- **showBorders**: boolean - Show Card section borders.\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload) => void - Called after open transition.\n- **onAfterClose**: (payload) => void - Called after close transition.\n- **onLoad**: (payload) => void - Called after metadata loads.\n- **onError**: (error) => void - Called after metadata loading fails.\n- **theme**: LinkPreviewThemeProps - LinkPreview theme overrides.\n- **hoverCardTheme**: HoverCardThemeProps - HoverCard wrapper theme overrides.\n\n## Metadata Shape\n\n```ts\ntype LinkPreviewMetadata = {\n\turl?: string;\n\ttitle?: string;\n\tdescription?: string;\n\tsiteName?: string;\n\timage?: string;\n\tfavicon?: string;\n};\n```\n\n## Endpoint Contract\n\nThe default endpoint should return JSON matching LinkPreviewMetadata. Non-2xx responses should return a JSON object with a `message` string when possible.\n\n## Accessibility\n\n- The trigger remains a real anchor, so the destination is reachable without hover.\n- Loading and error states use role=\"status\".\n- A disabled LinkPreview removes the anchor href and prevents hover opening.\n\n## Theme Parts\n\n- **trigger** - Anchor trigger.\n- **card** - HoverCard surface classes.\n- **content** - Preview content wrapper.\n- **media** - Image container.\n- **image** - Preview image.\n- **body** - Metadata text stack.\n- **header** - Favicon and site row.\n- **favicon** - Favicon image.\n- **site** - Site name text.\n- **title** - Preview title.\n- **description** - Preview description.\n- **url** - URL display line.\n- **loading** - Skeleton stack.\n- **error** - Error state container.\n\n## Motion\n\n- LinkPreview has no preset of its own: it forwards `transition` (now a plain `FSOProps`,\n  responsive) to HoverCard, whose **motion** slot owns the preset.\n- Retune it with `<Theme components={{ 'hover-card': { motion } }}>` or\n  `setHoverCardTheme({ motion })`; the `transition` prop still wins per instance.\n";
+export declare const linkPreviewDescription = "\n# LinkPreview Component\n\nLinkPreview renders an anchor trigger with a HoverCard preview that loads link metadata asynchronously. It shows Skeleton placeholders while loading and displays title, description, site name, Open Graph image, and favicon when available.\n\n## Import\n\n```svelte\n<script>\n\timport { LinkPreview } from 'entasis/link-preview';\n</script>\n```\n\n## Basic Usage\n\n```svelte\n<LinkPreview href=\"https://svelte.dev\">Svelte</LinkPreview>\n```\n\nBy default, LinkPreview requests `/api/link-metadata?url=<href>` when the card opens. Browser-only fetching of arbitrary links is not reliable because most sites block cross-origin HTML reads, so applications should provide a server endpoint or a custom `fetchMetadata` function.\n\n## With Preloaded Metadata\n\n```svelte\n<LinkPreview\n\thref=\"https://entasis.dev\"\n\tmetadata={{\n\t\ttitle: 'Entasis',\n\t\tdescription: 'Configuration-first Svelte components.',\n\t\tsiteName: 'Entasis',\n\t\tfavicon: '/favicon.png'\n\t}}\n>\n\tEntasis\n</LinkPreview>\n```\n\n## Custom Fetcher\n\n```svelte\n<script>\n\tconst fetchMetadata = async (href, signal) => {\n\t\tconst response = await fetch(`/api/preview?href=${encodeURIComponent(href)}`, { signal });\n\t\tif (!response.ok) throw new Error('Preview unavailable');\n\t\treturn response.json();\n\t};\n</script>\n\n<LinkPreview href=\"https://example.com\" {fetchMetadata}>Example</LinkPreview>\n```\n\n## Props\n\n- **href**: string - URL opened by the trigger link and requested by the metadata loader.\n- **id**: string - Stable DOM id for the underlying HoverCard; falls back to a generated id.\n- **open**: boolean - Bindable open state.\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided.\n- **children**: string | Snippet<[LinkPreviewPayload]> - Trigger anchor content.\n- **metadata**: LinkPreviewMetadata - Preloaded metadata; skips network loading.\n- **fetchMetadata**: (href, signal) => Promise<LinkPreviewMetadata> - Custom async loader.\n- **metadataEndpoint**: string | (href) => string - Endpoint used when fetchMetadata is not provided. String endpoints receive ?url=<href>.\n- **prefetch**: boolean - Load metadata on mount instead of waiting for open.\n- **target**: string - Trigger anchor target.\n- **rel**: string - Trigger anchor rel. Defaults to noopener noreferrer for target=\"_blank\".\n- **fallbackTitle**: string - Title shown when metadata has no title.\n- **imageAlt**: string - Alt text for the preview image.\n- **showUrl**: boolean - Whether to show the URL line.\n- **loadingLabel**: string - Accessible label for the loading region.\n- **errorLabel**: string - Heading shown when metadata loading fails.\n- **position**: Popover placement - Preferred card placement.\n- **offset**: number - Gap between trigger and card.\n- **delay**: number - Open delay in milliseconds. Skipped right after another preview, hover card, tooltip or hover-opened popover was open, as for HoverCard.\n- **closeDelay**: number - Close delay in milliseconds.\n- **openOnFocus**: boolean - Open when focus enters trigger or card.\n- **openOnClick**: boolean - Toggle card on click before navigation.\n- **closeOnEscape**: boolean - Close on Escape.\n- **closeOnClickOutside**: boolean - Close when clicking outside.\n- **directedTransition**: boolean - Use placement-aware transitions.\n- **transition**: object - Popover transition overrides.\n- **size**: 'small' | 'normal' | 'large' - Preview card size.\n- **disabled**: boolean - Disable opening and link navigation.\n- **wrap**: boolean (default: true) - The link flows with the text around it (`display: inline`, `box-decoration-break: clone`) and breaks across lines; the card anchors to the line the pointer entered and stays there while it is open, and a keyboard open takes the first line above the link and the last one below it. `false` keeps the link one `inline-flex` box\n- **anchorTo**: 'box' | 'line' (default: 'line' with `wrap`) - What the card anchors to when the link wraps\n- **arrow**: boolean (default: false) - Draws an arrow from the card toward the link\n- **class**: string - Trigger anchor classes.\n- **card**: Props forwarded to the inner Card as one object - `{ class, color, variant, theme }` (defaults: color 'neutral', variant 'solid').\n- **popover**: Props forwarded to the Popover panel as one object - `{ class, theme }`.\n- **showBorders**: boolean - Show Card section borders.\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change.\n- **onAfterOpen**: (payload) => void - Called after open transition.\n- **onAfterClose**: (payload) => void - Called after close transition.\n- **onLoad**: (payload) => void - Called after metadata loads.\n- **onError**: (error) => void - Called after metadata loading fails.\n- **theme**: LinkPreviewThemeProps - LinkPreview theme overrides.\n- **hoverCardTheme**: HoverCardThemeProps - HoverCard wrapper theme overrides.\n\n## Metadata Shape\n\n```ts\ntype LinkPreviewMetadata = {\n\turl?: string;\n\ttitle?: string;\n\tdescription?: string;\n\tsiteName?: string;\n\timage?: string;\n\tfavicon?: string;\n};\n```\n\n## Endpoint Contract\n\nThe default endpoint should return JSON matching LinkPreviewMetadata. Non-2xx responses should return a JSON object with a `message` string when possible.\n\n## Accessibility\n\n- The trigger remains a real anchor, so the destination is reachable without hover.\n- Loading and error states use role=\"status\".\n- A disabled LinkPreview removes the anchor href and prevents hover opening.\n\n## Theme Parts\n\n- **trigger** - Anchor trigger.\n- **card** - HoverCard surface classes.\n- **content** - Preview content wrapper.\n- **media** - Image container.\n- **image** - Preview image.\n- **body** - Metadata text stack.\n- **header** - Favicon and site row.\n- **favicon** - Favicon image.\n- **site** - Site name text.\n- **title** - Preview title.\n- **description** - Preview description.\n- **url** - URL display line.\n- **loading** - Skeleton stack.\n- **error** - Error state container.\n\n## Motion\n\n- LinkPreview has no preset of its own: it forwards `transition` (now a plain `FSOProps`,\n  responsive) to HoverCard, whose **motion** slot owns the preset.\n- Retune it with `<Theme components={{ 'hover-card': { motion } }}>` or\n  `setHoverCardTheme({ motion })`; the `transition` prop still wins per instance.\n";

package/dist/components/LinkPreview/linkPreview.mcp.js

@@ -69,7 +69,7 @@ By default, LinkPreview requests \`/api/link-metadata?url=<href>\` when the card
 - **errorLabel**: string - Heading shown when metadata loading fails.
 - **position**: Popover placement - Preferred card placement.
 - **offset**: number - Gap between trigger and card.
-- **delay**: number - Open delay in milliseconds.
+- **delay**: number - Open delay in milliseconds. Skipped right after another preview, hover card, tooltip or hover-opened popover was open, as for HoverCard.
 - **closeDelay**: number - Close delay in milliseconds.
 - **openOnFocus**: boolean - Open when focus enters trigger or card.
 - **openOnClick**: boolean - Toggle card on click before navigation.
@@ -79,6 +79,9 @@ By default, LinkPreview requests \`/api/link-metadata?url=<href>\` when the card
 - **transition**: object - Popover transition overrides.
 - **size**: 'small' | 'normal' | 'large' - Preview card size.
 - **disabled**: boolean - Disable opening and link navigation.
+- **wrap**: boolean (default: true) - The link flows with the text around it (\`display: inline\`, \`box-decoration-break: clone\`) and breaks across lines; the card anchors to the line the pointer entered and stays there while it is open, and a keyboard open takes the first line above the link and the last one below it. \`false\` keeps the link one \`inline-flex\` box
+- **anchorTo**: 'box' | 'line' (default: 'line' with \`wrap\`) - What the card anchors to when the link wraps
+- **arrow**: boolean (default: false) - Draws an arrow from the card toward the link
 - **class**: string - Trigger anchor classes.
 - **card**: Props forwarded to the inner Card as one object - \`{ class, color, variant, theme }\` (defaults: color 'neutral', variant 'solid').
 - **popover**: Props forwarded to the Popover panel as one object - \`{ class, theme }\`.

package/dist/components/LinkPreview/linkPreview.props.d.ts

@@ -111,6 +111,21 @@ export type LinkPreviewProps = WithAttachments<{
     size?: Sizes;
     /** When true, prevents opening and marks the trigger as disabled. */
     disabled?: boolean;
+    /**
+     * Lets the link wrap across lines like the text around it. The card anchors to the line the
+     * pointer entered on and stays there while it is open; a keyboard open takes the first line
+     * above the link and the last one below it. Set it to `false` for a link that must stay one
+     * box, such as a button-like link with a fixed layout.
+     * @default true
+     */
+    wrap?: boolean;
+    /**
+     * What the card anchors to when the link wraps: the whole box, or the line the pointer entered
+     * on. Defaults to `'line'` with `wrap`.
+     */
+    anchorTo?: PopoverProps['anchorTo'];
+    /** Draws an arrow from the card toward the link. */
+    arrow?: PopoverProps['arrow'];
     /** Additional CSS classes merged onto the trigger anchor. */
     class?: string;
     /** Props forwarded to the inner Card surface. */

package/dist/components/LinkPreview/linkPreview.theme.d.ts

@@ -5,6 +5,10 @@ export declare const linkPreviewTheme: {
             true: string;
             false: null;
         };
+        wrap: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     card: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -64,6 +68,10 @@ export declare const setLinkPreviewTheme: (theme: InferComponentTheme<{
             true: string;
             false: null;
         };
+        wrap: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     card: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
@@ -121,6 +129,10 @@ export declare const useLinkPreviewTheme: import("../../utils/cva/theme.js").Use
             true: string;
             false: null;
         };
+        wrap: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     card: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {

package/dist/components/LinkPreview/linkPreview.theme.js

@@ -1,15 +1,22 @@
 import { cva } from '../../utils/cva/index.js';
 import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 const defaultLinkPreviewTrigger = cva({
-    base: 'text-primary-readable inline-flex max-w-full items-center rounded-sm underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/50',
+    base: 'text-primary-readable max-w-full rounded-sm underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/50',
     variants: {
         disabled: {
             true: 'pointer-events-none opacity-55',
             false: null
+        },
+        // The link flows with the text around it and breaks across lines; its ring and rounding
+        // repeat on every line.
+        wrap: {
+            true: 'box-decoration-clone inline',
+            false: 'inline-flex items-center'
         }
     },
     defaultVariants: {
-        disabled: false
+        disabled: false,
+        wrap: true
     }
 });
 const defaultLinkPreviewCard = cva({

package/dist/components/Map/maplibre-cdn.js

@@ -1,3 +1,4 @@
+import { applyCspNonce } from '../../utils/cspNonce.js';
 const MAPLIBRE_CDN_VERSION = '5.24.0';
 const MAPLIBRE_SCRIPT_ID = 'svelte-pro-maplibre-script';
 const MAPLIBRE_STYLE_ID = 'svelte-pro-maplibre-style';
@@ -23,7 +24,7 @@ function ensureMapLibreStyle() {
     if (document.getElementById(MAPLIBRE_STYLE_ID)) {
         return;
     }
-    const link = document.createElement('link');
+    const link = applyCspNonce(document.createElement('link'));
     link.id = MAPLIBRE_STYLE_ID;
     link.rel = 'stylesheet';
     link.href = MAPLIBRE_STYLE_URL;
@@ -53,7 +54,7 @@ function createMapLibreScriptPromise() {
     });
 }
 function createMapLibreScript() {
-    const script = document.createElement('script');
+    const script = applyCspNonce(document.createElement('script'));
     script.id = MAPLIBRE_SCRIPT_ID;
     script.src = MAPLIBRE_SCRIPT_URL;
     script.async = true;

package/dist/components/Markdown/markdown.mcp.d.ts

@@ -1 +1 @@
-export declare const markdownDescription = "\n# Markdown Component\n\nRenders Markdown as themed HTML, built for streaming LLM output. Wraps the user's own [svelte-streamdown](https://github.com/) renderer, restyled with entasis design tokens so it matches the rest of the app and adapts to light and dark automatically. Incomplete/streaming Markdown (an unterminated code fence, a half-written table) is handled gracefully \u2014 nothing crashes or flashes as chunks arrive.\n\nFenced code blocks render through entasis's own Code component (syntax highlighting + copy button), and \\`mermaid\\` fences render through entasis's Mermaid component (pan/zoom, brand theming, and errorForgiving so a diagram being streamed in doesn't flash errors between chunks).\n\nCard, Stat, Stack, Grid, and GridSpan are also available as built-in MDX components. They can be used directly inside the Markdown source without passing an MDX component map.\n\n## Basic Usage\n\n\\`\\`\\`svelte\n<Markdown content={\"# Hello\\n\\nSome **bold** and _italic_ text.\"} />\n<Markdown content={message} size=\"small\" />\n<Markdown content={doc} size=\"large\" />\n\\`\\`\\`\n\n## Props\n\n### Core Props\n- **content**: string (required) - The Markdown source. Re-renders reactively as it changes; incomplete/streaming Markdown is handled gracefully (safe to bind to a growing string from a token stream).\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Type and spacing scale.\n  - **small**: compact \u2014 smaller headings, tighter block margins, \\`text-sm\\` body. Best for chat messages and dense UI.\n  - **normal**: the default reading scale (\\`text-base\\` body, shadcn-equivalent heading sizes).\n  - **large**: long-form \u2014 larger headings, roomier margins, \\`text-lg\\` body. Best for documents and articles.\n\n### Advanced Props\n- **class**: string - Additional CSS classes on the root wrapper.\n- **theme**: MarkdownThemeProps - Overrides for the root wrapper part (size variants live here).\n- **mdxComponents**: StreamdownProps['mdxComponents'] - Custom MDX components. Matching names override the built-in entasis components.\n- **...streamdown passthroughs**: every other svelte-streamdown prop is forwarded except the ones entasis controls (\\`content\\`, \\`theme\\`, \\`baseTheme\\`, \\`mergeTheme\\`, \\`class\\`, \\`code\\`, \\`mermaid\\`, \\`children\\`, \\`streamdown\\`, \\`element\\`). Use these for streamdown features such as controlling which block types are parsed, link/image handling, and other renderer options \u2014 see the svelte-streamdown docs.\n\n## Rendering\n\n- **Block elements**: headings (h1\u2013h6), paragraphs, lists (ordered, unordered, task lists), blockquotes, horizontal rules, tables, images and links are all styled from entasis tokens.\n- **GitHub alerts**: \\`> [!NOTE]\\`, \\`> [!TIP]\\`, \\`> [!IMPORTANT]\\`, \\`> [!WARNING]\\` and \\`> [!CAUTION]\\` render as colored callouts mapped to entasis info/success/primary/warning/danger muted pairings.\n- **Inline code** (\\`codespan\\`): styled as a subtle chip; its text size scales with \\`size\\`.\n- **Code fences**: rendered by entasis's Code component \u2014 syntax highlighting and a copy button. The code block sizing follows \\`size\\`.\n- **Mermaid fences**: a fence tagged \\`mermaid\\` renders through entasis's Mermaid component with \\`errorForgiving\\` enabled, so a diagram that is still streaming in holds its last valid frame instead of flashing parse errors. Diagram size maps from the Markdown \\`size\\`.\n\n## Built-in MDX components\n\nThe built-in tags are **Card**, **Stat**, **Stack**, **Grid**, and **GridSpan**:\n\n~~~svelte\nconst content = [\n  '<Grid columns={2} gap=\"lg\">',\n  '<GridSpan columns=\"full\">',\n  '<Card title=\"Release readiness\" variant=\"outline\">',\n  '<Stack gap=\"md\">Everything is **ready**.</Stack>',\n  '</Card>',\n  '</GridSpan>',\n  '<Stat label=\"Coverage\" value=\"94%\" trend=\"+3.2%\" trendDirection=\"up\" />',\n  '<Stat label=\"Issues\" value=\"3\" trend=\"-8\" trendDirection=\"down\" />',\n  '</Grid>'\n].join('\\n');\n\n<Markdown {content} />\n~~~\n\nMDX attributes support string, number, and boolean values. Imperative event handlers and root styling or link props are not forwarded from Markdown content. Caller-provided mdxComponents take priority, and the custom mdx snippet remains the fallback for unknown tags.\n\n## Theming\n\nThe full theme is derived from entasis design tokens (translated from the shadcn preset): borders use \\`border-neutral-muted\\`, muted surfaces use \\`bg-neutral-muted\\`, secondary text uses \\`text-neutral/70\\`, and so on. Because it is token-based, the rendered Markdown adapts to light and dark automatically and stays visually consistent with the rest of the app. Per-instance tweaks to the root wrapper go through the \\`theme\\` prop; deeper element overrides fall back safely to the built-in theme.\n\n## Examples\n\n### Chat message (small)\n\\`\\`\\`svelte\n<Markdown content={assistantMessage} size=\"small\" />\n\\`\\`\\`\n\n### Long-form document (large)\n\\`\\`\\`svelte\n<Markdown content={articleBody} size=\"large\" />\n\\`\\`\\`\n\n### Streaming from an LLM\n\\`\\`\\`svelte\n<script>\n\tlet content = $state('');\n\t// append tokens as they arrive\n\tfor await (const chunk of stream) content += chunk;\n</script>\n<Markdown {content} size=\"small\" />\n\\`\\`\\`\n\n## Accessibility\n\n- Output is semantic HTML (real headings, lists, tables, \\`<a>\\`, \\`<code>\\`), so the document outline and screen-reader navigation work as expected.\n- Code blocks inherit the Code component's accessible copy button (aria-labelled, keyboard operable) and Mermaid inherits its \\`role=\"img\"\\` + aria-label and keyboard-accessible controls.\n- Color is never the only signal for GitHub alerts \u2014 each keeps its label/heading text.\n- Task-list checkboxes are disabled and have no text of their own, so each carries an accessible name from the catalog (`taskComplete` / `taskIncomplete`).\n\n## Notes\n\n- Renders reactively: it is safe to bind \\`content\\` to a string that grows over time (token streaming). Partial Markdown between chunks won't throw.\n- The theme deep-merges over svelte-streamdown's built-in base theme, so any element entasis doesn't explicitly restyle still renders sensibly.\n- Code and Mermaid rendering delegate to entasis's own components rather than streamdown's, keeping copy/pan/zoom behavior consistent across the app.\n";
+export declare const markdownDescription = "\n# Markdown Component\n\nRenders Markdown as themed HTML, built for streaming LLM output. Wraps the user's own [svelte-streamdown](https://github.com/) renderer, restyled with entasis design tokens so it matches the rest of the app and adapts to light and dark automatically. Incomplete/streaming Markdown (an unterminated code fence, a half-written table) is handled gracefully \u2014 nothing crashes or flashes as chunks arrive.\n\nFenced code blocks render through entasis's own Code component (syntax highlighting + copy button), and \\`mermaid\\` fences render through entasis's Mermaid component (pan/zoom, brand theming, and errorForgiving so a diagram being streamed in doesn't flash errors between chunks).\n\nCard, Stat, Stack, Grid, and GridSpan are also available as built-in MDX components. They can be used directly inside the Markdown source without passing an MDX component map.\n\n## Basic Usage\n\n\\`\\`\\`svelte\n<Markdown content={\"# Hello\\n\\nSome **bold** and _italic_ text.\"} />\n<Markdown content={message} size=\"small\" />\n<Markdown content={doc} size=\"large\" />\n\\`\\`\\`\n\n## Props\n\n### Core Props\n- **content**: string (required) - The Markdown source. Re-renders reactively as it changes; incomplete/streaming Markdown is handled gracefully (safe to bind to a growing string from a token stream).\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Type and spacing scale.\n  - **small**: compact \u2014 smaller headings, tighter block margins, \\`text-sm\\` body. Best for chat messages and dense UI.\n  - **normal**: the default reading scale (\\`text-base\\` body, shadcn-equivalent heading sizes).\n  - **large**: long-form \u2014 larger headings, roomier margins, \\`text-lg\\` body. Best for documents and articles.\n\n### Advanced Props\n- **class**: string - Additional CSS classes on the root wrapper.\n- **theme**: MarkdownThemeProps - Overrides for the root wrapper part (size variants live here).\n- **mdxComponents**: StreamdownProps['mdxComponents'] - Custom MDX components. Matching names override the built-in entasis components.\n- **...streamdown passthroughs**: every other svelte-streamdown prop is forwarded except the ones entasis controls (\\`content\\`, \\`theme\\`, \\`baseTheme\\`, \\`mergeTheme\\`, \\`class\\`, \\`code\\`, \\`mermaid\\`, \\`children\\`, \\`streamdown\\`, \\`element\\`). Use these for streamdown features such as controlling which block types are parsed, link/image handling, and other renderer options \u2014 see the svelte-streamdown docs.\n\n## Rendering\n\n- **Block elements**: headings (h1\u2013h6), paragraphs, lists (ordered, unordered, task lists), blockquotes, horizontal rules, tables, images and links are all styled from entasis tokens.\n- **GitHub alerts**: \\`> [!NOTE]\\`, \\`> [!TIP]\\`, \\`> [!IMPORTANT]\\`, \\`> [!WARNING]\\` and \\`> [!CAUTION]\\` render as colored callouts mapped to entasis info/success/primary/warning/danger muted pairings.\n- **Inline code** (\\`codespan\\`): a muted neutral chip at 0.9em of the surrounding text, readable on any surface.\n- **Lists** hang-indent: markers sit outside the text, so a wrapped line starts under the first word. **Tables** read at the surrounding text size, size their columns to content, and scroll with an edge fade when wider than their container.\n- **Code fences**: rendered by entasis's Code component \u2014 syntax highlighting and a copy button. The code block sizing follows \\`size\\`.\n- **Mermaid fences**: a fence tagged \\`mermaid\\` renders through entasis's Mermaid component with \\`errorForgiving\\` enabled, so a diagram that is still streaming in holds its last valid frame instead of flashing parse errors. Diagram size maps from the Markdown \\`size\\`.\n\n## Built-in MDX components\n\nThe built-in tags are **Card**, **Stat**, **Stack**, **Grid**, and **GridSpan**:\n\n~~~svelte\nconst content = [\n  '<Grid columns={2} gap=\"lg\">',\n  '<GridSpan columns=\"full\">',\n  '<Card title=\"Release readiness\" variant=\"outline\">',\n  '<Stack gap=\"md\">Everything is **ready**.</Stack>',\n  '</Card>',\n  '</GridSpan>',\n  '<Stat label=\"Coverage\" value=\"94%\" trend=\"+3.2%\" trendDirection=\"up\" />',\n  '<Stat label=\"Issues\" value=\"3\" trend=\"-8\" trendDirection=\"down\" />',\n  '</Grid>'\n].join('\\n');\n\n<Markdown {content} />\n~~~\n\nMDX attributes support string, number, and boolean values. Imperative event handlers and root styling or link props are not forwarded from Markdown content. Caller-provided mdxComponents take priority, and the custom mdx snippet remains the fallback for unknown tags.\n\n## Theming\n\nThe full theme is derived from entasis design tokens (translated from the shadcn preset): borders use \\`border-neutral-muted\\`, muted surfaces use \\`bg-neutral-muted\\`, secondary text uses \\`text-neutral/70\\`, and so on. Because it is token-based, the rendered Markdown adapts to light and dark automatically and stays visually consistent with the rest of the app. Per-instance tweaks to the root wrapper go through the \\`theme\\` prop; deeper element overrides fall back safely to the built-in theme.\n\n## Examples\n\n### Chat message (small)\n\\`\\`\\`svelte\n<Markdown content={assistantMessage} size=\"small\" />\n\\`\\`\\`\n\n### Long-form document (large)\n\\`\\`\\`svelte\n<Markdown content={articleBody} size=\"large\" />\n\\`\\`\\`\n\n### Streaming from an LLM\n\\`\\`\\`svelte\n<script>\n\tlet content = $state('');\n\t// append tokens as they arrive\n\tfor await (const chunk of stream) content += chunk;\n</script>\n<Markdown {content} size=\"small\" />\n\\`\\`\\`\n\n## Accessibility\n\n- Output is semantic HTML (real headings, lists, tables, \\`<a>\\`, \\`<code>\\`), so the document outline and screen-reader navigation work as expected.\n- Code blocks inherit the Code component's accessible copy button (aria-labelled, keyboard operable) and Mermaid inherits its \\`role=\"img\"\\` + aria-label and keyboard-accessible controls.\n- Color is never the only signal for GitHub alerts \u2014 each keeps its label/heading text.\n- Task-list checkboxes are disabled and have no text of their own, so each carries an accessible name from the catalog (`taskComplete` / `taskIncomplete`).\n\n## Notes\n\n- Renders reactively: it is safe to bind \\`content\\` to a string that grows over time (token streaming). Partial Markdown between chunks won't throw.\n- The theme deep-merges over svelte-streamdown's built-in base theme, so any element entasis doesn't explicitly restyle still renders sensibly.\n- Code and Mermaid rendering delegate to entasis's own components rather than streamdown's, keeping copy/pan/zoom behavior consistent across the app.\n";

package/dist/components/Markdown/markdown.mcp.js

@@ -34,7 +34,8 @@ Card, Stat, Stack, Grid, and GridSpan are also available as built-in MDX compone
 
 - **Block elements**: headings (h1–h6), paragraphs, lists (ordered, unordered, task lists), blockquotes, horizontal rules, tables, images and links are all styled from entasis tokens.
 - **GitHub alerts**: \\\`> [!NOTE]\\\`, \\\`> [!TIP]\\\`, \\\`> [!IMPORTANT]\\\`, \\\`> [!WARNING]\\\` and \\\`> [!CAUTION]\\\` render as colored callouts mapped to entasis info/success/primary/warning/danger muted pairings.
-- **Inline code** (\\\`codespan\\\`): styled as a subtle chip; its text size scales with \\\`size\\\`.
+- **Inline code** (\\\`codespan\\\`): a muted neutral chip at 0.9em of the surrounding text, readable on any surface.
+- **Lists** hang-indent: markers sit outside the text, so a wrapped line starts under the first word. **Tables** read at the surrounding text size, size their columns to content, and scroll with an edge fade when wider than their container.
 - **Code fences**: rendered by entasis's Code component — syntax highlighting and a copy button. The code block sizing follows \\\`size\\\`.
 - **Mermaid fences**: a fence tagged \\\`mermaid\\\` renders through entasis's Mermaid component with \\\`errorForgiving\\\` enabled, so a diagram that is still streaming in holds its last valid frame instead of flashing parse errors. Diagram size maps from the Markdown \\\`size\\\`.