webpacked · webpacked · Mar 7, 2026 · Mar 7, 2026 · Mar 7, 2026 · Mar 7, 2026
diff --git a/.changeset/add-phase-1-complete.md b/.changeset/add-phase-1-complete.md
@@ -1,7 +1,7 @@
 ---
-"@timeline/core": minor
-"@timeline/react": minor
-"@timeline/ui": minor
+"@webpacked-timeline/core": minor
+"@webpacked-timeline/react": minor
+"@webpacked-timeline/ui": minor
 ---
 
 Phase 1 complete: headless NLE engine core with transaction-based dispatcher, snap index, ITool contract, ProvisionalState ghost layer, React hooks with selector isolation, and rAF-throttled tool router.
diff --git a/.changeset/add-phase-2-tools.md b/.changeset/add-phase-2-tools.md
@@ -1,6 +1,6 @@
 ---
-"@timeline/core": minor
-"@timeline/react": minor
+"@webpacked-timeline/core": minor
+"@webpacked-timeline/react": minor
 ---
 
 Phase 2 complete: 8 core editing tools (SelectionTool, RazorTool, RippleTrimTool, RollTrimTool, SlipTool, RippleDeleteTool, RippleInsertTool, HandTool). Rolling-state dispatcher validation. MOVE_CLIP ordering rule. ProvisionalState rubber-band extension.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -4,7 +4,7 @@
   "commit": false,
   "fixed": [],
   "linked": [
-    ["@timeline/core", "@timeline/react", "@timeline/ui"]
+    ["@webpacked-timeline/core", "@webpacked-timeline/react", "@webpacked-timeline/ui"]
   ],
   "access": "public",
   "baseBranch": "main",

diff --git a/.changeset/phase-3-complete.md b/.changeset/phase-3-complete.md
@@ -1,7 +1,7 @@
 ---
-"@timeline/core": minor
-"@timeline/react": minor
-"@timeline/ui": minor
+"@webpacked-timeline/core": minor
+"@webpacked-timeline/react": minor
+"@webpacked-timeline/ui": minor
 ---
 
 Phase 3 complete: Markers, in/out points, beat grid, generators, captions, SRT/VTT import. Marker search API. Caption model completeness (EDIT_CAPTION partial updates, overlap invariant).
diff --git a/.changeset/phase-4-complete.md b/.changeset/phase-4-complete.md
@@ -1,7 +1,7 @@
 ---
-"@timeline/core": minor
-"@timeline/react": minor
-"@timeline/ui": minor
+"@webpacked-timeline/core": minor
+"@webpacked-timeline/react": minor
+"@webpacked-timeline/ui": minor
 ---
 
 Phase 4: Effects, keyframes, transitions, track groups, link groups, and two new tools (TransitionTool, KeyframeTool).
diff --git a/.changeset/phase-6-complete.md b/.changeset/phase-6-complete.md
@@ -1,6 +1,6 @@
 ---
-"@timeline/core": minor
-"@timeline/react": minor
+"@webpacked-timeline/core": minor
+"@webpacked-timeline/react": minor
 ---
 
 Phase 6: Playback engine — PlayheadController, pipeline contracts, seek API, J/K/L keyboard, loop regions, usePlayhead hook.
diff --git a/.changeset/phase-7-complete.md b/.changeset/phase-7-complete.md
@@ -1,5 +1,5 @@
 ---
-"@timeline/core": minor
+"@webpacked-timeline/core": minor
 ---
 
 Phase 7: Performance and scale — interval tree, virtual rendering, transaction compression, history persistence, worker contracts, SlideTool, ZoomTool. Feature complete.
