feat(studio): full Blocks panel — browse, search, add, drag-and-drop registry items

Adds a Blocks tab to the Studio left sidebar with the full 78-item registry
catalog (58 blocks + 20 components). Users can browse by category, search by
title/description, preview CDN-hosted poster thumbnails with video-on-hover,
and install items on-demand with one click or drag-to-timeline.

Core changes:
- BlockCategory type + resolveBlockCategory() for 7 categories (Captions, VFX,
  Transitions, Effects, Social, Data, Scenes)
- Registry API routes: GET /api/registry/blocks (catalog) + POST install
- StudioApiAdapter extended with listRegistryCatalog + installRegistryBlock
- Vite adapter reads from disk; CLI adapter fetches from GitHub (24h cache)
- BlockParam interface + params on 6 blocks for future parameter controls

Studio UI:
- 4th sidebar tab "Blocks" with responsive grid, category pills, search bar
- BlockCard: CDN poster thumbnail, video autoplay on hover, duration + WebGL badges
- On-demand install: blocks append as sub-compositions on timeline; components
  overlay at start=0 spanning full duration with transparent background patching
- TIMELINE_BLOCK_MIME drag-and-drop to timeline
- BlockParamsPanel (Phase 3 scaffold) auto-opens for parameterized blocks

Registry manifests:
- All 58 blocks backfilled with preview: { video, poster } CDN URLs
- All 20 components normalized to object format + poster URLs added
- 6 blocks annotated with params (Liquid Glass/Background, Portal, Chart,
  Logo Outro, Magnetic)
- flowchart-vertical preview generated and uploaded to CDN

packages/studio/src/components/editor/BlockParamsPanel.tsx

@@ -0,0 +1,145 @@
+import { memo, useState, useCallback } from "react";
+import type { BlockParam } from "@hyperframes/core/registry";
+
+interface BlockParamsPanelProps {
+  blockName: string;
+  blockTitle: string;
+  params: BlockParam[];
+  compositionPath: string;
+  onClose: () => void;
+}
+
+export const BlockParamsPanel = memo(function BlockParamsPanel({
+  blockTitle,
+  params,
+  compositionPath,
+  onClose,
+}: BlockParamsPanelProps) {
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {};
+    for (const p of params) {
+      initial[p.key] = p.default;
+    }
+    return initial;
+  });
+
+  const handleChange = useCallback(
+    (key: string, value: string) => {
+      setValues((prev) => ({ ...prev, [key]: value }));
+      console.log(`[BlockParams] ${compositionPath} ${key}: ${value}`);
+    },
+    [compositionPath],
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800">
+        <div className="text-[11px] font-semibold text-neutral-200 truncate">{blockTitle}</div>
+        <button
+          type="button"
+          onClick={onClose}
+          className="text-neutral-500 hover:text-neutral-300 transition-colors"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-3 space-y-3">
+        <div className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+          Parameters
+        </div>
+        {params.map((param) => (
+          <ParamControl
+            key={param.key}
+            param={param}
+            value={values[param.key] ?? param.default}
+            onChange={(v) => handleChange(param.key, v)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+function ParamControl({
+  param,
+  value,
+  onChange,
+}: {
+  param: BlockParam;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <div className="space-y-1">
+      <label className="text-[10px] font-medium text-neutral-400">{param.label}</label>
+
+      {param.type === "color" && (
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            className="w-7 h-7 rounded border border-neutral-700 bg-transparent cursor-pointer"
+          />
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            className="flex-1 bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 font-mono focus:outline-none focus:border-neutral-700"
+          />
+        </div>
+      )}
+
+      {param.type === "number" && (
+        <div className="flex items-center gap-2">
+          <input
+            type="range"
+            min={param.min ?? 0}
+            max={param.max ?? 100}
+            step={param.step ?? 1}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            className="flex-1"
+          />
+          <span className="text-[10px] text-neutral-400 w-8 text-right tabular-nums">{value}</span>
+        </div>
+      )}
+
+      {param.type === "text" && (
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700"
+        />
+      )}
+
+      {param.type === "select" && param.options && (
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700"
+        >
+          {param.options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}

packages/studio/src/components/editor/manualEditingAvailability.ts

@@ -60,6 +60,12 @@ export const STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED =
     true,
   );
 
+export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_BLOCKS_PANEL", "VITE_STUDIO_BLOCKS_PANEL_ENABLED"],
+  false,
+);
+
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 
 export const STUDIO_MANUAL_EDITING_ENABLED = STUDIO_PREVIEW_MANUAL_EDITING_ENABLED;