@dfosco/storyboard 0.9.3 → 0.9.5

package/src/core/canvas/customWidgets.js

@@ -0,0 +1,92 @@
+/**
+ * Server-side Custom Widget Registry
+ *
+ * Consumer widget metadata loaded from `storyboard.config.json.widgets` at
+ * dev-server startup. Server-side modules (collision detection, widget
+ * placement, prop validation) consult this registry to resolve widget
+ * metadata for consumer-registered widget types.
+ *
+ * Mirrors the browser-side `core/stores/widgetRegistry.js` but holds only
+ * the JSON-serializable subset — no React components (those live in the
+ * browser only). The `definition` shape is otherwise identical:
+ *
+ *   {
+ *     label, icon,
+ *     chrome: { enabled },
+ *     interaction: { selectable, movable, resize, expandable, splitScreen, interactGate, interactGateLabel },
+ *     connectors: { anchors, accept, exclude, defaults },
+ *     features: [...],
+ *     unlisted,
+ *     props: { width: { type, default, ... }, ... }
+ *   }
+ *
+ * Consumer entries OVERRIDE the built-in `widgets.config.json` entry of the
+ * same type. The merge is whole-entry replacement (consumer wins) to match
+ * the browser-side behavior — consumers that want to extend a core widget
+ * must re-declare the merged definition.
+ */
+
+import widgetsConfig from '../../../widgets.config.json' with { type: 'json' }
+
+/** @type {Map<string, object>} */
+const _registry = new Map()
+
+/**
+ * Replace the entire registry from a consumer-supplied map.
+ * @param {Record<string, object>|null|undefined} map
+ */
+export function initServerWidgets(map) {
+  _registry.clear()
+  if (map && typeof map === 'object') {
+    for (const [type, def] of Object.entries(map)) {
+      if (def && typeof def === 'object') {
+        _registry.set(type, def)
+      }
+    }
+  }
+}
+
+/**
+ * Register a single widget type. Replaces any existing entry.
+ * @param {string} type
+ * @param {object} definition
+ */
+export function registerServerWidget(type, definition) {
+  if (!type || typeof type !== 'string') {
+    throw new Error('[storyboard] registerServerWidget: type must be a non-empty string')
+  }
+  if (!definition || typeof definition !== 'object') {
+    throw new Error(`[storyboard] registerServerWidget("${type}"): definition must be an object`)
+  }
+  _registry.set(type, definition)
+}
+
+/**
+ * Resolve the effective server-side widget definition for a type.
+ * Returns the consumer entry if present, otherwise the built-in entry from
+ * `widgets.config.json`, otherwise null.
+ * @param {string} type
+ * @returns {object|null}
+ */
+export function getServerWidgetDefinition(type) {
+  if (_registry.has(type)) return _registry.get(type)
+  return widgetsConfig.widgets?.[type] || null
+}
+
+/**
+ * Snapshot all definitions (consumer + built-in) keyed by type.
+ * Consumer entries override built-ins.
+ * @returns {Record<string, object>}
+ */
+export function getAllServerWidgetDefinitions() {
+  const merged = { ...(widgetsConfig.widgets || {}) }
+  for (const [type, def] of _registry) {
+    merged[type] = def
+  }
+  return merged
+}
+
+/** Reset all state. Only for tests. */
+export function _resetServerWidgets() {
+  _registry.clear()
+}

