@dfosco/storyboard 0.10.0 → 0.10.2

package/dist/tiny-canvas.css

@@ -1 +1 @@
-:root{--tc-border-radius: var(--radius, 12px);--tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, .12));--tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, .15));--tc-border-color: var(--color-border-muted, rgba(0, 0, 0, .15));--tc-bg-muted: var(--color-background-muted, #f6f8fa);--tc-dot-color: var(--color-overlay-backdrop, rgba(0, 0, 0, .08));--tc-grid-size: var(--golden-number, 36px);--tc-grid-offset: calc(var(--tc-grid-size) / -2);--tc-dot-radius: 2px;--tc-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.tc-canvas{min-width:max(100vw,10000px);min-height:max(100vh,10000px);width:100%;height:100%;margin:0;font-family:var(--tc-font-stack);position:relative;background-color:var(--tc-bg-muted);color-scheme:light dark}.tc-canvas[data-color-mode=light]{color-scheme:light}.tc-canvas[data-color-mode=dark]{color-scheme:dark}.tc-canvas[data-dotted]{background-image:radial-gradient(var(--tc-dot-color) var(--tc-dot-radius),transparent var(--tc-dot-radius));background-size:var(--tc-grid-size) var(--tc-grid-size);background-position:var(--tc-grid-offset) var(--tc-grid-offset)}@media(prefers-color-scheme:dark){.tc-canvas:not([data-color-mode=light]){--tc-bg-muted: var(--color-background-muted, #161b22);--tc-dot-color: var(--color-overlay-backdrop, rgba(255, 255, 255, .1));--tc-border-color: var(--color-border-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, .4))}}.tc-canvas[data-color-mode=dark]{--tc-bg-muted: var(--color-background-muted, #161b22);--tc-dot-color: var(--color-overlay-backdrop, rgba(255, 255, 255, .1));--tc-border-color: var(--color-border-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, .4))}body .tc-draggable-inner:not(:active){touch-action:none}.tc-on-translation{transition:transform calc(var(--tc-translation-ms, .15s) + var(--tc-translation-delay-ms, 50ms)) cubic-bezier(.78,.1,.51,.78) var(--tc-translation-delay-ms, 50ms)}.tc-drag{position:absolute;width:fit-content}.tc-draggable-inner{position:relative;width:fit-content;height:min-content}.tc-draggable-inner:after{content:"";position:absolute;z-index:-1;width:100%;height:100%;top:0;border-radius:var(--tc-border-radius);box-shadow:var(--tc-shadow-float);opacity:0;transition:opacity .3s ease-in-out}.tc-on-translation .tc-draggable-inner:after,.tc-draggable-inner:active:after,.tc-draggable-inner:hover:after{opacity:0}.tc-on-translation .tc-draggable-inner,.tc-draggable-inner:active,.tc-draggable-inner:hover{outline:none}.tc-canvas[data-locked] *{cursor:default!important}
+:root{--tc-border-radius: var(--radius, 12px);--tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, .12));--tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, .15));--tc-border-color: var(--color-border-muted, rgba(0, 0, 0, .15));--tc-bg-muted: var(--color-background-muted, #f6f8fa);--tc-dot-color: var(--color-overlay-backdrop, rgba(0, 0, 0, .08));--tc-grid-size: var(--golden-number, 36px);--tc-grid-offset: calc(var(--tc-grid-size) / -2);--tc-dot-radius: 2px;--tc-font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}.tc-canvas{min-width:max(100vw,10000px);min-height:max(100vh,10000px);width:100%;height:100%;margin:0;font-family:var(--tc-font-stack);position:relative;background-color:var(--tc-bg-muted);color-scheme:light dark}html[data-canvas-surface-width=viewport] .tc-canvas{min-width:100vw;max-width:100vw;overflow-x:hidden}html[data-canvas-surface-height=viewport] .tc-canvas{min-height:100vh;max-height:100vh;overflow-y:hidden}.tc-canvas[data-color-mode=light]{color-scheme:light}.tc-canvas[data-color-mode=dark]{color-scheme:dark}.tc-canvas[data-dotted]{background-image:radial-gradient(var(--tc-dot-color) var(--tc-dot-radius),transparent var(--tc-dot-radius));background-size:var(--tc-grid-size) var(--tc-grid-size);background-position:var(--tc-grid-offset) var(--tc-grid-offset)}@media(prefers-color-scheme:dark){.tc-canvas:not([data-color-mode=light]){--tc-bg-muted: var(--color-background-muted, #161b22);--tc-dot-color: var(--color-overlay-backdrop, rgba(255, 255, 255, .1));--tc-border-color: var(--color-border-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, .4))}}.tc-canvas[data-color-mode=dark]{--tc-bg-muted: var(--color-background-muted, #161b22);--tc-dot-color: var(--color-overlay-backdrop, rgba(255, 255, 255, .1));--tc-border-color: var(--color-border-muted, rgba(255, 255, 255, .15));--tc-shadow-rest: var(--shadow-resting, 0 1px 3px rgba(0, 0, 0, .3));--tc-shadow-float: var(--shadow-floating, 0 4px 12px rgba(0, 0, 0, .4))}body .tc-draggable-inner:not(:active){touch-action:none}.tc-on-translation{transition:transform calc(var(--tc-translation-ms, .15s) + var(--tc-translation-delay-ms, 50ms)) cubic-bezier(.78,.1,.51,.78) var(--tc-translation-delay-ms, 50ms)}.tc-drag{position:absolute;width:fit-content}.tc-draggable-inner{position:relative;width:fit-content;height:min-content}.tc-draggable-inner:after{content:"";position:absolute;z-index:-1;width:100%;height:100%;top:0;border-radius:var(--tc-border-radius);box-shadow:var(--tc-shadow-float);opacity:0;transition:opacity .3s ease-in-out}.tc-on-translation .tc-draggable-inner:after,.tc-draggable-inner:active:after,.tc-draggable-inner:hover:after{opacity:0}.tc-on-translation .tc-draggable-inner,.tc-draggable-inner:active,.tc-draggable-inner:hover{outline:none}.tc-canvas[data-locked] *{cursor:default!important}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dfosco/storyboard",
-    "version": "0.10.0",
+    "version": "0.10.2",
     "type": "module",
     "license": "MIT",
     "description": "Storyboard prototyping framework — core engine, React integration, and canvas",

package/src/canvas/style.css

@@ -28,6 +28,30 @@
   color-scheme: light dark;
 }
 
