kritzel-stencil 0.2.9 → 0.2.11

package/dist/collection/components/core/kritzel-editor/kritzel-editor.js

@@ -279,6 +279,9 @@ export class KritzelEditor {
     }
     onCurrentThemeChange() {
         setTimeout(() => this.setOsSpecificCssVariables(), 0);
+        if (this.engineRef) {
+            this.engineRef.saveSettings(this.currentSettingsConfig);
+        }
     }
     onTouchStart(event) {
         if (event.cancelable) {
@@ -555,6 +558,9 @@ export class KritzelEditor {
         this.viewportBoundaryBottom = event.detail.viewportBoundaryBottom ?? Infinity;
         this.debugInfo = event.detail.debugInfo;
         this.themeChange.emit(event.detail.theme);
+        if (this.engineRef) {
+            this.engineRef.saveSettings(event.detail);
+        }
     }
     get moreMenuItems() {
         return [
@@ -677,6 +683,19 @@ export class KritzelEditor {
     async loadShortcuts() {
         this.shortcuts = await this.engineRef.getDisplayableShortcuts();
     }
+    get currentSettingsConfig() {
+        return {
+            scaleMin: this.scaleMin,
+            scaleMax: this.scaleMax,
+            lockDrawingScale: this.lockDrawingScale,
+            theme: this.currentTheme,
+            viewportBoundaryLeft: this.viewportBoundaryLeft,
+            viewportBoundaryRight: this.viewportBoundaryRight,
+            viewportBoundaryTop: this.viewportBoundaryTop,
+            viewportBoundaryBottom: this.viewportBoundaryBottom,
+            debugInfo: this.debugInfo,
+        };
+    }
     getContentObjects(objects) {
         return objects.filter(obj => !(obj instanceof KritzelSelectionGroup) && !(obj instanceof KritzelSelectionBox));
     }
@@ -723,27 +742,27 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '6e832b0036dbc0d36aa70b297cf73cceafbaa846' }, h("div", { key: '48e99e354326781792798fdcc2b07a1b5bbc8cca', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '980bf87558891a8b20030be4b6d0c32ee568ca4d', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '59636e148d71c54e51f17095dfec2754d63f1692', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '11f17eef609d3d3ece1ead3cf51524e690f4a2eb', ref: el => {
+        return (h(Host, { key: 'e259a79d0fb8e39be29f338c78b3b686c82790ff' }, h("div", { key: '2aa5768df3fe0442ff4b032c1f3defa3e2414d4b', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '6bade436347fba887007843ed3ad71f85ea4acb0', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'cdbf4c27695a5daefe9548a642a9dcd0aff7a77b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'e0ac833bd839c04d90c8788663ea0afd6aa35c39', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: 'b9852a78ed062ca7026b8d0da44263fb0a64d8cc', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: '396ed985b464306a845a4ef4f54782ccc42bd344', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'f3e33d794033eb5fdbde8c4553c744da61eefc51', class: "top-right-buttons" }, h("kritzel-settings", { key: '466ac8a5d110feb46472c3207f4a73e9ce37e148', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '67fdbff9c0259c02bd02bc1342856bc4bdac6d9f', class: "top-right-buttons" }, h("kritzel-settings", { key: '08e1bbfc902e8fe24395babef675654d84bc2dfc', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'c6e0eca3baca940f9160ca02989d5c27410ccc59', ref: el => {
+            }, shortcuts: this.shortcuts, settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'e3250aaecf428bf763aefea11167b72587cee52d', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'b66a7736b9ac0942873e5bdc1677228cd53d57d6', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '4ab0b49bd43f428fb1ade5d5d9836d846355d92f', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '04d6d43b60ad1bd3272dfb1e09aa3efb9602c42e', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: '7ca482736a2253d95dffc369de1db1d14d207c35', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'c5ae3f2e981d980fd35380424036acdc29b0fe53', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '6ba93cfeb8eb28d6e7a7c0d8f6813300bd14bd2b', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '4efef69fc7c1b443f6e12fdcda5ed8d26dbebcd3', user: this.user }), shouldShowLoginButton && h("kritzel-button", { key: '54208a3e130fe41f7429516d52f166b08de7e24c', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), h("kritzel-more-menu", { key: 'b5a6f5e0e5465655d109ee9047cba97200f94639', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'ee32c5f54395db794ab77ecd0f2e9657db6765c0', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'f72b412715d0ffd9a8038ade192d894623fc98fc', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'b24a52c160d828218d949ac1d8b9edd9b3c00535', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -1236,6 +1236,31 @@ export class KritzelEngine {
         this._isAssetStorageInitialized = false;
         await this.initializeSyncAndWorkspace();
     }
+    /**
+     * Persists the given settings object to localStorage using the namespaced storage key.
+     * @param settings - The settings configuration to persist.
+     */
+    async saveSettings(settings) {
+        const key = this.core.getStorageKey('kritzel-settings');
+        localStorage.setItem(key, JSON.stringify(settings));
+    }
+    /**
+     * Loads the persisted settings object from localStorage.
+     * @returns The stored settings, or null if nothing is stored or the value is invalid.
+     */
+    async loadSettings() {
+        const key = this.core.getStorageKey('kritzel-settings');
+        const stored = localStorage.getItem(key);
+        if (!stored) {
+            return null;
+        }
+        try {
+            return JSON.parse(stored);
+        }
+        catch {
+            return null;
+        }
+    }
     core;
     viewport;
     contextMenuHandler;
@@ -4470,6 +4495,66 @@ export class KritzelEngine {
                     "text": "Reinitializes sync by performing a full teardown and re-initialization.\nDestroys the current Yjs documents and providers, then rebuilds everything\nfrom the current syncConfig. Data reloads from IndexedDB nearly instantly.\nCall this after updating the syncConfig prop (e.g. after authentication state changes).",
                     "tags": []
                 }
+            },
+            "saveSettings": {
+                "complexType": {
+                    "signature": "(settings: KritzelSettingsConfig) => Promise<void>",
+                    "parameters": [{
+                            "name": "settings",
+                            "type": "KritzelSettingsConfig",
+                            "docs": "- The settings configuration to persist."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelSettingsConfig": {
+                            "location": "import",
+                            "path": "../../../interfaces/settings.interface",
+                            "id": "src/interfaces/settings.interface.ts::KritzelSettingsConfig",
+                            "referenceLocation": "KritzelSettingsConfig"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Persists the given settings object to localStorage using the namespaced storage key.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "settings - The settings configuration to persist."
+                        }]
+                }
+            },
+            "loadSettings": {
+                "complexType": {
+                    "signature": "() => Promise<Partial<KritzelSettingsConfig> | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "KritzelSettingsConfig": {
+                            "location": "import",
+                            "path": "../../../interfaces/settings.interface",
+                            "id": "src/interfaces/settings.interface.ts::KritzelSettingsConfig",
+                            "referenceLocation": "KritzelSettingsConfig"
+                        }
+                    },
+                    "return": "Promise<Partial<KritzelSettingsConfig>>"
+                },
+                "docs": {
+                    "text": "Loads the persisted settings object from localStorage.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The stored settings, or null if nothing is stored or the value is invalid."
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css

@@ -2,6 +2,11 @@
   display: contents;
 }
 
+.dialog-content {
+  text-align: start;
+  line-height: normal;
+}
+
 .backdrop {
   position: fixed;
   top: 0;
@@ -71,6 +76,30 @@
   border-radius: 0;
 }
 
+/*
+ * Contained-mobile: when the wrapping container itself is mobile-sized, the
+ * dialog fills the container fully (mirrors the viewport fullscreen-on-mobile
+ * behavior). The actual sizing is set inline by JS based on the container
+ * rect; here we just remove decorations and ensure body flex layout.
+ */
+.backdrop.contained-fullscreen {
+  background-color: transparent;
+}
+
+.dialog-content.contained-fullscreen {
+  border-radius: 0;
+}
+
+.dialog-content.contained-fullscreen .dialog-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-content.contained-fullscreen .dialog-body ::slotted(*) {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Responsive: auto fullscreen on mobile when enabled (portrait) */
 @media (max-width: 576px),
   (max-height: 576px) and (orientation: landscape) {

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.js

@@ -20,8 +20,12 @@ export class KritzelDialog {
     size = 'medium';
     /** Whether to automatically go fullscreen on mobile viewports */
     fullscreenOnMobile = true;
+    /** Constrain the dialog to its nearest editor/container ancestor instead of the viewport. */
+    contained = false;
     isAnimating = false;
     mobileLockedHeight = null;
+    containerRect = null;
+    containerBorderRadius = null;
     /** Emitted when the dialog opens */
     dialogOpen;
     /** Emitted when the dialog closes */
@@ -29,6 +33,9 @@ export class KritzelDialog {
     previousOverflow = '';
     previousActiveElement = null;
     visualViewportListenersAttached = false;
+    containerElement = null;
+    containerResizeObserver = null;
+    containerTrackingFrame = null;
     handleIsOpenChange(newValue) {
         if (newValue) {
             this.openDialog();
@@ -78,13 +85,19 @@ export class KritzelDialog {
     }
     disconnectedCallback() {
         this.removeVisualViewportListeners();
+        this.stopContainerTracking();
         this.restoreBodyScroll();
     }
     openDialog() {
         this.isAnimating = true;
         this.previousActiveElement = document.activeElement;
-        this.lockBodyScroll();
-        this.addVisualViewportListeners();
+        if (this.contained) {
+            this.startContainerTracking();
+        }
+        else {
+            this.lockBodyScroll();
+            this.addVisualViewportListeners();
+        }
         this.lockMobileViewportHeight();
         this.dialogOpen.emit();
         if (this.autoFocus) {
@@ -99,9 +112,106 @@ export class KritzelDialog {
     closeDialog() {
         this.restoreBodyScroll();
         this.removeVisualViewportListeners();
+        this.stopContainerTracking();
         this.mobileLockedHeight = null;
         this.returnFocusToPreviousElement();
     }
+    findContainerElement() {
+        // Walk up the composed DOM (crossing shadow roots) and return the first
+        // ancestor that opts into containing dialogs. We accept either an explicit
+        // [data-kritzel-dialog-container] marker or the kritzel-editor host so any
+        // consumer can opt in without modifying the editor itself.
+        let node = this.host;
+        while (node) {
+            if (node instanceof HTMLElement) {
+                if (node.hasAttribute('data-kritzel-dialog-container') || node.tagName === 'KRITZEL-EDITOR') {
+                    return node;
+                }
+            }
+            const parent = node.parentNode;
+            if (parent) {
+                node = parent;
+            }
+            else if (node instanceof ShadowRoot) {
+                node = node.host;
+            }
+            else {
+                node = null;
+            }
+        }
+        return null;
+    }
+    startContainerTracking() {
+        this.containerElement = this.findContainerElement();
+        if (!this.containerElement) {
+            // No container found — fall back to viewport behavior.
+            this.containerRect = null;
+            return;
+        }
+        this.updateContainerRect();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.containerResizeObserver = new ResizeObserver(() => this.updateContainerRect());
+            this.containerResizeObserver.observe(this.containerElement);
+        }
+        window.addEventListener('resize', this.handleContainerTrackingEvent, { passive: true });
+        window.addEventListener('scroll', this.handleContainerTrackingEvent, { capture: true, passive: true });
+    }
+    stopContainerTracking() {
+        if (this.containerResizeObserver) {
+            this.containerResizeObserver.disconnect();
+            this.containerResizeObserver = null;
+        }
+        window.removeEventListener('resize', this.handleContainerTrackingEvent);
+        window.removeEventListener('scroll', this.handleContainerTrackingEvent, { capture: true });
+        if (this.containerTrackingFrame !== null) {
+            cancelAnimationFrame(this.containerTrackingFrame);
+            this.containerTrackingFrame = null;
+        }
+        this.containerElement = null;
+        this.containerRect = null;
+        this.containerBorderRadius = null;
+    }
+    handleContainerTrackingEvent = () => {
+        if (this.containerTrackingFrame !== null)
+            return;
+        this.containerTrackingFrame = requestAnimationFrame(() => {
+            this.containerTrackingFrame = null;
+            this.updateContainerRect();
+        });
+    };
+    updateContainerRect() {
+        if (!this.containerElement)
+            return;
+        const rect = this.containerElement.getBoundingClientRect();
+        const next = { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
+        const prev = this.containerRect;
+        if (!prev || prev.top !== next.top || prev.left !== next.left || prev.width !== next.width || prev.height !== next.height) {
+            this.containerRect = next;
+        }
+        // Look for the nearest visually-rounded ancestor (the container itself or
+        // any ancestor up to the document) so the backdrop matches wrappers that
+        // round their corners around the editor.
+        const radius = this.findVisualBorderRadius(this.containerElement);
+        if (this.containerBorderRadius !== radius) {
+            this.containerBorderRadius = radius;
+        }
+    }
+    findVisualBorderRadius(start) {
+        let node = start;
+        while (node && node !== document.body && node !== document.documentElement) {
+            const computed = window.getComputedStyle(node);
+            const tl = computed.borderTopLeftRadius;
+            const tr = computed.borderTopRightRadius;
+            const br = computed.borderBottomRightRadius;
+            const bl = computed.borderBottomLeftRadius;
+            const isZero = (v) => !v || v === '0px' || v === '0%';
+            if (!(isZero(tl) && isZero(tr) && isZero(br) && isZero(bl))) {
+                return `${tl} ${tr} ${br} ${bl}`;
+            }
+            node = node.parentElement;
+        }
+        return null;
+    }
     emitClose(reason) {
         this.dialogClose.emit({ reason });
     }
@@ -110,6 +220,12 @@ export class KritzelDialog {
         document.body.style.overflow = 'hidden';
     }
     lockMobileViewportHeight() {
+        // Skip mobile viewport height locking when contained — the dialog is sized
+        // by its wrapper, not the viewport.
+        if (this.contained) {
+            this.mobileLockedHeight = null;
+            return;
+        }
         // Only lock height on mobile when fullscreenOnMobile is enabled.
         // Use the smaller dimension so landscape phones (wide but short) are also detected.
         const viewportWidth = this.getViewportWidth();
@@ -244,15 +360,73 @@ export class KritzelDialog {
             return null;
         return (h("div", { class: "dialog-footer" }, h("slot", { name: "footer" })));
     }
+    getBackdropStyle() {
+        if (!this.contained || !this.containerRect)
+            return undefined;
+        const { top, left, width, height } = this.containerRect;
+        const style = {
+            top: `${top}px`,
+            left: `${left}px`,
+            right: 'auto',
+            bottom: 'auto',
+            width: `${width}px`,
+            height: `${height}px`,
+        };
+        if (this.containerBorderRadius) {
+            style.borderRadius = this.containerBorderRadius;
+            // Ensure rounded corners actually clip the inner dialog content.
+            style.overflow = 'hidden';
+        }
+        return style;
+    }
+    getDialogContentStyle() {
+        const style = {};
+        // In contained mode, cap the dialog dimensions to the container so the
+        // declared widths/heights of size variants cannot overflow the wrapper.
+        if (this.contained && this.containerRect) {
+            const { width, height } = this.containerRect;
+            if (this.isContainerMobile()) {
+                // Mobile-sized container: behave like fullscreen-on-mobile but scoped
+                // to the container instead of the viewport (works in any orientation).
+                style.width = `${width}px`;
+                style.height = `${height}px`;
+                style.maxWidth = `${width}px`;
+                style.maxHeight = `${height}px`;
+                style.borderRadius = '0';
+            }
+            else {
+                // Leave a small margin so the dialog visibly sits within the container.
+                const maxWidth = Math.max(0, width - 32);
+                const maxHeight = Math.max(0, height - 32);
+                style.maxWidth = `${maxWidth}px`;
+                style.maxHeight = `${maxHeight}px`;
+            }
+        }
+        if (this.mobileLockedHeight) {
+            style.height = this.mobileLockedHeight;
+            style.maxHeight = this.mobileLockedHeight;
+        }
+        return Object.keys(style).length > 0 ? style : undefined;
+    }
+    isContainerMobile() {
+        if (!this.fullscreenOnMobile || !this.containerRect)
+            return false;
+        // Match the existing viewport media-query threshold: container is "mobile"
+        // when its smaller dimension is <= 576px. This handles both portrait and
+        // landscape wrappers symmetrically.
+        return Math.min(this.containerRect.width, this.containerRect.height) <= 576;
+    }
     render() {
         if (!this.isOpen)
             return null;
-        return (h(Host, null, h("div", { class: { backdrop: true, 'is-animating': this.isAnimating }, onClick: this.handleBackdropClick }, h("div", { class: {
+        const containerFullscreen = this.contained && this.isContainerMobile();
+        return (h(Host, null, h("div", { class: { backdrop: true, 'is-animating': this.isAnimating, 'contained-fullscreen': containerFullscreen }, style: this.getBackdropStyle(), onClick: this.handleBackdropClick }, h("div", { class: {
                 'dialog-content': true,
                 'is-animating': this.isAnimating,
                 [`size-${this.size}`]: true,
                 'fullscreen-on-mobile': this.fullscreenOnMobile,
-            }, style: this.mobileLockedHeight ? { height: this.mobileLockedHeight, maxHeight: this.mobileLockedHeight } : undefined, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle ? 'dialog-title' : undefined, tabIndex: -1, onClick: this.handleContentClick }, this.renderHeader(), h("div", { class: "dialog-body" }, h("slot", null)), this.renderFooter()))));
+                'contained-fullscreen': containerFullscreen,
+            }, style: this.getDialogContentStyle(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle ? 'dialog-title' : undefined, tabIndex: -1, onClick: this.handleContentClick }, this.renderHeader(), h("div", { class: "dialog-body" }, h("slot", null)), this.renderFooter()))));
     }
     static get is() { return "kritzel-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -446,13 +620,35 @@ export class KritzelDialog {
                 "reflect": false,
                 "attribute": "fullscreen-on-mobile",
                 "defaultValue": "true"
+            },
+            "contained": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Constrain the dialog to its nearest editor/container ancestor instead of the viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "contained",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "isAnimating": {},
-            "mobileLockedHeight": {}
+            "mobileLockedHeight": {},
+            "containerRect": {},
+            "containerBorderRadius": {}
         };
     }
     static get events() {

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   user-select: none;
-  max-width: calc(100vw - 16px);
+  max-width: 100%;
 }
 
 :host(.mobile) {

package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js

@@ -21,7 +21,7 @@ export class KritzelCurrentUserDialog {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: '49dd037cca0741cc949f20d9d44cfd028492dc60', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: 'ddcdfb82cc0c896025559888d475ab5c9ad59b4c', class: "user-info" }, h("kritzel-avatar", { key: '4d164b784cde6787d26ac164c7450c0352e6a7cb', user: this.user, size: 80 }), displayName && h("div", { key: '13ad719d8bd90cd608c78438fccbb38ed1d5e5ba', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'df360afd434293d9c9d5fcf114713e0a6925a78e', class: "user-email" }, this.user.email)))));
+        return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: 'cd3daa7abd53c10852d63a2fe53d919414cd8904', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '94d0a691ede73135e6cf4ef144c13e52e410ffbe', class: "user-info" }, h("kritzel-avatar", { key: 'e57592d2f3663b593534055be5aae1b224fa8906', user: this.user, size: 80 }), displayName && h("div", { key: '237db2d0608ee49ea70e5282b61a59077f0f4595', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'd821e8171530b92ce6f1781c1145b611d3c533d0', class: "user-email" }, this.user.email)))));
     }
     static get is() { return "kritzel-current-user-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-export/kritzel-export.js

@@ -65,7 +65,7 @@ export class KritzelExport {
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: '01aae6955be6828945b20e8a8a4d7c49eb92b2e2', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, h("div", { key: '57c6f6de2917fb51201d737c4d0e1877f5671466', class: "export-content" }, h("kritzel-pill-tabs", { key: '800b8c058078ba1bba06b5edbaf370c4fa3c6806', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '99fb3b3d8dc42fdb47a3110e8403dde4e508e6cd', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
+        return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: 'f80cbe3fa709ed7e046303034b7345ca1f94bc48', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e7968807c2b67ebfc800cb1694b4e34af245ffba', class: "export-content" }, h("kritzel-pill-tabs", { key: 'eac62225c4c42431296f330791a1fb2212f579f5', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '3489affca39a901c2ef05a0698cdf51c0a7f6d1a', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
     }
     static get is() { return "kritzel-export"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js

@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '09ece6fb5949fc8b204f29cd931c583e525590e1', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: '57218d7762734929691b82700c31922f5a4991c8', class: "login-content" }, this.subtitle && (h("p", { key: '9ee071786f393857cd6a666e395526a139359d60', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'a487687345aabcfb55976437ddc85feb464f0cae', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '54844ffa772a211515c1ef3e6834ec45f7f3d035', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'd9b981b6904c58bc39173ae37ee5c4c0ee329005', class: "login-content" }, this.subtitle && (h("p", { key: 'd4d200060507d2b8b755796d8313acdfc7e2f587', class: "login-subtitle" }, this.subtitle)), h("div", { key: '3dc1e3c070e62d026eb16ceb48eb63c94bc2bed0', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,