package/src/core/canvas/customWidgets.test.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import {
+  initServerWidgets,
+  registerServerWidget,
+  getServerWidgetDefinition,
+  getAllServerWidgetDefinitions,
+  _resetServerWidgets,
+} from './customWidgets.js'
+
+describe('customWidgets (server-side registry)', () => {
+  beforeEach(() => {
+    _resetServerWidgets()
+  })
+
+  it('falls back to built-in widgets.config.json when nothing registered', () => {
+    const sticky = getServerWidgetDefinition('sticky-note')
+    expect(sticky).toBeTruthy()
+    expect(sticky.label).toBeTruthy()
+  })
+
+  it('returns null for unknown widget types', () => {
+    expect(getServerWidgetDefinition('does-not-exist')).toBeNull()
+  })
+
+  it('registerServerWidget adds a consumer entry', () => {
+    registerServerWidget('my-thing', { label: 'My Thing', props: { width: { type: 'number', default: 400 } } })
+    const def = getServerWidgetDefinition('my-thing')
+    expect(def?.label).toBe('My Thing')
+    expect(def?.props.width.default).toBe(400)
+  })
+
+  it('consumer entry overrides built-in entry for the same type', () => {
+    registerServerWidget('sticky-note', { label: 'Custom Sticky', props: { width: { default: 999 } } })
+    const def = getServerWidgetDefinition('sticky-note')
+    expect(def.label).toBe('Custom Sticky')
+    expect(def.props.width.default).toBe(999)
+  })
+
+  it('initServerWidgets replaces all consumer entries', () => {
+    registerServerWidget('a', { label: 'A' })
+    initServerWidgets({ b: { label: 'B' } })
+    expect(getServerWidgetDefinition('a')).not.toEqual({ label: 'A' })
+    // 'a' may still resolve to a core entry if one exists; here it doesn't,
+    // so it falls back to null
+    expect(getServerWidgetDefinition('a')).toBeNull()
+    expect(getServerWidgetDefinition('b')).toEqual({ label: 'B' })
+  })
+
+  it('initServerWidgets accepts null/undefined to clear', () => {
+    registerServerWidget('a', { label: 'A' })
+    initServerWidgets(null)
+    expect(getServerWidgetDefinition('a')).toBeNull()
+    initServerWidgets({ x: { label: 'X' } })
+    initServerWidgets(undefined)
+    expect(getServerWidgetDefinition('x')).toBeNull()
+  })
+
+  it('getAllServerWidgetDefinitions includes both built-ins and consumer entries', () => {
+    registerServerWidget('my-thing', { label: 'My Thing' })
+    const all = getAllServerWidgetDefinitions()
+    expect(all['my-thing']?.label).toBe('My Thing')
+    expect(all['sticky-note']).toBeTruthy() // built-in still present
+  })
+
+  it('registerServerWidget throws on invalid input', () => {
+    expect(() => registerServerWidget('', {})).toThrow(/non-empty string/)
+    expect(() => registerServerWidget('foo', null)).toThrow(/must be an object/)
+  })
+})

package/src/core/canvas/server.js

