@hyperframes/studio 0.6.31 → 0.6.33

package/src/components/sidebar/LeftSidebar.tsx

@@ -3,20 +3,23 @@ import {
   useState,
   useCallback,
   useImperativeHandle,
+  useRef,
   forwardRef,
   type ReactNode,
 } from "react";
 import { CompositionsTab } from "./CompositionsTab";
 import { AssetsTab } from "./AssetsTab";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
-import { BlocksTab } from "./BlocksTab";
+import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
 import { FileTree } from "../editor/FileTree";
 import { STUDIO_BLOCKS_PANEL_ENABLED } from "../editor/manualEditingAvailability";
+import { Tooltip } from "../ui";
 
 export type SidebarTab = "compositions" | "assets" | "code" | "blocks";
 
 export interface LeftSidebarHandle {
   selectTab: (tab: SidebarTab) => void;
+  getTab: () => SidebarTab;
 }
 
 const STORAGE_KEY = "hf-studio-sidebar-tab";
@@ -53,6 +56,7 @@ interface LeftSidebarProps {
   linting?: boolean;
   onToggleCollapse?: () => void;
   onAddBlock?: (blockName: string) => void;
+  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
   takeoverContent?: ReactNode;
 }
 
@@ -82,11 +86,14 @@ export const LeftSidebar = memo(
       linting,
       onToggleCollapse,
       onAddBlock,
+      onPreviewBlock,
       takeoverContent,
     },
     ref,
   ) {
     const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
+    const tabRef = useRef(tab);
+    tabRef.current = tab;
 
     const selectTab = useCallback((t: SidebarTab) => {
       setTab(t);
@@ -94,7 +101,9 @@ export const LeftSidebar = memo(
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
 
-    useImperativeHandle(ref, () => ({ selectTab }), [selectTab]);
+    const getTab = useCallback(() => tabRef.current, []);
+
+    useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
 
     return (
       <div
@@ -116,51 +125,59 @@ export const LeftSidebar = memo(
                       : "1fr 1fr 1fr",
                   }}
                 >
-                  <button
-                    type="button"
-                    onClick={() => selectTab("code")}
-                    className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                      tab === "code"
-                        ? "bg-neutral-800 text-white"
-                        : "text-neutral-500 hover:text-neutral-200"
-                    }`}
-                  >
-                    Code
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => selectTab("compositions")}
-                    className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                      tab === "compositions"
-                        ? "bg-neutral-800 text-white"
-                        : "text-neutral-500 hover:text-neutral-200"
-                    }`}
-                  >
-                    Comps
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => selectTab("assets")}
-                    className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                      tab === "assets"
-                        ? "bg-neutral-800 text-white"
-                        : "text-neutral-500 hover:text-neutral-200"
-                    }`}
-                  >
-                    Assets
-                  </button>
-                  {STUDIO_BLOCKS_PANEL_ENABLED && (
+                  <Tooltip label="Source code editor" side="bottom">
                     <button
                       type="button"
-                      onClick={() => selectTab("blocks")}
+                      onClick={() => selectTab("code")}
                       className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                        tab === "blocks"
+                        tab === "code"
                           ? "bg-neutral-800 text-white"
                           : "text-neutral-500 hover:text-neutral-200"
                       }`}
                     >
-                      Blocks
+                      Code
                     </button>