diff --git a/.changeset/phase-r-complete.md b/.changeset/phase-r-complete.md
@@ -0,0 +1,6 @@
+---
+"@webpacked-timeline/react": minor
+"@webpacked-timeline/core": patch
+---
+
+Phase R: @webpacked-timeline/react complete — TimelineEngine orchestrator, 13 hooks with selector isolation, ToolRouter with rAF throttle, virtual rendering hooks, full integration test suite.
diff --git a/.changeset/phase-u-complete.md b/.changeset/phase-u-complete.md
@@ -0,0 +1,5 @@
+---
+"@webpacked-timeline/ui": minor
+---
+
+Phase U: @webpacked-timeline/ui complete — shadcn-style CLI, 16 components across 5 tiers, 2 themes, shared utilities, full rendering contract. Feature complete.
diff --git a/.claude/skills/ARCHITECTURE.md b/.claude/skills/ARCHITECTURE.md
@@ -9,13 +9,13 @@
 
 ```
 packages/core   →  imports nothing outside core stdlib + TypeScript
-packages/react  →  imports @timeline/core + React only
-packages/ui     →  imports @timeline/react + @timeline/core + React only
+packages/react  →  imports @webpacked-timeline/core + React only
+packages/ui     →  imports @webpacked-timeline/react + @webpacked-timeline/core + React only
 ```
 
 Lower layers NEVER import from higher layers. A `packages/core` file that imports
 `React`, `ReactDOM`, `requestAnimationFrame`, `document`, or anything from
-`@timeline/react` or `@timeline/ui` is **categorically wrong** — reject it.
+`@webpacked-timeline/react` or `@webpacked-timeline/ui` is **categorically wrong** — reject it.
 
 ## Rule 2 — One Entry Point for Mutation
 

