@morphika/andami 0.5.1 → 0.5.2

package/components/builder/editors/ProjectGridEditor.tsx

@@ -72,7 +72,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 +112,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 +154,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 +206,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,7 +511,7 @@ 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)}
                 >
@@ -576,10 +576,10 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
 
                 {/* 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 +614,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

@@ -85,7 +85,7 @@ export default function SpacerBlockEditor({ block }: Props) {
                 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-[#3580f9] bg-[#3580f9]/20 text-neutral-900"
                     : "border-neutral-200 bg-white text-neutral-500 hover:border-neutral-600"
                 }`}
                 title={
@@ -122,7 +122,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 +146,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

@@ -62,7 +62,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">
@@ -310,7 +310,7 @@ export default function TextBlockEditor({ block }: { block: TextBlock }) {
         </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 +450,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

@@ -13,11 +13,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 +47,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 +88,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 +291,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