mirror of
https://github.com/webadderallorg/Recordly.git
synced 2026-10-01 18:25:36 +00:00
54 KiB
54 KiB
Recordly HeroUI — Figma component coverage
Audited 20 September 2026 against the recordly-heroui renderer. The file contains 254 native components, 6,986 editable component layers, 126 variables, an assembled editor and two structural wireframes. Variable-alias validation found no broken references.
Start here
Components are organized by controls, inspectors, timeline, recording, windows and popup families. Edit a main component to update its Figma instances. The full component/node index below links directly to each definition. This is an editable design handoff; Figma changes do not automatically rewrite the React project.
Scope and fidelity
- Every one of the 91 original renderer TSX modules is accounted for below: 85 visual modules and 6 providers/bootstrap modules without standalone UI.
- Includes basic and advanced inspectors, four background tabs, selected/unselected timeline blocks, annotations, waveform and keyframe details, project dialogs, export stages and errors, presets, announcement layouts, all recorder menus, recording/finalizing states, floating webcam preview, countdown, update notifications, and tooltips.
- Controls, text, icons and waveform shapes are editable Figma layers. Filmstrip/preview footage and image assets retain bitmap media fills. These are fixture media, not editable video sequences.
- The source uses SF Pro; the matching Figma faces are used. Menlo was unavailable in Figma and its small monospaced samples use JetBrains Mono Medium.
- Context providers, event hooks, native operating-system file/device permission dialogs and runtime behavior have no independent Figma visual. Project-owned dialogs and device-selection menus are included.
- Frame and Crop inspector identifiers currently resolve to Scene in the source. Their captured compatibility states reflect that behavior. Extensions are retained as a labelled legacy component, despite removal from active navigation.
- Capture-only containers make otherwise hidden dialogs visible and expand inspector scroll areas. Preview menus and recording-only HUD branches preserve source JSX and original CSS with inert handlers. No capture controls are added to the shipping editor.
Source module coverage
Native component index
Each row is a Figma component definition. Button names include their containing style family to distinguish repeated size/state names.
Icons
| Component | Node |
|---|---|
| Icon / Plus | 16:5 |
| Icon / Trash | 16:8 |
| Icon / Play | 16:11 |
| Icon / Pause | 16:14 |
| Icon / Scissors | 16:17 |
| Icon / Volume2 | 16:20 |
| Icon / Undo2 | 16:23 |
| Icon / Redo2 | 16:26 |
| Icon / ChevronDown | 16:29 |
| Icon / Settings2 | 16:32 |
| Icon / MousePointer | 16:35 |
| Icon / Type | 16:38 |
| Icon / Camera | 16:41 |
| Icon / Image | 16:44 |
| Icon / Download | 16:47 |
Button
Input
| Component | Node |
|---|---|
| State=Default | 22:5 |
| State=Disabled | 22:8 |
| State=Filled | 22:11 |
TextArea
| Component | Node |
|---|---|
| TextArea | 22:30 |
Switch
| Component | Node |
|---|---|
| State=Off | 23:8 |
| State=On | 23:14 |
| State=Disabled | 23:20 |
Slider
| Component | Node |
|---|---|
| State=Single | 24:8 |
| State=Range | 24:16 |
| State=Disabled | 24:22 |
Toggle
| Component | Node |
|---|---|
| State=Default | 28:5 |
| State=Selected | 28:8 |
| State=Disabled | 28:11 |
ToggleGroup
| Component | Node |
|---|---|
| ToggleGroup | 28:35 |
ChoiceGroup
| Component | Node |
|---|---|
| ChoiceGroup | 28:44 |
Tabs
| Component | Node |
|---|---|
| Tabs | 28:57 |
Select
| Component | Node |
|---|---|
| Select | 28:64 |
Card
| Component | Node |
|---|---|
| Card | 30:14 |
Accordion
| Component | Node |
|---|---|
| State=Expanded | 30:25 |
| State=Collapsed | 30:31 |
Label
| Component | Node |
|---|---|
| Label | 30:50 |
Separator
| Component | Node |
|---|---|
| Separator | 30:53 |
Skeleton
| Component | Node |
|---|---|
| Skeleton | 30:57 |
App — Shared utilities
| Component | Node |
|---|---|
| ColorPalette | 35:368 |
| ColorControl | 35:379 |
| ContentClamp | 35:383 |
| ItemContent | 35:390 |
| AudioLevelMeter / 12 | 35:395 |
| AudioLevelMeter / 72 | 35:400 |
| AudioLevelMeter / 94 | 35:405 |
App — Projects
| Component | Node |
|---|---|
| ProjectBrowserDialog / Populated | 35:432 |
| ProjectBrowserDialog / Empty | 35:443 |
| ExtensionManager / Legacy | 35:454 |
App — Export controls
| Component | Node |
|---|---|
| FormatSelector / MP4 | 35:472 |
| FormatSelector / GIF | 35:489 |
| GifOptionsPanel | 35:519 |
| ExportSettingsMenu / MP4 | 35:586 |
| ExportSettingsMenu / GIF | 35:642 |
App — Preview controls
| Component | Node |
|---|---|
| SliderControl | 35:655 |
| WebcamCropControl | 35:674 |
| CropControl | 35:690 |
| WallpaperGrid | 35:713 |
| CaptionListPanel / Editing | 35:748 |
App — Annotation controls
| Component | Node |
|---|---|
| AnnotationSettingsPanel / text | 35:879 |
| AnnotationSettingsPanel / figure | 35:986 |
| AnnotationSettingsPanel / blur | 35:1098 |
| AnnotationSettingsPanel / image | 35:1159 |
App — Recording & sources
| Component | Node |
|---|---|
| RecordingControls / Recording | 35:1191 |
| RecordingControls / Paused | 35:1222 |
| SourceSelectorContent / Sources | 35:1255 |
| SourceSelectorContent / Empty | 35:1260 |
| SourceSelectorContent / Loading | 35:1265 |
| DropdownItem / Selected | 35:1280 |
| MicDeviceRow / Selected and unselected | 35:1301 |
| MarqueeText | 35:1306 |
Popups — Recording
| Component | Node |
|---|---|
| Popup/launch-mic-devices | 38:37 |
| Popup/launch-webcam-devices | 38:67 |
| Popup/launch-countdown | 38:97 |
| Popup/launch-mic | 38:113 |
| Popup/launch-webcam | 38:122 |
| Popup/launch-more | 38:236 |
| Popup/launch-sources | 38:255 |
| Popup/launch-projects | 38:279 |
Popups — Dialogs
| Component | Node |
|---|---|
| Popup/project-save | 38:307 |
| Popup/project-saving | 38:334 |
| Popup/unsaved-changes | 38:353 |
| Popup/native-capture-unavailable | 38:368 |
| Popup/feedback | 38:415 |
| Popup/keyboard-dialog | 38:493 |
| Popup/tutorial | 38:556 |
| Popup/dialog | 38:573 |
| Popup/font | 38:605 |
| Popup/shortcuts | 38:701 |
| Popup/crop-dialog | 38:731 |
Popups — Controls & feedback
| Component | Node |
|---|---|
| Popup/select | 38:759 |
| Popup/popover | 38:769 |
| Popup/dropdown | 38:783 |
| Popup/toast | 38:794 |
| Popup/keyboard-help | 38:853 |
| Popup/color | 38:886 |
| Popup/loading | 38:957 |
Inspectors — all sections
Timeline — TimelineEditor
| Component | Node |
|---|---|
| TimelineEditor / clip selected | 41:3712 |
| TimelineEditor / zoom selected | 41:3812 |
| TimelineEditor / annotation selected | 41:3912 |
| TimelineEditor / audio selected | 41:4012 |
| TimelineEditor / caption selected | 41:4112 |
| TimelineEditor / Empty | 41:4124 |
Timeline — PlaybackControls
| Component | Node |
|---|---|
| PlaybackControls / Paused | 41:4149 |
| PlaybackControls / Playing | 41:4173 |
| PlaybackControls / Muted | 41:4197 |
Timeline — AnnotationOverlay
| Component | Node |
|---|---|
| AnnotationOverlay / text / Default | 41:4205 |
| AnnotationOverlay / text / Selected | 41:4219 |
| AnnotationOverlay / figure / Default | 41:4226 |
| AnnotationOverlay / figure / Selected | 41:4240 |
| AnnotationOverlay / image / Default | 41:4245 |
| AnnotationOverlay / image / Selected | 41:4257 |
| AnnotationOverlay / blur / Default | 41:4262 |
| AnnotationOverlay / blur / Selected | 41:4274 |
Popups — Export
| Component | Node |
|---|---|
| Popup/export-settings-mp4 | 41:4357 |
| Popup/export-settings-gif | 41:4413 |
| Popup/export-preparing | 41:4431 |
| Popup/export-rendering | 41:4452 |
| Popup/export-audio | 41:4473 |
| Popup/export-finalizing | 41:4491 |
| Popup/export-muxing | 41:4509 |
| Popup/export-saving | 41:4527 |
| Popup/export-success | 41:4541 |
| Popup/export-error | 41:4553 |
| Popup/export-pending-save | 41:4567 |
| Popup/export-legacy | 41:4590 |
Popups — Presets & announcements
| Component | Node |
|---|---|
| Popup/presets-empty | 41:4611 |
| Popup/presets-saved | 41:4649 |
| Popup/announcement-popup | 41:4683 |
| Popup/announcement-banner | 41:4701 |
| Popup/announcement-notification | 41:4713 |
| Popup/toolbar-aspect-ratio | 41:4757 |
| Popup/announcement-cover | 51:37 |
Windows & tooltips
| Component | Node |
|---|---|
| UpdateToastWindow / Available | 41:4778 |
| UpdateToastWindow / Downloading | 41:4803 |
| UpdateToastWindow / Ready | 41:4823 |
| UpdateToastWindow / Check error | 41:4843 |
| UpdateToastWindow / Download error | 41:4863 |
| UpdateToastWindow / Experimental | 41:4886 |
| UpdateToastWindow / Preview | 41:4909 |
| CountdownOverlay / 3 seconds | 41:4916 |
| HudWindow / Idle | 41:4968 |
| App / Startup | 41:4977 |
| Tooltip / Content clamp | 41:4981 |
| Tooltip / Sidebar placement | 41:4985 |
Popups — Preview
| Component | Node |
|---|---|
| Popup/aspect-ratio | 41:5017 |
| Popup/add-layer | 41:5025 |
| Popup/preview-volume | 41:5034 |
HUD — recording states
| Component | Node |
|---|---|
| HUD / Finalizing recording | 46:18 |
| HUD / Floating webcam preview | 46:23 |
| HUD / Recording | 46:61 |
Timeline — KeyframeMarkers
| Component | Node |
|---|---|
| State=Default | 52:7 |
| State=Selected | 52:9 |
Timeline — AudioWaveform
| Component | Node |
|---|---|
| AudioWaveform / Normal | 55:6 |
| AudioWaveform / Normalized | 55:9 |
Editor — shell & screen
| Component | Node |
|---|---|
| Editor/Header | 32:391 |
| Editor/Sidebar / Scene | 32:630 |
| Editor/Preview | 32:887 |
| Editor/Timeline | 32:986 |
Reproducible capture fixtures
| Entry | Coverage |
|---|---|
design-library.html |
Primitive controls and variants |
design-capture.html?windowType=editor |
Actual assembled renderer |
design-app-catalog.html |
Shared app controls, source lists and annotation inspectors |
design-app-catalog.html?view=all-states |
26 popup and dialog states |
design-inspector-catalog.html |
40 inspector/background states |
design-timeline-catalog.html |
Timeline, playback and annotation overlays |
design-timeline-details.html |
Explicit waveform peaks and keyframe markers |
design-extra-catalog.html |
Export, preset and announcement states; legacy toolbar |
design-extra-catalog.html?view=announcement-cover |
Cover-media announcement |
design-preview-menus.html |
Aspect ratio, Add Layer and volume menus |
design-window-catalog.html |
Seven update states, countdown, idle HUD, startup and tooltips |
design-hud-branches.html |
Finalizing recorder and floating webcam/recording HUD |
design-window-capture.html |
Individual window state verification through the live bridge path |
The capture entry points load the existing test bridge and fixture media. The renderer-only development server must be running to use them. They are separate from the production index.html entry.
Validation
- TypeScript and targeted lint pass for source changes and all capture fixtures.
- Timeline/deletion changes: 135 focused unit tests and 13 browser regressions passed.
- Controlled and live update-window paths were rendered successfully; the window/detail galleries reported no JavaScript errors.
- Figma audit checks native component/layer counts, variable aliases and fonts. Visual QA corrected capture artifacts in slider borders, tooltip sizing and popup envelopes. Raw and failed intermediate capture frames were removed after conversion.
Compatibility toolbar, unmounted ruler and marker-overlay source files were removed on 20 September 2026. Their earlier Figma captures are historical, not current app surfaces.