blockly 11.2.0-beta.2 → 12.0.0-beta.0

package/core/field_variable.d.ts

@@ -12,10 +12,10 @@ import './events/events_block_change.js';
 import type { Block } from './block.js';
 import { Field, FieldConfig } from './field.js';
 import { FieldDropdown, FieldDropdownValidator, MenuGenerator, MenuOption } from './field_dropdown.js';
+import { IVariableModel, IVariableState } from './interfaces/i_variable_model.js';
 import type { Menu } from './menu.js';
 import type { MenuItem } from './menuitem.js';
 import { Size } from './utils/size.js';
-import { VariableModel } from './variable_model.js';
 /**
  * Class for a variable's dropdown field.
  */
@@ -69,6 +69,7 @@ export declare class FieldVariable extends FieldDropdown {
      * a variable rather than let the value be invalid.
      */
     initModel(): void;
+    initView(): void;
     shouldAddBorderRect_(): boolean;
     /**
      * Initialize this field based on the given XML.
@@ -129,7 +130,13 @@ export declare class FieldVariable extends FieldDropdown {
      * @returns The selected variable, or null if none was selected.
      * @internal
      */
-    getVariable(): VariableModel | null;
+    getVariable(): IVariableModel<IVariableState> | null;
+    /**
+     * Gets the type of this field's default variable.
+     *
+     * @returns The default type for this variable field.
+     */
+    protected getDefaultType(): string;
     /**
      * Gets the validation function for this field, or null if not set.
      * Returns null if the variable is not set, because validators should not

package/core/flyout_base.d.ts

@@ -3,21 +3,23 @@
  * Copyright 2011 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+/**
+ * Flyout tray containing blocks which may be created.
+ *
+ * @class
+ */
 import { BlockSvg } from './block_svg.js';
 import { DeleteArea } from './delete_area.js';
-import { FlyoutButton } from './flyout_button.js';
 import { IAutoHideable } from './interfaces/i_autohideable.js';
+import type { IBoundedElement } from './interfaces/i_bounded_element.js';
 import type { IFlyout } from './interfaces/i_flyout.js';
+import type { IFlyoutInflater } from './interfaces/i_flyout_inflater.js';
 import type { Options } from './options.js';
 import * as blocks from './serialization/blocks.js';
 import { Coordinate } from './utils/coordinate.js';
 import { Svg } from './utils/svg.js';
 import * as toolbox from './utils/toolbox.js';
 import { WorkspaceSvg } from './workspace_svg.js';
-declare enum FlyoutItemType {
-    BLOCK = "block",
-    BUTTON = "button"
-}
 /**
  * Class for a flyout.
  */
@@ -48,12 +50,11 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
         y?: number;
     }): void;
     /**
-     * Lay out the blocks in the flyout.
+     * Lay out the elements in the flyout.
      *
-     * @param contents The blocks and buttons to lay out.
-     * @param gaps The visible gaps between blocks.
+     * @param contents The flyout elements to lay out.
      */
-    protected abstract layout_(contents: FlyoutItem[], gaps: number[]): void;
+    protected abstract layout_(contents: FlyoutItem[]): void;
     /**
      * Scroll the flyout.
      *
@@ -61,8 +62,8 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      */
     protected abstract wheel_(e: WheelEvent): void;
     /**
-     * Compute height of flyout.  Position mat under each block.
-     * For RTL: Lay out the blocks right-aligned.
+     * Compute bounds of flyout.
+     * For RTL: Lay out the elements right-aligned.
      */
     protected abstract reflowInternal_(): void;
     /**
@@ -81,10 +82,6 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      * Scroll the flyout to the beginning of its contents.
      */
     abstract scrollToStart(): void;
-    /**
-     * The type of a flyout content item.
-     */
-    static FlyoutItemType: typeof FlyoutItemType;
     protected workspace_: WorkspaceSvg;
     RTL: boolean;
     /**
@@ -102,36 +99,13 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
     private boundEvents;
     /**
      * Function that will be registered as a change listener on the workspace
-     * to reflow when blocks in the flyout workspace change.
+     * to reflow when elements in the flyout workspace change.
      */
     private reflowWrapper;
     /**
-     * Function that disables blocks in the flyout based on max block counts
-     * allowed in the target workspace. Registered as a change listener on the
-     * target workspace.
-     */
-    private filterWrapper;
-    /**
-     * List of background mats that lurk behind each block to catch clicks
-     * landing in the blocks' lakes and bays.
-     */
-    private mats;
-    /**
-     * List of visible buttons.
-     */
-    protected buttons_: FlyoutButton[];
-    /**
-     * List of visible buttons and blocks.
+     * List of flyout elements.
      */
     protected contents: FlyoutItem[];
