@hyperframes/studio 0.6.88 → 0.6.90

package/src/components/editor/manualEditsDom.ts

@@ -32,6 +32,7 @@ import {
 } from "./manualEditsTypes";
 import { roundRotationAngle } from "./manualEditsParsing";
 import { applyStudioMotionFromDom } from "./studioMotion";
+import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
 let studioManualEditGestureId = 0;
@@ -519,70 +520,23 @@ function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
 
 function reapplyPathOffsets(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_PATH_OFFSET_ATTR)) {
-    // Skip elements where GSAP actively animates position — GSAP bakes the
-    // CSS translate into its transform and sets translate: none every tick.
-    // Stripping/restoring would oscillate against GSAP's rendering.
-    if (gsapAnimatesProperty(el, "x", "y")) continue;
+    const gsapSkip = gsapAnimatesProperty(el, "x", "y");
     const x = el.style.getPropertyValue(STUDIO_OFFSET_X_PROP);
     const y = el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
+    if (gsapSkip) continue;
     if (x || y) {
-      applyStudioPathOffset(el, {
-        x: Number.parseFloat(x) || 0,
-        y: Number.parseFloat(y) || 0,
-      });
+      applyStudioPathOffset(
+        el,
+        {
+          x: Number.parseFloat(x) || 0,
+          y: Number.parseFloat(y) || 0,
+        },
+        { updateBase: false },
+      );
     }
   }
 }
 
