@dfosco/storyboard-react 3.9.1 → 3.10.0-beta.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.9.1",
+  "version": "3.10.0-beta.1",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.9.1",
-    "@dfosco/tiny-canvas": "3.9.1",
+    "@dfosco/storyboard-core": "3.10.0-beta.1",
+    "@dfosco/tiny-canvas": "3.10.0-beta.1",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"

package/src/canvas/CanvasControls.jsx

@@ -1,15 +1,12 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
+import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
 import styles from './CanvasControls.module.css'
 
 const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200]
 export const ZOOM_MIN = ZOOM_STEPS[0]
 export const ZOOM_MAX = ZOOM_STEPS[ZOOM_STEPS.length - 1]
 
-const WIDGET_TYPES = [
-  { type: 'sticky-note', label: 'Sticky Note' },
-  { type: 'markdown', label: 'Markdown' },
-  { type: 'prototype', label: 'Prototype embed' },
-]
+const WIDGET_TYPES = getMenuWidgetTypes()
 
 /**
  * Focused canvas toolbar — bottom-left controls for zoom and widget creation.

package/src/canvas/CanvasPage.jsx

@@ -6,6 +6,8 @@ import { shouldPreventCanvasTextSelection } from './textSelection.js'
 import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
+import { getFeatures } from './widgets/widgetConfig.js'
+import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi } from './canvasApi.js'
 import styles from './CanvasPage.module.css'
@@ -15,6 +17,9 @@ const ZOOM_MAX = 200
 
 const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
 
+/** Matches branch-deploy base path prefixes like /branch--my-feature/ */
+const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
+
 function getToolbarColorMode(theme) {
   return String(theme || 'light').startsWith('dark') ? 'dark' : 'light'
 }
@@ -65,17 +70,61 @@ function roundPosition(value) {
 }
 
 /** Renders a single JSON-defined widget by type lookup. */
