@jackuait/blok 0.7.2 → 0.7.3-beta.2

package/src/components/utils/popover/popover-desktop.ts

@@ -3,7 +3,8 @@ import { Flipper } from '../../flipper';
 import { keyCodes } from '../../utils';
 
 import type { PopoverItem, PopoverItemRenderParamsMap } from './components/popover-item';
-import { PopoverItemSeparator, css as popoverItemCls , PopoverItemDefault } from './components/popover-item';
+import { PopoverItemSeparator, css as popoverItemCls, PopoverItemDefault, PopoverItemType } from './components/popover-item';
+import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
 import { PopoverItemHtml } from './components/popover-item/popover-item-html/popover-item-html';
 import type { SearchableItem } from './components/search-input';
 import { SearchInput, SearchInputEvent, scoreSearchMatch } from './components/search-input';
@@ -86,6 +87,20 @@ export class PopoverDesktop extends PopoverAbstract {
    */
   private originalItemOrder: Element[] | undefined;
 
+  /**
+   * Cache of promoted items built from nested children.
+   * Built once on first non-empty search, destroyed on clear/hide/destroy.
+   */
+  private promotedItemCache: {
+    items: PopoverItemDefault[];
+    parentChains: Map<PopoverItemDefault, string[]>;
+  } | null = null;
+
+  /**
+   * Temporary group separator elements injected during search.
+   */
+  private promotedSeparators: HTMLElement[] = [];
+
   /**
    * Construct the instance
    * @param params - popover params
@@ -222,7 +237,10 @@ export class PopoverDesktop extends PopoverAbstract {
     this.nodes.popover.style.setProperty(CSSVariables.PopoverHeight, measuredSize.height + 'px');
 
     if (this.params.width === undefined || this.params.width === 'auto') {
-      this.nodes.popover.style.setProperty('--width', measuredSize.width + 'px');
+      const minWidth = this.params.minWidth !== undefined ? parseFloat(this.params.minWidth) : 0;
+      const width = Math.max(measuredSize.width, minWidth);
+
+      this.nodes.popover.style.setProperty('--width', width + 'px');
     }
 
     if (!this.trigger && !this.shouldOpenBottom) {
@@ -321,6 +339,7 @@ export class PopoverDesktop extends PopoverAbstract {
    * Closes popover
    */
   public hide = (): void => {
+    this.cleanupPromotedItems();
     super.hide();
 
     this.destroyNestedPopoverIfExists();
@@ -430,6 +449,31 @@ export class PopoverDesktop extends PopoverAbstract {
     this.previouslyHoveredItem = null;
   }
 
+  /**
+   * Retrieves popover item that is the target of the specified event.
+   * Overridden to include promoted items from recursive search.
+   * @param event - event to retrieve popover item from
+   */
+  protected override getTargetItem(event: Event): PopoverItemDefault | PopoverItemHtml | undefined {
+    const allItems = this.promotedItemCache !== null
+      ? [...this.items, ...this.promotedItemCache.items]
+      : this.items;
+
+    return allItems
+      .filter((item): item is PopoverItemDefault | PopoverItemHtml =>
+        item instanceof PopoverItemDefault || item instanceof PopoverItemHtml
+      )
+      .find(item => {
+        const itemEl = item.getElement();
+
+        if (itemEl === null) {
+          return false;
+        }
+
+        return event.composedPath().includes(itemEl);
+      });
+  }
+
   /**
    * Sets CSS variable with position of item near which nested popover should be displayed.
    * Is used for correct positioning of the nested popover
@@ -577,7 +621,7 @@ export class PopoverDesktop extends PopoverAbstract {
     const actualPopoverEl: HTMLElement = queriedPopoverEl instanceof HTMLElement ? queriedPopoverEl : nestedPopoverEl;
 
     // Check if parent popover has openTop or openLeft state
-    const isParentOpenTop = this.nodes.popover.hasAttribute(DATA_ATTR.popoverOpenTop);
+    const _isParentOpenTop = this.nodes.popover.hasAttribute(DATA_ATTR.popoverOpenTop);
     const isParentOpenLeft = this.nodes.popover.hasAttribute(DATA_ATTR.popoverOpenLeft);
 
     // Apply position: absolute for nested container
@@ -598,14 +642,8 @@ export class PopoverDesktop extends PopoverAbstract {
       actualPopoverEl.style.setProperty(CSSVariables.PopoverLeft, `calc(var(--nesting-level) * (${parentWidth} - var(--nested-popover-overlap)))`);
     }
 
-    // Calculate top position based on parent open direction
-    if (isParentOpenTop) {
-      // Open upward
-      nestedContainer.style.top = 'calc(var(--trigger-item-top) - var(--popover-height) + var(--item-height) + 0.5rem + var(--nested-popover-overlap))';
-    } else {
-      // Open downward
-      nestedContainer.style.top = 'calc(var(--trigger-item-top) - var(--nested-popover-overlap))';
-    }
+    // Center nested popover vertically on the trigger item
+    nestedContainer.style.top = 'calc(var(--trigger-item-top) - var(--popover-height) / 2 + var(--item-height) / 2)';
   }
 
   /**
@@ -732,6 +770,153 @@ export class PopoverDesktop extends PopoverAbstract {
     focusedItem?.onFocus();
   };
 
+  /**
+   * Builds cache of PopoverItemDefault instances from nested children.
+   * Recursively walks the item tree to arbitrary depth.
+   * Each cached item is mapped to its parent chain for group labeling.
+   */
+  private buildPromotedItemCache(): { items: PopoverItemDefault[]; parentChains: Map<PopoverItemDefault, string[]> } {
+    const cache = {
+      items: [] as PopoverItemDefault[],
+      parentChains: new Map<PopoverItemDefault, string[]>(),
+    };
+
+    this.collectPromotedChildren(this.items, [], cache);
+
+    return cache;
+  }
+
+  /**
+   * Recursively collects default child items from items that have children.
+   * @param items - items to inspect for children
+   * @param parentChain - ancestor label chain accumulated so far
+   * @param cache - mutable cache to populate
+   */
+  private collectPromotedChildren(
+    items: PopoverItem[],
+    parentChain: string[],
+    cache: { items: PopoverItemDefault[]; parentChains: Map<PopoverItemDefault, string[]> }
+  ): void {
+    for (const item of items) {
+      if (!(item instanceof PopoverItemDefault) || !item.hasChildren) {
+        continue;
+      }
+
+      const label = item.title ?? item.name ?? '';
+      const newChain = [...parentChain, label];
+
+      this.collectDefaultChildren(item.children, newChain, cache);
+    }
+  }
+
+  /**
+   * Constructs PopoverItemDefault instances from raw params and adds them to the cache.
+   * @param childParams - raw child item params from a parent item
+   * @param parentChain - ancestor label chain for this group
+   * @param cache - mutable cache to populate
+   */
+  private collectDefaultChildren(
+    childParams: PopoverItemParams[],
+    parentChain: string[],
+    cache: { items: PopoverItemDefault[]; parentChains: Map<PopoverItemDefault, string[]> }
+  ): void {
+    for (const childParam of childParams) {
+      if (childParam.type !== undefined && childParam.type !== PopoverItemType.Default) {
+        continue;
+      }
+
+      const childInstance = new PopoverItemDefault(childParam);
+
+      if (childInstance.name !== undefined && this.isNamePermanentlyHidden(childInstance.name)) {
+        childInstance.destroy();
+        continue;
+      }
+
+      cache.items.push(childInstance);
+      cache.parentChains.set(childInstance, parentChain);
+
+      if (childInstance.hasChildren) {
+        this.collectPromotedChildren([childInstance], parentChain, cache);
+      }
+    }
+  }
+
+  /**
+   * Removes promoted items and group separators from DOM and destroys cached instances.
+   * Idempotent — safe to call when cache is already null.
+   */
+  private cleanupPromotedItems(): void {
+    for (const separator of this.promotedSeparators) {
+      separator.remove();
+    }
+    this.promotedSeparators = [];
+
+    if (this.promotedItemCache !== null) {
+      for (const item of this.promotedItemCache.items) {
+        item.getElement()?.remove();
+        item.destroy();
+      }
+      this.promotedItemCache = null;
+    }
+  }
+
+  /**
+   * Creates a group separator element for promoted search results.
+   * @param label - the parent chain label (e.g., "Convert to" or "Parent › Child")
+   */
+  private createGroupSeparator(label: string): HTMLElement {
+    const el = document.createElement('div');
+
+    el.setAttribute(DATA_ATTR.promotedGroupLabel, '');
+    el.setAttribute('role', 'separator');
+    el.className = 'px-3 pt-2.5 pb-1 text-[11px] font-medium uppercase tracking-wide text-gray-text/50 cursor-default';
+    el.textContent = label;
+
+    return el;
+  }
+
+  /**
+   * Appends DOM elements for a group of promoted items to the items container.
+   * @param groupItems - promoted items with their scores
+   */
+  private appendPromotedGroupElements(groupItems: Array<{ item: PopoverItemDefault; score: number }>): void {
+    for (const { item } of groupItems) {
+      const el = item.getElement();
+
+      if (el !== null) {
+        this.nodes.items?.appendChild(el);
+      }
+    }
+  }
+
+  /**
+   * Filters out top-level items whose title duplicates a promoted item's title.
+   * Prevents the same entry from appearing both at the top level and under a group
+   * like "Convert to" during search.
+   * @param topLevel - top-level items matching the search query
+   * @param promoted - promoted items from nested children
+   */
+  private deduplicateAgainstPromoted(
+    topLevel: PopoverItemDefault[],
+    promoted: Array<{ item: PopoverItemDefault }>
+  ): PopoverItemDefault[] {
+    const promotedTitles = new Set<string>();
+
+    for (const { item } of promoted) {
+      if (item.title !== undefined) {
+        promotedTitles.add(item.title.toLowerCase());
+      }
+    }
+
+    return topLevel.filter(item => {
+      if (!(item instanceof PopoverItemDefault) || item.title === undefined) {
+        return true;
+      }
+
+      return !promotedTitles.has(item.title.toLowerCase());
+    });
+  }
+
   /**
    * Adds search to the popover
    */
@@ -741,7 +926,42 @@ export class PopoverDesktop extends PopoverAbstract {
       placeholder: this.messages.search,
     });
 
-    this.search.on(SearchInputEvent.Search, this.onSearch);
+    this.search.on(SearchInputEvent.Search, (searchData: { query: string; items: SearchableItem[] }) => {
+      const isEmptyQuery = searchData.query === '';
+
+      if (isEmptyQuery) {
+        this.cleanupPromotedItems();
+        this.onSearch({
+          query: searchData.query,
+          topLevelItems: searchData.items as unknown as PopoverItemDefault[],
+          promotedItems: [],
+        });
+
+        return;
+      }
+
+      // Build cache on first non-empty search
+      if (this.promotedItemCache === null) {
+        this.promotedItemCache = this.buildPromotedItemCache();
+      }
+
+      // Score promoted items against the query
+      const { parentChains } = this.promotedItemCache;
+      const promotedScored = this.promotedItemCache.items
+        .map(item => ({
+          item,
+          score: scoreSearchMatch(item, searchData.query),
+          chain: parentChains.get(item) ?? [],
+        }))
+        .filter(({ score }) => score > 0)
+        .sort((a, b) => b.score - a.score);
+
+      this.onSearch({
+        query: searchData.query,
+        topLevelItems: searchData.items as unknown as PopoverItemDefault[],
+        promotedItems: promotedScored,
+      });
+    });
 
     const searchElement = this.search.getElement();
 
@@ -757,45 +977,66 @@ export class PopoverDesktop extends PopoverAbstract {
    */
   public override filterItems(query: string): void {
     if (query === '') {
+      this.cleanupPromotedItems();
       this.onSearch({
         query,
-        items: this.itemsDefault as unknown as SearchableItem[],
+        topLevelItems: this.itemsDefault,
+        promotedItems: [],
       });
 
       return;
     }
 
-    const scoredItems = this.itemsDefault
+    // Build cache on first non-empty search
+    if (this.promotedItemCache === null) {
+      this.promotedItemCache = this.buildPromotedItemCache();
+    }
+
+    // Score top-level items
+    const topLevelScored = this.itemsDefault
       .map(item => ({ item, score: scoreSearchMatch(item, query) }))
       .filter(({ score }) => score > 0)
       .sort((a, b) => b.score - a.score);
 
-    const matchingItems = scoredItems.map(({ item }) => item);
+    // Score promoted items from cache
+    const { parentChains: chains } = this.promotedItemCache;
+    const promotedScored = this.promotedItemCache.items
+      .map(item => ({
+        item,
+        score: scoreSearchMatch(item, query),
+        chain: chains.get(item) ?? [],
+      }))
+      .filter(({ score }) => score > 0)
+      .sort((a, b) => b.score - a.score);
 
     this.onSearch({
       query,
-      items: matchingItems as unknown as SearchableItem[],
+      topLevelItems: topLevelScored.map(({ item }) => item),
+      promotedItems: promotedScored,
     });
   }
 
   /**
-   * Handles input inside search field
-   * @param data - search input event data
-   * @param data.query - search query text
-   * @param data.items - search results
+   * Handles search results from both filterItems and SearchInput.
+   * Renders top-level matches and promoted children with group separators.
    */
-  private onSearch = (data: { query: string, items: SearchableItem[] }): void => {
+  private onSearch = (data: {
+    query: string;
+    topLevelItems: PopoverItemDefault[] | SearchableItem[];
+    promotedItems: Array<{ item: PopoverItemDefault; score: number; chain: string[] }>;
+  }): void => {
     const isEmptyQuery = data.query === '';
-    const isNothingFound = data.items.length === 0;
+    const allTopLevel = data.topLevelItems as unknown as PopoverItemDefault[];
+
+    // Deduplicate: hide top-level items whose title matches a promoted item
+    const matchingTopLevel = !isEmptyQuery && data.promotedItems.length > 0
+      ? this.deduplicateAgainstPromoted(allTopLevel, data.promotedItems)
+      : allTopLevel;
 
-    // Cast data.items to PopoverItemDefault[] since we know that's what filterItems passes
-    const matchingItems = data.items as unknown as PopoverItemDefault[];
+    const isNothingFound = matchingTopLevel.length === 0 && data.promotedItems.length === 0;
 
     /**
      * When nothing is found, disable transitions so items hide instantly.
-     * The "Nothing found" message fade-in provides the visual transition;
-     * animating the last items' collapse simultaneously causes a jarring
-     * height bounce in the popover container.
      */
     if (isNothingFound) {
       this.items.forEach(item => {
@@ -808,48 +1049,92 @@ export class PopoverDesktop extends PopoverAbstract {
         const isDefaultItem = item instanceof PopoverItemDefault;
         const isSeparatorOrHtml = item instanceof PopoverItemSeparator || item instanceof PopoverItemHtml;
         const isHidden = isDefaultItem
-          ? !matchingItems.includes(item) || (item.name !== undefined && this.isNamePermanentlyHidden(item.name))
+          ? !matchingTopLevel.includes(item) || (item.name !== undefined && this.isNamePermanentlyHidden(item.name))
           : isSeparatorOrHtml && (isNothingFound || !isEmptyQuery);
 
         item.toggleHidden(isHidden);
       });
 
     if (isNothingFound) {
-      // Force reflow so the instant hide takes effect, then restore transitions
       this.nodes.popoverContainer.offsetHeight;
       this.items.forEach(item => {
         item.getElement()?.style.removeProperty('transition-duration');
       });
     }
 
-    // Reorder DOM elements to reflect ranking
-    if (!isEmptyQuery && matchingItems.length > 0) {
-      this.reorderItemsByRank(matchingItems);
+    // Reorder top-level DOM elements to reflect ranking
+    if (!isEmptyQuery && matchingTopLevel.length > 0) {
+      this.reorderItemsByRank(matchingTopLevel);
     } else if (isEmptyQuery && this.originalItemOrder !== undefined) {
       this.restoreOriginalItemOrder();
     }
 
+    // Detach previous promoted elements from DOM (don't destroy cache)
+    for (const separator of this.promotedSeparators) {
+      separator.remove();
+    }
+    this.promotedSeparators = [];
+
+    if (this.promotedItemCache !== null) {
+      for (const item of this.promotedItemCache.items) {
+        item.getElement()?.remove();
+      }
+    }
+
+    // Render promoted items grouped by parent chain
+    if (data.promotedItems.length > 0) {
+      const groups = new Map<string, Array<{ item: PopoverItemDefault; score: number }>>();
+
+      for (const entry of data.promotedItems) {
+        const label = entry.chain.join(' \u203A ');
+        const existing = groups.get(label);
+
+        if (existing !== undefined) {
+          existing.push({ item: entry.item, score: entry.score });
+        } else {
+          groups.set(label, [{ item: entry.item, score: entry.score }]);
+        }
+      }
+
+      // Sort groups by best score in each group
+      const sortedGroups = [...groups.entries()].sort((a, b) => {
+        const bestA = Math.max(...a[1].map(e => e.score));
+        const bestB = Math.max(...b[1].map(e => e.score));
+
+        return bestB - bestA;
+      });
+
+      for (const [label, groupItems] of sortedGroups) {
+        const separator = this.createGroupSeparator(label);
+
+        this.promotedSeparators.push(separator);
+        this.nodes.items?.appendChild(separator);
+
+        this.appendPromotedGroupElements(groupItems);
+      }
+    }
+
     this.toggleNothingFoundMessage(isNothingFound);
 
-    /** List of elements available for keyboard navigation considering search query applied */
-    const flippableElements = isEmptyQuery ? this.flippableElements : data.items.map(item => (item as PopoverItem).getElement());
+    // Build flippable elements list: top-level matches + promoted items
+    const topLevelFlippable = isEmptyQuery
+      ? this.flippableElements
+      : matchingTopLevel.map(item => item.getElement());
+
+    const promotedFlippable = data.promotedItems.map(({ item }) => item.getElement());
+
+    const flippableElements = [
+      ...topLevelFlippable,
+      ...promotedFlippable,
+    ].filter((el): el is HTMLElement => el !== null);
 
     if (!this.flipper?.isActivated) {
       return;
     }
 
-    /** Update flipper items with only visible */
     this.flipper.deactivate();
-    this.flipper.activate(flippableElements as HTMLElement[]);
+    this.flipper.activate(flippableElements);
 
-    /**
-     * Focus first item after filtering.
-     * Always skip the first Tab press so it just "enters" the menu rather than
-     * advancing to second item. This applies regardless of whether the query is
-     * empty (initial "/" open) or non-empty (user is typing to filter), because
-     * the user's keyboard focus is still in the search input - pressing Tab
-     * should enter the list at item 0, not advance from 0 to 1.
-     */
     if (flippableElements.length > 0) {
       this.flipper.focusItem(0, { skipNextTab: true });
     }

package/src/styles/main.css

@@ -642,7 +642,7 @@
 
 @layer utilities {
   .max-w-blok-content {
-    max-width: var(--blok-content-width, var(--max-width-content));
+    max-width: var(--max-width-content);
   }
 }
 

package/src/tools/toggle/index.ts

@@ -74,6 +74,20 @@ export class ToggleItem implements BlockTool {
       return normalized;
     }
 
+    // Handle legacy toggleList format: { title, isExpanded }
+    if (typeof data === 'object' && data !== null && 'title' in data) {
+      const legacyData = data as Record<string, unknown>;
+      const normalized: ToggleItemData = {
+        text: typeof legacyData.title === 'string' ? legacyData.title : '',
+      };
+
+      if (typeof legacyData.isExpanded === 'boolean') {
+        normalized.isOpen = legacyData.isExpanded;
+      }
+
+      return normalized;
+    }
+
     return { text: '' };
   }
 

package/src/types-internal/blok-modules.d.ts

@@ -16,7 +16,8 @@ import { StylesAPI } from '../components/modules/api/styles';
 import { ToolbarAPI } from '../components/modules/api/toolbar';
 import { TooltipAPI } from '../components/modules/api/tooltip';
 import { UiAPI } from '../components/modules/api/ui';
-import { WidthAPI } from '../components/modules/api/width';
+
+import { ThemeAPI } from '../components/modules/api/theme';
 /** ./toolbar */
 import { BlockSettings } from '../components/modules/toolbar/blockSettings';
 import { Toolbar } from '../components/modules/toolbar/index';
@@ -39,7 +40,8 @@ import { Tools } from '../components/modules/tools';
 import { UI } from '../components/modules/ui';
 import { ToolsAPI } from '../components/modules/api/tools';
 import { I18n } from '../components/modules/i18n';
-import { WidthManager } from '../components/modules/widthManager';
+
+import { ThemeManager } from '../components/modules/themeManager';
 import { YjsManager } from '../components/modules/yjs';
 
 export interface BlokModules {
@@ -62,7 +64,7 @@ export interface BlokModules {
   ToolbarAPI: ToolbarAPI,
   TooltipAPI: TooltipAPI,
   UiAPI: UiAPI,
-  WidthAPI: WidthAPI,
+  ThemeAPI: ThemeAPI,
 
   // Toolbar Modules
   BlockSettings: BlockSettings,
@@ -85,6 +87,6 @@ export interface BlokModules {
   Saver: Saver,
   Tools: Tools,
   UI: UI,
-  WidthManager: WidthManager,
+  ThemeManager: ThemeManager,
   YjsManager: YjsManager,
 }

package/types/api/index.d.ts

@@ -16,4 +16,5 @@ export * from './readonly';
 export * from './i18n';
 export * from './ui';
 export * from './tools';
-export * from './width';
+
+export * from './theme';

package/types/api/theme.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Theme mode set by the user.
+ */
+export type ThemeMode = 'dark' | 'light' | 'auto';
+
+/**
+ * Resolved theme after evaluating OS preference (for 'auto' mode).
+ */
+export type ResolvedTheme = 'dark' | 'light';
+
+/**
+ * Describes the theme API.
+ */
+export interface Theme {
+  /**
+   * Returns the current theme mode.
+   */
+  get(): ThemeMode;
+
+  /**
+   * Sets the theme mode.
+   */
+  set(mode: ThemeMode): void;
+
+  /**
+   * Returns the resolved theme ('dark' or 'light'), evaluating OS preference if mode is 'auto'.
+   */
+  getResolved(): ResolvedTheme;
+}

package/types/configs/blok-config.d.ts

@@ -1,3 +1,4 @@
+import type { ThemeMode, ResolvedTheme } from '../api/theme';
 import {ToolConstructable, ToolSettings} from '../tools';
 import {API, LogLevels, OutputData} from '../index';
 import {SanitizerConfig} from './sanitizer-config';
@@ -162,28 +163,17 @@ export interface BlokConfig {
   }
 
   /**
-   * Initial width mode. Defaults to 'narrow'.
+   * Color theme mode.
+   * - 'auto': follow OS preference via prefers-color-scheme (default)
+   * - 'light': force light theme
+   * - 'dark': force dark theme
    */
-  defaultWidth?: 'narrow' | 'full';
+  theme?: ThemeMode;
 
   /**
-   * CSS max-width value for narrow mode.
-   * Any valid CSS length (e.g. '650px', '800px', '60ch').
-   * Defaults to '650px'.
+   * Called when the resolved theme changes (e.g. OS preference switches in 'auto' mode).
+   * Does not fire on initialization — only on subsequent changes.
+   * @param resolvedTheme - the resolved theme ('dark' or 'light')
    */
-  narrowWidth?: string;
-
-  /**
-   * CSS max-width value for full width mode.
-   * Any valid CSS length, or 'none' for no constraint.
-   * Defaults to 'none'.
-   */
-  fullWidth?: string;
-
-  /**
-   * Called when the editor width mode changes.
-   * @param mode - the new mode ('narrow' or 'full')
-   * @param value - the resolved CSS max-width value
-   */
-  onWidthChange?: (mode: 'narrow' | 'full', value: string) => void;
+  onThemeChange?: (resolvedTheme: ResolvedTheme) => void;
 }

package/types/index.d.ts

@@ -30,7 +30,9 @@ import {
   I18n,
   Ui,
   Tools,
-  Width,
+  Theme,
+  ThemeMode,
+  ResolvedTheme,
 } from './api';
 
 import { OutputData } from './data-formats';
@@ -106,7 +108,9 @@ export {
   I18n,
   Ui,
   Tools,
-  Width,
+  Theme,
+  ThemeMode,
+  ResolvedTheme,
 } from './api';
 export {
   BlockMutationType,
@@ -144,7 +148,7 @@ export interface API {
   i18n: I18n;
   readOnly: ReadOnly;
   ui: Ui;
-  width: Width;
+  theme: Theme;
   rectangleSelection: {
     cancelActiveSelection: () => void;
     isRectActivated: () => boolean;
@@ -179,7 +183,7 @@ export class Blok {
   public inlineToolbar: InlineToolbar;
   public tooltip: Tooltip;
   public readOnly: ReadOnly;
-  public width: Width;
+  public theme: Theme;
   constructor(configuration?: BlokConfig|string);
 
   /**