+/* Canvas surface sizing — consumer-controlled via `canvas.surface.*` in
+ * storyboard.config.json (see canvasInteractionStore.js). The store
+ * toggles these `<html>` data attrs; CSS clamps each axis independently
+ * so e.g. width can be viewport-locked while height stays "auto" with
+ * the 10000px pannable floor.
+ *
+ * `overflow-{x,y}: hidden` is required on the constrained axis so that
+ * widgets positioned past the surface bounds (absolute-positioned
+ * Draggables) don't contribute to the scroll container's scrollWidth /
+ * scrollHeight at 100% zoom. CSS transforms (the zoom scaling on
+ * `.canvasZoom`) ink-overflow past `overflow: hidden`, so zoom-in still
+ * produces real scroll on the scroller — only the in-bounds layout is
+ * clipped. */
+html[data-canvas-surface-width="viewport"] .tc-canvas {
+  min-width: 100vw;
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+html[data-canvas-surface-height="viewport"] .tc-canvas {
+  min-height: 100vh;
+  max-height: 100vh;
+  overflow-y: hidden;
+}
+
 .tc-canvas[data-color-mode="light"] {
   color-scheme: light;
 }

package/src/core/mountStoryboardCore.js

@@ -485,13 +485,15 @@ export async function mountStoryboardCore(config = {}, options = {}) {
   }
 
   // Seed canvas-interaction store from the same canvas config block. Reads
-  // `canvas.scroll.axis` and `canvas.zoom.gestures`. Runs after
-  // initCanvasConfig so the unified-store path is preferred when present.
+  // `canvas.scroll.axis`, `canvas.zoom.{gestures,origin}`, and
+  // `canvas.surface.{width,height}`. Runs after initCanvasConfig so the
+  // unified-store path is preferred when present.
   const canvasCfg = (uc.canvas && Object.keys(uc.canvas).length > 0) ? uc.canvas : (config.canvas || {})
   initCanvasInteraction({
     scrollAxis: canvasCfg.scroll?.axis,
     zoomGestures: canvasCfg.zoom?.gestures,
     zoomOrigin: canvasCfg.zoom?.origin,
+    surface: canvasCfg.surface,
   })
 
   // Load and merge command palette config.

package/src/core/stores/canvasInteractionStore.js

@@ -1,7 +1,7 @@
 /**
  * Canvas Interaction Store — runtime gates for canvas scroll + zoom behavior.
  *
- * Three knobs that go *beyond* presentation (which is purely visual):
+ * Four knobs that go *beyond* presentation (which is purely visual):
  *
  *   - `scrollAxis` — restricts the native scroll axes of the canvas
  *     scroll container. Useful when a canvas is rendered as a "webpage"
@@ -25,9 +25,20 @@
  *     Pointer-driven zoom (wheel/pinch) is unaffected — it always
  *     anchors on the cursor.
  *
+ *   - `surface` — sizes the underlying canvas surface (`.tc-canvas`)
+ *     per axis. `{ width, height }` each accept `"auto"` (default,
+ *     keeps the `max(100vw, 10000px)` floor so users can pan into a
+ *     large workspace) or `"viewport"` (sizes to exactly `100vw` /
+ *     `100vh`, so the unscaled surface matches the visible window
+ *     exactly and zooming >100% surfaces real scroll). The store
+ *     toggles `data-canvas-surface-width="viewport"` and
+ *     `data-canvas-surface-height="viewport"` on `<html>` so CSS can
+ *     pick up the override without React having to re-render.
+ *
  * Defaults are seeded from `canvas.scroll.axis`, `canvas.zoom.gestures`,
- * and `canvas.zoom.origin` in `storyboard.config.json`. Runtime overrides
- * can be applied at any time via `setCanvasInteraction(partial)`.
+ * `canvas.zoom.origin`, and `canvas.surface.{width,height}` in
+ * `storyboard.config.json`. Runtime overrides can be applied at any
+ * time via `setCanvasInteraction(partial)`.
  *
  * This is an **advanced, undocumented** extension surface — see
  * `core/stores/presentationStore.js` for the sibling system.
@@ -37,30 +48,72 @@
 
 const VALID_AXES = new Set(['both', 'vertical', 'horizontal', 'none'])
 const VALID_ZOOM_ORIGINS = new Set(['center', 'top-left'])
+const VALID_SURFACE_SIZES = new Set(['auto', 'viewport'])
 
 const _defaults = {
   scrollAxis: 'both',
   zoomGestures: true,
   zoomOrigin: 'center',
+  surface: { width: 'auto', height: 'auto' },
 }
 
-let _state = { ..._defaults }
+let _state = {
+  ..._defaults,
+  surface: { ..._defaults.surface },
+}
 
 /** @type {Set<Function>} */
 const _listeners = new Set()
 
 let _snapshotVersion = 0
 
+function _applySurfaceAttrs() {
+  if (typeof document === 'undefined') return
+  const root = document.documentElement
+  if (_state.surface.width === 'viewport') {
+    root.dataset.canvasSurfaceWidth = 'viewport'
+  } else {
+    delete root.dataset.canvasSurfaceWidth
+  }
+  if (_state.surface.height === 'viewport') {
+    root.dataset.canvasSurfaceHeight = 'viewport'
+  } else {
+    delete root.dataset.canvasSurfaceHeight
+  }
+}
+
+function _readSurfaceFromConfig(input) {
+  // Accept the nested shape ({ width, height }) directly, and ignore
+  // anything malformed. Each axis is validated independently.
+  if (!input || typeof input !== 'object') return null
+  const next = {}
+  if (typeof input.width === 'string' && VALID_SURFACE_SIZES.has(input.width)) {
+    next.width = input.width
+  }
+  if (typeof input.height === 'string' && VALID_SURFACE_SIZES.has(input.height)) {
+    next.height = input.height
+  }
+  return Object.keys(next).length ? next : null
+}
+
 /**
  * Seed the store from a partial config (typically from
  * `storyboard.config.json` → `canvas.scroll.axis`, `canvas.zoom.gestures`,
- * and `canvas.zoom.origin`). Replaces any previous overrides. Called once
- * at app startup.
+ * `canvas.zoom.origin`, and `canvas.surface`). Replaces any previous
+ * overrides. Called once at app startup.
  *
- * @param {{ scrollAxis?: string, zoomGestures?: boolean, zoomOrigin?: string }} [config]
+ * @param {{
+ *   scrollAxis?: string,
+ *   zoomGestures?: boolean,
+ *   zoomOrigin?: string,
+ *   surface?: { width?: string, height?: string },
+ * }} [config]
  */
 export function initCanvasInteraction(config) {
-  _state = { ..._defaults }
+  _state = {
+    ..._defaults,
+    surface: { ..._defaults.surface },
+  }
   if (config && typeof config === 'object') {
     if (typeof config.scrollAxis === 'string' && VALID_AXES.has(config.scrollAxis)) {
       _state.scrollAxis = config.scrollAxis
@@ -71,13 +124,23 @@ export function initCanvasInteraction(config) {
     if (typeof config.zoomOrigin === 'string' && VALID_ZOOM_ORIGINS.has(config.zoomOrigin)) {
       _state.zoomOrigin = config.zoomOrigin
     }
+    const surfaceUpdate = _readSurfaceFromConfig(config.surface)
+    if (surfaceUpdate) {
+      _state.surface = { ..._state.surface, ...surfaceUpdate }
+    }
   }
+  _applySurfaceAttrs()
   _notify()
 }
 
 /**
  * Apply a partial runtime override. Unspecified keys keep their current value.
- * @param {{ scrollAxis?: string, zoomGestures?: boolean, zoomOrigin?: string }} partial
+ * @param {{
+ *   scrollAxis?: string,
+ *   zoomGestures?: boolean,
+ *   zoomOrigin?: string,
+ *   surface?: { width?: string, height?: string },
+ * }} partial
  */
 export function setCanvasInteraction(partial) {
   if (!partial || typeof partial !== 'object') return
@@ -94,11 +157,25 @@ export function setCanvasInteraction(partial) {
     _state.zoomOrigin = partial.zoomOrigin
     changed = true
   }
+  const surfaceUpdate = _readSurfaceFromConfig(partial.surface)
+  if (surfaceUpdate) {
+    const merged = { ..._state.surface, ...surfaceUpdate }
+    if (merged.width !== _state.surface.width || merged.height !== _state.surface.height) {
+      _state.surface = merged
+      _applySurfaceAttrs()
+      changed = true
+    }
+  }
   if (changed) _notify()
 }
 
 /**
- * @returns {{ scrollAxis: 'both'|'vertical'|'horizontal'|'none', zoomGestures: boolean, zoomOrigin: 'center'|'top-left' }}
+ * @returns {{
+ *   scrollAxis: 'both'|'vertical'|'horizontal'|'none',
+ *   zoomGestures: boolean,
+ *   zoomOrigin: 'center'|'top-left',
+ *   surface: { width: 'auto'|'viewport', height: 'auto'|'viewport' },
+ * }}
  */
 export function getCanvasInteraction() {
   return _state
@@ -134,7 +211,11 @@ function _notify() {
 
 /** Reset all state. Only for tests. */
 export function _resetCanvasInteraction() {
-  _state = { ..._defaults }
+  _state = {
+    ..._defaults,
+    surface: { ..._defaults.surface },
+  }
+  _applySurfaceAttrs()
   _listeners.clear()
   _snapshotVersion = 0
 }

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

@@ -14,23 +14,58 @@ describe('canvasInteractionStore', () => {
     _resetCanvasInteraction()
   })
 
-  it('starts with defaults: scrollAxis=both, zoomGestures=true, zoomOrigin=center', () => {
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true, zoomOrigin: 'center' })
+  it('starts with defaults: scrollAxis=both, zoomGestures=true, zoomOrigin=center, surface=auto/auto', () => {
+    expect(getCanvasInteraction()).toEqual({
+      scrollAxis: 'both',
+      zoomGestures: true,
+      zoomOrigin: 'center',
+      surface: { width: 'auto', height: 'auto' },
+    })
   })
 
   it('initCanvasInteraction seeds from config', () => {
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
+    initCanvasInteraction({
+      scrollAxis: 'vertical',
+      zoomGestures: false,
+      zoomOrigin: 'top-left',
+      surface: { width: 'viewport', height: 'viewport' },
+    })
+    expect(getCanvasInteraction()).toEqual({
+      scrollAxis: 'vertical',
+      zoomGestures: false,
+      zoomOrigin: 'top-left',
+      surface: { width: 'viewport', height: 'viewport' },
+    })
   })
 
   it('initCanvasInteraction with no args / empty / invalid resets to defaults', () => {
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
+    initCanvasInteraction({
+      scrollAxis: 'vertical',
+      zoomGestures: false,
+      zoomOrigin: 'top-left',
+      surface: { width: 'viewport', height: 'viewport' },
+    })
     initCanvasInteraction()
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true, zoomOrigin: 'center' })
-
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
+    expect(getCanvasInteraction()).toEqual({
+      scrollAxis: 'both',
+      zoomGestures: true,
+      zoomOrigin: 'center',
+      surface: { width: 'auto', height: 'auto' },
+    })
+
+    initCanvasInteraction({
+      scrollAxis: 'vertical',
+      zoomGestures: false,
+      zoomOrigin: 'top-left',
+      surface: { width: 'viewport', height: 'viewport' },
+    })
     initCanvasInteraction({})
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'both', zoomGestures: true, zoomOrigin: 'center' })
+    expect(getCanvasInteraction()).toEqual({
+      scrollAxis: 'both',
+      zoomGestures: true,
+      zoomOrigin: 'center',
+      surface: { width: 'auto', height: 'auto' },
+    })
   })
 
   it('initCanvasInteraction ignores invalid scrollAxis values', () => {
@@ -77,23 +112,75 @@ describe('canvasInteractionStore', () => {
     }
   })
 
+  it('initCanvasInteraction accepts surface.{width,height} independently', () => {
+    initCanvasInteraction({ surface: { width: 'viewport' } })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'viewport', height: 'auto' })
+
+    initCanvasInteraction({ surface: { height: 'viewport' } })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'auto', height: 'viewport' })
+
+    initCanvasInteraction({ surface: { width: 'viewport', height: 'viewport' } })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'viewport', height: 'viewport' })
+  })
+
+  it('initCanvasInteraction ignores invalid surface values', () => {
+    initCanvasInteraction({ surface: { width: 'fluid' } })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'auto', height: 'auto' })
+
+    initCanvasInteraction({ surface: { width: 42 } })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'auto', height: 'auto' })
+
+    initCanvasInteraction({ surface: null })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'auto', height: 'auto' })
+
+    initCanvasInteraction({ surface: 'viewport' })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'auto', height: 'auto' })
+  })
+
+  it('initCanvasInteraction writes data-canvas-surface-* attrs on <html>', () => {
+    const root = document.documentElement
+    initCanvasInteraction({ surface: { width: 'viewport' } })
+    expect(root.dataset.canvasSurfaceWidth).toBe('viewport')
+    expect(root.dataset.canvasSurfaceHeight).toBeUndefined()
+
+    initCanvasInteraction({ surface: { width: 'viewport', height: 'viewport' } })
+    expect(root.dataset.canvasSurfaceWidth).toBe('viewport')
+    expect(root.dataset.canvasSurfaceHeight).toBe('viewport')
+
+    initCanvasInteraction()  // resets to default
+    expect(root.dataset.canvasSurfaceWidth).toBeUndefined()
+    expect(root.dataset.canvasSurfaceHeight).toBeUndefined()
+  })
+
   it('setCanvasInteraction patches partial state without resetting other keys', () => {
-    initCanvasInteraction({ scrollAxis: 'vertical', zoomGestures: false, zoomOrigin: 'top-left' })
+    initCanvasInteraction({
+      scrollAxis: 'vertical',
+      zoomGestures: false,
+      zoomOrigin: 'top-left',
+      surface: { width: 'viewport' },
+    })
 
     setCanvasInteraction({ zoomGestures: true })
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'vertical', zoomGestures: true, zoomOrigin: 'top-left' })
+    expect(getCanvasInteraction()).toEqual({
+      scrollAxis: 'vertical',
+      zoomGestures: true,
+      zoomOrigin: 'top-left',
+      surface: { width: 'viewport', height: 'auto' },
+    })
 
     setCanvasInteraction({ scrollAxis: 'horizontal' })
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'horizontal', zoomGestures: true, zoomOrigin: 'top-left' })
+    expect(getCanvasInteraction().scrollAxis).toBe('horizontal')
+
+    setCanvasInteraction({ surface: { height: 'viewport' } })
+    expect(getCanvasInteraction().surface).toEqual({ width: 'viewport', height: 'viewport' })
 
     setCanvasInteraction({ zoomOrigin: 'center' })
