@hyperframes/studio 0.6.0-alpha.12 → 0.6.0-alpha.13

package/src/components/editor/PropertyPanel.tsx

@@ -547,18 +547,65 @@ function MetricField({
   value,
   disabled,
   liveCommit,
+  scrub,
   onCommit,
 }: {
   label: string;
   value: string;
   disabled?: boolean;
   liveCommit?: boolean;
+  scrub?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
+  const scrubRef = useRef<{
+    startX: number;
+    startValue: number;
+    pointerId: number;
+  } | null>(null);
+
+  const handleScrubPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLSpanElement>) => {
+      if (disabled || !scrub) return;
+      const parsed = parseFloat(value);
+      if (!Number.isFinite(parsed)) return;
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+      scrubRef.current = { startX: e.clientX, startValue: parsed, pointerId: e.pointerId };
+    },
+    [disabled, scrub, value],
+  );
+
+  const handleScrubPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLSpanElement>) => {
+      const state = scrubRef.current;
+      if (!state) return;
+      const delta = e.clientX - state.startX;
+      const next = Math.round(state.startValue + delta);
+      onCommit(String(next));
+    },
+    [onCommit],
+  );
+
+  const handleScrubPointerUp = useCallback(() => {
+    scrubRef.current = null;
+  }, []);
+
+  const scrubProps =
+    scrub && !disabled
+      ? ({
+          className:
+            "flex-shrink-0 text-[11px] font-medium text-neutral-500 cursor-ew-resize select-none",
+          onPointerDown: handleScrubPointerDown,
+          onPointerMove: handleScrubPointerMove,
+          onPointerUp: handleScrubPointerUp,
+        } as const)
+      : ({
+          className: "flex-shrink-0 text-[11px] font-medium text-neutral-500",
+        } as const);
+
   return (
     <div className={FIELD}>
       <div className="flex min-w-0 items-center gap-3">
-        <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">{label}</span>
+        <span {...scrubProps}>{label}</span>
         <CommitField
           value={value}
           disabled={disabled}
@@ -769,8 +816,8 @@ function fontSourceRank(source: FontSource): number {
   if (source === "Current") return 0;
   if (source === "Document") return 1;
   if (source === "Imported") return 2;
-  if (source === "Local") return 3;
-  if (source === "Google") return 4;
+  if (source === "Google") return 3;
+  if (source === "Local") return 4;
   return 5;
 }
 
@@ -841,16 +888,44 @@ function loadImportedFontStylesheet(asset: ImportedFontAsset): void {
   document.head.appendChild(style);
 }
 
+const ALL_WEIGHTS = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
+const WEIGHT_LABELS: Record<string, string> = {
+  "100": "100 · Thin",
+  "200": "200 · Extra Light",
+  "300": "300 · Light",
+  "400": "400 · Regular",
+  "500": "500 · Medium",
+  "600": "600 · Semi Bold",
+  "700": "700 · Bold",
+  "800": "800 · Extra Bold",
+  "900": "900 · Black",
+};
+
+function detectAvailableWeights(fontFamily: string): string[] {
+  const fonts = document.fonts;
+  if (!fonts) return ALL_WEIGHTS;
+  const family = fontFamily.split(",")[0]?.trim().replace(/['"]/g, "");
+  if (!family) return ALL_WEIGHTS;
+  const available: string[] = [];
+  for (const w of ALL_WEIGHTS) {
+    if (fonts.check(`${w} 16px "${family}"`)) available.push(w);
+  }
+  return available.length > 0 ? available : ALL_WEIGHTS;
+}
+
 function FontWeightField({
   value,
   disabled,
+  fontFamily,
   onCommit,
 }: {
   value: string;
   disabled?: boolean;
+  fontFamily?: string;
   onCommit: (nextValue: string) => void;
 }) {
-  const options = ["300", "400", "500", "600", "700", "800"];
+  const options = fontFamily ? detectAvailableWeights(fontFamily) : ALL_WEIGHTS;
+  const displayOptions = value && !options.includes(value) ? [value, ...options] : options;
   return (
     <div className={FIELD}>
       <div className="flex min-w-0 items-center gap-3">
@@ -861,9 +936,9 @@ function FontWeightField({
           onChange={(e) => onCommit(e.target.value)}
           className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
         >
-          {options.map((option) => (
+          {displayOptions.map((option) => (
             <option key={option} value={option}>
-              {option}
+              {WEIGHT_LABELS[option] ?? option}
             </option>
           ))}
         </select>
@@ -1022,13 +1097,20 @@ function FontFamilyField({
 
   const options = useMemo(() => {
     const documentFonts = collectDocumentFontFamilies();
+    const googleSet = new Set(googleFonts.map((f) => f.toLowerCase()));
+    const taggedLocalFonts = localFonts.map(
+      (family): FontOption => ({
+        family,
+        source: googleSet.has(family.toLowerCase()) ? "Google" : "Local",
+      }),
+    );
     return sortFontOptions(
       uniqueFontOptions([
         { family: currentFamily, source: "Current" },
         ...documentFonts.map((family): FontOption => ({ family, source: "Document" })),
         ...projectFontAssets,
-        ...localFonts.map((family): FontOption => ({ family, source: "Local" })),
         ...googleFonts.map((family): FontOption => ({ family, source: "Google" })),
+        ...taggedLocalFonts,
         ...DEFAULT_FONT_FAMILIES.map((family): FontOption => ({ family, source: "System" })),
       ]),
     );
@@ -1036,7 +1118,21 @@ function FontFamilyField({
 
   const filteredOptions = useMemo(() => {
     const matches = options.filter((option) => fontMatchesQuery(option.family, query));
-    return matches.slice(0, query.trim() ? 120 : 160);
+    if (query.trim()) return matches.slice(0, 200);
+    const bySource = new Map<string, FontOption[]>();
+    for (const m of matches) {
+      const list = bySource.get(m.source) ?? [];
+      list.push(m);
+      bySource.set(m.source, list);
+    }
+    const result: FontOption[] = [];
+    for (const s of ["Current", "Document", "Imported"]) {
+      result.push(...(bySource.get(s) ?? []));
+    }
+    result.push(...(bySource.get("Google") ?? []).slice(0, 100));
+    result.push(...(bySource.get("Local") ?? []).slice(0, 80));
+    result.push(...(bySource.get("System") ?? []));
+    return result;
   }, [options, query]);
 
   const importLocalFont = async (family: string): Promise<ImportedFontAsset | null> => {
@@ -1226,21 +1322,36 @@ function AdvancedTextControls({
   return (
     <div className="space-y-4">
       <div className={RESPONSIVE_GRID}>
-        <MetricField
+        <SelectField
           label="Line"
           value={getTextStyleValue(field, inheritedStyles, "line-height", "normal")}
           disabled={disabled}
-          liveCommit
-          onCommit={(next) =>
+          options={["normal", "1", "1.1", "1.2", "1.25", "1.3", "1.4", "1.5", "1.6", "1.75", "2"]}
+          onChange={(next) =>
             onCommit("line-height", normalizeTextMetricValue("line-height", next))
           }
         />
-        <MetricField
+        <SelectField
           label="Track"
           value={getTextStyleValue(field, inheritedStyles, "letter-spacing", "0px")}
           disabled={disabled}
-          liveCommit
-          onCommit={(next) =>
+          options={[
+            "0px",
+            "-0.05em",
+            "-0.04em",
+            "-0.03em",
+            "-0.02em",
+            "-0.01em",
+            "0em",
+            "0.01em",
+            "0.02em",
+            "0.03em",
+            "0.05em",
+            "0.1em",
+            "0.15em",
+            "0.2em",
+          ]}
+          onChange={(next) =>
             onCommit("letter-spacing", normalizeTextMetricValue("letter-spacing", next))
           }
         />
@@ -1266,7 +1377,7 @@ function AdvancedTextControls({
         value={getTextStyleValue(field, inheritedStyles, "font-style", "normal")}
         disabled={disabled}
         onChange={(next) => onCommit("font-style", next)}
-        options={["normal", "italic", "oblique"]}
+        options={["normal", "italic"]}
       />
     </div>
   );
@@ -2245,6 +2356,16 @@ export const PropertyPanel = memo(function PropertyPanel({
     parsePxMetricValue(styles["border-width"] ?? "") ??
     parsePxMetricValue(styles["border-top-width"] ?? "") ??
     0;
+  const hasVisualBackground =
+    (styles.background != null && styles.background !== "none" && styles.background !== "") ||
+    (styles["background-color"] != null &&
+      styles["background-color"] !== "transparent" &&
+      styles["background-color"] !== "rgba(0, 0, 0, 0)" &&
+      styles["background-color"] !== "") ||
+    (styles["background-image"] != null &&
+      styles["background-image"] !== "none" &&
+      styles["background-image"] !== "") ||
+    borderWidthValue > 0;
   const borderStyleValue = styles["border-style"] || styles["border-top-style"] || "none";
   const borderColorValue =
     styles["border-color"] || styles["border-top-color"] || "rgba(255, 255, 255, 0.18)";
@@ -2402,6 +2523,9 @@ export const PropertyPanel = memo(function PropertyPanel({
                           styles["font-weight"] ||
                           "400"
                         }
+                        fontFamily={
+                          activeField.computedStyles["font-family"] || styles["font-family"]
+                        }
                         disabled={false}
                         onCommit={(next) =>
                           onSetTextFieldStyle(activeField.key, "font-weight", next)
@@ -2530,6 +2654,7 @@ export const PropertyPanel = memo(function PropertyPanel({
                       />
                       <FontWeightField
                         value={activeField.computedStyles["font-weight"] || "400"}
+                        fontFamily={activeField.computedStyles["font-family"]}
                         disabled={false}
                         onCommit={(next) =>
                           onSetTextFieldStyle(activeField.key, "font-weight", next)
@@ -2570,24 +2695,28 @@ export const PropertyPanel = memo(function PropertyPanel({
               label="X"
               value={formatPxMetricValue(manualOffset.x)}
               disabled={manualOffsetEditingDisabled}
+              scrub
               onCommit={(next) => commitManualOffset("x", next)}
             />
             <MetricField
               label="Y"
               value={formatPxMetricValue(manualOffset.y)}
               disabled={manualOffsetEditingDisabled}
+              scrub
               onCommit={(next) => commitManualOffset("y", next)}
             />
             <MetricField
               label="W"
               value={formatPxMetricValue(resolvedWidth)}
               disabled={manualSizeEditingDisabled}
+              scrub
               onCommit={(next) => commitManualSize("width", next)}
             />
             <MetricField
               label="H"
               value={formatPxMetricValue(resolvedHeight)}
               disabled={manualSizeEditingDisabled}
+              scrub
               onCommit={(next) => commitManualSize("height", next)}
             />
           </div>
@@ -2640,18 +2769,20 @@ export const PropertyPanel = memo(function PropertyPanel({
 
         {showEditableSections && (
           <>
-            <Section title="Radius" icon={<Settings size={15} />}>
-              <SliderControl
-                value={radiusValue}
-                min={0}
-                max={Math.max(240, Math.ceil(radiusValue))}
-                step={1}
-                disabled={styleEditingDisabled}
-                displayValue={`${formatNumericValue(radiusValue)}px`}
-                formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
-                onCommit={(next) => onSetStyle("border-radius", `${formatNumericValue(next)}px`)}
-              />
-            </Section>
+            {hasVisualBackground && (
+              <Section title="Radius" icon={<Settings size={15} />}>
+                <SliderControl
+                  value={radiusValue}
+                  min={0}
+                  max={Math.max(240, Math.ceil(radiusValue))}
+                  step={1}
+                  disabled={styleEditingDisabled}
+                  displayValue={`${formatNumericValue(radiusValue)}px`}
+                  formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+                  onCommit={(next) => onSetStyle("border-radius", `${formatNumericValue(next)}px`)}
+                />
+              </Section>
+            )}
 
             <Section title="Stroke" icon={<Square size={15} />}>
               <div className="space-y-4">

package/src/components/editor/domEditing.ts

@@ -453,16 +453,49 @@ function getElementDepth(el: HTMLElement): number {
   return depth;
 }
 
+const VISUAL_LEAF_TAGS = new Set(["img", "video", "canvas", "svg", "audio"]);
+
+function isElementComputedVisible(el: HTMLElement): boolean {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return true;
+  let current: HTMLElement | null = el;
+  while (current) {
+    const computed = win.getComputedStyle(current);
+    if (computed.display === "none" || computed.visibility === "hidden") return false;
+    const opacity = Number.parseFloat(computed.opacity);
+    if (Number.isFinite(opacity) && opacity <= 0.01) return false;
+    current = current.parentElement;
+  }
+  return true;
+}
+
+function isEmptyVisualContainer(el: HTMLElement): boolean {
+  const tag = el.tagName.toLowerCase();
+  if (VISUAL_LEAF_TAGS.has(tag)) return false;
+
+  const children = el.children;
+  if (children.length === 0) {
+    const text = (el.textContent ?? "").trim();
+    return text.length === 0;
+  }
+
+  for (let i = 0; i < children.length; i += 1) {
+    const child = children[i];
+    if (!isHtmlElement(child)) continue;
+    if (VISUAL_LEAF_TAGS.has(child.tagName.toLowerCase())) return false;
+    if (isElementComputedVisible(child)) return false;
+  }
+
+  return true;
+}
+
 function hasRenderedBox(el: HTMLElement): boolean {
   const rect = el.getBoundingClientRect();
   if (rect.width <= 1 || rect.height <= 1) return false;
 
-  const computed = el.ownerDocument.defaultView?.getComputedStyle(el);
-  if (!computed) return true;
-  if (computed.display === "none" || computed.visibility === "hidden") return false;
+  if (!isElementComputedVisible(el)) return false;
 
-  const opacity = Number.parseFloat(computed.opacity);
-  if (Number.isFinite(opacity) && opacity <= 0.01) return false;
+  if (isEmptyVisualContainer(el)) return false;
 
   return true;
 }

package/src/components/editor/manualEditingAvailability.test.ts

@@ -16,10 +16,10 @@ describe("manual editing availability", () => {
     vi.resetModules();
   });
 
-  it("enables inspector selection by default while motion and manual dragging stay opt-in", async () => {
+  it("enables inspector selection and manual dragging by default while motion stays opt-in", async () => {
     const availability = await loadAvailabilityWithEnv({});
 
-    expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(false);
+    expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(true);
     expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(true);
     expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
     expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);

package/src/components/editor/manualEditingAvailability.ts

@@ -32,7 +32,7 @@ const env = import.meta.env as StudioFeatureFlagEnv;
 export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   [STUDIO_PREVIEW_MANUAL_DRAGGING_ENV, "VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],
-  false,
+  true,
 );
 
 export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(

package/src/components/nle/NLELayout.tsx

@@ -52,9 +52,6 @@ interface NLELayoutProps {
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
-  onInspectTimelineElement?: (element: TimelineElement) => void;
-  inspectedTimelineElementId?: string | null;
-  timelineLayerChildCounts?: ReadonlyMap<string, number>;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
   /** Whether the timeline panel is visible (default: true) */
@@ -91,9 +88,6 @@ export const NLELayout = memo(function NLELayout({
   onResizeElement,
   onBlockedEditAttempt,
   onSelectTimelineElement,
-  onInspectTimelineElement,
-  inspectedTimelineElementId,
-  timelineLayerChildCounts,
   onCompIdToSrcChange,
   timelineVisible,
   onToggleTimeline,
@@ -460,10 +454,6 @@ export const NLELayout = memo(function NLELayout({
                 onResizeElement={onResizeElement}
                 onBlockedEditAttempt={onBlockedEditAttempt}
                 onSelectElement={onSelectTimelineElement}
-                onInspectElement={onInspectTimelineElement}
-                inspectedElementId={inspectedTimelineElementId}
-                layerChildCounts={timelineLayerChildCounts}
-                disabled={timelineDisabled}
               />
             </div>
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

package/src/player/components/Player.tsx

@@ -36,6 +36,8 @@ function getShaderTransitionLoading(event: Event): boolean | null {
   return state.loading === true && state.ready !== true;
 }
 
+const COMPOSITION_LOADING_OVERLAY_DELAY_MS = 400;
+
 export function shouldShowCompositionLoadingOverlay(compositionLoading: boolean): boolean {
   return compositionLoading;
 }
@@ -124,6 +126,20 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
     const [assetOverlayFading, setAssetOverlayFading] = useState(false);
     const [shaderTransitionLoading, setShaderTransitionLoading] = useState(false);
     const [compositionLoading, setCompositionLoading] = useState(true);
+    const [compositionOverlayDeferred, setCompositionOverlayDeferred] = useState(true);
+
+    // eslint-disable-next-line no-restricted-syntax
+    useEffect(() => {
+      if (!compositionLoading) {
+        setCompositionOverlayDeferred(true);
+        return;
+      }
+      const timer = setTimeout(
+        () => setCompositionOverlayDeferred(false),
+        COMPOSITION_LOADING_OVERLAY_DELAY_MS,
+      );
+      return () => clearTimeout(timer);
+    }, [compositionLoading]);
 
     useMountEffect(() => {
       const container = containerRef.current;
@@ -281,7 +297,9 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
     }, [assetsLoading]);
 
     const showCompositionOverlay =
-      !suppressLoadingOverlay && shouldShowCompositionLoadingOverlay(compositionLoading);
+      !suppressLoadingOverlay &&
+      !compositionOverlayDeferred &&
+      shouldShowCompositionLoadingOverlay(compositionLoading);
     const showAssetOverlay =
       assetOverlayVisible && !shaderTransitionLoading && !showCompositionOverlay;
 

package/src/player/components/Timeline.test.ts

@@ -12,8 +12,6 @@ import {
   shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
 } from "./Timeline";
-import { TIMELINE_CLIP_CONTROL_Z_INDEX } from "./TimelineClip";
-import { COMPOSITION_THUMBNAIL_LABEL_Z_INDEX } from "./CompositionThumbnail";
 import { formatTime } from "../lib/time";
 
 describe("generateTicks", () => {
@@ -166,12 +164,6 @@ describe("shouldAutoScrollTimeline", () => {
   });
 });
 
-describe("timeline clip controls", () => {
-  it("renders layer controls above composition thumbnail chrome", () => {
-    expect(TIMELINE_CLIP_CONTROL_Z_INDEX).toBeGreaterThan(COMPOSITION_THUMBNAIL_LABEL_Z_INDEX);
-  });
-});
-
 describe("getTimelineScrollLeftForZoomTransition", () => {
   it("resets horizontal scroll when switching from manual zoom back to fit", () => {
     expect(getTimelineScrollLeftForZoomTransition("manual", "fit", 480)).toBe(0);