-    /**
-     * List of event listeners.
-     */
-    private listeners;
-    /**
-     * List of blocks that should always be disabled.
-     */
-    private permanentlyDisabled;
     protected readonly tabWidth_: number;
     /**
      * The target workspace.
@@ -139,10 +113,6 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      * @internal
      */
     targetWorkspace: WorkspaceSvg;
-    /**
-     * A list of blocks that can be reused.
-     */
-    private recycledBlocks;
     /**
      * Does the flyout automatically close when a block is created?
      */
@@ -155,7 +125,6 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      * Whether the workspace containing this flyout is visible.
      */
     private containerVisible;
-    protected rectMap_: WeakMap<BlockSvg, SVGElement>;
     /**
      * Corner radius of the flyout background.
      */
@@ -205,6 +174,11 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      * The root SVG group for the button or label.
      */
     protected svgGroup_: SVGGElement | null;
+    /**
+     * Map from flyout content type to the corresponding inflater class
+     * responsible for creating concrete instances of the content type.
+     */
+    protected inflaters: Map<string, IFlyoutInflater>;
     /**
      * @param workspaceOptions Dictionary of options for the
      *     workspace.
@@ -291,13 +265,13 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      */
     setContainerVisible(visible: boolean): void;
     /**
-     * Get the list of buttons and blocks of the current flyout.
+     * Get the list of elements of the current flyout.
      *
-     * @returns The array of flyout buttons and blocks.
+     * @returns The array of flyout elements.
      */
     getContents(): FlyoutItem[];
     /**
-     * Store the list of buttons and blocks on the flyout.
+     * Store the list of elements on the flyout.
      *
      * @param contents - The array of items for the flyout.
      */
@@ -334,9 +308,21 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      *
      * @param parsedContent The array
      *     of objects to show in the flyout.
-     * @returns The list of contents and gaps needed to lay out the flyout.
+     * @returns The list of contents needed to lay out the flyout.
      */
     private createFlyoutInfo;
+    /**
+     * Updates and returns the provided list of flyout contents to flatten
+     * separators as needed.
+     *
+     * When multiple separators occur one after another, the value of the last one
+     * takes precedence and the earlier separators in the group are removed.
+     *
+     * @param contents The list of flyout contents to flatten separators in.
+     * @returns An updated list of flyout contents with only one separator between
+     *     each non-separator item.
+     */
+    protected normalizeSeparators(contents: FlyoutItem[]): FlyoutItem[];
     /**
      * Gets the flyout definition for the dynamic category.
      *
@@ -346,89 +332,9 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      */
     private getDynamicCategoryContents;
     /**
-     * Creates a flyout button or a flyout label.
-     *
-     * @param btnInfo The object holding information about a button or a label.
-     * @param isLabel True if the button is a label, false otherwise.
-     * @returns The object used to display the button in the
-     *    flyout.
-     */
-    private createButton;
-    /**
-     * Create a block from the xml and permanently disable any blocks that were
-     * defined as disabled.
-     *
-     * @param blockInfo The info of the block.
-     * @returns The block created from the blockInfo.
-     */
-    private createFlyoutBlock;
-    /**
-     * Returns a block from the array of recycled blocks with the given type, or
-     * undefined if one cannot be found.
-     *
-     * @param blockType The type of the block to try to recycle.
-     * @returns The recycled block, or undefined if
-     *     one could not be recycled.
-     */
-    private getRecycledBlock;
-    /**
-     * Adds a gap in the flyout based on block info.
-     *
-     * @param blockInfo Information about a block.
-     * @param gaps The list of gaps between items in the flyout.
-     * @param defaultGap The default gap between one element and the
-     *     next.
-     */
-    private addBlockGap;
-    /**
-     * Add the necessary gap in the flyout for a separator.
-     *
-     * @param sepInfo The object holding
-     *    information about a separator.
-     * @param gaps The list gaps between items in the flyout.
-     * @param defaultGap The default gap between the button and next
-     *     element.
-     */
-    private addSeparatorGap;
-    /**
-     * Delete blocks, mats and buttons from a previous showing of the flyout.
+     * Delete elements from a previous showing of the flyout.
      */
     private clearOldBlocks;
