@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/hooks/useDocPlayback.ts

@@ -1,265 +0,0 @@
-/**
- * useDocPlayback Hook
- *
- * Manages the playback state for a visual doc, including which block
- * is currently active, transition states, and synchronization with audio.
- *
- * This hook provides:
- * - Current block determination based on time
- * - Transition tracking (entering/exiting blocks)
- * - Manual navigation (next/prev block)
- * - Time-based seeking
- * - Automatic expansion of template blocks
- */
-
-import { useMemo, useCallback, useRef } from 'react';
-import type { Doc, Block, DocBlock } from '@bendyline/squisq/schemas';
-import type { Theme } from '@bendyline/squisq/schemas';
-import {
-  DEFAULT_THEME,
-  getBlockAtTime,
-  resolveBlockTransition,
-  resolveTransitionDuration,
-} from '@bendyline/squisq/schemas';
-import {
-  expandDocBlocks,
-  flattenRenderableBlocks,
-  isTemplateBlock,
-  resolvePersistentLayers,
-  VIEWPORT_PRESETS,
-  type ViewportConfig,
-} from '@bendyline/squisq/doc';
-
-interface PlaybackState {
-  /** Currently visible block */
-  currentBlock: Block | null;
-  /** Index of current block */
-  currentBlockIndex: number;
-  /** Previous block (for transitions) */
-  previousBlock: Block | null;
-  /** Whether current block is entering */
-  isEntering: boolean;
-  /** Whether previous block is exiting */
-  isExiting: boolean;
-  /** Time relative to current block start */
-  blockTime: number;
-  /** Progress through current block (0-1) */
-  blockProgress: number;
-  /** Overall progress through doc (0-1) */
-  docProgress: number;
-  /** Expanded blocks (templates converted to full blocks with layers) */
-  blocks: Block[];
-}
-
-interface PlaybackActions {
-  /** Go to next block */
-  nextBlock: () => void;
-  /** Go to previous block */
-  prevBlock: () => void;
-  /** Go to specific block by index */
-  goToBlock: (index: number) => void;
-  /**
-   * Let the identified block enter without remounting the outgoing block.
-   * Used when another interaction (such as a swipe) already removed it.
-   */
-  suppressOutgoingForNextBlock: (blockId: string) => void;
-}
-
-export interface UseDocPlaybackOptions {
-  /** Target viewport used to materialize template blocks. */
-  viewport?: ViewportConfig;
-  /** Active theme used for materialization and transition defaults. */
-  theme?: Theme;
-  /** Host seek callback used by block navigation actions. */
-  onSeek?: (time: number) => void;
-}
-
-export function useDocPlayback(
-  script: Doc | null,
-  currentTime: number,
-  options: UseDocPlaybackOptions = {},
-): PlaybackState & PlaybackActions {
-  const { viewport = VIEWPORT_PRESETS.landscape, theme, onSeek } = options;
-  // Expand any template blocks into full blocks
-  const blocks = useMemo(() => {
-    if (!script?.blocks) {
-      return [];
-    }
-
-    // Flatten nested block hierarchy (markdown-derived docs have children).
-    // `flattenRenderableBlocks` skips the children of container templates
-    // (`diagram`, `drawing`) — those are consumed by the parent's render as
-    // nodes/shapes, so they must not also appear as their own slides.
-    const hasChildren = script.blocks.some((b) => b.children && b.children.length > 0);
-    const flatBlocks = hasChildren ? flattenRenderableBlocks(script.blocks) : script.blocks;
-
-    // Check if any blocks are templates
-    const hasTemplates = flatBlocks.some(isTemplateBlock);
-
-    // Doc persistent layers win wholesale; docs without any inherit the
-    // theme's (see resolvePersistentLayers). Passed as a narrow object so
-    // the memo deps stay field-precise.
-    const resolvedTheme = theme ?? DEFAULT_THEME;
-    const persistentLayers = resolvePersistentLayers(
-      { persistentLayers: script.persistentLayers },
-      resolvedTheme,
-    );
-
-    if (hasTemplates) {
-      // Extract audio segment timing for proper block synchronization
-      const audioSegments = script.audio?.segments?.map((seg) => ({
-        startTime: seg.startTime,
-        duration: seg.duration,
-      }));
-
-      // Expand template blocks with audio segment timing, viewport, and persistent layers
-      const expanded = expandDocBlocks(flatBlocks as DocBlock[], {
-        audioSegments,
-        viewport,
-        persistentLayers,
-        theme,
-        // Custom (user-defined) templates inlined into the doc's
-        // frontmatter — see CustomTemplates.ts. Merged onto the
-        // built-in registry so blocks annotated with `{[myhero]}`
-        // resolve through the user's design.
-        customTemplates: script.customTemplates,
-      });
-      return expanded;
-    }
-
-    // All raw blocks — used as-is except for the theme's default transition
-    // fallback (copies, never mutations: these blocks are caller-owned).
-    return flatBlocks.map((block, index) => {
-      const transition = resolveBlockTransition(block, resolvedTheme, index);
-      return transition !== block.transition ? { ...block, transition } : block;
-    });
-  }, [
-    script?.blocks,
-    script?.audio?.segments,
-    script?.persistentLayers,
-    script?.customTemplates,
-    viewport,
-    theme,
-  ]);
-
-  // Find current block based on time
-  const currentBlock = useMemo(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
-
-  const currentBlockIndex = useMemo(
-    () => (currentBlock ? blocks.indexOf(currentBlock) : -1),
-    [blocks, currentBlock],
-  );
-
-  // Calculate block-relative time
-  const blockTime = useMemo(() => {
-    if (!currentBlock) return 0;
-    return Math.max(0, currentTime - currentBlock.startTime);
-  }, [currentBlock, currentTime]);
-
-  // Calculate progress values
-  const blockProgress = useMemo(() => {
-    if (!currentBlock || currentBlock.duration === 0) return 0;
-    return Math.min(1, blockTime / currentBlock.duration);
-  }, [currentBlock, blockTime]);
-
-  const docProgress = useMemo(() => {
-    if (!script || script.duration === 0) return 0;
-    return Math.min(1, currentTime / script.duration);
-  }, [script, currentTime]);
-
-  // ─── Transition tracking (synchronous — no effect lag) ──────────────
-  // `isEntering` is simply "we are within the block's entrance window"
-  // (blockTime < the transition's duration). Deriving it during render —
-  // rather than flipping it in an effect a frame AFTER the block changes —
-  // means a newly-active block renders WITH its entrance state on its very
-  // first frame. Otherwise the block paints once fully settled and then, a
-  // frame later, snaps back to the start of its entrance animation: the brief
-  // "flash then re-animate" seen between blocks. This runs identically for
-  // real-time playback and frame-seeked render (export) mode.
-  //
-  // The block we transitioned FROM (for the crossfade) is tracked with refs
-  // updated during render — the standard "previous value" pattern — so the
-  // outgoing block is known on the SAME frame the new block becomes active
-  // (an effect would lag a frame and drop the crossfade's first frames).
-  const outgoingBlockRef = useRef<Block | null>(null);
-  const activeBlockIdRef = useRef<string | null>(null);
-  const lastRenderedBlockRef = useRef<Block | null>(null);
-  const suppressOutgoingTargetRef = useRef<string | null>(null);
-  const suppressOutgoingForNextBlock = useCallback((blockId: string) => {
-    // The managed cover is outside the document timeline, so revealing block
-    // one can target the block that is already active underneath it. Clear any
-    // stale outgoing context immediately; the cover visibility update will
-    // provide the render that observes this ref change.
-    if (activeBlockIdRef.current === blockId) {
-      outgoingBlockRef.current = null;
-      suppressOutgoingTargetRef.current = null;
-      return;
-    }
-    suppressOutgoingTargetRef.current = blockId;
-  }, []);
-  if (currentBlock && currentBlock.id !== activeBlockIdRef.current) {
-    // A swipe has already carried the outgoing slide fully off-screen. Keep
-    // the incoming block's own transition, but do not re-mount the old block
-    // as transition context when the armed destination becomes active.
-    const suppressOutgoing = suppressOutgoingTargetRef.current === currentBlock.id;
-    outgoingBlockRef.current = suppressOutgoing ? null : lastRenderedBlockRef.current;
-    // Consume on the first real block change even if the destination did not
-    // match (for example, a host performed a different seek in between).
-    suppressOutgoingTargetRef.current = null;
-    activeBlockIdRef.current = currentBlock.id;
-  }
-  lastRenderedBlockRef.current = currentBlock;
-
-  const transitionDuration = currentBlock?.transition
-    ? resolveTransitionDuration(currentBlock.transition)
-    : 0;
-  const isEntering = !!currentBlock && transitionDuration > 0 && blockTime < transitionDuration;
-  const outgoingBlock = outgoingBlockRef.current;
-  // Only crossfade a genuinely different outgoing block (guards restarts/seeks
-  // where the "previous" resolves to the same block).
-  const isExiting = isEntering && outgoingBlock != null && outgoingBlock.id !== currentBlock?.id;
-  const previousBlock = isExiting ? outgoingBlock : null;
-
-  // Manual navigation
-  const goToBlock = useCallback(
-    (index: number) => {
-      if (!script || index < 0 || index >= blocks.length) return;
-      const targetBlock = blocks[index];
-      if (targetBlock) {
-        onSeek?.(targetBlock.startTime);
-      }
-    },
-    [script, blocks, onSeek],
-  );
-
-  const nextBlock = useCallback(() => {
-    if (currentBlockIndex < blocks.length - 1) {
-      return goToBlock(currentBlockIndex + 1);
-    }
-  }, [currentBlockIndex, blocks.length, goToBlock]);
-
-  const prevBlock = useCallback(() => {
-    if (currentBlockIndex > 0) {
-      return goToBlock(currentBlockIndex - 1);
-    }
-  }, [currentBlockIndex, goToBlock]);
-
-  return {
-    currentBlock,
-    currentBlockIndex,
-    previousBlock,
-    isEntering,
-    isExiting,
-    blockTime,
-    blockProgress,
-    docProgress,
-    nextBlock,
-    prevBlock,
-    goToBlock,
-    suppressOutgoingForNextBlock,
-    /** Expanded blocks (templates converted to full blocks with layers) */
-    blocks,
-  };
-}
-
-export default useDocPlayback;

package/src/hooks/useMediaSchedule.ts

@@ -1,39 +0,0 @@
-/**
- * useMediaSchedule
- *
- * Pure follower of the playback clock for the media-clip model. Given the
- * resolved {@link ScheduledClip}s and the current time, it returns the clips
- * the player should mount and which of them are active right now.
- * {@link MediaClipLayer} consumes this to drive one hidden `<audio>` /
- * full-bleed `<video>` element per clip. (Annotation-authored clips all render
- * at the player level; template-produced `VideoLayer`s are a separate path and
- * are not part of the schedule.)
- *
- * It owns no clock: `currentTime`/`isPlaying` come from the existing
- * `useAudioSync` provider via `DocPlayer`. With an empty schedule it returns
- * empty lists, so documents without the new media model are unaffected.
- */
-
-import { useMemo } from 'react';
-import type { ScheduledClip } from '@bendyline/squisq/schemas';
-
-export interface MediaScheduleController {
-  /** Clips the player mounts (every scheduled clip). */
-  renderClips: ScheduledClip[];
-  /** Ids of clips whose [absoluteStart, absoluteEnd) contains currentTime. */
-  activeIds: Set<string>;
-}
-
-export function useMediaSchedule(
-  schedule: ScheduledClip[],
-  currentTime: number,
-): MediaScheduleController {
-  const activeIds = useMemo(() => {
-    const ids = new Set<string>();
-    for (const c of schedule) {
-      if (currentTime >= c.absoluteStart && currentTime < c.absoluteEnd) ids.add(c.id);
-    }
-    return ids;
-  }, [schedule, currentTime]);
-  return { renderClips: schedule, activeIds };
-}

package/src/hooks/useSlideSwipe.ts

@@ -1,265 +0,0 @@
-/**
- * useSlideSwipe Hook
- *
- * Drag-to-swipe navigation for slideshow mode. Press on the current slide to
- * "pick it up", drag left/right, and on release either snap back (small drag)
- * or advance to the next/previous slide (large drag or a quick flick).
- *
- * The gesture only translates the *current* slide (a "pick up & toss" feel) —
- * the incoming slide arrives via its normal enter transition once navigation
- * commits. The current slide is already mounted and settled, so translating it
- * is a pure `transform` with no animation conflict.
- *
- * Mirrors the repo's canonical pointer-drag pattern (imageEditor/CanvasSurface):
- * ref-held drag start + `setPointerCapture` + window pointermove/up/cancel +
- * a threshold decision on release. Navigation itself is delegated to the
- * caller's `onNext`/`onPrev` (DocPlayer's `slideNavActions`).
- */
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { RefObject } from 'react';
-
-/** Fraction of the container width a drag must cross to commit a slide change. */
-const DISTANCE_RATIO = 0.3;
-/** A fast flick commits even below the distance threshold (px per millisecond). */
-const FLICK_VELOCITY = 0.5;
-/** Ignore flicks shorter than this so a click's micro-jitter never navigates (px). */
-const MIN_FLICK_DISTANCE = 12;
-/** Resistance factor applied when dragging past the first/last slide. */
-const RUBBER_BAND = 0.35;
-/** Default settle animation duration (ms). Must match the CSS in doc-animations.css. */
-const DEFAULT_SETTLE_MS = 260;
-
-/** The lifecycle of a swipe gesture. */
-export type SwipePhase = 'idle' | 'dragging' | 'settling';
-
-/** Outcome of a completed drag. */
-export type SwipeDecision = 'next' | 'prev' | 'snap';
-
-export interface SwipeDecisionInput {
-  /** Horizontal delta from drag start (px). Negative = leftward = next. */
-  dx: number;
-  /** Width of the slide container (px). */
-  width: number;
-  /** How long the drag lasted (ms). */
-  elapsedMs: number;
-  /** Whether a next slide exists. */
-  canNext: boolean;
-  /** Whether a previous slide exists. */
-  canPrev: boolean;
-}
-
-/**
- * Pure decision: given a completed drag, should we advance, go back, or snap
- * back? Committing requires either crossing the distance threshold or a fast
- * flick, *and* a slide existing in that direction. Extracted from the hook so
- * the threshold logic is testable without a DOM.
- */
-export function decideSwipe({
-  dx,
-  width,
-  elapsedMs,
-  canNext,
-  canPrev,
-}: SwipeDecisionInput): SwipeDecision {
-  const distanceThreshold = width > 0 ? width * DISTANCE_RATIO : Infinity;
-  const velocity = elapsedMs > 0 ? Math.abs(dx) / elapsedMs : 0;
-  const passesDistance = Math.abs(dx) >= distanceThreshold;
-  const passesFlick = velocity >= FLICK_VELOCITY && Math.abs(dx) >= MIN_FLICK_DISTANCE;
-
-  if (!passesDistance && !passesFlick) return 'snap';
-  if (dx < 0) return canNext ? 'next' : 'snap'; // dragged left → next slide
-  if (dx > 0) return canPrev ? 'prev' : 'snap'; // dragged right → previous slide
-  return 'snap';
-}
-
-export interface UseSlideSwipeOptions {
-  /** Master gate — the gesture is inert unless enabled (slideshow mode, not headless). */
-  enabled: boolean;
-  /** Ref to the player container, used to measure width for the threshold. */
-  containerRef: RefObject<HTMLElement>;
-  /** Whether a next slide exists (`currentBlockIndex < total - 1`). */
-  canGoNext: boolean;
-  /** Whether a previous slide exists (`currentBlockIndex > 0`). */
-  canGoPrev: boolean;
-  /** Commit to the next slide. */
-  onNext: () => void;
-  /** Commit to the previous slide. */
-  onPrev: () => void;
-  /** Settle animation duration (ms); must match the CSS. Defaults to 260. */
-  settleMs?: number;
-}
-
-export interface UseSlideSwipeResult {
-  /** Live horizontal offset to apply to the active slide (px). */
-  offsetPx: number;
-  /** Current gesture phase — drives the transform transition class. */
-  phase: SwipePhase;
-  /** Attach to the container's `onPointerDown`. */
-  onPointerDown: (e: React.PointerEvent) => void;
-}
-
-interface DragState {
-  pointerId: number;
-  startX: number;
-  startTime: number;
-  target: Element;
-}
-
-/**
- * Manage the swipe gesture state machine for a slideshow player.
- */
-export function useSlideSwipe(opts: UseSlideSwipeOptions): UseSlideSwipeResult {
-  const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
-
-  const [offsetPx, setOffsetPx] = useState(0);
-  const [phase, setPhase] = useState<SwipePhase>('idle');
-
-  // Keep the latest options in a ref so the window listeners (bound once) never
-  // read stale callbacks/flags.
-  const optsRef = useRef(opts);
-  optsRef.current = opts;
-
-  const dragRef = useRef<DragState | null>(null);
-  const phaseRef = useRef<SwipePhase>('idle');
-  phaseRef.current = phase;
-  const settleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const settleRaf = useRef<number | null>(null);
-
-  const clearPending = useCallback(() => {
-    if (settleTimer.current != null) {
-      clearTimeout(settleTimer.current);
-      settleTimer.current = null;
-    }
-    if (settleRaf.current != null) {
-      cancelAnimationFrame(settleRaf.current);
-      settleRaf.current = null;
-    }
-  }, []);
-
-  const onPointerDown = useCallback((e: React.PointerEvent) => {
-    const o = optsRef.current;
-    if (!o.enabled) return;
-    // Don't interrupt an in-flight fling/snap.
-    if (phaseRef.current === 'settling') return;
-    // Only the primary mouse button initiates a drag; touch/pen always do.
-    if (e.pointerType === 'mouse' && e.button !== 0) return;
-    // Let interactive chrome (prev/next buttons, links) handle their own events.
-    const target = e.target as Element;
-    if (target.closest?.('button, a, input, textarea, select, [data-no-swipe]')) return;
-
-    dragRef.current = {
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startTime: performance.now(),
-      target,
-    };
-    try {
-      target.setPointerCapture?.(e.pointerId);
-    } catch {
-      // Pointer capture is best-effort; window listeners still receive events.
-    }
-    setPhase('dragging');
-    setOffsetPx(0);
-  }, []);
-
-  // Bind move/up/cancel on window once. Handlers read live state from refs, so
-  // they never need re-binding and never go stale.
-  useEffect(() => {
-    function currentWidth(): number {
-      return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
-    }
-
-    function endDrag(drag: DragState) {
-      dragRef.current = null;
-      try {
-        drag.target.releasePointerCapture?.(drag.pointerId);
-      } catch {
-        // ignore — capture may already be released
-      }
-    }
-
-    function settleTo(target: number, onArrive?: () => void) {
-      // Switch on the transition class first (offset unchanged), then move to the
-      // target on the next frame so the browser reliably animates the change.
-      setPhase('settling');
-      settleRaf.current = requestAnimationFrame(() => {
-        settleRaf.current = null;
-        setOffsetPx(target);
-        settleTimer.current = setTimeout(() => {
-          settleTimer.current = null;
-          onArrive?.();
-          setOffsetPx(0);
-          setPhase('idle');
-        }, settleMs);
-      });
-    }
-
-    function onMove(e: PointerEvent) {
-      const drag = dragRef.current;
-      if (!drag || e.pointerId !== drag.pointerId) return;
-      const o = optsRef.current;
-      const raw = e.clientX - drag.startX;
-      const blocked = (raw > 0 && !o.canGoPrev) || (raw < 0 && !o.canGoNext);
-      setOffsetPx(blocked ? raw * RUBBER_BAND : raw);
-    }
-
-    function onUp(e: PointerEvent) {
-      const drag = dragRef.current;
-      if (!drag || e.pointerId !== drag.pointerId) return;
-      endDrag(drag);
-      const o = optsRef.current;
-      const rawDx = e.clientX - drag.startX;
-      const width = currentWidth();
-      const elapsedMs = performance.now() - drag.startTime;
-      const decision = decideSwipe({
-        dx: rawDx,
-        width,
-        elapsedMs,
-        canNext: o.canGoNext,
-        canPrev: o.canGoPrev,
-      });
-
-      if (decision === 'snap') {
-        settleTo(0);
-        return;
-      }
-      // Fling fully off-screen in the drag direction, then commit navigation.
-      // Never move the slide back toward center first (guard against over-drag).
-      const distance = Math.max(width, Math.abs(rawDx));
-      const target = decision === 'next' ? -distance : distance;
-      settleTo(target, decision === 'next' ? o.onNext : o.onPrev);
-    }
-
-    function onCancel(e: PointerEvent) {
-      const drag = dragRef.current;
-      if (!drag || e.pointerId !== drag.pointerId) return;
-      endDrag(drag);
-      settleTo(0);
-    }
-
-    window.addEventListener('pointermove', onMove);
-    window.addEventListener('pointerup', onUp);
-    window.addEventListener('pointercancel', onCancel);
-    return () => {
-      window.removeEventListener('pointermove', onMove);
-      window.removeEventListener('pointerup', onUp);
-      window.removeEventListener('pointercancel', onCancel);
-    };
-  }, [settleMs]);
-
-  // Reset all in-flight state if the gesture is disabled mid-drag (e.g. mode switch).
-  useEffect(() => {
-    if (!opts.enabled) {
-      dragRef.current = null;
-      clearPending();
-      setPhase('idle');
-      setOffsetPx(0);
-    }
-  }, [opts.enabled, clearPending]);
-
-  // Cancel any pending settle on unmount.
-  useEffect(() => clearPending, [clearPending]);
-
-  return { offsetPx, phase, onPointerDown };
-}

package/src/hooks/useViewportOrientation.ts

@@ -1,115 +0,0 @@
-/**
- * useViewportOrientation Hook
- *
- * Detects the current viewport orientation and returns the appropriate
- * VIEWPORT_PRESET for rendering docs. Automatically updates when
- * the window is resized.
- *
- * Thresholds:
- * - Portrait: height > width * 1.2 (significantly taller than wide)
- * - Square: width and height within 20% of each other
- * - Landscape: width > height * 1.2 (significantly wider than tall)
- */
-
-import { useState, useEffect, useMemo } from 'react';
-import {
-  VIEWPORT_PRESETS,
-  type ViewportConfig,
-  type ViewportOrientation,
-} from '@bendyline/squisq/doc';
-
-interface UseViewportOrientationResult {
-  /** Current viewport preset configuration */
-  viewport: ViewportConfig;
-  /** Current orientation name */
-  orientation: ViewportOrientation;
-  /** Current window dimensions */
-  windowSize: { width: number; height: number };
-}
-
-/**
- * Determine viewport orientation from window dimensions.
- */
-function getOrientationFromWindow(width: number, height: number): ViewportOrientation {
-  const ratio = width / height;
-
-  // Use thresholds to determine orientation
-  // - Ratio > 1.2 = landscape (wider than tall)
-  // - Ratio < 0.83 (1/1.2) = portrait (taller than wide)
-  // - Otherwise = square-ish
-  if (ratio > 1.2) {
-    return 'landscape';
-  } else if (ratio < 0.83) {
-    return 'portrait';
-  } else {
-    return 'square';
-  }
-}
-
-/**
- * Get the appropriate viewport preset for an orientation.
- */
-function getViewportForOrientation(orientation: ViewportOrientation): ViewportConfig {
-  switch (orientation) {
-    case 'portrait':
-      return VIEWPORT_PRESETS.portrait;
-    case 'square':
-      return VIEWPORT_PRESETS.square;
-    case 'landscape':
-    default:
-      return VIEWPORT_PRESETS.landscape;
-  }
-}
-
-/**
- * Hook to detect viewport orientation and return appropriate preset.
- * Updates automatically when window is resized.
- */
-export function useViewportOrientation(): UseViewportOrientationResult {
-  const [windowSize, setWindowSize] = useState(() => ({
-    width: typeof window !== 'undefined' ? window.innerWidth : 1920,
-    height: typeof window !== 'undefined' ? window.innerHeight : 1080,
-  }));
-
-  // Listen for window resize
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-
-    // Debounce resize handler to avoid excessive re-renders
-    let timeoutId: ReturnType<typeof setTimeout>;
-    const debouncedResize = () => {
-      clearTimeout(timeoutId);
-      timeoutId = setTimeout(handleResize, 100);
-    };
-
-    window.addEventListener('resize', debouncedResize);
-    return () => {
-      window.removeEventListener('resize', debouncedResize);
-      clearTimeout(timeoutId);
-    };
-  }, []);
-
-  // Calculate orientation from window size
-  const orientation = useMemo(
-    () => getOrientationFromWindow(windowSize.width, windowSize.height),
-    [windowSize.width, windowSize.height],
-  );
-
-  // Get appropriate viewport preset
-  const viewport = useMemo(() => getViewportForOrientation(orientation), [orientation]);
-
-  return {
-    viewport,
-    orientation,
-    windowSize,
-  };
-}
-
-export default useViewportOrientation;