-function gsapAnimatesProperty(el: HTMLElement, ...props: string[]): boolean {
-  const win = el.ownerDocument.defaultView as
-    | (Window & {
-        __timelines?: Record<
-          string,
-          {
-            getChildren?: (
-              deep: boolean,
-            ) => Array<{ targets?: () => Element[]; vars?: Record<string, unknown> }>;
-          }
-        >;
-      })
-    | null;
-  if (!win?.__timelines) return false;
-  const propSet = new Set(props);
-  for (const tl of Object.values(win.__timelines)) {
-    if (!tl?.getChildren) continue;
-    try {
-      for (const child of tl.getChildren(true)) {
-        if (!child.targets || !child.vars) continue;
-        let targetsEl = false;
-        for (const t of child.targets()) {
-          if (t === el || (el.id && t.id === el.id)) {
-            targetsEl = true;
-            break;
-          }
-        }
-        if (!targetsEl) continue;
-        const vars = child.vars;
-        for (const p of propSet) {
-          if (p in vars) return true;
-        }
-        if (vars.keyframes && typeof vars.keyframes === "object") {
-          for (const kfVal of Object.values(vars.keyframes as Record<string, unknown>)) {
-            if (kfVal && typeof kfVal === "object") {
-              for (const p of propSet) {
-                if (p in (kfVal as Record<string, unknown>)) return true;
-              }
-            }
-          }
-        }
-      }
-    } catch {
-      /* */
-    }
-  }
-  return false;
-}
-
 function reapplyBoxSizes(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_BOX_SIZE_ATTR)) {
     if (gsapAnimatesProperty(el, "width", "height")) continue;

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

@@ -66,6 +66,7 @@ describe("measureManualOffsetDragScreenToOffsetMatrix", () => {
   it("measures the element center response and restores probe styles", () => {
     const window = new Window();
     const element = window.document.createElement("div");
+    element.setAttribute("data-hf-studio-path-offset", "true");
     window.document.body.append(element);
 
     element.getBoundingClientRect = () => {
@@ -109,6 +110,7 @@ describe("measureManualOffsetDragScreenToOffsetMatrix", () => {
     iframe.getBoundingClientRect = () => new window.DOMRect(50, 40, 100, 50);
 
     const element = iframeDocument.createElement("div");
+    element.setAttribute("data-hf-studio-path-offset", "true");
     iframeDocument.body.append(element);
     element.getBoundingClientRect = () => {
       const offsetX = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
@@ -130,7 +132,7 @@ describe("measureManualOffsetDragScreenToOffsetMatrix", () => {
     expect(nextOffset).toEqual({ x: 100, y: 50 });
   });
 
-  it("rejects elements whose movement response cannot be measured", () => {
+  it("returns identity matrix for non-path-offset elements with zero initial offset", () => {
     const window = new Window();
     const element = window.document.createElement("div");
     window.document.body.append(element);
@@ -138,6 +140,21 @@ describe("measureManualOffsetDragScreenToOffsetMatrix", () => {
 
     const measured = measureManualOffsetDragScreenToOffsetMatrix(element, { x: 0, y: 0 });
 
+    expect(measured.ok).toBe(true);
+    if (measured.ok) {
+      expectMatrixClose(measured.matrix, { a: 1, b: 0, c: 0, d: 1 });
+    }
+  });
+
+  it("rejects path-offset elements whose movement response cannot be measured", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    element.setAttribute("data-hf-studio-path-offset", "true");
+    window.document.body.append(element);
+    element.getBoundingClientRect = () => new window.DOMRect(10, 20, 12, 8);
+
+    const measured = measureManualOffsetDragScreenToOffsetMatrix(element, { x: 0, y: 0 });
+
     expect(measured.ok).toBe(false);
   });
 });

package/src/components/editor/manualOffsetDrag.ts

@@ -142,8 +142,18 @@ export function applyManualOffsetDragMatrix(matrix: ManualOffsetDragMatrix, poin
 export function measureManualOffsetDragScreenToOffsetMatrix(
   element: HTMLElement,
   initialOffset: { x: number; y: number },
-  options: { probeSize?: number } = {},
+  options: { probeSize?: number; scaleX?: number; scaleY?: number } = {},
 ): { ok: true; matrix: ManualOffsetDragMatrix } | { ok: false; reason: string } {
+  if (
+    !element.hasAttribute("data-hf-studio-path-offset") &&
+    initialOffset.x === 0 &&
+    initialOffset.y === 0
+  ) {
+    const sx = options.scaleX || 1;
+    const sy = options.scaleY || 1;
+    return { ok: true, matrix: { a: 1 / sx, b: 0, c: 0, d: 1 / sy } };
+  }
+
   const probeSize = options.probeSize ?? DEFAULT_OFFSET_PROBE_PX;
   if (!Number.isFinite(probeSize) || probeSize <= 0) {
     return { ok: false, reason: "Invalid movement probe size." };
@@ -235,8 +245,6 @@ export function createManualOffsetDragMember(input: {
   input.element.setAttribute("data-hf-drag-initial-offset-x", String(initialOffset.x));
   input.element.setAttribute("data-hf-drag-initial-offset-y", String(initialOffset.y));
 
-  // Capture GSAP's x/y BEFORE any draft applies gsap.set — the commit path
-  // needs the original (uncorrupted) GSAP position to compute the new keyframe value.
   const win = input.element.ownerDocument.defaultView as
     | (Window & {
         gsap?: { getProperty?: (el: Element, prop: string) => number };
@@ -248,8 +256,6 @@ export function createManualOffsetDragMember(input: {
   input.element.setAttribute("data-hf-drag-gsap-base-x", String(gsapX));
   input.element.setAttribute("data-hf-drag-gsap-base-y", String(gsapY));
 
-  // Pause GSAP timelines during drag to prevent the tween from overwriting
-  // the draft's gsap.set on every tick. Track which we paused to resume later.
   if (win?.__timelines) {
     const paused: string[] = [];
     for (const [id, tl] of Object.entries(win.__timelines)) {
@@ -269,7 +275,10 @@ export function createManualOffsetDragMember(input: {
 
   const initialPathOffset = captureStudioPathOffset(input.element);
   const gestureToken = beginStudioManualEditGesture(input.element);
-  const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset);
+  const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset, {
+    scaleX: input.rect.editScaleX,
+    scaleY: input.rect.editScaleY,
+  });
   if (!measured.ok) {
     // Fallback: when GSAP transforms interfere with probe measurement, use
     // the preview scale as an approximation. The commit path reads the actual
@@ -363,7 +372,7 @@ export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): v
   }
 }
 
-function resumeGsapTimelines(element: HTMLElement): void {
+export function resumeGsapTimelines(element: HTMLElement): void {
   const ids = element.getAttribute("data-hf-drag-paused-timelines");
   element.removeAttribute("data-hf-drag-paused-timelines");
   if (!ids) return;
@@ -374,9 +383,6 @@ function resumeGsapTimelines(element: HTMLElement): void {
       })
     | null;
   if (!win) return;
-  // Re-seek to the current time to restore the paused timeline's render state.
-  // play() would start playback; pause() already stops. Seek re-renders at the
-  // current position without starting playback.
   const t = win.__player?.getTime?.() ?? 0;
   win.__player?.seek?.(t);
 }

package/src/components/editor/propertyPanel3dTransform.tsx

@@ -0,0 +1,133 @@
+import type { DomEditSelection } from "./domEditingTypes";
+import { STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
+import { MetricField } from "./propertyPanelPrimitives";
+import { KeyframeNavigation } from "./KeyframeNavigation";
+import { formatPxMetricValue, parsePxMetricValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
+
+type KeyframeEntry = Array<{
+  percentage: number;
+  properties: Record<string, number | string>;
+  ease?: string;
+}> | null;
+
+interface PropertyPanel3dTransformProps {
+  gsapRuntimeValues: Record<string, number>;
+  gsapAnimId: string | null;
+  gsapKeyframes: KeyframeEntry;
+  currentPct: number;
+  elStart: number;
+  elDuration: number;
+  element: DomEditSelection;
+  onCommitAnimatedProperty?: (
+    element: DomEditSelection,
+    property: string,
+    value: number,
+  ) => Promise<void>;
+  onSeekToTime?: (time: number) => void;
+  onRemoveKeyframe?: (animId: string, pct: number) => void;
+  onConvertToKeyframes?: (animId: string) => void;
+}
+
+export function PropertyPanel3dTransform({
+  gsapRuntimeValues,
+  gsapAnimId,
+  gsapKeyframes,
+  currentPct,
+  elStart,
+  elDuration,
+  element,
+  onCommitAnimatedProperty,
+  onSeekToTime,
+  onRemoveKeyframe,
+  onConvertToKeyframes,
+}: PropertyPanel3dTransformProps) {
+  return (
+    <div className="mt-3 border-t border-neutral-800/40 pt-3">
+      <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
+        3D Transform
+      </div>
+      <div className={RESPONSIVE_GRID}>
+        <div className="flex items-center gap-1">
+          <div className="flex-1">
+            <MetricField
+              label="Z"
+              value={formatPxMetricValue(gsapRuntimeValues.z ?? 0)}
+              scrub
+              onCommit={(next) => {
+                const v = parsePxMetricValue(next);
+                if (v != null && onCommitAnimatedProperty) {
+                  void onCommitAnimatedProperty(element, "z", v);
+                }
+              }}
+            />
+          </div>
+          {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
+            <KeyframeNavigation
+              property="z"
+              keyframes={gsapKeyframes}
+              currentPercentage={currentPct}
+              onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+              onAddKeyframe={() => {
+                if (onCommitAnimatedProperty) {
+                  void onCommitAnimatedProperty(element, "z", gsapRuntimeValues?.z ?? 0);
+                }
+              }}
+              onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
+              onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+            />
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <div className="flex-1">
+            <MetricField
+              label="Scale"
+              value={String(gsapRuntimeValues.scale ?? 1)}
+              scrub
+              onCommit={(next) => {
+                const v = Number.parseFloat(next);
+                if (Number.isFinite(v) && onCommitAnimatedProperty) {
+                  void onCommitAnimatedProperty(element, "scale", v);
+                }
+              }}
+            />
+          </div>
+          {STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
+            <KeyframeNavigation
+              property="scale"
+              keyframes={gsapKeyframes}
+              currentPercentage={currentPct}
+              onSeek={(pct) => onSeekToTime?.(elStart + (pct / 100) * elDuration)}
+              onAddKeyframe={() => {
+                if (onCommitAnimatedProperty) {
+                  void onCommitAnimatedProperty(element, "scale", gsapRuntimeValues?.scale ?? 1);
+                }
+              }}
+              onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
+              onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+            />
+          )}
+        </div>
+        <MetricField
+          label="RotX"
+          value={`${gsapRuntimeValues.rotationX ?? 0}°`}
+          onCommit={(next) => {
+            const v = Number.parseFloat(next.replace("°", ""));
+            if (Number.isFinite(v) && onCommitAnimatedProperty) {
+              void onCommitAnimatedProperty(element, "rotationX", v);
+            }
+          }}
+        />
+        <MetricField
+          label="RotY"
+          value={`${gsapRuntimeValues.rotationY ?? 0}°`}
+          onCommit={(next) => {
+            const v = Number.parseFloat(next.replace("°", ""));
+            if (Number.isFinite(v) && onCommitAnimatedProperty) {
+              void onCommitAnimatedProperty(element, "rotationY", v);
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/editor/propertyPanelHelpers.ts

@@ -2,6 +2,7 @@ import { parseCssColor, type ParsedColor } from "./colorValue";
 import { COMMON_LOCAL_FONT_FAMILIES } from "./fontCatalog";
 import type { DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 
 export interface PropertyPanelProps {
   projectId: string;
@@ -505,3 +506,78 @@ export function computeFitToChildrenSize(
   const height = Math.round((maxY - minY) * scaleY);
   return width > 0 && height > 0 ? { width, height } : null;
 }
+
+// ── GSAP runtime value readers (used by PropertyPanel) ────────────────────
+
+export function readGsapRuntimeValuesForPanel(
+  gsapAnimId: string | null,
+  gsapAnimations: GsapAnimation[],
+  element: DomEditSelection,
+  previewIframeRef: React.RefObject<HTMLIFrameElement | null>,
+): Record<string, number> | null {
+  if (!gsapAnimId || gsapAnimations.length === 0) return null;
+  const iframe = previewIframeRef?.current;
+  if (!iframe?.contentWindow) return null;
+  const selector = element.id ? `#${element.id}` : element.selector;
+  if (!selector) return null;
+  try {
+    const gsap = (
+      iframe.contentWindow as unknown as {
+        gsap?: { getProperty: (el: Element, prop: string) => number | string };
+      }
+    ).gsap;
+    if (!gsap?.getProperty) return null;
+    const el = iframe.contentDocument?.querySelector(selector);
+    if (!el) return null;
+    const propKeys = new Set<string>();
+    for (const anim of gsapAnimations) {
+      if (anim.keyframes) {
+        for (const kf of anim.keyframes.keyframes) {
+          for (const p of Object.keys(kf.properties)) propKeys.add(p);
+        }
+      }
+      for (const p of Object.keys(anim.properties)) propKeys.add(p);
+    }
+    const result: Record<string, number> = {};
+    for (const prop of propKeys) {
+      const v = Number(gsap.getProperty(el, prop));
+      if (Number.isFinite(v)) result[prop] = Math.round(v * 100) / 100;
+    }
+    return Object.keys(result).length > 0 ? result : null;
+  } catch {
+    return null;
+  }
+}
+
+export function readGsapBorderRadiusForPanel(
+  gsapRuntimeValues: Record<string, number> | null,
+  gsapAnimations: GsapAnimation[],
+  element: DomEditSelection,
+  previewIframeRef: React.RefObject<HTMLIFrameElement | null>,
+): { tl: number; tr: number; br: number; bl: number } | null {
+  if (!gsapRuntimeValues || !("borderRadius" in gsapRuntimeValues)) {
+    const hasBRProp = gsapAnimations.some(
+      (a) =>
+        "borderRadius" in a.properties ||
+        a.keyframes?.keyframes.some((kf) => "borderRadius" in kf.properties),
+    );
+    if (!hasBRProp) return null;
+  }
+  const iframe = previewIframeRef?.current;
+  const selector = element.id ? `#${element.id}` : element.selector;
+  if (!iframe?.contentDocument || !selector) return null;
+  try {
+    const el = iframe.contentDocument.querySelector(selector);
+    if (!el) return null;
+    const cs = iframe.contentWindow!.getComputedStyle(el);
+    const parse = (v: string) => Number.parseFloat(v) || 0;
+    return {
+      tl: parse(cs.borderTopLeftRadius),
+      tr: parse(cs.borderTopRightRadius),
+      br: parse(cs.borderBottomRightRadius),
+      bl: parse(cs.borderBottomLeftRadius),
+    };
+  } catch {
+    return null;
+  }
+}

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -369,15 +369,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section
-        title="Fill"
-        icon={<Palette size={15} />}
-        accessory={
-          <div className="rounded-full border border-neutral-700 bg-neutral-900 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-400">
-            {preferredFillMode}
-          </div>
-        }
-      >
+      <Section title="Fill" icon={<Palette size={15} />}>
         <div className="space-y-4">
           <SegmentedControl
             disabled={styleEditingDisabled}

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -11,6 +11,7 @@ import {
   applyManualOffsetDragDraft,
   endManualOffsetDragMembers,
   restoreManualOffsetDragMembers,
+  resumeGsapTimelines,
 } from "./manualOffsetDrag";
 import {
   applyStudioBoxSize,
@@ -401,6 +402,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     if (g.kind === "drag" && movedDistance < BLOCKED_MOVE_THRESHOLD_PX) {
       restoreStudioPathOffset(sel.element, g.initialPathOffset);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+      resumeGsapTimelines(sel.element);
       if (box) {
         box.style.left = `${g.originLeft}px`;
         box.style.top = `${g.originTop}px`;
@@ -507,6 +509,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     if (g?.mode === "path-offset" && sel) {
       restoreStudioPathOffset(sel.element, g.initialPathOffset);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+      resumeGsapTimelines(sel.element);
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "box-size" && sel) {

package/src/components/editor/useLayerDrag.ts

@@ -138,9 +138,6 @@ export function useLayerDrag({
       const container = scrollContainerRef.current;
       if (!container) return;
 
-      e.preventDefault();
-      container.setPointerCapture(e.pointerId);
-
       dragRef.current = {
         pointerId: e.pointerId,
         startY: e.clientY,
@@ -163,6 +160,12 @@ export function useLayerDrag({
       if (!drag.activated) {
         if (Math.abs(e.clientY - drag.startY) < DRAG_THRESHOLD_PX) return;
         drag.activated = true;
+        const container = scrollContainerRef.current;
+        if (container && drag.pointerId != null) {
+          try {
+            container.setPointerCapture(drag.pointerId);
+          } catch {}
+        }
         setDragKey(visibleLayers[drag.dragLayerIndex]?.key ?? null);
       }
 

package/src/components/renders/RenderQueueItem.tsx

@@ -142,53 +142,54 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
         </div>
 
-        {/* Actions */}
-        {hovered && (
-          <div className="flex items-center gap-1 flex-shrink-0">
-            {isComplete && (
-              <button
-                onClick={handleDownload}
-                className="p-1 rounded text-panel-text-4 hover:text-panel-accent transition-colors"
-                title="Download"
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-                  <polyline points="7 10 12 15 17 10" />
-                  <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-              </button>
-            )}
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete();
-              }}
-              className="p-1 rounded text-panel-text-4 hover:text-red-400 transition-colors"
-              title="Remove"
+        {/* Actions — always visible to prevent layout shifts */}
+        <div className="flex items-center gap-1 flex-shrink-0">
+          <button
+            onClick={isComplete ? handleDownload : undefined}
+            className={`p-1 rounded transition-colors ${
+              isComplete
+                ? "text-panel-text-5 hover:text-panel-accent"
+                : "text-panel-text-5/30 pointer-events-none"
+            }`}
+            title={isComplete ? "Download" : "Rendering..."}
+            disabled={!isComplete}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
             >
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-              >
-                <path d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-        )}
+              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+            className="p-1 rounded text-panel-text-5 hover:text-red-400 transition-colors"
+            title="Remove"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   );

package/src/components/sidebar/CompositionsTab.tsx

@@ -7,6 +7,7 @@ interface CompositionsTabProps {
   onSelect: (comp: string) => void;
   onRenderComposition?: (comp: string) => void;
   isRendering?: boolean;
+  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
 }
 
 const DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
@@ -111,6 +112,7 @@ function CompCard({
   onSelect,
   onRender,
   isRendering,
+  lintInfo,
 }: {
   projectId: string;
   comp: string;
@@ -118,6 +120,7 @@ function CompCard({
   onSelect: () => void;
   onRender?: () => void;
   isRendering?: boolean;
+  lintInfo?: { count: number; messages: string[] };
 }) {
   const [hovered, setHovered] = useState(false);
   const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
@@ -215,8 +218,16 @@ function CompCard({
           tabIndex={-1}
         />
       </div>
-      <div className="min-w-0 flex-1">
-        <span className="text-[11px] font-medium text-neutral-300 truncate block">{name}</span>
+      <div
+        className="min-w-0 flex-1"
+        title={lintInfo && lintInfo.count > 0 ? lintInfo.messages.join("\n") : undefined}
+      >
+        <div className="flex items-center gap-1">
+          <span className="text-[11px] font-medium text-neutral-300 truncate">{name}</span>
+          {lintInfo && lintInfo.count > 0 && (
+            <span className="flex-shrink-0 w-2 h-2 rounded-full bg-amber-400" />
+          )}
+        </div>
         <span className="text-[9px] text-neutral-600 truncate block">{comp}</span>
       </div>
       {onRender && (
@@ -262,6 +273,7 @@ export const CompositionsTab = memo(function CompositionsTab({
   onSelect,
   onRenderComposition,
   isRendering,
+  lintFindingsByFile,
 }: CompositionsTabProps) {
   if (compositions.length === 0) {
     return (
@@ -282,6 +294,7 @@ export const CompositionsTab = memo(function CompositionsTab({
           onSelect={() => onSelect(comp)}
           onRender={onRenderComposition ? () => onRenderComposition(comp) : undefined}
           isRendering={isRendering}
+          lintInfo={lintFindingsByFile?.get(comp)}
         />
       ))}
     </div>