@@ -54,16 +54,17 @@ import {
 import { stampBounds, stampBoundsAll, resolvePosition, getWidgetBounds, findBestAnchors } from './collision.js'
 import { markCanvasWrite, unmarkCanvasWrite } from './writeGuard.js'
 import { devLog } from '../logger/devLogger.js'
-import widgetsConfig from '../../../widgets.config.json' with { type: 'json' }
+import { getServerWidgetDefinition } from './customWidgets.js'
 import { listHubRoles, getDefaultRoleId } from './hub-roles.js'
 import { readAgentsConfig } from './configReader.js'
 
 /**
- * Read the prompt widget's execution config from widgets.config.json.
+ * Read the prompt widget's execution config from the merged widget registry.
  * Returns { default, agents } where each agent has a command template.
  */
 function getPromptExecution() {
-  return widgetsConfig?.widgets?.prompt?.execution || null
+  const def = getServerWidgetDefinition('prompt')
+  return def?.execution || null
 }
 
 /**

package/src/core/index.js

@@ -109,6 +109,19 @@ export {
   getPresentationSnapshot,
 } from './stores/presentationStore.js'
 
+// Custom widgets — public API. Register your own canvas widget types with
+// full control over rendering, chrome, interaction, and toolbar features.
+// See DOCS/custom-widgets.md.
+export {
+  initWidgetRegistry,
+  registerWidget,
+  unregisterWidget,
+  getWidgetDefinition,
+  getAllWidgetDefinitions,
+  subscribeToWidgetRegistry,
+  getWidgetRegistrySnapshot,
+} from './stores/widgetRegistry.js'
+
 // Canvas interaction (advanced, undocumented — scroll axis + zoom gesture gates)
 export {
   initCanvasInteraction,

package/src/core/mountStoryboardCore.js

@@ -16,6 +16,7 @@ import { installBodyClassSync } from './session/bodyClasses.js'
 import { applyEarlyTheme as bootstrapEarlyTheme } from './stores/themeBootstrap.js'
 import { getConfig as getSchemaDefaulted } from './stores/configSchema.js'
 import { initPresentation } from './stores/presentationStore.js'
+import { initWidgetRegistry } from './stores/widgetRegistry.js'
 import { initCanvasInteraction } from './stores/canvasInteractionStore.js'
 import {
   initCommentsConfig, isCommentsEnabled,
@@ -395,6 +396,7 @@ function installCmdClickForwarder() {
  * @param {HTMLElement} [options.container=document.body] - Where to mount devtools
  * @param {Record<string, () => Promise<any>>} [options.handlers={}] - Custom tool handlers (key → lazy loader)
  * @param {Record<string, object>} [options.presentation] - Optional, advanced: per-chrome-element presentation overrides. See `core/stores/presentationStore.js` for the shape. Keep undocumented — power-user surface for landing pages and heavy chrome customization.
+ * @param {Record<string, object>} [options.widgets] - Optional: custom widget registrations. Maps widget type string → WidgetDefinition. Defines the React component, label/icon, chrome wrapper opts, interaction switches (selectable/movable/resize/expandable/splitScreen/interactGate), connector anchors, toolbar features, and prop schema. Consumer entries override built-in widgets of the same type. See `DOCS/custom-widgets.md` and `core/stores/widgetRegistry.js` for the full shape.
  */
 export async function mountStoryboardCore(config = {}, options = {}) {
   if (_mounted) return
@@ -409,6 +411,14 @@ export async function mountStoryboardCore(config = {}, options = {}) {
     initPresentation(options.presentation)
   }
 
+  // Seed the widget registry before any canvas mounts so the first canvas
+  // render already resolves custom widget components, chrome opts, and
+  // interaction switches. Consumer entries override core widgets of the
+  // same type entirely.
+  if (options.widgets) {
+    initWidgetRegistry(options.widgets)
+  }
+
   // Migrate renamed localStorage keys (4.3.0: viewfinder → workspace)
   migrateLocalStorageKeys()
 

package/src/core/stores/configSchema.js

@@ -164,7 +164,8 @@
  * @property {HotPoolConfig} [hotPool]
  * @property {CommandPaletteConfig} [commandPalette]
  * @property {CustomerModeConfig} [customerMode]
- * @property {ThemesConfig} [themes]
+ * @property {ThemesConfig} [theming]
+ * @property {Record<string, object>} [widgets] — Custom widget metadata (server-side). Maps widget type string → definition (label, icon, chrome, interaction, connectors, features, props). Consumer entries override built-in widget metadata for collision detection, default sizes, prompt-exec config, etc. Browser-side widget components are registered separately via `mountStoryboardCore({ widgets })`. See `DOCS/custom-widgets.md`.
  */
 
 /** Built-in paste rules shipped with storyboard. */

package/src/core/stores/widgetRegistry.js

@@ -0,0 +1,184 @@
+/**
+ * Widget Registry — consumer-supplied custom widget types.
+ *
+ * Consumers register widgets through `mountStoryboardCore({ widgets })`:
+ *
+ *   mountStoryboardCore(config, {
+ *     widgets: {
+ *       'my-thing': {
+ *         component: MyThing,
+ *         label: 'My Thing',
+ *         icon: 'sparkle',
+ *         chrome: { enabled: true },                  // optional, default true
+ *         interaction: {
+ *           selectable: true,                          // default true
+ *           movable: true,                             // default true
+ *           resize: { enabled: true, prod: false },    // default disabled
+ *           expandable: false,
+ *           splitScreen: false,
+ *           interactGate: false,
+ *           interactGateLabel: 'Click to interact',
+ *         },
+ *         connectors: { anchors: {...}, accept: ['*'], exclude: [] },
+ *         features: [ ... ],                          // toolbar actions
+ *         unlisted: false,                            // hide from "+ Add widget"
+ *         props: { width: { type: 'number', default: 400 }, ... },
+ *       },
+ *     },
+ *   })
+ *
+ * Definitions registered through this store are merged with — and override —
+ * the built-in widget configs from `widgets.config.json` on a per-type basis.
+ *
+ * Built-in core widgets (sticky-note, markdown, image, etc.) ALSO live in
+ * this registry once `seedCoreWidgets()` runs at module load. Consumer
+ * overrides for those types replace the core entry entirely; if a consumer
+ * wants to extend a core widget they should re-declare the merged definition.
+ *
+ * Framework-agnostic (zero npm dependencies). React typing is structural —
+ * the `component` field is opaque from this store's perspective.
+ *
+ * @typedef {object} WidgetChromeOptions
+ * @property {boolean} [enabled]  Render component inside WidgetChrome. Default: true.
+ *                                When false, the widget renders raw with no toolbar,
+ *                                no anchor ports, no select handle, no interact gate.
+ *                                Consumer owns 100% of the visible UI.
+ *
+ * @typedef {object} WidgetInteractionOptions
+ * @property {boolean} [selectable]   Default: true. False → no select handle, single-click
+ *                                    does not select.
+ * @property {boolean} [movable]      Default: true. False → drag surface class is omitted,
+ *                                    widget cannot be dragged.
+ * @property {{ enabled: boolean, prod?: boolean }} [resize]
+ *                                    Default: disabled. Same shape as widgets.config.json.
+ * @property {boolean} [expandable]   Default: false. Adds the "Expand" action.
+ * @property {boolean} [splitScreen]  Default: false. Eligible as a split-screen pane.
+ * @property {boolean} [interactGate] Default: false. Overlays "Click to interact" until clicked.
+ * @property {string}  [interactGateLabel] Default: 'Click to interact'.
+ *
+ * @typedef {object} WidgetDefinition
+ * @property {*}        [component]    React component or render function.
+ *                                     Required for consumer widgets; not stored for
+ *                                     core widgets when they fall back to widgets.config.json.
+ * @property {string}   [label]        Display label for menus and selectors.
+ * @property {string}   [icon]         Icon key from ICON_REGISTRY.
+ * @property {WidgetChromeOptions}      [chrome]
+ * @property {WidgetInteractionOptions} [interaction]
+ * @property {object}   [connectors]   { anchors, accept, exclude, defaults }.
+ * @property {Array<object>} [features] Toolbar feature list.
+ * @property {boolean}  [unlisted]     Hide from "+ Add widget" menu.
+ * @property {Record<string, object>} [props] Prop schema.
+ *
+ * The following back-compat fields are still read (mirrors widgets.config.json
+ * legacy shape so an unchanged JSON entry continues to work after migration):
+ * @property {{ enabled: boolean, prod?: boolean }} [resize]
+ * @property {boolean} [expandable]
+ * @property {boolean} [splitScreen]
+ * @property {boolean} [interactGate]
+ * @property {string}  [interactGateLabel]
+ */
+
+/** @type {Map<string, WidgetDefinition>} */
+let _registry = new Map()
+
+/** @type {Set<Function>} */
+const _listeners = new Set()
+
+let _snapshotVersion = 0
+
+/**
+ * Replace the entire registry from a consumer-supplied map.
+ * Pass null/undefined to clear.
+ * @param {Record<string, WidgetDefinition>|null|undefined} map
+ */
+export function initWidgetRegistry(map) {
+  _registry = new Map()
+  if (map && typeof map === 'object') {
+    for (const [type, def] of Object.entries(map)) {
+      if (def && typeof def === 'object') {
+        _registry.set(type, def)
+      }
+    }
+  }
+  _notify()
+}
+
+/**
+ * Register a single widget type (consumer-side). Replaces any existing entry.
+ * @param {string} type
+ * @param {WidgetDefinition} definition
+ */
+export function registerWidget(type, definition) {
+  if (!type || typeof type !== 'string') {
+    throw new Error('[storyboard] registerWidget: type must be a non-empty string')
+  }
+  if (!definition || typeof definition !== 'object') {
+    throw new Error(`[storyboard] registerWidget("${type}"): definition must be an object`)
+  }
+  _registry.set(type, definition)
+  _notify()
+}
+
+/**
+ * Remove a registry entry. Built-in widgets re-seeded via seedCoreWidgets()
+ * are unaffected; only the consumer override is removed.
+ * @param {string} type
+ */
+export function unregisterWidget(type) {
+  if (_registry.delete(type)) _notify()
+}
+
+/**
+ * Get the registered definition for a widget type, or null.
+ * Consumers should prefer `getMergedWidgetDefinition()` which also folds in
+ * the static widgets.config.json shape.
+ * @param {string} type
+ * @returns {WidgetDefinition|null}
+ */
+export function getWidgetDefinition(type) {
+  return _registry.get(type) || null
+}
+
+/**
+ * Snapshot of the entire registry as a plain object.
+ * @returns {Record<string, WidgetDefinition>}
+ */
+export function getAllWidgetDefinitions() {
+  return Object.fromEntries(_registry)
+}
+
+/**
+ * Subscribe to registry changes. Returns unsubscribe fn.
+ * Compatible with `useSyncExternalStore`.
+ * @param {Function} callback
+ * @returns {Function}
+ */
+export function subscribeToWidgetRegistry(callback) {
+  _listeners.add(callback)
+  return () => _listeners.delete(callback)
+}
+
+/**
+ * Snapshot version string for change detection.
+ * Compatible with `useSyncExternalStore`.
+ * @returns {string}
+ */
+export function getWidgetRegistrySnapshot() {
+  return String(_snapshotVersion)
+}
+
+function _notify() {
+  _snapshotVersion++
+  for (const cb of _listeners) {
+    try { cb() } catch (err) {
+      console.error('[storyboard] Error in widgetRegistry subscriber:', err)
+    }
+  }
+}
+
+/** Reset all state. Only for tests. */
+export function _resetWidgetRegistry() {
+  _registry = new Map()
+  _listeners.clear()
+  _snapshotVersion = 0
+}

package/src/core/stores/widgetRegistry.test.js

@@ -0,0 +1,109 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import {
+  initWidgetRegistry,
+  registerWidget,
+  unregisterWidget,
+  getWidgetDefinition,
+  getAllWidgetDefinitions,
+  subscribeToWidgetRegistry,
+  getWidgetRegistrySnapshot,
+  _resetWidgetRegistry,
+} from './widgetRegistry.js'
+
+describe('widgetRegistry', () => {
+  beforeEach(() => {
+    _resetWidgetRegistry()
+  })
+
+  it('starts empty', () => {
+    expect(getAllWidgetDefinitions()).toEqual({})
+    expect(getWidgetDefinition('anything')).toBeNull()
+  })
+
+  it('initWidgetRegistry seeds the store with valid entries', () => {
+    const Component = () => null
+    initWidgetRegistry({
+      'my-thing': { component: Component, label: 'My Thing' },
+      'other': { label: 'Other' },
+    })
+    expect(getWidgetDefinition('my-thing')).toEqual({ component: Component, label: 'My Thing' })
+    expect(getWidgetDefinition('other')).toEqual({ label: 'Other' })
+    expect(Object.keys(getAllWidgetDefinitions()).sort()).toEqual(['my-thing', 'other'])
+  })
+
+  it('initWidgetRegistry replaces previous entries', () => {
+    initWidgetRegistry({ a: { label: 'A' } })
+    initWidgetRegistry({ b: { label: 'B' } })
+    expect(getWidgetDefinition('a')).toBeNull()
+    expect(getWidgetDefinition('b')).toEqual({ label: 'B' })
+  })
+
+  it('initWidgetRegistry ignores null/undefined and non-object entries', () => {
+    initWidgetRegistry({
+      ok: { label: 'OK' },
+      nullish: null,
+      undef: undefined,
+      notObj: 'string',
+    })
+    expect(Object.keys(getAllWidgetDefinitions())).toEqual(['ok'])
+  })
+
+  it('initWidgetRegistry with null/undefined clears the store', () => {
+    initWidgetRegistry({ a: { label: 'A' } })
+    initWidgetRegistry(null)
+    expect(getAllWidgetDefinitions()).toEqual({})
+  })
+
+  it('registerWidget adds a single entry', () => {
+    registerWidget('foo', { label: 'Foo' })
+    expect(getWidgetDefinition('foo')).toEqual({ label: 'Foo' })
+  })
+
+  it('registerWidget replaces an existing entry', () => {
+    registerWidget('foo', { label: 'Foo' })
+    registerWidget('foo', { label: 'Foo2' })
+    expect(getWidgetDefinition('foo')).toEqual({ label: 'Foo2' })
+  })
+
+  it('registerWidget throws on invalid type', () => {
+    expect(() => registerWidget('', { label: 'X' })).toThrow(/non-empty string/)
+    expect(() => registerWidget(null, { label: 'X' })).toThrow(/non-empty string/)
+  })
+
+  it('registerWidget throws on invalid definition', () => {
+    expect(() => registerWidget('foo', null)).toThrow(/must be an object/)
+    expect(() => registerWidget('foo', 'string')).toThrow(/must be an object/)
+  })
+
+  it('unregisterWidget removes an entry', () => {
+    registerWidget('foo', { label: 'Foo' })
+    unregisterWidget('foo')
+    expect(getWidgetDefinition('foo')).toBeNull()
+  })
+
+  it('unregisterWidget on missing entry is a no-op', () => {
+    expect(() => unregisterWidget('nope')).not.toThrow()
+  })
+
+  it('subscribeToWidgetRegistry fires on init/register/unregister', () => {
+    let calls = 0
+    const unsubscribe = subscribeToWidgetRegistry(() => { calls++ })
+    initWidgetRegistry({ a: { label: 'A' } })
+    expect(calls).toBe(1)
+    registerWidget('b', { label: 'B' })
+    expect(calls).toBe(2)
+    unregisterWidget('a')
+    expect(calls).toBe(3)
+    unsubscribe()
+    registerWidget('c', { label: 'C' })
+    expect(calls).toBe(3)
+  })
+
+  it('getWidgetRegistrySnapshot returns a stable string per state', () => {
+    const a = getWidgetRegistrySnapshot()
+    expect(a).toBe(getWidgetRegistrySnapshot())
+    registerWidget('foo', { label: 'Foo' })
+    const b = getWidgetRegistrySnapshot()
+    expect(b).not.toBe(a)
+  })
+})

package/src/core/ui/CoreUIBar.jsx

@@ -116,7 +116,7 @@ function menuVisibleInMode(menu, mode) {
   return menu.modes.includes('*') || menu.modes.includes(mode)
 }
 
-// Subscribable mode state for useExternalStore (replaces Svelte modeState)
+// Subscribable mode state for useExternalStore
 const modeState = {
   get mode() { return getCurrentMode() },
   get modes() { return getRegisteredModes() },

package/src/core/ui-entry.js

@@ -22,9 +22,3 @@ export { mountDevTools, unmountDevTools } from './devtools/devtools.js'
 
 // Comments UI
 export { mountComments } from './comments/ui/mount.js'
-
-// Viewfinder dashboard
-export { mountViewfinder, unmountViewfinder } from './ui/viewfinder.ts'
-
-// Design modes
-export { mountDesignModesUI as mountDesignModes } from './ui/design-modes.ts'

package/src/core/vite/server-plugin.js

@@ -14,6 +14,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import { parse as parseJsonc } from 'jsonc-parser'
 import { getConfig } from '../stores/configSchema.js'
+import { initServerWidgets } from '../canvas/customWidgets.js'
 import { createDevLogger, setDevLogger } from '../logger/devLogger.js'
 import { serverFeatures as workshopFeatures } from '../workshop/features/registry-server.js'
 import { docsHandler, collectFiles } from './docs-handler.js'
@@ -161,6 +162,17 @@ export default function storyboardServer() {
       base = viteConfig.base || '/'
       config = readConfig(root)
       isDev = viteConfig.command === 'serve'
+
+      // Seed the server-side custom-widget registry from the consumer's
+      // `storyboard.config.json.widgets` block. Consumer entries override
+      // built-in widget metadata for collision detection, default sizes,
+      // prompt-exec config, etc. Server-side does not load React components
+      // — those are seeded in the browser via `mountStoryboardCore({ widgets })`.
+      try {
+        initServerWidgets(config?.widgets || null)
+      } catch (err) {
+        console.warn('[storyboard] Failed to init custom widget registry:', err.message)
+      }
     },
 
     configureServer(server) {

package/src/internals/canvas/CanvasPage.bridge.test.jsx

@@ -72,6 +72,8 @@ vi.mock('./widgets/widgetConfig.js', async () => {
     getAnchorState: () => ({}),
     canAcceptConnection: () => false,
     isSplitScreenCapable: () => false,
+    getChromeOptions: () => ({ enabled: true }),
+    getInteractionOptions: () => ({ selectable: true, movable: true, resize: null, expandable: false, splitScreen: false, interactGate: false, interactGateLabel: 'Click to interact' }),
     schemas: {},
     getMenuWidgetTypes: () => [],
     getConnectorDefaults: actual.getConnectorDefaults,

package/src/internals/canvas/CanvasPage.dragdrop.test.jsx

@@ -57,6 +57,8 @@ vi.mock('./widgets/widgetConfig.js', async () => {
     getAnchorState: () => ({}),
     canAcceptConnection: () => false,
     isSplitScreenCapable: () => false,
+    getChromeOptions: () => ({ enabled: true }),
+    getInteractionOptions: () => ({ selectable: true, movable: true, resize: null, expandable: false, splitScreen: false, interactGate: false, interactGateLabel: 'Click to interact' }),
     schemas: {},
     getMenuWidgetTypes: () => [],
     getConnectorDefaults: actual.getConnectorDefaults,