@morphika/andami 0.5.2 → 0.5.3

package/components/builder/editors/SpacerBlockEditor.tsx

@@ -14,6 +14,7 @@ import {
   useActiveViewport,
   INPUT_CLASS,
 } from "./shared";
+import { BubbleTooltip } from "../BubbleIcons";
 
 interface Props {
   block: SpacerBlock;
@@ -79,29 +80,30 @@ export default function SpacerBlockEditor({ block }: Props) {
           onReset={() => resetOverride("height")}
         >
           <div className="flex gap-1">
-            {HEIGHT_PRESETS.map((preset) => (
-              <button
-                key={preset.value}
-                onClick={() => updateResponsive("height", preset.value)}
-                className={`flex-1 rounded border py-1.5 text-xs transition-colors flex flex-col items-center gap-0.5 ${
-                  effectiveHeight === preset.value
-                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
-                    : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
-                }`}
-                title={
-                  preset.value === "custom"
-                    ? "Custom height"
-                    : `${preset.px}px`
-                }
-              >
-                <span>{preset.label}</span>
-                {preset.value !== "custom" && (
-                  <span className="text-[8px] text-neutral-600">
-                    {preset.px}px
-                  </span>
-                )}
-              </button>
-            ))}
+            {HEIGHT_PRESETS.map((preset) => {
+              const tooltip =
+                preset.value === "custom" ? "Custom height" : `${preset.px}px`;
+              return (
+                <button
+                  key={preset.value}
+                  onClick={() => updateResponsive("height", preset.value)}
+                  className={`group/bb relative flex-1 rounded border py-1.5 text-xs transition-colors flex flex-col items-center gap-0.5 ${
+                    effectiveHeight === preset.value
+                      ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
+                      : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
+                  }`}
+                  aria-label={tooltip}
+                >
+                  <span>{preset.label}</span>
+                  {preset.value !== "custom" && (
+                    <span className="text-[8px] text-neutral-600">
+                      {preset.px}px
+                    </span>
+                  )}
+                  <BubbleTooltip>{tooltip}</BubbleTooltip>
+                </button>
+              );
+            })}
           </div>
         </ResponsiveField>
 

package/components/builder/editors/TextBlockEditor.tsx

@@ -30,6 +30,7 @@ import {
   AlignRightIcon,
   AlignJustifyIcon,
 } from "./TextAlignmentIcons";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // Responsive style field — MUST be defined outside the editor component
@@ -292,20 +293,24 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
 
         <ResponsiveStyleField label="Align" subProp="alignment" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("alignment")} onReset={resetStyleOverride}>
           <div className="flex gap-0.5 bg-[#f5f5f5] rounded-lg p-0.5">
-            {alignments.map(({ value, icon }) => (
-              <button
-                key={value}
-                onClick={() => updateStyleResponsive("alignment", value)}
-                className={`flex-1 flex items-center justify-center py-[5px] rounded-md transition-all ${
-                  currentAlignment === value
-                    ? "bg-white text-neutral-900 shadow-[0_1px_3px_rgba(0,0,0,0.08)]"
-                    : "text-neutral-300 hover:text-neutral-500"
-                }`}
-                title={value.charAt(0).toUpperCase() + value.slice(1)}
-              >
-                {icon}
-              </button>
-            ))}
+            {alignments.map(({ value, icon }) => {
+              const label = value.charAt(0).toUpperCase() + value.slice(1);
+              return (
+                <button
+                  key={value}
+                  onClick={() => updateStyleResponsive("alignment", value)}
+                  className={`group/bb relative flex-1 flex items-center justify-center py-[5px] rounded-md transition-all ${
+                    currentAlignment === value
+                      ? "bg-white text-neutral-900 shadow-[0_1px_3px_rgba(0,0,0,0.08)]"
+                      : "text-neutral-300 hover:text-neutral-500"
+                  }`}
+                  aria-label={label}
+                >
+                  {icon}
+                  <BubbleTooltip>{label}</BubbleTooltip>
+                </button>
+              );
+            })}
           </div>
         </ResponsiveStyleField>
 

package/components/builder/editors/shared.tsx

@@ -6,6 +6,7 @@ import { hasOverride } from "../../../lib/builder/responsive";
 import type { DeviceViewport } from "../../../lib/builder/types";
 import type { ContentBlock } from "../../../lib/sanity/types";
 import AssetBrowser from "../AssetBrowser";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // Shared CSS classes — Framer-style design system
@@ -338,10 +339,11 @@ export function AssetPathInput({
         <button
           type="button"
           onClick={() => setBrowserOpen(true)}
-          className="shrink-0 rounded-lg bg-[#f5f5f5] px-2.5 py-[7px] text-[11px] text-neutral-500 hover:text-neutral-900 hover:bg-[#efefef] transition-colors"
-          title="Browse assets"
+          className="group/bb relative shrink-0 rounded-lg bg-[#f5f5f5] px-2.5 py-[7px] text-[11px] text-neutral-500 hover:text-neutral-900 hover:bg-[#efefef] transition-colors"
+          aria-label="Browse assets"
         >
           Browse
+          <BubbleTooltip>Browse assets</BubbleTooltip>
         </button>
       </div>
       <AssetBrowser

package/components/builder/live-preview/LiveImagePreview.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
 import { ThumbBadge } from "./shared";
 import type { ImageBlock } from "../../../lib/sanity/types";
+import { BubbleTooltip } from "../BubbleIcons";
 
 export default function LiveImagePreview({ block }: { block: ImageBlock }) {
   const [imgError, setImgError] = useState(false);
@@ -81,8 +82,9 @@ export default function LiveImagePreview({ block }: { block: ImageBlock }) {
         >
           <span className="text-red-400 text-lg">{"\u26A0"}</span>
           <span className="text-red-400 text-xs">Image failed to load</span>
-          <span className="text-red-300 text-[10px] max-w-[200px] truncate" title={block.asset_path}>
+          <span className="group/bb relative text-red-300 text-[10px] max-w-[200px] truncate" aria-label={block.asset_path}>
             {block.asset_path}
+            <BubbleTooltip>{block.asset_path}</BubbleTooltip>
           </span>
         </div>
       ) : (

package/components/builder/live-preview/ProjectCardWrapper.tsx

@@ -13,6 +13,7 @@ import { ProjectGridCard } from "./shared";
 import { useBuilderStore } from "../../../lib/builder/store";
 import { ADMIN_BLUE, DROP_BLUE, CrossArrowIcon } from "./drag-utils";
 import type { ProjectGridItem } from "../../../lib/sanity/types";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ─── Props ───────────────────────────────────────────────────────────
 
@@ -221,6 +222,7 @@ export default function ProjectCardWrapper({
         <div
           onPointerDown={handleHandleDown}
           onClick={(e) => e.stopPropagation()}
+          className="group/bb relative"
           style={{
             width: 48,
             height: 48,
@@ -233,10 +235,10 @@ export default function ProjectCardWrapper({
             cursor: "grab",
             transform: `scale(${invZoom})`,
           }}
-          title="Drag to reorder"
           aria-label="Drag to reorder project"
         >
           <CrossArrowIcon size={22} color="#333" />
+          <BubbleTooltip>Drag to reorder</BubbleTooltip>
         </div>
       </div>
 

package/components/builder/live-preview/RichTextBubbleMenu.tsx

@@ -12,6 +12,7 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import { BubbleMenu, type Editor } from "@tiptap/react";
 import { UnifiedColorPicker } from "../color-picker";
 import { usePaletteSwatches } from "../ColorSwatchPicker";
+import { BubbleTooltipAbove } from "../BubbleIcons";
 import type { ColorField } from "../../../lib/sanity/types";
 
 // ── Icon components (inline SVGs to avoid external deps) ────────────
@@ -83,9 +84,9 @@ function ToolbarButton({
       onMouseDown={(e) => e.preventDefault()}
       onClick={onClick}
       onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick(); }}
-      title={title}
+      aria-label={title}
       className={`
-        flex items-center justify-center w-7 h-7 rounded cursor-pointer select-none
+        group/bb relative flex items-center justify-center w-7 h-7 rounded cursor-pointer select-none
         transition-colors duration-100
         ${isActive
           ? "bg-white/20 text-white"
@@ -94,6 +95,7 @@ function ToolbarButton({
       `}
     >
       {children}
+      <BubbleTooltipAbove>{title}</BubbleTooltipAbove>
     </div>
   );
 }
@@ -190,11 +192,12 @@ function LinkPopover({
             tabIndex={0}
             onClick={handleRemove}
             onKeyDown={(e) => { if (e.key === "Enter") handleRemove(); }}
-            title="Remove link"
-            className="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-400/10
+            aria-label="Remove link"
+            className="group/bb relative p-1.5 text-red-400 hover:text-red-300 hover:bg-red-400/10
                        rounded transition-colors cursor-pointer select-none"
           >
             <UnlinkIcon />
+            <BubbleTooltipAbove>Remove link</BubbleTooltipAbove>
           </div>
         )}
       </div>
@@ -401,12 +404,13 @@ export default function RichTextBubbleMenu({ editor }: { editor: Editor }) {
             onMouseDown={(e) => e.preventDefault()}
             onClick={handleRemoveColor}
             onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleRemoveColor(); }}
-            title="Remove color"
-            className="flex items-center justify-center w-5 h-5 rounded cursor-pointer select-none
+            aria-label="Remove color"
+            className="group/bb relative flex items-center justify-center w-5 h-5 rounded cursor-pointer select-none
                        text-neutral-400 hover:text-red-400 hover:bg-red-400/10
                        transition-colors duration-100 text-[10px]"
           >
             ✕
+            <BubbleTooltipAbove>Remove color</BubbleTooltipAbove>
           </div>
         )}
 

package/components/builder/live-preview/shared.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import { useThumbStatus } from "../../../lib/contexts/ThumbStatusContext";
 import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // Thumbnail status badge (builder-only)
@@ -14,10 +15,11 @@ export function ThumbBadge({ assetPath }: { assetPath: string }) {
   const status = hasThumb(assetPath);
   // undefined = not raster or unknown — don't show badge
   if (status === undefined) return null;
+  const label = status ? "Thumbnail available" : "No thumbnail — full resolution";
   return (
     <span
-      title={status ? "Thumbnail available" : "No thumbnail — full resolution"}
-      className="absolute bottom-1.5 right-1.5 z-10 flex items-center justify-center"
+      aria-label={label}
+      className="group/bb absolute bottom-1.5 right-1.5 z-10 flex items-center justify-center"
       style={{
         width: 16,
         height: 16,
@@ -38,6 +40,7 @@ export function ThumbBadge({ assetPath }: { assetPath: string }) {
           <rect x="4.25" y="5" width="1.5" height="3" rx="0.5" fill="white" />
         </svg>
       )}
+      <BubbleTooltip>{label}</BubbleTooltip>
     </span>
   );
 }

package/components/builder/settings-panel/BlockLayoutTab.tsx

@@ -24,6 +24,7 @@ import {
 import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
 import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
 import { TRBLInputs } from "./TRBLInputs";
+import { BubbleTooltip } from "../BubbleIcons";
 import {
   getBlockLayoutValue,
   hasBlockLayoutOverride,
@@ -129,15 +130,16 @@ function AlignmentButtons<T extends string>({
         return (
           <button
             key={opt.value}
-            title={opt.label}
+            aria-label={opt.label}
             onClick={() => onChange(opt.value)}
-            className={`flex items-center justify-center w-[34px] h-[30px] rounded-md border transition-all ${
+            className={`group/bb relative flex items-center justify-center w-[34px] h-[30px] rounded-md border transition-all ${
               isActive
                 ? "bg-[#3580f9]/10 border-[#3580f9]/30 text-[#3580f9]"
                 : "bg-[#f5f5f5] border-transparent text-neutral-400 hover:bg-[#efefef] hover:text-neutral-600"
             }`}
           >
             {renderIcon(opt.value)}
+            <BubbleTooltip>{opt.label}</BubbleTooltip>
           </button>
         );
       })}

package/components/builder/settings-panel/ColumnV2LayoutTab.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+/**
+ * ColumnV2LayoutTab — Layout tab for a selected V2/cover/parallax-slide column.
+ *
+ * Desktop-only for now. Viewport-aware column layout would require extending
+ * ColumnOverride (currently position-only) — not yet implemented.
+ *
+ * Sections: Background (color/opacity/image), Border (color/width/style/sides/radius).
+ * Columns intentionally have no Spacing or Offset — use the parent section's
+ * row_gap/col_gap, or block-level padding.
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionColumn } from "../../../lib/sanity/types";
+import {
+  SettingsField,
+  SettingsSection,
+  SELECT_CLASS,
+  AssetPathInput,
+} from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import { serializeColorField, parseColorField, isGradient } from "../../../lib/color-utils";
+import { BackgroundIcon, BorderIcon } from "../editors/section-icons";
+
+type LayoutField =
+  | "background_color" | "background_opacity" | "background_image"
+  | "background_size" | "background_position" | "background_repeat"
+  | "border_color" | "border_width" | "border_style" | "border_sides" | "border_radius";
+
+export function ColumnV2LayoutTab({
+  section,
+  column,
+}: {
+  section: PageSectionV2;
+  column: SectionColumn;
+}) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+  const activeViewport = store.activeViewport;
+
+  const isResponsive = activeViewport !== "desktop";
+
+  const update = (field: LayoutField, value: unknown) => {
+    store._pushSnapshot();
+    store.updateColumnV2Layout(section._key, column._key, {
+      [field]: value,
+    } as Partial<SectionColumn>);
+  };
+
+  const getValue = <T,>(field: LayoutField, fallback: T): T => {
+    const val = (column as unknown as Record<string, unknown>)[field];
+    return (val !== undefined && val !== null ? val : fallback) as T;
+  };
+
+  const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
+    store.setColorPickerPreview({ sectionKey: section._key, field: "column_background_color", value: val });
+  };
+
+  const bgIsGradient = isGradient(parseColorField(getValue<string>("background_color", "")));
+
+  return (
+    <>
+      {isResponsive && (
+        <div className="px-4 pt-3">
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-neutral-100 border border-neutral-200">
+            <span className="text-[11px] font-medium text-neutral-500">
+              Column layout is desktop-only for now
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getValue<string>("background_color", ""))}
+            onChange={(val) => {
+              store.clearColorPickerPreview();
+              update("background_color", serializeColorField(val));
+            }}
+            swatches={paletteSwatches}
+            allowGradients
+            onPreview={handleBgPreview}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={getValue<number>("background_opacity", 100)}
+              onChange={(e) => update("background_opacity", parseInt(e.target.value))}
+              className={`flex-1 accent-[#3580f9] ${bgIsGradient ? "opacity-40 pointer-events-none" : ""}`}
+              disabled={bgIsGradient}
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getValue<number>("background_opacity", 100)}%
+            </span>
+          </div>
+          {bgIsGradient && (
+            <p className="text-[9px] text-neutral-400 italic mt-1">
+              Opacity is controlled per stop in gradient mode
+            </p>
+          )}
+        </SettingsField>
+
+        <SettingsField label="Image">
+          <AssetPathInput
+            value={getValue<string>("background_image", "")}
+            onFocus={() => store._pushSnapshot()}
+            onChange={(v) => update("background_image", v)}
+            placeholder="path/to/image.jpg"
+            filterType="image"
+          />
+        </SettingsField>
+
+        {getValue<string>("background_image", "") && (
+          <>
+            <SettingsField label="Size">
+              <select
+                value={getValue<string>("background_size", "cover")}
+                onChange={(e) => update("background_size", e.target.value)}
+                className={SELECT_CLASS}
+              >
+                <option value="cover">Cover</option>
+                <option value="contain">Contain</option>
+                <option value="auto">Auto</option>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Position">
+              <select
+                value={getValue<string>("background_position", "center center")}
+                onChange={(e) => update("background_position", e.target.value)}
+                className={SELECT_CLASS}
+              >
+                <option value="center center">Center</option>
+                <option value="top center">Top</option>
+                <option value="bottom center">Bottom</option>
+                <option value="left center">Left</option>
+                <option value="right center">Right</option>
+              </select>
+            </SettingsField>
+
+            <SettingsField label="Repeat">
+              <select
+                value={getValue<string>("background_repeat", "no-repeat")}
+                onChange={(e) => update("background_repeat", e.target.value)}
+                className={SELECT_CLASS}
+              >
+                <option value="no-repeat">No Repeat</option>
+                <option value="repeat">Repeat</option>
+                <option value="repeat-x">Repeat X</option>
+                <option value="repeat-y">Repeat Y</option>
+              </select>
+            </SettingsField>
+          </>
+        )}
+      </SettingsSection>
+
+      {/* Border */}
+      <SettingsSection title="Border" icon={<BorderIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={parseColorField(getValue<string>("border_color", ""))}
+            onChange={(val) => {
+              store.clearColorPickerPreview();
+              update("border_color", serializeColorField(val));
+            }}
+            swatches={paletteSwatches}
+            allowGradients
+          />
+        </SettingsField>
+
+        <SettingsField label="Width">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={20}
+              value={parseInt(getValue<string>("border_width", "0"))}
+              onChange={(e) => update("border_width", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getValue<string>("border_width", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Style">
+          <select
+            value={getValue<string>("border_style", "none")}
+            onChange={(e) => update("border_style", e.target.value)}
+            className={SELECT_CLASS}
+          >
+            <option value="none">None</option>
+            <option value="solid">Solid</option>
+            <option value="dashed">Dashed</option>
+            <option value="dotted">Dotted</option>
+          </select>
+        </SettingsField>
+
+        <SettingsField label="Sides">
+          <select
+            value={getValue<string>("border_sides", "all")}
+            onChange={(e) => update("border_sides", e.target.value)}
+            className={SELECT_CLASS}
+          >
+            <option value="all">All</option>
+            <option value="top">Top</option>
+            <option value="right">Right</option>
+            <option value="bottom">Bottom</option>
+            <option value="left">Left</option>
+            <option value="top-bottom">Top & Bottom</option>
+            <option value="left-right">Left & Right</option>
+          </select>
+        </SettingsField>
+
+        <SettingsField label="Radius">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={50}
+              value={parseInt(getValue<string>("border_radius", "0"))}
+              onChange={(e) => update("border_radius", e.target.value)}
+              className="flex-1 accent-[#3580f9]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right">
+              {getValue<string>("border_radius", "0")}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+    </>
+  );
+}

package/components/builder/settings-panel/CoverSectionSettings.tsx

@@ -34,6 +34,7 @@ import {
 import { AssetPathInput } from "../editors/shared";
 import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
 import StaggerSettings from "../editors/StaggerSettings";
+import { BubbleTooltip } from "../BubbleIcons";
 
 const BG_POSITION_OPTIONS = [
   { value: "center center", label: "Center" },
@@ -264,10 +265,11 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
               {section.cover_rows.length > 1 && (
                 <button
                   onClick={() => store.removeCoverRow(section._key, row._key)}
-                  className="text-neutral-300 hover:text-red-500 transition-colors text-xs shrink-0"
-                  title="Remove row"
+                  className="group/bb relative text-neutral-300 hover:text-red-500 transition-colors text-xs shrink-0"
+                  aria-label="Remove row"
                 >
                   ✕
+                  <BubbleTooltip>Remove row</BubbleTooltip>
                 </button>
               )}
             </div>

package/components/builder/settings-panel/SectionV2Settings.tsx

@@ -28,6 +28,7 @@ import {
   buildStackOverride,
   buildColumnV2Overrides,
 } from "./responsive-helpers";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // Preset definitions for the picker grid
@@ -99,14 +100,14 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
           <button
             key={preset.id}
             onClick={() => !isCustom && applyPresetV2(section._key, preset.id)}
-            className={`flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${
+            className={`group/bb relative flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${
               isActive
                 ? "border-[#3580f9] bg-[#3580f9]/5"
                 : isCustom
                 ? "border-neutral-200 bg-neutral-50 opacity-60 cursor-default"
                 : "border-neutral-200 bg-white hover:border-neutral-300 hover:bg-neutral-50"
             }`}
-            title={isCustom ? "Layout doesn't match any preset" : preset.label}
+            aria-label={isCustom ? "Layout doesn't match any preset" : preset.label}
           >
             {/* Visual representation */}
             <div className="flex gap-0.5 w-full h-4">
@@ -133,6 +134,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
             }`}>
               {preset.label}
             </span>
+            <BubbleTooltip>{isCustom ? "Layout doesn't match any preset" : preset.label}</BubbleTooltip>
           </button>
         );
       })}
@@ -140,8 +142,8 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
       {/* + Add Column button */}
       <button
         onClick={handleAddColumn}
-        className="flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#3580f9] hover:bg-[#3580f9]/5 group"
-        title="Add a column (fills first gap, or adds new row below)"
+        className="group/bb relative flex flex-col items-center gap-1 p-2 rounded-lg border border-dashed border-neutral-300 transition-all hover:border-[#3580f9] hover:bg-[#3580f9]/5 group"
+        aria-label="Add a column (fills first gap, or adds new row below)"
       >
         <div className="flex items-center justify-center w-full h-4">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-neutral-400 group-hover:text-[#3580f9] transition-colors">
@@ -151,6 +153,7 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
         <span className="text-[9px] font-medium text-neutral-400 group-hover:text-[#3580f9] transition-colors">
           Add Col
         </span>
+        <BubbleTooltip>Add a column (fills first gap, or adds new row below)</BubbleTooltip>
       </button>
     </div>
   );
@@ -218,22 +221,24 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
           <div className="flex gap-2">
             <button
               onClick={handleStack}
-              className="flex-1 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/20 py-2 text-xs font-medium text-[#3580f9] hover:bg-[#3580f9]/15 transition-colors"
-              title="Stack all columns vertically (full width, one per row)"
+              className="group/bb relative flex-1 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/20 py-2 text-xs font-medium text-[#3580f9] hover:bg-[#3580f9]/15 transition-colors"
+              aria-label="Stack all columns vertically (full width, one per row)"
             >
               Stack Columns
+              <BubbleTooltip>Stack all columns vertically (full width, one per row)</BubbleTooltip>
             </button>
             <button
               onClick={handleReset}
               disabled={!hasAnyOverrides}
-              className={`flex-1 rounded-lg border py-2 text-xs font-medium transition-colors ${
+              className={`group/bb relative flex-1 rounded-lg border py-2 text-xs font-medium transition-colors ${
                 hasAnyOverrides
                   ? "bg-neutral-100 border-neutral-200 text-neutral-600 hover:bg-neutral-200"
                   : "bg-neutral-50 border-neutral-100 text-neutral-300 cursor-not-allowed"
               }`}
-              title="Reset all responsive overrides for this viewport"
+              aria-label="Reset all responsive overrides for this viewport"
             >
               Reset Overrides
+              <BubbleTooltip>Reset all responsive overrides for this viewport</BubbleTooltip>
             </button>
           </div>
           {hasAnyOverrides && (

package/components/builder/settings-panel/index.ts

@@ -21,5 +21,6 @@ export { useSettingsPanelSelection } from "./useSettingsPanelSelection";
 export type { SelectedBlockInfo, SelectedParallaxSlideInfo } from "./useSettingsPanelSelection";
 export { AnimationTab, getBlockHoverEffect } from "./AnimationTab";
 export { ColumnV2AnimationTab } from "./ColumnV2AnimationTab";
+export { ColumnV2LayoutTab } from "./ColumnV2LayoutTab";
 export { CardEntranceSection, ENTRANCE_PRESETS, CARD_ENTRANCE_SELECT_CLASS, CARD_ENTRANCE_SLIDER_CLASS } from "./CardEntranceSection";
 export { CustomSectionSettings } from "./CustomSectionSettings";