@warpgogol/forge 0.14.0 → 0.15.0

package/profiles/{editframe-html.yaml → editframe.yaml}

@@ -1,6 +1,6 @@
 schema: forge/stack-profile@1
-id: editframe-html
-displayName: Editframe HTML Video
+id: editframe
+displayName: Editframe Video
 detect:
   anyOf:
     - editframe.config.*
@@ -20,8 +20,8 @@ devServer:
 artifacts:
   - id: composition
     extensions:
-      - .html
       - .tsx
+      - .html
     produce:
       command: editframe render
       output: dist/{composition}.mp4
@@ -30,6 +30,7 @@ artifacts:
     determinism:
       hashable: true
       inputs:
+        - compositions/**/*.tsx
         - compositions/**/*.html
         - assets/**
 assets:
@@ -48,8 +49,29 @@ release:
   target: local
   outputDir: release
   manifestName: release-manifest.json
+prerequisites:
+  - id: nodejs
+    name: Node.js 18+
+    check: node --version
+    installHint: "https://nodejs.org/en/download/"
+    severity: error
+  - id: ffmpeg
+    name: FFmpeg
+    check: ffmpeg -version
+    installHint: "https://ffmpeg.org/download.html"
+    severity: error
 workspaceTypes:
   - id: composition
+    detect:
+      glob: "*.tsx"
+      contains: TimelineRoot
+      packageJsonDep: "@editframe/react"
+    skills:
+      - ef-onboard
+      - ef-composition-review
+      - ef-render-verify
+    agentsMdTemplate: editframe-templates/composition-agents.md
+  - id: html-composition
     detect:
       glob: "*.html"
       contains: ef-timegroup
@@ -58,77 +80,85 @@ workspaceTypes:
       - ef-onboard
       - ef-composition-review
       - ef-render-verify
-    agentsMdTemplate: editframe-html-templates/composition-agents.md
+    agentsMdTemplate: editframe-templates/html-composition-agents.md
 invariants:
   - id: VIDEO-01
     rule: Composition filenames must use kebab-case (lowercase letters, digits, hyphens only)
     severity: error
     check:
       kind: filename-pattern
-      glob: "compositions/**/*.{html,tsx}"
-      pattern: "^[a-z0-9-]+\\.(html|tsx)$"
+      glob: "compositions/**/*.{tsx,html}"
+      pattern: "^[a-z0-9-]+\\.(tsx|html)$"
   - id: VIDEO-02
     rule: Scene durations must use contain mode by default to avoid unexpected cropping
     severity: warning
     check:
       kind: file-contains
-      glob: "compositions/**/*.html"
+      glob: "compositions/**/*.{tsx,html}"
       pattern: contain
   - id: VIDEO-03
-    rule: All speech audio elements must have corresponding ef-captions elements for accessibility
+    rule: All speech audio elements must have corresponding Captions components for accessibility
     severity: error
     check:
       kind: file-contains
-      glob: "compositions/**/*.html"
-      pattern: ef-captions
+      glob: "compositions/**/*.{tsx,html}"
+      pattern: Captions
   - id: VIDEO-04
-    rule: 'Root ef-timegroup must declare duration or use mode="contain" or mode="fit"'
+    rule: Root Timegroup must declare duration or use mode="contain" or mode="fit"
     severity: error
     check:
       kind: file-contains
-      glob: "compositions/**/*.html"
-      pattern: 'ef-timegroup[^>]*(duration|mode="contain"|mode="fit")[^>]*>'
+      glob: "compositions/**/*.{tsx,html}"
+      pattern: 'Timegroup[^>]*(duration|mode="contain"|mode="fit")[^>]*>|ef-timegroup[^>]*(duration|mode="contain"|mode="fit")[^>]*>'
   - id: VIDEO-05
     rule: All duration values must be valid CSS time strings (e.g. 5s, 500ms, 2.5s)
     severity: error
     check:
