@morphika/andami 0.5.0 → 0.5.2

package/components/builder/BubbleIcons.tsx

@@ -0,0 +1,90 @@
+"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>
+  );
+}

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

@@ -173,9 +173,9 @@ export default function CanvasMinimap({
             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)"}`,
+            border: `1px solid ${f.active ? "rgba(53, 128, 249, 0.6)" : "rgba(255, 255, 255, 0.15)"}`,
             borderRadius: 2,
-            backgroundColor: f.active ? "rgba(7, 107, 255, 0.08)" : "rgba(255, 255, 255, 0.03)",
+            backgroundColor: f.active ? "rgba(53, 128, 249, 0.08)" : "rgba(255, 255, 255, 0.03)",
           }}
         />
       ))}