kritzel-stencil 0.2.8 → 0.2.10

package/dist/cjs/{workspace.migrations-BuN0vRGQ.js → workspace.migrations-D5sPPbQN.js}

@@ -15004,18 +15004,19 @@ class ThemeHelper {
     }
 }
 
-/** Key used to store the theme preference in localStorage. */
-const THEME_STORAGE_KEY = 'kritzel-theme';
+/** Key used to store the settings object in localStorage. */
+const SETTINGS_STORAGE_KEY = 'kritzel-settings';
 /** Default theme used when no stored preference exists. */
 const DEFAULT_THEME = 'light';
 /**
  * Manages theme state and application across the Kritzel editor.
- * Handles theme persistence, retrieval, and CSS variable application.
+ * Reads the persisted theme from the settings object in localStorage but does not write to it.
+ * Persistence is handled exclusively by the KritzelSettings component.
  *
  * The theme manager is responsible for:
- * - Storing and retrieving user theme preferences from localStorage
+ * - Reading the stored theme preference from the settings object
  * - Applying CSS custom properties to target elements
- * - Switching between light and dark themes
+ * - Switching between light and dark themes at runtime
  */
 class KritzelThemeManager {
     _core;
@@ -15024,13 +15025,13 @@ class KritzelThemeManager {
     _storageKey;
     /**
      * Creates a new KritzelThemeManager instance.
-     * Initializes the current theme from localStorage or uses the default theme.
+     * Initializes the current theme from the settings object in localStorage or uses the default theme.
      *
      * @param core - The KritzelCore instance this manager belongs to
      */
     constructor(core) {
         this._core = core;
-        this._storageKey = core.editorId ? `${THEME_STORAGE_KEY}-${core.editorId}` : THEME_STORAGE_KEY;
+        this._storageKey = core.editorId ? `${SETTINGS_STORAGE_KEY}-${core.editorId}` : SETTINGS_STORAGE_KEY;
         this._currentTheme = this.getStoredTheme();
     }
     /**
@@ -15072,7 +15073,7 @@ class KritzelThemeManager {
         return themeName === 'dark' ? darkTheme : lightTheme;
     }
     /**
-     * Gets the stored theme name from localStorage using this instance's namespaced key.
+     * Gets the stored theme name from the settings object in localStorage using this instance's namespaced key.
      *
      * @returns The stored theme name if valid, or 'light' as the default
      */
@@ -15081,13 +15082,22 @@ class KritzelThemeManager {
             return DEFAULT_THEME;
         }
         const stored = localStorage.getItem(this._storageKey);
-        if (stored === 'dark' || stored === 'light') {
-            return stored;
+        if (!stored) {
+            return DEFAULT_THEME;
+        }
+        try {
+            const parsed = JSON.parse(stored);
+            if (parsed?.theme === 'dark' || parsed?.theme === 'light') {
+                return parsed.theme;
+            }
+        }
+        catch {
+            // Invalid JSON, use default
         }
         return DEFAULT_THEME;
     }
     /**
-     * Gets the stored theme from the default (non-namespaced) localStorage key.
+     * Gets the stored theme from the default (non-namespaced) settings object in localStorage.
      * Used by static utility helpers that don't have access to a core instance.
      *
      * @returns The stored theme name if valid, or 'light' as the default
@@ -15096,33 +15106,29 @@ class KritzelThemeManager {
         if (typeof localStorage === 'undefined') {
             return DEFAULT_THEME;
         }
-        const stored = localStorage.getItem(THEME_STORAGE_KEY);
-        if (stored === 'dark' || stored === 'light') {
-            return stored;
+        const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
+        if (!stored) {
+            return DEFAULT_THEME;
         }
-        return DEFAULT_THEME;
-    }
-    /**
-     * Saves the theme name to localStorage for persistence across sessions.
-     * Does nothing if localStorage is not available (e.g., in SSR environments).
-     *
-     * @param themeName - The theme name to save ('light' or 'dark')
-     */
-    saveTheme(themeName) {
-        if (typeof localStorage === 'undefined') {
-            return;
+        try {
+            const parsed = JSON.parse(stored);
+            if (parsed?.theme === 'dark' || parsed?.theme === 'light') {
+                return parsed.theme;
+            }
         }
-        localStorage.setItem(this._storageKey, themeName);
+        catch {
+            // Invalid JSON, use default
+        }
+        return DEFAULT_THEME;
     }
     /**
-     * Sets the current theme, persists it to storage, and applies it to the target element.
-     * This is the primary method for changing themes at runtime.
+     * Sets the current theme and applies it to the target element.
+     * Does not persist the theme — persistence is handled by the KritzelSettings component.
      *
      * @param themeName - The theme name to set ('light' or 'dark')
      */
     setTheme(themeName) {
         this._currentTheme = themeName;
-        this.saveTheme(themeName);
         if (this._targetElement) {
             this.applyTheme(themeName);
         }
@@ -20954,25 +20960,33 @@ class KritzelTextTool extends KritzelBaseTool {
     /** Backing field for {@link opacity}. */
     _opacity = 1;
     /** The font family for new text objects. */
-    get fontFamily() { return this._fontFamily; }
+    get fontFamily() {
+        return this._core?.store?.activeText?.fontFamily ?? this._fontFamily;
+    }
     set fontFamily(value) {
         this._fontFamily = value;
         this.applyToActiveText({ fontFamily: value });
     }
     /** The font size for new text objects in pixels. */
-    get fontSize() { return this._fontSize; }
+    get fontSize() {
+        return this._core?.store?.activeText?.fontSize ?? this._fontSize;
+    }
     set fontSize(value) {
         this._fontSize = value;
         this.applyToActiveText({ fontSize: value });
     }
     /** The font color for new text objects (supports theme-aware light/dark colors). */
-    get fontColor() { return this._fontColor; }
+    get fontColor() {
+        return this._core?.store?.activeText?.fontColor ?? this._fontColor;
+    }
     set fontColor(value) {
         this._fontColor = value;
         this.applyToActiveText({ fontColor: value });
     }
     /** The opacity of new text objects (0-1). */
-    get opacity() { return this._opacity; }
+    get opacity() {
+        return this._core?.store?.activeText?.opacity ?? this._opacity;
+    }
     set opacity(value) {
         this._opacity = value;
         this.applyToActiveText({ opacity: value });

package/dist/collection/classes/managers/theme.manager.js

@@ -1,18 +1,19 @@
 import { lightTheme } from "../../themes/light-theme";
 import { darkTheme } from "../../themes/dark-theme";
 import { ThemeHelper } from "../../helpers/theme.helper";
-/** Key used to store the theme preference in localStorage. */
-const THEME_STORAGE_KEY = 'kritzel-theme';
+/** Key used to store the settings object in localStorage. */
+const SETTINGS_STORAGE_KEY = 'kritzel-settings';
 /** Default theme used when no stored preference exists. */
 const DEFAULT_THEME = 'light';
 /**
  * Manages theme state and application across the Kritzel editor.
- * Handles theme persistence, retrieval, and CSS variable application.
+ * Reads the persisted theme from the settings object in localStorage but does not write to it.
+ * Persistence is handled exclusively by the KritzelSettings component.
  *
  * The theme manager is responsible for:
- * - Storing and retrieving user theme preferences from localStorage
+ * - Reading the stored theme preference from the settings object
  * - Applying CSS custom properties to target elements
- * - Switching between light and dark themes
+ * - Switching between light and dark themes at runtime
  */
 export class KritzelThemeManager {
     _core;
@@ -21,13 +22,13 @@ export class KritzelThemeManager {
     _storageKey;
     /**
      * Creates a new KritzelThemeManager instance.
-     * Initializes the current theme from localStorage or uses the default theme.
+     * Initializes the current theme from the settings object in localStorage or uses the default theme.
      *
      * @param core - The KritzelCore instance this manager belongs to
      */
     constructor(core) {
         this._core = core;
-        this._storageKey = core.editorId ? `${THEME_STORAGE_KEY}-${core.editorId}` : THEME_STORAGE_KEY;
+        this._storageKey = core.editorId ? `${SETTINGS_STORAGE_KEY}-${core.editorId}` : SETTINGS_STORAGE_KEY;
         this._currentTheme = this.getStoredTheme();
         void this._core;
     }
@@ -70,7 +71,7 @@ export class KritzelThemeManager {
         return themeName === 'dark' ? darkTheme : lightTheme;
     }
     /**
-     * Gets the stored theme name from localStorage using this instance's namespaced key.
+     * Gets the stored theme name from the settings object in localStorage using this instance's namespaced key.
      *
      * @returns The stored theme name if valid, or 'light' as the default
      */
@@ -79,13 +80,22 @@ export class KritzelThemeManager {
             return DEFAULT_THEME;
         }
         const stored = localStorage.getItem(this._storageKey);
-        if (stored === 'dark' || stored === 'light') {
-            return stored;
+        if (!stored) {
+            return DEFAULT_THEME;
+        }
+        try {
+            const parsed = JSON.parse(stored);
+            if (parsed?.theme === 'dark' || parsed?.theme === 'light') {
+                return parsed.theme;
+            }
+        }
+        catch {
+            // Invalid JSON, use default
         }
         return DEFAULT_THEME;
     }
     /**
-     * Gets the stored theme from the default (non-namespaced) localStorage key.
+     * Gets the stored theme from the default (non-namespaced) settings object in localStorage.
      * Used by static utility helpers that don't have access to a core instance.
      *
      * @returns The stored theme name if valid, or 'light' as the default
@@ -94,33 +104,29 @@ export class KritzelThemeManager {
         if (typeof localStorage === 'undefined') {
             return DEFAULT_THEME;
         }
-        const stored = localStorage.getItem(THEME_STORAGE_KEY);
-        if (stored === 'dark' || stored === 'light') {
-            return stored;
+        const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
+        if (!stored) {
+            return DEFAULT_THEME;
         }
-        return DEFAULT_THEME;
-    }
-    /**
-     * Saves the theme name to localStorage for persistence across sessions.
-     * Does nothing if localStorage is not available (e.g., in SSR environments).
-     *
-     * @param themeName - The theme name to save ('light' or 'dark')
-     */
-    saveTheme(themeName) {
-        if (typeof localStorage === 'undefined') {
-            return;
+        try {
+            const parsed = JSON.parse(stored);
+            if (parsed?.theme === 'dark' || parsed?.theme === 'light') {
+                return parsed.theme;
+            }
+        }
+        catch {
+            // Invalid JSON, use default
         }
-        localStorage.setItem(this._storageKey, themeName);
+        return DEFAULT_THEME;
     }
     /**
-     * Sets the current theme, persists it to storage, and applies it to the target element.
-     * This is the primary method for changing themes at runtime.
+     * Sets the current theme and applies it to the target element.
+     * Does not persist the theme — persistence is handled by the KritzelSettings component.
      *
      * @param themeName - The theme name to set ('light' or 'dark')
      */
     setTheme(themeName) {
         this._currentTheme = themeName;
-        this.saveTheme(themeName);
         if (this._targetElement) {
             this.applyTheme(themeName);
         }

package/dist/collection/classes/tools/text-tool.class.js

@@ -19,25 +19,33 @@ export class KritzelTextTool extends KritzelBaseTool {
     /** Backing field for {@link opacity}. */
     _opacity = 1;
     /** The font family for new text objects. */
-    get fontFamily() { return this._fontFamily; }
+    get fontFamily() {
+        return this._core?.store?.activeText?.fontFamily ?? this._fontFamily;
+    }
     set fontFamily(value) {
         this._fontFamily = value;
         this.applyToActiveText({ fontFamily: value });
     }
     /** The font size for new text objects in pixels. */
-    get fontSize() { return this._fontSize; }
+    get fontSize() {
+        return this._core?.store?.activeText?.fontSize ?? this._fontSize;
+    }
     set fontSize(value) {
         this._fontSize = value;
         this.applyToActiveText({ fontSize: value });
     }
     /** The font color for new text objects (supports theme-aware light/dark colors). */
-    get fontColor() { return this._fontColor; }
+    get fontColor() {
+        return this._core?.store?.activeText?.fontColor ?? this._fontColor;
+    }
     set fontColor(value) {
         this._fontColor = value;
         this.applyToActiveText({ fontColor: value });
     }
     /** The opacity of new text objects (0-1). */
-    get opacity() { return this._opacity; }
+    get opacity() {
+        return this._core?.store?.activeText?.opacity ?? this._opacity;
+    }
     set opacity(value) {
         this._opacity = value;
         this.applyToActiveText({ opacity: value });

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."
+                        }]
+                }
             }
         };
     }