@dfosco/storyboard 0.9.4 → 0.9.6

package/src/internals/canvas/widgets/expandUtils.js

@@ -518,11 +518,14 @@ export function buildSecondaryIframeUrl(widget) {
     params.set('_sb_component_set', '')
     const layout = widget.props?.layout
     if (layout) params.set('layout', layout)
+    // `selected` lives in the URL hash, not the query string — see
+    // StorySetWidget.resolveStorySetUrl. Keeps variant-change navigation
+    // as a same-document fragment update (no iframe reload).
     const selected = widget.props?.selected
-    if (selected) params.set('selected', selected)
+    const hash = selected ? `#selected=${encodeURIComponent(selected)}` : ''
     const route = storyData._route || `/components/${storyId}`
-    if (import.meta.env.DEV) return `${baseClean}/stories.html${route}?${params}`
-    return `${baseClean}${route}?${params}`
+    if (import.meta.env.DEV) return `${baseClean}/stories.html${route}?${params}${hash}`
+    return `${baseClean}${route}?${params}${hash}`
   }
 
   return null

package/src/internals/canvas/widgets/widgetConfig.js

@@ -216,9 +216,17 @@ export const widgetTypes = new Proxy({}, {
 function readInteraction(def) {
   if (!def) return null
   const i = def.interaction || {}
+  // Preserve shape of `movable` so consumers can opt into prod via the
+  // structured form `{ enabled, prod }` (mirroring `resize`). Boolean stays
+  // boolean for back-compat — readers consult `isMovable()` for the
+  // env-aware verdict.
+  let movable
+  if (i.movable === false) movable = false
+  else if (typeof i.movable === 'object' && i.movable !== null) movable = i.movable
+  else movable = true
   return {
     selectable: i.selectable !== false,                    // default true
-    movable: i.movable !== false,                          // default true
+    movable,                                               // default true
     resize: i.resize ?? def.resize ?? null,
     expandable: i.expandable ?? def.expandable ?? false,
     splitScreen: i.splitScreen ?? def.splitScreen ?? false,
@@ -323,6 +331,30 @@ export function isResizable(type) {
   return true
 }
 
+/**
+ * Check if a widget type supports drag-to-move in the current environment.
+ *
+ * `interaction.movable` accepts either:
+ *   - boolean (default true)  — movable in dev only; locked in production
+ *   - `{ enabled: boolean, prod?: boolean }` — opt into production drag via
+ *     `prod: true` (mirrors the `resize` shape)
+ *
+ * @param {string} type — widget type string
+ * @returns {boolean}
+ */
+export function isMovable(type) {
+  const movable = getInteractionOptions(type).movable
+  if (movable === false) return false
+  if (typeof movable === 'object' && movable !== null) {
+    if (movable.enabled === false) return false
+    if (import.meta.env?.PROD && !movable.prod) return false
+    return true
+  }
+  // Boolean true (or undefined): historical "movable in dev only" semantic.
+  if (import.meta.env?.PROD) return false
+  return true
+}
+
 /**
  * Get the display metadata (label, icon) for a widget type.
  * @param {string} type — widget type string

package/src/internals/canvas/widgets/widgetConfig.merged.test.js

@@ -7,6 +7,7 @@ import {
   getWidgetMeta,
   isResizable,
   isExpandable,
+  isMovable,
   isSplitScreenCapable,
   getInteractGate,
   getMenuWidgetTypes,
@@ -53,6 +54,32 @@ describe('widgetConfig — merged consumer + built-in registry', () => {
     expect(getInteractionOptions('decorative').movable).toBe(true)
   })
 
+  it('isMovable() returns dev-only for the boolean shape (back-compat)', () => {
+    // Default sticky-note has no interaction.movable → boolean true semantic.
+    // Vitest runs in dev mode by default (import.meta.env.PROD = false),
+    // so isMovable returns true.
+    expect(isMovable('sticky-note')).toBe(true)
+    registerWidget('locked', { label: 'Locked', interaction: { movable: false } })
+    expect(isMovable('locked')).toBe(false)
+  })
+
+  it('isMovable() honors the { enabled, prod } object shape', () => {
+    registerWidget('alwaysDraggable', {
+      label: 'Always',
+      interaction: { movable: { enabled: true, prod: true } },
+    })
+    // enabled: true → movable in dev (PROD branch is irrelevant under vitest)
+    expect(isMovable('alwaysDraggable')).toBe(true)
+    // Object form is preserved on getInteractionOptions for downstream readers
+    expect(getInteractionOptions('alwaysDraggable').movable).toEqual({ enabled: true, prod: true })
+
+    registerWidget('explicitlyOff', {
+      label: 'Off',
+      interaction: { movable: { enabled: false } },
+    })
+    expect(isMovable('explicitlyOff')).toBe(false)
+  })
+
   it('interaction.resize/expandable/splitScreen flow through to legacy getters', () => {
     registerWidget('big', {
       label: 'Big',

package/src/internals/story/ComponentSetPage.jsx

@@ -21,6 +21,18 @@ import styles from './ComponentSetPage.module.css'
 
 const StoryWrapper = getStoryWrapper()
 
+function parseHashSelected(hash) {
+  if (!hash) return ''
+  const trimmed = hash.startsWith('#') ? hash.slice(1) : hash
+  if (!trimmed) return ''
+  try {
+    const params = new URLSearchParams(trimmed)
+    return params.get('selected') || ''
+  } catch {
+    return ''
+  }
+}
+
 export default function ComponentSetPage({ name }) {
   const location = useLocation()
   const navigate = useNavigate()
@@ -28,7 +40,7 @@ export default function ComponentSetPage({ name }) {
 
   const layout = searchParams.get('layout') || 'auto'
   const density = searchParams.get('density') || 'comfy'
-  const selected = searchParams.get('selected') || ''
+  const selected = parseHashSelected(location.hash)
   const isEmbed = searchParams.has('_sb_embed')
 
   // Same reload-guard policy as StoryPage / prototype embeds.
@@ -157,20 +169,20 @@ export default function ComponentSetPage({ name }) {
   }, [exports, layout, density, isEmbed])
 
   const handleSelect = useCallback((exportName) => {
-    const params = new URLSearchParams(location.search)
-    if (exportName === params.get('selected')) {
-      params.delete('selected')
-    } else {
-      params.set('selected', exportName)
-    }
-    navigate(`${location.pathname}?${params}`, { replace: true })
+    const isToggleOff = exportName === selected
+    const newSelected = isToggleOff ? '' : exportName
+    const hash = newSelected ? `#selected=${encodeURIComponent(newSelected)}` : ''
+    // Preserve current search params; only flip the fragment. The parent
+    // widget keeps `selected` in the URL hash specifically so this update
+    // round-trips as a same-document fragment change — no iframe reload.
+    navigate(`${location.pathname}${location.search}${hash}`, { replace: true })
 
     // Notify parent widget
     if (window.parent !== window) {
       window.parent.postMessage({
         type: 'storyboard:component-set:select',
         storyId: name,
-        exportName: exportName === selected ? null : exportName,
+        exportName: newSelected || null,
       }, '*')
     }
   }, [location, navigate, name, selected])