@workbench-kit/react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

package/src/layout/WorkbenchCanvas.tsx

@@ -1,956 +1,956 @@
-import { forwardRef, useRef } from 'react';
-import type {
-  ComponentPropsWithRef,
-  CSSProperties,
-  PointerEvent as ReactPointerEvent,
-  ReactNode,
-} from 'react';
-import { Button } from '../primitives/button';
-import { cx } from '../utils/cx';
-import { toAngleValue, toLineLengthValue, toLengthValue } from './layoutHelpers';
-
-export interface WorkbenchCanvasItemFrameProps extends ComponentPropsWithRef<'div'> {
-  cursor?: CSSProperties['cursor'] | undefined;
-  focused?: boolean | undefined;
-  height: number | string;
-  hovered?: boolean | undefined;
-  interactive?: boolean | undefined;
-  opacity?: number | string | undefined;
-  overflow?: CSSProperties['overflow'] | undefined;
-  rotation?: number | string | undefined;
-  selected?: boolean | undefined;
-  touchAction?: CSSProperties['touchAction'] | undefined;
-  transform?: string | undefined;
-  transient?: boolean | undefined;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-  zIndex?: number | string | undefined;
-}
-
-export const WorkbenchCanvasItemFrame = forwardRef<HTMLDivElement, WorkbenchCanvasItemFrameProps>(
-  function WorkbenchCanvasItemFrame(
-    {
-      className,
-      cursor,
-      focused = false,
-      height,
-      hovered = false,
-      interactive = false,
-      opacity,
-      overflow,
-      rotation,
-      selected = false,
-      style,
-      touchAction,
-      transform,
-      transient = false,
-      width,
-      x,
-      y,
-      zIndex,
-      ...props
-    },
-    ref,
-  ) {
-    const frameStyle = {
-      '--ui-workbench-canvas-item-x': toLengthValue(x),
-      '--ui-workbench-canvas-item-y': toLengthValue(y),
-      '--ui-workbench-canvas-item-width': toLengthValue(width),
-      '--ui-workbench-canvas-item-height': toLengthValue(height),
-      ...(cursor !== undefined ? { '--ui-workbench-canvas-item-cursor': cursor } : {}),
-      ...(opacity !== undefined ? { '--ui-workbench-canvas-item-opacity': String(opacity) } : {}),
-      ...(overflow !== undefined ? { '--ui-workbench-canvas-item-overflow': overflow } : {}),
-      ...(rotation !== undefined
-        ? { '--ui-workbench-canvas-item-transform': `rotate(${toAngleValue(rotation)})` }
-        : {}),
-      ...(touchAction !== undefined
-        ? { '--ui-workbench-canvas-item-touch-action': touchAction }
-        : {}),
-      ...(transform !== undefined ? { '--ui-workbench-canvas-item-transform': transform } : {}),
-      ...(zIndex !== undefined ? { '--ui-workbench-canvas-item-z-index': String(zIndex) } : {}),
-      ...style,
-    } as CSSProperties;
-
-    return (
-      <div
-        ref={ref}
-        aria-selected={selected}
-        className={cx('ui-workbench-canvas-item-frame', className)}
-        data-focused={focused ? 'true' : 'false'}
-        data-hovered={hovered ? 'true' : 'false'}
-        data-interactive={interactive ? 'true' : 'false'}
-        data-selected={selected ? 'true' : 'false'}
-        data-transient={transient ? 'true' : 'false'}
-        style={frameStyle}
-        {...props}
-      />
-    );
-  },
-);
-
-export interface WorkbenchCanvasPaneSurfaceProps extends ComponentPropsWithRef<'div'> {
-  children?: ReactNode;
-}
-
-export const WorkbenchCanvasPaneSurface = forwardRef<
-  HTMLDivElement,
-  WorkbenchCanvasPaneSurfaceProps
->(function WorkbenchCanvasPaneSurface({ className, ...props }, ref) {
-  return <div ref={ref} className={cx('ui-workbench-canvas-pane-surface', className)} {...props} />;
-});
-
-export interface WorkbenchCanvasFrameSurfaceProps extends ComponentPropsWithRef<'div'> {
-  bottom?: number | string | undefined;
-  height?: number | string | undefined;
-  left?: number | string | undefined;
-  opacity?: number | string | undefined;
-  right?: number | string | undefined;
-  selected?: boolean | undefined;
-  top?: number | string | undefined;
-  transform?: string | undefined;
-  transient?: boolean | undefined;
-  width?: number | string | undefined;
-}
-
-export function WorkbenchCanvasFrameSurface({
-  bottom,
-  className,
-  height,
-  left,
-  opacity,
-  right,
-  selected = false,
-  style,
-  top,
-  transform,
-  transient = false,
-  width,
-  ...props
-}: WorkbenchCanvasFrameSurfaceProps) {
-  const surfaceStyle = {
-    ...(bottom !== undefined
-      ? { '--ui-workbench-canvas-frame-bottom': toLengthValue(bottom) }
-      : {}),
-    ...(height !== undefined
-      ? { '--ui-workbench-canvas-frame-height': toLengthValue(height) }
-      : {}),
-    ...(left !== undefined ? { '--ui-workbench-canvas-frame-left': toLengthValue(left) } : {}),
-    ...(opacity !== undefined ? { '--ui-workbench-canvas-frame-opacity': String(opacity) } : {}),
-    ...(right !== undefined ? { '--ui-workbench-canvas-frame-right': toLengthValue(right) } : {}),
-    ...(top !== undefined ? { '--ui-workbench-canvas-frame-top': toLengthValue(top) } : {}),
-    ...(transform !== undefined ? { '--ui-workbench-canvas-frame-transform': transform } : {}),
-    ...(width !== undefined ? { '--ui-workbench-canvas-frame-width': toLengthValue(width) } : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-frame-surface', className)}
-      data-selected={selected ? 'true' : 'false'}
-      data-transient={transient ? 'true' : 'false'}
-      style={surfaceStyle}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasViewportProps extends ComponentPropsWithRef<'div'> {
-  children?: ReactNode;
-  grid?: boolean | undefined;
-  gridSize?: number | string | undefined;
-  height: number | string;
-  width: number | string;
-}
-
-export const WorkbenchCanvasViewport = forwardRef<HTMLDivElement, WorkbenchCanvasViewportProps>(
-  function WorkbenchCanvasViewport(
-    { className, grid = true, gridSize = 20, height, style, width, ...props },
-    ref,
-  ) {
-    const viewportStyle = {
-      '--ui-workbench-canvas-viewport-width': toLengthValue(width),
-      '--ui-workbench-canvas-viewport-height': toLengthValue(height),
-      '--ui-workbench-canvas-viewport-grid-size': toLengthValue(gridSize),
-      ...style,
-    } as CSSProperties;
-
-    return (
-      <div
-        ref={ref}
-        className={cx('ui-workbench-canvas-viewport', className)}
-        data-grid={grid ? 'true' : 'false'}
-        style={viewportStyle}
-        {...props}
-      />
-    );
-  },
-);
-
-export interface WorkbenchCanvasSelectionMarqueeProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-}
-
-export function WorkbenchCanvasSelectionMarquee({
-  className,
-  height,
-  style,
-  width,
-  x,
-  y,
-  ...props
-}: WorkbenchCanvasSelectionMarqueeProps) {
-  const marqueeStyle = {
-    '--ui-workbench-canvas-selection-marquee-x': toLengthValue(x),
-    '--ui-workbench-canvas-selection-marquee-y': toLengthValue(y),
-    '--ui-workbench-canvas-selection-marquee-width': toLengthValue(width),
-    '--ui-workbench-canvas-selection-marquee-height': toLengthValue(height),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-selection-marquee', className)}
-      style={marqueeStyle}
-      {...props}
-    />
-  );
-}
-
-export type WorkbenchCanvasGuideBlockTone = 'gap' | 'padding';
-
-export interface WorkbenchCanvasGuideBlockProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  tone?: WorkbenchCanvasGuideBlockTone | undefined;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-  zIndex?: number | string | undefined;
-}
-
-export function WorkbenchCanvasGuideBlock({
-  className,
-  height,
-  style,
-  tone = 'gap',
-  width,
-  x,
-  y,
-  zIndex,
-  ...props
-}: WorkbenchCanvasGuideBlockProps) {
-  const blockStyle = {
-    '--ui-workbench-canvas-guide-block-x': toLengthValue(x),
-    '--ui-workbench-canvas-guide-block-y': toLengthValue(y),
-    '--ui-workbench-canvas-guide-block-width': toLengthValue(width),
-    '--ui-workbench-canvas-guide-block-height': toLengthValue(height),
-    ...(zIndex !== undefined
-      ? { '--ui-workbench-canvas-guide-block-z-index': String(zIndex) }
-      : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-guide-block', className)}
-      data-tone={tone}
-      style={blockStyle}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasPlaceholderProps extends ComponentPropsWithRef<'div'> {
-  height?: number | string | undefined;
-  width?: number | string | undefined;
-  x?: number | string | undefined;
-  y?: number | string | undefined;
-}
-
-export function WorkbenchCanvasPlaceholder({
-  className,
-  height,
-  style,
-  width,
-  x,
-  y,
-  ...props
-}: WorkbenchCanvasPlaceholderProps) {
-  const positioned =
-    x !== undefined || y !== undefined || width !== undefined || height !== undefined;
-  const placeholderStyle = {
-    ...(x !== undefined ? { '--ui-workbench-canvas-placeholder-x': toLengthValue(x) } : {}),
-    ...(y !== undefined ? { '--ui-workbench-canvas-placeholder-y': toLengthValue(y) } : {}),
-    ...(width !== undefined
-      ? { '--ui-workbench-canvas-placeholder-width': toLengthValue(width) }
-      : {}),
-    ...(height !== undefined
-      ? { '--ui-workbench-canvas-placeholder-height': toLengthValue(height) }
-      : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-placeholder', className)}
-      data-positioned={positioned ? 'true' : 'false'}
-      style={placeholderStyle}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasDropIndicatorProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-  zIndex?: number | string | undefined;
-}
-
-export function WorkbenchCanvasDropIndicator({
-  className,
-  height,
-  style,
-  width,
-  x,
-  y,
-  zIndex,
-  ...props
-}: WorkbenchCanvasDropIndicatorProps) {
-  const indicatorStyle = {
-    '--ui-workbench-canvas-drop-indicator-x': toLengthValue(x),
-    '--ui-workbench-canvas-drop-indicator-y': toLengthValue(y),
-    '--ui-workbench-canvas-drop-indicator-width': toLengthValue(width),
-    '--ui-workbench-canvas-drop-indicator-height': toLengthValue(height),
-    ...(zIndex !== undefined
-      ? { '--ui-workbench-canvas-drop-indicator-z-index': String(zIndex) }
-      : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-drop-indicator', className)}
-      style={indicatorStyle}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasDragPreviewFrameProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  opacity?: number | string | undefined;
-  rotation?: number | string | undefined;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-  zIndex?: number | string | undefined;
-}
-
-export function WorkbenchCanvasDragPreviewFrame({
-  className,
-  height,
-  opacity,
-  rotation,
-  style,
-  width,
-  x,
-  y,
-  zIndex,
-  ...props
-}: WorkbenchCanvasDragPreviewFrameProps) {
-  const frameStyle = {
-    '--ui-workbench-canvas-drag-preview-frame-x': toLengthValue(x),
-    '--ui-workbench-canvas-drag-preview-frame-y': toLengthValue(y),
-    '--ui-workbench-canvas-drag-preview-frame-width': toLengthValue(width),
-    '--ui-workbench-canvas-drag-preview-frame-height': toLengthValue(height),
-    ...(opacity !== undefined
-      ? { '--ui-workbench-canvas-drag-preview-frame-opacity': String(opacity) }
-      : {}),
-    ...(rotation !== undefined
-      ? {
-          '--ui-workbench-canvas-drag-preview-frame-transform': `rotate(${toAngleValue(rotation)})`,
-        }
-      : {}),
-    ...(zIndex !== undefined
-      ? { '--ui-workbench-canvas-drag-preview-frame-z-index': String(zIndex) }
-      : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-drag-preview-frame', className)}
-      style={frameStyle}
-      {...props}
-    />
-  );
-}
-
-export type WorkbenchCanvasGuideLineAxis = 'x' | 'y';
-export type WorkbenchCanvasGuideLineSource = 'grid' | 'object';
-
-export type WorkbenchCanvasGuideLayerProps = ComponentPropsWithRef<'div'>;
-
-export function WorkbenchCanvasGuideLayer({ className, ...props }: WorkbenchCanvasGuideLayerProps) {
-  return <div className={cx('ui-workbench-canvas-guide-layer', className)} {...props} />;
-}
-
-export interface WorkbenchCanvasGuideLineProps extends ComponentPropsWithRef<'div'> {
-  axis: WorkbenchCanvasGuideLineAxis;
-  end: number | string;
-  position: number | string;
-  source?: WorkbenchCanvasGuideLineSource | undefined;
-  start: number | string;
-}
-
-export function WorkbenchCanvasGuideLine({
-  axis,
-  className,
-  end,
-  position,
-  source = 'object',
-  start,
-  style,
-  ...props
-}: WorkbenchCanvasGuideLineProps) {
-  const lineStyle = {
-    '--ui-workbench-canvas-guide-line-position': toLengthValue(position),
-    '--ui-workbench-canvas-guide-line-start': toLengthValue(start),
-    '--ui-workbench-canvas-guide-line-length': toLineLengthValue(start, end),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-guide-line', className)}
-      data-axis={axis}
-      data-source={source}
-      style={lineStyle}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasDragGhostProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-  zIndex?: number | string | undefined;
-}
-
-export function WorkbenchCanvasDragGhost({
-  className,
-  height,
-  style,
-  width,
-  x,
-  y,
-  zIndex,
-  ...props
-}: WorkbenchCanvasDragGhostProps) {
-  const ghostStyle = {
-    '--ui-workbench-canvas-drag-ghost-x': toLengthValue(x),
-    '--ui-workbench-canvas-drag-ghost-y': toLengthValue(y),
-    '--ui-workbench-canvas-drag-ghost-width': toLengthValue(width),
-    '--ui-workbench-canvas-drag-ghost-height': toLengthValue(height),
-    ...(zIndex !== undefined ? { '--ui-workbench-canvas-drag-ghost-z-index': String(zIndex) } : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-drag-ghost', className)}
-      style={ghostStyle}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasDragGhostContentProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  width: number | string;
-}
-
-export function WorkbenchCanvasDragGhostContent({
-  className,
-  height,
-  style,
-  width,
-  ...props
-}: WorkbenchCanvasDragGhostContentProps) {
-  const contentStyle = {
-    '--ui-workbench-canvas-drag-ghost-content-width': toLengthValue(width),
-    '--ui-workbench-canvas-drag-ghost-content-height': toLengthValue(height),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-drag-ghost-content', className)}
-      style={contentStyle}
-      {...props}
-    />
-  );
-}
-
-interface WorkbenchCanvasFrameHandleDrag {
-  pointerId: number;
-  startX: number;
-  startY: number;
-}
-
-function trySetPointerCapture(element: HTMLElement, pointerId: number): void {
-  if (typeof element.setPointerCapture !== 'function') return;
-
-  try {
-    element.setPointerCapture(pointerId);
-  } catch {
-    // Synthetic pointer events in Storybook/jsdom may not register an active pointer.
-  }
-}
-
-function tryReleasePointerCapture(element: HTMLElement | null, pointerId: number): void {
-  if (!element || typeof element.releasePointerCapture !== 'function') return;
-
-  try {
-    if (typeof element.hasPointerCapture === 'function' && !element.hasPointerCapture(pointerId)) {
-      return;
-    }
-    element.releasePointerCapture(pointerId);
-  } catch {
-    // Ignore stale synthetic pointer captures.
-  }
-}
-
-export interface WorkbenchCanvasFrameHandleProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  | 'children'
-  | 'onDragEnd'
-  | 'onDragStart'
-  | 'onPointerCancel'
-  | 'onPointerDown'
-  | 'onPointerMove'
-  | 'onPointerUp'
-> {
-  children?: ReactNode;
-  label?: ReactNode;
-  onDragCancel?: (event: ReactPointerEvent<HTMLDivElement>) => void;
-  onDragEnd?: (dx: number, dy: number, event: ReactPointerEvent<HTMLDivElement>) => void;
-  onDragMove?: (dx: number, dy: number, event: ReactPointerEvent<HTMLDivElement>) => void;
-  onDragStart?: (event: ReactPointerEvent<HTMLDivElement>) => void;
-  onPointerCancel?: (event: ReactPointerEvent<HTMLDivElement>) => void;
-  onPointerDown?: (event: ReactPointerEvent<HTMLDivElement>) => void;
-  onPointerMove?: (event: ReactPointerEvent<HTMLDivElement>) => void;
-  onPointerUp?: (event: ReactPointerEvent<HTMLDivElement>) => void;
-  stopPropagation?: boolean;
-}
-
-export function WorkbenchCanvasFrameHandle({
-  children,
-  className,
-  label,
-  onDragCancel,
-  onDragEnd,
-  onDragMove,
-  onDragStart,
-  onPointerCancel,
-  onPointerDown,
-  onPointerMove,
-  onPointerUp,
-  stopPropagation = true,
-  ...props
-}: WorkbenchCanvasFrameHandleProps) {
-  const handleRef = useRef<HTMLDivElement>(null);
-  const dragRef = useRef<WorkbenchCanvasFrameHandleDrag | null>(null);
-  const content = children ?? label;
-
-  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
-    onPointerDown?.(event);
-    if (event.defaultPrevented || event.button !== 0) return;
-
-    const element = handleRef.current;
-    if (!element) return;
-
-    if (stopPropagation) event.stopPropagation();
-    dragRef.current = {
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      startY: event.clientY,
-    };
-    trySetPointerCapture(element, event.pointerId);
-    onDragStart?.(event);
-  };
-
-  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
-    onPointerMove?.(event);
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    onDragMove?.(event.clientX - drag.startX, event.clientY - drag.startY, event);
-  };
-
-  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
-    onPointerUp?.(event);
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-
-    tryReleasePointerCapture(handleRef.current, event.pointerId);
-    dragRef.current = null;
-    const dx = event.clientX - drag.startX;
-    const dy = event.clientY - drag.startY;
-    if (dx !== 0 || dy !== 0) {
-      onDragEnd?.(dx, dy, event);
-    } else {
-      onDragCancel?.(event);
-    }
-  };
-
-  const handlePointerCancel = (event: ReactPointerEvent<HTMLDivElement>) => {
-    onPointerCancel?.(event);
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-
-    tryReleasePointerCapture(handleRef.current, event.pointerId);
-    dragRef.current = null;
-    onDragCancel?.(event);
-  };
-
-  return (
-    <div
-      ref={handleRef}
-      className={cx('ui-workbench-canvas-frame-handle', className)}
-      onPointerCancel={handlePointerCancel}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      {...props}
-    >
-      <span className="ui-workbench-canvas-frame-handle__label">{content}</span>
-    </div>
-  );
-}
-
-export interface WorkbenchCanvasItemBadgeProps extends ComponentPropsWithRef<'span'> {
-  selected?: boolean | undefined;
-}
-
-export function WorkbenchCanvasItemBadge({
-  className,
-  selected = false,
-  ...props
-}: WorkbenchCanvasItemBadgeProps) {
-  return (
-    <span
-      className={cx('ui-workbench-canvas-item-badge', className)}
-      data-selected={selected ? 'true' : 'false'}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasResizeHandleProps extends Omit<
-  ComponentPropsWithRef<'button'>,
-  'children'
-> {
-  label?: string | undefined;
-  onResizeCancel?: (event: ReactPointerEvent<HTMLButtonElement>) => void;
-  onResizeEnd?: (dx: number, dy: number, event: ReactPointerEvent<HTMLButtonElement>) => void;
-  onResizeMove?: (dx: number, dy: number, event: ReactPointerEvent<HTMLButtonElement>) => void;
-  onResizeStart?: (event: ReactPointerEvent<HTMLButtonElement>) => void;
-  position?: WorkbenchCanvasResizeHandlePosition | undefined;
-  stopPropagation?: boolean;
-}
-
-export type WorkbenchCanvasResizeHandlePosition = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
-
-export function WorkbenchCanvasResizeHandle({
-  className,
-  label = 'Resize',
-  onPointerCancel,
-  onPointerDown,
-  onPointerMove,
-  onPointerUp,
-  onResizeCancel,
-  onResizeEnd,
-  onResizeMove,
-  onResizeStart,
-  position = 'se',
-  stopPropagation = true,
-  type = 'button',
-  ...props
-}: WorkbenchCanvasResizeHandleProps) {
-  const handleRef = useRef<HTMLButtonElement>(null);
-  const dragRef = useRef<WorkbenchCanvasFrameHandleDrag | null>(null);
-
-  const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
-    onPointerDown?.(event);
-    if (event.defaultPrevented || event.button !== 0) return;
-
-    const element = handleRef.current;
-    if (!element) return;
-
-    if (stopPropagation) event.stopPropagation();
-    dragRef.current = {
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      startY: event.clientY,
-    };
-    trySetPointerCapture(element, event.pointerId);
-    onResizeStart?.(event);
-  };
-
-  const handlePointerMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
-    onPointerMove?.(event);
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    onResizeMove?.(event.clientX - drag.startX, event.clientY - drag.startY, event);
-  };
-
-  const handlePointerUp = (event: ReactPointerEvent<HTMLButtonElement>) => {
-    onPointerUp?.(event);
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-
-    tryReleasePointerCapture(handleRef.current, event.pointerId);
-    dragRef.current = null;
-    const dx = event.clientX - drag.startX;
-    const dy = event.clientY - drag.startY;
-    if (dx !== 0 || dy !== 0) {
-      onResizeEnd?.(dx, dy, event);
-    } else {
-      onResizeCancel?.(event);
-    }
-  };
-
-  const handlePointerCancel = (event: ReactPointerEvent<HTMLButtonElement>) => {
-    onPointerCancel?.(event);
-    const drag = dragRef.current;
-    if (!drag || drag.pointerId !== event.pointerId) return;
-
-    tryReleasePointerCapture(handleRef.current, event.pointerId);
-    dragRef.current = null;
-    onResizeCancel?.(event);
-  };
-
-  return (
-    <button
-      ref={handleRef}
-      aria-label={label}
-      className={cx('ui-workbench-canvas-resize-handle', className)}
-      data-position={position}
-      onPointerCancel={handlePointerCancel}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      title={label}
-      type={type}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchCanvasResizeFrameProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-  zIndex?: number | string;
-}
-
-export const WorkbenchCanvasResizeFrame = forwardRef<
-  HTMLDivElement,
-  WorkbenchCanvasResizeFrameProps
->(function WorkbenchCanvasResizeFrame(
-  { className, height, style, width, x, y, zIndex, ...props },
-  ref,
-) {
-  const frameStyle = {
-    '--ui-workbench-canvas-resize-frame-x': toLengthValue(x),
-    '--ui-workbench-canvas-resize-frame-y': toLengthValue(y),
-    '--ui-workbench-canvas-resize-frame-width': toLengthValue(width),
-    '--ui-workbench-canvas-resize-frame-height': toLengthValue(height),
-    ...(zIndex !== undefined
-      ? { '--ui-workbench-canvas-resize-frame-z-index': String(zIndex) }
-      : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      ref={ref}
-      className={cx('ui-workbench-canvas-resize-frame', className)}
-      style={frameStyle}
-      {...props}
-    />
-  );
-});
-
-export interface WorkbenchCanvasResizePreviewProps extends ComponentPropsWithRef<'div'> {
-  height: number | string;
-  width: number | string;
-  x: number | string;
-  y: number | string;
-  zIndex?: number | string;
-}
-
-export function WorkbenchCanvasResizePreview({
-  className,
-  height,
-  style,
-  width,
-  x,
-  y,
-  zIndex,
-  ...props
-}: WorkbenchCanvasResizePreviewProps) {
-  const previewStyle = {
-    '--ui-workbench-canvas-resize-preview-x': toLengthValue(x),
-    '--ui-workbench-canvas-resize-preview-y': toLengthValue(y),
-    '--ui-workbench-canvas-resize-preview-width': toLengthValue(width),
-    '--ui-workbench-canvas-resize-preview-height': toLengthValue(height),
-    ...(zIndex !== undefined
-      ? { '--ui-workbench-canvas-resize-preview-z-index': String(zIndex) }
-      : {}),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <div
-      className={cx('ui-workbench-canvas-resize-preview', className)}
-      style={previewStyle}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchRenderSurfaceProps extends ComponentPropsWithRef<'div'> {
-  transparent?: boolean | undefined;
-}
-
-export function WorkbenchRenderSurface({
-  className,
-  transparent = false,
-  ...props
-}: WorkbenchRenderSurfaceProps) {
-  return (
-    <div
-      className={cx('ui-workbench-render-surface', className)}
-      data-transparent={transparent ? 'true' : 'false'}
-      {...props}
-    />
-  );
-}
-
-export interface WorkbenchPreviewCanvasProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children'
-> {
-  children: ReactNode;
-  frameHeight: number;
-  frameTitle?: ReactNode;
-  frameWidth: number;
-  help?: ReactNode;
-  isPanning?: boolean;
-  onResetView?: () => void;
-  resetLabel?: ReactNode;
-  resetTitle?: string;
-  showViewportGrid?: boolean;
-  showWindowFrame?: boolean;
-  stageStyle?: CSSProperties;
-  viewportGridSize?: number;
-  viewportProps?: ComponentPropsWithRef<'div'>;
-}
-
-export function WorkbenchPreviewCanvas({
-  children,
-  className,
-  frameHeight,
-  frameTitle = 'Preview',
-  frameWidth,
-  help,
-  isPanning = false,
-  onResetView,
-  resetLabel = 'Reset',
-  resetTitle = 'Reset View',
-  showViewportGrid = false,
-  showWindowFrame = true,
-  stageStyle,
-  viewportGridSize = 8,
-  viewportProps,
-  ...props
-}: WorkbenchPreviewCanvasProps) {
-  const {
-    className: viewportClassName,
-    ref: interactionRef,
-    style: viewportStyle,
-    ...restViewportProps
-  } = viewportProps ?? {};
-
-  return (
-    <div
-      className={cx('ui-workbench-preview-canvas', className)}
-      data-panning={isPanning ? 'true' : 'false'}
-      {...props}
-      ref={interactionRef}
-    >
-      {onResetView ? (
-        <Button
-          compact
-          className="ui-workbench-preview-canvas__reset"
-          type="button"
-          onClick={onResetView}
-          title={resetTitle}
-        >
-          {resetLabel}
-        </Button>
-      ) : null}
-
-      <div
-        className="ui-workbench-preview-canvas__stage"
-        data-panning={isPanning ? 'true' : 'false'}
-        style={stageStyle}
-      >
-        <div
-          className="ui-workbench-preview-canvas__frame"
-          style={{
-            width: frameWidth,
-            height: frameHeight,
-          }}
-        >
-          {showWindowFrame ? (
-            <div className="ui-workbench-preview-canvas__titlebar">
-              <div className="ui-workbench-preview-canvas__window-controls">
-                <div className="ui-workbench-preview-canvas__dot" data-tone="close" />
-                <div className="ui-workbench-preview-canvas__dot" data-tone="minimize" />
-                <div className="ui-workbench-preview-canvas__dot" data-tone="maximize" />
-              </div>
-              <span className="ui-workbench-preview-canvas__title">{frameTitle}</span>
-            </div>
-          ) : null}
-          <div
-            className={cx('ui-workbench-preview-canvas__viewport', viewportClassName)}
-            data-grid={showViewportGrid ? 'true' : 'false'}
-            style={
-              showViewportGrid
-                ? ({
-                    '--ui-workbench-preview-viewport-grid-size': `${viewportGridSize}px`,
-                    ...viewportStyle,
-                  } as CSSProperties)
-                : viewportStyle
-            }
-            {...restViewportProps}
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-
-      {help ? <div className="ui-workbench-preview-canvas__help">{help}</div> : null}
-    </div>
-  );
-}
+import { forwardRef, useRef } from 'react';
+import type {
+  ComponentPropsWithRef,
+  CSSProperties,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from 'react';
+import { Button } from '../primitives/button';
+import { cx } from '../utils/cx';
+import { toAngleValue, toLineLengthValue, toLengthValue } from './layoutHelpers';
+
+export interface WorkbenchCanvasItemFrameProps extends ComponentPropsWithRef<'div'> {
+  cursor?: CSSProperties['cursor'] | undefined;
+  focused?: boolean | undefined;
+  height: number | string;
+  hovered?: boolean | undefined;
+  interactive?: boolean | undefined;
+  opacity?: number | string | undefined;
+  overflow?: CSSProperties['overflow'] | undefined;
+  rotation?: number | string | undefined;
+  selected?: boolean | undefined;
+  touchAction?: CSSProperties['touchAction'] | undefined;
+  transform?: string | undefined;
+  transient?: boolean | undefined;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+  zIndex?: number | string | undefined;
+}
+
+export const WorkbenchCanvasItemFrame = forwardRef<HTMLDivElement, WorkbenchCanvasItemFrameProps>(
+  function WorkbenchCanvasItemFrame(
+    {
+      className,
+      cursor,
+      focused = false,
+      height,
+      hovered = false,
+      interactive = false,
+      opacity,
+      overflow,
+      rotation,
+      selected = false,
+      style,
+      touchAction,
+      transform,
+      transient = false,
+      width,
+      x,
+      y,
+      zIndex,
+      ...props
+    },
+    ref,
+  ) {
+    const frameStyle = {
+      '--ui-workbench-canvas-item-x': toLengthValue(x),
+      '--ui-workbench-canvas-item-y': toLengthValue(y),
+      '--ui-workbench-canvas-item-width': toLengthValue(width),
+      '--ui-workbench-canvas-item-height': toLengthValue(height),
+      ...(cursor !== undefined ? { '--ui-workbench-canvas-item-cursor': cursor } : {}),
+      ...(opacity !== undefined ? { '--ui-workbench-canvas-item-opacity': String(opacity) } : {}),
+      ...(overflow !== undefined ? { '--ui-workbench-canvas-item-overflow': overflow } : {}),
+      ...(rotation !== undefined
+        ? { '--ui-workbench-canvas-item-transform': `rotate(${toAngleValue(rotation)})` }
+        : {}),
+      ...(touchAction !== undefined
+        ? { '--ui-workbench-canvas-item-touch-action': touchAction }
+        : {}),
+      ...(transform !== undefined ? { '--ui-workbench-canvas-item-transform': transform } : {}),
+      ...(zIndex !== undefined ? { '--ui-workbench-canvas-item-z-index': String(zIndex) } : {}),
+      ...style,
+    } as CSSProperties;
+
+    return (
+      <div
+        ref={ref}
+        aria-selected={selected}
+        className={cx('ui-workbench-canvas-item-frame', className)}
+        data-focused={focused ? 'true' : 'false'}
+        data-hovered={hovered ? 'true' : 'false'}
+        data-interactive={interactive ? 'true' : 'false'}
+        data-selected={selected ? 'true' : 'false'}
+        data-transient={transient ? 'true' : 'false'}
+        style={frameStyle}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface WorkbenchCanvasPaneSurfaceProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
+}
+
+export const WorkbenchCanvasPaneSurface = forwardRef<
+  HTMLDivElement,
+  WorkbenchCanvasPaneSurfaceProps
+>(function WorkbenchCanvasPaneSurface({ className, ...props }, ref) {
+  return <div ref={ref} className={cx('ui-workbench-canvas-pane-surface', className)} {...props} />;
+});
+
+export interface WorkbenchCanvasFrameSurfaceProps extends ComponentPropsWithRef<'div'> {
+  bottom?: number | string | undefined;
+  height?: number | string | undefined;
+  left?: number | string | undefined;
+  opacity?: number | string | undefined;
+  right?: number | string | undefined;
+  selected?: boolean | undefined;
+  top?: number | string | undefined;
+  transform?: string | undefined;
+  transient?: boolean | undefined;
+  width?: number | string | undefined;
+}
+
+export function WorkbenchCanvasFrameSurface({
+  bottom,
+  className,
+  height,
+  left,
+  opacity,
+  right,
+  selected = false,
+  style,
+  top,
+  transform,
+  transient = false,
+  width,
+  ...props
+}: WorkbenchCanvasFrameSurfaceProps) {
+  const surfaceStyle = {
+    ...(bottom !== undefined
+      ? { '--ui-workbench-canvas-frame-bottom': toLengthValue(bottom) }
+      : {}),
+    ...(height !== undefined
+      ? { '--ui-workbench-canvas-frame-height': toLengthValue(height) }
+      : {}),
+    ...(left !== undefined ? { '--ui-workbench-canvas-frame-left': toLengthValue(left) } : {}),
+    ...(opacity !== undefined ? { '--ui-workbench-canvas-frame-opacity': String(opacity) } : {}),
+    ...(right !== undefined ? { '--ui-workbench-canvas-frame-right': toLengthValue(right) } : {}),
+    ...(top !== undefined ? { '--ui-workbench-canvas-frame-top': toLengthValue(top) } : {}),
+    ...(transform !== undefined ? { '--ui-workbench-canvas-frame-transform': transform } : {}),
+    ...(width !== undefined ? { '--ui-workbench-canvas-frame-width': toLengthValue(width) } : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-frame-surface', className)}
+      data-selected={selected ? 'true' : 'false'}
+      data-transient={transient ? 'true' : 'false'}
+      style={surfaceStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasViewportProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
+  grid?: boolean | undefined;
+  gridSize?: number | string | undefined;
+  height: number | string;
+  width: number | string;
+}
+
+export const WorkbenchCanvasViewport = forwardRef<HTMLDivElement, WorkbenchCanvasViewportProps>(
+  function WorkbenchCanvasViewport(
+    { className, grid = true, gridSize = 20, height, style, width, ...props },
+    ref,
+  ) {
+    const viewportStyle = {
+      '--ui-workbench-canvas-viewport-width': toLengthValue(width),
+      '--ui-workbench-canvas-viewport-height': toLengthValue(height),
+      '--ui-workbench-canvas-viewport-grid-size': toLengthValue(gridSize),
+      ...style,
+    } as CSSProperties;
+
+    return (
+      <div
+        ref={ref}
+        className={cx('ui-workbench-canvas-viewport', className)}
+        data-grid={grid ? 'true' : 'false'}
+        style={viewportStyle}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface WorkbenchCanvasSelectionMarqueeProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+}
+
+export function WorkbenchCanvasSelectionMarquee({
+  className,
+  height,
+  style,
+  width,
+  x,
+  y,
+  ...props
+}: WorkbenchCanvasSelectionMarqueeProps) {
+  const marqueeStyle = {
+    '--ui-workbench-canvas-selection-marquee-x': toLengthValue(x),
+    '--ui-workbench-canvas-selection-marquee-y': toLengthValue(y),
+    '--ui-workbench-canvas-selection-marquee-width': toLengthValue(width),
+    '--ui-workbench-canvas-selection-marquee-height': toLengthValue(height),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-selection-marquee', className)}
+      style={marqueeStyle}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchCanvasGuideBlockTone = 'gap' | 'padding';
+
+export interface WorkbenchCanvasGuideBlockProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  tone?: WorkbenchCanvasGuideBlockTone | undefined;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+  zIndex?: number | string | undefined;
+}
+
+export function WorkbenchCanvasGuideBlock({
+  className,
+  height,
+  style,
+  tone = 'gap',
+  width,
+  x,
+  y,
+  zIndex,
+  ...props
+}: WorkbenchCanvasGuideBlockProps) {
+  const blockStyle = {
+    '--ui-workbench-canvas-guide-block-x': toLengthValue(x),
+    '--ui-workbench-canvas-guide-block-y': toLengthValue(y),
+    '--ui-workbench-canvas-guide-block-width': toLengthValue(width),
+    '--ui-workbench-canvas-guide-block-height': toLengthValue(height),
+    ...(zIndex !== undefined
+      ? { '--ui-workbench-canvas-guide-block-z-index': String(zIndex) }
+      : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-guide-block', className)}
+      data-tone={tone}
+      style={blockStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasPlaceholderProps extends ComponentPropsWithRef<'div'> {
+  height?: number | string | undefined;
+  width?: number | string | undefined;
+  x?: number | string | undefined;
+  y?: number | string | undefined;
+}
+
+export function WorkbenchCanvasPlaceholder({
+  className,
+  height,
+  style,
+  width,
+  x,
+  y,
+  ...props
+}: WorkbenchCanvasPlaceholderProps) {
+  const positioned =
+    x !== undefined || y !== undefined || width !== undefined || height !== undefined;
+  const placeholderStyle = {
+    ...(x !== undefined ? { '--ui-workbench-canvas-placeholder-x': toLengthValue(x) } : {}),
+    ...(y !== undefined ? { '--ui-workbench-canvas-placeholder-y': toLengthValue(y) } : {}),
+    ...(width !== undefined
+      ? { '--ui-workbench-canvas-placeholder-width': toLengthValue(width) }
+      : {}),
+    ...(height !== undefined
+      ? { '--ui-workbench-canvas-placeholder-height': toLengthValue(height) }
+      : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-placeholder', className)}
+      data-positioned={positioned ? 'true' : 'false'}
+      style={placeholderStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasDropIndicatorProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+  zIndex?: number | string | undefined;
+}
+
+export function WorkbenchCanvasDropIndicator({
+  className,
+  height,
+  style,
+  width,
+  x,
+  y,
+  zIndex,
+  ...props
+}: WorkbenchCanvasDropIndicatorProps) {
+  const indicatorStyle = {
+    '--ui-workbench-canvas-drop-indicator-x': toLengthValue(x),
+    '--ui-workbench-canvas-drop-indicator-y': toLengthValue(y),
+    '--ui-workbench-canvas-drop-indicator-width': toLengthValue(width),
+    '--ui-workbench-canvas-drop-indicator-height': toLengthValue(height),
+    ...(zIndex !== undefined
+      ? { '--ui-workbench-canvas-drop-indicator-z-index': String(zIndex) }
+      : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-drop-indicator', className)}
+      style={indicatorStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasDragPreviewFrameProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  opacity?: number | string | undefined;
+  rotation?: number | string | undefined;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+  zIndex?: number | string | undefined;
+}
+
+export function WorkbenchCanvasDragPreviewFrame({
+  className,
+  height,
+  opacity,
+  rotation,
+  style,
+  width,
+  x,
+  y,
+  zIndex,
+  ...props
+}: WorkbenchCanvasDragPreviewFrameProps) {
+  const frameStyle = {
+    '--ui-workbench-canvas-drag-preview-frame-x': toLengthValue(x),
+    '--ui-workbench-canvas-drag-preview-frame-y': toLengthValue(y),
+    '--ui-workbench-canvas-drag-preview-frame-width': toLengthValue(width),
+    '--ui-workbench-canvas-drag-preview-frame-height': toLengthValue(height),
+    ...(opacity !== undefined
+      ? { '--ui-workbench-canvas-drag-preview-frame-opacity': String(opacity) }
+      : {}),
+    ...(rotation !== undefined
+      ? {
+          '--ui-workbench-canvas-drag-preview-frame-transform': `rotate(${toAngleValue(rotation)})`,
+        }
+      : {}),
+    ...(zIndex !== undefined
+      ? { '--ui-workbench-canvas-drag-preview-frame-z-index': String(zIndex) }
+      : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-drag-preview-frame', className)}
+      style={frameStyle}
+      {...props}
+    />
+  );
+}
+
+export type WorkbenchCanvasGuideLineAxis = 'x' | 'y';
+export type WorkbenchCanvasGuideLineSource = 'grid' | 'object';
+
+export type WorkbenchCanvasGuideLayerProps = ComponentPropsWithRef<'div'>;
+
+export function WorkbenchCanvasGuideLayer({ className, ...props }: WorkbenchCanvasGuideLayerProps) {
+  return <div className={cx('ui-workbench-canvas-guide-layer', className)} {...props} />;
+}
+
+export interface WorkbenchCanvasGuideLineProps extends ComponentPropsWithRef<'div'> {
+  axis: WorkbenchCanvasGuideLineAxis;
+  end: number | string;
+  position: number | string;
+  source?: WorkbenchCanvasGuideLineSource | undefined;
+  start: number | string;
+}
+
+export function WorkbenchCanvasGuideLine({
+  axis,
+  className,
+  end,
+  position,
+  source = 'object',
+  start,
+  style,
+  ...props
+}: WorkbenchCanvasGuideLineProps) {
+  const lineStyle = {
+    '--ui-workbench-canvas-guide-line-position': toLengthValue(position),
+    '--ui-workbench-canvas-guide-line-start': toLengthValue(start),
+    '--ui-workbench-canvas-guide-line-length': toLineLengthValue(start, end),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-guide-line', className)}
+      data-axis={axis}
+      data-source={source}
+      style={lineStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasDragGhostProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+  zIndex?: number | string | undefined;
+}
+
+export function WorkbenchCanvasDragGhost({
+  className,
+  height,
+  style,
+  width,
+  x,
+  y,
+  zIndex,
+  ...props
+}: WorkbenchCanvasDragGhostProps) {
+  const ghostStyle = {
+    '--ui-workbench-canvas-drag-ghost-x': toLengthValue(x),
+    '--ui-workbench-canvas-drag-ghost-y': toLengthValue(y),
+    '--ui-workbench-canvas-drag-ghost-width': toLengthValue(width),
+    '--ui-workbench-canvas-drag-ghost-height': toLengthValue(height),
+    ...(zIndex !== undefined ? { '--ui-workbench-canvas-drag-ghost-z-index': String(zIndex) } : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-drag-ghost', className)}
+      style={ghostStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasDragGhostContentProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  width: number | string;
+}
+
+export function WorkbenchCanvasDragGhostContent({
+  className,
+  height,
+  style,
+  width,
+  ...props
+}: WorkbenchCanvasDragGhostContentProps) {
+  const contentStyle = {
+    '--ui-workbench-canvas-drag-ghost-content-width': toLengthValue(width),
+    '--ui-workbench-canvas-drag-ghost-content-height': toLengthValue(height),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-drag-ghost-content', className)}
+      style={contentStyle}
+      {...props}
+    />
+  );
+}
+
+interface WorkbenchCanvasFrameHandleDrag {
+  pointerId: number;
+  startX: number;
+  startY: number;
+}
+
+function trySetPointerCapture(element: HTMLElement, pointerId: number): void {
+  if (typeof element.setPointerCapture !== 'function') return;
+
+  try {
+    element.setPointerCapture(pointerId);
+  } catch {
+    // Synthetic pointer events in Storybook/jsdom may not register an active pointer.
+  }
+}
+
+function tryReleasePointerCapture(element: HTMLElement | null, pointerId: number): void {
+  if (!element || typeof element.releasePointerCapture !== 'function') return;
+
+  try {
+    if (typeof element.hasPointerCapture === 'function' && !element.hasPointerCapture(pointerId)) {
+      return;
+    }
+    element.releasePointerCapture(pointerId);
+  } catch {
+    // Ignore stale synthetic pointer captures.
+  }
+}
+
+export interface WorkbenchCanvasFrameHandleProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  | 'children'
+  | 'onDragEnd'
+  | 'onDragStart'
+  | 'onPointerCancel'
+  | 'onPointerDown'
+  | 'onPointerMove'
+  | 'onPointerUp'
+> {
+  children?: ReactNode;
+  label?: ReactNode;
+  onDragCancel?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onDragEnd?: (dx: number, dy: number, event: ReactPointerEvent<HTMLDivElement>) => void;
+  onDragMove?: (dx: number, dy: number, event: ReactPointerEvent<HTMLDivElement>) => void;
+  onDragStart?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onPointerCancel?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onPointerDown?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onPointerMove?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  onPointerUp?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+  stopPropagation?: boolean;
+}
+
+export function WorkbenchCanvasFrameHandle({
+  children,
+  className,
+  label,
+  onDragCancel,
+  onDragEnd,
+  onDragMove,
+  onDragStart,
+  onPointerCancel,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  stopPropagation = true,
+  ...props
+}: WorkbenchCanvasFrameHandleProps) {
+  const handleRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<WorkbenchCanvasFrameHandleDrag | null>(null);
+  const content = children ?? label;
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || event.button !== 0) return;
+
+    const element = handleRef.current;
+    if (!element) return;
+
+    if (stopPropagation) event.stopPropagation();
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+    };
+    trySetPointerCapture(element, event.pointerId);
+    onDragStart?.(event);
+  };
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    onPointerMove?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    onDragMove?.(event.clientX - drag.startX, event.clientY - drag.startY, event);
+  };
+
+  const handlePointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
+    onPointerUp?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
+    dragRef.current = null;
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (dx !== 0 || dy !== 0) {
+      onDragEnd?.(dx, dy, event);
+    } else {
+      onDragCancel?.(event);
+    }
+  };
+
+  const handlePointerCancel = (event: ReactPointerEvent<HTMLDivElement>) => {
+    onPointerCancel?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
+    dragRef.current = null;
+    onDragCancel?.(event);
+  };
+
+  return (
+    <div
+      ref={handleRef}
+      className={cx('ui-workbench-canvas-frame-handle', className)}
+      onPointerCancel={handlePointerCancel}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      {...props}
+    >
+      <span className="ui-workbench-canvas-frame-handle__label">{content}</span>
+    </div>
+  );
+}
+
+export interface WorkbenchCanvasItemBadgeProps extends ComponentPropsWithRef<'span'> {
+  selected?: boolean | undefined;
+}
+
+export function WorkbenchCanvasItemBadge({
+  className,
+  selected = false,
+  ...props
+}: WorkbenchCanvasItemBadgeProps) {
+  return (
+    <span
+      className={cx('ui-workbench-canvas-item-badge', className)}
+      data-selected={selected ? 'true' : 'false'}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasResizeHandleProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'children'
+> {
+  label?: string | undefined;
+  onResizeCancel?: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+  onResizeEnd?: (dx: number, dy: number, event: ReactPointerEvent<HTMLButtonElement>) => void;
+  onResizeMove?: (dx: number, dy: number, event: ReactPointerEvent<HTMLButtonElement>) => void;
+  onResizeStart?: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+  position?: WorkbenchCanvasResizeHandlePosition | undefined;
+  stopPropagation?: boolean;
+}
+
+export type WorkbenchCanvasResizeHandlePosition = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+
+export function WorkbenchCanvasResizeHandle({
+  className,
+  label = 'Resize',
+  onPointerCancel,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onResizeCancel,
+  onResizeEnd,
+  onResizeMove,
+  onResizeStart,
+  position = 'se',
+  stopPropagation = true,
+  type = 'button',
+  ...props
+}: WorkbenchCanvasResizeHandleProps) {
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const dragRef = useRef<WorkbenchCanvasFrameHandleDrag | null>(null);
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || event.button !== 0) return;
+
+    const element = handleRef.current;
+    if (!element) return;
+
+    if (stopPropagation) event.stopPropagation();
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+    };
+    trySetPointerCapture(element, event.pointerId);
+    onResizeStart?.(event);
+  };
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerMove?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    onResizeMove?.(event.clientX - drag.startX, event.clientY - drag.startY, event);
+  };
+
+  const handlePointerUp = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerUp?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
+    dragRef.current = null;
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (dx !== 0 || dy !== 0) {
+      onResizeEnd?.(dx, dy, event);
+    } else {
+      onResizeCancel?.(event);
+    }
+  };
+
+  const handlePointerCancel = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerCancel?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
+    dragRef.current = null;
+    onResizeCancel?.(event);
+  };
+
+  return (
+    <button
+      ref={handleRef}
+      aria-label={label}
+      className={cx('ui-workbench-canvas-resize-handle', className)}
+      data-position={position}
+      onPointerCancel={handlePointerCancel}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      title={label}
+      type={type}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchCanvasResizeFrameProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+  zIndex?: number | string;
+}
+
+export const WorkbenchCanvasResizeFrame = forwardRef<
+  HTMLDivElement,
+  WorkbenchCanvasResizeFrameProps
+>(function WorkbenchCanvasResizeFrame(
+  { className, height, style, width, x, y, zIndex, ...props },
+  ref,
+) {
+  const frameStyle = {
+    '--ui-workbench-canvas-resize-frame-x': toLengthValue(x),
+    '--ui-workbench-canvas-resize-frame-y': toLengthValue(y),
+    '--ui-workbench-canvas-resize-frame-width': toLengthValue(width),
+    '--ui-workbench-canvas-resize-frame-height': toLengthValue(height),
+    ...(zIndex !== undefined
+      ? { '--ui-workbench-canvas-resize-frame-z-index': String(zIndex) }
+      : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={ref}
+      className={cx('ui-workbench-canvas-resize-frame', className)}
+      style={frameStyle}
+      {...props}
+    />
+  );
+});
+
+export interface WorkbenchCanvasResizePreviewProps extends ComponentPropsWithRef<'div'> {
+  height: number | string;
+  width: number | string;
+  x: number | string;
+  y: number | string;
+  zIndex?: number | string;
+}
+
+export function WorkbenchCanvasResizePreview({
+  className,
+  height,
+  style,
+  width,
+  x,
+  y,
+  zIndex,
+  ...props
+}: WorkbenchCanvasResizePreviewProps) {
+  const previewStyle = {
+    '--ui-workbench-canvas-resize-preview-x': toLengthValue(x),
+    '--ui-workbench-canvas-resize-preview-y': toLengthValue(y),
+    '--ui-workbench-canvas-resize-preview-width': toLengthValue(width),
+    '--ui-workbench-canvas-resize-preview-height': toLengthValue(height),
+    ...(zIndex !== undefined
+      ? { '--ui-workbench-canvas-resize-preview-z-index': String(zIndex) }
+      : {}),
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      className={cx('ui-workbench-canvas-resize-preview', className)}
+      style={previewStyle}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchRenderSurfaceProps extends ComponentPropsWithRef<'div'> {
+  transparent?: boolean | undefined;
+}
+
+export function WorkbenchRenderSurface({
+  className,
+  transparent = false,
+  ...props
+}: WorkbenchRenderSurfaceProps) {
+  return (
+    <div
+      className={cx('ui-workbench-render-surface', className)}
+      data-transparent={transparent ? 'true' : 'false'}
+      {...props}
+    />
+  );
+}
+
+export interface WorkbenchPreviewCanvasProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children'
+> {
+  children: ReactNode;
+  frameHeight: number;
+  frameTitle?: ReactNode;
+  frameWidth: number;
+  help?: ReactNode;
+  isPanning?: boolean;
+  onResetView?: () => void;
+  resetLabel?: ReactNode;
+  resetTitle?: string;
+  showViewportGrid?: boolean;
+  showWindowFrame?: boolean;
+  stageStyle?: CSSProperties;
+  viewportGridSize?: number;
+  viewportProps?: ComponentPropsWithRef<'div'>;
+}
+
+export function WorkbenchPreviewCanvas({
+  children,
+  className,
+  frameHeight,
+  frameTitle = 'Preview',
+  frameWidth,
+  help,
+  isPanning = false,
+  onResetView,
+  resetLabel = 'Reset',
+  resetTitle = 'Reset View',
+  showViewportGrid = false,
+  showWindowFrame = true,
+  stageStyle,
+  viewportGridSize = 8,
+  viewportProps,
+  ...props
+}: WorkbenchPreviewCanvasProps) {
+  const {
+    className: viewportClassName,
+    ref: interactionRef,
+    style: viewportStyle,
+    ...restViewportProps
+  } = viewportProps ?? {};
+
+  return (
+    <div
+      className={cx('ui-workbench-preview-canvas', className)}
+      data-panning={isPanning ? 'true' : 'false'}
+      {...props}
+      ref={interactionRef}
+    >
+      {onResetView ? (
+        <Button
+          compact
+          className="ui-workbench-preview-canvas__reset"
+          type="button"
+          onClick={onResetView}
+          title={resetTitle}
+        >
+          {resetLabel}
+        </Button>
+      ) : null}
+
+      <div
+        className="ui-workbench-preview-canvas__stage"
+        data-panning={isPanning ? 'true' : 'false'}
+        style={stageStyle}
+      >
+        <div
+          className="ui-workbench-preview-canvas__frame"
+          style={{
+            width: frameWidth,
+            height: frameHeight,
+          }}
+        >
+          {showWindowFrame ? (
+            <div className="ui-workbench-preview-canvas__titlebar">
+              <div className="ui-workbench-preview-canvas__window-controls">
+                <div className="ui-workbench-preview-canvas__dot" data-tone="close" />
+                <div className="ui-workbench-preview-canvas__dot" data-tone="minimize" />
+                <div className="ui-workbench-preview-canvas__dot" data-tone="maximize" />
+              </div>
+              <span className="ui-workbench-preview-canvas__title">{frameTitle}</span>
+            </div>
+          ) : null}
+          <div
+            className={cx('ui-workbench-preview-canvas__viewport', viewportClassName)}
+            data-grid={showViewportGrid ? 'true' : 'false'}
+            style={
+              showViewportGrid
+                ? ({
+                    '--ui-workbench-preview-viewport-grid-size': `${viewportGridSize}px`,
+                    ...viewportStyle,
+                  } as CSSProperties)
+                : viewportStyle
+            }
+            {...restViewportProps}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+
+      {help ? <div className="ui-workbench-preview-canvas__help">{help}</div> : null}
+    </div>
+  );
+}