mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 23:00:03 +00:00
Miguel Ángel
037266e72b
Timeline UI - Highlight clips visible at the playhead in the primary color; others share one neutral color - Minimalist rounded clips, single-color track rows, no gutter icons or superscript labels - Per-track eye toggle and a per-element hide button in the design panel - Ruler zoom fixes: sub-second tick intervals and correct label formatting at high zoom - Sticky gutter so track controls stay visible while scrolling WYSIWYG visibility (data-hidden) - Runtime honors data-hidden (display:none), so hiding affects the render, not just the preview - HTML stays the source of truth; hide state persists and round-trips on reload Split several studio files to stay under the 600-line cap; pure relocations, no behavior change.
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import {
|
|
Check as PhCheck,
|
|
Clock as PhClock,
|
|
Eye as PhEye,
|
|
FilmStrip,
|
|
Stack,
|
|
ArrowsOutCardinal,
|
|
MusicNote,
|
|
Palette as PhPalette,
|
|
Minus as PhMinus,
|
|
Plus as PhPlus,
|
|
Square as PhSquare,
|
|
SquareSplitVertical as PhSquareSplitVertical,
|
|
TextT,
|
|
X as PhX,
|
|
Lightning,
|
|
CaretRight,
|
|
ClipboardText,
|
|
ArrowCounterClockwise,
|
|
Camera as PhCamera,
|
|
ArrowClockwise,
|
|
Gear,
|
|
Scissors as PhScissors,
|
|
} from "@phosphor-icons/react";
|
|
import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from "@phosphor-icons/react";
|
|
|
|
type IconProps = PhosphorIconProps & { title?: string };
|
|
|
|
const makeIcon = (Icon: PhosphorIcon) => {
|
|
const Wrapped = ({ title, ...props }: IconProps) => (
|
|
<Icon alt={title} aria-label={title} aria-hidden={title ? undefined : true} {...props} />
|
|
);
|
|
return Wrapped;
|
|
};
|
|
|
|
// Lucide name → Phosphor equivalent
|
|
export const Check = makeIcon(PhCheck);
|
|
export const Clock = makeIcon(PhClock);
|
|
export const Eye = makeIcon(PhEye);
|
|
export const Film = makeIcon(FilmStrip);
|
|
export const Layers = makeIcon(Stack);
|
|
export const Move = makeIcon(ArrowsOutCardinal);
|
|
export const Music = makeIcon(MusicNote);
|
|
export const Palette = makeIcon(PhPalette);
|
|
export const Minus = makeIcon(PhMinus);
|
|
export const Plus = makeIcon(PhPlus);
|
|
export const Square = makeIcon(PhSquare);
|
|
export const Compare = makeIcon(PhSquareSplitVertical);
|
|
export const Type = makeIcon(TextT);
|
|
export const X = makeIcon(PhX);
|
|
export const Zap = makeIcon(Lightning);
|
|
// Extra icons used in this project (not in lucide's default mapping above)
|
|
export const ChevronDown = ({ title, style, ...props }: IconProps) => {
|
|
const transform = style?.transform ? `${style.transform} rotate(90deg)` : "rotate(90deg)";
|
|
return (
|
|
<CaretRight
|
|
alt={title}
|
|
aria-label={title}
|
|
aria-hidden={title ? undefined : true}
|
|
style={{ ...style, transform }}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
export const ChevronRight = makeIcon(CaretRight);
|
|
export const ClipboardList = makeIcon(ClipboardText);
|
|
export const RotateCcw = makeIcon(ArrowCounterClockwise);
|
|
export const Camera = makeIcon(PhCamera);
|
|
export const RotateCw = makeIcon(ArrowClockwise);
|
|
export const Settings = makeIcon(Gear);
|
|
export const Scissors = makeIcon(PhScissors);
|