-      kind: html-attribute-pattern
-      glob: "compositions/**/*.html"
-      element: "ef-timegroup"
+      kind: attribute-pattern
+      glob: "compositions/**/*.{tsx,html}"
+      elements:
+        - ef-timegroup
+        - Timegroup
       attribute: "duration"
       pattern: "^\\d+(\\.\\d+)?(s|ms)$"
   - id: VIDEO-06
     rule: "mode attribute must be one of: sequence, fixed, contain, fit"
     severity: error
     check:
-      kind: html-attribute-pattern
-      glob: "compositions/**/*.html"
-      element: "ef-timegroup"
+      kind: attribute-pattern
+      glob: "compositions/**/*.{tsx,html}"
+      elements:
+        - ef-timegroup
+        - Timegroup
       attribute: "mode"
       pattern: "^(sequence|fixed|contain|fit)$"
   - id: VIDEO-07
     rule: fps must be a positive integer (default 30)
     severity: warning
     check:
-      kind: html-attribute-pattern
-      glob: "compositions/**/*.html"
-      element: "ef-timegroup"
+      kind: attribute-pattern
+      glob: "compositions/**/*.{tsx,html}"
+      elements:
+        - ef-timegroup
+        - Timegroup
       attribute: "fps"
       pattern: "^[1-9]\\d*$"
   - id: VIDEO-08
-    rule: loop attribute should only be used on the root ef-timegroup (no effect on render for nested groups)
+    rule: loop attribute should only be used on the root Timegroup (no effect on render for nested groups)
     severity: warning
     check:
       kind: file-not-contains
-      glob: "compositions/**/*.html"
-      negatedPattern: "<ef-timegroup[^>]*loop[^>]*>[\\s\\S]*<ef-timegroup[^>]*loop"
+      glob: "compositions/**/*.{tsx,html}"
+      negatedPattern: "<(Timegroup|ef-timegroup)[^>]*loop[^>]*>[\\s\\S]*<(Timegroup|ef-timegroup)[^>]*loop"
   - id: VIDEO-09
     rule: offset values must be valid CSS time strings (e.g. 0.5s, 3s, 500ms)
     severity: warning
     check:
-      kind: html-attribute-pattern
-      glob: "compositions/**/*.html"
-      element: "ef-timegroup"
+      kind: attribute-pattern
+      glob: "compositions/**/*.{tsx,html}"
+      elements:
+        - ef-timegroup
+        - Timegroup
       attribute: "offset"
       pattern: "^\\d+(\\.\\d+)?(s|ms)$"
 workspace:
@@ -331,34 +361,118 @@ firstWorkspace:
             "check": "editframe check"
           }
         }
-    - path: composition.html
+    - path: composition.tsx
       content: |
-        <!--
-          Editframe HTML composition — my-first-video
-          This file declares a video composition using Editframe custom elements.
+        /*
+          Editframe React composition — my-first-video
+          This file declares a video composition using @editframe/react components.
           Run `editframe preview` to preview, `editframe render` to produce output.
-        -->
-        <ef-timegroup duration="10s">
-          <ef-video
-            src="assets/background.mp4"
-            fit="contain"
-            duration="10s"
-          ></ef-video>
-          <ef-text
-            text="Hello, Editframe!"
-            x="50%"
-            y="50%"
-            font-size="48px"
-            color="white"
-            text-align="center"
-            duration="5s"
-          ></ef-text>
-          <ef-audio
-            src="assets/narration.mp3"
-          ></ef-audio>
-          <ef-captions
-            src="assets/captions.vtt"
-          ></ef-captions>
-        </ef-timegroup>
+        */
+        import { TimelineRoot, Timegroup, Video, Text, Audio, Captions } from "@editframe/react";
+
+        export default function Composition() {
+          return (
+            <TimelineRoot>
+              <Timegroup duration="10s">
+                <Video src="assets/background.mp4" fit="contain" duration="10s" />
+                <Text
+                  text="Hello, Editframe!"
+                  x="50%"
+                  y="50%"
+                  fontSize="48px"
+                  color="white"
+                  textAlign="center"
+                  duration="5s"
+                />
+                <Audio src="assets/narration.mp3" />
+                <Captions src="assets/captions.vtt" />
+              </Timegroup>
+            </TimelineRoot>
+          );
+        }
   install:
