@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/recorder/RecorderModal.tsx

@@ -12,7 +12,8 @@
  * doc parse.
  *
  * Visual conventions match `VideoExportModal` from `@bendyline/squisq-
- * video-react` (cream / gold palette, inline styles, no external CSS).
+ * video-react`, with inline theme tokens so the body-level portal follows
+ * the editor's light/dark chrome scheme.
  */
 
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';
@@ -25,6 +26,8 @@ import { buildTimingJson, encodeTimingJson, timingPathFor } from './timingJson.j
 
 // ── Types ──────────────────────────────────────────────────────────
 
+export type RecorderColorScheme = 'light' | 'dark';
+
 export interface RecorderModalProps {
   /** Required — recordings are written here. */
   mediaProvider: MediaProvider;
@@ -37,6 +40,8 @@ export interface RecorderModalProps {
   container?: ContentContainer | null;
   /** Initial capture source. Defaults to `'mic'` (narration). */
   initialMode?: RecorderSource;
+  /** Light/dark chrome scheme. Defaults to `'light'`. */
+  colorScheme?: RecorderColorScheme;
   /** Called after the modal is dismissed (save or cancel). */
   onClose: () => void;
   /**
@@ -77,9 +82,34 @@ const overlayStyle: CSSProperties = {
   zIndex: 10000,
 };
 
+/**
+ * The recorder is normally portaled to `document.body`, outside the editor
+ * shell's CSS-variable scope. Copy the scheme onto a fresh scope and provide
+ * inline fallbacks so the standalone RecorderModal/RecorderButton exports are
+ * themed even when a host has not loaded the editor stylesheet.
+ */
+function recorderThemeStyle(colorScheme: RecorderColorScheme): CSSProperties {
+  const dark = colorScheme === 'dark';
+  return {
+    colorScheme,
+    '--squisq-recorder-surface': `var(--squisq-bg, ${dark ? '#1f2937' : '#fffdf7'})`,
+    '--squisq-recorder-input': `var(--squisq-input-bg, ${dark ? '#374151' : '#fff'})`,
+    '--squisq-recorder-border': `var(--squisq-border, ${dark ? '#4b5563' : '#c9b98a'})`,
+    '--squisq-recorder-text': `var(--squisq-text, ${dark ? '#e5e7eb' : '#4a3c1f'})`,
+    '--squisq-recorder-muted': `var(--squisq-text-muted, ${dark ? '#9ca3af' : '#5a4a2a'})`,
+    '--squisq-recorder-accent': 'var(--squisq-accent, #8b6914)',
+    '--squisq-recorder-accent-text': '#fff',
+    '--squisq-recorder-danger': dark ? '#dc4c4c' : '#b33a3a',
+    '--squisq-recorder-danger-border': dark ? '#ef6a6a' : '#902929',
+    '--squisq-recorder-error-bg': dark ? '#3f151b' : '#fceeee',
+    '--squisq-recorder-error-border': dark ? '#7f1d1d' : '#d88a8a',
+    '--squisq-recorder-error-text': dark ? '#fecdd3' : '#8c2a2a',
+  } as CSSProperties;
+}
+
 const modalStyle: CSSProperties = {
-  background: '#FFFDF7',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-surface)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
   padding: '24px 28px',
   width: 'min(560px, calc(100vw - 48px))',
@@ -87,14 +117,14 @@ const modalStyle: CSSProperties = {
   overflowY: 'auto',
   boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
   fontFamily: 'system-ui, -apple-system, sans-serif',
-  color: '#4a3c1f',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const titleStyle: CSSProperties = {
   margin: '0 0 16px 0',
   fontSize: 18,
   fontWeight: 600,
-  color: '#2d2310',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const labelStyle: CSSProperties = {
@@ -102,7 +132,7 @@ const labelStyle: CSSProperties = {
   fontSize: 13,
   fontWeight: 500,
   marginBottom: 4,
-  color: '#5a4a2a',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const inputStyle: CSSProperties = {
@@ -110,10 +140,10 @@ const inputStyle: CSSProperties = {
   padding: '6px 8px',
   fontSize: 13,
   fontFamily: 'inherit',
-  border: '1px solid #c9b98a',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
-  background: '#fff',
-  color: '#4a3c1f',
+  background: 'var(--squisq-recorder-input)',
+  color: 'var(--squisq-recorder-text)',
   marginBottom: 12,
   boxSizing: 'border-box',
 };
@@ -130,9 +160,9 @@ const btnPrimary: CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#8B6914',
-  color: '#fff',
-  border: '1px solid #7a5c10',
+  background: 'var(--squisq-recorder-accent)',
+  color: 'var(--squisq-recorder-accent-text)',
+  border: '1px solid var(--squisq-recorder-accent)',
   borderRadius: 0,
 };
 
@@ -142,16 +172,16 @@ const btnSecondary: CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#E8DFC6',
-  color: '#4a3c1f',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-input)',
+  color: 'var(--squisq-recorder-text)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
 };
 
 const btnDanger: CSSProperties = {
   ...btnPrimary,
-  background: '#B33A3A',
-  borderColor: '#902929',
+  background: 'var(--squisq-recorder-danger)',
+  borderColor: 'var(--squisq-recorder-danger-border)',
 };
 
 const toggleRowStyle: CSSProperties = {
@@ -166,17 +196,17 @@ const toggleBase: CSSProperties = {
   fontFamily: 'inherit',
   cursor: 'pointer',
   background: 'transparent',
-  color: '#5a4a2a',
-  border: '1px solid #c9b98a',
+  color: 'var(--squisq-recorder-text)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 999,
 };
 
 const toggleActive: CSSProperties = {
   ...toggleBase,
-  color: '#fffdf5',
+  color: 'var(--squisq-recorder-accent-text)',
   fontWeight: 600,
-  background: '#8B6914',
-  borderColor: '#8B6914',
+  background: 'var(--squisq-recorder-accent)',
+  borderColor: 'var(--squisq-recorder-accent)',
 };
 
 const previewBoxStyle: CSSProperties = {
@@ -196,21 +226,21 @@ const previewBoxStyle: CSSProperties = {
 const audioMeterStyle: CSSProperties = {
   width: '100%',
   height: 56,
-  background: '#F2EBD9',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-input)',
+  border: '1px solid var(--squisq-recorder-border)',
   marginBottom: 12,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  color: '#5a4a2a',
+  color: 'var(--squisq-recorder-muted)',
   fontSize: 13,
   fontVariantNumeric: 'tabular-nums',
 };
 
 const errorStyle: CSSProperties = {
-  background: '#FCEEEE',
-  border: '1px solid #D88A8A',
-  color: '#8C2A2A',
+  background: 'var(--squisq-recorder-error-bg)',
+  border: '1px solid var(--squisq-recorder-error-border)',
+  color: 'var(--squisq-recorder-error-text)',
   padding: '8px 10px',
   fontSize: 13,
   marginBottom: 12,
@@ -223,6 +253,20 @@ const buttonRowStyle: CSSProperties = {
   marginTop: 8,
 };
 
+const summaryStyle: CSSProperties = {
+  margin: '0 0 12px 0',
+  fontSize: 12,
+  color: 'var(--squisq-recorder-muted)',
+};
+
+const recordingStatusStyle: CSSProperties = {
+  fontSize: 13,
+  fontVariantNumeric: 'tabular-nums',
+  marginBottom: 12,
+  color: 'var(--squisq-recorder-accent)',
+  fontWeight: 600,
+};
+
 // ── Helpers ────────────────────────────────────────────────────────
 
 function formatDurationMs(ms: number): string {
@@ -293,6 +337,7 @@ export function RecorderModal({
   mediaProvider,
   container = null,
   initialMode = 'mic',
+  colorScheme = 'light',
   onClose,
   onSave,
 }: RecorderModalProps) {
@@ -471,7 +516,14 @@ export function RecorderModal({
   };
 
   return (
-    <div style={overlayStyle} role="dialog" aria-modal="true" aria-label="Record media">
+    <div
+      className="squisq-editor-shell squisq-recorder-overlay"
+      data-theme={colorScheme}
+      style={{ ...overlayStyle, ...recorderThemeStyle(colorScheme) }}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Record media"
+    >
       <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
         <h2 style={titleStyle}>Record media</h2>
 
@@ -493,9 +545,7 @@ export function RecorderModal({
           })}
         </div>
 
-        <p style={{ margin: '0 0 12px 0', fontSize: 12, color: '#5a4a2a' }}>
-          {captureSummary(micOn, video)}
-        </p>
+        <p style={summaryStyle}>{captureSummary(micOn, video)}</p>
 
         {recorder.error && <div style={errorStyle}>{recorder.error.message}</div>}
         {saveError && <div style={errorStyle}>{saveError}</div>}
@@ -579,6 +629,7 @@ export function RecorderModal({
           >
             <input
               type="checkbox"
+              style={{ accentColor: 'var(--squisq-recorder-accent)' }}
               checked={includeSystemAudio}
               onChange={(e) => setIncludeSystemAudio(e.target.checked)}
               disabled={recorder.state === 'recording' || recorder.state === 'requesting'}
@@ -602,15 +653,7 @@ export function RecorderModal({
 
         {/* Live duration during recording */}
         {recorder.state === 'recording' && !isAudioOnly && (
-          <div
-            style={{
-              fontSize: 13,
-              fontVariantNumeric: 'tabular-nums',
-              marginBottom: 12,
-              color: '#8B6914',
-              fontWeight: 600,
-            }}
-          >
+          <div style={recordingStatusStyle}>
             ● Recording {formatDurationMs(recorder.durationMs)}
           </div>
         )}

package/src/recorder/RecorderPanel.tsx

@@ -12,7 +12,11 @@ import { useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
-import { RecorderModal, type RecorderSaveResult } from './RecorderModal.js';
+import {
+  RecorderModal,
+  type RecorderColorScheme,
+  type RecorderSaveResult,
+} from './RecorderModal.js';
 import { Icon } from '../Icon';
 import type { RecorderSource } from './hooks/useMediaRecorder.js';
 
@@ -20,6 +24,8 @@ export interface RecorderPanelProps {
   mediaProvider: MediaProvider;
   container?: ContentContainer | null;
   initialMode?: RecorderSource;
+  /** Light/dark chrome scheme copied onto the portaled modal. */
+  colorScheme?: RecorderColorScheme;
   onSave?: (result: RecorderSaveResult) => void;
   /** ARIA / tooltip label. Defaults to `'Record media'`. */
   tooltip?: string;
@@ -31,6 +37,7 @@ export function RecorderPanel({
   mediaProvider,
   container = null,
   initialMode = 'mic',
+  colorScheme = 'light',
   onSave,
   tooltip = 'Record media',
   className,
@@ -57,6 +64,7 @@ export function RecorderPanel({
             mediaProvider={mediaProvider}
             container={container}
             initialMode={initialMode}
+            colorScheme={colorScheme}
             onClose={handleClose}
             onSave={(result) => {
               onSave?.(result);

package/src/scene/Scene.tsx

@@ -34,6 +34,7 @@ import { RenderLayer } from './layers/renderLayer';
 import { useSceneTextEditing } from './text/useSceneTextEditing';
 import { SceneTextOverlay } from './text/SceneTextOverlay';
 import type { SceneTextEditConfig } from './text/sceneTextConfig';
+import { SceneViewControls } from './SceneViewControls';
 
 export interface SceneProps {
   /** Viewport size in viewport units. Layers render in this coordinate space. */
@@ -78,6 +79,8 @@ export interface SceneProps {
   showMaximize?: boolean;
   maximized?: boolean;
   onToggleMaximize?: () => void;
+  /** Show the shared diagram zoom and fit controls. */
+  showViewControls?: boolean;
   /** Render the built-in toolbar (Select / Connect / etc.). Default true. */
   showToolbar?: boolean;
   /**
@@ -112,6 +115,7 @@ export function Scene(props: SceneProps) {
     showMaximize,
     maximized,
     onToggleMaximize,
+    showViewControls = false,
     showToolbar = true,
     textEditing,
     onDrop,
@@ -139,6 +143,8 @@ export function Scene(props: SceneProps) {
 
   // ── Pan/zoom + selection ────────────────────────────────────
   const panZoom = useScenePanZoom();
+  const { fitBox, zoomAt } = panZoom;
+  const [viewMode, setViewMode] = useState<'fit' | 'manual'>('fit');
   const selection = useSceneSelection();
   const setSceneSelection = selection.setSelection;
   const { hit } = useSceneHitTest();
@@ -226,6 +232,7 @@ export function Scene(props: SceneProps) {
       const sy = e.clientY - rect.top;
       // Negative deltaY = wheel up = zoom in.
       const factor = Math.exp(-e.deltaY * 0.0015);
+      setViewMode('manual');
       panZoom.zoomAt(factor, sx, sy);
     },
     [panZoom],
@@ -246,6 +253,7 @@ export function Scene(props: SceneProps) {
       (e.currentTarget as SVGSVGElement).focus({ preventScroll: true });
       // Middle-button or space-modified drag → pan, regardless of tool.
       if (e.button === 1 || (e.button === 0 && e.altKey)) {
+        setViewMode('manual');
         isPanning.current = true;
         panLast.current = { x: e.clientX, y: e.clientY };
         (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
@@ -372,8 +380,7 @@ export function Scene(props: SceneProps) {
     return () => root.removeEventListener('keydown', onKey);
   }, [tools, activeTool, setActiveTool, textEdit.activeRef]);
 
-  // ── Initial fit ─────────────────────────────────────────────
-  const didFitRef = useRef(false);
+  // ── Responsive fit ──────────────────────────────────────────
   const [containerSize, setContainerSize] = useState<{ width: number; height: number } | null>(
     null,
   );
@@ -391,12 +398,8 @@ export function Scene(props: SceneProps) {
     return () => ro.disconnect();
   }, []);
 
-  useEffect(() => {
-    if (didFitRef.current) return;
-    if (!containerSize) return;
-    if (hitItems.length === 0) return;
-    didFitRef.current = true;
-    // Fit to the bounding box of all hit items (the visible content).
+  const contentBox = useMemo(() => {
+    if (hitItems.length === 0) return null;
     let minX = Infinity;
     let minY = Infinity;
     let maxX = -Infinity;
@@ -407,13 +410,32 @@ export function Scene(props: SceneProps) {
       if (it.bounds.x + it.bounds.width > maxX) maxX = it.bounds.x + it.bounds.width;
       if (it.bounds.y + it.bounds.height > maxY) maxY = it.bounds.y + it.bounds.height;
     }
-    if (!Number.isFinite(minX)) return;
-    panZoom.fitBox(
-      { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
-      containerSize,
-      40,
-    );
-  }, [containerSize, hitItems, panZoom]);
+    if (!Number.isFinite(minX)) return null;
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }, [hitItems]);
+
+  const fitContent = useCallback(() => {
+    if (!containerSize || !contentBox) return;
+    fitBox(contentBox, containerSize, 40, 1);
+  }, [containerSize, contentBox, fitBox]);
+
+  useEffect(() => {
+    if (viewMode === 'fit') fitContent();
+  }, [fitContent, viewMode]);
+
+  const adjustZoom = useCallback(
+    (factor: number) => {
+      setViewMode('manual');
+      if (!containerSize) return;
+      zoomAt(factor, containerSize.width / 2, containerSize.height / 2);
+    },
+    [containerSize, zoomAt],
+  );
+
+  const activateFit = useCallback(() => {
+    setViewMode('fit');
+    fitContent();
+  }, [fitContent]);
 
   // ── Render ──────────────────────────────────────────────────
   const liveOffset = activeId === 'select' ? getActiveMoveOffset(interaction) : null;
@@ -548,6 +570,15 @@ export function Scene(props: SceneProps) {
         />
         {activeTool?.renderOverlay?.(ctx)}
       </SceneViewport>
+      {showViewControls && (
+        <SceneViewControls
+          scale={panZoom.transform.scale}
+          fit={viewMode === 'fit'}
+          onZoomOut={() => adjustZoom(1 / 1.2)}
+          onZoomIn={() => adjustZoom(1.2)}
+          onFit={activateFit}
+        />
+      )}
       {showMaximize && onToggleMaximize && (
         <button
           type="button"

package/src/scene/SceneBlockToolbar.tsx

@@ -40,8 +40,12 @@ export interface SceneBlockAction {
   title?: string;
   onClick: () => void;
   disabled?: boolean;
+  /** Apply the selected-mode treatment (for actions such as Connect). */
+  active?: boolean;
   /** Render with the destructive (red) treatment — used for Delete. */
   danger?: boolean;
+  /** Optional dropdown anchored to this action button. */
+  popover?: ReactNode;
 }
 
 export interface SceneBlockToolbarProps {
@@ -178,20 +182,31 @@ export function SceneBlockToolbar({
       {properties}
       {actions.length > 0 && (
         <div className="squisq-scene-block-actions">
-          {actions.map((a) => (
-            <button
-              key={a.id}
-              type="button"
-              className={`squisq-scene-action${a.danger ? ' squisq-scene-action--danger' : ''}`}
-              onClick={a.onClick}
-              disabled={a.disabled}
-              title={a.title ?? a.label}
-              aria-label={a.title ?? a.label}
-            >
-              {a.icon && <span className="squisq-scene-action-icon">{a.icon}</span>}
-              <span className="squisq-scene-action-label">{a.label}</span>
-            </button>
-          ))}
+          {actions.map((a) => {
+            const button = (
+              <button
+                key={a.id}
+                type="button"
+                className={`squisq-scene-action${a.active ? ' squisq-scene-action--active' : ''}${a.danger ? ' squisq-scene-action--danger' : ''}`}
+                onClick={a.onClick}
+                disabled={a.disabled}
+                title={a.title ?? a.label}
+                aria-label={a.title ?? a.label}
+                aria-pressed={a.active || undefined}
+              >
+                {a.icon && <span className="squisq-scene-action-icon">{a.icon}</span>}
+                <span className="squisq-scene-action-label">{a.label}</span>
+              </button>
+            );
+            return a.popover ? (
+              <span key={a.id} className="squisq-scene-action-popover-anchor">
+                {button}
+                {a.popover}
+              </span>
+            ) : (
+              button
+            );
+          })}
         </div>
       )}
     </div>

package/src/scene/SceneViewControls.tsx

@@ -0,0 +1,43 @@
+import { Icon } from '../Icon';
+
+interface SceneViewControlsProps {
+  scale: number;
+  fit: boolean;
+  onZoomOut: () => void;
+  onZoomIn: () => void;
+  onFit: () => void;
+}
+
+/** Shared zoom/fit chrome for source-backed simple and complex diagrams. */
+export function SceneViewControls({
+  scale,
+  fit,
+  onZoomOut,
+  onZoomIn,
+  onFit,
+}: SceneViewControlsProps) {
+  return (
+    <div className="squisq-scene-view-controls" role="toolbar" aria-label="Diagram view">
+      <button type="button" onClick={onZoomOut} title="Zoom out" aria-label="Zoom out">
+        <Icon icon="fa-solid fa-minus" />
+      </button>
+      <output className="squisq-scene-view-scale" aria-label="Diagram zoom">
+        {Math.round(scale * 100)}%
+      </output>
+      <button type="button" onClick={onZoomIn} title="Zoom in" aria-label="Zoom in">
+        <Icon icon="fa-solid fa-plus" />
+      </button>
+      <button
+        type="button"
+        className="squisq-scene-view-fit"
+        data-active={fit || undefined}
+        aria-pressed={fit}
+        onClick={onFit}
+        title="Fit all shapes in the canvas"
+        aria-label="Fit diagram"
+      >
+        Fit
+      </button>
+    </div>
+  );
+}

package/src/scene/__tests__/fitScale.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { calculateFitScale } from '../fitScale';
+
+describe('calculateFitScale', () => {
+  it('does not enlarge content that already fits', () => {
+    expect(calculateFitScale({ width: 200, height: 100 }, { width: 800, height: 600 })).toBe(1);
+  });
+
+  it('uses the smaller axis scale so every shape remains visible', () => {
+    expect(calculateFitScale({ width: 1_000, height: 200 }, { width: 500, height: 300 })).toBe(0.5);
+    expect(calculateFitScale({ width: 200, height: 1_000 }, { width: 500, height: 250 })).toBe(
+      0.25,
+    );
+  });
+
+  it('falls back to 100% until dimensions are measurable', () => {
+    expect(calculateFitScale({ width: 0, height: 100 }, { width: 500, height: 300 })).toBe(1);
+  });
+});

package/src/scene/__tests__/sceneIsolation.test.tsx

@@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { SceneToolContext } from '../tools/SceneTool';
-import { SelectTool, getActiveMoveOffset } from '../tools/SelectTool';
+import { SelectTool, beginHandleDrag, getActiveMoveOffset } from '../tools/SelectTool';
 import { ConnectTool } from '../tools/ConnectTool';
 import { createSceneTextChannel } from '../text/sceneTextChannel';
 import { SceneViewport } from '../SceneViewport';
@@ -61,6 +61,32 @@ describe('Scene instance isolation', () => {
     expect(second.interaction.connect).toBeUndefined();
   });
 
+  it('commits a resize as one command containing origin and size', () => {
+    const ctx = context('node-card-a');
+    beginHandleDrag(
+      {
+        layerId: 'node-card-a',
+        corner: 'nw',
+        startV: { x: 10, y: 20 },
+        startBounds: { x: 10, y: 20, width: 100, height: 50 },
+      },
+      ctx.interaction,
+    );
+
+    SelectTool.onPointerMove!(pointer(0, 0), ctx);
+    SelectTool.onPointerUp!(pointer(0, 0), ctx);
+
+    expect(ctx.dispatch).toHaveBeenCalledTimes(1);
+    expect(ctx.dispatch).toHaveBeenCalledWith({
+      kind: 'resizeLayer',
+      id: 'node-card-a',
+      x: 0,
+      y: 0,
+      width: 110,
+      height: 70,
+    });
+  });
+
   it('creates independent text-toolbar channels', () => {
     const first = createSceneTextChannel();
     const second = createSceneTextChannel();

package/src/scene/__tests__/useScenePanZoom.test.ts

@@ -44,7 +44,7 @@ describe('useScenePanZoom', () => {
     act(() => result.current.zoomAt(100, 0, 0));
     expect(result.current.transform.scale).toBeLessThanOrEqual(8);
     act(() => result.current.zoomAt(0.0001, 0, 0));
-    expect(result.current.transform.scale).toBeGreaterThanOrEqual(0.1);
+    expect(result.current.transform.scale).toBeGreaterThanOrEqual(0.02);
   });
 
   it('reset returns to identity', () => {
@@ -88,6 +88,33 @@ describe('useScenePanZoom', () => {
     expect(result.current.transform.scale).toBeCloseTo(1.6, 5);
   });
 
+  it('fitBox can cap fit at 100% without enlarging small content', () => {
+    const { result } = renderHook(() => useScenePanZoom());
+    act(() =>
+      result.current.fitBox(
+        { x: 25, y: 50, width: 100, height: 80 },
+        { width: 800, height: 600 },
+        20,
+        1,
+      ),
+    );
+    expect(result.current.transform.scale).toBe(1);
+    expect(result.current.viewportToScreen(75, 90)).toEqual({ x: 400, y: 300 });
+  });
+
+  it('fitBox may shrink below the manual zoom floor to keep all content visible', () => {
+    const { result } = renderHook(() => useScenePanZoom());
+    act(() =>
+      result.current.fitBox(
+        { x: 0, y: 0, width: 10_000, height: 10_000 },
+        { width: 400, height: 300 },
+        20,
+        1,
+      ),
+    );
+    expect(result.current.transform.scale).toBeCloseTo(0.026, 5);
+  });
+
   it('screenToViewport and viewportToScreen are inverses', () => {
     const { result } = renderHook(() => useScenePanZoom());
     act(() => {

package/src/scene/adapters/DrawingAdapter.ts

@@ -238,7 +238,12 @@ export function useDrawingAdapter(
       case 'resizeLayer': {
         if (!isPrimaryShapeLayer(cmd.id)) return;
         const id = shapeIdFromLayerId(cmd.id);
-        if (id) resizeShape(editor, headingPos, id, cmd.width, cmd.height);
+        if (id) {
+          if (cmd.x !== undefined && cmd.y !== undefined) {
+            moveShape(editor, headingPos, id, cmd.x, cmd.y);
+          }
+          resizeShape(editor, headingPos, id, cmd.width, cmd.height);
+        }
         return;
       }
       case 'addLayer': {

package/src/scene/adapters/LayoutAdapter.ts

@@ -130,6 +130,9 @@ export function useLayoutAdapter(
         moveLayoutLayer(editor, headingPos, cmd.id, cmd.x, cmd.y);
         return;
       case 'resizeLayer':
+        if (cmd.x !== undefined && cmd.y !== undefined) {
+          moveLayoutLayer(editor, headingPos, cmd.id, cmd.x, cmd.y);
+        }
         resizeLayoutLayer(editor, headingPos, cmd.id, cmd.width, cmd.height);
         return;
       case 'addLayer': {