cursedbelt 1.0.0 → 2.3.0

package/src/react/seo/seo.spec.tsx

@@ -1,101 +0,0 @@
-import { afterEach, describe, expect, test } from 'bun:test';
-import { cleanup, render } from '@testing-library/react';
-import type { HeadModel } from 'cwip/seo';
-import { SEO_TAG_MARKER } from 'cwip/seo';
-import { applyHeadToDocument } from './applyHeadToDocument';
-import { HeadProvider, useHead } from './HeadProvider';
-
-afterEach(() => {
-  cleanup();
-  document.head.innerHTML = '';
-  document.title = '';
-});
-
-describe('applyHeadToDocument', () => {
-  test('sets document.title from a templated title', () => {
-    applyHeadToDocument({ title: 'Free monads', titleTemplate: '%s | Cursed Alchemy' });
-    expect(document.title).toBe('Free monads | Cursed Alchemy');
-  });
-
-  test('upserts meta/link/jsonLd tags, all carrying the marker', () => {
-    const model: HeadModel = {
-      description: 'An article about free monads',
-      canonical: 'https://example.com/articles/free-monads',
-      openGraph: { title: 'Free monads', type: 'article' },
-      jsonLd: [{ '@type': 'Article', headline: 'Free monads' }],
-    };
-    applyHeadToDocument(model);
-
-    const description = document.head.querySelector('meta[name="description"]');
-    expect(description?.getAttribute('content')).toBe('An article about free monads');
-    expect(description?.hasAttribute(SEO_TAG_MARKER)).toBe(true);
-
-    const canonical = document.head.querySelector('link[rel="canonical"]');
-    expect(canonical?.getAttribute('href')).toBe('https://example.com/articles/free-monads');
-
-    const ogTitle = document.head.querySelector('meta[property="og:title"]');
-    expect(ogTitle?.getAttribute('content')).toBe('Free monads');
-
-    const script = document.head.querySelector('script[type="application/ld+json"]');
-    expect(script).not.toBeNull();
-    expect(JSON.parse(script?.textContent ?? '{}')).toEqual({
-      '@type': 'Article',
-      headline: 'Free monads',
-    });
-  });
-
-  test('re-applying the same model twice is idempotent (no duplicate tags)', () => {
-    const model: HeadModel = {
-      description: 'same description',
-      canonical: 'https://example.com/a',
-    };
-    applyHeadToDocument(model);
-    applyHeadToDocument(model);
-    expect(document.head.querySelectorAll('meta[name="description"]').length).toBe(1);
-    expect(document.head.querySelectorAll('link[rel="canonical"]').length).toBe(1);
-  });
-
-  test('removes a previously-managed tag that is absent from the new model', () => {
-    applyHeadToDocument({ description: 'first', canonical: 'https://example.com/a' });
-    expect(document.head.querySelector('link[rel="canonical"]')).not.toBeNull();
-
-    applyHeadToDocument({ description: 'second' });
-    expect(document.head.querySelector('meta[name="description"]')?.getAttribute('content')).toBe(
-      'second',
-    );
-    expect(document.head.querySelector('link[rel="canonical"]')).toBeNull();
-  });
-
-  test('never touches an app-authored (unmarked) tag', () => {
-    const appMeta = document.createElement('meta');
-    appMeta.setAttribute('name', 'viewport');
-    appMeta.setAttribute('content', 'width=device-width, initial-scale=1');
-    document.head.appendChild(appMeta);
-
-    applyHeadToDocument({ description: 'managed description' });
-
-    const viewport = document.head.querySelector('meta[name="viewport"]');
-    expect(viewport).toBe(appMeta);
-    expect(viewport?.hasAttribute(SEO_TAG_MARKER)).toBe(false);
-  });
-});
-
-describe('useHead', () => {
-  const Route = ({ model }: { model: HeadModel }) => {
-    useHead(model);
-    return null;
-  };
-
-  test('applies the merged provider default + route model, route wins on overlap', async () => {
-    render(
-      <HeadProvider default={{ description: 'default description', titleTemplate: '%s | Site' }}>
-        <Route model={{ title: 'Route title', description: 'route description' }} />
-      </HeadProvider>,
-    );
-    // effects flush synchronously under @testing-library/react's act()
-    expect(document.title).toBe('Route title | Site');
-    expect(document.head.querySelector('meta[name="description"]')?.getAttribute('content')).toBe(
-      'route description',
-    );
-  });
-});

