@morphika/andami 0.5.1 → 0.5.3

package/components/builder/BlockTypePicker.tsx

@@ -75,7 +75,7 @@ function BlockCard({
         aria-hidden="true"
         className="absolute inset-0 rounded-2xl pointer-events-none"
         style={{
-          boxShadow: isHovered ? "inset 0 0 0 2px #4794E2" : "inset 0 0 0 2px transparent",
+          boxShadow: isHovered ? "inset 0 0 0 2px #3580f9" : "inset 0 0 0 2px transparent",
           transition: "box-shadow 160ms ease",
         }}
       />

package/components/builder/BubbleIcons.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+/**
+ * BubbleIcons — shared icon set + tooltip wrapper for the block & column bubbles
+ * floating at the top-outside of each entity in the visual builder.
+ *
+ * Icons come from the Tabler set, re-exported as filled <path> SVGs so they
+ * scale cleanly without stroke-width inconsistencies. Viewbox is 24×24; the
+ * default display size is 12px (pill-scale).
+ *
+ * Tooltip styling mirrors the admin sidebar's group-hover tooltip
+ * (app/admin/layout.tsx) — dark pill, 150ms fade + slide-in.
+ */
+
+import type { ReactNode } from "react";
+
+// ============================================
+// Icons (filled, 24×24 viewBox)
+// ============================================
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+export function DragDropIcon({ size = 12, color = "currentColor" }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
+      <path d="M11,18H9c-0.6,0-1-0.4-1-1V9c0-0.6,0.4-1,1-1h8c0.6,0,1,0.4,1,1v2c0,0.6,0.4,1,1,1s1-0.4,1-1V9c0-1.7-1.3-3-3-3H9 C7.3,6,6,7.3,6,9v8c0,1.7,1.3,3,3,3h2c0.6,0,1-0.4,1-1S11.6,18,11,18z" />
+      <path d="M22.3,15.1l-9-3c-0.4-0.1-0.8,0-1,0.2c-0.3,0.3-0.4,0.7-0.2,1l3,9c0.1,0.4,0.5,0.7,0.9,0.7c0,0,0,0,0.1,0 c0.4,0,0.7-0.2,0.9-0.6l1.9-3.7l3.7-1.9c0.4-0.2,0.6-0.6,0.5-1C23,15.5,22.7,15.2,22.3,15.1z M17.6,17.1c-0.2,0.1-0.4,0.3-0.4,0.4 l-0.9,1.8l-1.6-4.8l4.8,1.6L17.6,17.1z" />
+      <path d="M3,2C2.4,2,2,2.5,2,3s0.4,1,1,1s1-0.4,1-1v0C4,2.4,3.6,2,3,2z" />
+      <path d="M7,4c0.6,0,1-0.4,1-1v0c0-0.6-0.4-1-1-1S6,2.5,6,3S6.4,4,7,4z" />
+      <path d="M11,4c0.6,0,1-0.4,1-1v0c0-0.6-0.4-1-1-1s-1,0.5-1,1S10.4,4,11,4z" />
+      <path d="M15,4c0.6,0,1-0.4,1-1v0c0-0.6-0.4-1-1-1s-1,0.5-1,1S14.4,4,15,4z" />
+      <path d="M3,6C2.4,6,2,6.5,2,7s0.4,1,1,1s1-0.4,1-1v0C4,6.4,3.6,6,3,6z" />
+      <path d="M3,10c-0.6,0-1,0.5-1,1s0.4,1,1,1s1-0.4,1-1v0C4,10.4,3.6,10,3,10z" />
+      <path d="M3,14c-0.6,0-1,0.5-1,1s0.4,1,1,1s1-0.4,1-1v0C4,14.4,3.6,14,3,14z" />
+    </svg>
+  );
+}
+
+export function CopyIcon({ size = 12, color = "currentColor" }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
+      <path d="M18.3,22H9.7c-2,0-3.7-1.6-3.7-3.7V9.7C6,7.6,7.6,6,9.7,6h8.7c2,0,3.7,1.6,3.7,3.7v8.7C22,20.4,20.4,22,18.3,22z M9.7,8 C8.7,8,8,8.7,8,9.7v8.7C8,19.3,8.7,20,9.7,20h8.7c0.9,0,1.7-0.7,1.7-1.7V9.7C20,8.7,19.3,8,18.3,8H9.7z" />
+      <path d="M4,17.7c-0.2,0-0.3,0-0.5-0.1C2.6,17.1,2,16.1,2,15V5c0-1.7,1.3-3,3-3h10c1.5,0,2.2,1.1,2.4,1.5C17.6,4,17.5,4.6,17,4.9 c-0.5,0.3-1.1,0.1-1.4-0.4C15.4,4,15.2,4,15,4H5C4.4,4,4,4.4,4,5v10c0,0.4,0.2,0.7,0.5,0.9c0.5,0.3,0.6,0.9,0.4,1.4 C4.7,17.6,4.4,17.7,4,17.7z" />
+    </svg>
+  );
+}
+
+export function ArrowDownIcon({ size = 12, color = "currentColor" }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
+      <path d="M16.7,14.3c-0.4-0.4-1-0.4-1.4,0L13,16.6V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v11.6l-2.3-2.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4 l4,4c0.1,0.1,0.2,0.2,0.3,0.2C11.7,20,11.9,20,12,20s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l4-4C17.1,15.3,17.1,14.7,16.7,14.3z" />
+    </svg>
+  );
+}
+
+export function ArrowUpIcon({ size = 12, color = "currentColor" }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true" style={{ transform: "rotate(180deg)" }}>
+      <path d="M16.7,14.3c-0.4-0.4-1-0.4-1.4,0L13,16.6V5c0-0.6-0.4-1-1-1s-1,0.4-1,1v11.6l-2.3-2.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4 l4,4c0.1,0.1,0.2,0.2,0.3,0.2C11.7,20,11.9,20,12,20s0.3,0,0.4-0.1c0.1-0.1,0.2-0.1,0.3-0.2l4-4C17.1,15.3,17.1,14.7,16.7,14.3z" />
+    </svg>
+  );
+}
+
+export function CloseIcon({ size = 12, color = "currentColor" }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden="true">
+      <path d="M16.2,4H7.6c-2,0-3.7,1.6-3.7,3.7v8.7c0,2,1.6,3.7,3.7,3.7h8.7c2,0,3.7-1.6,3.7-3.7V7.7C19.9,5.7,18.3,4,16.2,4z M15,13.8 c0.4,0.4,0.4,1,0,1.4l-0.1,0.1c-0.4,0.3-1,0.3-1.3-0.1l-1.8-1.8L10,15.2c-0.4,0.4-1,0.4-1.4,0l-0.1-0.1c-0.3-0.4-0.3-1,0.1-1.3 l1.8-1.8l-1.7-1.8c-0.4-0.4-0.4-1,0-1.4l0.1-0.1c0.4-0.3,1-0.3,1.3,0.1l1.7,1.8l1.8-1.8c0.4-0.4,1-0.4,1.4,0l0.1,0.1 c0.3,0.4,0.3,1-0.1,1.3L13.3,12L15,13.8z" />
+    </svg>
+  );
+}
+
+// ============================================
+// Tooltip — mirrors the admin sidebar pattern (CSS-only, group-hover).
+// Positioned below the trigger; parent needs `group relative`.
+// ============================================
+
+export function BubbleTooltip({ children }: { children: ReactNode }) {
+  return (
+    <span
+      role="tooltip"
+      className="pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 whitespace-nowrap rounded-md border border-white/10 bg-[#2a2d33] px-2.5 py-1.5 text-[11px] font-medium text-white shadow-lg opacity-0 transition-[opacity,margin] duration-150 ease-out group-hover/bb:opacity-100 group-hover/bb:mt-3"
+      style={{ transform: "translateX(-50%)" }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/** Same styling as BubbleTooltip but positioned ABOVE the trigger.
+ *  For bottom-anchored toolbars (e.g. the floating canvas toolbar). */
+export function BubbleTooltipAbove({ children }: { children: ReactNode }) {
+  return (
+    <span
+      role="tooltip"
+      className="pointer-events-none absolute left-1/2 bottom-full z-50 mb-1.5 whitespace-nowrap rounded-md border border-white/10 bg-[#2a2d33] px-2.5 py-1.5 text-[11px] font-medium text-white shadow-lg opacity-0 transition-[opacity,margin] duration-150 ease-out group-hover/bb:opacity-100 group-hover/bb:mb-3"
+      style={{ transform: "translateX(-50%)" }}
+    >
+      {children}
+    </span>
+  );
+}

package/components/builder/BuilderCanvas.tsx

@@ -69,6 +69,7 @@ export default function BuilderCanvas({ children }: BuilderCanvasProps) {
   const setActiveViewport = useBuilderStore((s) => s.setActiveViewport);
   const bgColor = useBuilderStore((s) => s.pageSettings.background_color);
   const pageSlug = useBuilderStore((s) => s.pageSlug);
+  const clearSelection = useBuilderStore((s) => s.clearSelection);
 
   // Refs for stable wheel/pan handlers — avoids re-creating callbacks on every zoom/pan change
   const zoomRef = useRef(zoom);
@@ -288,6 +289,7 @@ export default function BuilderCanvas({ children }: BuilderCanvasProps) {
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
       onMouseLeave={handleMouseUp}
+      onClick={clearSelection}
     >
       {/* Dot grid background */}
       <div

package/components/builder/CanvasMinimap.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
 import { DEVICE_WIDTHS } from "../../lib/builder/types";
+import { BubbleTooltipAbove } from "./BubbleIcons";
 
 // ============================================
 // CanvasMinimap — Shows viewport position in canvas
@@ -121,80 +122,96 @@ export default function CanvasMinimap({
     return (
       <button
         onClick={() => setIsCollapsed(false)}
-        className="absolute bottom-6 right-4 z-40 w-8 h-8 flex items-center justify-center rounded-lg bg-[#1a1a1a]/80 text-white/60 hover:text-white hover:bg-[#1a1a1a] transition-colors shadow-lg backdrop-blur-sm"
-        title="Show minimap"
+        className="group/bb absolute bottom-6 right-4 z-40 w-8 h-8 flex items-center justify-center rounded-lg bg-[#1a1a1a]/80 text-white/60 hover:text-white hover:bg-[#1a1a1a] transition-colors shadow-lg backdrop-blur-sm"
         aria-label="Show minimap"
       >
         <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
           <rect x="1" y="1" width="12" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
           <rect x="3" y="3" width="4" height="3" rx="0.5" stroke="currentColor" strokeWidth="0.8" opacity="0.6" />
         </svg>
+        <BubbleTooltipAbove>Show minimap</BubbleTooltipAbove>
       </button>
     );
   }
 
   return (
     <div
-      className="absolute bottom-6 right-4 z-40 rounded-lg overflow-hidden shadow-lg backdrop-blur-sm"
+      className="absolute bottom-6 right-4 z-40 rounded-lg overflow-hidden shadow-xl backdrop-blur-sm"
       style={{
         width: MINIMAP_WIDTH,
-        height: MINIMAP_HEIGHT,
-        backgroundColor: "rgba(26, 26, 26, 0.85)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        backgroundColor: "rgba(26, 26, 26, 0.92)",
+        border: "1px solid rgba(255, 255, 255, 0.08)",
         userSelect: "none",
       }}
-      onMouseDown={handleMinimapMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
     >
-      {/* Close/collapse button */}
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          setIsCollapsed(true);
+      {/* Header — label + close button. Matches the toolbar's dark pill aesthetic. */}
+      <div
+        className="flex items-center justify-between px-2 py-1"
+        style={{
+          borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
+          background: "rgba(255, 255, 255, 0.02)",
         }}
-        className="absolute top-1 right-1 z-50 w-4 h-4 flex items-center justify-center rounded text-white/40 hover:text-white/80 transition-colors"
-        title="Hide minimap"
-        aria-label="Hide minimap"
       >
-        <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
-          <path d="M1 1L7 7M7 1L1 7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-        </svg>
-      </button>
-
-      {/* Device frame outlines */}
-      {frames.map((f, i) => (
+        <span className="text-[9px] font-semibold tracking-[0.08em] uppercase text-white/45">
+          Overview
+        </span>
+        <button
+          onClick={() => setIsCollapsed(true)}
+          className="group/bb relative w-4 h-4 flex items-center justify-center rounded text-white/40 hover:text-white/90 hover:bg-white/10 transition-colors"
+          aria-label="Hide minimap"
+        >
+          <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+            <path d="M1 1L7 7M7 1L1 7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+          </svg>
+          <BubbleTooltipAbove>Hide minimap</BubbleTooltipAbove>
+        </button>
+      </div>
+
+      {/* Content area — all pan/drag interactions live here (not the header). */}
+      <div
+        className="relative"
+        style={{
+          width: MINIMAP_WIDTH,
+          height: MINIMAP_HEIGHT,
+        }}
+        onMouseDown={handleMinimapMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        {/* Device frame outlines */}
+        {frames.map((f, i) => (
+          <div
+            key={i}
+            className="absolute"
+            style={{
+              left: f.x,
+              top: 8 * scale,
+              width: f.w,
+              height: (contentEstimateHeight - 40) * scale,
+              border: `1px solid ${f.active ? "rgba(53, 128, 249, 0.6)" : "rgba(255, 255, 255, 0.15)"}`,
+              borderRadius: 2,
+              backgroundColor: f.active ? "rgba(53, 128, 249, 0.08)" : "rgba(255, 255, 255, 0.03)",
+            }}
+          />
+        ))}
+
+        {/* Viewport indicator */}
         <div
-          key={i}
           className="absolute"
           style={{
-            left: f.x,
-            top: 8 * scale,
-            width: f.w,
-            height: (contentEstimateHeight - 40) * scale,
-            border: `1px solid ${f.active ? "rgba(7, 107, 255, 0.6)" : "rgba(255, 255, 255, 0.15)"}`,
+            left: Math.max(0, viewX),
+            top: Math.max(0, viewY),
+            width: Math.min(viewW, MINIMAP_WIDTH),
+            height: Math.min(viewH, MINIMAP_HEIGHT),
+            border: "1.5px solid rgba(237, 56, 33, 0.7)",
             borderRadius: 2,
-            backgroundColor: f.active ? "rgba(7, 107, 255, 0.08)" : "rgba(255, 255, 255, 0.03)",
+            backgroundColor: "rgba(237, 56, 33, 0.06)",
+            cursor: isDragging ? "grabbing" : "grab",
+            pointerEvents: "none",
           }}
         />
-      ))}
-
-      {/* Viewport indicator */}
-      <div
-        className="absolute"
-        style={{
-          left: Math.max(0, viewX),
-          top: Math.max(0, viewY),
-          width: Math.min(viewW, MINIMAP_WIDTH),
-          height: Math.min(viewH, MINIMAP_HEIGHT),
-          border: "1.5px solid rgba(237, 56, 33, 0.7)",
-          borderRadius: 2,
-          backgroundColor: "rgba(237, 56, 33, 0.06)",
-          cursor: isDragging ? "grabbing" : "grab",
-          pointerEvents: "none",
-        }}
-      />
+      </div>
     </div>
   );
 }

package/components/builder/CanvasToolbar.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useState, useEffect, useCallback } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
+import { BubbleTooltipAbove } from "./BubbleIcons";
 
 // ============================================
 // CanvasToolbar — Floating mini toolbar
@@ -72,66 +73,68 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
   const zoomPercent = Math.round(zoom * 100);
 
   return (
-    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-px rounded-full bg-[#1a1a1a] shadow-xl px-1 py-1"
+    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-0.5 rounded-full bg-[#1a1a1a] shadow-xl px-1.5 py-1.5"
       style={{ userSelect: "none" }}
     >
-      {/* Select tool — Figma-style filled cursor */}
+      {/* Select tool — Figma-style filled cursor.
+          Active state uses the app's primary blue so selection signals
+          match the rest of the builder (block/column accents). */}
       <button
         onClick={() => setCanvasTool("select")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
+        className={`group/bb relative flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "select"
-            ? "bg-white/15 text-white"
+            ? "bg-[#3580f9] text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
         }`}
-        title="Select tool (V)"
         aria-label="Select tool"
       >
         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round">
           <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
         </svg>
+        <BubbleTooltipAbove>Select <span className="ml-1 text-white/55">V</span></BubbleTooltipAbove>
       </button>
 
-      {/* Hand tool — Figma-style */}
+      {/* Hand tool — tabler hand-stop (outline) */}
       <button
         onClick={() => setCanvasTool("hand")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
+        className={`group/bb relative flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "hand"
-            ? "bg-white/15 text-white"
+            ? "bg-[#3580f9] text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
         }`}
-        title="Hand tool (H)"
         aria-label="Hand tool"
       >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
-          <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
-          <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" />
-          <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
+          <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
+          <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
+          <path d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
         </svg>
+        <BubbleTooltipAbove>Hand <span className="ml-1 text-white/55">H</span></BubbleTooltipAbove>
       </button>
 
       {/* Divider */}
-      <div className="w-px h-5 bg-white/20 mx-1" />
+      <div className="w-px h-5 bg-white/15 mx-2" />
 
       {/* Zoom out */}
       <button
         onClick={handleZoomOut}
-        className="flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
-        title="Zoom out (Ctrl + −)"
+        className="group/bb relative flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
         aria-label="Zoom out"
       >
         −
+        <BubbleTooltipAbove>Zoom out <span className="ml-1 text-white/55">Ctrl −</span></BubbleTooltipAbove>
       </button>
 
       {/* Zoom percentage (clickable dropdown) */}
       <div className="relative" ref={presetsRef}>
         <button
           onClick={() => setShowPresets((v) => !v)}
-          className="flex items-center justify-center min-w-[48px] h-8 text-white text-[11px] font-medium hover:bg-white/10 rounded-md transition-colors px-1"
-          title="Click to select zoom level"
+          className="group/bb relative flex items-center justify-center min-w-[48px] h-8 text-white text-[11px] font-medium hover:bg-white/10 rounded-md transition-colors px-1"
           aria-label="Select zoom level"
         >
           {zoomPercent}%
+          <BubbleTooltipAbove>Zoom level</BubbleTooltipAbove>
         </button>
 
         {showPresets && (
@@ -156,40 +159,27 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
       {/* Zoom in */}
       <button
         onClick={handleZoomIn}
-        className="flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
-        title="Zoom in (Ctrl + +)"
+        className="group/bb relative flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
         aria-label="Zoom in"
       >
         +
+        <BubbleTooltipAbove>Zoom in <span className="ml-1 text-white/55">Ctrl +</span></BubbleTooltipAbove>
       </button>
 
       {/* Divider */}
-      <div className="w-px h-5 bg-white/20 mx-1" />
+      <div className="w-px h-5 bg-white/15 mx-2" />
 
-      {/* Fit */}
+      {/* Fit — tabler zoom (magnifying glass, outline) */}
       <button
         onClick={handleFit}
-        className="flex items-center justify-center w-8 h-8 rounded-full text-neutral-400 hover:text-white hover:bg-white/10 transition-colors"
-        title="Zoom to fit (Ctrl + 0)"
+        className="group/bb relative flex items-center justify-center w-8 h-8 rounded-full text-neutral-400 hover:text-white hover:bg-white/10 transition-colors"
         aria-label="Zoom to fit"
       >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-          <rect
-            x="2"
-            y="2"
-            width="10"
-            height="10"
-            rx="1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M5 2V0M9 2V0M5 14V12M9 14V12M0 5H2M0 9H2M12 5H14M12 9H14"
-            stroke="currentColor"
-            strokeWidth="1"
-            opacity="0.5"
-          />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+          <path d="M21 21l-6 -6" />
         </svg>
+        <BubbleTooltipAbove>Zoom to fit <span className="ml-1 text-white/55">Ctrl 0</span></BubbleTooltipAbove>
       </button>
     </div>
   );