ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-13 15:49:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): add flat trigger variants for ColorField, FontFamilyField, TextAreaField

Browse Source
This commit is contained in:
Vance Ingalls
2026-07-14 00:59:06 -07:00
parent 633171bb15
commit 2983e74253
6 changed files with 256 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.fallowrc.jsonc
+6
View File
@@ -331,6 +331,12 @@
"file": "packages/studio/src/components/editor/manualEditingAvailability.ts",
"exports": ["STUDIO_FLAT_INSPECTOR_ENABLED"],
},
// TextAreaField: newly exported for FlatTextSection (flat inspector
// redesign, Task 8), which lands in a later commit on this branch.
{
"file": "packages/studio/src/components/editor/propertyPanelSections.tsx",
"exports": ["TextAreaField"],
},
],
"ignoreDependencies": [
// Runtime/dynamic deps not visible to static analysis: tsup `external`,
packages/studio/src/components/editor/propertyPanelColor.test.tsx
+28
View File
@@ -0,0 +1,28 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { ColorField } from "./propertyPanelColor";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
describe("ColorField flat trigger", () => {
it("renders label and value inline with a small swatch, no boxed border", () => {
const host = document.createElement("div");
document.body.append(host);
const root = createRoot(host);
act(() => {
root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={vi.fn()} />);
});
const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
expect(trigger).not.toBeNull();
expect(trigger?.className).not.toContain("border-neutral-800");
expect(host.textContent).toContain("Color");
act(() => root.unmount());
});
});
packages/studio/src/components/editor/propertyPanelColor.tsx
+26
View File
@@ -121,11 +121,13 @@ export function ColorField({
label,
value,
disabled,
flat,
onCommit,
}: {
label: string;
value: string;
disabled?: boolean;
flat?: boolean;
onCommit: (nextValue: string) => void;
}) {
const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -349,6 +351,30 @@ export function ColorField({
}
};
if (flat) {
return (
<div className="flex min-h-[30px] items-center justify-between">
<span className="text-[11px] text-panel-text-2">{label}</span>
<button
type="button"
data-flat-color-trigger="true"
disabled={disabled}
aria-label={`Pick ${label.toLowerCase()} color`}
ref={buttonRef}
onClick={openPicker}
className="flex items-center gap-2 disabled:cursor-not-allowed"
>
<span
className="h-4 w-4 flex-shrink-0 rounded-[4px]"
style={{ backgroundColor: value || "transparent" }}
/>
<span className="font-mono text-[11px] text-panel-text-0">{value}</span>
</button>
{picker}
</div>
);
}
return (
<div className="grid min-w-0 gap-1.5">
<span className={LABEL}>{label}</span>
packages/studio/src/components/editor/propertyPanelFont.test.tsx
+30
View File
@@ -0,0 +1,30 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vitest";
import { FontFamilyField } from "./propertyPanelFont";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
});
describe("FontFamilyField flat trigger", () => {
it("renders as a label/value row with a trailing dropdown caret, no boxed border", () => {
const host = document.createElement("div");
document.body.append(host);
const root = createRoot(host);
act(() => {
root.render(
<FontFamilyField flat value="JetBrains Mono" importedFonts={[]} onCommit={vi.fn()} />,
);
});
const trigger = host.querySelector<HTMLButtonElement>('[data-flat-font-trigger="true"]');
expect(trigger).not.toBeNull();
expect(trigger?.className).not.toContain("border-neutral-800");
expect(host.textContent).toContain("JetBrains Mono");
act(() => root.unmount());
});
});
packages/studio/src/components/editor/propertyPanelFont.tsx
+57 -22
View File
@@ -123,12 +123,14 @@ function loadImportedFontStylesheet(asset: ImportedFontAsset): void {
export function FontFamilyField({
value,
disabled,
flat,
importedFonts,
onImportFonts,
onCommit,
}: {
value: string;
disabled?: boolean;
flat?: boolean;
importedFonts: ImportedFontAsset[];
onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
onCommit: (nextValue: string) => void;
@@ -366,27 +368,7 @@ export function FontFamilyField({
setOpen(false);
};
return (
<div ref={containerRef} className="relative grid min-w-0 gap-1.5">
<span className={LABEL}>Font family</span>
<button
type="button"
disabled={disabled}
onClick={() => setOpen((next) => !next)}
className={`${FIELD} flex h-10 items-center justify-between gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed`}
>
<span
className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100"
style={{ fontFamily: value }}
>
{currentFamily}
</span>
<span className="flex-shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600">
Font
</span>
</button>
{open && (
const dropdown = open && (
<div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl">
<div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2">
<input
@@ -476,7 +458,60 @@ export function FontFamilyField({
)}
</div>
</div>
)}
);
if (flat) {
return (
<div ref={containerRef} className="relative flex min-h-[30px] items-center justify-between">
<span className="text-[11px] text-panel-text-2">Font</span>
<button
type="button"
data-flat-font-trigger="true"
disabled={disabled}
onClick={() => setOpen((next) => !next)}
className="flex items-center gap-1.5 disabled:cursor-not-allowed"
>
<span
className="max-w-[200px] truncate font-mono text-[11px] text-panel-text-0"
style={{ fontFamily: value }}
>
{currentFamily}
</span>
<svg
width="10"
height="10"
viewBox="0 0 10 10"
fill="currentColor"
className="flex-shrink-0 text-panel-text-5"
>
<path d="M2 3l3 4 3-4z" />
</svg>
</button>
{dropdown}
</div>
);
}
return (
<div ref={containerRef} className="relative grid min-w-0 gap-1.5">
<span className={LABEL}>Font family</span>
<button
type="button"
disabled={disabled}
onClick={() => setOpen((next) => !next)}
className={`${FIELD} flex h-10 items-center justify-between gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed`}
>
<span
className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100"
style={{ fontFamily: value }}
>
{currentFamily}
</span>
<span className="flex-shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600">
Font
</span>
</button>
{dropdown}
</div>
);
}
packages/studio/src/components/editor/propertyPanelSections.tsx
+39 -13
View File
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState, type ChangeEvent } from "react";
import { Plus, Type } from "../../icons/SystemIcons";
import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
import type { ImportedFontAsset } from "./fontAssets";
@@ -59,17 +59,19 @@ function detectAvailableWeights(fontFamily: string): string[] {
return available.length > 0 ? available : ALL_WEIGHTS;
}
function TextAreaField({
export function TextAreaField({
label,
value,
disabled,
autoFocus,
flat,
onCommit,
}: {
label: string;
value: string;
disabled?: boolean;
autoFocus?: boolean;
flat?: boolean;
onCommit: (nextValue: string) => void;
}) {
const [draft, setDraft] = useState(value);
@@ -105,6 +107,38 @@ function TextAreaField({
}, 120);
};
const handleFocus = () => {
focusedRef.current = true;
};
const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
setDraft(e.target.value);
scheduleCommit(e.target.value);
};
const handleBlur = () => {
focusedRef.current = false;
commitDraft(draft);
};
if (flat) {
return (
<div className="border-l-2 border-panel-border-input py-0.5 pl-[10px]">
<div className="mb-[3px] text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
{label}
</div>
<textarea
ref={textareaRef}
value={draft}
disabled={disabled}
rows={2}
onFocus={handleFocus}
onChange={handleChange}
onBlur={handleBlur}
className="w-full resize-none bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-none disabled:cursor-not-allowed disabled:text-panel-text-4"
/>
</div>
);
}
return (
<label className="grid min-w-0 gap-1.5">
<span className={LABEL}>{label}</span>
@@ -114,17 +148,9 @@ function TextAreaField({
value={draft}
disabled={disabled}
rows={4}
onFocus={() => {
focusedRef.current = true;
}}
onChange={(e) => {
setDraft(e.target.value);
scheduleCommit(e.target.value);
}}
onBlur={() => {
focusedRef.current = false;
commitDraft(draft);
}}
onFocus={handleFocus}
onChange={handleChange}
onBlur={handleBlur}
className="w-full resize-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
/>
</div>