ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): track design-panel input usage across both inspector UIs (#2467)

Browse Source 
* feat(studio): add design-panel input usage tracking primitive

* feat(studio): track input usage in classic inspector panel

* feat(studio): track input usage in flat inspector panel

* fix(studio): attribute animation meta by field, track classic chrome, widen coverage guard
This commit is contained in:
Miguel Ángel
2026-07-15 01:33:27 -04:00
committed by GitHub
parent e3ca89e9ac
commit 7cc10a9922
33 changed files with 1613 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
+17 -3
View File
@@ -1,4 +1,5 @@
import { useEffect, useState } from "react";
import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
import { Plus, X } from "../../icons/SystemIcons";
import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
import type { ImportedFontAsset } from "./fontAssets";
@@ -56,6 +57,7 @@ function FlatTextFieldEditor({
onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
autoFocus?: boolean;
}) {
const track = useTrackDesignInput();
const weight = getTextStyleValue(field, styles, "font-weight", "400");
const weightOptions = detectAvailableWeights(
field.computedStyles["font-family"] || styles["font-family"] || "",
@@ -112,7 +114,10 @@ function FlatTextFieldEditor({
<label className="flex items-center gap-1.5">
<select
value={weight}
onChange={(e) => onSetTextFieldStyle(field.key, "font-weight", e.target.value)}
onChange={(e) => {
track("select", "Weight");
onSetTextFieldStyle(field.key, "font-weight", e.target.value);
}}
className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none ${
VALUE_TIER_VALUE_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
}`}
@@ -242,6 +247,7 @@ export function FlatTextSection({
onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
onRemoveTextField: (fieldKey: string) => void;
}) {
const track = useTrackDesignInput();
const [activeFieldKey, setActiveFieldKey] = useState<string | null>(
element.textFields[0]?.key ?? null,
);
@@ -300,7 +306,10 @@ export function FlatTextSection({
/>
<button
type="button"
onClick={() => void onAddTextField(activeField.key)}
onClick={() => {
track("button", "Add text field");
void onAddTextField(activeField.key);
}}
className="mt-0.5 flex items-center gap-[5px] text-[10px] text-panel-text-4 hover:text-panel-text-2"
>
<Plus size={10} />
@@ -333,6 +342,7 @@ export function FlatTextLayerList({
onAdd: () => void;
onRemove: (fieldKey: string) => void;
}) {
const track = useTrackDesignInput();
return (
<div className="mb-2 border-l-2 border-panel-border-input py-0.5 pl-[10px]">
<div className="mb-1.5 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
@@ -368,6 +378,7 @@ export function FlatTextLayerList({
aria-label="Remove text field"
onClick={(e) => {
e.stopPropagation();
track("button", "Remove text field");
onRemove(field.key);
}}
className="flex-shrink-0 text-panel-text-4 hover:text-panel-text-1"
@@ -382,7 +393,10 @@ export function FlatTextLayerList({
<button
type="button"
data-flat-text-layer-add="true"
onClick={onAdd}
onClick={() => {
track("button", "Add text field");
onAdd();
}}
className="mt-1 flex items-center gap-[5px] text-[10px] text-panel-text-4 hover:text-panel-text-2"
>
<Plus size={10} />