+                  </Tooltip>
+                  <Tooltip label="Compositions and sub-compositions" side="bottom">
+                    <button
+                      type="button"
+                      onClick={() => selectTab("compositions")}
+                      className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
+                        tab === "compositions"
+                          ? "bg-neutral-800 text-white"
+                          : "text-neutral-500 hover:text-neutral-200"
+                      }`}
+                    >
+                      Comps
+                    </button>
+                  </Tooltip>
+                  <Tooltip label="Videos, images, audio, fonts" side="bottom">
+                    <button
+                      type="button"
+                      onClick={() => selectTab("assets")}
+                      className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
+                        tab === "assets"
+                          ? "bg-neutral-800 text-white"
+                          : "text-neutral-500 hover:text-neutral-200"
+                      }`}
+                    >
+                      Assets
+                    </button>
+                  </Tooltip>
+                  {STUDIO_BLOCKS_PANEL_ENABLED && (
+                    <Tooltip label="Browse blocks and components" side="bottom">
+                      <button
+                        type="button"
+                        onClick={() => selectTab("blocks")}
+                        className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
+                          tab === "blocks"
+                            ? "bg-neutral-800 text-white"
+                            : "text-neutral-500 hover:text-neutral-200"
+                        }`}
+                      >
+                        Catalog
+                      </button>
+                    </Tooltip>
                   )}
                 </div>
                 {onToggleCollapse && (
@@ -238,8 +255,8 @@ export const LeftSidebar = memo(
               </div>
             )}
 
-            {STUDIO_BLOCKS_PANEL_ENABLED && tab === "blocks" && onAddBlock && (
-              <BlocksTab onAddBlock={onAddBlock} />
+            {STUDIO_BLOCKS_PANEL_ENABLED && tab === "blocks" && (
+              <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
             )}
 
             {/* Lint button pinned at the bottom */}

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,63 @@
+import { useState, useRef, useCallback, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+interface TooltipProps {
+  label: string;
+  children: ReactNode;
+  delay?: number;
+  side?: "top" | "bottom";
+}
+
+export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipProps) {
+  const [visible, setVisible] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const triggerRef = useRef<HTMLSpanElement>(null);
+
+  const show = useCallback(() => {
+    timerRef.current = setTimeout(() => {
+      const el = triggerRef.current;
+      if (!el) return;
+      const child = el.firstElementChild as HTMLElement | null;
+      const rect = (child ?? el).getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) return;
+      setPos({
+        x: rect.left + rect.width / 2,
+        y: side === "top" ? rect.top - 6 : rect.bottom + 6,
+      });
+      setVisible(true);
+    }, delay);
+  }, [delay, side]);
+
+  const hide = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setVisible(false);
+  }, []);
+
+  return (
+    <>
+      <span ref={triggerRef} onPointerEnter={show} onPointerLeave={hide} className="contents">
+        {children}
+      </span>
+      {visible &&
+        createPortal(
+          <div
+            className="fixed z-[200] pointer-events-none"
+            style={{
+              left: pos.x,
+              top: pos.y,
+              transform: side === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
+            }}
+          >
+            <div className="px-2 py-1 rounded-md bg-neutral-800 border border-neutral-700/50 text-[10px] font-medium text-neutral-200 whitespace-nowrap shadow-lg">
+              {label}
+            </div>
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}

package/src/components/ui/index.ts

@@ -2,3 +2,4 @@
 export { Button, IconButton } from "./Button";
 export { HyperframesLoader, StatusFrame } from "./HyperframesLoader";
 export type { HyperframesLoaderProps } from "./HyperframesLoader";
+export { Tooltip } from "./Tooltip";

package/src/hooks/useBlockCatalog.ts

@@ -56,7 +56,11 @@ export function useBlockCatalog() {
     if (search.trim()) {
       const q = search.toLowerCase();
       result = result.filter(
-        (b) => b.title.toLowerCase().includes(q) || b.description.toLowerCase().includes(q),
+        (b) =>
+          b.title.toLowerCase().includes(q) ||
+          b.description.toLowerCase().includes(q) ||
+          b.category.toLowerCase().includes(q) ||
+          b.tags?.some((t) => t.toLowerCase().includes(q)),
       );
     }
     return result;

package/src/hooks/useDomEditSession.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
@@ -56,6 +56,7 @@ export interface UseDomEditSessionParams {
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
   selectSidebarTab?: (tab: SidebarTab) => void;
+  getSidebarTab?: () => SidebarTab;
 }
 
 // ── Hook ──
@@ -93,6 +94,7 @@ export function useDomEditSession({
   setRefreshKey: _setRefreshKey,
   openSourceForSelection,
   selectSidebarTab,
+  getSidebarTab,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
 
@@ -281,6 +283,22 @@ export function useDomEditSession({
     applyStudioManualEditsToPreviewRef,
   ]);
 
+  // Auto-reveal source when an element is selected while the Code tab is active.
+  // Use a ref for the callback so the effect only fires on selection changes,
+  // not when openSourceForSelection is recreated due to editingFile content updates.
+  const openSourceRef = useRef(openSourceForSelection);
+  openSourceRef.current = openSourceForSelection;
+  useEffect(() => {
+    if (!domEditSelection || !openSourceRef.current || !getSidebarTab) return;
+    if (!domEditSelection.sourceFile) return;
+    if (getSidebarTab() !== "code") return;
+    openSourceRef.current(domEditSelection.sourceFile, {
+      id: domEditSelection.id,
+      selector: domEditSelection.selector,
+      selectorIndex: domEditSelection.selectorIndex,
+    });
+  }, [domEditSelection, getSidebarTab]);
+
   return {
     // State
     domEditSelection,

package/src/hooks/useFileManager.ts

@@ -122,6 +122,9 @@ export function useFileManager({
   const handleFileSelect = useCallback((path: string) => {
     const pid = projectIdRef.current;
     if (!pid) return;
+    revealAbortRef.current?.abort();
+    revealAbortRef.current = null;
+    revealRequestIdRef.current++;
     // Skip fetching binary content for media files — just set the path for preview
     if (isMediaFile(path)) {
       setEditingFile({ path, content: null });

package/src/main.tsx

@@ -23,6 +23,12 @@ function errorProps(value: unknown): {
 }
 
 window.addEventListener("error", (event) => {
+  if (event.message?.includes("ResizeObserver loop")) {
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    return;
+  }
+
   trackStudioEvent("unhandled_error", {
     ...errorProps(event.error),
     error_message: event.message,