cursedbelt 1.0.0 → 2.5.0

package/src/react/canvas/lod.ts

@@ -1,53 +0,0 @@
-/**
- * Adaptive level of detail for an infinite canvas.
- *
- * `DESIGN.md` §7: *"Large-scale interactive graphs … must not render full textual
- * strings when zoomed out past 50%. Dynamically scale down information density:
- * collapse names or details entirely, displaying only clean geometric glyph nodes
- * or color-coded markers until zoomed in or hovered over."*
- *
- * `UX_STANDARDS.md` §3.1–§3.2 states the same thing as a principle — *"zooming out
- * changes the DESIGN, not the scale"* — and nothing in the fleet implemented it, so
- * every canvas shrinks its text into illegible grey fur instead. This is the shared
- * decision, kept as a pure function because the interesting part is the THRESHOLDS
- * and those must be identical in the tree, the atlas and the orch lanes.
- */
-
-/**
- * `full`    — name plus its secondary line, portraits, badges.
- * `compact` — the name only, at the node's own size.
- * `glyph`   — no text at all: a geometric marker, coloured by category. Labels
- *             come back on hover/focus, which is what keeps this navigable.
- */
-export type CanvasLod = 'full' | 'compact' | 'glyph';
-
-export interface LodThresholds {
-  /** At or above this zoom, everything is drawn. Default 0.75. */
-  full?: number;
-  /** At or above this zoom, the name survives. Default 0.5 — DESIGN.md §7's line. */
-  compact?: number;
-}
-
-/** The level of detail a canvas should draw at `zoom` (1 = 100%). */
-export function lodForZoom(zoom: number, thresholds: LodThresholds = {}): CanvasLod {
-  const full = thresholds.full ?? 0.75;
-  const compact = thresholds.compact ?? 0.5;
-  if (!Number.isFinite(zoom)) return 'full';
-  if (zoom >= full) return 'full';
-  if (zoom >= compact) return 'compact';
-  return 'glyph';
-}
-
-/** Whether a node at this level of detail should render any text at all. */
-export const lodShowsText = (lod: CanvasLod): boolean => lod !== 'glyph';
-
-/** Whether a node at this level of detail should render its secondary line. */
-export const lodShowsDetail = (lod: CanvasLod): boolean => lod === 'full';
-
-/**
- * A hovered or focused node always renders its label, whatever the zoom — that is
- * the "until zoomed in OR HOVERED over" half of the clause, and it is the thing
- * that keeps a glyph field usable rather than merely pretty.
- */
-export const lodForNode = (zoom: number, active: boolean, thresholds?: LodThresholds): CanvasLod =>
-  active ? 'full' : lodForZoom(zoom, thresholds);

package/src/react/seo/HeadProvider.tsx

@@ -1,67 +0,0 @@
-import type { HeadModel } from 'cwip/seo';
-import { createContext, type ReactNode, useContext, useEffect, useMemo } from 'react';
-import { applyHeadToDocument } from './applyHeadToDocument';
-
-export interface HeadProviderConfig {
-  // Applied under every route's model unless the route overrides the same field
-  // (route wins — see `useHead`).
-  default?: HeadModel;
-  siteUrl?: string;
-  titleTemplate?: string;
-}
-
-const HeadContext = createContext<HeadProviderConfig>({});
-
-export interface HeadProviderProps extends HeadProviderConfig {
-  children?: ReactNode;
-}
-
-// Provides the site-wide SEO defaults (base head + siteUrl + title template) that
-// every `useHead` call merges under its own model. Mount once near the app root.
-// Read the site-wide SEO config supplied by the nearest `HeadProvider` (siteUrl,
-// title template, base head). Returns `{}` when no provider is mounted, so a
-// consumer can fall back (e.g. to `window.location.origin`) without crashing.
-export const useHeadConfig = (): HeadProviderConfig => useContext(HeadContext);
-
-export const HeadProvider = ({ children, ...config }: HeadProviderProps) => {
-  const value = useMemo<HeadProviderConfig>(
-    () => ({
-      default: config.default,
-      siteUrl: config.siteUrl,
-      titleTemplate: config.titleTemplate,
-    }),
-    [config.default, config.siteUrl, config.titleTemplate],
-  );
-  return <HeadContext.Provider value={value}>{children}</HeadContext.Provider>;
-};
-
-const mergeHead = (
-  base: HeadModel | undefined,
-  model: HeadModel,
-  titleTemplate?: string,
-): HeadModel => ({
-  titleTemplate,
-  ...base,
-  ...model,
-});
-
-// Reconciles `document.head` for the CURRENT route. Merges the provider's default
-// head with `model` (model wins field-by-field), then applies it imperatively on
-// mount/update. SSR-safe — a no-op when `document` is unavailable.
-//
-// Multi-caller semantics (last-writer-wins): if more than one component calls
-// `useHead` while mounted at once, the effect that (re)runs LAST wins — its model
-// fully replaces the previously-applied managed tags, because `applyHeadToDocument`
-// removes any managed tag not present in the new render. Design routes so exactly
-// one component per active route calls `useHead`; a nested component that also
-// calls it will overwrite the route's head on every one of its own re-renders.
-export const useHead = (model: HeadModel): void => {
-  const config = useContext(HeadContext);
-  const merged = mergeHead(config.default, model, config.titleTemplate);
-  const serialized = JSON.stringify(merged);
-
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    applyHeadToDocument(JSON.parse(serialized) as HeadModel);
-  }, [serialized]);
-};