-    /**
-     * Empties all of the recycled blocks, properly disposing of them.
-     */
-    private emptyRecycledBlocks;
-    /**
-     * Returns whether the given block can be recycled or not.
-     *
-     * @param _block The block to check for recyclability.
-     * @returns True if the block can be recycled. False otherwise.
-     */
-    protected blockIsRecyclable_(_block: BlockSvg): boolean;
-    /**
-     * Puts a previously created block into the recycle bin and moves it to the
-     * top of the workspace. Used during large workspace swaps to limit the number
-     * of new DOM elements we need to create.
-     *
-     * @param block The block to recycle.
-     */
-    private recycleBlock;
-    /**
-     * Add listeners to a block that has been added to the flyout.
-     *
-     * @param root The root node of the SVG group the block is in.
-     * @param block The block to add listeners for.
-     * @param rect The invisible rectangle under the block that acts
-     *     as a mat for that block.
-     */
-    protected addBlockListeners_(root: SVGElement, block: BlockSvg, rect: SVGElement): void;
-    /**
-     * Handle a pointerdown on an SVG block in a non-closing flyout.
-     *
-     * @param block The flyout block to copy.
-     * @returns Function to call when block is clicked.
-     */
-    private blockMouseDown;
     /**
      * Pointer down on the flyout background.  Start a vertical scroll drag.
      *
@@ -455,48 +361,7 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      */
     createBlock(originalBlock: BlockSvg): BlockSvg;
     /**
-     * Initialize the given button: move it to the correct location,
-     * add listeners, etc.
-     *
-     * @param button The button to initialize and place.
-     * @param x The x position of the cursor during this layout pass.
-     * @param y The y position of the cursor during this layout pass.
-     */
-    protected initFlyoutButton_(button: FlyoutButton, x: number, y: number): void;
-    /**
-     * Create and place a rectangle corresponding to the given block.
-     *
-     * @param block The block to associate the rect to.
-     * @param x The x position of the cursor during this layout pass.
-     * @param y The y position of the cursor during this layout pass.
-     * @param blockHW The height and width of
-     *     the block.
-     * @param index The index into the mats list where this rect should
-     *     be placed.
-     * @returns Newly created SVG element for the rectangle behind
-     *     the block.
-     */
-    protected createRect_(block: BlockSvg, x: number, y: number, blockHW: {
-        height: number;
-        width: number;
-    }, index: number): SVGElement;
-    /**
-     * Move a rectangle to sit exactly behind a block, taking into account tabs,
-     * hats, and any other protrusions we invent.
-     *
-     * @param rect The rectangle to move directly behind the block.
-     * @param block The block the rectangle should be behind.
-     */
-    protected moveRectToBlock_(rect: SVGElement, block: BlockSvg): void;
-    /**
-     * Filter the blocks on the flyout to disable the ones that are above the
-     * capacity limit.  For instance, if the user may only place two more blocks
-     * on the workspace, an "a + b" block that has two shadow blocks would be
-     * disabled.
-     */
-    private filterForCapacity;
-    /**
-     * Reflow blocks and their mats.
+     * Reflow flyout contents.
      */
     reflow(): void;
     /**
@@ -526,14 +391,20 @@ export declare abstract class Flyout extends DeleteArea implements IAutoHideable
      * @param block The block to posiiton.
      */
     private positionNewBlock;
+    /**
+     * Returns the inflater responsible for constructing items of the given type.
+     *
+     * @param type The type of flyout content item to provide an inflater for.
+     * @returns An inflater object for the given type, or null if no inflater
+     *     is registered for that type.
+     */
+    protected getInflaterForType(type: string): IFlyoutInflater | null;
 }
 /**
  * A flyout content item.
  */
 export interface FlyoutItem {
-    type: FlyoutItemType;
-    button?: FlyoutButton | undefined;
-    block?: BlockSvg | undefined;
+    type: string;
+    element: IBoundedElement;
 }