-function WidgetRenderer({ widget, onUpdate }) {
+function WidgetRenderer({ widget, onUpdate, widgetRef }) {
   const Component = getWidgetComponent(widget.type)
   if (!Component) {
     console.warn(`[canvas] Unknown widget type: ${widget.type}`)
     return null
   }
-  return createElement(Component, {
-    id: widget.id,
-    props: widget.props,
-    onUpdate,
-  })
+  // Only pass ref to forwardRef-wrapped components (e.g. PrototypeEmbed)
+  const elementProps = { id: widget.id, props: widget.props, onUpdate }
+  if (Component.$$typeof === Symbol.for('react.forward_ref')) {
+    elementProps.ref = widgetRef
+  }
+  return createElement(Component, elementProps)
+}
+
+/**
+ * Wrapper for each JSON widget that holds its own ref for imperative actions.
+ * This allows WidgetChrome to dispatch actions to the widget via ref.
+ */
+function ChromeWrappedWidget({
+  widget,
+  selected,
+  onSelect,
+  onDeselect,
+  onUpdate,
+  onRemove,
+}) {
+  const widgetRef = useRef(null)
+  const features = getFeatures(widget.type)
+
+  const handleAction = useCallback((actionId) => {
+    if (actionId === 'delete') {
+      onRemove(widget.id)
+    }
+  }, [widget.id, onRemove])
+
+  return (
+    <WidgetChrome
+      widgetId={widget.id}
+      widgetType={widget.type}
+      features={features}
+      selected={selected}
+      widgetProps={widget.props}
+      widgetRef={widgetRef}
+      onSelect={onSelect}
+      onDeselect={onDeselect}
+      onAction={handleAction}
+      onUpdate={(updates) => onUpdate(widget.id, updates)}
+    >
+      <WidgetRenderer
+        widget={widget}
+        onUpdate={(updates) => onUpdate(widget.id, updates)}
+        widgetRef={widgetRef}
+      />
+    </WidgetChrome>
+  )
 }
 
 /**
@@ -154,6 +203,25 @@ export default function CanvasPage({ name }) {
     )
   }, [name])
 
+  const debouncedSourceSave = useRef(
+    debounce((canvasName, sources) => {
+      updateCanvas(canvasName, { sources }).catch((err) =>
+        console.error('[canvas] Failed to save sources:', err)
+      )
+    }, 2000)
+  ).current
+
+  const handleSourceUpdate = useCallback((exportName, updates) => {
+    setLocalSources((prev) => {
+      const current = Array.isArray(prev) ? prev : []
+      const next = current.some((s) => s?.export === exportName)
+        ? current.map((s) => (s?.export === exportName ? { ...s, ...updates } : s))
+        : [...current, { export: exportName, ...updates }]
+      debouncedSourceSave(name, next)
+      return next
+    })
+  }, [name, debouncedSourceSave])
+
   const handleItemDragEnd = useCallback((dragId, position) => {
     if (!dragId || !position) return
     const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
@@ -296,7 +364,34 @@ export default function CanvasPage({ name }) {
 
   // Paste handler — same-origin URLs become prototypes, other URLs become link previews, text becomes markdown
   useEffect(() => {
-    const baseUrl = window.location.origin + (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+    const origin = window.location.origin
+    const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+    const baseUrl = origin + basePath
+
+    // Check if a URL is same-origin, accounting for branch-deploy prefixes.
+    // e.g. https://site.com/branch--my-feature/Proto and https://site.com/storyboard/Proto
+    // are both same-origin prototype URLs.
+    function isSameOriginPrototype(url) {
+      if (!url.startsWith(origin)) return false
+      if (url.startsWith(baseUrl)) return true
+      // Match branch deploy URLs: origin + /branch--*/...
+      const pathAfterOrigin = url.slice(origin.length)
+      return BRANCH_PREFIX_RE.test(pathAfterOrigin)
+    }
+
+    // Strip the base path (or any branch prefix) from a pathname to get a portable src.
+    function extractPrototypeSrc(pathname) {
+      // Strip current base path
+      if (basePath && pathname.startsWith(basePath)) {
+        return pathname.slice(basePath.length) || '/'
+      }
+      // Strip branch prefix: /branch--name/rest → /rest
+      const branchMatch = pathname.match(BRANCH_PREFIX_RE)
+      if (branchMatch) {
+        return pathname.slice(branchMatch[0].length) || '/'
+      }
+      return pathname
+    }
 
     async function handlePaste(e) {
       const tag = e.target.tagName
@@ -310,11 +405,9 @@ export default function CanvasPage({ name }) {
       let type, props
       try {
         const parsed = new URL(text)
-        if (text.startsWith(baseUrl)) {
-          // Same-origin URL → prototype embed with the path portion
+        if (isSameOriginPrototype(text)) {
           const pathPortion = parsed.pathname + parsed.search + parsed.hash
-          const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-          const src = basePath ? pathPortion.replace(new RegExp(`^${basePath}`), '') : pathPortion
+          const src = extractPrototypeSrc(pathPortion)
           type = 'prototype'
           props = { src: src || '/', label: '', width: 800, height: 600 }
         } else {
@@ -453,32 +546,51 @@ export default function CanvasPage({ name }) {
   // Merge JSX-sourced widgets (from .canvas.jsx) and JSON widgets
   const allChildren = []
 
-  const sourcePositionByExport = Object.fromEntries(
+  const sourceDataByExport = Object.fromEntries(
     (localSources || [])
       .filter((source) => source?.export)
-      .map((source) => [source.export, source.position || { x: 0, y: 0 }])
+      .map((source) => [source.export, source])
   )
 
-  // 1. JSX-sourced component widgets
+  // 1. JSX-sourced component widgets (wrapped in WidgetChrome, not deletable)
+  const componentFeatures = getFeatures('component')
   if (jsxExports) {
     for (const [exportName, Component] of Object.entries(jsxExports)) {
-      const sourcePosition = sourcePositionByExport[exportName] || { x: 0, y: 0 }
+      const sourceData = sourceDataByExport[exportName] || {}
+      const sourcePosition = sourceData.position || { x: 0, y: 0 }
       allChildren.push(
         <div
           key={`jsx-${exportName}`}
           id={`jsx-${exportName}`}
           data-tc-x={sourcePosition.x}
           data-tc-y={sourcePosition.y}
+          data-tc-handle=".tc-drag-handle"
           {...canvasPrimerAttrs}
           style={canvasThemeVars}
+          onClick={(e) => {
+            e.stopPropagation()
+            setSelectedWidgetId(`jsx-${exportName}`)
+          }}
         >
-          <ComponentWidget component={Component} />
+          <WidgetChrome
+            features={componentFeatures}
+            selected={selectedWidgetId === `jsx-${exportName}`}
+            onSelect={() => setSelectedWidgetId(`jsx-${exportName}`)}
+            onDeselect={() => setSelectedWidgetId(null)}
+          >
+            <ComponentWidget
+              component={Component}
+              width={sourceData.width}
+              height={sourceData.height}
+              onUpdate={(updates) => handleSourceUpdate(exportName, updates)}
+            />
+          </WidgetChrome>
         </div>
       )
     }
   }
 
-  // 2. JSON-defined mutable widgets (selectable)
+  // 2. JSON-defined mutable widgets (selectable, wrapped in WidgetChrome)
   for (const widget of (localWidgets ?? [])) {
     allChildren.push(
       <div
@@ -486,17 +598,24 @@ export default function CanvasPage({ name }) {
         id={widget.id}
         data-tc-x={widget?.position?.x ?? 0}
         data-tc-y={widget?.position?.y ?? 0}
+        data-tc-handle=".tc-drag-handle"
         {...canvasPrimerAttrs}
         style={canvasThemeVars}
         onClick={(e) => {
           e.stopPropagation()
           setSelectedWidgetId(widget.id)
         }}
-        className={selectedWidgetId === widget.id ? styles.selected : undefined}
       >
-        <WidgetRenderer
+        <ChromeWrappedWidget
           widget={widget}
-          onUpdate={(updates) => handleWidgetUpdate(widget.id, updates)}
+          selected={selectedWidgetId === widget.id}
+          onSelect={() => setSelectedWidgetId(widget.id)}
+          onDeselect={() => setSelectedWidgetId(null)}
+          onUpdate={handleWidgetUpdate}
+          onRemove={(id) => {
+            handleWidgetRemove(id)
+            setSelectedWidgetId(null)
+          }}
         />
       </div>
     )

package/src/canvas/CanvasPage.module.css

@@ -32,11 +32,7 @@
   min-height: 100%;
 }
 
-.selected {
-  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
+/* Selection outline is now handled by WidgetChrome.module.css (.widgetSlotSelected) */
 
 .canvasTitle {
   position: fixed;

package/src/canvas/CanvasToolbar.jsx

@@ -1,13 +1,10 @@
 import { useState } from 'react'
 import { addWidget as addWidgetApi } from './canvasApi.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
+import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
 import styles from './CanvasToolbar.module.css'
 
-const WIDGET_TYPES = [
-  { type: 'sticky-note', label: 'Sticky Note', icon: '📝' },
-  { type: 'markdown', label: 'Markdown', icon: '📄' },
-  { type: 'prototype', label: 'Prototype embed', icon: '🖥️' },
-]
+const WIDGET_TYPES = getMenuWidgetTypes()
 
 /**
  * Floating toolbar for adding widgets to a canvas.

package/src/canvas/widgets/ComponentWidget.jsx

@@ -1,15 +1,63 @@
+import { useRef, useCallback, useState, useEffect } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import styles from './ComponentWidget.module.css'
 
 /**
  * Renders a live JSX export from a .canvas.jsx companion file.
- * Content is read-only (re-renders on HMR), only position is mutable.
+ * Content is read-only (re-renders on HMR), only position and size are mutable.
+ * Cannot be deleted from canvas — only removed from source code.
+ *
+ * Double-click the overlay to enter interactive mode (dropdowns, buttons work).
+ * Click outside to exit interactive mode.
  */
-export default function ComponentWidget({ component: Component }) {
+export default function ComponentWidget({ component: Component, width, height, onUpdate }) {
+  const containerRef = useRef(null)
+  const [interactive, setInteractive] = 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)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive])
+
   if (!Component) return null
 
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+  if (typeof height === 'number') sizeStyle.height = `${height}px`
+
   return (
     <WidgetWrapper>
-      <Component />
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.content}>
+          <Component />
+        </div>
+        {!interactive && (
+          <div
+            className={styles.interactOverlay}
+            onDoubleClick={enterInteractive}
+          />
+        )}
+        <ResizeHandle
+          targetRef={containerRef}
+          minWidth={100}
+          minHeight={60}
+          onResize={handleResize}
+        />
+      </div>
     </WidgetWrapper>
   )
 }

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

@@ -0,0 +1,18 @@
+.container {
+  position: relative;
+  overflow: auto;
+  min-width: 100px;
+  min-height: 60px;
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+}
+
+.interactOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: default;
+}

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

@@ -20,6 +20,7 @@
 
 .preview :global(*) {
   color: inherit;
+  pointer-events: none;
 }
 
 .preview h1 {

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react'
 import { buildPrototypeIndex } from '@dfosco/storyboard-core'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp, prototypeEmbedSchema } from './widgetProps.js'
@@ -28,7 +28,7 @@ function resolveCanvasThemeFromStorage() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
-export default function PrototypeEmbed({ props, onUpdate }) {
+export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
   const height = readProp(props, 'height', prototypeEmbedSchema)
@@ -36,7 +36,16 @@ export default function PrototypeEmbed({ props, onUpdate }) {
   const label = readProp(props, 'label', prototypeEmbedSchema) || src
 
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-  const rawSrc = src ? `${basePath}${src}` : ''
+  const baseSegment = basePath.replace(/^\//, '')
+  const rawSrc = useMemo(() => {
+    if (!src) return ''
+    if (/^https?:\/\//.test(src)) return src
+    // Strip stale branch prefixes from stored src (e.g. /branch--old-feat/Page)
+    const cleaned = src.replace(/^\/branch--[^/]+/, '')
+    if (baseSegment && cleaned.startsWith(basePath)) return cleaned
+    if (baseSegment && cleaned.startsWith(baseSegment)) return `/${cleaned}`
+    return `${basePath}${cleaned}`
+  }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
 
@@ -48,9 +57,14 @@ export default function PrototypeEmbed({ props, onUpdate }) {
   const filterRef = useRef(null)
   const embedRef = useRef(null)
 
-  const iframeSrc = rawSrc
-    ? `${rawSrc}${rawSrc.includes('?') ? '&' : '?'}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}`
-    : ''
+  const iframeSrc = useMemo(() => {
+    if (!rawSrc) return ''
+    const hashIdx = rawSrc.indexOf('#')
+    const base = hashIdx >= 0 ? rawSrc.slice(0, hashIdx) : rawSrc
+    const hash = hashIdx >= 0 ? rawSrc.slice(hashIdx) : ''
+    const sep = base.includes('?') ? '&' : '?'
+    return `${base}${sep}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
+  }, [rawSrc, canvasTheme])
 
   // Build prototype index for the picker
   const prototypeIndex = useMemo(() => {
@@ -167,6 +181,21 @@ export default function PrototypeEmbed({ props, onUpdate }) {
 
   const enterInteractive = useCallback(() => setInteractive(true), [])
 
+  // Expose imperative action handlers for WidgetChrome
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'edit') {
+        setEditing(true)
+      } else if (actionId === 'zoom-in') {
+        const step = zoom < 75 ? 5 : 25
+        onUpdate?.({ zoom: Math.min(200, zoom + step) })
+      } else if (actionId === 'zoom-out') {
+        const step = zoom <= 75 ? 5 : 25
+        onUpdate?.({ zoom: Math.max(25, zoom - step) })
+      }
+    },
+  }), [zoom, onUpdate])
+
   function handlePickRoute(route) {
     onUpdate?.({ src: route })
     setEditing(false)
@@ -308,45 +337,6 @@ export default function PrototypeEmbed({ props, onUpdate }) {
             <p>Double-click to set prototype URL</p>
           </div>
         )}
-        {iframeSrc && !editing && (
-          <button
-            className={styles.editBtn}
-            onClick={(e) => { e.stopPropagation(); setEditing(true) }}
-            onMouseDown={(e) => e.stopPropagation()}
-            onPointerDown={(e) => e.stopPropagation()}
-            title="Edit URL"
-            aria-label="Edit prototype URL"
-          >
-            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"/></svg>
-          </button>
-        )}
-        {iframeSrc && !editing && (
-          <div
-            className={styles.zoomBar}
-            onMouseDown={(e) => e.stopPropagation()}
-            onPointerDown={(e) => e.stopPropagation()}
-          >
-            <button
-              className={styles.zoomBtn}
-              onClick={() => {
-                const step = zoom <= 75 ? 5 : 25
-                onUpdate?.({ zoom: Math.max(25, zoom - step) })
-              }}
-              disabled={zoom <= 25}
-              aria-label="Zoom out"
-            >−</button>
-            <span className={styles.zoomLabel}>{zoom}%</span>
-            <button
-              className={styles.zoomBtn}
-              onClick={() => {
-                const step = zoom < 75 ? 5 : 25
-                onUpdate?.({ zoom: Math.min(200, zoom + step) })
-              }}
-              disabled={zoom >= 200}
-              aria-label="Zoom in"
-            >+</button>
-          </div>
-        )}
       </div>
       <div
         className={styles.resizeHandle}
@@ -373,4 +363,4 @@ export default function PrototypeEmbed({ props, onUpdate }) {
       />
     </WidgetWrapper>
   )
-}
+})

package/src/canvas/widgets/ResizeHandle.jsx

@@ -0,0 +1,56 @@
+import { useCallback } from 'react'
+import styles from './ResizeHandle.module.css'
+
+/**
+ * Shared resize handle for canvas widgets.
+ *
+ * Renders a small drag handle in the bottom-right corner of the parent.
+ * On drag, calls `onResize(width, height)` with new dimensions.
+ *
+ * The parent must have `position: relative` for correct positioning.
+ *
+ * @param {Object} props
+ * @param {React.RefObject} props.targetRef - ref to the element being resized (reads offsetWidth/Height)
+ * @param {number} [props.minWidth=180]  - minimum allowed width
+ * @param {number} [props.minHeight=60]  - minimum allowed height
+ * @param {Function} props.onResize - callback: (width, height) => void
+ */
+export default function ResizeHandle({ targetRef, minWidth = 180, minHeight = 60, onResize }) {
+  const handleMouseDown = useCallback((e) => {
+    e.stopPropagation()
+    e.preventDefault()
+
+    const el = targetRef?.current
+    if (!el) return
+
+    const startX = e.clientX
+    const startY = e.clientY
+    const startW = el.offsetWidth
+    const startH = el.offsetHeight
+
+    function onMove(ev) {
+      const newW = Math.max(minWidth, startW + ev.clientX - startX)
+      const newH = Math.max(minHeight, startH + ev.clientY - startY)
+      onResize?.(newW, newH)
+    }
+
+    function onUp() {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }, [targetRef, minWidth, minHeight, onResize])
+
+  return (
+    <div
+      className={styles.handle}
+      onMouseDown={handleMouseDown}
+      onPointerDown={(e) => e.stopPropagation()}
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label="Resize"
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+.handle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  background: linear-gradient(
+    135deg,
+    transparent 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 50%,
+    transparent 50%,
+    transparent 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    transparent 75%
+  );
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 2;
+  border-radius: 0 0 6px 0;
+}
+
+/* Show on parent hover or direct hover */
+*:hover > .handle,
+.handle:hover {
+  opacity: 1;
+}