@jackuait/blok 0.7.2 → 0.7.3-beta.2

package/types/utils/popover/popover.d.ts

@@ -79,6 +79,13 @@ export interface PopoverParams {
    */
   width?: string;
 
+  /**
+   * Minimum width of the popover in pixels (e.g. '250px').
+   * When width is 'auto', the measured content width is clamped
+   * to at least this value.
+   */
+  minWidth?: string;
+
   /**
    * Optional element whose left edge should be used for horizontal positioning.
    * When provided, the popover's left position uses this element's left coordinate

package/src/components/block-tunes/block-tune-width.ts

@@ -1,39 +0,0 @@
-import type { API, BlockTune } from '../../../types';
-import type { MenuConfig } from '../../../types/tools/menu-config';
-import { IconWidthNarrow, IconWidthFull } from '../icons';
-
-/**
- * WidthTune — opt-in block tune for toggling editor width mode.
- *
- * Register via:
- *   import Blok, { WidthTune } from '@blok/editor'
- *   new Blok({ tools: { width: WidthTune }, tunes: ['width'] })
- */
-export class WidthTune implements BlockTune {
-  public static readonly isTune = true;
-
-  private readonly api: API;
-
-  constructor({ api }: { api: API }) {
-    this.api = api;
-  }
-
-  /**
-   * Tune's appearance in block settings menu
-   */
-  public render(): MenuConfig {
-    const current = this.api.width.get();
-
-    return {
-      name: 'toggle-width',
-      icon: current === 'full' ? IconWidthFull : IconWidthNarrow,
-      title: this.api.i18n.t('blockSettings.toggleWidth'),
-      isActive: current === 'full',
-      toggle: true,
-      closeOnActivate: true,
-      onActivate: (): void => {
-        this.api.width.toggle();
-      },
-    };
-  }
-}

package/src/components/modules/api/width.ts

@@ -1,17 +0,0 @@
-import type { Width } from '../../../../types/api';
-import { Module } from '../../__module';
-
-/**
- * API module for editor-level width mode control.
- */
-export class WidthAPI extends Module {
-  public get methods(): Width {
-    const widthManager = this.Blok.WidthManager;
-
-    return {
-      get: () => widthManager.getWidth(),
-      set: (mode) => widthManager.setWidth(mode),
-      toggle: () => widthManager.toggle(),
-    };
-  }
-}

package/src/components/modules/widthManager.ts

@@ -1,69 +0,0 @@
-import { Module } from '../__module';
-
-const DEFAULT_NARROW_WIDTH = '650px';
-const DEFAULT_FULL_WIDTH = '100%';
-const CSS_VAR = '--blok-content-width';
-
-/**
- * Manages the editor-level width mode.
- *
- * Applies a CSS custom property (--blok-content-width) to the editor wrapper
- * element, which block content elements read via CSS cascade.
- */
-export class WidthManager extends Module {
-  private currentMode: 'narrow' | 'full' = 'narrow';
-
-  /**
-   * Called by Core after all modules are constructed and wired.
-   */
-  public prepare(): void {
-    const initialMode = this.config.defaultWidth ?? 'narrow';
-    this.currentMode = initialMode;
-    this.applyWidth(initialMode);
-  }
-
-  /**
-   * Returns the current width mode.
-   */
-  public getWidth(): 'narrow' | 'full' {
-    return this.currentMode;
-  }
-
-  /**
-   * Sets the editor width mode.
-   * No-op if already in the requested mode.
-   */
-  public setWidth(mode: 'narrow' | 'full'): void {
-    if (this.currentMode === mode) {
-      return;
-    }
-    this.currentMode = mode;
-    this.applyWidth(mode);
-
-    const callback = this.config.onWidthChange;
-    if (typeof callback === 'function') {
-      callback(mode, this.resolveValue(mode));
-    }
-  }
-
-  /**
-   * Toggles between 'narrow' and 'full'.
-   */
-  public toggle(): void {
-    this.setWidth(this.currentMode === 'narrow' ? 'full' : 'narrow');
-  }
-
-  // ─── Private ───────────────────────────────────────────────────────────────
-
-  private applyWidth(mode: 'narrow' | 'full'): void {
-    const value = this.resolveValue(mode);
-    this.Blok.UI.nodes.wrapper.style.setProperty(CSS_VAR, value);
-  }
-
-  private resolveValue(mode: 'narrow' | 'full'): string {
-    if (mode === 'narrow') {
-      return this.config.narrowWidth ?? DEFAULT_NARROW_WIDTH;
-    }
-    return this.config.fullWidth ?? DEFAULT_FULL_WIDTH;
-  }
-}

package/types/api/width.d.ts

@@ -1,19 +0,0 @@
-/**
- * Describes the editor-level width mode API
- */
-export interface Width {
-  /**
-   * Returns the current width mode
-   */
-  get(): 'narrow' | 'full';
-
-  /**
-   * Sets the width mode
-   */
-  set(mode: 'narrow' | 'full'): void;
-
-  /**
-   * Toggles between 'narrow' and 'full'
-   */
-  toggle(): void;
-}