@bendyline/squisq-react 1.3.2 → 1.4.1

package/src/__tests__/DocPlayer.test.tsx

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { DocPlayer } from '../DocPlayer';
+import type { Doc } from '@bendyline/squisq/schemas';
+
+function minimalDoc(): Doc {
+  return {
+    articleId: 'smoke',
+    duration: 5,
+    blocks: [{ id: 'b1', startTime: 0, duration: 5, audioSegment: 0, layers: [] }],
+    audio: { segments: [] },
+  };
+}
+
+describe('DocPlayer smoke test', () => {
+  it('renders without crashing in video mode (default)', () => {
+    const { container } = render(<DocPlayer doc={minimalDoc()} basePath="/test" />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('renders without crashing in slideshow mode', () => {
+    const { container } = render(
+      <DocPlayer doc={minimalDoc()} basePath="/test" displayMode="slideshow" />,
+    );
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('renders without crashing in linear mode', () => {
+    const { container } = render(
+      <DocPlayer doc={minimalDoc()} basePath="/test" displayMode="linear" />,
+    );
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('exposes playback controls via onControlsReady', () => {
+    let controls: { play: () => void; pause: () => void } | null = null;
+    render(
+      <DocPlayer
+        doc={minimalDoc()}
+        basePath="/test"
+        showControls={false}
+        onControlsReady={(c) => {
+          controls = c;
+        }}
+      />,
+    );
+    expect(controls).not.toBeNull();
+    expect(typeof controls!.play).toBe('function');
+    expect(typeof controls!.pause).toBe('function');
+  });
+});
+
+describe('DocPlayer front door (doc / markdown resolution)', () => {
+  it('renders a doc built from the markdown prop', () => {
+    const { container } = render(
+      <DocPlayer markdown={'# Hello From Markdown\n\nBody text here.'} displayMode="linear" />,
+    );
+    expect(container.querySelector('.doc-player')).toBeTruthy();
+    expect(container.textContent).toContain('Hello From Markdown');
+  });
+
+  it('doc wins over markdown when both are provided', () => {
+    const { container } = render(
+      <DocPlayer doc={minimalDoc()} markdown="# Markdown Loses" displayMode="linear" />,
+    );
+    expect(container.querySelector('.doc-player')).toBeTruthy();
+    expect(container.textContent).not.toContain('Markdown Loses');
+  });
+
+  it('renders an empty state without throwing when neither doc nor markdown is given', () => {
+    const { container } = render(<DocPlayer />);
+    const empty = container.querySelector('.doc-player--empty');
+    expect(empty).toBeTruthy();
+    expect(empty!.classList.contains('doc-player')).toBe(true);
+  });
+
+  it('defaults basePath when omitted', () => {
+    const { container } = render(<DocPlayer doc={minimalDoc()} />);
+    expect(container.querySelector('.doc-player')).toBeTruthy();
+  });
+});

package/src/__tests__/DocPlayerStylesSentinel.test.tsx

@@ -0,0 +1,41 @@
+/**
+ * Missing-stylesheet sentinel test.
+ *
+ * Lives in its own file so it owns a fresh module instance of DocPlayer
+ * (vitest isolates module registries per test file) — the sentinel warning
+ * is one-shot at module level, so this file's first mount deterministically
+ * observes it.
+ */
+
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render } from '@testing-library/react';
+import { DocPlayer } from '../DocPlayer';
+import type { Doc } from '@bendyline/squisq/schemas';
+
+function minimalDoc(): Doc {
+  return {
+    articleId: 'sentinel',
+    duration: 5,
+    blocks: [{ id: 'b1', startTime: 0, duration: 5, audioSegment: 0, layers: [] }],
+    audio: { segments: [] },
+  };
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('DocPlayer missing-CSS sentinel', () => {
+  it('warns once (and only once) in dev when the stylesheet is not loaded', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(<DocPlayer doc={minimalDoc()} />);
+    const sentinelCalls = () =>
+      warnSpy.mock.calls.filter((c) => String(c[0]).includes('squisq-react/styles'));
+    expect(sentinelCalls().length).toBe(1);
+
+    // Second mount must not warn again — module-level one-shot.
+    render(<DocPlayer doc={minimalDoc()} />);
+    expect(sentinelCalls().length).toBe(1);
+  });
+});

package/src/__tests__/DocProgressBar.test.tsx

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { DocProgressBar } from '../DocProgressBar';
+import type { PlaybackState, PlaybackActions } from '../types';
+
+function makeState(overrides: Partial<PlaybackState> = {}): PlaybackState {
+  return {
+    isPlaying: true,
+    currentTime: 0,
+    totalDuration: 60,
+    currentBlockIndex: 0,
+    totalBlocks: 3,
+    docProgress: 0,
+    hasCaptions: false,
+    captionsEnabled: false,
+    captionMode: 'off',
+    currentSegmentIndex: 0,
+    currentSegmentName: null,
+    currentBlock: null,
+    ...overrides,
+  };
+}
+
+const actions: PlaybackActions = {
+  toggle: () => {},
+  restart: () => {},
+  seekTo: () => {},
+  setCaptionsEnabled: () => {},
+  cycleCaptionMode: () => {},
+};
+
+/** The progress fill is the div tagged `doc-progress-fill`. */
+function fillWidth(container: HTMLElement): string {
+  const fill = container.querySelector<HTMLElement>('[data-testid="doc-progress-fill"]');
+  if (!fill) throw new Error('progress fill not found');
+  return fill.style.width;
+}
+
+describe('DocProgressBar fill', () => {
+  it('tracks elapsed time over totalDuration (the clock/marker timeline)', () => {
+    const { container } = render(
+      <DocProgressBar
+        state={makeState({ currentTime: 12, totalDuration: 23, docProgress: 0.99 })}
+        actions={actions}
+        blockMarkers={[]}
+        expandedBlocks={[]}
+      />,
+    );
+    // Must reflect 12/23 ≈ 52%, NOT the divergent docProgress (0.99).
+    expect(fillWidth(container)).toBe(`${(12 / 23) * 100}%`);
+  });
+
+  it('is 0% when totalDuration is 0 (no divide-by-zero)', () => {
+    const { container } = render(
+      <DocProgressBar
+        state={makeState({ currentTime: 5, totalDuration: 0, docProgress: 0.5 })}
+        actions={actions}
+        blockMarkers={[]}
+        expandedBlocks={[]}
+      />,
+    );
+    expect(fillWidth(container)).toBe('0%');
+  });
+
+  it('clamps to 100% when currentTime exceeds totalDuration', () => {
+    const { container } = render(
+      <DocProgressBar
+        state={makeState({ currentTime: 30, totalDuration: 23 })}
+        actions={actions}
+        blockMarkers={[]}
+        expandedBlocks={[]}
+      />,
+    );
+    expect(fillWidth(container)).toBe('100%');
+  });
+});

package/src/__tests__/LinearDocView.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { LinearDocView } from '../LinearDocView';
 import type { Doc, Block } from '@bendyline/squisq/schemas';
@@ -279,3 +279,55 @@ describe('LinearDocView', () => {
     expect(el.style.background).toBe(probe.style.background);
   });
 });
+
+describe('LinearDocView markdown prop', () => {
+  it('renders from the markdown prop when no doc is given', () => {
+    const { container } = render(<LinearDocView markdown={'# From Markdown\n\nParagraph body.'} />);
+    expect(container.textContent).toContain('From Markdown');
+    expect(container.textContent).toContain('Paragraph body.');
+  });
+
+  it('doc wins over markdown when both are provided', () => {
+    const doc = mkDoc([mkBlock({ id: 'b', contents: [paragraph(text('Doc body wins'))] })]);
+    const { container } = render(<LinearDocView doc={doc} markdown="# Markdown Loses" />);
+    expect(container.textContent).toContain('Doc body wins');
+    expect(container.textContent).not.toContain('Markdown Loses');
+  });
+
+  it('renders an empty container when neither doc nor markdown is given', () => {
+    const { container } = render(<LinearDocView />);
+    expect(container.querySelector('.squisq-linear--empty')).toBeTruthy();
+  });
+});
+
+describe('LinearDocView unknown template annotations', () => {
+  it('warns once per unknown template name and falls back to plain markdown', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const doc = mkDoc([
+      mkBlock({
+        id: 'unknown-1',
+        sourceHeading: {
+          type: 'heading',
+          depth: 2,
+          children: [text('Mystery Section')],
+          templateAnnotation: { template: 'no-such-template-xyz' },
+        },
+        contents: [paragraph(text('Fallback body content'))],
+      }),
+    ]);
+
+    const { container } = render(<LinearDocView doc={doc} />);
+    // Renders as plain markdown: heading + body, no SVG card.
+    expect(container.textContent).toContain('Mystery Section');
+    expect(container.textContent).toContain('Fallback body content');
+    expect(container.querySelector('.squisq-linear-card')).toBeNull();
+
+    // Re-render: the warning stays one-shot per unknown template name.
+    render(<LinearDocView doc={doc} />);
+    const sentinelCalls = warnSpy.mock.calls.filter((c) =>
+      String(c[0]).includes('no-such-template-xyz'),
+    );
+    expect(sentinelCalls.length).toBe(1);
+    warnSpy.mockRestore();
+  });
+});

package/src/__tests__/MarkdownRenderer.test.tsx

@@ -1,7 +1,11 @@
 import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/react';
 import { MarkdownRenderer } from '../MarkdownRenderer';
-import type { MarkdownBlockNode, MarkdownInlineNode } from '@bendyline/squisq/markdown';
+import {
+  parseMarkdown,
+  type MarkdownBlockNode,
+  type MarkdownInlineNode,
+} from '@bendyline/squisq/markdown';
 
 // ── Helpers ────────────────────────────────────────────────────────
 
@@ -20,6 +24,10 @@ function heading(
   return { type: 'heading', depth, children };
 }
 
+function parseNodes(markdown: string): MarkdownBlockNode[] {
+  return parseMarkdown(markdown).children;
+}
+
 // ── Tests ──────────────────────────────────────────────────────────
 
 describe('MarkdownRenderer', () => {
@@ -85,6 +93,33 @@ describe('MarkdownRenderer', () => {
     expect(a.textContent).toBe('click');
   });
 
+  it('renders unsafe links as inert text by default', () => {
+    const { container } = render(
+      <MarkdownRenderer nodes={parseNodes('[x](javascript:alert(1))')} />,
+    );
+    expect(container.querySelector('a.squisq-md-link')).toBeNull();
+    expect(container.querySelector('.squisq-md-link--blocked')?.textContent).toBe('x');
+    expect(container.innerHTML).not.toContain('javascript:');
+  });
+
+  it('linkSchemes allows a host scheme as a real anchor, never executable ones', () => {
+    const nodes = parseNodes('[a](gezel-nav:src%2Fa.ts) [b](javascript:alert(1))');
+    const blocked = render(<MarkdownRenderer nodes={nodes} />);
+    expect(blocked.container.querySelector('a.squisq-md-link')).toBeNull();
+
+    const allowed = render(<MarkdownRenderer nodes={nodes} linkSchemes={['gezel-nav']} />);
+    const a = allowed.container.querySelector('a.squisq-md-link') as HTMLAnchorElement;
+    expect(a?.getAttribute('href')).toBe('gezel-nav:src%2Fa.ts');
+    // javascript: stays blocked even when a host lists it
+    const evil = render(
+      <MarkdownRenderer
+        nodes={parseNodes('[b](javascript:alert(1))')}
+        linkSchemes={['javascript']}
+      />,
+    );
+    expect(evil.container.querySelector('a.squisq-md-link')).toBeNull();
+  });
+
   it('renders an image', () => {
     const nodes: MarkdownBlockNode[] = [
       paragraph({
@@ -231,4 +266,81 @@ describe('MarkdownRenderer', () => {
     );
     expect(container.querySelector('.squisq-md.custom')).toBeTruthy();
   });
+
+  it('sanitizes raw HTML by default', () => {
+    const nodes = parseNodes(
+      '<div><img src="x.jpg" onerror="alert(1)"><script>alert(1)</script><span onclick="alert(1)">ok</span></div>',
+    );
+    const { container } = render(<MarkdownRenderer nodes={nodes} />);
+
+    expect(container.querySelector('script')).toBeNull();
+    expect(container.querySelector('img')?.getAttribute('src')).toBe('x.jpg');
+    expect(container.querySelector('img')?.getAttribute('onerror')).toBeNull();
+    expect(container.querySelector('span')?.getAttribute('onclick')).toBeNull();
+    expect(container.textContent).toContain('ok');
+    expect(container.textContent).not.toContain('alert(1)');
+  });
+
+  it('strips raw HTML when requested', () => {
+    const { container } = render(
+      <MarkdownRenderer nodes={parseNodes('<div><span>hidden</span></div>')} htmlPolicy="strip" />,
+    );
+    expect(container.textContent).not.toContain('hidden');
+    expect(container.querySelector('span')).toBeNull();
+  });
+
+  it('preserves raw HTML only with the trusted opt-in', () => {
+    const { container } = render(
+      <MarkdownRenderer
+        nodes={parseNodes('<div><span class="trusted" onclick="alert(1)">ok</span></div>')}
+        htmlPolicy="trusted"
+      />,
+    );
+    const span = container.querySelector('span.trusted');
+    expect(span?.getAttribute('onclick')).toBe('alert(1)');
+  });
+
+  // Host-affecting tags (style/script/…) must never reach the document.
+  // A bare <style> applies page-wide (CSS isn't scoped outside shadow DOM
+  // / iframes), so an embedded game's <style> in a chat message used to
+  // restyle the whole app chrome. Guard it across every policy.
+  it('drops a raw <style> by default so it cannot leak onto the host', () => {
+    const { container } = render(
+      <MarkdownRenderer
+        nodes={parseNodes('<div><style>body{font-family:monospace}</style><p>hi</p></div>')}
+      />,
+    );
+    expect(container.querySelector('style')).toBeNull();
+    expect(container.textContent).toContain('hi');
+    expect(container.textContent).not.toContain('font-family');
+  });
+
+  it('drops <style>/<script> even under the trusted policy, keeping safe content', () => {
+    const { container } = render(
+      <MarkdownRenderer
+        nodes={parseNodes(
+          '<div class="game"><style>body{font-family:monospace}</style><script>alert(1)</script><p>play</p></div>',
+        )}
+        htmlPolicy="trusted"
+      />,
+    );
+    expect(container.querySelector('style')).toBeNull();
+    expect(container.querySelector('script')).toBeNull();
+    expect(container.querySelector('div.game')).toBeTruthy();
+    expect(container.textContent).toContain('play');
+    expect(container.textContent).not.toContain('font-family');
+  });
+
+  it('drops a raw <style> on the verbatim path when htmlChildren was not parsed', () => {
+    // parseHtml:false leaves htmlChildren empty while rawHtml keeps the
+    // markup — the raw-string backstop must still refuse the fast path.
+    const node = {
+      type: 'htmlBlock',
+      rawHtml: '<style>body{font-family:monospace}</style><p>play</p>',
+      htmlChildren: [],
+    } as unknown as MarkdownBlockNode;
+    const { container } = render(<MarkdownRenderer nodes={[node]} htmlPolicy="trusted" />);
+    expect(container.querySelector('style')).toBeNull();
+    expect(container.textContent).not.toContain('font-family');
+  });
 });

package/src/__tests__/PathLayer.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { PathLayer } from '../layers/PathLayer';
+import type { PathLayer as PathLayerType } from '@bendyline/squisq/schemas';
+
+const viewport = { width: 1000, height: 1000 };
+
+function renderPath(layer: PathLayerType) {
+  const { container } = render(
+    <svg>
+      <PathLayer layer={layer} viewport={viewport} blockTime={0} />
+    </svg>,
+  );
+  return container.querySelector('path')!;
+}
+
+describe('PathLayer', () => {
+  it('uses the stored absolute `d` for plain paths (no shapeKind)', () => {
+    const path = renderPath({
+      id: 'p1',
+      type: 'path',
+      position: { x: 0, y: 0, width: 100, height: 100 },
+      content: { d: 'M 10 10 L 90 90' },
+    });
+    expect(path.getAttribute('d')).toBe('M 10 10 L 90 90');
+  });
+
+  it('derives `d` from the position box for a named shape', () => {
+    // A diamond's first vertex is the top-center of its box.
+    const path = renderPath({
+      id: 'p2',
+      type: 'path',
+      position: { x: 100, y: 200, width: 400, height: 200 },
+      content: { d: 'STALE', shapeKind: 'diamond' },
+    });
+    const d = path.getAttribute('d')!;
+    expect(d).not.toBe('STALE');
+    // Top vertex at (x + w/2, y) = (300, 200).
+    expect(d.startsWith('M 300 200')).toBe(true);
+  });
+
+  it('moving the position moves a named shape (regenerates `d`)', () => {
+    const at = (x: number) =>
+      renderPath({
+        id: 'p3',
+        type: 'path',
+        position: { x, y: 0, width: 200, height: 200 },
+        content: { d: 'M 0 0', shapeKind: 'diamond' },
+      }).getAttribute('d')!;
+    expect(at(0)).not.toBe(at(300));
+  });
+
+  it('resolves `%` positions against the viewport', () => {
+    const path = renderPath({
+      id: 'p4',
+      type: 'path',
+      position: { x: '0%', y: '0%', width: '50%', height: '50%' },
+      content: { d: '', shapeKind: 'diamond' },
+    });
+    // 50% of a 1000px viewport → 500px box; diamond top vertex at (250, 0).
+    expect(path.getAttribute('d')!.startsWith('M 250 0')).toBe(true);
+  });
+
+  it('falls back to the stored `d` when shapeKind is unknown', () => {
+    const path = renderPath({
+      id: 'p5',
+      type: 'path',
+      position: { x: 0, y: 0, width: 100, height: 100 },
+      content: { d: 'M 1 2 L 3 4', shapeKind: 'not-a-real-shape' },
+    });
+    expect(path.getAttribute('d')).toBe('M 1 2 L 3 4');
+  });
+});

package/src/__tests__/fillStyle.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { borderDashArray, resolveFill } from '../utils/fillStyle';
+import { ShapeLayer } from '../layers/ShapeLayer';
+import { TextLayer } from '../layers/TextLayer';
+import type {
+  ShapeLayer as ShapeLayerType,
+  TextLayer as TextLayerType,
+} from '@bendyline/squisq/schemas';
+
+const viewport = { width: 1000, height: 1000 };
+
+describe('borderDashArray', () => {
+  it('returns undefined for solid / unset', () => {
+    expect(borderDashArray(undefined, 2)).toBeUndefined();
+    expect(borderDashArray('solid', 2)).toBeUndefined();
+  });
+  it('scales the pattern by stroke width', () => {
+    expect(borderDashArray('dashed', 2)).toBe('6 4');
+    expect(borderDashArray('dotted', 2)).toBe('2 4');
+  });
+});
+
+describe('resolveFill', () => {
+  it('returns the solid color with no def when there is no gradient', () => {
+    const { fill, def } = resolveFill('x', '#abcdef', undefined);
+    expect(fill).toBe('#abcdef');
+    expect(def).toBeNull();
+  });
+  it('returns a url() fill and a gradient def when a gradient is set', () => {
+    const { fill, def } = resolveFill('x', '#abcdef', { from: '#000', to: '#fff', angle: 90 });
+    expect(fill).toBe('url(#squisq-grad-x)');
+    expect(def).not.toBeNull();
+  });
+});
+
+describe('ShapeLayer fill/border', () => {
+  function makeShape(content: Partial<ShapeLayerType['content']>): ShapeLayerType {
+    return {
+      id: 's1',
+      type: 'shape',
+      position: { x: 0, y: 0, width: 100, height: 100 },
+      content: { shape: 'rect', ...content },
+    } as ShapeLayerType;
+  }
+
+  it('applies fill opacity and a dashed border', () => {
+    const { container } = render(
+      <svg>
+        <ShapeLayer
+          layer={makeShape({
+            fill: '#3b82f6',
+            fillOpacity: 0.5,
+            stroke: '#000',
+            strokeWidth: 4,
+            borderStyle: 'dashed',
+          })}
+          viewport={viewport}
+          blockTime={0}
+        />
+      </svg>,
+    );
+    const rect = container.querySelector('rect')!;
+    expect(rect.getAttribute('fill-opacity')).toBe('0.5');
+    expect(rect.getAttribute('stroke-dasharray')).toBe('12 8');
+  });
+
+  it('renders a gradient via an SVG linearGradient', () => {
+    const { container } = render(
+      <svg>
+        <ShapeLayer
+          layer={makeShape({ gradient: { from: '#111', to: '#eee', angle: 0 } })}
+          viewport={viewport}
+          blockTime={0}
+        />
+      </svg>,
+    );
+    expect(container.querySelector('linearGradient')).not.toBeNull();
+    expect(container.querySelector('rect')!.getAttribute('fill')).toBe('url(#squisq-grad-s1)');
+  });
+});
+
+describe('TextLayer box border', () => {
+  it('draws a border rect on the position box', () => {
+    const layer: TextLayerType = {
+      id: 't1',
+      type: 'text',
+      position: { x: 0, y: 0, width: 400, height: 200 },
+      content: {
+        text: 'Hi',
+        style: {
+          fontSize: 40,
+          color: '#000',
+          borderColor: '#f00',
+          borderWidth: 3,
+          borderStyle: 'dotted',
+        },
+      },
+    };
+    const { container } = render(
+      <svg>
+        <TextLayer layer={layer} viewport={viewport} blockTime={0} />
+      </svg>,
+    );
+    const rect = container.querySelector('rect')!;
+    expect(rect).not.toBeNull();
+    expect(rect.getAttribute('stroke')).toBe('#f00');
+    expect(rect.getAttribute('stroke-width')).toBe('3');
+    expect(rect.getAttribute('width')).toBe('400');
+    expect(rect.getAttribute('height')).toBe('200');
+  });
+});