@dfosco/storyboard-react 4.0.0-beta.9 → 4.0.0

package/src/canvas/widgets/StoryWidget.jsx

@@ -0,0 +1,277 @@
+/**
+ * Renders a story at its route URL inside an iframe on canvas.
+ *
+ * Features:
+ * - Title bar showing story name + export
+ * - "Show code" action toggles between iframe and source view
+ * - "Copy code" action copies the story source to clipboard
+ *
+ * Props: { storyId, exportName, width, height }
+ */
+import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { getStoryData } from '@dfosco/storyboard-core'
+import { createInspectorHighlighter } from '@dfosco/storyboard-core/inspector/highlighter'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import styles from './StoryWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+function ComponentIcon({ size = 36 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+      <path d="M5.21173 15.1113L2.52473 12.4243C2.29041 12.1899 2.29041 11.8101 2.52473 11.5757L5.21173 8.88873C5.44605 8.65442 5.82595 8.65442 6.06026 8.88873L8.74727 11.5757C8.98158 11.8101 8.98158 12.1899 8.74727 12.4243L6.06026 15.1113C5.82595 15.3456 5.44605 15.3456 5.21173 15.1113Z" />
+      <path d="M11.5757 21.475L8.88874 18.788C8.65443 18.5537 8.65443 18.1738 8.88874 17.9395L11.5757 15.2525C11.8101 15.0182 12.19 15.0182 12.4243 15.2525L15.1113 17.9395C15.3456 18.1738 15.3456 18.5537 15.1113 18.788L12.4243 21.475C12.19 21.7094 11.8101 21.7094 11.5757 21.475Z" />
+      <path d="M17.9395 15.1113L15.2525 12.4243C15.0182 12.1899 15.0182 11.8101 15.2525 11.5757L17.9395 8.88873C18.1738 8.65442 18.5537 8.65442 18.788 8.88873L21.475 11.5757C21.7094 11.8101 21.7094 12.1899 21.475 12.4243L18.788 15.1113C18.5537 15.3456 18.1738 15.3456 17.9395 15.1113Z" />
+      <path d="M11.5757 8.74727L8.88874 6.06026C8.65443 5.82595 8.65443 5.44605 8.88874 5.21173L11.5757 2.52473C11.8101 2.29041 12.19 2.29041 12.4243 2.52473L15.1113 5.21173C15.3456 5.44605 15.3456 5.82595 15.1113 6.06026L12.4243 8.74727C12.19 8.98158 11.8101 8.98158 11.5757 8.74727Z" />
+    </svg>
+  )
+}
+
+function resolveStoryUrl(storyId, exportName) {
+  const story = getStoryData(storyId)
+  if (!story?._route) return ''
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const params = new URLSearchParams()
+  if (exportName) params.set('export', exportName)
+  params.set('_sb_embed', '')
+  params.set('_sb_hide_branch_bar', '')
+  return `${base}${story._route}?${params}`
+}
+
+const _storySourcesCache = {}
+
+async function fetchStorySource(modulePath) {
+  if (modulePath in _storySourcesCache) return _storySourcesCache[modulePath]
+  const url = modulePath.startsWith('/') ? modulePath : `/${modulePath}`
+  const res = await fetch(`${url}?raw`)
+  if (!res.ok) throw new Error(`Failed to fetch ${url}`)
+  const code = await res.text()
+  _storySourcesCache[modulePath] = code
+  return code
+}
+
+export default forwardRef(function StoryWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
+  const storyId = props?.storyId || ''
+  const exportName = props?.exportName || ''
+  const width = props?.width
+  const height = props?.height
+
+  const containerRef = useRef(null)
+  const iframeRef = useRef(null)
+  const [interactive, setInteractive] = useState(false)
+  const [showCode, setShowCode] = useState(!!props?.showCode)
+  const [sourceCode, setSourceCode] = useState(null)
+  const [highlightedHtml, setHighlightedHtml] = useState(null)
+  const [sourceLoading, setSourceLoading] = useState(false)
+  const [storyIndexKey, setStoryIndexKey] = useState(0)
+
+  // Re-resolve story URL when the 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 toggleShowCode = useCallback(() => {
+    setShowCode((v) => {
+      const next = !v
+      if (onUpdate) onUpdate({ showCode: next })
+      return next
+    })
+  }, [onUpdate])
+
+  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])
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  // Load source code when show-code is toggled on
+  useEffect(() => {
+    if (!showCode || sourceCode !== null) return
+    const story = getStoryData(storyId)
+    if (!story?._storyModule) {
+      setSourceCode('// Source not available')
+      return
+    }
+    let cancelled = false
+    setSourceLoading(true)
+    fetchStorySource(story._storyModule)
+      .then((code) => { if (!cancelled) { setSourceCode(code || '// Empty file'); setSourceLoading(false) } })
+      .catch(() => { if (!cancelled) { setSourceCode('// Failed to load source'); setSourceLoading(false) } })
+    return () => { cancelled = true; setSourceLoading(false) }
+  }, [showCode, sourceCode, storyId])
+
+  // Re-highlight when theme changes
+  const [codeThemeKey, setCodeThemeKey] = useState(0)
+  useEffect(() => {
+    function onThemeChanged() { setCodeThemeKey((k) => k + 1) }
+    document.addEventListener('storyboard:theme:changed', onThemeChanged)
+    return () => document.removeEventListener('storyboard:theme:changed', onThemeChanged)
+  }, [])
+
+  // Syntax-highlight source code
+  useEffect(() => {
+    if (!sourceCode) return
+    let cancelled = false
+    createInspectorHighlighter().then((hl) => {
+      if (cancelled) return
+      const lang = storyId.endsWith('.tsx') ? 'tsx' : 'jsx'
+      setHighlightedHtml(hl.codeToHtml(sourceCode, { lang }))
+    })
+    return () => { cancelled = true }
+  }, [sourceCode, storyId, codeThemeKey])
+
+  const copyCode = useCallback(async () => {
+    if (sourceCode) { await navigator.clipboard?.writeText(sourceCode); return }
+    const story = getStoryData(storyId)
+    if (!story?._storyModule) return
+    try {
+      const code = await fetchStorySource(story._storyModule)
+      setSourceCode(code)
+      await navigator.clipboard?.writeText(code)
+    } catch { /* */ }
+  }, [sourceCode, storyId])
+
+  useImperativeHandle(ref, () => ({
+    getState(key) {
+      if (key === 'showCode') return showCode
+      return undefined
+    },
+    handleAction(actionId) {
+      if (actionId === 'show-code') toggleShowCode()
+      else if (actionId === 'copy-code') copyCode()
+      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')
+        }
+      }
+    },
+  }), [storyId, showCode, toggleShowCode, copyCode])
+
+  const iframeSrc = useMemo(
+    () => resolveStoryUrl(storyId, exportName),
+    [storyId, exportName, storyIndexKey],
+  )
+
+  useIframeDevLogs({
+    widget: 'StoryWidget',
+    loaded: interactive && !showCode && Boolean(iframeSrc),
+    src: iframeSrc,
+  })
+
+  const displayName = exportName ? `${storyId} / ${exportName}` : storyId
+
+  if (!storyId) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><ComponentIcon 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}><ComponentIcon 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}><ComponentIcon size={16} /></span>
+          <span className={styles.headerTitle}>{displayName}</span>
+        </div>
+        {showCode ? (
+          <div
+            className={styles.codeView}
+            data-canvas-allow-text-selection
+            onPointerDown={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className={styles.codeHeader}>
+              <span className={styles.codeLabel}>{storyId}.story.jsx</span>
+              <button className={styles.codeCloseBtn} onClick={() => setShowCode(false)} aria-label="Close code view">×</button>
+            </div>
+            {sourceLoading ? (
+              <div className={styles.codeLoading}>Loading…</div>
+            ) : highlightedHtml ? (
+              <div className={styles.codeBlock} dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
+            ) : (
+              <pre className={styles.codeBlock}><code>{sourceCode || ''}</code></pre>
+            )}
+          </div>
+        ) : (
+          <>
+            <div className={styles.content}>
+              <iframe
+                ref={iframeRef}
+                src={iframeSrc}
+                className={styles.iframe}
+                title={displayName}
+              />
+            </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>
+  )
+})