-    - pnpm add -D vitest
+    - pnpm add -D @editframe/react @editframe/vite-plugin react react-dom typescript @types/react @types/react-dom vite @vitejs/plugin-react tailwindcss @tailwindcss/vite vitest
+templates:
+  - id: react
+    default: true
+    firstWorkspace:
+      path: compositions/my-first-video
+      files:
+        - path: package.json
+          content: |
+            {
+              "name": "my-first-video",
+              "version": "0.1.0",
+              "private": true,
+              "type": "module",
+              "scripts": {
+                "preview": "editframe preview",
+                "render": "editframe render -o dist/my-first-video.mp4",
+                "check": "editframe check"
+              }
+            }
+        - path: composition.tsx
+          content: |
+            /*
+              Editframe React composition — my-first-video
+              This file declares a video composition using @editframe/react components.
+              Run `editframe preview` to preview, `editframe render` to produce output.
+            */
+            import { TimelineRoot, Timegroup, Video, Text, Audio, Captions } from "@editframe/react";
+
+            export default function Composition() {
+              return (
+                <TimelineRoot>
+                  <Timegroup duration="10s">
+                    <Video src="assets/background.mp4" fit="contain" duration="10s" />
+                    <Text
+                      text="Hello, Editframe!"
+                      x="50%"
+                      y="50%"
+                      fontSize="48px"
+                      color="white"
+                      textAlign="center"
+                      duration="5s"
+                    />
+                    <Audio src="assets/narration.mp3" />
+                    <Captions src="assets/captions.vtt" />
+                  </Timegroup>
+                </TimelineRoot>
+              );
+            }
+      install:
+        - pnpm add -D @editframe/react @editframe/vite-plugin react react-dom typescript @types/react @types/react-dom vite @vitejs/plugin-react tailwindcss @tailwindcss/vite vitest
+  - id: html
+    firstWorkspace:
+      path: compositions/my-first-video
+      files:
+        - path: package.json
+          content: |
+            {
+              "name": "my-first-video",
+              "version": "0.1.0",
+              "private": true,
+              "type": "module",
+              "scripts": {
+                "preview": "editframe preview",
+                "render": "editframe render -o dist/my-first-video.mp4",
+                "check": "editframe check"
+              }
+            }
+        - path: index.html
+          content: |
+            <!--
+              Editframe HTML composition — my-first-video
+              This file declares a video composition using Editframe web components.
+              Run `editframe preview` to preview, `editframe render` to produce output.
+            -->
+            <ef-timeline duration="10s">
+              <ef-timegroup duration="10s" mode="contain">
+                <ef-video src="assets/background.mp4" fit="contain" duration="10s"></ef-video>
+                <ef-text text="Hello, Editframe!" x="50%" y="50%" font-size="48px" color="white" text-align="center" duration="5s"></ef-text>
+                <ef-audio src="assets/narration.mp3"></ef-audio>
+                <ef-captions src="assets/captions.vtt"></ef-captions>
+              </ef-timegroup>
+            </ef-timeline>
+      install:
+        - pnpm add -D vitest

