mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
fix(studio): remove selection overlay fill
This commit is contained in:
ukimsanov
@@ -79,16 +79,16 @@ Run `npx skills add heygen-com/hyperframes` for the interactive picker, `npx ski
|
|||||||
|
|
||||||
Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.
|
Atomic capabilities the creation workflows compose against — pull one when you need that specific layer.
|
||||||
|
|
||||||
| Skill | Covers |
|
| Skill | Covers |
|
||||||
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| `/hyperframes-core` | The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules. |
|
| `/hyperframes-core` | The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules. |
|
||||||
| `/hyperframes-animation` | All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
|
| `/hyperframes-animation` | All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
|
||||||
| `/hyperframes-keyframes` | Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `hyperframes keyframes` diagnostics for rendered motion. |
|
| `/hyperframes-keyframes` | Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `hyperframes keyframes` diagnostics for rendered motion. |
|
||||||
| `/hyperframes-creative` | Non-animation creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns. |
|
| `/hyperframes-creative` | Non-animation creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns. |
|
||||||
| `/media-use` | The media OS — resolve any media need (BGM, SFX, image, icon, voice) into a frozen local file + ledger record, generate via TTS/music when the catalog misses, transcribe, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking. |
|
| `/media-use` | The media OS — resolve any media need (BGM, SFX, image, icon, voice) into a frozen local file + ledger record, generate via TTS/music when the catalog misses, transcribe, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking. |
|
||||||
| `/hyperframes-cli` | CLI dev loop — `init`, `lint`, `validate`, `inspect`, `preview`, `render`, `publish`, `doctor`, plus AWS Lambda cloud rendering (`lambda deploy / render / progress`). |
|
| `/hyperframes-cli` | CLI dev loop — `init`, `lint`, `validate`, `inspect`, `preview`, `render`, `publish`, `doctor`, plus AWS Lambda cloud rendering (`lambda deploy / render / progress`). |
|
||||||
| `/hyperframes-registry` | Install and wire registry blocks and components into compositions via `hyperframes add`. Authoring a new block or component to contribute upstream. |
|
| `/hyperframes-registry` | Install and wire registry blocks and components into compositions via `hyperframes add`. Authoring a new block or component to contribute upstream. |
|
||||||
| `/figma` | Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations and shaders (MCP) into a composition. |
|
| `/figma` | Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations and shaders (MCP) into a composition. |
|
||||||
|
|
||||||
For visual design handoff workflows, see the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design) and [Open Design guide](https://hyperframes.heygen.com/guides/open-design).
|
For visual design handoff workflows, see the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design) and [Open Design guide](https://hyperframes.heygen.com/guides/open-design).
|
||||||
|
|
||||||
|
|||||||
@@ -418,7 +418,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
|
|||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-dom-edit-hover-box="true"
|
data-dom-edit-hover-box="true"
|
||||||
className="pointer-events-none absolute rounded-md border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
|
className="pointer-events-none absolute rounded-md border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
|
||||||
style={hugRectForElement(hoverRect, hoverSelection.element)}
|
style={hugRectForElement(hoverRect, hoverSelection.element)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
@@ -428,7 +428,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
|
|||||||
<div
|
<div
|
||||||
key={item.key}
|
key={item.key}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="pointer-events-none absolute rounded-xl border border-studio-accent/70 bg-studio-accent/[0.03]"
|
className="pointer-events-none absolute rounded-xl border border-studio-accent/70"
|
||||||
style={{
|
style={{
|
||||||
left: item.rect.left,
|
left: item.rect.left,
|
||||||
top: item.rect.top,
|
top: item.rect.top,
|
||||||
@@ -439,7 +439,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
|
|||||||
))}
|
))}
|
||||||
<div
|
<div
|
||||||
data-dom-edit-selection-box="true"
|
data-dom-edit-selection-box="true"
|
||||||
className="pointer-events-auto absolute rounded-xl border border-studio-accent bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.3)]"
|
className="pointer-events-auto absolute rounded-xl border border-studio-accent shadow-[0_0_0_1px_rgba(60,230,172,0.3)]"
|
||||||
style={{
|
style={{
|
||||||
left: groupBounds.left,
|
left: groupBounds.left,
|
||||||
top: groupBounds.top,
|
top: groupBounds.top,
|
||||||
@@ -520,7 +520,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
|
|||||||
>
|
>
|
||||||
{cropOutlineInsetPx && (
|
{cropOutlineInsetPx && (
|
||||||
<div
|
<div
|
||||||
className="pointer-events-none absolute rounded-md border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)] bg-studio-accent/5"
|
className="pointer-events-none absolute rounded-md border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
|
||||||
style={{
|
style={{
|
||||||
left: cropOutlineInsetPx.left,
|
left: cropOutlineInsetPx.left,
|
||||||
top: cropOutlineInsetPx.top,
|
top: cropOutlineInsetPx.top,
|
||||||
|
|||||||
@@ -34,6 +34,6 @@ export function readDomEditSelectionShapeStyles(
|
|||||||
* shadow for clip-mirrored shapes, plain border otherwise. */
|
* shadow for clip-mirrored shapes, plain border otherwise. */
|
||||||
export function resolveBoxChromeClass(hasCropOutline: boolean, boxClipPath?: string): string {
|
export function resolveBoxChromeClass(hasCropOutline: boolean, boxClipPath?: string): string {
|
||||||
if (hasCropOutline) return "";
|
if (hasCropOutline) return "";
|
||||||
if (boxClipPath) return "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)] bg-studio-accent/5";
|
if (boxClipPath) return "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]";
|
||||||
return "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)] bg-studio-accent/5";
|
return "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -76,6 +76,7 @@ describe("resolveDomEditCapabilities", () => {
|
|||||||
canEditStyles: true,
|
canEditStyles: true,
|
||||||
canMove: true,
|
canMove: true,
|
||||||
canResize: true,
|
canResize: true,
|
||||||
|
canCrop: true,
|
||||||
canApplyManualOffset: true,
|
canApplyManualOffset: true,
|
||||||
canApplyManualSize: true,
|
canApplyManualSize: true,
|
||||||
canApplyManualRotation: true,
|
canApplyManualRotation: true,
|
||||||
@@ -424,6 +425,7 @@ describe("resolveDomEditSelection", () => {
|
|||||||
canEditStyles: false,
|
canEditStyles: false,
|
||||||
canMove: true,
|
canMove: true,
|
||||||
canResize: true,
|
canResize: true,
|
||||||
|
canCrop: true,
|
||||||
canApplyManualOffset: false,
|
canApplyManualOffset: false,
|
||||||
canApplyManualSize: false,
|
canApplyManualSize: false,
|
||||||
canApplyManualRotation: false,
|
canApplyManualRotation: false,
|
||||||
|
|||||||
Reference in New Issue
Block a user