-    expect(getCanvasInteraction()).toEqual({ scrollAxis: 'horizontal', zoomGestures: true, zoomOrigin: 'center' })
+    expect(getCanvasInteraction().zoomOrigin).toBe('center')
   })
 
   it('setCanvasInteraction with no-op patch does not notify subscribers', () => {
     const cb = vi.fn()
     subscribeToCanvasInteraction(cb)
-    // Reset count: subscribers fire on initial reset_+ subscribe etc.
     cb.mockClear()
 
     setCanvasInteraction({}) // no keys
@@ -102,6 +189,8 @@ describe('canvasInteractionStore', () => {
     setCanvasInteraction({ zoomGestures: true }) // same as default
     setCanvasInteraction({ zoomOrigin: 'center' }) // same as default
     setCanvasInteraction({ zoomOrigin: 'invalid' }) // ignored
+    setCanvasInteraction({ surface: { width: 'auto' } }) // same as default
+    setCanvasInteraction({ surface: { width: 'fluid' } }) // ignored
     expect(cb).not.toHaveBeenCalled()
 
     setCanvasInteraction({ zoomGestures: false }) // real change
@@ -109,6 +198,9 @@ describe('canvasInteractionStore', () => {
 
     setCanvasInteraction({ zoomOrigin: 'top-left' }) // real change
     expect(cb).toHaveBeenCalledTimes(2)
+
+    setCanvasInteraction({ surface: { width: 'viewport' } }) // real change
+    expect(cb).toHaveBeenCalledTimes(3)
   })
 
   it('subscribers are notified on init and meaningful set; unsubscribe stops further notifications', () => {

package/src/core/stores/configSchema.js

@@ -257,6 +257,17 @@ export const configDefaults = {
     scroll: {
       axis: 'both', // "both" | "vertical" | "horizontal" | "none"
     },
+    surface: {
+      // Sizing of the underlying canvas surface (`.tc-canvas`). Independent
+      // per axis. "auto" preserves the default `max(100vw, 10000px)` floor
+      // so users can pan into a large workspace. "viewport" sizes the
+      // surface to exactly `100vw` / `100vh`, which is what landing-style
+      // canvases want: the unscaled canvas matches the visible window
+      // exactly, while zooming above 100% legitimately overflows and
+      // surfaces horizontal/vertical scroll.
+      width: 'auto', // "auto" | "viewport"
+      height: 'auto', // "auto" | "viewport"
+    },
     terminal: {
       resizable: false,
       defaultWidth: 800,

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

@@ -27,6 +27,7 @@ describe('configSchema', () => {
       expect(c.canvas.zoom.gestures).toBe(true)
       expect(c.canvas.zoom.origin).toBe('center')
       expect(c.canvas.scroll.axis).toBe('both')
+      expect(c.canvas.surface).toEqual({ width: 'auto', height: 'auto' })
       expect(c.canvas.production).toEqual({
         move: false,
         resize: false,

package/src/internals/canvas/CanvasPage.module.css

@@ -41,6 +41,23 @@
   will-change: transform;
 }
 
+/* When the consumer sets `canvas.surface.width/height` to "viewport"
+   (see canvasInteractionStore.js), the canvas surface clamps to 100vw/100vh
+   — but the .canvasZoom wrapper still has its inline `max(10000, 100/scale)vw`
+   sizing, which would leave a huge stretch of empty wrapper to the right /
+   below the canvas and let the user scroll into it. Clamp the wrapper to
+   the viewport too. !important is required to beat the inline style set
+   by applyZoom(). Each axis is independent — only the configured axis is
+   constrained. */
+:global(html[data-canvas-surface-width="viewport"]) .canvasZoom {
+  width: 100vw !important;
+  min-width: 100vw !important;
+}
+:global(html[data-canvas-surface-height="viewport"]) .canvasZoom {
+  height: 100vh !important;
+  min-height: 100vh !important;
+}
+
 /* Selection outline is now handled by WidgetChrome.module.css (.widgetSlotSelected) */
 
 .canvasLogo {

package/toolbar.config.json

@@ -165,7 +165,7 @@
       "ariaLabel": "Zoom to objects",
       "label": "Zoom to objects",
       "icon": "iconoir/square-3d-three-points",
-      "meta": { "strokeWeight": 1.5, "scale": 0.5 },
+      "meta": { "strokeWeight": 2, "scale": 1 },
       "render": "canvas-zoom-to-fit",
       "surface": "canvas-toolbar",
       "handler": "core:canvas-toolbar",
@@ -179,7 +179,7 @@
       "labelOn": "Snap to grid (on)",
       "labelOff": "Snap to grid (off)",
       "icon": "primer/apps",
-      "meta": { "strokeWeight": 1.5, "scale": 1.2 },
+      "meta": { "strokeWeight": 0.9, "scale": 1.1 },
       "render": "canvas-snap",
       "surface": "canvas-toolbar",
       "handler": "core:canvas-toolbar",