diff --git a/.claude/skills/adapter/HOOKS.md b/.claude/skills/adapter/HOOKS.md
@@ -54,13 +54,13 @@ function useClip(id: ClipId) {
 
 ---
 
-## Hooks Never Import from @timeline/core Directly
+## Hooks Never Import from @webpacked-timeline/core Directly
 
 All calls go through the `TimelineEngine` adapter class. Hooks never call `dispatch()` directly.
 
 ```typescript
 // ❌
-import { dispatch } from "@timeline/core";
+import { dispatch } from "@webpacked-timeline/core";
 
 // ✅
 const { engine } = useTimelineContext();
@@ -167,6 +167,6 @@ function ClipShell({ id }: { id: ClipId }) {
 
 ## Common mistakes to avoid
 
-- Importing `dispatch` from `@timeline/core` inside a hook — always call `engine.dispatch()`
+- Importing `dispatch` from `@webpacked-timeline/core` inside a hook — always call `engine.dispatch()`
 - Using `useEffect` + `useState` to mirror engine state — use `useSyncExternalStore` always
 - Subscribing to `engine.getState` (entire state snapshot) — always write a scoped selector
diff --git a/.claude/skills/tools/ITOOL_CONTRACT.md b/.claude/skills/tools/ITOOL_CONTRACT.md
@@ -154,7 +154,7 @@ import type {
   TimelinePointerEvent,
   TimelineKeyEvent,
   ProvisionalState,
-} from "@timeline/core";
+} from "@webpacked-timeline/core";
 
 class NoOpTool implements ITool {
   readonly id = "no-op" as ToolId;
@@ -186,7 +186,7 @@ Use `NoOpTool` as a base for unit tests that need an `ITool` but don't care abou
 
 ```typescript
 import { describe, it, expect } from "vitest";
-import { dispatch } from "@timeline/core";
+import { dispatch } from "@webpacked-timeline/core";
 
 it("MoveTool produces correct MOVE_CLIP transaction", () => {
   const tool = new MoveTool();
@@ -399,7 +399,7 @@ packages/react/src/tests/
 ```
 
 Unit tests live in core. Integration tests live in react.
-A tool test that imports anything from `@timeline/react` is wrong.
+A tool test that imports anything from `@webpacked-timeline/react` is wrong.
 
 ---
 

diff --git a/.claude/skills/ui/COMPONENTS.md b/.claude/skills/ui/COMPONENTS.md
@@ -3,18 +3,18 @@
 
 ---
 
-# COMPONENTS — @timeline/ui Rules
+# COMPONENTS — @webpacked-timeline/ui Rules
 
 ## Critical Rule
 
-**No component imports from `@timeline/core` directly.** No component calls `dispatch()` directly. State flows in through hooks only.
+**No component imports from `@webpacked-timeline/core` directly.** No component calls `dispatch()` directly. State flows in through hooks only.
 
 ```typescript
 // ❌ WRONG
-import { dispatch, findClipById } from "@timeline/core";
+import { dispatch, findClipById } from "@webpacked-timeline/core";
 
 // ✅ CORRECT
-import { useClip, useTimeline } from "@timeline/react";
+import { useClip, useTimeline } from "@webpacked-timeline/react";
 ```
 
 ---
@@ -102,7 +102,7 @@ function TrackRow({ id }: { id: TrackId }) {
 
 ## What Components Do NOT Do
 
-- ❌ Import from `@timeline/core` directly
+- ❌ Import from `@webpacked-timeline/core` directly
 - ❌ Call `dispatch()` directly
 - ❌ Implement drag logic (that belongs in `packages/react/tools/`)
 - ❌ Keep a `useState` copy of clip data

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -24,10 +24,10 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Type check
-        run: pnpm --filter @timeline/core exec tsc --noEmit
+        run: pnpm --filter @webpacked-timeline/core exec tsc --noEmit
 
       - name: Test
-        run: pnpm --filter @timeline/core test --run
+        run: pnpm --filter @webpacked-timeline/core test --run
 
       - name: Build
-        run: pnpm --filter @timeline/core build
+        run: pnpm --filter @webpacked-timeline/core build
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,7 +14,7 @@ _No unreleased changes._
 
 ## [0.0.1] — Phase 0 Complete
 
-### @timeline/core
+### @webpacked-timeline/core
 
 #### Added
 - FrameRate discriminated union
@@ -31,7 +31,7 @@ _No unreleased changes._
 
 ## [0.1.0] — Phase 1 Complete
 
-### @timeline/core
+### @webpacked-timeline/core
 
 #### Added
 - Tool scaffolding: ITool interface, ToolContext, ToolRegistry
@@ -44,7 +44,7 @@ _No unreleased changes._
 
 ## [0.2.0] — Phase 2 Complete
 
-### @timeline/core
+### @webpacked-timeline/core
 
 #### Added
 - SelectionTool (click, drag, multi-drag, rubber-band)
@@ -65,7 +65,7 @@ _No unreleased changes._
 
 ## [0.3.0] — Phase 3 Complete — February 27, 2025
 
-### @timeline/core
+### @webpacked-timeline/core
 
 #### Added
 
@@ -140,6 +140,138 @@ _No unreleased changes._
 
 ---
 
+## [0.8.0] — Phase U Complete — February 27, 2025
+
+### Added (@webpacked-timeline/ui)
+
+**CLI**
+- `npx @webpacked-timeline/ui add <component>` — copies
+  components into your project
+- `npx @webpacked-timeline/ui add --preset=<name>` —
+  install curated bundles
+- `npx @webpacked-timeline/ui list` — show all components
+  with install status
+- `npx @webpacked-timeline/ui diff <component>` —
+  show changes vs registry
+- `npx @webpacked-timeline/ui update <component>` —
+  update with diff preview + confirmation
+- Theme install: `add theme --theme=dark-pro`
+- Manifest tracking: `.timeline-ui.json`
+- Registry dependency resolution (topological)
+
+**Theme system**
+- `dark-pro` theme (DaVinci-inspired default)
+- `light` theme (Final Cut Pro-inspired)
+- 45+ CSS custom property tokens
+- Token naming: `--tl-{component}-{property}-{state}`
+
+**Shared utilities** (copied into _shared/)
+- `time.ts` — frameToPx, pxToFrame,
+  frameToTimecode, rulerTickInterval
+- `geometry.ts` — Rect, clamp, normalizeRect,
+  rectsOverlap
+- `use-drag.ts` — useDrag() hook with threshold
+- `use-snap.ts` — useSnap() hook via engine
+
+**Components**
+
+Tier 1 — Core:
+  timeline-root, track, clip, playhead, ruler
+
+Tier 2 — Editing:
+  toolbar, zoom-bar
+
+Tier 3 — Media:
+  waveform (canvas), thumbnail-strip, clip-label
+
+Tier 4 — Advanced:
+  effect-lane, keyframe-diamond,
+  transition-handle
+
+Tier 5 — Markers:
+  marker-pin, marker-range, in-out-handles
+
+**Rendering contract**
+- All components read engine via TimelineProvider
+- Zero hardcoded colors (CSS vars only)
+- Render prop escape hatches on all content
+  components
+- No local useState for canonical engine values
+- All mutations via engine.dispatch() only
+
+### Tests
+- 113 UI tests (CLI + components)
+- 1152+ total tests across monorepo
+- Registry integrity: all registered files
+  verified to exist
+
+---
+
+## [0.7.0] — Phase R Complete — February 27, 2025
+
+### Added (@webpacked-timeline/react)
+
+**TimelineEngine**
+- Full orchestrator wiring Dispatcher,
+  PlaybackEngine, ToolRouter, SnapIndexManager,
+  TrackIndex, HistoryStack, KeyboardHandler
+- `TimelineEngineOptions`: pipeline, clock,
+  historyLimit, compression, tools, callbacks
+- `EngineSnapshot`: state, provisional, playhead,
+  history, trackIds, cursor, change
+- `DEFAULT_PLAYHEAD_STATE` for edit-only mode
+- Playback events wired to snapshot rebuild
+  (usePlayheadFrame updates every rAF tick)
+- `handlePointerLeave` with Option Y pattern
+- `undo()` / `redo()` with full state sync
+
+**Hooks (13 total)**
+- `useTimeline(engine)` — timeline metadata
+- `useTrackIds(engine)` — stable track list
+- `useTrack(engine, id)` — single track
+- `useClip(engine, id)` — single clip,
+  provisional-first lookup
+- `useClips(engine, trackId)` — track clips
+- `useMarkers(engine)` — timeline markers
+- `useHistory(engine)` — canUndo/canRedo,
+  stable object reference
+- `useActiveToolId(engine)` — active tool
+- `useCursor(engine)` — CSS cursor string
+- `useProvisional(engine)` — ghost clip state
+- `usePlayheadFrame(engine)` — current frame,
+  updates every rAF tick during playback
+- `useIsPlaying(engine)` — playback state
+- `useChange(engine)` — StateChange diff
+- `usePlayhead(engine)` — full playhead state
+- `usePlayheadEvent(engine, type, handler)`
+- `useVirtualWindow(engine, w, s, ppf)`
+- `useVisibleClips(engine, window)`
+- `useToolRouter(engine, options)`
+
+**ToolRouter**
+- `createToolRouter()` — React pointer/key
+  event → TimelinePointerEvent/KeyEvent
+- rAF throttle on onPointerMove only
+- Option Y: pointerLeave → handlePointerUp
+  + handlePointerLeave + clearProvisional
+- `useToolRouter()` hook with stable ref
+
+**Selector isolation**
+- Proven: updating clip A does not re-render
+  component watching clip B (toBe test)
+- `historyFlags` cache prevents spurious
+  re-renders on unchanged undo/redo state
+- `stableTrackIds` only recreates on actual
+  track list change
+
+### Tests
+- Phase R adds 97 react tests
+- 1039 total tests across core + react
+- Integration suite: 27 tests covering
+  full dispatch→hook→re-render round-trips
+
+---
+
 ## [0.6.0] — Phase 7 Complete — February 27, 2025
 
 ### Added
@@ -292,7 +424,7 @@ _No unreleased changes._
 - play() seeks to startFrame - prerollFrames on entry
 - 'loop-point' event on wrap
 
-**React Hooks (@timeline/react)**
+**React Hooks (@webpacked-timeline/react)**
 - `usePlayhead(engine)` — useSyncExternalStore,
   stable action callbacks
 - `usePlayheadEvent(engine, type, handler)` —
@@ -308,7 +440,7 @@ _No unreleased changes._
 
 ## [0.4.0] — Phase 4 Complete — February 27, 2025
 
-### @timeline/core
+### @webpacked-timeline/core
 
 #### Added