package/src/react/seo/applyHeadToDocument.ts

@@ -1,73 +0,0 @@
-import { type HeadModel, renderHead, SEO_TAG_MARKER } from 'cwip/seo';
-
-// Applies a HeadModel to a live document: sets `document.title` and upserts the
-// managed <meta>/<link>/<script type="application/ld+json"> tags into <head>. Every
-// tag it creates or updates carries SEO_TAG_MARKER so a later call can find and
-// replace its own tags without ever touching app-authored markup, and so it can
-// remove a managed tag that is no longer present in the new model. Idempotent:
-// calling twice with the same model produces the same DOM, never duplicates.
-//
-// Built directly on cwip's `renderHead` output (a string of tags) so the client
-// reconciler and every other delivery mechanism (prerender/edge/server) stay in
-// sync on exactly what a HeadModel renders to — this module only does the DOM
-// diffing, not the serialization.
-export const applyHeadToDocument = (model: HeadModel, doc: Document = document): void => {
-  const html = renderHead(model, { marker: true });
-  const template = doc.createElement('template');
-  template.innerHTML = html;
-  const nextNodes = Array.from(template.content.childNodes).filter(
-    (node): node is Element => node.nodeType === 1,
-  );
-
-  const title = nextNodes.find((node) => node.tagName === 'TITLE');
-  doc.title = title?.textContent ?? doc.title;
-
-  const previouslyManaged = Array.from(doc.head.querySelectorAll(`[${SEO_TAG_MARKER}]`));
-  const stillPresent = new Set<Element>();
-
-  for (const node of nextNodes) {
-    if (node.tagName === 'TITLE') continue; // handled via doc.title above
-    const match = previouslyManaged.find(
-      (existing) => !stillPresent.has(existing) && isSameTag(existing, node),
-    );
-    if (match) {
-      copyAttributes(match, node);
-      match.textContent = node.textContent;
-      stillPresent.add(match);
-    } else {
-      const clone = node.cloneNode(true) as Element;
-      doc.head.appendChild(clone);
-      stillPresent.add(clone);
-    }
-  }
-
-  for (const existing of previouslyManaged) {
-    if (!stillPresent.has(existing)) existing.remove();
-  }
-};
-
-// Two tags are "the same" managed tag if they share a tag name and identifying key
-// (meta name/property, link rel+href, or — for scripts/title — just the tag name,
-// since a HeadModel carries at most one <title> and callers rarely emit more than
-// one ld+json script; multiple ld+json blocks are matched positionally by falling
-// through to a fresh append once earlier ones are claimed).
-const isSameTag = (a: Element, b: Element): boolean => {
-  if (a.tagName !== b.tagName) return false;
-  if (a.tagName === 'META') {
-    return (
-      identity(a, 'name') === identity(b, 'name') &&
-      identity(a, 'property') === identity(b, 'property')
-    );
-  }
-  if (a.tagName === 'LINK') {
-    return identity(a, 'rel') === identity(b, 'rel') && identity(a, 'href') === identity(b, 'href');
-  }
-  return true; // SCRIPT (ld+json) — matched positionally among managed scripts
-};
-
-const identity = (el: Element, attr: string): string => el.getAttribute(attr) ?? '';
-
-const copyAttributes = (target: Element, source: Element): void => {
-  for (const attr of Array.from(target.attributes)) target.removeAttribute(attr.name);
-  for (const attr of Array.from(source.attributes)) target.setAttribute(attr.name, attr.value);
-};

package/src/react/seo/index.ts

@@ -1,12 +0,0 @@
-// cursedbelt/react/seo — a tiny, react-helmet-style head manager keyed to cwip's
-// `HeadModel`. `HeadProvider` supplies site-wide defaults; a route calls `useHead`
-// once to own `document.head` for as long as it's mounted. Dedicated subpath so an
-// app that never touches SEO pays nothing for it.
-export { applyHeadToDocument } from './applyHeadToDocument';
-export {
-  HeadProvider,
-  type HeadProviderConfig,
-  type HeadProviderProps,
-  useHead,
-  useHeadConfig,
-} from './HeadProvider';

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>
-  );
-}