kritzel-stencil 0.3.16 → 0.3.18

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

@@ -0,0 +1,189 @@
+import { LocalizationHelper } from "../../helpers/localization.helper";
+import { EN_LOCALE } from "../../locales/en-locale";
+import { DE_LOCALE } from "../../locales/de-locale";
+import { FR_LOCALE } from "../../locales/fr-locale";
+/** Key used to store the settings object in localStorage. */
+const SETTINGS_STORAGE_KEY = 'kritzel-settings';
+/** Default locale used when no stored preference exists. */
+const DEFAULT_LOCALE = 'en';
+/**
+ * Manages localization state and term resolution across the Kritzel editor.
+ *
+ * The manager is owned per {@link KritzelCore} instance (like the theme manager)
+ * so that multiple editors on the same page can use different languages in
+ * isolation.
+ *
+ * Term resolution follows a deterministic fallback chain for each key:
+ * 1. active locale's custom terms
+ * 2. active locale's built-in terms
+ * 3. fallback locale's custom terms
+ * 4. fallback locale's built-in terms
+ * 5. the key itself (last resort)
+ *
+ * Persistence of the selected locale is handled by the KritzelSettings
+ * component; this manager only reads the stored value.
+ */
+export class KritzelLocalizationManager {
+    _core;
+    _storageKey;
+    /** Built-in locale definitions, keyed by locale code. */
+    _builtinLocales = new Map();
+    /** Consumer-registered locale definitions, keyed by locale code. */
+    _customLocales = new Map();
+    _currentLocale = DEFAULT_LOCALE;
+    _fallbackLocale = DEFAULT_LOCALE;
+    /**
+     * Creates a new KritzelLocalizationManager instance.
+     * Seeds the built-in locales and initializes the current locale from the
+     * settings object in localStorage (or the default locale).
+     *
+     * @param core - The KritzelCore instance this manager belongs to
+     */
+    constructor(core) {
+        this._core = core;
+        this._storageKey = core.editorId ? `${SETTINGS_STORAGE_KEY}-${core.editorId}` : SETTINGS_STORAGE_KEY;
+        this._builtinLocales.set(EN_LOCALE.code, EN_LOCALE);
+        this._builtinLocales.set(DE_LOCALE.code, DE_LOCALE);
+        this._builtinLocales.set(FR_LOCALE.code, FR_LOCALE);
+        this._currentLocale = this.getStoredLocale();
+    }
+    /**
+     * Gets the currently active locale code.
+     */
+    get currentLocale() {
+        return this._currentLocale;
+    }
+    /**
+     * Gets the fallback locale code used when a term is missing from the active locale.
+     */
+    get fallbackLocale() {
+        return this._fallbackLocale;
+    }
+    /**
+     * Sets the fallback locale code used when a term is missing from the active locale.
+     *
+     * @param code - The fallback locale code
+     */
+    setFallbackLocale(code) {
+        this._fallbackLocale = code;
+    }
+    /**
+     * Registers consumer-provided locale definitions. Definitions are merged by
+     * code; registering the same code again replaces the previous definition.
+     * A registered locale may provide a partial set of terms — missing terms are
+     * resolved through the fallback chain.
+     *
+     * @param locales - The locale definitions to register
+     */
+    registerLocales(locales) {
+        for (const locale of locales) {
+            this._customLocales.set(locale.code, locale);
+        }
+    }
+    /**
+     * Sets the active locale and triggers a re-render so UI strings update.
+     *
+     * @param code - The locale code to activate
+     */
+    setLocale(code) {
+        this._currentLocale = code;
+        this._core.rerender();
+    }
+    /**
+     * Gets the list of available locale codes (built-in and registered).
+     */
+    getAvailableLocales() {
+        return Array.from(new Set([...this._builtinLocales.keys(), ...this._customLocales.keys()]));
+    }
+    /**
+     * Gets the available locales as `{ code, label }` pairs for use in a selector.
+     * A registered locale's label takes precedence over the built-in label; the
+     * code is used as the label when none is provided.
+     */
+    getAvailableLocaleOptions() {
+        return this.getAvailableLocales().map(code => ({ code, label: this.getLocaleLabel(code) }));
+    }
+    /**
+     * Gets the display label for a locale code, falling back to the code itself.
+     *
+     * @param code - The locale code
+     */
+    getLocaleLabel(code) {
+        return this._customLocales.get(code)?.label ?? this._builtinLocales.get(code)?.label ?? code;
+    }
+    /**
+     * Resolves a term key to its translated string for the active locale and
+     * interpolates any `{placeholder}` tokens.
+     *
+     * @param key - The term key to resolve
+     * @param vars - Optional values for `{placeholder}` interpolation
+     * @returns The translated, interpolated string (or the key if unresolved)
+     *
+     * @example
+     * manager.translate('menu.copy'); // 'Copy'
+     * manager.translate('share.expires', { date: '5/1' }); // 'Expires 5/1'
+     */
+    translate(key, vars) {
+        const resolved = this._customLocales.get(this._currentLocale)?.terms[key] ??
+            this._builtinLocales.get(this._currentLocale)?.terms[key] ??
+            this._customLocales.get(this._fallbackLocale)?.terms[key] ??
+            this._builtinLocales.get(this._fallbackLocale)?.terms[key] ??
+            key;
+        return LocalizationHelper.interpolate(resolved, vars);
+    }
+    /**
+     * Resolves every known term key for the active locale into a flat map.
+     *
+     * The key set is the union of all keys defined across the built-in and
+     * registered locales, so consumer-added keys are included. Each value is
+     * resolved through the same fallback chain as {@link translate} (without
+     * interpolation, since these are shared, variable-free UI labels).
+     *
+     * @returns A map of every term key to its resolved string for the active locale
+     */
+    getAllTerms() {
+        const keys = new Set();
+        for (const locale of [...this._builtinLocales.values(), ...this._customLocales.values()]) {
+            for (const key of Object.keys(locale.terms)) {
+                keys.add(key);
+            }
+        }
+        const result = {};
+        for (const key of keys) {
+            result[key] = this.translate(key);
+        }
+        return result;
+    }
+    /**
+     * Reads the stored locale from the settings object in localStorage using this
+     * instance's namespaced key.
+     *
+     * @returns The stored locale code if valid, or the default locale
+     */
+    getStoredLocale() {
+        if (typeof localStorage === 'undefined') {
+            return DEFAULT_LOCALE;
+        }
+        const stored = localStorage.getItem(this._storageKey);
+        if (!stored) {
+            return DEFAULT_LOCALE;
+        }
+        try {
+            const parsed = JSON.parse(stored);
+            if (typeof parsed?.locale === 'string') {
+                return parsed.locale;
+            }
+        }
+        catch {
+            // Invalid JSON, use default
+        }
+        return DEFAULT_LOCALE;
+    }
+    /**
+     * Cleans up the localization manager state.
+     * Provided for lifecycle parity with other managers.
+     */
+    cleanup() {
+        this._customLocales.clear();
+    }
+}