package/skills/fo/ef-brand-video-generator/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: ef-brand-video-generator
+description: "Generate brand video compositions from templates — logo animation, intro/outro, brand colors, typography. Use when the operator asks to generate a brand video."
+invocation: user
+category: fo
+concerns: content-mutation
+dependsOn: []
+languagePolicy: ref(PREFERENCES.md)
+triggers:
+  - "generate a brand video"
+  - "create a logo animation"
+  - "brand intro video"
+  - "brand outro video"
+source: domain-knowledge
+---
+
+<!-- skill-lint-disable SKILL-17 -->
+
+Before starting, read `PREFERENCES.md` at the repository root. If the file is missing or `aiLanguage` is unset, ask the operator once and create the file using the `my-preferences` skill semantics.
+
+# Brand Video Generator
+
+Generate brand video compositions from reusable templates. Brand videos typically include logo animations, intro/outro sequences, brand color overlays, and typography that matches brand guidelines.
+
+## Template structure
+
+A brand video composition uses `@editframe/react` components with brand-specific assets:
+
+```tsx
+import { TimelineRoot, Timegroup, Video, Image, Text } from "@editframe/react";
+
+export default function BrandIntro() {
+  return (
+    <TimelineRoot>
+      <Timegroup duration="3s" mode="sequence">
+        <Image src="assets/logo.svg" duration="1s" fit="contain" />
+        <Text
+          text="Your Brand"
+          x="50%"
+          y="50%"
+          fontSize="64px"
+          color="#FF6B00"
+          duration="1s"
+        />
+        <Video src="assets/brand-bg.mp4" fit="cover" duration="1s" />
+      </Timegroup>
+    </TimelineRoot>
+  );
+}
+```
+
+## Brand asset checklist
+
+- **Logo** — SVG or PNG with transparent background
+- **Brand colors** — primary, secondary, accent as CSS color values
+- **Typography** — brand font family, weights, sizes
+- **Background video** — optional branded background clip
+- **Audio** — optional brand jingle or voiceover
+
+## Common brand video patterns
+
+### Logo animation
+
+Animate the logo in with a `Timegroup` using `mode="sequence"`:
+
+```tsx
+<Timegroup duration="2s" mode="sequence">
+  <Image src="assets/logo.svg" duration="0.5s" fit="contain" />
+  <Text text="Your Brand" fontSize="48px" color="#FF6B00" duration="1.5s" />
+</Timegroup>
+```
+
+### Intro/outro pair
+
+Create separate compositions for intro and outro, then combine them in a parent `Timegroup`:
+
+```tsx
+<TimelineRoot>
+  <Timegroup duration="15s" mode="sequence">
+    <BrandIntro />
+    <MainContent />
+    <BrandOutro />
+  </Timegroup>
+</TimelineRoot>
+```
+
+### Brand color overlay
+
+Use a semi-transparent `Image` or `Text` overlay with brand colors:
+
+```tsx
+<Image src="assets/brand-overlay.png" duration="10s" fit="cover" />
+```
+
+## Rendering
+
+Run `ref(forge.yaml bindings.commands.build)` to render the brand video. Use `ref(forge.yaml bindings.commands.validate)` to check the composition before rendering.
+
+## Customization
+
+Each brand video template accepts parameters for logo, colors, text, and timing. Adjust the `duration`, `mode`, and asset paths to match the brand guidelines.

