@dfosco/storyboard 0.9.4 → 0.9.6

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

@@ -14,23 +14,23 @@ describe('canvasInteractionStore', () => {
     _resetCanvasInteraction()
   })
 
-  it('starts with defaults: scrollAxis=both, zoomGestures=true', () => {
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true })
+  it('starts with defaults: scrollAxis=both, zoomGestures=true, zoomOrigin=center', () => {
+    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true, zoomOrigin: 'center' })
   })
 
   it('initCanvasInteraction seeds from config', () => {
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false })
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'vertical', zoomGestures: false })
+    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
+    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
   })
 
   it('initCanvasInteraction with no args / empty / invalid resets to defaults', () => {
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false })
+    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
     initCanvasInteraction()
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true })
+    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true, zoomOrigin: 'center' })
 
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false })
+    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
     initCanvasInteraction({})
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true })
+    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true, zoomOrigin: 'center' })
   })
 
   it('initCanvasInteraction ignores invalid scrollAxis values', () => {
@@ -52,6 +52,24 @@ describe('canvasInteractionStore', () => {
     expect(getCanvasInteraction().zoomGestures).toBe(true)
   })
 
+  it('initCanvasInteraction ignores invalid zoomOrigin values', () => {
+    initCanvasInteraction({ zoomOrigin: 'bottom-right' })
+    expect(getCanvasInteraction().zoomOrigin).toBe('center')
+
+    initCanvasInteraction({ zoomOrigin: null })
+    expect(getCanvasInteraction().zoomOrigin).toBe('center')
+
+    initCanvasInteraction({ zoomOrigin: 42 })
+    expect(getCanvasInteraction().zoomOrigin).toBe('center')
+  })
+
+  it('accepts both valid zoomOrigin values', () => {
+    for (const origin of ['center', 'top-left']) {
+      initCanvasInteraction({ zoomOrigin: origin })
+      expect(getCanvasInteraction().zoomOrigin).toBe(origin)
+    }
+  })
+
   it('accepts all four valid axis values', () => {
     for (const axis of ['both', 'vertical', 'horizontal', 'none']) {
       initCanvasInteraction({ scrollAxis: axis })
@@ -60,13 +78,16 @@ describe('canvasInteractionStore', () => {
   })
 
   it('setCanvasInteraction patches partial state without resetting other keys', () => {
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false })
+    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
 
     setCanvasInteraction({ zoomGestures: true })
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'vertical', zoomGestures: true })
+    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'vertical', zoomGestures: true, zoomOrigin: 'top-left' })
 
     setCanvasInteraction({ scrollAxis: 'horizontal' })
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'horizontal', zoomGestures: true })
+    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'horizontal', zoomGestures: true, zoomOrigin: 'top-left' })
+
+    setCanvasInteraction({ zoomOrigin: 'center' })
+    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'horizontal', zoomGestures: true, zoomOrigin: 'center' })
   })
 
   it('setCanvasInteraction with no-op patch does not notify subscribers', () => {
@@ -79,10 +100,15 @@ describe('canvasInteractionStore', () => {
     setCanvasInteraction({ scrollAxis: 'invalid' }) // ignored
     setCanvasInteraction({ scrollAxis: 'both' }) // same as default
     setCanvasInteraction({ zoomGestures: true }) // same as default
+    setCanvasInteraction({ zoomOrigin: 'center' }) // same as default
+    setCanvasInteraction({ zoomOrigin: 'invalid' }) // ignored
     expect(cb).not.toHaveBeenCalled()
 
     setCanvasInteraction({ zoomGestures: false }) // real change
     expect(cb).toHaveBeenCalledTimes(1)
+
+    setCanvasInteraction({ zoomOrigin: 'top-left' }) // real change
+    expect(cb).toHaveBeenCalledTimes(2)
   })
 
   it('subscribers are notified on init and meaningful set; unsubscribe stops further notifications', () => {

package/src/core/stores/configSchema.js

@@ -217,6 +217,7 @@ export const configDefaults = {
       max: 250,
       step: 10,
       gestures: true, // when false, disables cmd+wheel and pinch-to-zoom; +/- buttons still work
+      origin: 'center', // "center" | "top-left" — anchor point for all zoom (toolbar, keyboard, cmd+wheel, pinch). Hold Alt while cmd+scrolling to opt into cursor-anchor zoom.
     },
     scroll: {
       axis: 'both', // "both" | "vertical" | "horizontal" | "none"

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

@@ -25,6 +25,7 @@ describe('configSchema', () => {
       expect(c.canvas.github.embedBehavior).toBe('link-preview')
       expect(c.canvas.github.ghGuard).toBe('copy')
       expect(c.canvas.zoom.gestures).toBe(true)
+      expect(c.canvas.zoom.origin).toBe('center')
       expect(c.canvas.scroll.axis).toBe('both')
       expect(c.commandPalette.providers).toEqual(['prototypes', 'flows', 'canvases', 'pages'])
       expect(c.commandPalette.ranking).toBe('frecency')

package/src/core/styles/tailwind.css

@@ -66,6 +66,7 @@
 
   --color-foreground: #1f2328;
   --color-foreground-muted: #59636e;
+  --color-foreground-hover: #000000;
   --color-foreground-accent: #0969da;
   --color-foreground-danger: #d1242f;
   --color-foreground-success: #1a7f37;
@@ -143,6 +144,7 @@
 
     --color-foreground: #f0f6fc;
     --color-foreground-muted: #9198a1;
+    --color-foreground-hover: #ffffff;
     --color-foreground-accent: #4493f8;
     --color-foreground-danger: #f85149;
     --color-foreground-success: #3fb950;

package/src/core/workleaf/create.js

@@ -26,7 +26,8 @@ import { mkdirSync, existsSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
 import { detectWorktreeName, repoRoot, worktreeDir, getPort, slugify } from '../worktree/port.js'
 import { findByWorktree } from '../worktree/serverRegistry.js'
-import { detectWorkleafContext, workleafDir, workleafBranchName, WORKLEAF_PREFIX } from './paths.js'
+import { detectWorkleafContext, workleafDir, workleafBranchName, listWorkleafs, WORKLEAF_PREFIX } from './paths.js'
+import { generateWorkleafName } from './nameGenerator.js'
 import { dim, bold, green } from '../cli/intro.js'
 import { parseFlags } from '../cli/flags.js'
 
@@ -65,6 +66,42 @@ function resolveParentDir(parent, root) {
   return dir
 }
 
+/**
+ * Build a Set of names already taken in this repo so we don't collide
+ * with an existing workleaf directory OR an existing git branch (a
+ * stale branch left over after a delete --force, for example).
+ *
+ * Slug-only: callers test bare workleaf slugs, not full branch names.
+ */
+function collectTakenSlugs(root, parent) {
+  const taken = new Set()
+
+  // 1. Live workleafs on disk (any parent — we want global uniqueness
+  //    of the slug so `cd` and `delete <slug>` stay unambiguous).
+  for (const wl of listWorkleafs(root)) {
+    taken.add(wl.slug)
+  }
+
+  // 2. Existing git branches that match `<parent>--workleaf--<slug>`
+  //    — covers branches whose worktree was already cleaned up.
+  try {
+    const out = execFileSync(
+      'git',
+      ['for-each-ref', '--format=%(refname:short)', 'refs/heads/'],
+      { cwd: root, encoding: 'utf8' }
+    )
+    const prefix = `${parent}--workleaf--`
+    for (const line of out.split('\n')) {
+      const ref = line.trim()
+      if (ref.startsWith(prefix)) taken.add(ref.slice(prefix.length))
+    }
+  } catch {
+    // Best-effort — if git fails we just rely on the disk check.
+  }
+
+  return taken
+}
+
 /**
  * Public entry — runnable as a subcommand or imported.
  */
@@ -72,16 +109,8 @@ export async function runCreate(argv = process.argv.slice(4)) {
   const { flags, positional } = parseFlags(argv, flagSchema)
   const rawName = positional[0]
 
-  const nameError = validateName(rawName)
-  if (nameError) {
-    p.log.error(nameError)
-    p.log.info(`Usage: ${green('npx storyboard workleaf create <name>')}`)
-    process.exit(1)
-  }
-
-  const slug = slugify(rawName.trim())
-
-  // 1. Nesting check — refuse if cwd is already a workleaf
+  // Parent + root are needed before name resolution so the auto-namer
+  // can check collisions against the right branch prefix.
   const ctx = detectWorkleafContext()
   if (ctx.inWorkleaf) {
     p.log.error('Workleaves cannot be nested.')
@@ -89,9 +118,29 @@ export async function runCreate(argv = process.argv.slice(4)) {
     process.exit(1)
   }
 
-  // 2. Derive parent from cwd (or explicit --parent)
   const parent = flags.parent || detectWorktreeName()
   const root = repoRoot()
+
+  let slug
+  if (rawName) {
+    const nameError = validateName(rawName)
+    if (nameError) {
+      p.log.error(nameError)
+      p.log.info(`Usage: ${green('npx storyboard workleaf create <name>')}`)
+      process.exit(1)
+    }
+    slug = slugify(rawName.trim())
+  } else {
+    const taken = collectTakenSlugs(root, parent)
+    const generated = generateWorkleafName((name) => taken.has(name))
+    if (!generated) {
+      p.log.error('Could not auto-generate a workleaf name — the whole pool is in use.')
+      p.log.info(`Pass an explicit name: ${green('npx storyboard workleaf create <name>')}`)
+      process.exit(1)
+    }
+    slug = generated
+  }
+
   const parentDir = resolveParentDir(parent, root)
   const parentBranch = currentBranch(parentDir)
 
@@ -106,6 +155,7 @@ export async function runCreate(argv = process.argv.slice(4)) {
   }
 
   p.intro('storyboard workleaf create')
+  if (!rawName) p.log.info(`${dim('name:')}   ${bold(slug)} ${dim('(auto-generated)')}`)
   p.log.info(`${dim('parent:')} ${bold(parent)} ${dim('(branch:')} ${parentBranch}${dim(')')}`)
   p.log.info(`${dim('branch:')} ${bold(branch)}`)
   p.log.info(`${dim('dir:')}    ${dim(dir.replace(root + '/', ''))}`)

package/src/core/workleaf/nameGenerator.js

@@ -0,0 +1,133 @@
+/**
+ * Auto-name generator for workleaves.
+ *
+ * Produces names in the form `<adjective>-<tree>` (e.g. "sunny-baobab")
+ * where both words are short, single-word slugs that are globally
+ * recognizable. The tree list is intentionally balanced across
+ * continents so the namespace doesn't lean toward any one region.
+ *
+ * Picks are randomized, then checked for collisions against a caller-
+ * supplied "in use" predicate (typically: existing workleaf slugs +
+ * existing git branches). If we exhaust the random search, we fall
+ * back to a deterministic sweep so we never give up on a free name
+ * unless the entire 20×20 namespace is taken.
+ */
+
+export const ADJECTIVES = Object.freeze([
+  'bright',
+  'calm',
+  'cheerful',
+  'cozy',
+  'gentle',
+  'golden',
+  'happy',
+  'kind',
+  'lively',
+  'lucky',
+  'merry',
+  'mighty',
+  'peaceful',
+  'quiet',
+  'snug',
+  'steady',
+  'sunny',
+  'sweet',
+  'warm',
+  'wise',
+])
+
+// 20 trees, ~2-3 per continent — globally recognizable, single-word
+// (hyphenated only if unavoidable). No region dominates the namespace.
+export const TREES = Object.freeze([
+  // Africa
+  'baobab',
+  'acacia',
+  'marula',
+  // South America
+  'jacaranda',
+  'ceiba',
+  'mahogany',
+  // Asia
+  'bamboo',
+  'ginkgo',
+  'banyan',
+  'sakura',
+  // Oceania / Pacific
+  'eucalyptus',
+  'kauri',
+  // Mediterranean / West Asia / North Africa
+  'olive',
+  'cedar',
+  'cypress',
+  // North America
+  'redwood',
+  'maple',
+  // Europe
+  'oak',
+  'birch',
+  // Pantropical
+  'palm',
+])
+
+/**
+ * Total size of the name namespace (adjectives × trees).
+ */
+export const NAMESPACE_SIZE = ADJECTIVES.length * TREES.length
+
+/**
+ * Pick a random integer in [0, max).
+ */
+function randInt(max, random = Math.random) {
+  return Math.floor(random() * max)
+}
+
+/**
+ * Compose a name from indices.
+ */
+function compose(adjIdx, treeIdx) {
+  return `${ADJECTIVES[adjIdx]}-${TREES[treeIdx]}`
+}
+
+/**
+ * Generate a unique workleaf name not already taken.
+ *
+ * @param {(name: string) => boolean} isTaken
+ *        Returns true if a name is already in use. Called for each
+ *        candidate the generator considers.
+ * @param {object} [opts]
+ * @param {() => number} [opts.random=Math.random]
+ *        Override the random source (for tests).
+ * @param {number} [opts.maxRandomAttempts=50]
+ *        How many random picks to try before falling back to a sweep.
+ * @returns {string|null} A free name, or null if the entire namespace
+ *          is exhausted.
+ */
+export function generateWorkleafName(isTaken, opts = {}) {
+  const random = opts.random || Math.random
+  const maxRandomAttempts = opts.maxRandomAttempts ?? 50
+  const check = typeof isTaken === 'function' ? isTaken : () => false
+
+  for (let i = 0; i < maxRandomAttempts; i++) {
+    const candidate = compose(
+      randInt(ADJECTIVES.length, random),
+      randInt(TREES.length, random),
+    )
+    if (!check(candidate)) return candidate
+  }
+
+  // Random search exhausted — deterministic sweep so we never miss a
+  // free name unless the whole namespace is genuinely full.
+  const adjStart = randInt(ADJECTIVES.length, random)
+  const treeStart = randInt(TREES.length, random)
+  for (let a = 0; a < ADJECTIVES.length; a++) {
+    for (let t = 0; t < TREES.length; t++) {
+      const candidate = compose(
+        (adjStart + a) % ADJECTIVES.length,
+        (treeStart + t) % TREES.length,
+      )
+      if (!check(candidate)) return candidate
+    }
+  }
+
+  return null
+}

package/src/core/workleaf/nameGenerator.test.js

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest'
+import {
+  ADJECTIVES,
+  TREES,
+  NAMESPACE_SIZE,
+  generateWorkleafName,
+} from './nameGenerator.js'
+
+describe('ADJECTIVES + TREES word lists', () => {
+  it('contains exactly 20 adjectives and 20 trees', () => {
+    expect(ADJECTIVES.length).toBe(20)
+    expect(TREES.length).toBe(20)
+  })
+
+  it('uses only lowercase single-word tokens (hyphens allowed)', () => {
+    for (const list of [ADJECTIVES, TREES]) {
+      for (const word of list) {
+        expect(word).toMatch(/^[a-z]+(-[a-z]+)?$/)
+      }
+    }
+  })
+
+  it('has no duplicates within each list', () => {
+    expect(new Set(ADJECTIVES).size).toBe(ADJECTIVES.length)
+    expect(new Set(TREES).size).toBe(TREES.length)
+  })
+
+  it('NAMESPACE_SIZE matches the product', () => {
+    expect(NAMESPACE_SIZE).toBe(ADJECTIVES.length * TREES.length)
+  })
+})
+
+describe('generateWorkleafName', () => {
+  it('produces an <adjective>-<tree> name from the word lists', () => {
+    const name = generateWorkleafName(() => false)
+    expect(name).toMatch(/^[a-z]+(-[a-z]+)?-[a-z]+(-[a-z]+)?$/)
+    const [adj, ...rest] = name.split('-')
+    // Either the adjective is a single token or the tree contains a
+    // hyphen — we have no multi-token adjectives currently, so check by
+    // walking the suffix until the rest matches a tree.
+    let tree = rest.join('-')
+    let prefix = adj
+    // Try every split point (e.g. "foo-bar-baz" could be adj="foo",
+    // tree="bar-baz" or adj="foo-bar", tree="baz").
+    const parts = name.split('-')
+    let matched = false
+    for (let i = 1; i < parts.length; i++) {
+      const a = parts.slice(0, i).join('-')
+      const t = parts.slice(i).join('-')
+      if (ADJECTIVES.includes(a) && TREES.includes(t)) {
+        matched = true
+        prefix = a
+        tree = t
+        break
+      }
+    }
+    expect(matched).toBe(true)
+    expect(ADJECTIVES).toContain(prefix)
+    expect(TREES).toContain(tree)
+  })
+
+  it('skips names reported as taken', () => {
+    // Mark a specific candidate as taken; with a deterministic random
+    // source that would have returned it first, we should get a
+    // different name back.
+    const sequence = [
+      // First pick: ADJECTIVES[0] + TREES[0] — "bright-baobab" — taken
+      0, 0,
+      // Second pick: ADJECTIVES[1] + TREES[1] — free
+      1 / ADJECTIVES.length, 1 / TREES.length,
+    ]
+    let i = 0
+    const random = () => sequence[i++] ?? 0
+
+    const first = `${ADJECTIVES[0]}-${TREES[0]}`
+    const name = generateWorkleafName((n) => n === first, { random })
+    expect(name).not.toBe(first)
+  })
+
+  it('returns null when the entire namespace is exhausted', () => {
+    const name = generateWorkleafName(() => true, { maxRandomAttempts: 5 })
+    expect(name).toBeNull()
+  })
+
+  it('falls back to a sweep when random attempts are exhausted but a slot remains', () => {
+    // Block every name except a single deterministic survivor.
+    const survivor = `${ADJECTIVES[7]}-${TREES[13]}`
+    const name = generateWorkleafName((n) => n !== survivor, { maxRandomAttempts: 3 })
+    expect(name).toBe(survivor)
+  })
+
+  it('returns the random pick when no names are taken', () => {
+    // Force the random source to return a specific pair on the first
+    // attempt; the predicate accepts everything, so we should get it.
+    const random = () => 0
+    const name = generateWorkleafName(() => false, { random })
+    expect(name).toBe(`${ADJECTIVES[0]}-${TREES[0]}`)
+  })
+})

package/src/internals/BaseUiForm/BaseUiForm.module.css

@@ -351,8 +351,8 @@
 }
 
 .buttonVariant_primary:not(:disabled):hover {
-  background: #000;
-  border-color: #000;
+  background: var(--color-foreground-hover, #000);
+  border-color: var(--color-foreground-hover, #000);
 }
 
 .buttonVariant_secondary {

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

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

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

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

package/src/internals/canvas/CanvasPage.jsx

@@ -6,7 +6,7 @@ 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, isResizable, isExpandable, getAnchorState, canAcceptConnection, isSplitScreenCapable, getChromeOptions, getInteractionOptions } from './widgets/widgetConfig.js'
+import { getFeatures, isResizable, isExpandable, getAnchorState, canAcceptConnection, isSplitScreenCapable, getChromeOptions, getInteractionOptions, isMovable } from './widgets/widgetConfig.js'
 import { createPasteContext, resolvePaste } from './widgets/pasteRules.js'
 import { getPasteRules } from '../../core/index.js'
 import { isTerminalResizable, getTerminalDimensions } from '../../core/index.js'
@@ -566,7 +566,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
       onRoleChange={onRoleChange ? (roleId) => onRoleChange(widget.id, roleId) : undefined}
       readOnly={readOnly}
       chromeEnabled={chromeOpts.enabled}
-      movable={interactionOpts.movable}
+      movable={isMovable(widget.type)}
       selectable={interactionOpts.selectable}
     >
       <WidgetRenderer
@@ -2199,11 +2199,30 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     const oldScale = zoomRef.current / 100
     const newScale = clampedZoom / 100
 
-    // Anchor point in scroll-container space
+    // Anchor point in scroll-container space.
+    //
+    // When a cursor position is supplied (wheel/pinch zoom), anchor there.
+    // Otherwise (toolbar +/− and keyboard shortcuts) honor the configured
+    // `canvas.zoom.origin`:
+    //   - "center"   → viewport center (default; matches native canvas)
+    //   - "top-left" → the scroll container's top-left, which keeps the
+    //                  canvas's (0, 0) pinned to the viewport top-left
+    //                  through any zoom — useful for landing canvases
+    //                  with top-left-anchored content.
     const rect = el.getBoundingClientRect()
-    const useViewportCenter = clientX == null || clientY == null
-    const anchorX = useViewportCenter ? el.clientWidth / 2 : clientX - rect.left
-    const anchorY = useViewportCenter ? el.clientHeight / 2 : clientY - rect.top
+    const cursorProvided = clientX != null && clientY != null
+    let anchorX
+    let anchorY
+    if (cursorProvided) {
+      anchorX = clientX - rect.left
+      anchorY = clientY - rect.top
+    } else if (interactionRef.current?.zoomOrigin === 'top-left') {
+      anchorX = 0
+      anchorY = 0
+    } else {
+      anchorX = el.clientWidth / 2
+      anchorY = el.clientHeight / 2
+    }
 
     // Anchor → canvas coordinate
     const canvasX = (el.scrollLeft + anchorX) / oldScale
@@ -3308,10 +3327,16 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     }))
   }, [undoRedo.canUndo, undoRedo.canRedo])
 
-  // Cmd+scroll / trackpad pinch to smooth-zoom the canvas
+  // Cmd+scroll / trackpad pinch to smooth-zoom the canvas.
   // On macOS, pinch-to-zoom fires wheel events with ctrlKey: true and small
   // fractional deltaY values. We accumulate the delta to handle sub-pixel changes.
   // Skipped entirely when the consumer disables zoomGestures (e.g. landing page).
+  //
+  // Anchor policy: by default, zoom honors `canvas.zoom.origin` (center or
+  // top-left) — same anchor as toolbar/keyboard zoom, so a user zooming
+  // out from the corner of the screen doesn't get teleported off-canvas.
+  // Hold Alt while cmd+scrolling to opt into cursor-anchor zoom (power
+  // user gesture: zoom centered on whatever you're hovering).
   const zoomAccum = useRef(0)
   useEffect(() => {
     function handleWheel(e) {
@@ -3322,7 +3347,11 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       const step = Math.trunc(zoomAccum.current)
       if (step === 0) return
       zoomAccum.current -= step
-      applyZoom(zoomRef.current + step, e.clientX, e.clientY)
+      if (e.altKey) {
+        applyZoom(zoomRef.current + step, e.clientX, e.clientY)
+      } else {
+        applyZoom(zoomRef.current + step)
+      }
     }
     document.addEventListener('wheel', handleWheel, { passive: false })
     return () => document.removeEventListener('wheel', handleWheel)
@@ -3375,7 +3404,10 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       const dist = getTouchDist(e.touches[0], e.touches[1])
       const ratio = dist / pinchState.current.startDist
       const newZoom = Math.round(pinchState.current.startZoom * ratio)
-      applyZoom(newZoom, pinchState.current.centerX, pinchState.current.centerY)
+      // Touch pinch has no modifier-key equivalent; always honor the
+      // configured zoomOrigin (centerpoint of the pinch is intuitive
+      // visually but tends to drift the canvas across the screen).
+      applyZoom(newZoom)
     }
 
     function handleTouchEnd() {
@@ -3491,6 +3523,16 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     )
   }
 
+  // Drag is allowed in dev for every widget, and in production only when a
+  // widget opts in via `interaction.movable: { enabled: true, prod: true }`.
+  // The canvas-wide `locked` switch is what tiny-canvas reads to disable
+  // neodrag; we keep it locked in prod unless at least one widget on this
+  // canvas (or any component widget — they share the 'component' type config)
+  // is movable-in-prod.
+  const hasMovableInEnv = isLocalDev
+    || (localWidgets ?? []).some((w) => isMovable(w.type))
+    || (componentEntries.length > 0 && isMovable('component'))
+
   const canvasProps = {
     centered: canvas.centered ?? false,
     dotted: canvas.dotted ?? false,
@@ -3500,7 +3542,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     colorMode: canvas.colorMode === 'auto'
       ? getToolbarColorMode(canvasTheme)
       : (canvas.colorMode ?? 'auto'),
-    locked: !isLocalDev,
+    locked: !hasMovableInEnv,
   }
 
   const canvasThemeVars = getCanvasThemeVars(canvasTheme)
@@ -3521,7 +3563,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         data-tc-x={sourcePosition.x}
         data-tc-y={sourcePosition.y}
         data-widget-raised={selectedWidgetIds.has(`jsx-${exportName}`) || undefined}
-        {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
+        {...((isLocalDev || isMovable('component')) ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
         {...canvasPrimerAttrs}
         style={canvasThemeVars}
         onClick={isLocalDev ? (e) => {
@@ -3574,7 +3616,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         data-tc-x={effectiveWidget?.position?.x ?? 0}
         data-tc-y={effectiveWidget?.position?.y ?? 0}
         data-widget-raised={selectedWidgetIds.has(widget.id) || undefined}
-        {...(isLocalDev ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
+        {...((isLocalDev || isMovable(effectiveWidget.type)) ? { 'data-tc-handle': '.tc-drag-handle, .tc-drag-surface' } : {})}
         {...canvasPrimerAttrs}
         style={canvasThemeVars}
         onClick={isLocalDev ? (e) => {

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

@@ -102,6 +102,7 @@ vi.mock('./widgets/widgetConfig.js', async () => {
     getInteractGate: () => ({ enabled: false, label: 'Click to interact' }),
     getChromeOptions: () => ({ enabled: true }),
     getInteractionOptions: () => ({ selectable: true, movable: true, resize: null, expandable: false, splitScreen: false, interactGate: false, interactGateLabel: 'Click to interact' }),
+    isMovable: () => false,
     getWidgetMeta: () => null,
     getConnectorConfig: actual.getConnectorConfig,
     getAnchorState: actual.getAnchorState,

package/src/internals/canvas/widgets/StorySetWidget.jsx

@@ -44,15 +44,20 @@ function resolveStorySetUrl(storyId, layout, selected, density, theme) {
   // components rendering in light mode regardless of the canvas theme.
   params.set('_sb_theme_target', 'prototype')
   if (layout) params.set('layout', layout)
-  if (selected) params.set('selected', selected)
   if (density) params.set('density', density)
   if (theme) params.set('theme', theme)
 
+  // `selected` lives in the URL hash, not the query string, so that
+  // selecting a different variant is a same-document fragment navigation
+  // when React reassigns iframe.src — no iframe reload. See
+  // ComponentSetPage.handleSelect for the matching producer.
+  const hash = selected ? `#selected=${encodeURIComponent(selected)}` : ''
+
   const route = story._route || `/components/${storyId}`
   if (import.meta.env.DEV) {
-    return `${base}/stories.html${route}?${params}`
+    return `${base}/stories.html${route}?${params}${hash}`
   }
-  return `${base}${route}?${params}`
+  return `${base}${route}?${params}${hash}`
 }
 
 export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdate, resizable }, ref) {