package/dist/collection/classes/objects/custom-element.class.js

@@ -1,4 +1,5 @@
 import { KritzelBaseObject } from "./base-object.class";
+import { KritzelMathHelper } from "../../helpers/math.helper";
 /**
  * Represents a custom HTML element that can be placed and manipulated on the Kritzel canvas.
  * Extends KritzelBaseObject to inherit common object functionality like positioning,
@@ -25,6 +26,7 @@ export class KritzelCustomElement extends KritzelBaseObject {
         if (config) {
             this.translateX = config.translateX || 0;
             this.translateY = config.translateY || 0;
+            this.rotation = KritzelMathHelper.degreesToRadians(config.rotation ?? 0);
             this.scale = config.scale || 1;
             this.element = config.element;
             this.height = config.height || 0;

package/dist/collection/classes/objects/group.class.js

@@ -1,5 +1,6 @@
 import { KritzelBaseObject } from "./base-object.class";
 import { KritzelClassHelper } from "../../helpers/class.helper";
+import { KritzelMathHelper } from "../../helpers/math.helper";
 /**
  * KritzelGroup represents a permanent grouping of objects that act as a single unit.
  *
@@ -14,6 +15,10 @@ import { KritzelClassHelper } from "../../helpers/class.helper";
  */
 export class KritzelGroup extends KritzelBaseObject {
     __class__ = 'KritzelGroup';
+    constructor(config) {
+        super();
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
+    }
     /**
      * IDs of child objects within this group.
      * Children can be any KritzelBaseObject, including other KritzelGroups for nesting.
@@ -65,8 +70,8 @@ export class KritzelGroup extends KritzelBaseObject {
      * @param core - The KritzelCore instance providing access to store and state management.
      * @returns A new KritzelGroup instance configured with the core context.
      */
-    static create(core) {
-        const group = new KritzelGroup();
+    static create(core, config) {
+        const group = new KritzelGroup(config);
         group._core = core;
         group.id = group.generateId();
         group.workspaceId = core.store.state.activeWorkspace.id;

package/dist/collection/classes/objects/image.class.js

@@ -1,5 +1,6 @@
 import { AssetNotFoundError } from "../providers/assets/asset-resolver.class";
 import { KritzelBaseObject } from "./base-object.class";
+import { KritzelMathHelper } from "../../helpers/math.helper";
 /**
  * Represents an image object on the canvas.
  *
@@ -103,6 +104,7 @@ export class KritzelImage extends KritzelBaseObject {
         this.y = config?.y || 0;
         this.translateX = config?.translateX || 0;
         this.translateY = config?.translateY || 0;
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
         this.scale = config?.scale || 1;
         this.width = config?.width || 0;
         this.height = config?.height || 0;
@@ -116,17 +118,18 @@ export class KritzelImage extends KritzelBaseObject {
      * @param core - The KritzelCore instance providing access to store and state management.
      * @returns A new KritzelImage instance configured with the core context.
      */
-    static create(core) {
-        const object = new KritzelImage();
+    static create(core, config) {
+        const object = new KritzelImage(config);
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
-        object.x = 0;
-        object.y = 0;
-        object.translateX = 0;
-        object.translateY = 0;
-        object.scale = object._core.store.state.scale;
+        object.x = config?.x ?? 0;
+        object.y = config?.y ?? 0;
+        object.translateX = config?.translateX ?? 0;
+        object.translateY = config?.translateY ?? 0;
+        object.scale = config?.scale ?? object._core.store.state.scale;
+        object.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
         object.zIndex = core.store.currentZIndex;
         return object;
     }

package/dist/collection/classes/objects/line.class.js

@@ -1,6 +1,7 @@
 import { KritzelBaseObject } from "./base-object.class";
 import { KritzelGeometryHelper } from "../../helpers/geometry.helper";
 import { KritzelColorHelper } from "../../helpers/color.helper";
+import { KritzelMathHelper } from "../../helpers/math.helper";
 export class KritzelLine extends KritzelBaseObject {
     __class__ = 'KritzelLine';
     startX;
@@ -60,6 +61,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.controlY = config?.controlY;
         this.translateX = config?.translateX ?? 0;
         this.translateY = config?.translateY ?? 0;
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
         this.scale = config?.scale ?? 1;
         this.strokeWidth = config?.strokeWidth ?? 4;
         this.stroke = config?.stroke ?? { light: '#000000', dark: '#ffffff' };
@@ -90,6 +92,7 @@ export class KritzelLine extends KritzelBaseObject {
         object.controlY = options?.controlY;
         object.translateX = options?.translateX ?? 0;
         object.translateY = options?.translateY ?? 0;
+        object.rotation = KritzelMathHelper.degreesToRadians(options?.rotation ?? 0);
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 4;
         object.stroke = options?.stroke ?? { light: '#000000', dark: '#ffffff' };

package/dist/collection/classes/objects/path.class.js

@@ -44,6 +44,7 @@ export class KritzelPath extends KritzelBaseObject {
         this.points = config?.points ?? [];
         this.translateX = config?.translateX ?? 0;
         this.translateY = config?.translateY ?? 0;
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
         this.scale = config?.scale ?? 1;
         this.strokeWidth = config?.strokeWidth ?? 8;
         this.fill = config?.fill ?? { light: '#000000', dark: '#ffffff' };
@@ -67,6 +68,7 @@ export class KritzelPath extends KritzelBaseObject {
         object.points = options?.points ?? [];
         object.translateX = options?.translateX ?? 0;
         object.translateY = options?.translateY ?? 0;
+        object.rotation = KritzelMathHelper.degreesToRadians(options?.rotation ?? 0);
         object.scale = options?.scale ?? 1;
         object.strokeWidth = options?.strokeWidth ?? 8;
         object.fill = options?.fill ?? { light: '#000000', dark: '#ffffff' };
@@ -116,8 +118,12 @@ export class KritzelPath extends KritzelBaseObject {
         this.height = Math.max(...this.points.map(p => p[1])) - Math.min(...this.points.map(p => p[1])) + this.strokeWidth;
         this.x = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
         this.y = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
-        this.translateX = x;
-        this.translateY = y;
+        if (x !== null) {
+            this.translateX = x;
+        }
+        if (y !== null) {
+            this.translateY = y;
+        }
         this._adjustedPoints = null;
         this._core.store.objects.update(this);
     }
@@ -323,19 +329,14 @@ export class KritzelPath extends KritzelBaseObject {
     }
     /**
      * Updates width, height, x, y, translateX, and translateY based on current points.
-     * Accounts for rotation and stroke width in the calculations.
+     * Uses the unrotated local points and stroke width for base dimensions.
      * Called during initial setup to establish the path's dimensions and position.
      */
     updateDimensions() {
-        const rotatedPoints = this.points.map(([x, y]) => {
-            const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
-            const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
-            return [rotatedX, rotatedY];
-        });
-        const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
-        const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
-        const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
-        const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
+        const minX = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
+        const minY = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
+        const maxX = Math.max(...this.points.map(p => p[0])) + this.strokeWidth / 2;
+        const maxY = Math.max(...this.points.map(p => p[1])) + this.strokeWidth / 2;
         this.width = maxX - minX + this.lineSlack;
         this.height = maxY - minY + this.lineSlack;
         this.x = minX;

package/dist/collection/classes/objects/selection-group.class.js

@@ -1,6 +1,7 @@
 import { KritzelGeometryHelper } from "../../helpers/geometry.helper";
 import { KritzelBaseObject } from "./base-object.class";
 import { KritzelClassHelper } from "../../helpers/class.helper";
+import { KritzelMathHelper } from "../../helpers/math.helper";
 /**
  * Represents a selection group that manages multiple selected objects on the canvas.
  * The selection group allows batch operations like move, resize, and rotate on multiple objects simultaneously.
@@ -8,6 +9,10 @@ import { KritzelClassHelper } from "../../helpers/class.helper";
  */
 export class KritzelSelectionGroup extends KritzelBaseObject {
     __class__ = 'KritzelSelectionGroup';
+    constructor(config) {
+        super();
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
+    }
     // Store only object IDs instead of full objects
     _objectIds = [];
     // Cached objects array - invalidated when objectIds changes
@@ -91,8 +96,8 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
      * @param core - The KritzelCore instance to associate with this selection group
      * @returns A new KritzelSelectionGroup instance configured with default settings
      */
-    static create(core) {
-        const object = new KritzelSelectionGroup();
+    static create(core, config) {
+        const object = new KritzelSelectionGroup(config);
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;

package/dist/collection/classes/objects/shape.class.js

@@ -11,6 +11,7 @@ import { addListNodes } from "prosemirror-schema-list";
 import { keymap } from "prosemirror-keymap";
 import { baseKeymap } from "prosemirror-commands";
 import { KritzelColorHelper } from "../../helpers/color.helper";
+import { KritzelMathHelper } from "../../helpers/math.helper";
 export class KritzelShape extends KritzelBaseObject {
     __class__ = 'KritzelShape';
     shapeType = ShapeType.Rectangle;
@@ -75,6 +76,7 @@ export class KritzelShape extends KritzelBaseObject {
             this.y = config.y ?? 0;
             this.translateX = config.translateX ?? 0;
             this.translateY = config.translateY ?? 0;
+            this.rotation = KritzelMathHelper.degreesToRadians(config.rotation ?? 0);
             this.width = config.width ?? 100;
             this.height = config.height ?? 100;
             this.shapeType = config.shapeType ?? ShapeType.Rectangle;
@@ -106,6 +108,7 @@ export class KritzelShape extends KritzelBaseObject {
         object.y = config?.y ?? 0;
         object.translateX = config?.translateX ?? 0;
         object.translateY = config?.translateY ?? 0;
+        object.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
         object.width = config?.width ?? 100;
         object.height = config?.height ?? 100;
         object.shapeType = config?.shapeType ?? ShapeType.Rectangle;

package/dist/collection/classes/objects/text.class.js

@@ -9,6 +9,7 @@ import { addListNodes } from "prosemirror-schema-list";
 import { keymap } from "prosemirror-keymap";
 import { baseKeymap } from "prosemirror-commands";
 import { KritzelColorHelper } from "../../helpers/color.helper";
+import { KritzelMathHelper } from "../../helpers/math.helper";
 /**
  * Represents a text object on the canvas that supports rich text editing via ProseMirror.
  * Extends the base object class to inherit common object properties and behaviors.
@@ -73,6 +74,7 @@ export class KritzelText extends KritzelBaseObject {
      */
     constructor(config) {
         super();
+        this.rotation = KritzelMathHelper.degreesToRadians(config?.rotation ?? 0);
         // Always create the editor so setContent() works immediately
         this.editor = this.createEditor();
         if (config) {
@@ -111,7 +113,7 @@ export class KritzelText extends KritzelBaseObject {
      * @param scale - Optional scale factor (defaults to current viewport scale).
      * @returns A new, fully initialized KritzelText instance.
      */
-    static create(core, fontSize, fontFamily, scale) {
+    static create(core, fontSize, fontFamily, scale, rotation) {
         const object = new KritzelText();
         object._core = core;
         object.id = object.generateId();
@@ -121,6 +123,7 @@ export class KritzelText extends KritzelBaseObject {
         object.fontFamily = fontFamily || 'Arial';
         object.translateX = 0;
         object.translateY = 0;
+        object.rotation = KritzelMathHelper.degreesToRadians(rotation ?? 0);
         const coreScale = core.store.state.scale;
         const effectiveScale = coreScale < 0 ? coreScale : 1;
         object.width = object.initialWidth / effectiveScale;

package/dist/collection/classes/registries/icon-registry.class.js

@@ -82,6 +82,7 @@ KritzelIconRegistry.registerIcons({
     'undo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
     'redo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>',
     'plus': '<svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+    'minus': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus-icon lucide-minus"><path d="M5 12h14"/></svg>',
     'ellipsis-vertical': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',
     'x': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
     'check': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>',

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

@@ -28,7 +28,7 @@ export class KritzelBrushTool extends KritzelBaseTool {
      * websocket traffic without visible quality loss — `perfect-freehand`
      * already smooths the rendered stroke.
      */
-    static MIN_POINT_DISTANCE_PX = 5;
+    static MIN_POINT_DISTANCE_PX = 3;
     /** Tracks the ID of the path currently being drawn */
     _currentPathId = null;
     /**

package/dist/collection/collection-manifest.json

@@ -11,6 +11,7 @@
     "components/core/kritzel-awareness-cursors/kritzel-awareness-cursors.js",
     "components/core/kritzel-cursor-trail/kritzel-cursor-trail.js",
     "components/core/kritzel-editor/kritzel-editor.js",
+    "components/core/kritzel-watermark/kritzel-watermark.js",
     "components/shared/kritzel-avatar/kritzel-avatar.js",
     "components/shared/kritzel-button/kritzel-button.js",
     "components/shared/kritzel-color/kritzel-color.js",
@@ -42,7 +43,8 @@
     "components/ui/kritzel-share-dialog/kritzel-share-dialog.js",
     "components/ui/kritzel-tool-config/kritzel-tool-config.js",
     "components/ui/kritzel-utility-panel/kritzel-utility-panel.js",
-    "components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js"
+    "components/ui/kritzel-workspace-manager/kritzel-workspace-manager.js",
+    "components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js"
   ],
   "mixins": [],
   "compiler": {

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

@@ -2,6 +2,7 @@ kritzel-editor{
   display: flex;
   margin: 0;
   position: relative;
+  container-type: inline-size;
   overflow: hidden;
   width: 100%;
   height: 100%;
@@ -52,6 +53,21 @@ kritzel-controls.keyboard-open {
   gap: 8px;
 }
 
+.bottom-left-buttons {
+  position: absolute;
+  left: var(--kritzel-editor-top-left-buttons-left, 14px);
+  bottom: var(--kritzel-editor-controls-bottom, 14px);
+  display: flex;
+  align-items: flex-end;
+}
+
+/* Hide the zoom panel when the editor container is narrow. */
+@container (max-width: 767px) {
+  .bottom-left-buttons {
+    display: none;
+  }
+}
+
 .top-right-button {
   display: flex;
   align-items: center;