@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/styles/index.css

@@ -1,7 +0,0 @@
-/**
- * @bendyline/squisq-react — bundled stylesheet entry.
- * Aggregates all CSS shipped with this package.
- */
-
-@import './doc-animations.css';
-@import '../jsonView/json-view.css';

package/src/types.ts

@@ -1,183 +0,0 @@
-/**
- * Doc Player Control Types
- *
- * Shared type definitions for doc player controls across different
- * layout modes (overlay, sidebar, bottom). These interfaces allow
- * control components to be decoupled from the core DocPlayer.
- *
- * Related Files:
- * - DocPlayer.tsx — Core player component
- * - DocProgressBar.tsx — Extracted progress bar
- * - DocControlsOverlay.tsx — Overlay controls (default)
- * - DocControlsSidebar.tsx — Vertical sidebar controls
- * - DocControlsBottom.tsx — Horizontal bottom strip controls
- */
-
-import type { Block } from '@bendyline/squisq/schemas';
-
-/** Layout mode for doc player controls */
-export type ControlsLayout = 'overlay' | 'sidebar' | 'bottom';
-
-/**
- * Display mode for DocPlayer.
- *
- * - `'video'` — Traditional video-style playback with play/pause, scrub bar,
- *   and time-based auto-advance. Default mode.
- * - `'slideshow'` — PowerPoint-style presentation with prev/next navigation.
- *   Blocks are treated as static slides that only change on user click.
- *   No auto-advance, no scrub bar.
- * - `'linear'` — Long-scrolling document view. Renders the full markdown as
- *   readable HTML with template-annotated sections shown as inline SVG cards.
- *   No audio, no timeline, no controls — just a scrollable page.
- * - `'page'` — Plain semantic HTML preview matching what the
- *   `markdownDocToPlainHtml` export produces. No SquisqPlayer, no SVG
- *   cards — just `<h1>`/`<p>`/`<ul>` etc. inside a sandboxed iframe.
- *   Use when you want a WYSIWYG view of the simple HTML export.
- * - `'narrate'` — Teleprompter/performance surface. DocPlayer does not
- *   implement this mode; it is owned by the editor package
- *   (`@bendyline/squisq-editor-react`), which renders its own
- *   voice-paced teleprompter view for it.
- */
-export type DisplayMode = 'video' | 'slideshow' | 'linear' | 'page' | 'narrate';
-
-/**
- * Caption display style.
- *
- * - `'standard'` — Traditional broadcast-style captions: small white text
- *   on a semi-transparent black badge at the top of the player.
- * - `'social'` — Social media-style (Instagram/TikTok): large centered words
- *   showing 3-5 words at a time with the active word highlighted in the
- *   theme's primary color. Font and colors pulled from the active theme.
- */
-export type CaptionStyle = 'standard' | 'social';
-
-/**
- * Caption display mode — combines enable/disable with style selection.
- * The CC button cycles through: off → standard → social → off.
- */
-export type CaptionMode = 'off' | 'standard' | 'social';
-
-/** Slide navigation actions for slideshow display mode */
-export interface SlideNavActions {
-  /** Navigate to the next slide */
-  nextSlide: () => void;
-  /** Navigate to the previous slide */
-  prevSlide: () => void;
-  /** Navigate to a specific slide by index (0-based) */
-  goToSlide: (index: number) => void;
-}
-
-/** Playback state exposed to external control components */
-export interface PlaybackState {
-  isPlaying: boolean;
-  currentTime: number;
-  totalDuration: number;
-  /** Whether the managed cover is the visual currently shown. */
-  isCoverVisible?: boolean;
-  currentBlockIndex: number;
-  totalBlocks: number;
-  docProgress: number;
-  hasCaptions: boolean;
-  captionsEnabled: boolean;
-  /** Current caption display mode (off, standard, social). */
-  captionMode: CaptionMode;
-  isFullscreen?: boolean;
-  /** Current audio segment index (0-based) */
-  currentSegmentIndex: number;
-  /** Current audio segment name (e.g., 'intro', 'history') */
-  currentSegmentName: string | null;
-  /** Current block data (for extracting image info, etc.) */
-  currentBlock: Block | null;
-  /** Optional display label for non-block slides, e.g. the managed cover. */
-  currentSlideLabel?: string;
-  /** Optional human-facing slide number, separate from internal nav index. */
-  currentSlideNumber?: number;
-  /** Optional human-facing slide total, separate from internal nav total. */
-  totalSlideNumber?: number;
-}
-
-/** Playback actions exposed to external control components */
-export interface PlaybackActions {
-  toggle: () => void;
-  restart: () => void;
-  seekTo: (time: number) => void;
-  setCaptionsEnabled: (enabled: boolean) => void;
-  /** Cycle caption mode: off → standard → social → off */
-  cycleCaptionMode: () => void;
-  toggleFullscreen?: () => void;
-}
-
-/** Block marker data for the progress bar */
-export interface BlockMarker {
-  block: Block;
-  index: number;
-  position: number;
-  title: string;
-  /** True if this block is the first in a new audio segment (section boundary) */
-  isSectionStart: boolean;
-}
-
-// ============================================
-// Render-mode API (exposed on window for Playwright / debug)
-// ============================================
-
-/** Block metadata returned by SquisqRenderAPI.getBlocks() */
-export interface RenderBlockInfo {
-  id: string;
-  template: string;
-  startTime: number;
-  duration: number;
-}
-
-/** Audio segment info returned by SquisqRenderAPI.getAudioSegments() */
-export interface RenderAudioSegmentInfo {
-  src: string;
-  name: string;
-  duration: number;
-  startTime: number;
-}
-
-/** Caption phrase info returned by SquisqRenderAPI.getCaptions() */
-export interface RenderCaptionInfo {
-  text: string;
-  startTime: number;
-  endTime: number;
-}
-
-/** Chapter marker returned by SquisqRenderAPI.getChapters() */
-export interface RenderChapterInfo {
-  title: string;
-  startTime: number;
-  duration: number;
-}
-
-/**
- * Instance-scoped API created in render mode and debug mode.
- * React hosts receive it via `DocPlayer.onRenderAPIReady`; standalone hosts
- * receive it from their mount handle.
- *
- * @example
- * ```ts
- * const handle = SquisqPlayer.getHandle(rootElement);
- * const api = await handle?.renderAPI;
- * await api?.seekTo(5.0);
- * ```
- */
-export interface SquisqRenderAPI {
-  seekTo: (time: number) => Promise<void>;
-  getDuration: () => number;
-  getBlocks: () => RenderBlockInfo[];
-  getAudioSegments: () => RenderAudioSegmentInfo[];
-  getCaptions: () => RenderCaptionInfo[];
-  getChapters: () => RenderChapterInfo[];
-  showCover: () => Promise<void>;
-  hideCover: () => Promise<void>;
-  hasCoverBlock: () => boolean;
-}
-
-/** Format time in seconds to MM:SS string */
-export function formatTime(seconds: number): string {
-  const mins = Math.floor(seconds / 60);
-  const secs = Math.floor(seconds % 60);
-  return `${mins}:${secs.toString().padStart(2, '0')}`;
-}