package/skills/fo/ef-composition/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: ef-composition
+description: "Guide creating a video composition with Editframe React components — time model, media elements, rendering. Use when the operator asks to create or build a video composition."
+invocation: user
+category: fo
+concerns: content-mutation
+dependsOn: []
+languagePolicy: ref(PREFERENCES.md)
+triggers:
+  - "create a video composition"
+  - "build a video with editframe"
+  - "create a composition"
+  - "add a scene to my video"
+source: https://editframe.com/skills/composition.md
+---
+
+<!-- skill-lint-disable SKILL-17 -->
+
+Before starting, read `PREFERENCES.md` at the repository root. If the file is missing or `aiLanguage` is unset, ask the operator once and create the file using the `my-preferences` skill semantics.
+
+# Video Composition
+
+Build video scenes with React components from `@editframe/react`, for example `<Timegroup>` and `<Video>`. Both HTML web component syntax (`<ef-timegroup>`) and React syntax (`<Timegroup>`) share the same composition model and rendering pipeline.
+
+Web component attributes use kebab-case (`file-id`, `api-host`). React props use camelCase (`fileId`, `apiHost`). Four attributes break this pattern: `sourcein`, `sourceout`, `trimstart`, `trimend` — same lowercase string in both forms.
+
+## Quick Start
+
+```tsx
+import { TimelineRoot, Timegroup, Video, Text, Audio, Captions } from "@editframe/react";
+
+export default function Composition() {
+  return (
+    <TimelineRoot>
+      <Timegroup duration="10s">
+        <Video src="assets/background.mp4" fit="contain" duration="10s" />
+        <Text text="Hello, Editframe!" x="50%" y="50%" fontSize="48px" color="white" duration="5s" />
+        <Audio src="assets/narration.mp3" />
+        <Captions src="assets/captions.vtt" />
+      </Timegroup>
+    </TimelineRoot>
+  );
+}
+```
+
+Run `ref(forge.yaml bindings.commands.devServer)` to preview. Run `ref(forge.yaml bindings.commands.build)` to render.
+
+## Duration units
+
+- `5s` — seconds
+- `500ms` — milliseconds
+- `2.5s` — fractional seconds
+
+## Core concepts
+
+### Time model
+
+A composition is a tree of `Timegroup` elements. The root `Timegroup` defines the composition's total duration. Child elements inherit timing context from their parent.
+
+### Timegroups and sequencing
+
+- **`mode="sequence"`** — children play one after another
+- **`mode="fixed"`** — children play at absolute offsets
+- **`mode="contain"`** (default) — children fit within parent duration
+- **`mode="fit"`** — children scale to fit
+
+### Transitions
+
+Use `ef-transition` or the `transition` prop to declare CSS-like transitions between scenes.
+
+### Scripting
+
+Compositions support inline scripting via `ef-script` or the `script` prop for dynamic behavior during rendering.
+
+## Media elements
+
+- **`Video`** (`ef-video`) — video source with `fit` mode (`contain`, `cover`, `fill`)
+- **`Audio`** (`ef-audio`) — audio source with FFT analysis (`fftSize`, `fftGain`, `fftDecay`)
+- **`Image`** (`ef-image`) — image source
+- **`Text`** (`ef-text`) — text overlay with positioning. Splits text into `ef-text-segment` children (`split="word"`, `split="char"`, `split="line"`). Set `stagger` to delay each segment's start. Segments render in light DOM with `data-active` attribute and `--ef-index`, `--ef-word-index`, `--ef-stagger-offset`, `--ef-seed` custom properties.
+- **`Captions`** (`ef-captions`) — synchronized captions with word-level highlighting. Accepts caption data via `captionsSrc` (URL to JSON), `captionsScript` (inline script id), or `captionsData` (JS property). JSON uses `segments` or `word_segments` shape with `start`/`end` times.
+- **`Waveform`** (`ef-waveform`) — visualizes an `ef-audio` or `ef-video` `target`. Modes: `bars`, `line`, `curve`, `bricks`, `pixel`, `wave`, `spikes`, `roundBars`.
+- **`Surface`** (`ef-surface`) — mirrors another element's pixels onto its own canvas. Set `target` to a canvas or any `HTMLElement` to reuse a video's decoded frames without re-decoding.
+- **`PanZoom`** (`ef-pan-zoom`) — pan and zoom control for video/image elements.
+- **`MotionBlur`** (`ef-motionblur`) — motion blur effect.
+- **`Configuration`** (`ef-configuration`) — opt-in element for API authentication. Add when deploying against the Editframe API: `apiHost` and `signingUrl` for signed-URL auth on cross-origin media, `imageProxy` for cross-origin image proxying. Skip for compositions using only local files.
+
+## Rendering
+
+**Browser export.** Call `renderTimegroupToVideo(timegroup, options)` from `@editframe/elements` to encode a live `ef-timegroup` to a video file. Uses WebCodecs. Key options: `width`/`height`/`fps`, `from`/`to` (export range in seconds), `videoCodec`/`audioCodec`/`videoBitrate`/`audioBitrate`, `target` (mediabunny output target), `signal` (AbortSignal), `onProgress`.
+
+For in-app export from an interactive preview, use `ef-workbench`'s `exportVideo()` method (see the `ef-editor-gui` skill). For CLI/cloud rendering (`editframe render`), the `window.EF_RENDER` path handles offscreen cloning automatically.
+
+**Custom render data.** A CLI or Playwright host can inject arbitrary JSON into `window.EF_RENDER_DATA` before running the composition. Read it with `getRenderData<T>()` (module-level function) or `useRenderData<T>()` (React hook). Use this to parameterize a render without templating the composition.
+
+Run `ref(forge.yaml bindings.commands.build)` to produce the final video output. Use `ref(forge.yaml bindings.commands.validate)` to check composition structure before rendering.
+
+## React
+
+Import components from `@editframe/react`. React props use camelCase. The composition is a standard React component that returns JSX.
+
+### React Three Fiber
+
+Wrap a `<Timegroup>` child in `<CompositionCanvas>` from `@editframe/react/r3f` to get an R3F `<Canvas>` synced to composition time. Read the clock with `useCompositionTime()` which returns `{ time, duration }` in seconds.
+
+```tsx
+<Timegroup mode="fixed" duration="14s">
+  <CompositionCanvas shadows>
+    <MyScene />
+  </CompositionCanvas>
+</Timegroup>
+```
+
+For 3D in a Web Worker, use `OffscreenCompositionCanvas` with `@react-three/offscreen`.
+
+### Server-side rendering
+
+`@editframe/react/server` and `@editframe/elements/server` export composition components and types only — no custom-element registration, no DOM, canvas, or WebCodecs code. Import safely in Next.js or Remix server code. These server entry points do not include GUI components or hooks — render those on the client with `dynamic(() => import("@editframe/react"), { ssr: false })`.
+
+### Package entry points
+
+| Import | Environment | Contains |
+| --- | --- | --- |
+| `@editframe/elements` | Browser | All custom elements, canvas/WebCodecs rendering |
+| `@editframe/elements/server` | Browser, Node, SSR | Types only, plus `getRenderInfo()` (browser-only at runtime) |
+| `@editframe/elements/gui` | Browser | Editor GUI custom elements (timeline, scrubber, handles) |
+| `@editframe/elements/styles.css` | Browser | Base + theme styles |
+| `@editframe/react` | Browser | React composition + GUI components, hooks |
+| `@editframe/react/server` | Browser, Node, SSR | Composition components only, no hooks/GUI |
+| `@editframe/react/r3f` | Browser | `CompositionCanvas`, `OffscreenCompositionCanvas`, `useCompositionTime` |
+
+## Element reference
+
+| Element | React component | Key props |
+| --- | --- | --- |
+| `ef-timegroup` | `Timegroup` | `duration`, `mode`, `fps`, `offset`, `loop` |
+| `ef-video` | `Video` | `src`, `fit`, `duration`, `fileId`, `sourcein`, `sourceout`, `trimstart`, `trimend` |
+| `ef-audio` | `Audio` | `src`, `duration`, `volume`, `mute`, `loop`, `fftSize`, `fftGain` |
+| `ef-text` | `Text` | `text`, `x`, `y`, `fontSize`, `color`, `textAlign`, `duration`, `split`, `stagger` |
+| `ef-captions` | `Captions` | `captionsSrc`, `captionsScript`, `target`, `wordStyle`, `duration` |
+| `ef-image` | `Image` | `src`, `fit`, `duration`, `fileId` |
+| `ef-waveform` | `Waveform` | `target`, `mode`, `color` |
+| `ef-surface` | `Surface` | `target` |
+| `ef-pan-zoom` | `PanZoom` | `target`, `pan`, `zoom` |
+| `ef-configuration` | `Configuration` | `apiHost`, `signingUrl`, `imageProxy` |
+| `ef-transition` | `Transition` | `type`, `duration` |
+| `ef-script` | `Script` | `src`, `inline` |

