@dfosco/storyboard-react 4.2.4 → 4.2.5

package/src/canvas/componentIsolate.jsx

@@ -89,11 +89,20 @@ document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark'
 document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
 document.documentElement.setAttribute('data-light-theme', theme.startsWith('dark') ? '' : theme || 'light')
 
+// Suppress HMR full-reloads — this iframe is embedded inside a canvas page
+// that manages its own reload lifecycle. Without this guard, every file change
+// causes the iframe to flash/reload.
+if (import.meta.hot) {
+  const msg = { active: true }
+  import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+  setInterval(() => import.meta.hot.send('storyboard:canvas-hmr-guard', msg), 3000)
+}
+
 const root = createRoot(document.getElementById('root'))
 
 async function mount() {
-  if (!modulePath || !exportName) {
-    root.render(createElement('div', { style: errorStyle }, 'Missing module or export param'))
+  if (!modulePath) {
+    root.render(createElement('div', { style: errorStyle }, 'Missing module param'))
     return
   }
 
@@ -106,25 +115,46 @@ async function mount() {
   try {
     const resolved = resolveModulePath(modulePath)
     const mod = await import(/* @vite-ignore */ resolved)
-    const Component = mod[exportName]
-
-    if (!Component || typeof Component !== 'function') {
-      throw new Error(`Export "${exportName}" not found or is not a component`)
-    }
 
-    root.render(
-      createElement(ThemeProvider, { colorMode },
-        createElement(BaseStyles, null,
-          createElement(IsolateErrorBoundary, { name: exportName },
-            createElement(Component),
+    if (exportName) {
+      // Single export mode
+      const Component = mod[exportName]
+      if (!Component || typeof Component !== 'function') {
+        throw new Error(`Export "${exportName}" not found or is not a component`)
+      }
+      root.render(
+        createElement(ThemeProvider, { colorMode },
+          createElement(BaseStyles, null,
+            createElement(IsolateErrorBoundary, { name: exportName },
+              createElement(Component),
+            ),
           ),
         ),
-      ),
-    )
+      )
+    } else {
+      // All exports mode — render every named function export stacked
+      const entries = Object.entries(mod).filter(
+        ([key, value]) => key !== 'default' && typeof value === 'function',
+      )
+      if (entries.length === 0) {
+        throw new Error('No named exports found in story module')
+      }
+      root.render(
+        createElement(ThemeProvider, { colorMode },
+          createElement(BaseStyles, null,
+            ...entries.map(([name, Component]) =>
+              createElement(IsolateErrorBoundary, { key: name, name },
+                createElement(Component),
+              ),
+            ),
+          ),
+        ),
+      )
+    }
   } catch (err) {
     root.render(
       createElement('div', { style: errorStyle },
-        createElement('strong', null, exportName),
+        createElement('strong', null, exportName || 'Component'),
         createElement('br'),
         String(err.message || err),
       ),

package/src/canvas/componentSetIsolate.jsx

@@ -0,0 +1,257 @@
+/**
+ * Canvas Component-Set Isolate — lightweight iframe entry point.
+ *
+ * Renders ALL named exports from a .story.jsx module in a grid layout,
+ * bypassing the full SPA bootstrap (router, StoryboardProvider, data index).
+ *
+ * This is the component-set equivalent of componentIsolate.jsx, which renders
+ * a single export. By avoiding the full app bootstrap, component-set widgets
+ * load significantly faster — especially important since each widget is an
+ * iframe that would otherwise need to initialize the entire app.
+ *
+ * Query params:
+ *   module   — absolute or base-relative path to the .story.jsx file
+ *   layout   — "horizontal" (default) | "vertical"
+ *   selected — export name of the currently selected cell
+ *   theme    — canvas theme (light / dark / dark_dimmed)
+ */
+import { createElement, Component as ReactComponent, useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ThemeProvider, BaseStyles } from '@primer/react'
+
+// ── Primer Primitives CSS (required for CSS variables) ──────────────
+import '@primer/primitives/dist/css/base/size/size.css'
+import '@primer/primitives/dist/css/base/typography/typography.css'
+import '@primer/primitives/dist/css/base/motion/motion.css'
+import '@primer/primitives/dist/css/functional/size/border.css'
+import '@primer/primitives/dist/css/functional/size/breakpoints.css'
+import '@primer/primitives/dist/css/functional/size/size-coarse.css'
+import '@primer/primitives/dist/css/functional/size/size-fine.css'
+import '@primer/primitives/dist/css/functional/size/size.css'
+import '@primer/primitives/dist/css/functional/size/viewport.css'
+import '@primer/primitives/dist/css/functional/typography/typography.css'
+import '@primer/primitives/dist/css/functional/themes/light.css'
+import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'
+import '@primer/primitives/dist/css/functional/themes/dark.css'
+import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'
+import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'
+import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'
+
+import styles from '../story/ComponentSetPage.module.css'
+
+// ── Error Boundary ──────────────────────────────────────────────────
+class IsolateErrorBoundary extends ReactComponent {
+  constructor(props) {
+    super(props)
+    this.state = { error: null }
+  }
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+  render() {
+    if (this.state.error) {
+      return createElement('div', { style: errorStyle },
+        createElement('strong', null, this.props.name || 'Component'),
+        createElement('br'),
+        String(this.state.error.message || this.state.error),
+      )
+    }
+    return this.props.children
+  }
+}
+
+const errorStyle = {
+  padding: '16px',
+  color: '#cf222e',
+  fontFamily: 'system-ui, -apple-system, sans-serif',
+  fontSize: '13px',
+  lineHeight: 1.5,
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+}
+
+// ── Resolve module path ─────────────────────────────────────────────
+function resolveModulePath(raw) {
+  if (!raw) return raw
+  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(raw)) return raw
+  if (!raw.startsWith('/')) return raw
+  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+  if (!base) return raw
+  if (raw.startsWith(base)) return raw
+  return `${base}${raw}`
+}
+
+// ── Component-Set Grid (mirrors ComponentSetPage UI) ────────────────
+function ComponentSetGrid({ exports, layout, initialSelected }) {
+  const [selected, setSelected] = useState(initialSelected)
+  const gridRef = useRef(null)
+
+  const handleSelect = useCallback((exportName) => {
+    const next = exportName === selected ? '' : exportName
+    setSelected(next)
+
+    // Update URL without navigation
+    const params = new URLSearchParams(window.location.search)
+    if (next) params.set('selected', next)
+    else params.delete('selected')
+    window.history.replaceState(null, '', `${window.location.pathname}?${params}`)
+
+    // Notify parent widget
+    if (window.parent !== window) {
+      window.parent.postMessage({
+        type: 'storyboard:component-set:select',
+        exportName: next || null,
+      }, '*')
+    }
+  }, [selected])
+
+  // Measure cells and post grid size to parent
+  useLayoutEffect(() => {
+    const grid = gridRef.current
+    if (!grid || !exports) return
+
+    const cells = grid.querySelectorAll('[data-cell-content]')
+    if (cells.length === 0) return
+
+    function measure() {
+      let maxW = 0
+      let maxH = 0
+      for (const el of cells) {
+        maxW = Math.max(maxW, el.scrollWidth)
+        maxH = Math.max(maxH, el.scrollHeight)
+      }
+      grid.style.setProperty('--cell-snap-w', `${maxW}px`)
+      grid.style.setProperty('--cell-snap-h', `${maxH}px`)
+
+      if (window.parent !== window) {
+        requestAnimationFrame(() => {
+          window.parent.postMessage({
+            type: 'storyboard:component-set:resize',
+            width: grid.scrollWidth,
+            height: grid.scrollHeight,
+          }, '*')
+        })
+      }
+    }
+
+    measure()
+    document.fonts.ready.then(() => requestAnimationFrame(measure))
+
+    const ro = new ResizeObserver(measure)
+    for (const el of cells) ro.observe(el)
+    return () => ro.disconnect()
+  }, [exports, layout])
+
+  // Signal snapshot-ready
+  useEffect(() => {
+    document.fonts.ready.then(() => {
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        window.__sbSnapshotReady?.()
+      }))
+    })
+  }, [exports])
+
+  const exportNames = Object.keys(exports)
+
+  // eslint-disable-next-line react-hooks/refs -- ref assigned to DOM element, not read during render
+  return createElement('div', {
+    ref: gridRef,
+    className: styles.grid,
+    'data-layout': layout,
+  },
+    exportNames.map((exportName) => {
+      const Component = exports[exportName]
+      const isSelected = exportName === selected
+      return createElement('div', {
+        key: exportName,
+        className: styles.cell,
+        'data-selected': isSelected || undefined,
+      },
+        createElement('button', {
+          className: styles.cellLabel,
+          onClick: () => handleSelect(exportName),
+          'data-selected': isSelected || undefined,
+          'aria-pressed': isSelected,
+        },
+          createElement('span', { className: styles.cellRadio, 'data-selected': isSelected || undefined }),
+          createElement('span', { className: styles.cellName }, exportName),
+        ),
+        createElement('div', { className: styles.cellContent, 'data-cell-content': '' },
+          createElement(IsolateErrorBoundary, { name: exportName },
+            createElement(Component),
+          ),
+        ),
+      )
+    }),
+  )
+}
+
+// ── Main ────────────────────────────────────────────────────────────
+const params = new URLSearchParams(window.location.search)
+const modulePath = params.get('module')
+const layout = params.get('layout') || 'horizontal'
+const selected = params.get('selected') || ''
+const theme = params.get('theme') || 'light'
+
+const colorMode = theme.startsWith('dark') ? 'night' : 'day'
+
+document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark') ? 'dark' : 'light')
+document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
+document.documentElement.setAttribute('data-light-theme', theme.startsWith('dark') ? '' : theme || 'light')
+
+// Suppress HMR full-reloads — this iframe is embedded inside a canvas page
+// that manages its own reload lifecycle. Without this guard, every file change
+// causes the iframe to flash/reload.
+if (import.meta.hot) {
+  const msg = { active: true }
+  import.meta.hot.send('storyboard:canvas-hmr-guard', msg)
+  setInterval(() => import.meta.hot.send('storyboard:canvas-hmr-guard', msg), 3000)
+}
+
+const root = createRoot(document.getElementById('root'))
+
+async function mount() {
+  if (!modulePath) {
+    root.render(createElement('div', { style: errorStyle }, 'Missing module param'))
+    return
+  }
+
+  if (!modulePath.match(/\.story\.(jsx|tsx)$/)) {
+    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .story.jsx/.tsx files are allowed'))
+    return
+  }
+
+  try {
+    const resolved = resolveModulePath(modulePath)
+    const mod = await import(/* @vite-ignore */ resolved)
+
+    const namedExports = {}
+    for (const [key, value] of Object.entries(mod)) {
+      if (key !== 'default' && typeof value === 'function') {
+        namedExports[key] = value
+      }
+    }
+
+    if (Object.keys(namedExports).length === 0) {
+      throw new Error('No named exports found in story module')
+    }
+
+    root.render(
+      createElement(ThemeProvider, { colorMode },
+        createElement(BaseStyles, null,
+          createElement(ComponentSetGrid, { exports: namedExports, layout, initialSelected: selected }),
+        ),
+      ),
+    )
+  } catch (err) {
+    root.render(
+      createElement('div', { style: errorStyle },
+        createElement('strong', null, 'Component Set'),
+        createElement('br'),
+        String(err.message || err),
+      ),
+    )
+  }
+}
+
+mount()

package/src/canvas/widgets/ComponentSetWidget.jsx

@@ -1,208 +1,2 @@
-/**
- * ComponentSetWidget — renders all exports from a story in a single iframe grid.
- *
- * Instead of N iframes (one per export), this widget loads one iframe pointing
- * to the story's ComponentSetPage. Each export renders in a grid cell inside
- * that single page. The user can select a cell (via label click) which updates
- * `props.selected` — visible to connected agents.
- *
- * Props: { storyId, layout, selected, width, height }
- */
-import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
-import { getStoryData } from '@dfosco/storyboard-core'
-import Icon from '../../Icon.jsx'
-import WidgetWrapper from './WidgetWrapper.jsx'
-import ResizeHandle from './ResizeHandle.jsx'
-import { useIframeDevLogs } from './iframeDevLogs.js'
-import styles from './ComponentSetWidget.module.css'
-import overlayStyles from './embedOverlay.module.css'
-
-function GridIcon({ size = 16 }) {
-  return <Icon name="iconoir/view-grid" size={size} />
-}
-
-function resolveComponentSetUrl(storyId, layout, selected) {
-  const story = getStoryData(storyId)
-  if (!story?._route) return ''
-  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-  const params = new URLSearchParams()
-  params.set('_sb_embed', '')
-  params.set('_sb_hide_branch_bar', '')
-  params.set('_sb_component_set', '')
-  if (layout) params.set('layout', layout)
-  if (selected) params.set('selected', selected)
-  return `${base}${story._route}?${params}`
-}
-
-export default forwardRef(function ComponentSetWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
-  const storyId = props?.storyId || ''
-  const layout = props?.layout || 'horizontal'
-  const selected = props?.selected || ''
-  const width = props?.width
-  const height = props?.height
-
-  const containerRef = useRef(null)
-  const iframeRef = useRef(null)
-  const [interactive, setInteractive] = useState(false)
-  const [storyIndexKey, setStoryIndexKey] = useState(0)
-
-  // Re-resolve when story index is live-patched
-  useEffect(() => {
-    const handler = () => setStoryIndexKey((k) => k + 1)
-    document.addEventListener('storyboard:story-index-changed', handler)
-    return () => document.removeEventListener('storyboard:story-index-changed', handler)
-  }, [])
-
-  const enterInteractive = useCallback(() => setInteractive(true), [])
-
-  // Exit interactive mode when clicking outside
-  useEffect(() => {
-    if (!interactive) return
-    function handlePointerDown(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        const chromeEl = e.target.closest(`[data-widget-id="${widgetId}"]`)
-        if (chromeEl) return
-        setInteractive(false)
-      }
-    }
-    document.addEventListener('pointerdown', handlePointerDown)
-    return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [interactive, widgetId])
-
-  // Listen for selection messages from the embedded ComponentSetPage
-  useEffect(() => {
-    function handleMessage(e) {
-      if (e.source !== iframeRef.current?.contentWindow) return
-      if (e.data?.type === 'storyboard:component-set:select') {
-        const newSelected = e.data.exportName || ''
-        if (newSelected !== selected) {
-          onUpdate?.({ selected: newSelected })
-        }
-      } else if (e.data?.type === 'storyboard:component-set:resize') {
-        // Auto-size widget to fit the grid content (+ header height)
-        const headerH = 32
-        const newW = Math.max(200, Math.ceil(e.data.width))
-        const newH = Math.max(60, Math.ceil(e.data.height) + headerH)
-        if (newW !== width || newH !== height) {
-          onUpdate?.({ width: newW, height: newH })
-        }
-      }
-    }
-    window.addEventListener('message', handleMessage)
-    return () => window.removeEventListener('message', handleMessage)
-  }, [selected, width, height, onUpdate])
-
-  const handleResize = useCallback((w, h) => {
-    onUpdate?.({ width: w, height: h })
-  }, [onUpdate])
-
-  useImperativeHandle(ref, () => ({
-    handleAction(actionId) {
-      if (actionId === 'flip-layout') {
-        const next = layout === 'horizontal' ? 'vertical' : 'horizontal'
-        onUpdate?.({ layout: next })
-        return true
-      } else if (actionId === 'open-external') {
-        const story = getStoryData(storyId)
-        if (story?._route) {
-          const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-          window.open(`${base}${story._route}`, '_blank', 'noopener')
-        }
-        return true
-      }
-    },
-  }), [storyId, layout, onUpdate])
-
-  const iframeSrc = useMemo(
-    () => resolveComponentSetUrl(storyId, layout, selected),
-    // storyIndexKey forces re-evaluation when HMR mutates the story index
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [storyId, layout, selected, storyIndexKey],
-  )
-
-  useIframeDevLogs({
-    widget: 'ComponentSetWidget',
-    loaded: interactive && Boolean(iframeSrc),
-    src: iframeSrc,
-  })
-
-  const displayName = storyId || 'Component Set'
-
-  if (!storyId) {
-    return (
-      <WidgetWrapper>
-        <div className={styles.container} ref={containerRef}>
-          <div className={styles.error}>
-            <span className={styles.errorIcon}><GridIcon size={20} /></span>
-            <span className={styles.errorText}>Missing story ID</span>
-          </div>
-        </div>
-      </WidgetWrapper>
-    )
-  }
-
-  if (!iframeSrc) {
-    return (
-      <WidgetWrapper>
-        <div className={styles.container} ref={containerRef}>
-          <div className={styles.error}>
-            <span className={styles.errorIcon}><GridIcon size={20} /></span>
-            <span className={styles.errorText}>Story &ldquo;{storyId}&rdquo; not found or has no route</span>
-          </div>
-        </div>
-      </WidgetWrapper>
-    )
-  }
-
-  const sizeStyle = {}
-  if (typeof width === 'number') sizeStyle.width = `${width}px`
-  if (typeof height === 'number') sizeStyle.height = `${height}px`
-
-  return (
-    <WidgetWrapper>
-      <div ref={containerRef} className={styles.container} style={sizeStyle}>
-        <div className={styles.header}>
-          <span className={styles.headerIcon}><GridIcon size={16} /></span>
-          <span className={styles.headerTitle}>{displayName}</span>
-          {selected && (
-            <span className={styles.headerSelected}>· {selected}</span>
-          )}
-          <span className={styles.headerLayout} title={`Layout: ${layout}`}>
-            {layout === 'horizontal' ? '⇔' : '⇕'}
-          </span>
-        </div>
-        <div className={styles.content}>
-          <iframe
-            ref={iframeRef}
-            src={iframeSrc}
-            className={styles.iframe}
-            title={`${displayName} component set`}
-            onLoad={(e) => e.target.blur()}
-          />
-        </div>
-        {!interactive && (
-          <div
-            className={overlayStyles.interactOverlay}
-            onClick={(e) => {
-              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
-              enterInteractive()
-            }}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                e.stopPropagation()
-                enterInteractive()
-              }
-            }}
-            aria-label="Click to interact"
-          >
-            <span className={overlayStyles.interactHint}>Click to interact</span>
-          </div>
-        )}
-      </div>
-      {resizable && <ResizeHandle targetRef={containerRef} width={width} height={height} onResize={handleResize} />}
-    </WidgetWrapper>
-  )
-})
+// Deprecated — renamed to StorySetWidget. This re-export exists for backward compatibility.
+export { default } from './StorySetWidget.jsx'