package/src/react/timeline/ClipView.tsx

@@ -1,146 +0,0 @@
-import { clipLeftPx, clipWidthPx, pxToSeconds, type TimelineClip } from 'cwip/timeline';
-import { Zap } from 'lucide-react';
-import type { ReactNode } from 'react';
-import { useRef } from 'react';
-import { formatTimecode } from '../../core/media';
-import { usePointerDrag, type UsePointerDragOptions } from '../hooks/usePointerDrag';
-import { cn } from '../lib/cn';
-
-export type TrimEdge = 'start' | 'end';
-
-export interface ClipViewProps {
-  clip: TimelineClip;
-  zoomScale: number;
-  selected: boolean;
-  onSelect: () => void;
-  /** Live preview during a body drag (raw target start, seconds). */
-  onMovePreview: (toStartSeconds: number, event: PointerEvent) => void;
-  onMoveCommit: (toStartSeconds: number, cancelled: boolean) => void;
-  /** Live preview during an edge drag (raw signed delta, seconds). */
-  onTrimPreview: (edge: TrimEdge, deltaSeconds: number, event: PointerEvent) => void;
-  onTrimCommit: (edge: TrimEdge, deltaSeconds: number, cancelled: boolean) => void;
-  /** Fallback color token when the clip carries none (a theme token name,
-   * resolved as `var(--<token>)` — e.g. "chart-1"). */
-  defaultColorToken?: string;
-  /** Extra content under the label (waveform strip, filmstrip). */
-  children?: ReactNode;
-}
-
-/**
- * One clip block: body drag repositions, edge handles trim, click selects.
- * PRESENTATIONAL — it translates pixels to seconds and reports intent; all
- * clamping/rippling/snapping is the owner's job (cwip/timeline ops), so the
- * block never disagrees with the engine. Colors ride theme tokens via
- * `color-mix`, never raw values.
- */
-export function ClipView({
-  clip,
-  zoomScale,
-  selected,
-  onSelect,
-  onMovePreview,
-  onMoveCommit,
-  onTrimPreview,
-  onTrimCommit,
-  defaultColorToken = 'chart-1',
-  children,
-}: ClipViewProps) {
-  const token = clip.colorToken ?? defaultColorToken;
-  const originStart = useRef(0);
-
-  const bodyDrag = usePointerDrag({
-    onStart: () => {
-      originStart.current = clip.timelineStart;
-      onSelect();
-    },
-    onMove: ({ dx, event }) =>
-      onMovePreview(Math.max(0, originStart.current + pxToSeconds(dx, zoomScale)), event),
-    onEnd: ({ dx, cancelled }) =>
-      onMoveCommit(Math.max(0, originStart.current + pxToSeconds(dx, zoomScale)), cancelled),
-  });
-
-  // Both edge handles share one drag recipe, differing only by which edge they trim.
-  // `usePointerDrag` is a hook, so it's called directly at the top level (never inside a
-  // helper/closure — Rules of Hooks); `edgeDragOptions` builds the config, not the hook.
-  const edgeDragOptions = (edge: TrimEdge): UsePointerDragOptions => ({
-    onStart: () => onSelect(),
-    onMove: ({ dx, event }) => onTrimPreview(edge, pxToSeconds(dx, zoomScale), event),
-    onEnd: ({ dx, cancelled }) => onTrimCommit(edge, pxToSeconds(dx, zoomScale), cancelled),
-  });
-  const startDrag = usePointerDrag(edgeDragOptions('start'));
-  const endDrag = usePointerDrag(edgeDragOptions('end'));
-
-  return (
-    <button
-      // guardrails-ignore no-raw-action-button: a draggable/trimmable timeline-canvas
-      // primitive (positioned, pointer-drag-driven, custom color-mix styling via
-      // `style`) — not a generic action trigger, so it can't route through the
-      // Button/Tooltip abstraction without breaking the drag/trim contract.
-      type='button'
-      {...bodyDrag.handleProps}
-      onClick={(e) => {
-        e.stopPropagation(); // the lane behind also listens (deselect/seek)
-        onSelect();
-      }}
-      aria-label={`Clip ${clip.name}`}
-      aria-pressed={selected}
-      className={cn(
-        'group absolute inset-y-1 z-10 flex flex-col overflow-hidden rounded-md border p-0 text-left',
-        'cursor-grab appearance-none active:cursor-grabbing',
-        selected && 'ring-2 ring-accent-solid ring-offset-1 ring-offset-background',
-      )}
-      style={{
-        ...bodyDrag.handleProps.style,
-        left: clipLeftPx(clip, zoomScale),
-        // 2px breathing room so butted clips stay visually distinct at high zoom
-        width: Math.max(8, clipWidthPx(clip, zoomScale) - 2),
-        borderColor: `var(--${token})`,
-        background: `color-mix(in srgb, var(--${token}) 30%, var(--background))`,
-      }}
-    >
-      {/* Media (filmstrip / waveform) fills the whole clip — labels ride ON TOP
-          as overlays so thumbnails read as pictures, not a sliver under a bar. */}
-      {children && <div className='pointer-events-none absolute inset-0'>{children}</div>}
-      <div className='pointer-events-none relative z-1 flex items-center gap-1 px-1.5 pt-0.5'>
-        <span className='truncate rounded bg-background/70 px-1 text-caption font-medium text-foreground'>
-          {clip.name}
-        </span>
-        {clip.speed !== 1 && (
-          <span className='inline-flex shrink-0 items-center gap-0.5 rounded bg-background/80 px-1 text-caption text-foreground'>
-            <Zap aria-hidden className='size-2.5' />
-            {clip.speed}x
-          </span>
-        )}
-      </div>
-      <div className='pointer-events-none relative z-1 mt-auto w-fit rounded-tr bg-background/60 px-1.5 text-caption text-muted-foreground'>
-        {formatTimecode(clip.trackIn)}–{formatTimecode(clip.trackOut)}
-      </div>
-
-      {/* Trim handles — visible on hover/selection; hit area wider than the visual bar. */}
-      <div
-        {...startDrag.handleProps}
-        className={cn(
-          'absolute inset-y-0 -left-1 z-20 flex w-4 cursor-ew-resize items-stretch justify-start',
-          'opacity-0 transition-opacity group-hover:opacity-100',
-          selected && 'opacity-100',
-        )}
-        style={startDrag.handleProps.style}
-        aria-hidden
-      >
-        <div className='ml-1 w-1.5 rounded-sm bg-foreground/40' />
-      </div>
-      <div
-        {...endDrag.handleProps}
-        className={cn(
-          'absolute inset-y-0 -right-1 z-20 flex w-4 cursor-ew-resize items-stretch justify-end',
-          'opacity-0 transition-opacity group-hover:opacity-100',
-          selected && 'opacity-100',
-        )}
-        style={endDrag.handleProps.style}
-        aria-hidden
-      >
-        <div className='mr-1 w-1.5 rounded-sm bg-foreground/40' />
-      </div>
-    </button>
-  );
-}

