@morphika/andami 0.5.1 → 0.5.3

package/components/builder/editors/ProjectGridEditor.tsx

@@ -24,6 +24,7 @@ import {
   ViewportBadge,
   StyledCheckbox,
 } from "./shared";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // Constants
@@ -72,7 +73,7 @@ function SegmentedControl<T extends string>({
             onClick={() => onChange(opt.value)}
             className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${
               active
-                ? "bg-[#076bff] text-white"
+                ? "bg-[#3580f9] text-white"
                 : "bg-neutral-100 text-neutral-600 hover:bg-neutral-200"
             }`}
           >
@@ -112,7 +113,7 @@ function RangeSlider({
         step={step}
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}
-        className="flex-1 h-1 accent-[#076bff] cursor-pointer"
+        className="flex-1 h-1 accent-[#3580f9] cursor-pointer"
       />
       <span className="text-[11px] text-neutral-500 w-8 text-right tabular-nums shrink-0">
         {value}{suffix}
@@ -154,7 +155,7 @@ function RatioChips({
             onClick={() => toggle(opt.value)}
             className={`flex-1 flex flex-col items-center gap-1 px-1.5 py-2 rounded-lg text-[10px] transition-colors ${
               active
-                ? "bg-[#076bff] text-white"
+                ? "bg-[#3580f9] text-white"
                 : "bg-neutral-100 text-neutral-500 hover:bg-neutral-200"
             }`}
           >
@@ -206,7 +207,7 @@ function CardRatioChips({
             onClick={() => onChange(opt.value as "16/9" | "1/1" | "9/16" | null)}
             className={`flex flex-col items-center gap-1 px-1.5 py-2 rounded-lg text-[10px] transition-colors ${
               active
-                ? "bg-[#076bff] text-white"
+                ? "bg-[#3580f9] text-white"
                 : "bg-neutral-100 text-neutral-500 hover:bg-neutral-200"
             }`}
           >
@@ -511,12 +512,12 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                 <React.Fragment key={item._key}>
                 <div
                   className={`flex items-center gap-2 px-2 py-1.5 group cursor-pointer transition-colors ${
-                    isCardSelected ? "bg-[#076bff]/10 ring-1 ring-[#076bff]/30 rounded-t-lg" : "bg-[#f5f5f5] hover:bg-[#efefef] rounded-lg"
+                    isCardSelected ? "bg-[#3580f9]/10 ring-1 ring-[#3580f9]/30 rounded-t-lg" : "bg-[#f5f5f5] hover:bg-[#efefef] rounded-lg"
                   }`}
                   onClick={() => selectProjectCard(isCardSelected ? null : item._key)}
                 >
                   {/* Drag grip */}
-                  <span className="text-neutral-300 shrink-0 cursor-grab" title="Reorder">
+                  <span className="group/bb relative text-neutral-300 shrink-0 cursor-grab" aria-label="Reorder">
                     <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
                       <circle cx="3" cy="2" r="1" />
                       <circle cx="7" cy="2" r="1" />
@@ -525,6 +526,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                       <circle cx="3" cy="8" r="1" />
                       <circle cx="7" cy="8" r="1" />
                     </svg>
+                    <BubbleTooltip>Reorder</BubbleTooltip>
                   </span>
 
                   {/* Project name */}
@@ -543,43 +545,46 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                   <button
                     onClick={(e) => { e.stopPropagation(); moveProject(i, -1); }}
                     disabled={i === 0}
-                    className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
-                    title="Move up"
+                    className="group/bb relative p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
+                    aria-label="Move up"
                   >
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <polyline points="18 15 12 9 6 15" />
                     </svg>
+                    <BubbleTooltip>Move up</BubbleTooltip>
                   </button>
                   <button
                     onClick={(e) => { e.stopPropagation(); moveProject(i, 1); }}
                     disabled={i === (block.projects || []).length - 1}
-                    className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
-                    title="Move down"
+                    className="group/bb relative p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
+                    aria-label="Move down"
                   >
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <polyline points="6 9 12 15 18 9" />
                     </svg>
+                    <BubbleTooltip>Move down</BubbleTooltip>
                   </button>
 
                   {/* Remove */}
                   <button
                     onClick={(e) => { e.stopPropagation(); removeProject(item._key); }}
-                    className="p-0.5 text-neutral-400 hover:text-red-500 transition-colors"
-                    title="Remove"
+                    className="group/bb relative p-0.5 text-neutral-400 hover:text-red-500 transition-colors"
+                    aria-label="Remove"
                   >
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <line x1="18" y1="6" x2="6" y2="18" />
                       <line x1="6" y1="6" x2="18" y2="18" />
                     </svg>
+                    <BubbleTooltip>Remove</BubbleTooltip>
                   </button>
                 </div>
 
                 {/* Per-card settings — expanded below this project row */}
                 {isCardSelected && (
-                  <div className="px-2 pb-2 pt-1 -mt-1 rounded-b-lg bg-[#076bff]/5 border-x border-b border-[#076bff]/15">
+                  <div className="px-2 pb-2 pt-1 -mt-1 rounded-b-lg bg-[#3580f9]/5 border-x border-b border-[#3580f9]/15">
                     {isResponsive && (
-                      <div className="flex items-center gap-1.5 px-2 py-1 mb-1 rounded bg-[#076bff]/8">
-                        <span className="text-[10px] font-medium text-[#076bff]">
+                      <div className="flex items-center gap-1.5 px-2 py-1 mb-1 rounded bg-[#3580f9]/8">
+                        <span className="text-[10px] font-medium text-[#3580f9]">
                           {activeViewport === "tablet" ? "Tablet" : "Phone"} override
                         </span>
                       </div>
@@ -614,7 +619,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                 placeholder="Search projects..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                className="w-full rounded-md bg-[#f5f5f5] px-2.5 py-1.5 text-xs text-neutral-900 placeholder:text-neutral-400 outline-none focus:bg-white focus:ring-1 focus:ring-[#076bff]/20"
+                className="w-full rounded-md bg-[#f5f5f5] px-2.5 py-1.5 text-xs text-neutral-900 placeholder:text-neutral-400 outline-none focus:bg-white focus:ring-1 focus:ring-[#3580f9]/20"
                 autoFocus
               />
             </div>

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-[#076bff] bg-[#076bff]/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>
 
@@ -122,7 +124,7 @@ export default function SpacerBlockEditor({ block }: Props) {
                 onChange={(e) =>
                   updateResponsive("custom_height", parseInt(e.target.value))
                 }
-                className="flex-1 accent-[#076bff]"
+                className="flex-1 accent-[#3580f9]"
               />
               <input
                 type="number"
@@ -146,9 +148,9 @@ export default function SpacerBlockEditor({ block }: Props) {
               style={{ height: `${Math.min(currentPx, 200)}px` }}
             >
               <div className="absolute left-0 right-0 top-1/2 border-t border-dashed border-neutral-200" />
-              <div className="absolute left-2 top-0 w-px h-2 bg-[#076bff]" />
-              <div className="absolute left-2 bottom-0 w-px h-2 bg-[#076bff]" />
-              <div className="absolute left-2 top-0 bottom-0 w-px bg-[#076bff]/20" />
+              <div className="absolute left-2 top-0 w-px h-2 bg-[#3580f9]" />
+              <div className="absolute left-2 bottom-0 w-px h-2 bg-[#3580f9]" />
+              <div className="absolute left-2 top-0 bottom-0 w-px bg-[#3580f9]/20" />
               <div className="absolute inset-0 flex items-center justify-center">
                 <span className="text-xs text-neutral-500 bg-white/80 px-1.5 py-0.5 rounded">
                   {currentPx}px

package/components/builder/editors/StaggerSettings.tsx

@@ -1,109 +1,109 @@
-import { StaggerIcon } from "./section-icons";
-import { SettingsSection, SettingsField } from "./shared";
-
-// ============================================
-// Types
-// ============================================
-
-export interface StaggerConfig {
-  enabled?: boolean;
-  delayPerChild?: number;
-  direction?: "left-to-right" | "right-to-left";
-}
-
-// ============================================
-// CSS constants
-// ============================================
-
-const SLIDER_CLASS =
-  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
-
-const TOGGLE_CLASS_ON =
-  "relative w-8 h-[18px] rounded-full bg-[#076bff] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[15px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
-
-const TOGGLE_CLASS_OFF =
-  "relative w-8 h-[18px] rounded-full bg-[#d4d4d4] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
-
-// ============================================
-// Stagger Section (row mode only)
-// ============================================
-
-export default function StaggerSettings({
-  stagger,
-  onChange,
-}: {
-  stagger?: StaggerConfig;
-  onChange: (s: StaggerConfig) => void;
-}) {
-  const enabled = stagger?.enabled ?? false;
-  const delay = stagger?.delayPerChild ?? 100;
-  const direction = stagger?.direction ?? "left-to-right";
-
-  return (
-    <SettingsSection title="Stagger Children" icon={<StaggerIcon />}>
-      <div className="space-y-3">
-        {/* Enable toggle */}
-        <div className="flex items-center justify-between">
-          <span className="text-[11px] text-neutral-500">
-            {enabled ? "Enabled" : "Disabled"}
-          </span>
-          <button
-            type="button"
-            onClick={() => onChange({ ...stagger, enabled: !enabled })}
-            className={enabled ? TOGGLE_CLASS_ON : TOGGLE_CLASS_OFF}
-            aria-label={enabled ? "Stagger enabled" : "Stagger disabled"}
-          />
-        </div>
-
-        {enabled && (
-          <>
-            {/* Delay slider */}
-            <SettingsField label={`Delay — ${delay}ms`}>
-              <input
-                type="range"
-                min={50}
-                max={5000}
-                step={10}
-                value={delay}
-                onChange={(e) =>
-                  onChange({ ...stagger, enabled: true, delayPerChild: Number(e.target.value) })
-                }
-                className={SLIDER_CLASS}
-              />
-              <div className="flex justify-between mt-0.5">
-                <span className="text-[10px] text-neutral-400">50ms</span>
-                <span className="text-[10px] text-neutral-400">5000ms</span>
-              </div>
-            </SettingsField>
-
-            {/* Direction */}
-            <SettingsField label="Direction">
-              <div className="flex gap-1">
-                <button
-                  onClick={() => onChange({ ...stagger, enabled: true, direction: "left-to-right" })}
-                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
-                    direction === "left-to-right"
-                      ? "bg-[#076bff] text-white"
-                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
-                  }`}
-                >
-                  L → R
-                </button>
-                <button
-                  onClick={() => onChange({ ...stagger, enabled: true, direction: "right-to-left" })}
-                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
-                    direction === "right-to-left"
-                      ? "bg-[#076bff] text-white"
-                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
-                  }`}
-                >
-                  R → L
-                </button>
-              </div>
-            </SettingsField>
-          </>
-        )}
-      </div>
-    </SettingsSection>
-  );
-}
+import { StaggerIcon } from "./section-icons";
+import { SettingsSection, SettingsField } from "./shared";
+
+// ============================================
+// Types
+// ============================================
+
+export interface StaggerConfig {
+  enabled?: boolean;
+  delayPerChild?: number;
+  direction?: "left-to-right" | "right-to-left";
+}
+
+// ============================================
+// CSS constants
+// ============================================
+
+const SLIDER_CLASS =
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#3580f9] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#3580f9] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+
+const TOGGLE_CLASS_ON =
+  "relative w-8 h-[18px] rounded-full bg-[#3580f9] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[15px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
+
+const TOGGLE_CLASS_OFF =
+  "relative w-8 h-[18px] rounded-full bg-[#d4d4d4] transition-colors cursor-pointer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[14px] after:h-[14px] after:rounded-full after:bg-white after:shadow-sm after:transition-all";
+
+// ============================================
+// Stagger Section (row mode only)
+// ============================================
+
+export default function StaggerSettings({
+  stagger,
+  onChange,
+}: {
+  stagger?: StaggerConfig;
+  onChange: (s: StaggerConfig) => void;
+}) {
+  const enabled = stagger?.enabled ?? false;
+  const delay = stagger?.delayPerChild ?? 100;
+  const direction = stagger?.direction ?? "left-to-right";
+
+  return (
+    <SettingsSection title="Stagger Children" icon={<StaggerIcon />}>
+      <div className="space-y-3">
+        {/* Enable toggle */}
+        <div className="flex items-center justify-between">
+          <span className="text-[11px] text-neutral-500">
+            {enabled ? "Enabled" : "Disabled"}
+          </span>
+          <button
+            type="button"
+            onClick={() => onChange({ ...stagger, enabled: !enabled })}
+            className={enabled ? TOGGLE_CLASS_ON : TOGGLE_CLASS_OFF}
+            aria-label={enabled ? "Stagger enabled" : "Stagger disabled"}
+          />
+        </div>
+
+        {enabled && (
+          <>
+            {/* Delay slider */}
+            <SettingsField label={`Delay — ${delay}ms`}>
+              <input
+                type="range"
+                min={50}
+                max={5000}
+                step={10}
+                value={delay}
+                onChange={(e) =>
+                  onChange({ ...stagger, enabled: true, delayPerChild: Number(e.target.value) })
+                }
+                className={SLIDER_CLASS}
+              />
+              <div className="flex justify-between mt-0.5">
+                <span className="text-[10px] text-neutral-400">50ms</span>
+                <span className="text-[10px] text-neutral-400">5000ms</span>
+              </div>
+            </SettingsField>
+
+            {/* Direction */}
+            <SettingsField label="Direction">
+              <div className="flex gap-1">
+                <button
+                  onClick={() => onChange({ ...stagger, enabled: true, direction: "left-to-right" })}
+                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
+                    direction === "left-to-right"
+                      ? "bg-[#3580f9] text-white"
+                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
+                  }`}
+                >
+                  L → R
+                </button>
+                <button
+                  onClick={() => onChange({ ...stagger, enabled: true, direction: "right-to-left" })}
+                  className={`flex-1 py-1.5 rounded-md text-[10px] font-medium transition-all ${
+                    direction === "right-to-left"
+                      ? "bg-[#3580f9] text-white"
+                      : "bg-[#f5f5f5] text-neutral-500 hover:bg-[#ebebeb]"
+                  }`}
+                >
+                  R → L
+                </button>
+              </div>
+            </SettingsField>
+          </>
+        )}
+      </div>
+    </SettingsSection>
+  );
+}

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
@@ -62,7 +63,7 @@ function ResponsiveStyleField({
           <span className="block text-[9px] text-neutral-300 italic mt-0.5">inherited</span>
         )}
         {isOverridden && (
-          <span className="block text-[9px] text-[#076bff] mt-0.5">overridden</span>
+          <span className="block text-[9px] text-[#3580f9] mt-0.5">overridden</span>
         )}
       </label>
       <div className="flex-1 min-w-0">