package/src/canvas/widgets/ComponentWidget.jsx

@@ -1,139 +0,0 @@
-import { useRef, useCallback, useState, useEffect, useMemo } from 'react'
-import WidgetWrapper from './WidgetWrapper.jsx'
-import ResizeHandle from './ResizeHandle.jsx'
-import ComponentErrorBoundary from '../ComponentErrorBoundary.jsx'
-import { useIframeDevLogs } from './iframeDevLogs.js'
-import styles from './ComponentWidget.module.css'
-import overlayStyles from './embedOverlay.module.css'
-
-/**
- * Renders a live JSX export from a .story.jsx file.
- *
- * In dev mode (isLocalDev), each component is rendered inside an iframe
- * via the /_storyboard/canvas/isolate middleware. This isolates broken
- * components so they cannot crash the entire canvas page.
- *
- * In production, the component is rendered directly with an ErrorBoundary
- * as a fallback safety net.
- *
- * Double-click the overlay to enter interactive mode (dropdowns, buttons work).
- * Click outside to exit interactive mode.
- */
-export default function ComponentWidget({
-  component: Component,
-  jsxModule,
-  exportName,
-  canvasTheme,
-  isLocalDev,
-  width,
-  height,
-  onUpdate,
-  resizable,
-}) {
-  const containerRef = useRef(null)
-  const [interactive, setInteractive] = useState(false)
-  const [showIframe, setShowIframe] = useState(false)
-
-  const handleResize = useCallback((w, h) => {
-    onUpdate?.({ width: w, height: h })
-  }, [onUpdate])
-
-  const enterInteractive = useCallback(() => setInteractive(true), [])
-
-  // Exit interactive mode when clicking outside the component
-  useEffect(() => {
-    if (!interactive) return
-    function handlePointerDown(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setInteractive(false)
-        setShowIframe(false)
-      }
-    }
-    document.addEventListener('pointerdown', handlePointerDown)
-    return () => document.removeEventListener('pointerdown', handlePointerDown)
-  }, [interactive])
-
-  // Build iframe src for dev isolation
-  const iframeSrc = useMemo(() => {
-    if (!isLocalDev || !jsxModule || !exportName) return null
-    const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-    const params = new URLSearchParams({
-      module: jsxModule,
-      export: exportName,
-      theme: canvasTheme || 'light',
-    })
-    return `${basePath}/_storyboard/canvas/isolate?${params}`
-  }, [isLocalDev, jsxModule, exportName, canvasTheme])
-
-  const useIframe = isLocalDev && iframeSrc
-
-  useIframeDevLogs({
-    widget: 'ComponentWidget',
-    loaded: Boolean(useIframe && showIframe),
-    src: iframeSrc,
-  })
-
-  if (!useIframe && !Component) return null
-
-  const sizeStyle = {}
-  if (typeof width === 'number') sizeStyle.width = `${width}px`
-  if (typeof height === 'number') sizeStyle.height = `${height}px`
-
-  return (
-    <WidgetWrapper>
-      <div ref={containerRef} className={styles.container} style={sizeStyle}>
-        <div className={styles.content}>
-          {useIframe ? (
-            showIframe ? (
-              <iframe
-                src={iframeSrc}
-                className={styles.iframe}
-                title={exportName || 'Component widget'}
-                sandbox="allow-same-origin allow-scripts"
-                onLoad={(e) => e.target.blur()}
-              />
-            ) : (
-              <div className={styles.placeholder} />
-            )
-          ) : Component ? (
-            <ComponentErrorBoundary name={exportName}>
-              <Component />
-            </ComponentErrorBoundary>
-          ) : null}
-        </div>
-        {!interactive && (
-          <div
-            className={overlayStyles.interactOverlay}
-            onClick={(e) => {
-              // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
-              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
-              if (useIframe) setShowIframe(true)
-              enterInteractive()
-            }}
-            role="button"
-            tabIndex={0}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                e.stopPropagation()
-                if (useIframe) setShowIframe(true)
-                enterInteractive()
-              }
-            }}
-            aria-label="Click to interact with component"
-          >
-            <span className={overlayStyles.interactHint}>Click to interact</span>
-          </div>
-        )}
-        {resizable && (
-          <ResizeHandle
-            targetRef={containerRef}
-            minWidth={100}
-            minHeight={60}
-            onResize={handleResize}
-          />
-        )}
-      </div>
-    </WidgetWrapper>
-  )
-}