@hyperframes/studio 0.8.52 → 0.8.53

package/src/components/StudioLeftSidebar.tsx

@@ -1,207 +0,0 @@
-import { useCallback, type RefObject } from "react";
-import { SourceEditor } from "./editor/SourceEditor";
-import { LeftSidebar, type LeftSidebarHandle } from "./sidebar/LeftSidebar";
-import { MediaPreview } from "./MediaPreview";
-import { isMediaFile } from "../utils/mediaTypes";
-import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
-import { useStudioShellContext } from "../contexts/StudioContext";
-import { useFileManagerContext } from "../contexts/FileManagerContext";
-import { getPersistedRenderSettings } from "./renders/renderSettings";
-import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
-
-export interface StudioLeftSidebarProps {
-  leftSidebarRef: RefObject<LeftSidebarHandle | null>;
-  onSelectComposition: (comp: string) => void;
-  onAddBlock: (blockName: string) => void;
-  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
-  onLint: () => void;
-  linting: boolean;
-  lintFindingCount?: number;
-  lintHasError?: boolean;
-  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
-  onAddAssetToTimeline?: (path: string) => void;
-  onAddCompositionToTimeline?: (path: string) => void;
-}
-
-// fallow-ignore-next-line complexity
-export function StudioLeftSidebar({
-  leftSidebarRef,
-  onSelectComposition,
-  onAddBlock,
-  onPreviewBlock,
-  onLint,
-  linting,
-  lintFindingCount,
-  lintHasError,
-  lintFindingsByFile,
-  onAddAssetToTimeline,
-  onAddCompositionToTimeline,
-}: StudioLeftSidebarProps) {
-  const {
-    effectiveLeftCollapsed,
-    leftWidth,
-    adjustPanelWidth,
-    toggleLeftSidebar,
-    handlePanelResizeStart,
-    handlePanelResizeMove,
-    handlePanelResizeEnd,
-    setRightPanelTab,
-    setRightCollapsed,
-  } = usePanelLayoutContext();
-  const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioShellContext();
-  const {
-    compositions,
-    assets,
-    editingFile,
-    fileTree,
-    revealSourceOffset,
-    handleFileSelect,
-    handleCreateFile,
-    handleCreateFolder,
-    handleDeleteFile,
-    handleRenameFile,
-    handleDuplicateFile,
-    handleMoveFile,
-    handleImportFiles,
-    handleContentChange,
-  } = useFileManagerContext();
-
-  const handleRenderComposition = useCallback(
-    async (comp: string) => {
-      // startRender refuses without an encoder, so nothing unfinishable gets
-      // queued either way. What it cannot do from here is show the reason:
-      // its refusal lands as a row in the Renders panel, which may be
-      // collapsed or on another tab, so the click would look like nothing
-      // happened. Same move the header makes: put the prompt in front of the
-      // user, then stop.
-      if (renderQueue.ffmpegMissing) {
-        setRightPanelTab("renders");
-        setRightCollapsed(false);
-        return;
-      }
-      await waitForPendingDomEditSaves();
-      const { format, quality, fps } = getPersistedRenderSettings();
-      await renderQueue.startRender({ composition: comp, format, quality, fps });
-    },
-    [renderQueue, waitForPendingDomEditSaves, setRightPanelTab, setRightCollapsed],
-  );
-
-  if (effectiveLeftCollapsed) {
-    return (
-      <div className="mr-0.5 flex w-10 shrink-0 flex-col items-center rounded-lg border border-neutral-800/50 bg-neutral-950 pt-1">
-        <button
-          type="button"
-          onClick={toggleLeftSidebar}
-          className="flex h-8 w-8 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
-          title="Show sidebar"
-          aria-label="Show sidebar"
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="M5 4v16" />
-            <path d="m10 7 5 5-5 5" />
-          </svg>
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <LeftSidebar
-        ref={leftSidebarRef}
-        width={leftWidth}
-        projectId={projectId}
-        compositions={compositions}
-        assets={assets}
-        activeComposition={editingFile?.path ?? null}
-        onSelectComposition={onSelectComposition}
-        fileTree={fileTree}
-        editingFile={editingFile}
-        onSelectFile={handleFileSelect}
-        onCreateFile={handleCreateFile}
-        onCreateFolder={handleCreateFolder}
-        onDeleteFile={handleDeleteFile}
-        onRenameFile={handleRenameFile}
-        onDuplicateFile={handleDuplicateFile}
-        onMoveFile={handleMoveFile}
-        onImportFiles={async (files, dir) => {
-          await handleImportFiles(files, dir);
-        }}
-        codeChildren={
-          editingFile ? (
-            isMediaFile(editingFile.path) ? (
-              <MediaPreview projectId={projectId} filePath={editingFile.path} />
-            ) : editingFile.content == null ? (
-              // Never mount the editor on unloaded content: a keystroke would
-              // autosave an empty document over the real file.
-              <div className="flex h-full items-center justify-center text-[11px] text-neutral-600">
-                Loading {editingFile.path}…
-              </div>
-            ) : (
-              <SourceEditor
-                content={editingFile.content}
-                filePath={editingFile.path}
-                onChange={handleContentChange}
-                revealOffset={revealSourceOffset}
-              />
-            )
-          ) : undefined
-        }
-        onRenderComposition={handleRenderComposition}
-        isRendering={renderQueue.isRendering}
-        onLint={onLint}
-        linting={linting}
-        lintFindingCount={lintFindingCount}
-        lintHasError={lintHasError}
-        lintFindingsByFile={lintFindingsByFile}
-        onToggleCollapse={toggleLeftSidebar}
-        onAddBlock={onAddBlock}
-        onPreviewBlock={onPreviewBlock}
-        onAddAssetToTimeline={onAddAssetToTimeline}
-        onAddCompositionToTimeline={onAddCompositionToTimeline}
-      />
-      {/* Vertical resize divider: 3px visible seam, 13px pointer-capture zone via
-          the absolutely-positioned inner hit area. The outer element is w-[3px] so
-          it contributes only 3px of gap in the flex row; the inner left-[-2px]
-          element widens the hit area without affecting layout. */}
-      <div
-        role="separator"
-        aria-label="Resize sidebar"
-        aria-orientation="vertical"
-        tabIndex={0}
-        className="group relative w-[3px] shrink-0 cursor-col-resize outline-hidden focus-visible:bg-studio-accent/20"
-        style={{ touchAction: "none" }}
-        onPointerDown={(e) => handlePanelResizeStart("left", e)}
-        onPointerMove={handlePanelResizeMove}
-        onPointerUp={handlePanelResizeEnd}
-        onPointerCancel={handlePanelResizeEnd}
-        onKeyDown={(e) => {
-          if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-          e.preventDefault();
-          const delta = e.key === "ArrowLeft" ? -16 : 16;
-          adjustPanelWidth("left", delta);
-        }}
-      >
-        {/* Expanded hit zone, deliberately asymmetric: 2px into the sidebar card,
-            the 3px seam, then 8px into the preview pane's p-2 stage gutter — the
-            only dead space adjacent to this seam. It stops at 13px rather than the
-            24px WCAG 2.2 (2.5.8) target because the next pixel on either side is
-            live: the sidebar's scrolling tab content on the left, the preview
-            stage on the right. Silently stealing their clicks is the worse bug. */}
-        <div className="absolute inset-y-0 left-[-2px] w-[13px]" />
-        {/* Visible hairline */}
-        <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
-      </div>
-    </>
-  );
-}

package/src/components/nle/TimelineResizeDivider.tsx

@@ -1,101 +0,0 @@
-import { useCallback, useRef } from "react";
-import { MIN_PREVIEW_H, MIN_TIMELINE_H, fitTimelineHeight } from "../../utils/fitPanels";
-
-/**
- * Horizontal drag/keyboard-resizable divider between the preview and the
- * timeline. Implements the separator pattern: ArrowUp grows the timeline,
- * ArrowDown shrinks it (mirrors the drag direction).
- */
-export function TimelineResizeDivider({
-  timelineH,
-  setTimelineH,
-  persistTimelineH,
-  containerRef,
-  disabled,
-}: {
-  timelineH: number;
-  setTimelineH: React.Dispatch<React.SetStateAction<number>>;
-  persistTimelineH: (h: number) => void;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-  disabled: boolean;
-}) {
-  const isDragging = useRef(false);
-  const timelineHRef = useRef(timelineH);
-  timelineHRef.current = timelineH;
-
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      if (disabled) return;
-      e.preventDefault();
-      isDragging.current = true;
-      (e.target as HTMLElement).setPointerCapture(e.pointerId);
-    },
-    [disabled],
-  );
-
-  const handlePointerMove = useCallback(
-    (e: React.PointerEvent) => {
-      if (disabled) return;
-      if (!isDragging.current || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const mouseY = e.clientY - rect.top;
-      setTimelineH(fitTimelineHeight(rect.height, rect.height - mouseY));
-    },
-    [disabled, containerRef, setTimelineH],
-  );
-
-  const handlePointerUp = useCallback(() => {
-    if (isDragging.current) persistTimelineH(timelineHRef.current);
-    isDragging.current = false;
-  }, [persistTimelineH]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (disabled) return;
-      if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-      e.preventDefault();
-      const containerH = containerRef.current?.getBoundingClientRect().height ?? 0;
-      const delta = e.key === "ArrowUp" ? 16 : -16;
-      setTimelineH((prev) => {
-        const next = fitTimelineHeight(containerH, prev + delta);
-        persistTimelineH(next);
-        return next;
-      });
-    },
-    [disabled, containerRef, setTimelineH, persistTimelineH],
-  );
-
-  return (
-    // Horizontal resize divider: 3px visible seam (h-[3px]), 10px pointer-capture
-    // zone via the absolutely-positioned inner hit area so the layout gap stays
-    // at 3px while draggability is preserved over the full band.
-    <div
-      role="separator"
-      aria-orientation="horizontal"
-      aria-label="Resize timeline (arrow keys)"
-      aria-valuenow={Math.round(timelineH)}
-      aria-valuemin={MIN_TIMELINE_H}
-      aria-valuemax={Math.round(
-        (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H,
-      )}
-      tabIndex={0}
-      className="group relative h-[3px] shrink-0 cursor-row-resize z-10 outline-hidden focus-visible:bg-studio-accent/20"
-      style={{ touchAction: "none" }}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerCancel={handlePointerUp}
-      onKeyDown={handleKeyDown}
-    >
-      {/* Expanded hit zone, deliberately asymmetric: 4px up into the transport
-          row's vertical centring slack, the 3px seam, then 3px down into the
-          timeline card's border + toolbar padding. It stops at 10px rather than
-          the 24px WCAG 2.2 (2.5.8) target because that is all the dead space
-          there is: 28px transport buttons sit above and 28px toolbar buttons
-          below, and silently stealing their clicks is the worse bug. */}
-      <div className="absolute inset-x-0 top-[-4px] h-[10px]" />
-      {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
-      <div className="h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" />
-    </div>
-  );
-}

package/src/components/sidebar/LeftSidebar.storage.test.ts

@@ -1,28 +0,0 @@
-// @vitest-environment happy-dom
-
-import { afterEach, expect, it, vi } from "vitest";
-import { getPersistedTab } from "./LeftSidebar";
-
-vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
-
-const originalDescriptor = Object.getOwnPropertyDescriptor(globalThis, "localStorage");
-
-afterEach(() => {
-  if (originalDescriptor) Object.defineProperty(globalThis, "localStorage", originalDescriptor);
-});
-
-it("falls back to the default tab when localStorage is blocked", () => {
-  // Chrome throws on the property read itself when site data is blocked for
-  // the document. This runs as a useState initializer, so throwing here takes
-  // Studio to the crash boundary.
-  Object.defineProperty(globalThis, "localStorage", {
-    configurable: true,
-    get() {
-      throw new Error(
-        "Failed to read the 'localStorage' property from 'Window': Access is denied for this document.",
-      );
-    },
-  });
-
-  expect(getPersistedTab()).toBe("compositions");
-});

package/src/components/sidebar/LeftSidebar.tsx

@@ -1,348 +0,0 @@
-import {
-  memo,
-  useState,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-import { CompositionsTab } from "./CompositionsTab";
-import { AssetsTab } from "./AssetsTab";
-import { trackStudioEvent } from "../../utils/studioTelemetry";
-import { safeLocalStorage } from "../../utils/safeStorage";
-import { resolveMasterCompositionPath } from "../../utils/studioUrlState";
-import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
-import { FileTree } from "../editor/FileTree";
-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";
-
-const SIDEBAR_TABS: Array<{ id: SidebarTab; label: string; tooltip: string }> = [
-  { id: "code", label: "Code", tooltip: "Source code editor" },
-  { id: "compositions", label: "Comps", tooltip: "Compositions and sub-compositions" },
-  { id: "assets", label: "Assets", tooltip: "Videos, images, audio, fonts" },
-  { id: "blocks", label: "Catalog", tooltip: "Browse blocks and components" },
-];
-
-// Both the `localStorage` reference and `getItem` itself can throw when the
-// browsing context is partitioned or site data is blocked — the same case
-// telemetry/config.ts documents. This runs as a `useState` initializer, so an
-// unguarded throw here takes the whole editor to the crash boundary rather
-// than losing one remembered tab.
-export function getPersistedTab(): SidebarTab {
-  let stored: string | null = null;
-  try {
-    stored = safeLocalStorage()?.getItem(STORAGE_KEY) ?? null;
-  } catch {
-    /* storage unavailable — fall back to the default tab */
-  }
-  if (stored === "assets") return "assets";
-  if (stored === "code") return "code";
-  if (stored === "blocks") return "blocks";
-  return "compositions";
-}
-
-interface LeftSidebarProps {
-  width?: number;
-  projectId: string;
-  compositions: string[];
-  assets: string[];
-  activeComposition: string | null;
-  onSelectComposition: (comp: string) => void;
-  onImportFiles?: (files: FileList, dir?: string) => void | Promise<void>;
-  fileTree?: string[];
-  editingFile?: { path: string; content: string | null } | null;
-  onSelectFile?: (path: string) => void;
-  onCreateFile?: (path: string) => void;
-  onCreateFolder?: (path: string) => void;
-  onDeleteFile?: (path: string) => void;
-  onRenameFile?: (oldPath: string, newPath: string) => void;
-  onDuplicateFile?: (path: string) => void;
-  onMoveFile?: (oldPath: string, newPath: string) => void;
-  codeChildren?: ReactNode;
-  onRenderComposition?: (comp: string) => void;
-  isRendering?: boolean;
-  onLint?: () => void;
-  linting?: boolean;
-  lintFindingCount?: number;
-  lintHasError?: boolean;
-  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
-  onToggleCollapse?: () => void;
-  onAddBlock?: (blockName: string) => void | Promise<void>;
-  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
-  takeoverContent?: ReactNode;
-  onAddAssetToTimeline?: (path: string) => void;
-  onAddCompositionToTimeline?: (path: string) => void;
-}
-
-export const LeftSidebar = memo(
-  forwardRef<LeftSidebarHandle, LeftSidebarProps>(function LeftSidebar(
-    {
-      width = 240,
-      projectId,
-      compositions,
-      assets,
-      activeComposition,
-      onSelectComposition,
-      onImportFiles,
-      fileTree: fileProp,
-      editingFile,
-      onSelectFile,
-      onCreateFile,
-      onCreateFolder,
-      onDeleteFile,
-      onRenameFile,
-      onDuplicateFile,
-      onMoveFile,
-      codeChildren,
-      onRenderComposition,
-      isRendering,
-      onLint,
-      linting,
-      lintFindingCount,
-      lintHasError,
-      lintFindingsByFile,
-      onToggleCollapse,
-      onAddBlock,
-      onPreviewBlock,
-      takeoverContent,
-      onAddAssetToTimeline,
-      onAddCompositionToTimeline,
-    },
-    ref,
-  ) {
-    const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
-    const tabRef = useRef(tab);
-    tabRef.current = tab;
-    const tablistRef = useRef<HTMLDivElement>(null);
-    const masterCompositionPath = useMemo(
-      () => resolveMasterCompositionPath(compositions),
-      [compositions],
-    );
-
-    const selectTab = useCallback((t: SidebarTab) => {
-      setTab(t);
-      try {
-        safeLocalStorage()?.setItem(STORAGE_KEY, t);
-      } catch {
-        /* storage unavailable — the tab just won't be remembered */
-      }
-      trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
-    }, []);
-
-    const getTab = useCallback(() => tabRef.current, []);
-
-    useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
-
-    // APG tabs pattern: Left/Right move focus AND selection between tabs.
-    const handleTablistKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-        e.preventDefault();
-        const ids = SIDEBAR_TABS.map((t) => t.id);
-        const idx = ids.indexOf(tabRef.current);
-        const next = ids[(idx + (e.key === "ArrowRight" ? 1 : -1) + ids.length) % ids.length];
-        selectTab(next);
-        tablistRef.current?.querySelector<HTMLButtonElement>(`[data-tab-id="${next}"]`)?.focus();
-      },
-      [selectTab],
-    );
-
-    return (
-      <div
-        className="flex flex-col h-full overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
-        style={{ width }}
-      >
-        {takeoverContent ? (
-          <div className="flex min-h-0 flex-1">{takeoverContent}</div>
-        ) : (
-          <>
-            {/* Tabs — Code first */}
-            <div className="border-b border-neutral-800/50 px-3 py-3 shrink-0">
-              <div className="flex items-center gap-2">
-                <div
-                  ref={tablistRef}
-                  role="tablist"
-                  aria-label="Sidebar panels"
-                  onKeyDown={handleTablistKeyDown}
-                  className="grid min-w-0 flex-1 gap-0.5 rounded-[18px] bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
-                  style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}
-                >
-                  {SIDEBAR_TABS.map((t) => (
-                    <Tooltip key={t.id} label={t.tooltip} side="bottom">
-                      <button
-                        type="button"
-                        role="tab"
-                        data-tab-id={t.id}
-                        aria-selected={tab === t.id}
-                        aria-controls={`sidebar-panel-${t.id}`}
-                        tabIndex={tab === t.id ? 0 : -1}
-                        onClick={() => selectTab(t.id)}
-                        className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all active:scale-[0.97] ${
-                          tab === t.id
-                            ? "bg-neutral-800 text-white"
-                            : "text-neutral-500 hover:text-neutral-200"
-                        }`}
-                      >
-                        {t.label}
-                      </button>
-                    </Tooltip>
-                  ))}
-                </div>
-                {onToggleCollapse && (
-                  <button
-                    type="button"
-                    onClick={onToggleCollapse}
-                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
-                    title="Hide sidebar"
-                    aria-label="Hide sidebar"
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      aria-hidden="true"
-                    >
-                      <path d="m14 7-5 5 5 5" />
-                      <path d="M19 4v16" />
-                    </svg>
-                  </button>
-                )}
-              </div>
-            </div>
-
-            {/* Tab content */}
-            {tab === "compositions" && (
-              <div
-                id="sidebar-panel-compositions"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <CompositionsTab
-                  projectId={projectId}
-                  compositions={compositions}
-                  activeComposition={activeComposition}
-                  masterCompositionPath={masterCompositionPath}
-                  onSelect={onSelectComposition}
-                  onAddToTimeline={onAddCompositionToTimeline}
-                  onRenderComposition={onRenderComposition}
-                  isRendering={isRendering}
-                  lintFindingsByFile={lintFindingsByFile}
-                />
-              </div>
-            )}
-            {tab === "assets" && (
-              <div
-                id="sidebar-panel-assets"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <AssetsTab
-                  projectId={projectId}
-                  assets={assets}
-                  onImport={onImportFiles}
-                  onDelete={onDeleteFile}
-                  onRename={onRenameFile}
-                  onAddAssetToTimeline={onAddAssetToTimeline}
-                />
-              </div>
-            )}
-            {tab === "code" && (
-              <div id="sidebar-panel-code" role="tabpanel" className="flex flex-1 min-h-0">
-                {(fileProp?.length ?? 0) > 0 && (
-                  <div className="w-[160px] shrink-0 border-r border-neutral-800 overflow-y-auto">
-                    <FileTree
-                      files={fileProp ?? []}
-                      activeFile={editingFile?.path ?? null}
-                      onSelectFile={onSelectFile ?? (() => {})}
-                      onCreateFile={onCreateFile}
-                      onCreateFolder={onCreateFolder}
-                      onDeleteFile={onDeleteFile}
-                      onRenameFile={onRenameFile}
-                      onDuplicateFile={onDuplicateFile}
-                      onMoveFile={onMoveFile}
-                      onImportFiles={onImportFiles}
-                      lintFindingsByFile={lintFindingsByFile}
-                    />
-                  </div>
-                )}
-                <div className="flex-1 overflow-hidden min-w-0">
-                  {codeChildren ?? (
-                    <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
-                      Select a file to edit
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {tab === "blocks" && (
-              <div
-                id="sidebar-panel-blocks"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
-              </div>
-            )}
-
-            {/* Lint button pinned at the bottom */}
-            {onLint && (
-              <div className="border-t border-neutral-800 p-2 shrink-0">
-                <button
-                  onClick={onLint}
-                  disabled={linting}
-                  className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40"
-                >
-                  <svg
-                    width="12"
-                    height="12"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <path d="M9 11l3 3L22 4" />
-                    <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
-                  </svg>
-                  {linting ? "Linting…" : "Lint"}
-                  {!linting && lintFindingCount != null && lintFindingCount > 0 && (
-                    <span
-                      data-lint-badge={lintHasError ? "error" : "warning"}
-                      className={
-                        lintHasError
-                          ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none"
-                          : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400"
-                      }
-                    >
-                      {lintFindingCount}
-                      <span className="sr-only">
-                        {lintHasError
-                          ? " lint findings, including errors"
-                          : " lint findings, warnings only"}
-                      </span>
-                    </span>
-                  )}
-                </button>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    );
-  }),
-);