package/skills/fo/ef-composition-review/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: ef-composition-review
-description: Review an Editframe HTML composition for time model correctness, accessibility, and best practices
+description: Review an Editframe React composition for time model correctness, accessibility, and best practices
 invocation: user
 category: fo
 concerns: read-only
@@ -14,41 +14,41 @@ languagePolicy: ref(PREFERENCES.md)
 
 Before starting, read `PREFERENCES.md` at the repository root. If the file is missing or `aiLanguage` is unset, ask the operator once and create the file using the `my-preferences` skill semantics.
 
-A read-only review of an Editframe HTML composition file. The skill checks time model correctness, accessibility, asset references, automated invariants, and manual best practices. It does **not** modify any file — it produces a structured report and stops.
+A read-only review of an Editframe React composition file. The skill checks time model correctness, accessibility, asset references, automated invariants, and manual best practices. It does **not** modify any file — it produces a structured report and stops.
 
 ## Scope
 
-This skill reviews `.html` composition files that use Editframe custom elements (`ef-timegroup`, `ef-video`, `ef-audio`, `ef-text`, `ef-captions`). It is designed for projects using the `editframe-html` stack profile.
+This skill reviews `.tsx` composition files that use `@editframe/react` components (`TimelineRoot`, `Timegroup`, `Video`, `Audio`, `Text`, `Captions`). It is designed for projects using the `editframe` stack profile.
 
 ## Process
 
 ### 1. Empty state check
 