package/src/react/timeline/Playhead.tsx

@@ -1,63 +0,0 @@
-import { pxToSeconds, secondsToPx } from 'cwip/timeline';
-import { useRef } from 'react';
-import { usePointerDrag } from '../hooks/usePointerDrag';
-
-export interface PlayheadProps {
-  timeSeconds: number;
-  zoomScale: number;
-  /** Drag the head to scrub; omit for a display-only playhead. */
-  onScrub?: (seconds: number) => void;
-  onScrubStart?: () => void;
-  onScrubEnd?: () => void;
-}
-
-/**
- * The vertical playhead overlay (line + grab knob). Positioned absolutely in a
- * `relative` container spanning the timeline's full scroll width. The knob is
- * the drag target; the line itself stays click-through so clips underneath
- * remain selectable.
- */
-export function Playhead({
-  timeSeconds,
-  zoomScale,
-  onScrub,
-  onScrubStart,
-  onScrubEnd,
-}: PlayheadProps) {
-  const originSeconds = useRef(0);
-  const drag = usePointerDrag({
-    onStart: () => {
-      originSeconds.current = timeSeconds;
-      onScrubStart?.();
-    },
-    onMove: ({ dx }) => {
-      onScrub?.(Math.max(0, originSeconds.current + pxToSeconds(dx, zoomScale)));
-    },
-    onEnd: () => onScrubEnd?.(),
-    disabled: !onScrub,
-  });
-
-  return (
-    <div
-      className='pointer-events-none absolute inset-y-0 z-20'
-      style={{ left: secondsToPx(timeSeconds, zoomScale) }}
-    >
-      <div className='absolute inset-y-0 w-px bg-destructive' />
-      {onScrub && (
-        <div
-          {...drag.handleProps}
-          role='slider'
-          aria-label='Playhead'
-          aria-valuemin={0}
-          aria-valuemax={Number.MAX_SAFE_INTEGER}
-          aria-valuenow={Math.round(timeSeconds)}
-          tabIndex={0}
-          className='pointer-events-auto absolute -top-1 -left-[11px] flex h-6 w-[23px] cursor-ew-resize items-start justify-center'
-          style={drag.handleProps.style}
-        >
-          <div className='h-3 w-3 rounded-full border border-background bg-destructive shadow' />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/react/timeline/TimeRuler.tsx

@@ -1,85 +0,0 @@
-import { pxToSeconds, rulerTicks, secondsToPx } from 'cwip/timeline';
-import { useRef } from 'react';
-import { formatTimecode } from '../../core/media';
-import { usePointerDrag } from '../hooks/usePointerDrag';
-import { cn } from '../lib/cn';
-
-export interface TimeRulerProps {
-  /** Ruler length (seconds) — usually total duration + some tail slack. */
-  durationSeconds: number;
-  zoomScale: number;
-  /** Click/drag anywhere on the ruler seeks (a scrub). */
-  onScrub: (seconds: number) => void;
-  /** Fires on pointer-down / pointer-up of a ruler scrub so the owner can
-   * suppress live playback while the gesture owns the playhead (parity with the
-   * draggable playhead knob). */
-  onScrubStart?: () => void;
-  onScrubEnd?: () => void;
-  /** Current playhead time — announced as the slider value. */
-  currentTimeSeconds?: number;
-  className?: string;
-}
-
-/**
- * The clickable time ruler. Tick density self-adjusts with zoom (labels never
- * crowd below ~60px apart); pointer down + drag scrubs continuously.
- */
-export function TimeRuler({
-  durationSeconds,
-  zoomScale,
-  onScrub,
-  onScrubStart,
-  onScrubEnd,
-  currentTimeSeconds = 0,
-  className,
-}: TimeRulerProps) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const seekAtClientX = (clientX: number) => {
-    const rect = ref.current?.getBoundingClientRect();
-    if (!rect) return;
-    const seconds = pxToSeconds(clientX - rect.left, zoomScale);
-    onScrub(Math.min(durationSeconds, Math.max(0, seconds)));
-  };
-
-  const drag = usePointerDrag({
-    onStart: (e) => {
-      onScrubStart?.();
-      seekAtClientX(e.clientX);
-    },
-    onMove: ({ event }) => seekAtClientX(event.clientX),
-    onEnd: () => onScrubEnd?.(),
-  });
-
-  const ticks = rulerTicks(durationSeconds, zoomScale);
-
-  return (
-    <div
-      ref={ref}
-      {...drag.handleProps}
-      className={cn(
-        'relative h-7 min-h-7 cursor-ew-resize select-none border-b border-border bg-muted/40',
-        className,
-      )}
-      style={{ ...drag.handleProps.style, width: secondsToPx(durationSeconds, zoomScale) }}
-      role='slider'
-      aria-label='Timeline position'
-      aria-valuemin={0}
-      aria-valuemax={Math.round(durationSeconds)}
-      aria-valuenow={Math.min(Math.round(durationSeconds), Math.round(currentTimeSeconds))}
-      tabIndex={0}
-    >
-      {ticks.map((t) => (
-        <div
-          key={t}
-          className='absolute top-0 h-full border-l border-border/70'
-          style={{ left: secondsToPx(t, zoomScale) }}
-        >
-          <span className='pl-1 text-caption leading-7 text-muted-foreground'>
-            {formatTimecode(t)}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/react/timeline/TimelineSurface.tsx

@@ -1,157 +0,0 @@
-import {
-  clampZoom,
-  secondsToPx,
-  type TimelineTrack,
-  totalDuration,
-  ZOOM_RANGE,
-  zoomAnchoredScrollLeft,
-} from 'cwip/timeline';
-import { Minus, Plus } from 'lucide-react';
-import { type ReactNode, useEffect, useRef } from 'react';
-import { IconButton } from '../components/IconButton';
-import { ScrollArea } from '../components/ScrollArea';
-import { Slider } from '../components/Slider';
-import { Tooltip } from '../components/Tooltip';
-import { cn } from '../lib/cn';
-import { Playhead } from './Playhead';
-import { TimeRuler } from './TimeRuler';
-
-export interface TimelineSurfaceProps {
-  tracks: TimelineTrack[];
-  zoomScale: number;
-  currentTime: number;
-  onScrub: (seconds: number) => void;
-  onScrubStart?: () => void;
-  onScrubEnd?: () => void;
-  /** Zoom changes arrive pre-clamped; scroll is re-anchored on the playhead. */
-  onZoomChange?: (zoomScale: number) => void;
-  /** Renders each track's lane (TrackLane + ClipViews) — the owner wires ops. */
-  renderTrack: (track: TimelineTrack, durationSeconds: number) => ReactNode;
-  /** Extra tail beyond the last clip so there's room to drop/extend (default 10s). */
-  tailSeconds?: number;
-  /** Auto-scroll so the playhead stays in view as `currentTime` advances (e.g. during
-   * playback) — once it nears the viewport edge, the view pages forward to keep it
-   * visible, rather than scrolling every frame. */
-  followPlayhead?: boolean;
-  className?: string;
-}
-
-/**
- * The composed timeline scroller: ruler + track lanes + playhead in one
- * horizontally-scrolling keyboard-inset-safe surface (ScrollArea — no raw
- * overflow), with zoom controls that keep the playhead visually anchored.
- * Fully controlled; owns NO timeline state.
- */
-export function TimelineSurface({
-  tracks,
-  zoomScale,
-  currentTime,
-  onScrub,
-  onScrubStart,
-  onScrubEnd,
-  onZoomChange,
-  renderTrack,
-  tailSeconds = 10,
-  followPlayhead = false,
-  className,
-}: TimelineSurfaceProps) {
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const durationSeconds = totalDuration(tracks) + tailSeconds;
-
-  useEffect(() => {
-    if (!followPlayhead) return;
-    const el = scrollRef.current;
-    if (!el) return;
-    const playheadPx = secondsToPx(currentTime, zoomScale);
-    const viewportX = playheadPx - el.scrollLeft;
-    // Only page the view forward/back once the playhead nears an edge — scrolling every
-    // frame during playback would fight the user's ability to glance elsewhere.
-    const margin = el.clientWidth * 0.1;
-    if (viewportX < margin || viewportX > el.clientWidth - margin) {
-      el.scrollLeft = Math.max(0, playheadPx - el.clientWidth * 0.2);
-    }
-  }, [followPlayhead, currentTime, zoomScale]);
-
-  const changeZoom = (next: number) => {
-    if (!onZoomChange) return;
-    const clamped = clampZoom(next);
-    const el = scrollRef.current;
-    if (el) {
-      const anchorViewportPx = secondsToPx(currentTime, zoomScale) - el.scrollLeft;
-      // after the re-render at the new zoom, restore the playhead's viewport x
-      requestAnimationFrame(() => {
-        el.scrollLeft = zoomAnchoredScrollLeft(currentTime, anchorViewportPx, clamped);
-      });
-    }
-    onZoomChange(clamped);
-  };
-
-  return (
-    <div className={cn('flex flex-col', className)}>
-      {onZoomChange && (
-        <div className='flex items-center justify-end gap-2 border-b border-border px-2 py-1'>
-          <Tooltip content='Zoom out'>
-            <IconButton
-              label='Zoom out'
-              onClick={() => changeZoom(zoomScale / 1.4)}
-              disabled={zoomScale <= ZOOM_RANGE.min}
-            >
-              <Minus aria-hidden className='size-4' />
-            </IconButton>
-          </Tooltip>
-          <Slider
-            value={zoomScale}
-            min={ZOOM_RANGE.min}
-            max={ZOOM_RANGE.max}
-            // A coarse step of 1 would swallow the whole low end (0.05–1) in a single
-            // increment, making the zoomed-out-enough-to-fit-a-long-clip range
-            // unreachable by dragging — 0.5 keeps that end usable too.
-            step={0.5}
-            aria-label='Timeline zoom'
-            className='w-24'
-            onChange={changeZoom}
-          />
-          <span className='w-14 text-center text-caption tabular-nums text-muted-foreground'>
-            {Math.round(zoomScale)} px/s
-          </span>
-          <Tooltip content='Zoom in'>
-            <IconButton
-              label='Zoom in'
-              onClick={() => changeZoom(zoomScale * 1.4)}
-              disabled={zoomScale >= ZOOM_RANGE.max}
-            >
-              <Plus aria-hidden className='size-4' />
-            </IconButton>
-          </Tooltip>
-        </div>
-      )}
-      <ScrollArea axis='x' space='none' scrollRef={scrollRef} className='grow'>
-        <div className='relative w-max min-w-full'>
-          {/* ruler is offset by the sticky lane-header width so times align */}
-          <div className='ml-28'>
-            <TimeRuler
-              durationSeconds={durationSeconds}
-              zoomScale={zoomScale}
-              currentTimeSeconds={currentTime}
-              onScrub={onScrub}
-              onScrubStart={onScrubStart}
-              onScrubEnd={onScrubEnd}
-            />
-          </div>
-          {tracks.map((track) => renderTrack(track, durationSeconds))}
-          <div className='pointer-events-none absolute inset-y-0 left-28 right-0'>
-            <div className='relative h-full'>
-              <Playhead
-                timeSeconds={currentTime}
-                zoomScale={zoomScale}
-                onScrub={onScrub}
-                onScrubStart={onScrubStart}
-                onScrubEnd={onScrubEnd}
-              />
-            </div>
-          </div>
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}

package/src/react/timeline/TrackLane.tsx

@@ -1,87 +0,0 @@
-import { pxToSeconds, secondsToPx, type TimelineTrack } from 'cwip/timeline';
-import { AudioLines, Film } from 'lucide-react';
-import type { DragEvent, ReactNode } from 'react';
-import { useRef } from 'react';
-import { cn } from '../lib/cn';
-
-export const TRACK_LANE_HEIGHT_PX = 108;
-
-export interface TrackLaneProps {
-  track: TimelineTrack;
-  zoomScale: number;
-  /** Lane runway width (seconds) — the surface passes one shared duration. */
-  durationSeconds: number;
-  /** Rendered `ClipView`s (the owner maps clips so it controls the wiring). */
-  children: ReactNode;
-  /** Lane height in px (default {@link TRACK_LANE_HEIGHT_PX}). Owners can shrink
-   * a rarely-used lane (e.g. an empty audio track) and grow it once it holds a
-   * clip, so unused lanes don't waste vertical space. */
-  laneHeightPx?: number;
-  /** Click on empty runway — typically seek + deselect. */
-  onRunwayClick?: (seconds: number) => void;
-  /** A `dataTransfer` drop on the runway (asset from a library/palette). */
-  onDropData?: (payload: { atSeconds: number; dataTransfer: DataTransfer }) => void;
-  className?: string;
-}
-
-/**
- * One track row: a sticky header (name + kind icon) and the clip runway. The
- * runway is the `relative` positioning context `ClipView`s place themselves
- * in, and the drop target for library assets (drop position is reported in
- * SECONDS, scroll offset already accounted for via the runway's own rect).
- */
-export function TrackLane({
-  track,
-  zoomScale,
-  durationSeconds,
-  children,
-  laneHeightPx = TRACK_LANE_HEIGHT_PX,
-  onRunwayClick,
-  onDropData,
-  className,
-}: TrackLaneProps) {
-  const runwayRef = useRef<HTMLDivElement>(null);
-
-  const secondsAt = (clientX: number): number => {
-    const rect = runwayRef.current?.getBoundingClientRect();
-    if (!rect) return 0;
-    return Math.max(0, pxToSeconds(clientX - rect.left, zoomScale));
-  };
-
-  const onDrop = (e: DragEvent) => {
-    if (!onDropData) return;
-    e.preventDefault();
-    onDropData({ atSeconds: secondsAt(e.clientX), dataTransfer: e.dataTransfer });
-  };
-
-  return (
-    <div
-      className={cn('flex border-b border-border/60 transition-[min-height]', className)}
-      style={{ minHeight: laneHeightPx }}
-    >
-      <div className='sticky left-0 z-30 flex w-28 shrink-0 items-center gap-1.5 border-r border-border bg-muted/60 px-2 backdrop-blur-sm'>
-        {track.type === 'video' ? (
-          <Film aria-hidden className='size-3.5 text-muted-foreground' />
-        ) : (
-          <AudioLines aria-hidden className='size-3.5 text-muted-foreground' />
-        )}
-        <span className='truncate text-xs text-foreground'>{track.name}</span>
-      </div>
-      {/* biome-ignore lint/a11y/useKeyWithClickEvents: seek-on-click pointer convenience — the ruler is the accessible seek control */}
-      {/* biome-ignore lint/a11y/noStaticElementInteractions: same — decorative runway, real controls live on the clips/ruler */}
-      <div
-        ref={runwayRef}
-        className='relative'
-        style={{ width: secondsToPx(durationSeconds, zoomScale) }}
-        onClick={(e) => onRunwayClick?.(secondsAt(e.clientX))}
-        onDragOver={(e) => {
-          if (onDropData) e.preventDefault(); // required for `drop` to fire
-        }}
-        onDrop={onDrop}
-        data-track-id={track.id}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

package/src/react/timeline/index.ts

@@ -1,12 +0,0 @@
-// cursedbelt/react/timeline — the generic multi-track timeline editor surface.
-// Controlled/presentational components over the cwip/timeline engine: they
-// translate pixels to seconds and report INTENT (select/move/trim/scrub); the
-// owner applies cwip ops (clamping, ripple, snapping) and passes state back
-// down. Reusable for any lane-based editor (video NLE, audio arrangement,
-// schedule lanes) — the cursedshell video-editor plugin is the reference user.
-
-export { ClipView, type ClipViewProps, type TrimEdge } from './ClipView';
-export { Playhead, type PlayheadProps } from './Playhead';
-export { TimelineSurface, type TimelineSurfaceProps } from './TimelineSurface';
-export { TimeRuler, type TimeRulerProps } from './TimeRuler';
-export { TRACK_LANE_HEIGHT_PX, TrackLane, type TrackLaneProps } from './TrackLane';