@@ -292,25 +293,29 @@ 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>
 
         <ResponsiveStyleField label="Size" subProp="fontSize" viewport={viewport} isOverridden={viewport !== "desktop" && hasStyleOverride("fontSize")} onReset={resetStyleOverride}>
-          <div className="flex items-center gap-0 bg-[#f5f5f5] rounded-lg overflow-hidden transition-all border border-transparent focus-within:bg-white focus-within:border-[#076bff] focus-within:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]">
+          <div className="flex items-center gap-0 bg-[#f5f5f5] rounded-lg overflow-hidden transition-all border border-transparent focus-within:bg-white focus-within:border-[#3580f9] focus-within:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]">
             <input
               type="number"
               min={1}
@@ -450,7 +455,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
               onChange={(e) =>
                 updateStyleResponsive("opacity", parseInt(e.target.value) / 100)
               }
-              className="flex-1 accent-[#076bff]"
+              className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
               {Math.round((getEffectiveStyleValue<number>("opacity", style.opacity ?? 1)) * 100)}%

package/components/builder/editors/TextStylePicker.tsx

@@ -134,7 +134,7 @@ export default function TextStylePicker({
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder="Search..."
                 autoFocus
-                className="w-full rounded-md bg-[#f5f5f5] px-2 py-1.5 text-xs text-neutral-900 border-none outline-none focus:bg-white focus:ring-1 focus:ring-[#076bff]/30"
+                className="w-full rounded-md bg-[#f5f5f5] px-2 py-1.5 text-xs text-neutral-900 border-none outline-none focus:bg-white focus:ring-1 focus:ring-[#3580f9]/30"
               />
             </div>
             <div className="max-h-[220px] overflow-y-auto py-1">

package/components/builder/editors/VideoBlockEditor.tsx

@@ -111,7 +111,7 @@ export default function VideoBlockEditor({ block }: Props) {
                 onClick={() => update({ video_type: opt.value })}
                 className={`flex-1 rounded border py-1 text-xs transition-colors ${
                   (block.video_type || "vimeo") === opt.value
-                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >
@@ -200,7 +200,7 @@ export default function VideoBlockEditor({ block }: Props) {
                 onClick={() => updateResponsive("width", opt.value)}
                 className={`flex-1 rounded border py-1 text-xs transition-colors ${
                   effectiveWidth === opt.value
-                    ? "border-[#076bff] bg-[#076bff]/20 text-neutral-900"
+                    ? "border-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
               >

package/components/builder/editors/index.ts

@@ -1,10 +1,11 @@
-export { default as TextBlockEditor } from "./TextBlockEditor";
-export { default as ImageBlockEditor } from "./ImageBlockEditor";
-export { default as ImageGridBlockEditor } from "./ImageGridBlockEditor";
-export { default as VideoBlockEditor } from "./VideoBlockEditor";
-export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
-export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
-export { default as ProjectGridEditor } from "./ProjectGridEditor";
-export { default as ProjectCarouselBlockEditor } from "./ProjectCarouselBlockEditor";
-export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
-export { getSpacerPx } from "./SpacerBlockEditor";
+export { default as TextBlockEditor } from "./TextBlockEditor";
+export { default as ImageBlockEditor } from "./ImageBlockEditor";
+export { default as ImageGridBlockEditor } from "./ImageGridBlockEditor";
+export { default as VideoBlockEditor } from "./VideoBlockEditor";
+export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
+export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
+export { default as ProjectGridEditor } from "./ProjectGridEditor";
+export { default as ProjectCarouselBlockEditor } from "./ProjectCarouselBlockEditor";
+export { default as MarqueeBlockEditor } from "./MarqueeBlockEditor";
+export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
+export { getSpacerPx } from "./SpacerBlockEditor";

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
@@ -13,11 +14,11 @@ import AssetBrowser from "../AssetBrowser";
 
 /** Base input class: gray bg, no border, border on focus */
 const INPUT_CLASS =
-  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]";
 
 /** Select class — same as input */
 const SELECT_CLASS =
-  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#3580f9] focus:shadow-[0_0_0_3px_rgba(53, 128, 249,0.06)]";
 
 // ============================================
 // Hooks
@@ -47,8 +48,8 @@ export function ViewportBadge() {
   };
 
   return (
-    <div className="flex items-center gap-1.5 px-3 py-1.5 mb-2 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
-      <span className="text-[11px] font-medium text-[#076bff]">
+    <div className="flex items-center gap-1.5 px-3 py-1.5 mb-2 rounded-lg bg-[#3580f9]/8 border border-[#3580f9]/15">
+      <span className="text-[11px] font-medium text-[#3580f9]">
         Editing {labels[viewport]} overrides
       </span>
     </div>
@@ -88,7 +89,7 @@ export function ResponsiveField({
           <span className="block text-[9px] text-neutral-300 italic mt-0.5">inherited</span>
         )}
         {isOverridden && (
-          <span className="block text-[9px] text-[#076bff] mt-0.5">overridden</span>
+          <span className="block text-[9px] text-[#3580f9] mt-0.5">overridden</span>
         )}
       </label>
       <div className="flex-1 min-w-0">
@@ -291,7 +292,7 @@ export function StyledCheckbox({
           type="button"
           onClick={() => onChange(!checked)}
           className={`relative w-8 h-[18px] rounded-full transition-colors ${
-            checked ? "bg-[#076bff]" : "bg-neutral-200 group-hover:bg-neutral-300"
+            checked ? "bg-[#3580f9]" : "bg-neutral-200 group-hover:bg-neutral-300"
           }`}
         >
           <span
@@ -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