-Scan the `compositions/` directory for `.html` files. If no compositions are found, report "No compositions found — nothing to review" and stop. Do not report false positives on an empty project.
+Scan the `compositions/` directory for `.tsx` files. If no compositions are found, report "No compositions found — nothing to review" and stop. Do not report false positives on an empty project.
 
 ### 2. Time model review
 
 For each composition file:
 
-- Check that the root `ef-timegroup` declares a `duration` attribute or uses `mode="contain"` / `mode="fit"`.
+- Check that the root `Timegroup` declares a `duration` prop or uses `mode="contain"` / `mode="fit"`.
 - Check that all `duration` and `offset` values are valid CSS time strings (e.g. `5s`, `300ms`, `2.5s`).
 - Check that `mode` values are one of: `sequence`, `fixed`, `contain`, `fit`.
 - Check that `fps` is a positive integer (e.g. `30`, `60`).
-- Check that `loop` is only present on the root `ef-timegroup` — nested timegroups should not loop.
+- Check that `loop` is only present on the root `Timegroup` — nested Timegroups should not loop.
 
 ### 3. Accessibility review
 
-- Check that all `ef-audio` elements with speech content have corresponding `ef-captions` elements.
-- Check that `ef-text` elements have sufficient contrast between foreground and background colors (if declared via inline styles or CSS classes).
+- Check that all `Audio` components with speech content have corresponding `Captions` components.
+- Check that `Text` components have sufficient contrast between foreground and background colors (if declared via inline styles or CSS classes).
 
 ### 4. Asset reference review
 
-- Check that all `src` attributes in `ef-video`, `ef-audio`, and `ef-image` elements point to files that exist in the `assets/` directory.
+- Check that all `src` props in `Video`, `Audio`, and `Image` components point to files that exist in the `assets/` directory.
 - Check that asset filenames use kebab-case (lowercase letters, digits, hyphens only).
 
 ### 5. Invariant check
 
-Run `forge doctor` to check all profile invariants automatically. For the `editframe-html` profile, this covers VIDEO-01 through VIDEO-09 (filename conventions, scene fit modes, captions, and time model invariants). Review the output and include any violations in the report.
+Run `forge doctor` to check all profile invariants automatically. For the `editframe` profile, this covers VIDEO-01 through VIDEO-09 (filename conventions, scene fit modes, captions, and time model invariants). Review the output and include any violations in the report.
 
 ### 6. Manual best practices