@hyperframes/studio 0.8.52 → 0.8.53

package/src/components/renders/RenderQueue.tsx

@@ -5,6 +5,9 @@ import { RenderQueueItem } from "./RenderQueueItem";
 import { FfmpegRequiredNotice } from "./FfmpegRequiredNotice";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Select, type SelectOption } from "../ui/Select";
+import { Tooltip } from "../ui/Tooltip";
 import { resolveFloatingPanelPosition, type FloatingPosition } from "../editor/floatingPanel";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
@@ -15,7 +18,7 @@ export interface CompositionDimensions {
   height: number;
 }
 
-type StartRenderHandler = (
+export type StartRenderHandler = (
   format: "mp4" | "webm" | "mov",
   quality: "draft" | "standard" | "high",
   resolution: ResolutionPreset | "auto",
@@ -207,7 +210,7 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
         onFocus={show}
         onBlur={hide}
         onClick={() => setOpen((prev) => !prev)}
-        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
+        className="flex items-center justify-center p-0.5 -m-0.5 rounded-sm text-text-5 hover:text-text-3 transition-colors cursor-help outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent"
       >
         <svg
           width="12"
@@ -232,17 +235,17 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
             role="tooltip"
             onPointerEnter={show}
             onPointerLeave={hide}
-            className="fixed w-52 p-2 rounded-sm bg-panel-input border border-neutral-700 shadow-lg z-200"
+            className="fixed w-52 p-2 rounded-sm bg-input border border-border-input shadow-menu z-200"
             style={{ left: position?.left ?? -9999, top: position?.top ?? -9999 }}
           >
-            <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">
+            <p className="text-step-10 font-semibold text-text-1 mb-0.5">{info.label}</p>
+            <p className="text-step-9 text-text-3 leading-tight">{info.desc}</p>
+            <div className="mt-1.5 pt-1.5 border-t border-border">
               {(["mp4", "mov", "webm"] as const)
                 .filter((f) => f !== format)
                 .map((f) => (
-                  <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>
+                  <p key={f} className="text-step-9 text-text-4 leading-relaxed">
+                    <span className="text-text-3 font-medium">{FORMAT_INFO[f].label}</span>
                     {" — "}
                     {FORMAT_INFO[f].desc}
                   </p>
@@ -255,14 +258,22 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
   );
 }
 
-const QUALITY_OPTIONS: {
-  value: "draft" | "standard" | "high";
-  label: string;
-  title: string;
-}[] = [
-  { value: "draft", label: "Draft", title: "Fast render, smaller file" },
-  { value: "standard", label: "Standard", title: "Good quality, balanced file size" },
-  { value: "high", label: "High Quality", title: "Best quality, larger file" },
+const FORMAT_OPTIONS: SelectOption[] = [
+  { value: "mp4", label: "MP4" },
+  { value: "mov", label: "MOV (ProRes)" },
+  { value: "webm", label: "WebM" },
+];
+
+const QUALITY_OPTIONS: SelectOption[] = [
+  { value: "draft", label: "Draft" },
+  { value: "standard", label: "Standard" },
+  { value: "high", label: "High Quality" },
+];
+
+const FPS_OPTIONS: SelectOption[] = [
+  { value: "24", label: "24 fps" },
+  { value: "30", label: "30 fps" },
+  { value: "60", label: "60 fps" },
 ];
 
 function formatEta(ms: number): string {
@@ -302,9 +313,6 @@ 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-hidden cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
-
   return (
     <div className="flex flex-col gap-3">
       {missingFfmpeg && (
@@ -317,85 +325,70 @@ function FormatExportButton({
       <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>
+            <span className="text-step-10 text-text-4">Format</span>
             <FormatInfoTooltip format={format} />
           </div>
-          <select
+          <Select
+            label="Format"
             value={format}
-            onChange={(e) => {
-              const v = e.target.value as "mp4" | "webm" | "mov";
+            options={FORMAT_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = next 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
+          <span className="text-step-10 text-text-4">Resolution</span>
+          <Select
+            label="Resolution"
             value={resolution}
-            onChange={(e) => setResolution(e.target.value as RenderScale)}
+            options={SCALE_OPTION_ORDER.map((value) => ({
+              value,
+              label: scaleOptionLabel(value, compositionDimensions),
+              disabled: !scaleApplies(value, compositionDimensions),
+            }))}
             disabled={isRendering}
-            className={selectCls}
-          >
-            {SCALE_OPTION_ORDER.map((value) => (
-              <option
-                key={value}
-                value={value}
-                disabled={!scaleApplies(value, compositionDimensions)}
-              >
-                {scaleOptionLabel(value, compositionDimensions)}
-              </option>
-            ))}
-          </select>
+            onCommit={(next) => setResolution(next as RenderScale)}
+          />
         </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;
+          <span className="text-step-10 text-text-4">Frame rate</span>
+          <Select
+            label="Frame rate"
+            value={String(fps)}
+            options={FPS_OPTIONS}
+            disabled={isRendering}
+            onCommit={(next) => {
+              const v = Number(next) 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
+            <span className="text-step-10 text-text-4">Quality</span>
+            <Select
+              label="Quality"
               value={quality}
-              onChange={(e) => {
-                const v = e.target.value as "draft" | "standard" | "high";
+              options={QUALITY_OPTIONS}
+              disabled={isRendering}
+              onCommit={(next) => {
+                const v = next 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
         variant="primary"
         size="md"
+        data-testid="renders-export"
         loading={isRendering}
         disabled={missingFfmpeg !== null}
         title={missingFfmpeg ? "Install FFmpeg to export. See the note above." : undefined}
@@ -407,12 +400,15 @@ function FormatExportButton({
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
           void onStartRender(format, quality, outputResolution, fps);
         }}
-        className="w-full font-semibold"
+        // Width only. A type size or a weight here would win the merge against
+        // the size recipe and leave this Export a step away from the header's
+        // (AE3), which is exactly what it used to do.
+        className="w-full"
       >
         {isRendering ? "Rendering…" : "Export"}
       </Button>
       {lastRenderDurationMs !== undefined && !isRendering && (
-        <p className="text-[9px] text-panel-text-5 text-center -mt-1.5">
+        <p className="text-step-9 text-text-5 text-center -mt-1.5">
           Last render took {formatEta(lastRenderDurationMs)}
         </p>
       )}
@@ -454,7 +450,7 @@ export const RenderQueue = memo(function RenderQueue({
 
   return (
     <div className="flex flex-col h-full">
-      <div className="px-3 py-3 border-b border-panel-border shrink-0">
+      <div className="px-3 py-3 border-b border-border shrink-0">
         <FormatExportButton
           onStartRender={onStartRender}
           isRendering={isRendering}
@@ -469,17 +465,30 @@ export const RenderQueue = memo(function RenderQueue({
       {actionError && (
         <div
           role="alert"
-          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-panel-border bg-red-500/10"
+          className="flex items-start justify-between gap-2 px-3 py-2 border-b border-border bg-danger/10"
         >
-          <span className="text-[10px] text-red-400">{actionError}</span>
+          <span className="text-step-10 text-danger">{actionError}</span>
           {onDismissActionError && (
-            <button
+            <IconButton
+              size="sm"
               onClick={onDismissActionError}
               aria-label="Dismiss error"
-              className="text-[10px] text-panel-text-4 hover:text-panel-text-2 shrink-0"
-            >
-              ✕
-            </button>
+              className="shrink-0"
+              icon={
+                <svg
+                  width="10"
+                  height="10"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  aria-hidden="true"
+                >
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              }
+            />
           )}
         </div>
       )}
@@ -488,7 +497,7 @@ export const RenderQueue = memo(function RenderQueue({
       <div ref={listRef} className="flex-1 overflow-y-auto">
         {loadError && jobs.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full px-4 gap-2" role="alert">
-            <p className="text-[10px] text-red-400 text-center">{loadError}</p>
+            <p className="text-step-10 text-danger text-center">{loadError}</p>
             {onRetryLoad && (
               <Button size="sm" variant="secondary" onClick={onRetryLoad}>
                 Retry
@@ -504,7 +513,7 @@ export const RenderQueue = memo(function RenderQueue({
               fill="none"
               stroke="currentColor"
               strokeWidth="1.5"
-              className="text-panel-text-5"
+              className="text-text-5"
             >
               <rect
                 x="2"
@@ -522,24 +531,22 @@ export const RenderQueue = memo(function RenderQueue({
                 strokeLinejoin="round"
               />
             </svg>
-            <p className="text-[10px] text-panel-text-5 text-center">No renders yet</p>
+            <p className="text-step-10 text-text-5 text-center">No renders yet</p>
           </div>
         ) : (
           <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">
+              <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+                <span className="text-step-10 text-text-4">
                   {jobs.length} render{jobs.length === 1 ? "" : "s"}
                 </span>
                 {/* "Hide", not "Clear": files stay on disk (delete is per-row
                     and confirmed); hidden rows don't resurrect on reload. */}
-                <button
-                  onClick={onClearCompleted}
-                  title="Hide finished renders from this list (files stay on disk)"
-                  className="text-[10px] text-panel-text-4 hover:text-panel-text-2 transition-colors"
-                >
-                  Hide finished
-                </button>
+                <Tooltip label="Hide finished renders from this list (files stay on disk)">
+                  <Button size="sm" variant="ghost" onClick={onClearCompleted}>
+                    Hide finished
+                  </Button>
+                </Tooltip>
               </div>
             )}
             {jobs.map((job) => (

package/src/components/renders/RenderQueueItem.tsx

@@ -2,6 +2,8 @@ import { buildProjectApiPath } from "../../utils/projectRouting";
 import { memo, useCallback, useState } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Tooltip } from "../ui/Tooltip";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
@@ -66,7 +68,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         setVideoReady(false);
         setConfirmingDelete(false);
       }}
-      className="px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150 hover:bg-panel-hover/30"
+      className="px-3 py-2.5 border-b border-border last:border-0 transition-colors duration-150 hover:bg-hover/30"
     >
       <div className="flex items-center gap-2.5">
         {/* Thumbnail — static frame; swaps to live video on hover.
@@ -77,8 +79,8 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           disabled={!isComplete}
           aria-label={isComplete ? `Open ${job.filename} in a new tab` : undefined}
           className={[
-            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input shrink-0 relative",
-            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent",
+            "w-20 h-[45px] rounded-md overflow-hidden bg-input shrink-0 relative",
+            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent",
             isComplete ? "cursor-pointer" : "cursor-default",
           ].join(" ")}
         >
@@ -108,17 +110,17 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
           {isRendering && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse motion-reduce:animate-none" />
+              <div className="w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" />
             </div>
           )}
           {job.status === "failed" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-red-400" />
+              <div className="w-2 h-2 rounded-full bg-danger" />
             </div>
           )}
           {job.status === "cancelled" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-neutral-600" />
+              <div className="w-2 h-2 rounded-full bg-text-5" />
             </div>
           )}
         </button>
@@ -126,11 +128,9 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         {/* Info */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
-            <span className="text-[11px] font-medium text-panel-text-2 truncate">
-              {job.filename}
-            </span>
+            <span className="text-step-11 font-medium text-text-2 truncate">{job.filename}</span>
             {job.durationMs && (
-              <span className="text-[9px] text-panel-text-5 shrink-0">
+              <span className="text-step-9 text-text-5 shrink-0">
                 {formatDuration(job.durationMs)}
               </span>
             )}
@@ -139,11 +139,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           {isRendering && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
-                <span className="text-[9px] text-panel-text-4">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-panel-accent">{job.progress}%</span>
+                <span className="text-step-9 text-text-4">{job.stage || "Rendering"}</span>
+                <span className="text-step-9 font-mono text-accent">{job.progress}%</span>
               </div>
               <div
-                className="w-full h-1 bg-panel-border rounded-full overflow-hidden"
+                className="w-full h-1 bg-border rounded-full overflow-hidden"
                 role="progressbar"
                 aria-valuenow={job.progress}
                 aria-valuemin={0}
@@ -151,7 +151,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                 aria-label={`Render progress: ${job.progress}%`}
               >
                 <div
-                  className="h-full bg-panel-accent rounded-full transition-all duration-300"
+                  className="h-full bg-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>
@@ -159,14 +159,14 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
 
           {job.status === "failed" && job.error && (
-            <span className="text-[9px] text-red-400 mt-0.5 block">{job.error}</span>
+            <span className="text-step-9 text-danger mt-0.5 block">{job.error}</span>
           )}
           {job.status === "cancelled" && (
-            <span className="text-[9px] text-panel-text-4 mt-0.5 block">Cancelled</span>
+            <span className="text-step-9 text-text-4 mt-0.5 block">Cancelled</span>
           )}
 
           {!isRendering && (
-            <span className="text-[9px] text-panel-text-5">{formatTimeAgo(job.createdAt)}</span>
+            <span className="text-step-9 text-text-5">{formatTimeAgo(job.createdAt)}</span>
           )}
         </div>
 
@@ -209,53 +209,58 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             </>
           ) : (
             <>
-              <button
-                onClick={isComplete ? handleDownload : undefined}
-                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent ${
-                  isComplete
-                    ? "text-panel-text-5 hover:text-panel-accent"
-                    : "text-panel-text-5/30 cursor-default"
-                }`}
-                title={isComplete ? "Download" : undefined}
-                aria-label={`Download ${job.filename}`}
-                disabled={!isComplete}
-              >
-                <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();
-                  setConfirmingDelete(true);
-                }}
-                className="p-1.5 min-w-6 min-h-6 rounded-sm text-panel-text-5 hover:text-red-400 transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
-                title="Delete render file"
-                aria-label={`Delete ${job.filename}`}
-              >
-                <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>
+              {/* The tooltip explains the control whether or not it is
+                  reachable; `disabled:` on the shared Button keeps pointer
+                  events alive precisely so a disabled one can still say why. */}
+              <Tooltip label={isComplete ? "Download" : "Available when the render finishes"}>
+                <IconButton
+                  size="sm"
+                  onClick={handleDownload}
+                  disabled={!isComplete}
+                  aria-label={`Download ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <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>
+                  }
+                />
+              </Tooltip>
+              <Tooltip label="Delete render file">
+                <IconButton
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmingDelete(true);
+                  }}
+                  aria-label={`Delete ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M18 6L6 18M6 6l12 12" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
             </>
           )}
         </div>

package/src/components/renders/RenderQueuePanel.tsx

@@ -7,7 +7,7 @@ import { usePreviewVariablesStore } from "../../hooks/previewVariablesStore";
 /**
  * The Renders tab, wired to the shell context.
  *
- * Split out of StudioRightPanel because every field it needs already lives in
+ * Split out of StudioRightPanels because every field it needs already lives in
  * that context, so routing them through the panel only made the panel longer
  * without giving anything a second reader.
  */

package/src/components/sidebar/{LeftSidebar.masterComposition.test.tsx → CompositionsPanel.masterComposition.test.tsx}

@@ -4,7 +4,7 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { usePlayerStore } from "../../player/store/playerStore";
-import { LeftSidebar } from "./LeftSidebar";
+import { CompositionsPanel } from "./CompositionsPanel";
 
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 (
@@ -20,23 +20,20 @@ afterEach(() => {
   usePlayerStore.setState({ thumbnailContentRevision: 0 });
 });
 
-describe("LeftSidebar root badge source", () => {
+describe("CompositionsPanel root badge source", () => {
   it("derives the root badge from the filtered compositions list, not the raw file tree", () => {
-    // `fileTree` includes a non-composition index.html (a vendored preset) that the
-    // server's filtered `compositions` list excludes — the badge must source from
-    // `compositions`, not the raw file tree.
+    // The project's raw file tree can hold a non-composition index.html (a vendored
+    // preset); the badge must source from the server's filtered `compositions` list.
     const host = document.createElement("div");
     document.body.append(host);
     root = createRoot(host);
     act(() => {
       root?.render(
-        <LeftSidebar
+        <CompositionsPanel
           projectId="demo"
           compositions={["hero.html"]}
-          assets={[]}
-          fileTree={["index.html", "hero.html"]}
           activeComposition={null}
-          onSelectComposition={vi.fn()}
+          onSelect={vi.fn()}
         />,
       );
     });

package/src/components/sidebar/CompositionsPanel.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { resolveMasterCompositionPath } from "../../utils/studioUrlState";
+import { CompositionsTab } from "./CompositionsTab";
+
+type Props = Omit<ComponentProps<typeof CompositionsTab>, "masterCompositionPath">;
+
+/** The Compositions dock panel body; the root badge comes from the filtered composition list. */
+export function CompositionsPanel(props: Props) {
+  return (
+    <CompositionsTab
+      {...props}
+      masterCompositionPath={resolveMasterCompositionPath(props.compositions)}
+    />
+  );
+}

package/src/components/sidebar/{LeftSidebar.lintBadge.test.tsx → SidebarLintButton.test.tsx}

@@ -3,7 +3,7 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { LeftSidebar } from "./LeftSidebar";
+import { SidebarLintButton } from "./SidebarLintButton";
 
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 (
@@ -24,23 +24,18 @@ function renderBadge(lintHasError: boolean): HTMLElement | null {
   root = createRoot(host);
   act(() => {
     root?.render(
-      <LeftSidebar
-        projectId="demo"
-        compositions={["index.html"]}
-        assets={[]}
-        fileTree={["index.html"]}
-        activeComposition={null}
-        onSelectComposition={vi.fn()}
+      <SidebarLintButton
         onLint={vi.fn()}
-        lintFindingCount={2}
-        lintHasError={lintHasError}
+        linting={false}
+        findingCount={2}
+        hasError={lintHasError}
       />,
     );
   });
   return host.querySelector<HTMLElement>("[data-lint-badge]");
 }
 
-describe("LeftSidebar lint badge", () => {
+describe("SidebarLintButton badge", () => {
   it("pulses, and stops for reduced motion, while an error finding exists", () => {
     const badge = renderBadge(true);
     expect(badge?.dataset.lintBadge).toBe("error");