package/src/canvas/widgets/StoryWidget.module.css

@@ -0,0 +1,211 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 100px;
+  min-height: 60px;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+}
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--fgColor-muted, #656d76);
+  text-align: center;
+}
+
+.placeholderLabel {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--borderColor-muted, #d0d7de);
+  border-top-color: var(--fgColor-accent, #2f81f7);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.snapshotImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+  display: block;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+.codeView {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 37px);
+  overflow: hidden;
+}
+
+.codeHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-inset, #eff2f5);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.codeLabel {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.codeCloseBtn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.codeCloseBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.codeBlock {
+  flex: 1;
+  margin: 0;
+  overflow: auto;
+  user-select: text;
+  cursor: text;
+}
+
+/* Style the highlighted pre from the inspector highlighter.
+   padding uses !important to override the inline padding:0 from codeToHtml. */
+.codeBlock pre {
+  margin: 0;
+  padding: var(--base-size-8, 8px) !important;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.6;
+  tab-size: 2;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+/* Fallback when no highlighted HTML (plain pre/code) */
+.codeBlock > code {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.6;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.codeLoading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--fgColor-danger, #cf222e);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.errorIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.errorText {
+  word-break: break-word;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: var(--fgColor-muted, #656d76);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+}

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
 import { Tooltip } from '@primer/react'
-import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed } from '@primer/octicons-react'
+import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed, CodeIcon as OcticonCode, UnwrapIcon as OcticonUnwrap, ImageIcon as OcticonImage, UnfoldIcon as OcticonUnfold, FoldIcon as OcticonFold } from '@primer/octicons-react'
 import styles from './WidgetChrome.module.css'
 
 const STICKY_NOTE_COLORS = {
@@ -60,6 +60,18 @@ function EyeClosedIcon() {
   return <OcticonEyeClosed size={12} />
 }
 
+function CodeIcon() {
+  return <OcticonCode size={12} />
+}
+
+function UnwrapIcon() {
+  return <OcticonUnwrap size={12} />
+}
+
+function ImageIcon() {
+  return <OcticonImage size={12} />
+}
+
 function CopyIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
@@ -110,6 +122,22 @@ function ExpandIcon() {
   )
 }
 
+function SyncIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z" />
+    </svg>
+  )
+}
+
+function UnfoldIcon() {
+  return <OcticonUnfold size={12} />
+}
+
+function FoldIcon() {
+  return <OcticonFold size={12} />
+}
+
 /** Icon registry — maps icon name strings from config to React components. */
 const ICON_REGISTRY = {
   'trash': DeleteIcon,
@@ -119,12 +147,18 @@ const ICON_REGISTRY = {
   'open-external': OpenExternalIcon,
   'eye': EyeIcon,
   'eye-closed': EyeClosedIcon,
+  'code': CodeIcon,
+  'unwrap': UnwrapIcon,
+  'image': ImageIcon,
   'copy': CopyIcon,
   'link': LinkIcon,
   'more': MoreIcon,
   'chevron-down': ChevronDownIcon,
   'download': DownloadIcon,
   'expand': ExpandIcon,
+  'sync': SyncIcon,
+  'unfold': UnfoldIcon,
+  'fold': FoldIcon,
 }
 
 /** Danger-styled actions in the overflow menu. */
@@ -189,8 +223,8 @@ function WidgetOverflowMenu({ widgetId, menuFeatures, onAction }) {
       url.searchParams.set('widget', widgetId)
       navigator.clipboard.writeText(url.toString()).catch(() => {})
     } else if (action === 'copy-widget-id') {
-      const canvasName = window.location.pathname.split('/').filter(Boolean).pop() || ''
-      navigator.clipboard.writeText(`${canvasName}/${widgetId}`).catch(() => {})
+      const canvasId = window.__storyboardCanvasBridgeState?.canvasId || ''
+      navigator.clipboard.writeText(`${canvasId}::${widgetId}`).catch(() => {})
     } else {
       onAction?.(action)
     }
@@ -411,16 +445,22 @@ export default function WidgetChrome({
     onUpdate?.({ color })
   }, [onUpdate])
 
-  const showToolbar = !readOnly && (hovered || selected)
+  // In readOnly mode, features are already filtered to prod-only by getFeatures.
+  // Show toolbar if there are prod features even when readOnly.
+  const hasFeatures = features.length > 0
+  const showToolbar = (hovered || selected) && (!readOnly || hasFeatures)
   const showFeatures = showToolbar && !multiSelected
+  const menuFeatures = features.filter((f) => f.menu)
 
   return (
     <div
       className={styles.chromeContainer}
-      onMouseEnter={readOnly ? undefined : handleMouseEnter}
-      onMouseLeave={readOnly ? undefined : handleMouseLeave}
+      data-widget-id={widgetId}
+      data-tc-elevated={(hovered || selected) || undefined}
+      onMouseEnter={(readOnly && !hasFeatures) ? undefined : handleMouseEnter}
+      onMouseLeave={(readOnly && !hasFeatures) ? undefined : handleMouseLeave}
     >
-      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`}>
+      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined}>
         {children}
       </div>
       <div
@@ -464,6 +504,11 @@ export default function WidgetChrome({
                   }
                 }
 
+                // Show-code toggle: swap label based on widget state
+                if (feature.action === 'show-code' && widgetRef?.current?.getState?.('showCode')) {
+                  label = 'Show component'
+                }
+
                 return (
                   <Tooltip key={feature.id} text={label} direction="n">
                     <button
@@ -495,22 +540,33 @@ export default function WidgetChrome({
 
               return null
             })}
-            <WidgetOverflowMenu
-              widgetId={widgetId}
-              menuFeatures={features.filter((f) => f.menu)}
-              onAction={onAction}
-            />
+            {menuFeatures.length > 0 && (
+              <WidgetOverflowMenu
+                widgetId={widgetId}
+                menuFeatures={menuFeatures}
+                onAction={(actionId) => {
+                  // Route overflow menu actions through the widget ref first
+                  if (actionId !== 'delete' && actionId !== 'copy' && widgetRef?.current?.handleAction) {
+                    widgetRef.current.handleAction(actionId)
+                  } else {
+                    onAction?.(actionId)
+                  }
+                }}
+              />
+            )}
           </div>
           )}
 
-          <Tooltip text={selected ? "Click and drag to move" : "Select"} direction="n">
-            <button
-              className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
-              onClick={handleHandleClick}
-              aria-label={selected ? "Drag to move widget" : "Select widget"}
-              aria-pressed={selected}
-            />
-          </Tooltip>
+          {!readOnly && (
+            <Tooltip text={selected ? "Click and drag to move" : "Select"} direction="n">
+              <button
+                className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
+                onClick={handleHandleClick}
+                aria-label={selected ? "Drag to move widget" : "Select widget"}
+                aria-pressed={selected}
+              />
+            </Tooltip>
+          )}
         </div>
       </div>
     </div>

package/src/canvas/widgets/WidgetChrome.module.css

@@ -33,7 +33,7 @@
   top: calc(100% + 10px);
 }
 
-/* Trigger dot — centered, visible at rest */
+/* Trigger dot — positioned in the toolbar, visible at rest */
 .triggerDot {
   width: 6px;
   height: 6px;
@@ -41,10 +41,6 @@
   background: var(--borderColor-muted, #d0d7de);
   opacity: 0.5;
   transition: opacity 120ms;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
 }
 
 :global([data-sb-canvas-theme^='dark']) .triggerDot {
@@ -235,7 +231,7 @@
 .overflowMenu {
   position: absolute;
   top: calc(100% + 10px);
-  right: 0;
+  left: 0;
   min-width: max-content;
   padding: 4px;
   background: var(--bgColor-default, #ffffff);

package/src/canvas/widgets/WidgetWrapper.module.css

@@ -11,6 +11,8 @@
 
 .content {
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 @media (prefers-color-scheme: dark) {