package/src/utils/animationUtils.ts

@@ -1,13 +0,0 @@
-/**
- * Animation Utilities (React)
- *
- * Re-exports the shared animation utilities for use in the React package.
- * All animation logic is in shared/doc/utils.
- */
-
-export {
-  getAnimationStyle,
-  getDefaultAnimationDuration,
-  getTransitionClass,
-  getAnimationProgress,
-} from '@bendyline/squisq/doc';

package/src/utils/fillStyle.tsx

@@ -1,148 +0,0 @@
-/**
- * Shared fill / border helpers for the SVG layer renderers (shape, path,
- * and the text-box background). Keeping the gradient `<defs>` markup and
- * the dash-pattern math in one place means rect, circle, path, and text
- * all paint fills and borders identically.
- */
-
-import type {
-  LinearGradient,
-  BorderStyle,
-  ShapePattern,
-  ShapeFilter,
-} from '@bendyline/squisq/schemas';
-
-/**
- * SVG `stroke-dasharray` for a border style, scaled by stroke width so the
- * pattern stays proportional. `solid`/undefined → no dashes.
- */
-export function borderDashArray(
-  style: BorderStyle | undefined,
-  strokeWidth: number | undefined,
-): string | undefined {
-  if (!style || style === 'solid') return undefined;
-  const w = Math.max(1, strokeWidth ?? 1);
-  if (style === 'dotted') return `${w} ${w * 2}`;
-  return `${w * 3} ${w * 2}`; // dashed
-}
-
-/**
- * Gradient line endpoints in objectBoundingBox units (0–1) for an angle in
- * degrees: 0 = top→bottom, 90 = left→right, increasing clockwise.
- */
-function gradientVector(angle = 0): { x1: number; y1: number; x2: number; y2: number } {
-  const a = (angle * Math.PI) / 180;
-  const dx = Math.sin(a);
-  const dy = Math.cos(a);
-  return { x1: 0.5 - dx / 2, y1: 0.5 - dy / 2, x2: 0.5 + dx / 2, y2: 0.5 + dy / 2 };
-}
-
-/** Stable id for a layer's gradient def. */
-export function gradientDefId(layerId: string): string {
-  return `squisq-grad-${layerId}`;
-}
-
-/**
- * Resolve a fill to an SVG `fill` value plus the gradient `<defs>` to
- * render (or null). When a gradient is present it wins over the solid
- * color; otherwise the color (or undefined) is returned verbatim.
- */
-export function resolveFill(
-  layerId: string,
-  color: string | undefined,
-  gradient: LinearGradient | undefined,
-  pattern?: ShapePattern,
-): { fill: string | undefined; def: JSX.Element | null } {
-  if (pattern) {
-    const id = `squisq-pattern-${layerId}`;
-    return { fill: `url(#${id})`, def: patternDef(id, pattern) };
-  }
-  if (gradient) {
-    const id = gradientDefId(layerId);
-    const v = gradientVector(gradient.angle);
-    return {
-      fill: `url(#${id})`,
-      def: (
-        <linearGradient id={id} x1={v.x1} y1={v.y1} x2={v.x2} y2={v.y2}>
-          <stop offset="0%" stopColor={gradient.from} />
-          <stop offset="100%" stopColor={gradient.to} />
-        </linearGradient>
-      ),
-    };
-  }
-  return { fill: color, def: null };
-}
-
-/**
- * Native SVG `<pattern>` def for a repeating shape fill — fully vector,
- * identical in the player and headless frame capture.
- */
-function patternDef(id: string, pattern: ShapePattern): JSX.Element {
-  const size = pattern.size ?? 24;
-  const opacity = pattern.opacity ?? 1;
-  const color = pattern.color;
-  return (
-    <pattern
-      id={id}
-      width={size}
-      height={size}
-      patternUnits="userSpaceOnUse"
-      // Diagonal tiles rotate the whole pattern; dots/grid stay axis-aligned.
-      patternTransform={pattern.kind === 'diagonal' ? 'rotate(45)' : undefined}
-    >
-      {pattern.kind === 'dots' && (
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={Math.max(1, size / 12)}
-          fill={color}
-          opacity={opacity}
-        />
-      )}
-      {pattern.kind === 'grid' && (
-        <path
-          d={`M ${size} 0 L 0 0 0 ${size}`}
-          fill="none"
-          stroke={color}
-          strokeWidth={1}
-          opacity={opacity}
-        />
-      )}
-      {pattern.kind === 'diagonal' && (
-        <line x1={0} y1={0} x2={0} y2={size} stroke={color} strokeWidth={1} opacity={opacity} />
-      )}
-    </pattern>
-  );
-}
-
-/**
- * SVG filter def for a shape's procedural filter (static film grain via
- * feTurbulence). Returns the def plus the `filter` attribute value.
- */
-export function resolveShapeFilter(
-  layerId: string,
-  filter: ShapeFilter | undefined,
-): { filterAttr: string | undefined; def: JSX.Element | null } {
-  if (!filter || filter.type !== 'noise') return { filterAttr: undefined, def: null };
-  const id = `squisq-noise-${layerId}`;
-  const opacity = filter.opacity ?? 0.05;
-  return {
-    filterAttr: `url(#${id})`,
-    def: (
-      <filter id={id} x="0%" y="0%" width="100%" height="100%">
-        <feTurbulence
-          type="fractalNoise"
-          baseFrequency={filter.baseFrequency ?? 0.8}
-          numOctaves={2}
-          stitchTiles="stitch"
-          result="noise"
-        />
-        <feColorMatrix in="noise" type="saturate" values="0" result="mono" />
-        <feComponentTransfer in="mono" result="faded">
-          <feFuncA type="linear" slope={opacity} intercept={0} />
-        </feComponentTransfer>
-        <feComposite in="faded" in2="SourceGraphic" operator="in" />
-      </filter>
-    ),
-  };
-}

package/src/utils/layerUtils.ts

@@ -1,42 +0,0 @@
-/**
- * Shared utilities for layer components.
- *
- * Resolves position values and anchor offsets used by all layer types.
- */
-
-/**
- * Resolve a position value (number or percentage string) to pixels.
- */
-export function resolveValue(value: number | string, dimension: number): number {
-  if (typeof value === 'number') {
-    return value;
-  }
-  if (value.endsWith('%')) {
-    const percent = parseFloat(value);
-    return (percent / 100) * dimension;
-  }
-  return parseFloat(value);
-}
-
-/**
- * Get offset based on anchor point.
- */
-export function getAnchorOffset(
-  anchor: string | undefined,
-  width: number,
-  height: number,
-): { x: number; y: number } {
-  switch (anchor) {
-    case 'center':
-      return { x: -width / 2, y: -height / 2 };
-    case 'top-right':
-      return { x: -width, y: 0 };
-    case 'bottom-left':
-      return { x: 0, y: -height };
-    case 'bottom-right':
-      return { x: -width, y: -height };
-    case 'top-left':
-    default:
-      return { x: 0, y: 0 };
-  }
-}