@hyperframes/studio 0.6.85 → 0.6.87

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -257,9 +257,9 @@ export function SliderControl({
         onMouseUp={() => commitDraft(draft)}
         onTouchEnd={() => commitDraft(draft)}
         onBlur={() => commitDraft(draft)}
-        className="h-2 min-w-0 w-full cursor-pointer appearance-none rounded-full bg-neutral-800 accent-[#3ce6ac] disabled:cursor-not-allowed"
+        className="h-4 min-w-0 w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-panel-border [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0C0C0E,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
       />
-      <div className="min-w-[52px] rounded-xl border border-neutral-800 bg-neutral-900 px-2 py-2 text-right text-[11px] font-medium text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
+      <div className="min-w-[44px] rounded-md bg-panel-input px-2 py-1.5 text-right text-[11px] font-medium text-panel-text-1 tabular-nums">
         {formatDisplayValue?.(draft) ?? displayValue}
       </div>
     </div>
@@ -279,7 +279,7 @@ export function SegmentedControl({
 }) {
   return (
     <div
-      className="grid min-w-0 gap-1 rounded-xl bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+      className="grid min-w-0 gap-[2px] rounded-md bg-panel-input p-[2px]"
       style={{ gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))` }}
     >
       {options.map((option) => (
@@ -288,10 +288,10 @@ export function SegmentedControl({
           type="button"
           disabled={disabled}
           onClick={() => onChange(option.value)}
-          className={`min-w-0 truncate rounded-lg px-2 py-1.5 text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
+          className={`min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
             option.value === value
-              ? "bg-neutral-800 text-white shadow-[0_1px_3px_rgba(0,0,0,0.28)]"
-              : "text-neutral-500 hover:text-neutral-200"
+              ? "bg-panel-hover text-white"
+              : "text-panel-text-4 hover:text-panel-text-2"
           }`}
         >
           {option.label}
@@ -336,7 +336,7 @@ export function SelectField({
 
 export function Section({
   title,
-  icon,
+  icon: _icon,
   children,
   accessory,
   defaultCollapsed = false,
@@ -350,32 +350,45 @@ export function Section({
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
 
   return (
-    <section className="min-w-0 border-t border-neutral-800/80">
+    <section className="min-w-0 border-t border-panel-border">
       <button
         type="button"
         onClick={() => setCollapsed((v) => !v)}
-        className="flex w-full items-center justify-between gap-2 px-4 py-3"
+        className="flex w-full items-center justify-between gap-2 px-4 py-2.5"
       >
-        <div className="flex min-w-0 items-center gap-2.5">
-          <span className="flex-shrink-0 text-neutral-500">{icon}</span>
-          <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-300">
-            {title}
-          </h3>
-        </div>
+        <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
         <div className="flex items-center gap-2">
           {accessory}
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="currentColor"
-            className={`flex-shrink-0 text-neutral-500 transition-transform ${collapsed ? "-rotate-90" : ""}`}
-          >
-            <path d="M2 3l3 4 3-4z" />
-          </svg>
+          {collapsed && (
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              className="flex-shrink-0 text-panel-text-5"
+            >
+              <path
+                d="M6 2.5v7M2.5 6h7"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+              />
+            </svg>
+          )}
+          {!collapsed && (
+            <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>
+          )}
         </div>
       </button>
-      {!collapsed && <div className="px-4 pb-4">{children}</div>}
+      {!collapsed && <div className="px-4 pb-3">{children}</div>}
     </section>
   );
 }

package/src/components/editor/propertyPanelSections.tsx

@@ -262,15 +262,13 @@ function TextFieldEditor({
   onRemoveTextField: (fieldKey: string) => void;
 }) {
   return (
-    <div className="space-y-4 rounded-xl border border-neutral-800 bg-neutral-900/60 p-3">
+    <div className="space-y-3">
       <div className={showRemove ? "flex min-w-0 items-center justify-between gap-2" : "min-w-0"}>
         <div className="min-w-0">
           <div className="truncate text-[11px] font-medium text-neutral-100">
             {formatTextFieldPreview(field.value) || "Text"}
           </div>
-          <div className="text-[10px] uppercase tracking-[0.12em] text-neutral-500">
-            {field.tagName}
-          </div>
+          <div className="text-[10px] text-neutral-500">{field.tagName}</div>
         </div>
         {showRemove && (
           <button
@@ -368,7 +366,7 @@ export function TextSection({
 
   if (textFields.length === 1) {
     return (
-      <Section title="Text" icon={<Type size={15} />}>
+      <Section title="Text" icon={<Type size={15} />} defaultCollapsed>
         <TextFieldEditor
           field={activeField}
           styles={styles}
@@ -426,7 +424,7 @@ export function TextSection({
                         {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
                       </span>
                     </div>
-                    <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-neutral-500">
+                    <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
                       {field.tagName}
                     </span>
                   </div>

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -33,6 +33,7 @@ import {
 } from "./propertyPanelPrimitives";
 import { ColorField } from "./propertyPanelColor";
 import { GradientField, ImageFillField } from "./propertyPanelFill";
+import { BorderRadiusEditor } from "./BorderRadiusEditor";
 
 export function StyleSections({
   projectId,
@@ -41,6 +42,7 @@ export function StyleSections({
   assets,
   onSetStyle,
   onImportAssets,
+  gsapBorderRadius,
 }: {
   projectId: string;
   element: DomEditSelection;
@@ -48,10 +50,19 @@ export function StyleSections({
   assets: string[];
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onImportAssets?: (files: FileList) => Promise<string[]>;
+  gsapBorderRadius?: { tl: number; tr: number; br: number; bl: number } | null;
 }) {
   const styleEditingDisabled = !element.capabilities.canEditStyles;
   const isFlex = styles.display === "flex" || styles.display === "inline-flex";
   const radiusValue = parseNumericValue(styles["border-radius"]) ?? 0;
+  const radiusTL =
+    gsapBorderRadius?.tl ?? parseNumericValue(styles["border-top-left-radius"]) ?? radiusValue;
+  const radiusTR =
+    gsapBorderRadius?.tr ?? parseNumericValue(styles["border-top-right-radius"]) ?? radiusValue;
+  const radiusBR =
+    gsapBorderRadius?.br ?? parseNumericValue(styles["border-bottom-right-radius"]) ?? radiusValue;
+  const radiusBL =
+    gsapBorderRadius?.bl ?? parseNumericValue(styles["border-bottom-left-radius"]) ?? radiusValue;
   const opacityValue = Math.round((parseNumericValue(styles.opacity) ?? 1) * 100);
   const borderWidthValue =
     parsePxMetricValue(styles["border-width"] ?? "") ??
@@ -155,15 +166,26 @@ export function StyleSections({
 
       {hasVisualBackground && (
         <Section title="Radius" icon={<Settings size={15} />} defaultCollapsed>
-          <SliderControl
-            value={radiusValue}
-            min={0}
-            max={Math.max(240, Math.ceil(radiusValue))}
-            step={1}
+          <BorderRadiusEditor
+            tl={radiusTL}
+            tr={radiusTR}
+            br={radiusBR}
+            bl={radiusBL}
             disabled={styleEditingDisabled}
-            displayValue={`${formatNumericValue(radiusValue)}px`}
-            formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
-            onCommit={(next) => onSetStyle("border-radius", `${formatNumericValue(next)}px`)}
+            onCommit={(corner, value) => {
+              const px = `${formatNumericValue(value)}px`;
+              if (corner === "all") {
+                onSetStyle("border-radius", px);
+              } else {
+                const prop = {
+                  tl: "border-top-left-radius",
+                  tr: "border-top-right-radius",
+                  br: "border-bottom-right-radius",
+                  bl: "border-bottom-left-radius",
+                }[corner];
+                onSetStyle(prop, px);
+              }
+            }}
           />
         </Section>
       )}

package/src/components/editor/useDomEditOverlayRects.ts

@@ -17,6 +17,14 @@ import {
   toOverlayRect,
 } from "./domEditOverlayGeometry";
 
+function childRectsEqual(a: OverlayRect[], b: OverlayRect[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!rectsEqual(a[i]!, b[i]!)) return false;
+  }
+  return true;
+}
+
 interface UseDomEditOverlayRectsOptions {
   iframeRef: RefObject<HTMLIFrameElement | null>;
   overlayRef: RefObject<HTMLDivElement | null>;
@@ -37,6 +45,7 @@ interface UseDomEditOverlayRectsResult {
   groupOverlayItems: GroupOverlayItem[];
   groupOverlayItemsRef: RefObject<GroupOverlayItem[]>;
   setGroupOverlayItems: (next: GroupOverlayItem[]) => void;
+  childRects: OverlayRect[];
 }
 
 export function useDomEditOverlayRects({
@@ -51,6 +60,7 @@ export function useDomEditOverlayRects({
   const [overlayRect, setOverlayRectState] = useState<OverlayRect | null>(null);
   const [hoverRect, setHoverRectState] = useState<OverlayRect | null>(null);
   const [groupOverlayItems, setGroupOverlayItemsState] = useState<GroupOverlayItem[]>([]);
+  const [childRects, setChildRectsState] = useState<OverlayRect[]>([]);
 
   const overlayRectRef = useRef<OverlayRect | null>(null);
   const hoverRectRef = useRef<OverlayRect | null>(null);
@@ -58,6 +68,7 @@ export function useDomEditOverlayRects({
   const resolvedElementRef = useRef<{ key: string; element: HTMLElement } | null>(null);
   const resolvedHoverElementRef = useRef<{ key: string; element: HTMLElement } | null>(null);
   const resolvedGroupElementRef = useRef<Map<string, HTMLElement>>(new Map());
+  const childRectsRef = useRef<OverlayRect[]>([]);
 
   const setOverlayRect = (next: OverlayRect | null) => {
     if (rectsEqual(overlayRectRef.current, next)) return;
@@ -102,7 +113,13 @@ export function useDomEditOverlayRects({
 
     const update = () => {
       frame = requestAnimationFrame(update);
-      if (rafPausedRef.current) return;
+      if (rafPausedRef.current) {
+        if (childRectsRef.current.length > 0) {
+          childRectsRef.current = [];
+          setChildRectsState([]);
+        }
+        return;
+      }
 
       const sel = selectionRef.current;
       const iframe = iframeRef.current;
@@ -132,13 +149,39 @@ export function useDomEditOverlayRects({
           resolvedElementRef as ResolvedElementRef,
         );
         if (el && isElementVisibleForOverlay(el)) {
-          setOverlayRect(toOverlayRect(overlayEl, iframe, el));
+          const nextRect = toOverlayRect(overlayEl, iframe, el);
+          setOverlayRect(nextRect);
+          const descendants = el.querySelectorAll("*");
+          if (descendants.length > 0 && descendants.length <= 60) {
+            const nextChildRects: OverlayRect[] = [];
+            for (let i = 0; i < descendants.length; i++) {
+              const child = descendants[i] as HTMLElement;
+              if (!child.getBoundingClientRect) continue;
+              const r = toOverlayRect(overlayEl, iframe, child);
+              if (r && r.width > 2 && r.height > 2) nextChildRects.push(r);
+            }
+            if (!childRectsEqual(childRectsRef.current, nextChildRects)) {
+              childRectsRef.current = nextChildRects;
+              setChildRectsState(nextChildRects);
+            }
+          } else if (childRectsRef.current.length > 0) {
+            childRectsRef.current = [];
+            setChildRectsState([]);
+          }
         } else {
           setOverlayRect(null);
+          if (childRectsRef.current.length > 0) {
+            childRectsRef.current = [];
+            setChildRectsState([]);
+          }
         }
       } else {
         resolvedElementRef.current = null;
         setOverlayRect(null);
+        if (childRectsRef.current.length > 0) {
+          childRectsRef.current = [];
+          setChildRectsState([]);
+        }
       }
 
       const group = groupSelectionsRef.current;
@@ -203,5 +246,6 @@ export function useDomEditOverlayRects({
     groupOverlayItems,
     groupOverlayItemsRef,
     setGroupOverlayItems,
+    childRects,
   };
 }

package/src/components/renders/RenderQueue.tsx

@@ -154,22 +154,22 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className="text-neutral-600 hover:text-neutral-400 transition-colors cursor-help"
+        className="text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help"
       >
         <circle cx="12" cy="12" r="10" />
         <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
         <line x1="12" y1="17" x2="12.01" y2="17" />
       </svg>
       {open && (
-        <div className="absolute top-full right-0 mt-1.5 w-52 p-2 rounded bg-neutral-900 border border-neutral-700 shadow-lg z-50">
-          <p className="text-[10px] font-semibold text-neutral-200 mb-0.5">{info.label}</p>
-          <p className="text-[9px] text-neutral-400 leading-tight">{info.desc}</p>
+        <div className="absolute top-full right-0 mt-1.5 w-52 p-2 rounded bg-panel-input border border-neutral-700 shadow-lg z-50">
+          <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
+          <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
           <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
             {(["mp4", "mov", "webm"] as const)
               .filter((f) => f !== format)
               .map((f) => (
-                <p key={f} className="text-[9px] text-neutral-500 leading-relaxed">
-                  <span className="text-neutral-400 font-medium">{FORMAT_INFO[f].label}</span>
+                <p key={f} className="text-[9px] text-panel-text-4 leading-relaxed">
+                  <span className="text-panel-text-3 font-medium">{FORMAT_INFO[f].label}</span>
                   {" — "}
                   {FORMAT_INFO[f].desc}
                 </p>
@@ -209,80 +209,97 @@ function FormatExportButton({
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
 
+  const selectCls =
+    "h-7 w-full px-2 text-[11px] bg-panel-input rounded-md text-panel-text-1 outline-none cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
+
   return (
-    <div className="flex items-center gap-1 flex-wrap justify-end">
-      <FormatInfoTooltip format={format} />
-      {/* Resolution must remain the leftmost <select> in this row — it
-          carries `rounded-l` for the joined-button look. If you ever hide it
-          (feature-flag, etc.), move `rounded-l` to whichever element ends up
-          leftmost. */}
-      <select
-        value={resolution}
-        onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}
-        disabled={isRendering}
-        className="h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-      >
-        {SCALE_OPTION_ORDER.map((value) => (
-          <option key={value} value={value} disabled={!scaleApplies(value, compositionDimensions)}>
-            {scaleOptionLabel(value, compositionDimensions)}
-          </option>
-        ))}
-      </select>
-      {showQuality && (
-        <select
-          value={quality}
-          onChange={(e) => {
-            const v = e.target.value as "draft" | "standard" | "high";
-            setQuality(v);
-            persistRenderSettings(format, v, fps);
-          }}
-          disabled={isRendering}
-          title={QUALITY_OPTIONS.find((q) => q.value === quality)?.title}
-          className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-        >
-          {QUALITY_OPTIONS.map((q) => (
-            <option key={q.value} value={q.value} title={q.title}>
-              {q.label}
-            </option>
-          ))}
-        </select>
-      )}
-      <select
-        value={fps}
-        onChange={(e) => {
-          const v = Number(e.target.value) as 24 | 30 | 60;
-          setFps(v);
-          persistRenderSettings(format, quality, v);
-        }}
-        disabled={isRendering}
-        title="Frames per second"
-        className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-      >
-        <option value={24}>24fps</option>
-        <option value={30}>30fps</option>
-        <option value={60}>60fps</option>
-      </select>
-      <select
-        value={format}
-        onChange={(e) => {
-          const v = e.target.value as "mp4" | "webm" | "mov";
-          setFormat(v);
-          persistRenderSettings(v, quality, fps);
-        }}
-        disabled={isRendering}
-        className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-      >
-        <option value="mp4">MP4</option>
-        <option value="mov">MOV</option>
-        <option value="webm">WebM</option>
-      </select>
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-2">
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-1">
+            <span className="text-[10px] text-panel-text-4">Format</span>
+            <FormatInfoTooltip format={format} />
+          </div>
+          <select
+            value={format}
+            onChange={(e) => {
+              const v = e.target.value as "mp4" | "webm" | "mov";
+              setFormat(v);
+              persistRenderSettings(v, quality, fps);
+            }}
+            disabled={isRendering}
+            className={selectCls}
+          >
+            <option value="mp4">MP4</option>
+            <option value="mov">MOV (ProRes)</option>
+            <option value="webm">WebM</option>
+          </select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-[10px] text-panel-text-4">Resolution</span>
+          <select
+            value={resolution}
+            onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}
+            disabled={isRendering}
+            className={selectCls}
+          >
+            {SCALE_OPTION_ORDER.map((value) => (
+              <option
+                key={value}
+                value={value}
+                disabled={!scaleApplies(value, compositionDimensions)}
+              >
+                {scaleOptionLabel(value, compositionDimensions)}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-[10px] text-panel-text-4">Frame rate</span>
+          <select
+            value={fps}
+            onChange={(e) => {
+              const v = Number(e.target.value) as 24 | 30 | 60;
+              setFps(v);
+              persistRenderSettings(format, quality, v);
+            }}
+            disabled={isRendering}
+            className={selectCls}
+          >
+            <option value={24}>24 fps</option>
+            <option value={30}>30 fps</option>
+            <option value={60}>60 fps</option>
+          </select>
+        </div>
+        {showQuality && (
+          <div className="flex flex-col gap-1">
+            <span className="text-[10px] text-panel-text-4">Quality</span>
+            <select
+              value={quality}
+              onChange={(e) => {
+                const v = e.target.value as "draft" | "standard" | "high";
+                setQuality(v);
+                persistRenderSettings(format, v, fps);
+              }}
+              disabled={isRendering}
+              className={selectCls}
+            >
+              {QUALITY_OPTIONS.map((q) => (
+                <option key={q.value} value={q.value}>
+                  {q.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
       <button
         onClick={() => {
           trackStudioEvent("render_start", { format, quality, resolution, fps });
           void onStartRender(format, quality, resolution, fps);
         }}
         disabled={isRendering}
-        className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-studio-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
+        className="w-full flex items-center justify-center h-8 text-[11px] font-semibold rounded-md bg-panel-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
       >
         {isRendering ? "Rendering..." : "Export"}
       </button>
@@ -313,23 +330,12 @@ export const RenderQueue = memo(function RenderQueue({
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header — no title, already shown in header button */}
-      <div className="flex items-center justify-end flex-wrap gap-y-1.5 px-3 py-2 border-b border-neutral-800/50 flex-shrink-0">
-        <div className="flex items-center gap-1.5">
-          {completedCount > 0 && (
-            <button
-              onClick={onClearCompleted}
-              className="text-[10px] text-neutral-600 hover:text-neutral-400 transition-colors"
-            >
-              Clear
-            </button>
-          )}
-          <FormatExportButton
-            onStartRender={onStartRender}
-            isRendering={isRendering}
-            compositionDimensions={compositionDimensions}
-          />
-        </div>
+      <div className="px-3 py-3 border-b border-panel-border flex-shrink-0">
+        <FormatExportButton
+          onStartRender={onStartRender}
+          isRendering={isRendering}
+          compositionDimensions={compositionDimensions}
+        />
       </div>
 
       {/* Job list */}
@@ -343,7 +349,7 @@ export const RenderQueue = memo(function RenderQueue({
               fill="none"
               stroke="currentColor"
               strokeWidth="1.5"
-              className="text-neutral-700"
+              className="text-panel-text-5"
             >
               <rect
                 x="2"
@@ -361,17 +367,32 @@ export const RenderQueue = memo(function RenderQueue({
                 strokeLinejoin="round"
               />
             </svg>
-            <p className="text-[10px] text-neutral-600 text-center">No renders yet</p>
+            <p className="text-[10px] text-panel-text-5 text-center">No renders yet</p>
           </div>
         ) : (
-          jobs.map((job) => (
-            <RenderQueueItem
-              key={job.id}
-              job={job}
-              projectId={projectId}
-              onDelete={() => onDelete(job.id)}
-            />
-          ))
+          <div>
+            {completedCount > 0 && (
+              <div className="flex items-center justify-between px-3 py-1.5 border-b border-panel-border">
+                <span className="text-[10px] text-panel-text-4">
+                  {jobs.length} render{jobs.length === 1 ? "" : "s"}
+                </span>
+                <button
+                  onClick={onClearCompleted}
+                  className="text-[10px] text-panel-text-4 hover:text-panel-text-2 transition-colors"
+                >
+                  Clear
+                </button>
+              </div>
+            )}
+            {jobs.map((job) => (
+              <RenderQueueItem
+                key={job.id}
+                job={job}
+                projectId={projectId}
+                onDelete={() => onDelete(job.id)}
+              />
+            ))}
+          </div>
         )}
       </div>
     </div>