feat(studio): redesign Asset tab + fix beat analysis auto-trigger

packages/studio/src/components/sidebar/AssetContextMenu.tsx

@@ -0,0 +1,97 @@
+export function ContextMenu({
+  x,
+  y,
+  asset,
+  onClose,
+  onCopy,
+  onDelete,
+  onRename,
+}: {
+  x: number;
+  y: number;
+  asset: string;
+  onClose: () => void;
+  onCopy: (path: string) => void;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-[200]"
+      onClick={onClose}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onClose();
+      }}
+    >
+      <div
+        className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[140px] text-xs"
+        style={{ left: x, top: y }}
+      >
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopy(asset);
+            onClose();
+          }}
+          className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+        >
+          Copy path
+        </button>
+        {onRename && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+            className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+          >
+            Rename
+          </button>
+        )}
+        {onDelete && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(asset);
+              onClose();
+            }}
+            className="w-full text-left px-3 py-1.5 text-red-400 hover:bg-neutral-800 transition-colors"
+          >
+            Delete
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function DeleteConfirm({
+  name,
+  onConfirm,
+  onCancel,
+}: {
+  name: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
+      <span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
+      <div className="flex items-center gap-1 flex-shrink-0">
+        <button
+          onClick={onConfirm}
+          className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 transition-colors"
+        >
+          Delete
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}