@morphika/andami 0.5.0 → 0.5.2

package/components/builder/SortableRow.tsx

@@ -14,6 +14,7 @@ import { getRowLayoutStyles } from "../../lib/builder/layout-styles";
 import { normalizeMinHeight } from "../../lib/builder/utils";
 import { getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 import { formatRowPercent } from "../../lib/builder/format";
+import { ArrowDownIcon, ArrowUpIcon, BubbleTooltip, CloseIcon, CopyIcon } from "./BubbleIcons";
 
 /**
  * Convert vh-based CSS values to pixels using the simulated device viewport height.
@@ -261,7 +262,7 @@ export default function SortableRow({
           showToolbar ? "opacity-100" : "opacity-0 pointer-events-none"
         }`}
         style={{
-          transform: `translateX(calc(-100% - 8px)) scale(${Math.min(1.5, 1 / canvasZoom)})`,
+          transform: `translateX(calc(-100% - 8px)) scale(${Math.min(2, 1 / canvasZoom)})`,
           transformOrigin: "top right",
           width: "90px",
         }}
@@ -279,7 +280,7 @@ export default function SortableRow({
           className="flex flex-col items-stretch rounded-lg py-2 px-2.5 gap-1 cursor-grab active:cursor-grabbing"
           style={{
             background: "#e0daff",
-            border: "1px solid #7500d5",
+            border: "1.5px solid #7500d5",
           }}
           {...attributes}
           {...listeners}
@@ -294,40 +295,40 @@ export default function SortableRow({
             <button
               onClick={(e) => { e.stopPropagation(); onDuplicate(); }}
               onPointerDown={(e) => e.stopPropagation()}
-              className="flex items-center justify-center text-[12px] transition-colors"
+              className="group/bb relative flex items-center justify-center transition-colors"
               style={{ color: "rgba(117, 0, 213, 0.6)" }}
               onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
               onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-              title="Duplicate section"
               aria-label="Duplicate section"
             >
-              ⧉
+              <CopyIcon size={14} />
+              <BubbleTooltip>Duplicate</BubbleTooltip>
             </button>
             <button
               onClick={(e) => { e.stopPropagation(); onMoveUp(); }}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={isFirst}
-              className="flex items-center justify-center text-[12px] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="group/bb relative flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
               style={{ color: "rgba(117, 0, 213, 0.6)" }}
               onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
               onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-              title="Move up"
               aria-label="Move section up"
             >
-              ↑
+              <ArrowUpIcon size={14} />
+              {!isFirst && <BubbleTooltip>Move up</BubbleTooltip>}
             </button>
             <button
               onClick={(e) => { e.stopPropagation(); onMoveDown(); }}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={isLast}
-              className="flex items-center justify-center text-[12px] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="group/bb relative flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
               style={{ color: "rgba(117, 0, 213, 0.6)" }}
               onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
               onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-              title="Move down"
               aria-label="Move section down"
             >
-              ↓
+              <ArrowDownIcon size={14} />
+              {!isLast && <BubbleTooltip>Move down</BubbleTooltip>}
             </button>
           </div>
 
@@ -358,7 +359,7 @@ export default function SortableRow({
             title="Delete section"
             aria-label="Delete section"
           >
-            <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>-</span> Delete
+            <CloseIcon size={12} /> Delete
           </button>
         </div>
 
@@ -375,7 +376,7 @@ export default function SortableRow({
               className="flex flex-col items-stretch rounded-lg py-1.5 px-2 mt-2 gap-0.5"
               style={{
                 background: "#e0daff",
-                border: "1px solid #7500d5",
+                border: "1.5px solid #7500d5",
               }}
               onClick={(e) => e.stopPropagation()}
             >
@@ -391,14 +392,14 @@ export default function SortableRow({
                     }}
                     onPointerDown={(e) => e.stopPropagation()}
                     disabled={!canRemoveRow}
-                    className="flex items-center justify-center text-[12px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                    className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                     style={{ color: "rgba(117, 0, 213, 0.6)" }}
                     onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
                     onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-                    title={canRemoveRow ? "Remove row" : "Cover must have at least 1 row"}
                     aria-label="Remove row"
                   >
-                    ×
+                    <CloseIcon size={12} />
+                    {canRemoveRow && <BubbleTooltip>Remove row</BubbleTooltip>}
                   </button>
                 </div>
               ))}
@@ -436,7 +437,7 @@ export default function SortableRow({
               className="flex flex-col items-stretch rounded-lg py-1.5 px-2 mt-2 gap-0.5"
               style={{
                 background: "#e0daff",
-                border: "1px solid #7500d5",
+                border: "1.5px solid #7500d5",
               }}
               onClick={(e) => e.stopPropagation()}
             >
@@ -462,14 +463,14 @@ export default function SortableRow({
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
                         disabled={idx === 0}
-                        className="flex items-center justify-center text-[10px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                         style={{ color: "rgba(117, 0, 213, 0.6)" }}
                         onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
                         onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-                        title="Move slide up"
                         aria-label="Move slide up"
                       >
-                        ↑
+                        <ArrowUpIcon size={12} />
+                        {idx > 0 && <BubbleTooltip>Move up</BubbleTooltip>}
                       </button>
                       <button
                         onClick={(e) => {
@@ -478,14 +479,14 @@ export default function SortableRow({
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
                         disabled={idx === slides.length - 1}
-                        className="flex items-center justify-center text-[10px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                         style={{ color: "rgba(117, 0, 213, 0.6)" }}
                         onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
                         onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-                        title="Move slide down"
                         aria-label="Move slide down"
                       >
-                        ↓
+                        <ArrowDownIcon size={12} />
+                        {idx < slides.length - 1 && <BubbleTooltip>Move down</BubbleTooltip>}
                       </button>
                       <button
                         onClick={(e) => {
@@ -494,14 +495,14 @@ export default function SortableRow({
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
                         disabled={!canRemoveSlide}
-                        className="flex items-center justify-center text-[12px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                         style={{ color: "rgba(117, 0, 213, 0.6)" }}
                         onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
                         onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-                        title={canRemoveSlide ? "Remove slide" : "Parallax must have at least 1 slide"}
                         aria-label="Remove slide"
                       >
-                        ×
+                        <CloseIcon size={12} />
+                        {canRemoveSlide && <BubbleTooltip>Remove slide</BubbleTooltip>}
                       </button>
                     </div>
                   </div>

package/components/builder/VirtualAssetGrid.tsx

@@ -315,7 +315,7 @@ function AssetGridItem({
       onContextMenu={onContextMenu ? (e) => onContextMenu(e, asset) : undefined}
       className={`relative flex flex-col rounded-lg overflow-hidden transition-all ${
         isSelected
-          ? "ring-2 ring-[#076bff] ring-offset-2 shadow-lg"
+          ? "ring-2 ring-[#3580f9] ring-offset-2 shadow-lg"
           : "hover:shadow-md"
       }`}
     >
@@ -323,7 +323,7 @@ function AssetGridItem({
       {multiSelect && (
         <div
           className={`absolute top-1.5 left-1.5 z-10 w-5 h-5 rounded flex items-center justify-center text-white text-[10px] font-bold transition-colors ${
-            isSelected ? "bg-[#076bff]" : "bg-black/30 border border-white/50"
+            isSelected ? "bg-[#3580f9]" : "bg-black/30 border border-white/50"
           }`}
         >
           {isSelected && (

package/components/builder/asset-browser/R2BrowserContent.tsx

@@ -4,7 +4,7 @@ import { useState, useMemo, useCallback, useRef, useEffect, Fragment } from "rea
 import type { RegisteredAsset } from "../../../lib/sanity/types";
 import { VirtualAssetGrid } from "../VirtualAssetGrid";
 import type { UploadingFile } from "./types";
-import { formatFileSize, isImageType, isVideoType, isFontType, buildFolderTree } from "./helpers";
+import { formatFileSize, isImageType, isVideoType, isAudioType, isFontType, buildFolderTree } from "./helpers";
 import { FolderTreeItem } from "./FolderTreeItem";
 import { VideoThumbnail } from "./VideoThumbnail";
 import { FileLightbox } from "./FileLightbox";
@@ -34,7 +34,7 @@ export function R2BrowserContent({
   setSelectedAsset: (a: RegisteredAsset | null) => void;
   onRetry: () => void;
   onDoubleClick?: (asset: RegisteredAsset) => void;
-  filterType?: "image" | "video" | "all";
+  filterType?: "image" | "video" | "audio" | "all";
   multiSelect?: boolean;
   selectedAssets?: RegisteredAsset[];
   setSelectedAssets?: (assets: RegisteredAsset[]) => void;
@@ -99,6 +99,7 @@ export function R2BrowserContent({
 
     if (filterType === "image") filtered = filtered.filter((a) => isImageType(a.extension));
     else if (filterType === "video") filtered = filtered.filter((a) => isVideoType(a.extension));
+    else if (filterType === "audio") filtered = filtered.filter((a) => isAudioType(a.extension));
 
     if (searchQuery.trim()) {
       const q = searchQuery.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
@@ -106,8 +107,12 @@ export function R2BrowserContent({
         (a) => {
           const nameNorm = a.filename.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
           const pathNorm = a.path.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
-          return a.filename !== ".folder" && (nameNorm.includes(q) || pathNorm.includes(q)) &&
-            (filterType === "all" || (filterType === "image" ? isImageType(a.extension) : isVideoType(a.extension)));
+          const matchesType =
+            filterType === "all" ||
+            (filterType === "image" && isImageType(a.extension)) ||
+            (filterType === "video" && isVideoType(a.extension)) ||
+            (filterType === "audio" && isAudioType(a.extension));
+          return a.filename !== ".folder" && (nameNorm.includes(q) || pathNorm.includes(q)) && matchesType;
         }
       );
     }
@@ -185,6 +190,18 @@ export function R2BrowserContent({
       );
     }
 
+    if (isAudioType(asset.extension)) {
+      return (
+        <div className="w-full h-full flex items-center justify-center bg-neutral-50">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-neutral-300">
+            <path d="M9 18V5l12-2v13" />
+            <circle cx="6" cy="18" r="3" />
+            <circle cx="18" cy="16" r="3" />
+          </svg>
+        </div>
+      );
+    }
+
     return (
       <div className="w-full h-full flex items-center justify-center bg-neutral-50">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-300">
@@ -208,26 +225,26 @@ export function R2BrowserContent({
         ref={ops.fileInputRef}
         type="file"
         multiple
-        accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,video/mp4,video/webm,video/quicktime"
+        accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,video/mp4,video/webm,video/quicktime,audio/mpeg,audio/wav,audio/ogg,audio/mp4,audio/aac,audio/flac"
         className="hidden"
         onChange={dnd.handleFileInputChange}
       />
 
       {/* Drag & drop overlay */}
       {dnd.dragOver && (
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-[#076bff]/10 border-2 border-dashed border-[#076bff] rounded-lg backdrop-blur-[2px]">
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-[#3580f9]/10 border-2 border-dashed border-[#3580f9] rounded-lg backdrop-blur-[2px]">
           <div className="flex flex-col items-center gap-3">
-            <div className="w-16 h-16 rounded-full bg-[#076bff]/10 flex items-center justify-center">
+            <div className="w-16 h-16 rounded-full bg-[#3580f9]/10 flex items-center justify-center">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={ADMIN_ACCENT} strokeWidth="1.5">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                 <polyline points="17 8 12 3 7 8" />
                 <line x1="12" y1="3" x2="12" y2="15" />
               </svg>
             </div>
-            <p className="text-sm font-medium text-[#076bff]">
+            <p className="text-sm font-medium text-[#3580f9]">
               Drop files or folders here{currentFolder ? ` to ${currentFolder}` : ""}
             </p>
-            <p className="text-xs text-neutral-500">Supported formats: JPG, PNG, WebP, GIF, SVG, MP4, WebM, MOV</p>
+            <p className="text-xs text-neutral-500">Supported formats: JPG, PNG, WebP, GIF, SVG, MP4, WebM, MOV, MP3, WAV, OGG, M4A, AAC, FLAC</p>
             <p className="text-xs text-neutral-400">Maximum file size: 500 MB</p>
           </div>
         </div>
@@ -284,7 +301,7 @@ export function R2BrowserContent({
             <button
               onClick={() => ops.fileInputRef.current?.click()}
               disabled={uploading.some((u) => u.status === "uploading" || u.status === "registering")}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-[#076bff] px-3 py-1.5 text-[11px] text-white font-medium uppercase tracking-wider hover:bg-[#076bff]/90 transition-colors disabled:opacity-50"
+              className="inline-flex items-center gap-1.5 rounded-lg bg-[#3580f9] px-3 py-1.5 text-[11px] text-white font-medium uppercase tracking-wider hover:bg-[#3580f9]/90 transition-colors disabled:opacity-50"
               title={`Upload files${currentFolder ? ` to ${currentFolder}` : ""}`}
               type="button"
             >
@@ -310,7 +327,7 @@ export function R2BrowserContent({
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
                   </button>
                 ) : (
-                  <div className="w-3.5 h-3.5 border-2 border-[#076bff] border-t-transparent rounded-full animate-spin" />
+                  <div className="w-3.5 h-3.5 border-2 border-[#3580f9] border-t-transparent rounded-full animate-spin" />
                 )}
                 <span className="text-[11px] text-neutral-600 truncate flex-1 min-w-0">
                   {u.file.name}
@@ -319,7 +336,7 @@ export function R2BrowserContent({
                 </span>
                 {(u.status === "uploading" || u.status === "registering") && (
                   <div className="w-24 h-1.5 bg-neutral-200 rounded-full overflow-hidden">
-                    <div className="h-full bg-[#076bff] rounded-full transition-all duration-300" style={{ width: `${u.progress}%` }} />
+                    <div className="h-full bg-[#3580f9] rounded-full transition-all duration-300" style={{ width: `${u.progress}%` }} />
                   </div>
                 )}
                 <span className="text-[10px] text-neutral-400 tabular-nums">{formatFileSize(u.file.size)}</span>
@@ -339,7 +356,7 @@ export function R2BrowserContent({
           {error && (
             <div className="flex flex-col items-center justify-center h-40 gap-3 px-8">
               <span className="text-xs text-red-500 text-center max-w-md leading-relaxed">{error}</span>
-              <button onClick={onRetry} className="text-xs text-[#076bff] hover:underline">Retry</button>
+              <button onClick={onRetry} className="text-xs text-[#3580f9] hover:underline">Retry</button>
             </div>
           )}
 
@@ -355,9 +372,9 @@ export function R2BrowserContent({
                     ref={newFolderInputRef}
                     type="text" value={ops.newFolderName} onChange={(e) => ops.setNewFolderName(e.target.value)}
                     onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Enter") ops.handleCreateFolder(); if (e.key === "Escape") ops.cancelNewFolderInput(); }}
-                    placeholder="Folder name..." className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#076bff]"
+                    placeholder="Folder name..." className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#3580f9]"
                   />
-                  <button onClick={ops.handleCreateFolder} disabled={!ops.newFolderName.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#076bff] text-white disabled:opacity-50" type="button">Create</button>
+                  <button onClick={ops.handleCreateFolder} disabled={!ops.newFolderName.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#3580f9] text-white disabled:opacity-50" type="button">Create</button>
                   <button onClick={ops.cancelNewFolderInput} className="text-xs px-2 py-1 text-neutral-500 hover:text-neutral-800" type="button">Cancel</button>
                 </div>
               )}
@@ -370,9 +387,9 @@ export function R2BrowserContent({
                     ref={renameInputRef}
                     type="text" value={ops.renameValue} onChange={(e) => ops.setRenameValue(e.target.value)}
                     onKeyDown={(e) => { e.stopPropagation(); if (e.key === "Enter") ops.handleRename(); if (e.key === "Escape") ops.cancelRename(); }}
-                    className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#076bff]"
+                    className="flex-1 text-sm text-neutral-900 bg-white border border-neutral-300 rounded px-2 py-1 focus:outline-none focus:border-[#3580f9]"
                   />
-                  <button onClick={ops.handleRename} disabled={!ops.renameValue.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#076bff] text-white disabled:opacity-50" type="button">Rename</button>
+                  <button onClick={ops.handleRename} disabled={!ops.renameValue.trim() || ops.actionLoading} className="text-xs px-3 py-1 rounded bg-[#3580f9] text-white disabled:opacity-50" type="button">Rename</button>
                   <button onClick={ops.cancelRename} className="text-xs px-2 py-1 text-neutral-500 hover:text-neutral-800" type="button">Cancel</button>
                 </div>
               )}

package/components/builder/asset-browser/helpers.ts

@@ -62,6 +62,10 @@ export function isVideoType(ext: string): boolean {
   return ["mp4", "webm", "mov"].includes(ext);
 }
 
+export function isAudioType(ext: string): boolean {
+  return ["mp3", "wav", "ogg", "m4a", "aac", "flac"].includes(ext);
+}
+
 export function isFontType(ext: string): boolean {
   return ["otf", "ttf", "woff", "woff2"].includes(ext);
 }

package/components/builder/asset-browser/types.ts

@@ -17,6 +17,7 @@ export const MAX_UPLOAD_SIZE = 500 * 1024 * 1024; // 500 MB per file
 export const ALLOWED_EXTENSIONS = new Set([
   "jpg", "jpeg", "png", "webp", "gif", "svg",
   "mp4", "webm", "mov",
+  "mp3", "wav", "ogg", "m4a", "aac", "flac",
 ]);
 
 // ============================================
@@ -27,7 +28,7 @@ export interface AssetBrowserProps {
   open: boolean;
   onSelect: (path: string) => void;
   onClose: () => void;
-  filterType?: "image" | "video" | "all";
+  filterType?: "image" | "video" | "audio" | "all";
   /** Enable multi-select mode: user can pick multiple assets at once */
   multiSelect?: boolean;
   /** Called with all selected paths when multiSelect is true */