@hyperframes/studio 0.8.6 → 0.8.7

package/src/components/sidebar/BlocksTab.tsx

@@ -1,6 +1,8 @@
 // fallow-ignore-file code-duplication
 import { memo, useState, useCallback, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
+import { SearchInput } from "../ui/SearchInput";
+import { PromptPreviewModal } from "./PromptPreviewModal";
 import { useBlockCatalog } from "../../hooks/useBlockCatalog";
 import {
   BLOCK_CATEGORIES,
@@ -18,7 +20,7 @@ export interface BlockPreviewInfo {
 }
 
 interface BlocksTabProps {
-  onAddBlock?: (blockName: string) => void;
+  onAddBlock?: (blockName: string) => void | Promise<void>;
   onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
 }
 
@@ -48,29 +50,12 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
     <div className="flex flex-col flex-1 min-h-0">
       {/* Search */}
       <div className="px-3 pt-2 pb-1 flex-shrink-0">
-        <div className="relative">
-          <svg
-            className="absolute left-2 top-1/2 -translate-y-1/2 text-neutral-500"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <circle cx="11" cy="11" r="8" />
-            <path d="m21 21-4.35-4.35" />
-          </svg>
-          <input
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search by name, category, or tag…"
-            className="w-full bg-neutral-900 border border-neutral-800 rounded-md pl-7 pr-2 py-1.5 text-[11px] text-neutral-200 placeholder:text-neutral-600 focus:outline-none focus:border-neutral-700 transition-colors"
-          />
-        </div>
+        <SearchInput
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by name, category, or tag…"
+          aria-label="Search blocks"
+        />
       </div>
 
       {/* Category pills */}
@@ -165,7 +150,8 @@ function CategoryPill({
     <button
       type="button"
       onClick={onClick}
-      className={`flex-shrink-0 px-2 py-1 rounded-full text-[10px] font-medium transition-colors ${
+      aria-pressed={active}
+      className={`flex-shrink-0 px-2 py-1 rounded-full text-[10px] font-medium transition-colors active:scale-[0.98] ${
         active
           ? colors
             ? `${colors.bg} ${colors.text}`
@@ -304,12 +290,12 @@ function BlockCard({
   tags?: string[];
   posterUrl?: string;
   videoUrl?: string;
-  onAdd?: () => void;
+  onAdd?: () => void | Promise<void>;
   onShowPrompt?: (info: { title: string; prompt: string }) => void;
   onPreview?: (preview: BlockPreviewInfo | null) => void;
 }) {
   const [hovered, setHovered] = useState(false);
-  const [adding, setAdding] = useState(false);
+  const [addState, setAddState] = useState<"idle" | "adding" | "added" | "failed">("idle");
   const hoverTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
@@ -337,14 +323,20 @@ function BlockCard({
   }, []);
 
   const handleAdd = useCallback(
-    (e: React.MouseEvent) => {
+    async (e: React.MouseEvent) => {
       e.stopPropagation();
-      if (adding || !onAdd) return;
-      setAdding(true);
-      onAdd();
-      setTimeout(() => setAdding(false), 1000);
+      if (addState !== "idle" || !onAdd) return;
+      setAddState("adding");
+      try {
+        // Confirm only what actually happened — no optimistic "Added!".
+        await onAdd();
+        setAddState("added");
+      } catch {
+        setAddState("failed");
+      }
+      setTimeout(() => setAddState("idle"), 1500);
     },
-    [onAdd, adding],
+    [onAdd, addState],
   );
 
   const { activeCompPath, compositionDimensions } = useStudioShellContext();
@@ -422,14 +414,18 @@ function BlockCard({
           </div>
         )}
 
-        {/* Action overlay */}
-        <div className="absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-black/60 opacity-0 group-hover/card:opacity-100 transition-opacity">
+        {/* Action overlay — also revealed when a button inside receives focus */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-black/60 opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100 transition-opacity">
           {onAdd && (
             <button
               type="button"
               onClick={handleAdd}
               title="Add to composition at current time"
-              className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-white text-black text-[10px] font-semibold hover:bg-neutral-200 transition-colors"
+              className={`flex items-center gap-1 px-3 py-1.5 rounded-md text-[10px] font-semibold transition-colors active:scale-[0.97] ${
+                addState === "failed"
+                  ? "bg-red-500 text-white"
+                  : "bg-white text-black hover:bg-neutral-200"
+              }`}
             >
               <svg
                 width="10"
@@ -441,14 +437,20 @@ function BlockCard({
               >
                 <path d="M12 5v14M5 12h14" />
               </svg>
-              {adding ? "Added!" : "Add"}
+              {addState === "adding"
+                ? "Adding…"
+                : addState === "added"
+                  ? "Added!"
+                  : addState === "failed"
+                    ? "Failed"
+                    : "Add"}
             </button>
           )}
           <button
             type="button"
             onClick={handleShowPrompt}
             title="Generate a prompt to paste into your AI agent"
-            className={`flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors ${
+            className={`flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors active:scale-[0.97] ${
               onAdd
                 ? "bg-white/15 text-white/90 hover:bg-white/25 text-[9px]"
                 : "bg-white text-black hover:bg-neutral-200 text-[10px] font-semibold"
@@ -499,93 +501,3 @@ function BlockCard({
     </div>
   );
 }
-
-function PromptPreviewModal({
-  title,
-  prompt,
-  onClose,
-}: {
-  title: string;
-  prompt: string;
-  onClose: () => void;
-}) {
-  const [value, setValue] = useState(prompt);
-  const [copied, setCopied] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    requestAnimationFrame(() => textareaRef.current?.focus());
-  }, []);
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(value);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }, [value]);
-
-  return (
-    <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
-      onClick={onClose}
-    >
-      <div
-        className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
-          <div>
-            <h3 className="text-sm font-medium text-neutral-200">Ask agent</h3>
-            <p className="text-xs text-neutral-500 mt-0.5">{title}</p>
-          </div>
-          <button
-            className="p-1 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50"
-            onClick={onClose}
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-            >
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-        <div className="flex-1 overflow-y-auto px-5 py-4">
-          <p className="text-[11px] text-neutral-500 mb-2">
-            Edit the prompt below, then copy and paste into your AI agent
-          </p>
-          <textarea
-            ref={textareaRef}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleCopy();
-              if (e.key === "Escape") onClose();
-            }}
-            className="w-full min-h-[240px] text-[11px] text-neutral-200 leading-relaxed font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 resize-y focus:outline-none focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
-          />
-        </div>
-        <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">
-          <span className="text-[11px] text-neutral-600">
-            {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
-          </span>
-          <button
-            className={`px-4 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-              copied
-                ? "bg-emerald-500 text-white"
-                : "bg-studio-accent/90 text-neutral-950 hover:bg-studio-accent"
-            }`}
-            onClick={handleCopy}
-          >
-            {copied ? "Copied!" : "Copy prompt"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/sidebar/CompositionsTab.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { setPreviewMediaMuted } from "../../player/lib/timelineIframeHelpers";
 import { buildCompositionThumbnailUrl } from "../../player/components/CompositionThumbnail";
 import { TIMELINE_COMPOSITION_MIME } from "../../utils/timelineCompositionDrop";
+import { Tooltip } from "../ui/Tooltip";
 
 interface CompositionsTabProps {
   projectId: string;
@@ -201,6 +202,8 @@ function CompCard({
       role="button"
       tabIndex={0}
       draggable
+      aria-label={`Open composition ${name}`}
+      aria-pressed={isActive}
       onDragStart={(event) => {
         draggedRef.current = true;
         event.dataTransfer.effectAllowed = "copy";
@@ -215,6 +218,8 @@ function CompCard({
         if (!draggedRef.current) onSelect();
       }}
       onKeyDown={(event) => {
+        // Only when the row itself is focused — keydowns bubbling from the
+        // inner controls (play button) must keep their native activation.
         if (event.target !== event.currentTarget) return;
         if (event.key === "Enter" || event.key === " ") {
           event.preventDefault();
@@ -223,7 +228,7 @@ function CompCard({
       }}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
-      className={`group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing ${
+      className={`group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing outline-none focus-visible:bg-neutral-800/60 ${
         isActive
           ? "bg-studio-accent/10 border-l-2 border-studio-accent"
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
@@ -288,7 +293,12 @@ function CompCard({
         <div className="flex items-center gap-1">
           <span className="text-[11px] font-medium text-neutral-300 truncate">{name}</span>
           {lintInfo && lintInfo.count > 0 && (
-            <span className="flex-shrink-0 w-2 h-2 rounded-full bg-amber-400" />
+            <span
+              aria-label={`${lintInfo.count} lint finding${lintInfo.count === 1 ? "" : "s"}`}
+              className="flex-shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400"
+            >
+              {lintInfo.count}
+            </span>
           )}
         </div>
         <span className="text-[9px] text-neutral-600 truncate block">{comp}</span>
@@ -308,39 +318,41 @@ function CompCard({
         </button>
       )}
       {onRender && (
-        <button
-          type="button"
-          title={isRendering ? "Rendering..." : `Render ${name}`}
-          aria-label={isRendering ? "Rendering..." : `Render ${name}`}
-          disabled={isRendering}
-          onClick={(e) => {
-            e.stopPropagation();
-            onRender();
-          }}
-          // h-6 w-6 = the 24x24 WCAG 2.2 (2.5.8) minimum target; the 14px glyph
-          // is unchanged, only the box grows. The sibling "+" button is h-8 w-8,
-          // so the card row already has the room.
-          className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
-            isRendering
-              ? "text-neutral-600 cursor-not-allowed"
-              : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"
-          }`}
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+        <Tooltip label={isRendering ? "A render is already in progress" : `Render ${name}`}>
+          <button
+            type="button"
+            aria-label={isRendering ? "A render is already in progress" : `Render ${name}`}
+            disabled={isRendering}
+            onClick={(e) => {
+              e.stopPropagation();
+              onRender();
+            }}
+            // h-6 w-6 = the 24x24 WCAG 2.2 (2.5.8) minimum target; the 14px glyph
+            // is unchanged, only the box grows. The sibling "+" button is h-8 w-8,
+            // so the card row already has the room.
+            className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
+              isRendering
+                ? "text-neutral-600 cursor-not-allowed"
+                : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"
+            }`}
           >
-            <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>
+            <svg
+              width="14"
+              height="14"
+              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>
+          </button>
+        </Tooltip>
       )}
     </div>
   );

package/src/components/sidebar/LeftSidebar.tsx

@@ -24,6 +24,13 @@ export interface LeftSidebarHandle {
 
 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
@@ -49,7 +56,7 @@ interface LeftSidebarProps {
   assets: string[];
   activeComposition: string | null;
   onSelectComposition: (comp: string) => void;
-  onImportFiles?: (files: FileList, dir?: string) => void;
+  onImportFiles?: (files: FileList, dir?: string) => void | Promise<void>;
   fileTree?: string[];
   editingFile?: { path: string; content: string | null } | null;
   onSelectFile?: (path: string) => void;
@@ -67,7 +74,7 @@ interface LeftSidebarProps {
   lintFindingCount?: number;
   lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
   onToggleCollapse?: () => void;
-  onAddBlock?: (blockName: string) => void;
+  onAddBlock?: (blockName: string) => void | Promise<void>;
   onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
   takeoverContent?: ReactNode;
   onAddAssetToTimeline?: (path: string) => void;
@@ -112,6 +119,7 @@ export const LeftSidebar = memo(
     const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
     const tabRef = useRef(tab);
     tabRef.current = tab;
+    const tablistRef = useRef<HTMLDivElement>(null);
 
     const selectTab = useCallback((t: SidebarTab) => {
       setTab(t);
@@ -127,6 +135,20 @@ export const LeftSidebar = memo(
 
     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"
@@ -140,61 +162,33 @@ export const LeftSidebar = memo(
             <div className="border-b border-neutral-800/50 px-3 py-3 flex-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" }}
                 >
-                  <Tooltip label="Source code editor" side="bottom">
-                    <button
-                      type="button"
-                      onClick={() => selectTab("code")}
-                      className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                        tab === "code"
-                          ? "bg-neutral-800 text-white"
-                          : "text-neutral-500 hover:text-neutral-200"
-                      }`}
-                    >
-                      Code
-                    </button>
-                  </Tooltip>
-                  <Tooltip label="Compositions and sub-compositions" side="bottom">
-                    <button
-                      type="button"
-                      onClick={() => selectTab("compositions")}
-                      className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                        tab === "compositions"
-                          ? "bg-neutral-800 text-white"
-                          : "text-neutral-500 hover:text-neutral-200"
-                      }`}
-                    >
-                      Comps
-                    </button>
-                  </Tooltip>
-                  <Tooltip label="Videos, images, audio, fonts" side="bottom">
-                    <button
-                      type="button"
-                      onClick={() => selectTab("assets")}
-                      className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                        tab === "assets"
-                          ? "bg-neutral-800 text-white"
-                          : "text-neutral-500 hover:text-neutral-200"
-                      }`}
-                    >
-                      Assets
-                    </button>
-                  </Tooltip>
-                  <Tooltip label="Browse blocks and components" side="bottom">
-                    <button
-                      type="button"
-                      onClick={() => selectTab("blocks")}
-                      className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                        tab === "blocks"
-                          ? "bg-neutral-800 text-white"
-                          : "text-neutral-500 hover:text-neutral-200"
-                      }`}
-                    >
-                      Catalog
-                    </button>
-                  </Tooltip>
+                  {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
@@ -225,29 +219,41 @@ export const LeftSidebar = memo(
 
             {/* Tab content */}
             {tab === "compositions" && (
-              <CompositionsTab
-                projectId={projectId}
-                compositions={compositions}
-                activeComposition={activeComposition}
-                onSelect={onSelectComposition}
-                onAddToTimeline={onAddCompositionToTimeline}
-                onRenderComposition={onRenderComposition}
-                isRendering={isRendering}
-                lintFindingsByFile={lintFindingsByFile}
-              />
+              <div
+                id="sidebar-panel-compositions"
+                role="tabpanel"
+                className="flex flex-col flex-1 min-h-0"
+              >
+                <CompositionsTab
+                  projectId={projectId}
+                  compositions={compositions}
+                  activeComposition={activeComposition}
+                  onSelect={onSelectComposition}
+                  onAddToTimeline={onAddCompositionToTimeline}
+                  onRenderComposition={onRenderComposition}
+                  isRendering={isRendering}
+                  lintFindingsByFile={lintFindingsByFile}
+                />
+              </div>
             )}
             {tab === "assets" && (
-              <AssetsTab
-                projectId={projectId}
-                assets={assets}
-                onImport={onImportFiles}
-                onDelete={onDeleteFile}
-                onRename={onRenameFile}
-                onAddAssetToTimeline={onAddAssetToTimeline}
-              />
+              <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 className="flex flex-1 min-h-0">
+              <div id="sidebar-panel-code" role="tabpanel" className="flex flex-1 min-h-0">
                 {(fileProp?.length ?? 0) > 0 && (
                   <div className="w-[160px] flex-shrink-0 border-r border-neutral-800 overflow-y-auto">
                     <FileTree
@@ -276,7 +282,13 @@ export const LeftSidebar = memo(
             )}
 
             {tab === "blocks" && (
-              <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
+              <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 */}
@@ -285,7 +297,7 @@ export const LeftSidebar = memo(
                 <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 hover:text-amber-300 hover:bg-neutral-800 transition-colors disabled:opacity-40"
+                  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"