-export {};
 //# sourceMappingURL=flyout_base.d.ts.map

package/core/flyout_button.d.ts

@@ -9,13 +9,16 @@
  * @class
  */
 import type { IASTNodeLocationSvg } from './blockly.js';
+import type { IBoundedElement } from './interfaces/i_bounded_element.js';
+import type { IRenderedElement } from './interfaces/i_rendered_element.js';
 import { Coordinate } from './utils/coordinate.js';
+import { Rect } from './utils/rect.js';
 import type * as toolbox from './utils/toolbox.js';
 import type { WorkspaceSvg } from './workspace_svg.js';
 /**
  * Class for a button or label in the flyout.
  */
-export declare class FlyoutButton implements IASTNodeLocationSvg {
+export declare class FlyoutButton implements IASTNodeLocationSvg, IBoundedElement, IRenderedElement {
     private readonly workspace;
     private readonly targetWorkspace;
     private readonly isFlyoutLabel;
@@ -30,6 +33,7 @@ export declare class FlyoutButton implements IASTNodeLocationSvg {
     private readonly callbackKey;
     private readonly cssClass;
     /** Mouse up event data. */
+    private onMouseDownWrapper;
     private onMouseUpWrapper;
     info: toolbox.ButtonOrLabelInfo;
     /** The width of the button's rect. */
@@ -53,11 +57,6 @@ export declare class FlyoutButton implements IASTNodeLocationSvg {
      * @internal
      */
     constructor(workspace: WorkspaceSvg, targetWorkspace: WorkspaceSvg, json: toolbox.ButtonOrLabelInfo, isFlyoutLabel: boolean);
-    /**
-     * Create the button elements.
-     *
-     * @returns The button's SVG group.
-     */
     createDom(): SVGElement;
     /** Correctly position the flyout button and make it visible. */
     show(): void;
@@ -70,6 +69,14 @@ export declare class FlyoutButton implements IASTNodeLocationSvg {
      * @param y The new y coordinate.
      */
     moveTo(x: number, y: number): void;
+    /**
+     * Move the element by a relative offset.
+     *
+     * @param dx Horizontal offset in workspace units.
+     * @param dy Vertical offset in workspace units.
+     * @param _reason Why is this move happening?  'user', 'bump', 'snap'...
+     */
+    moveBy(dx: number, dy: number, _reason?: string[]): void;
     /** @returns Whether or not the button is a label. */
     isLabel(): boolean;
     /**
@@ -79,6 +86,13 @@ export declare class FlyoutButton implements IASTNodeLocationSvg {
      * @internal
      */
     getPosition(): Coordinate;
+    /**
+     * Returns the coordinates of a bounded element describing the dimensions of
+     * the element. Coordinate system: workspace coordinates.
+     *
+     * @returns Object with coordinates of the bounded element.
+     */
+    getBoundingRectangle(): Rect;
     /** @returns Text of the button. */
     getButtonText(): string;
     /**
@@ -114,5 +128,10 @@ export declare class FlyoutButton implements IASTNodeLocationSvg {
      * @param e Pointer up event.
      */
     private onMouseUp;
+    private onMouseDown;
+    /**
+     * @returns The root SVG element of this rendered element.
+     */
+    getSvgRoot(): SVGGElement;
 }
 //# sourceMappingURL=flyout_button.d.ts.map

package/core/flyout_horizontal.d.ts

@@ -56,10 +56,9 @@ export declare class HorizontalFlyout extends Flyout {
     /**
      * Lay out the blocks in the flyout.
      *
-     * @param contents The blocks and buttons to lay out.
-     * @param gaps The visible gaps between blocks.
+     * @param contents The flyout items to lay out.
      */
-    protected layout_(contents: FlyoutItem[], gaps: number[]): void;
+    protected layout_(contents: FlyoutItem[]): void;
     /**
      * Determine if a drag delta is toward the workspace, based on the position
      * and orientation of the flyout. This is used in determineDragIntention_ to

package/core/flyout_separator.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { IBoundedElement } from './interfaces/i_bounded_element.js';
+import { Rect } from './utils/rect.js';
+/**
+ * Representation of a gap between elements in a flyout.
+ */
+export declare class FlyoutSeparator implements IBoundedElement {
+    private gap;
+    private axis;
+    private x;
+    private y;
+    /**
+     * Creates a new separator.
+     *
+     * @param gap The amount of space this separator should occupy.
+     * @param axis The axis along which this separator occupies space.
+     */
+    constructor(gap: number, axis: SeparatorAxis);
+    /**
+     * Returns the bounding box of this separator.
+     *
+     * @returns The bounding box of this separator.
+     */
+    getBoundingRectangle(): Rect;
+    /**
+     * Repositions this separator.
+     *
+     * @param dx The distance to move this separator on the X axis.
+     * @param dy The distance to move this separator on the Y axis.
+     * @param _reason The reason this move was initiated.
+     */
+    moveBy(dx: number, dy: number, _reason?: string[]): void;
+}
+/**
+ * Representation of an axis along which a separator occupies space.
+ */
+export declare const enum SeparatorAxis {
+    X = "x",
+    Y = "y"
+}
+//# sourceMappingURL=flyout_separator.d.ts.map

package/core/flyout_vertical.d.ts

@@ -57,10 +57,9 @@ export declare class VerticalFlyout extends Flyout {
     /**
      * Lay out the blocks in the flyout.
      *
-     * @param contents The blocks and buttons to lay out.
-     * @param gaps The visible gaps between blocks.
+     * @param contents The flyout items to lay out.
      */
-    protected layout_(contents: FlyoutItem[], gaps: number[]): void;
+    protected layout_(contents: FlyoutItem[]): void;
     /**
      * Determine if a drag delta is toward the workspace, based on the position
      * and orientation of the flyout. This is used in determineDragIntention_ to
@@ -80,7 +79,7 @@ export declare class VerticalFlyout extends Flyout {
      */
     getClientRect(): Rect | null;
     /**
-     * Compute width of flyout.  toolbox.Position mat under each block.
+     * Compute width of flyout.
      * For RTL: Lay out the blocks and buttons to be right-aligned.
      */
     protected reflowInternal_(): void;

package/core/grid.d.ts

@@ -113,9 +113,12 @@ export declare class Grid {
      * @param rnd A random ID to append to the pattern's ID.
      * @param gridOptions The object containing grid configuration.
      * @param defs The root SVG element for this workspace's defs.
+     * @param injectionDiv The div containing the parent workspace and all related
+     *   workspaces and block containers. CSS variables representing SVG patterns
+     *   will be scoped to this container.
      * @returns The SVG element for the grid pattern.
      * @internal
      */
-    static createDom(rnd: string, gridOptions: GridOptions, defs: SVGElement): SVGElement;
+    static createDom(rnd: string, gridOptions: GridOptions, defs: SVGElement, injectionDiv?: HTMLElement): SVGElement;
 }
 //# sourceMappingURL=grid.d.ts.map

package/core/icons/comment_icon.d.ts

@@ -28,6 +28,8 @@ export declare class CommentIcon extends Icon implements IHasBubble, ISerializab
     private text;
     /** The size of this comment (which is applied to the editable bubble). */
     private bubbleSize;
+    /** The location of the comment bubble in workspace coordinates. */
+    private bubbleLocation?;
     /**
      * The visibility of the bubble for this comment.
      *
@@ -60,6 +62,14 @@ export declare class CommentIcon extends Icon implements IHasBubble, ISerializab
     setBubbleSize(size: Size): void;
     /** @returns the size of the editable bubble for this comment. */
     getBubbleSize(): Size;
+    /**
+     * Sets the location of the comment bubble in the workspace.
+     */
+    setBubbleLocation(location: Coordinate): void;
+    /**
+     * @returns the location of the comment bubble in the workspace.
+     */
+    getBubbleLocation(): Coordinate | undefined;
     /**
      * @returns the state of the comment as a JSON serializable value if the
      * comment has text. Otherwise returns null.
@@ -79,6 +89,7 @@ export declare class CommentIcon extends Icon implements IHasBubble, ISerializab
      * input bubble.
      */
     onSizeChange(): void;
+    onBubbleLocationChange(): void;
     bubbleIsVisible(): boolean;
     setBubbleVisible(visible: boolean): Promise<void>;
     /**
@@ -112,5 +123,9 @@ export interface CommentState {
     height?: number;
     /** The width of the comment bubble. */
     width?: number;
+    /** The X coordinate of the comment bubble. */
+    x?: number;
+    /** The Y coordinate of the comment bubble. */
+    y?: number;
 }
 //# sourceMappingURL=comment_icon.d.ts.map

package/core/interfaces/i_comment_icon.d.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { CommentState } from '../icons/comment_icon.js';
+import { Coordinate } from '../utils/coordinate.js';
 import { Size } from '../utils/size.js';
 import { IHasBubble } from './i_has_bubble.js';
 import { IIcon } from './i_icon.js';
@@ -13,6 +14,8 @@ export interface ICommentIcon extends IIcon, IHasBubble, ISerializable {
     getText(): string;
     setBubbleSize(size: Size): void;
     getBubbleSize(): Size;
+    setBubbleLocation(location: Coordinate): void;
+    getBubbleLocation(): Coordinate | undefined;
     saveState(): CommentState;
     loadState(state: CommentState): void;
 }

package/core/interfaces/i_flyout_inflater.d.ts

@@ -0,0 +1,39 @@
+import type { WorkspaceSvg } from '../workspace_svg.js';
+import type { IBoundedElement } from './i_bounded_element.js';
+export interface IFlyoutInflater {
+    /**
+     * Loads the object represented by the given state onto the workspace.
+     *
+     * Note that this method's interface is identical to that in ISerializer, to
+     * allow for code reuse.
+     *
+     * @param state A JSON representation of an element to inflate on the flyout.
+     * @param flyoutWorkspace The flyout's workspace, where the inflated element
+     *    should be created. If the inflated element is an `IRenderedElement` it
+     *    itself or the inflater should append it to the workspace; the flyout
+     *    will not do so itself. The flyout is responsible for positioning the
+     *    element, however.
+     * @returns The newly inflated flyout element.
+     */
+    load(state: object, flyoutWorkspace: WorkspaceSvg): IBoundedElement;
+    /**
+     * Returns the amount of spacing that should follow the element corresponding
+     * to the given JSON representation.
+     *
+     * @param state A JSON representation of the element preceding the gap.
+     * @param defaultGap The default gap for elements in this flyout.
+     * @returns The gap that should follow the given element.
+     */
+    gapForElement(state: object, defaultGap: number): number;
+    /**
+     * Disposes of the given element.
+     *
+     * If the element in question resides on the flyout workspace, it should remove
+     * itself. Implementers are not otherwise required to fully dispose of the
+     * element; it may be e.g. cached for performance purposes.
+     *
+     * @param element The flyout element to dispose of.
+     */
+    disposeElement(element: IBoundedElement): void;
+}
+//# sourceMappingURL=i_flyout_inflater.d.ts.map

package/core/interfaces/i_toolbox.d.ts

@@ -77,7 +77,7 @@ export interface IToolbox extends IRegistrable {
      */
     setVisible(isVisible: boolean): void;
     /**
-     * Selects the toolbox item by it's position in the list of toolbox items.
+     * Selects the toolbox item by its position in the list of toolbox items.
      *
      * @param position The position of the item to select.
      */
@@ -88,6 +88,13 @@ export interface IToolbox extends IRegistrable {
      * @returns The selected item, or null if no item is currently selected.
      */
     getSelectedItem(): IToolboxItem | null;
+    /**
+     * Sets the selected item.
+     *
+     * @param item The toolbox item to select, or null to remove the current
+     *     selection.
+     */
+    setSelectedItem(item: IToolboxItem | null): void;
     /** Disposes of this toolbox. */
     dispose(): void;
 }

package/core/interfaces/i_variable_backed_parameter_model.d.ts

@@ -3,12 +3,12 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import type { VariableModel } from '../variable_model.js';
 import { IParameterModel } from './i_parameter_model.js';
+import type { IVariableModel, IVariableState } from './i_variable_model.js';
 /** Interface for a parameter model that holds a variable model. */
 export interface IVariableBackedParameterModel extends IParameterModel {
     /** Returns the variable model held by this type. */
-    getVariableModel(): VariableModel;
+    getVariableModel(): IVariableModel<IVariableState>;
 }
 /**
  * Returns whether the given object is a variable holder or not.