@morphika/andami 0.5.4 → 0.5.5

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

@@ -18,14 +18,14 @@ export function ColumnV2AnimationTab({
   section: PageSectionV2;
   column: SectionColumn;
 }) {
-  const store = useBuilderStore();
+  const updateColumnEnterAnimation = useBuilderStore((s) => s.updateColumnEnterAnimation);
 
   return (
     <EnterAnimationPicker
       mode={{ level: "column", parentConfig: section.settings.enter_animation }}
       config={column.enter_animation}
       onChange={(cfg) => {
-        store.updateColumnEnterAnimation(section._key, column._key, cfg);
+        updateColumnEnterAnimation(section._key, column._key, cfg);
       }}
     />
   );

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

@@ -35,15 +35,18 @@ export function ColumnV2LayoutTab({
   section: PageSectionV2;
   column: SectionColumn;
 }) {
-  const store = useBuilderStore();
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+  const updateColumnV2Layout = useBuilderStore((s) => s.updateColumnV2Layout);
+  const setColorPickerPreview = useBuilderStore((s) => s.setColorPickerPreview);
+  const clearColorPickerPreview = useBuilderStore((s) => s.clearColorPickerPreview);
   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, {
+    _pushSnapshot();
+    updateColumnV2Layout(section._key, column._key, {
       [field]: value,
     } as Partial<SectionColumn>);
   };
@@ -54,7 +57,7 @@ export function ColumnV2LayoutTab({
   };
 
   const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ sectionKey: section._key, field: "column_background_color", value: val });
+    setColorPickerPreview({ sectionKey: section._key, field: "column_background_color", value: val });
   };
 
   const bgIsGradient = isGradient(parseColorField(getValue<string>("background_color", "")));
@@ -77,7 +80,7 @@ export function ColumnV2LayoutTab({
           <ColorSwatchPicker
             value={parseColorField(getValue<string>("background_color", ""))}
             onChange={(val) => {
-              store.clearColorPickerPreview();
+              clearColorPickerPreview();
               update("background_color", serializeColorField(val));
             }}
             swatches={paletteSwatches}
@@ -111,7 +114,7 @@ export function ColumnV2LayoutTab({
         <SettingsField label="Image">
           <AssetPathInput
             value={getValue<string>("background_image", "")}
-            onFocus={() => store._pushSnapshot()}
+            onFocus={() => _pushSnapshot()}
             onChange={(v) => update("background_image", v)}
             placeholder="path/to/image.jpg"
             filterType="image"
@@ -168,7 +171,7 @@ export function ColumnV2LayoutTab({
           <ColorSwatchPicker
             value={parseColorField(getValue<string>("border_color", ""))}
             onChange={(val) => {
-              store.clearColorPickerPreview();
+              clearColorPickerPreview();
               update("border_color", serializeColorField(val));
             }}
             swatches={paletteSwatches}

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

@@ -36,8 +36,9 @@ export default function ColumnV2Settings({
   section: PageSectionV2;
   column: SectionColumn;
 }) {
-  const store = useBuilderStore();
-  const activeViewport = store.activeViewport;
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const resizeColumnV2 = useBuilderStore((s) => s.resizeColumnV2);
   const isResponsive = activeViewport !== "desktop";
   const gridColumns = section.settings.grid_columns;
 
@@ -66,10 +67,10 @@ export default function ColumnV2Settings({
       const responsive = buildSingleColumnV2Override(section, activeViewport, column._key, {
         span: clamped,
       });
-      store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+      updateSectionV2Responsive(section._key, responsive ?? undefined);
     } else {
       // Desktop: use cascade engine
-      store.resizeColumnV2(section._key, column._key, clamped);
+      resizeColumnV2(section._key, column._key, clamped);
     }
   };
 
@@ -78,7 +79,7 @@ export default function ColumnV2Settings({
     const responsive = buildSingleColumnV2Override(section, activeViewport, column._key, {
       span: undefined,
     });
-    store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+    updateSectionV2Responsive(section._key, responsive ?? undefined);
   };
 
   return (

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

@@ -15,11 +15,12 @@ interface CoverSectionLayoutTabProps {
 }
 
 export default function CoverSectionLayoutTab({ section }: CoverSectionLayoutTabProps) {
-  const store = useBuilderStore();
+  const updateCoverSettings = useBuilderStore((s) => s.updateCoverSettings);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
   const s = section.settings;
 
   const update = (fields: Record<string, string | undefined>) => {
-    store.updateCoverSettings(section._key, fields as Partial<typeof s>);
+    updateCoverSettings(section._key, fields as Partial<typeof s>);
   };
 
   return (
@@ -56,7 +57,7 @@ export default function CoverSectionLayoutTab({ section }: CoverSectionLayoutTab
               max={50}
               step={1}
               value={parseInt(s.border_radius || "0", 10) || 0}
-              onMouseDown={() => store._pushSnapshot()}
+              onMouseDown={() => _pushSnapshot()}
               onChange={(e) => update({ border_radius: e.target.value === "0" ? undefined : e.target.value })}
               className="flex-1 accent-[#3580f9]"
             />

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

@@ -74,7 +74,12 @@ interface CoverSectionSettingsProps {
 }
 
 export default function CoverSectionSettings({ section }: CoverSectionSettingsProps) {
-  const store = useBuilderStore();
+  const updateCoverBackground = useBuilderStore((s) => s.updateCoverBackground);
+  const updateCoverHeight = useBuilderStore((s) => s.updateCoverHeight);
+  const updateCoverRowAlign = useBuilderStore((s) => s.updateCoverRowAlign);
+  const removeCoverRow = useBuilderStore((s) => s.removeCoverRow);
+  const addCoverRow = useBuilderStore((s) => s.addCoverRow);
+  const updateCoverSettings = useBuilderStore((s) => s.updateCoverSettings);
   const paletteSwatches = usePaletteSwatches();
 
   const bgType = section.background_type || "image";
@@ -89,7 +94,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
     "background_overlay_color" | "background_overlay_opacity" |
     "nav_color"
   >>) => {
-    store.updateCoverBackground(section._key, fields);
+    updateCoverBackground(section._key, fields);
   };
 
   return (
@@ -223,7 +228,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
         <SettingsField label="Height">
           <select
             value={section.height}
-            onChange={(e) => store.updateCoverHeight(section._key, e.target.value as CoverSection["height"])}
+            onChange={(e) => updateCoverHeight(section._key, e.target.value as CoverSection["height"])}
             className={SELECT_CLASS}
           >
             {HEIGHT_OPTIONS.map((opt) => (
@@ -250,7 +255,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
               <select
                 value={row.vertical_align}
                 onChange={(e) =>
-                  store.updateCoverRowAlign(
+                  updateCoverRowAlign(
                     section._key,
                     row._key,
                     e.target.value as "start" | "center" | "end"
@@ -264,7 +269,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
               </select>
               {section.cover_rows.length > 1 && (
                 <button
-                  onClick={() => store.removeCoverRow(section._key, row._key)}
+                  onClick={() => removeCoverRow(section._key, row._key)}
                   className="group/bb relative text-neutral-300 hover:text-red-500 transition-colors text-xs shrink-0"
                   aria-label="Remove row"
                 >
@@ -278,7 +283,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
 
         {section.cover_rows.length < 5 && (
           <button
-            onClick={() => store.addCoverRow(section._key)}
+            onClick={() => addCoverRow(section._key)}
             className="w-full mt-2 rounded-lg border border-dashed border-neutral-300 py-2 text-[11px] font-medium text-neutral-400 hover:text-neutral-600 hover:border-neutral-400 transition-colors"
           >
             + Add Row
@@ -300,7 +305,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
               max={60}
               step={2}
               value={section.settings.col_gap ?? 20}
-              onChange={(e) => store.updateCoverSettings(section._key, { col_gap: parseInt(e.target.value) })}
+              onChange={(e) => updateCoverSettings(section._key, { col_gap: parseInt(e.target.value) })}
               className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
@@ -317,7 +322,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
               max={60}
               step={2}
               value={section.settings.row_gap ?? 20}
-              onChange={(e) => store.updateCoverSettings(section._key, { row_gap: parseInt(e.target.value) })}
+              onChange={(e) => updateCoverSettings(section._key, { row_gap: parseInt(e.target.value) })}
               className="flex-1 accent-[#3580f9]"
             />
             <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
@@ -330,7 +335,7 @@ export default function CoverSectionSettings({ section }: CoverSectionSettingsPr
       {/* Stagger */}
       <StaggerSettings
         stagger={section.settings.stagger}
-        onChange={(s) => store.updateCoverSettings(section._key, { stagger: s })}
+        onChange={(s) => updateCoverSettings(section._key, { stagger: s })}
       />
     </>
   );

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

@@ -12,7 +12,9 @@ import { BUILDER_VIOLET } from "../../../lib/builder/constants";
 import type { CustomSectionInstance, PageSectionV2 } from "../../../lib/sanity/types";
 
 export function CustomSectionSettings({ instance }: { instance: CustomSectionInstance }) {
-  const store = useBuilderStore();
+  const updateCustomSectionInstanceTitle = useBuilderStore((s) => s.updateCustomSectionInstanceTitle);
+  const enterSectionEditor = useBuilderStore((s) => s.enterSectionEditor);
+  const detachCustomSectionInstance = useBuilderStore((s) => s.detachCustomSectionInstance);
   const refetchTick = useBuilderStore((s) => s._customSectionRefetchTick);
   const [showDetachConfirm, setShowDetachConfirm] = useState(false);
   const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
@@ -40,17 +42,17 @@ export function CustomSectionSettings({ instance }: { instance: CustomSectionIns
 
       const remoteTitle = data.section.title;
       if (remoteTitle && remoteTitle !== instance.custom_section_title) {
-        store.updateCustomSectionInstanceTitle(instance._key, remoteTitle);
+        updateCustomSectionInstanceTitle(instance._key, remoteTitle);
       }
 
-      store.enterSectionEditor(
+      enterSectionEditor(
         instance.custom_section_slug,
         remoteTitle,
         data.section.section
       );
     } catch {
       if (sectionData) {
-        store.enterSectionEditor(
+        enterSectionEditor(
           instance.custom_section_slug,
           instance.custom_section_title,
           sectionData
@@ -59,13 +61,13 @@ export function CustomSectionSettings({ instance }: { instance: CustomSectionIns
     } finally {
       setLoadingEdit(false);
     }
-  }, [instance, sectionData, store]);
+  }, [instance, sectionData, updateCustomSectionInstanceTitle, enterSectionEditor]);
 
   const handleDetach = useCallback(() => {
     if (!sectionData) return;
-    store.detachCustomSectionInstance(instance._key, sectionData);
+    detachCustomSectionInstance(instance._key, sectionData);
     setShowDetachConfirm(false);
-  }, [instance._key, sectionData, store]);
+  }, [instance._key, sectionData, detachCustomSectionInstance]);
 
   return (
     <div className="px-4 py-3 space-y-3">

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

@@ -39,7 +39,13 @@ function slugify(text: string): string {
 }
 
 export default function PageSettings() {
-  const store = useBuilderStore();
+  const pageTitle = useBuilderStore((s) => s.pageTitle);
+  const pageSlug = useBuilderStore((s) => s.pageSlug);
+  const pageType = useBuilderStore((s) => s.pageType);
+  const pageSettings = useBuilderStore((s) => s.pageSettings);
+  const setPageTitle = useBuilderStore((s) => s.setPageTitle);
+  const setPageSlug = useBuilderStore((s) => s.setPageSlug);
+  const updatePageSettings = useBuilderStore((s) => s.updatePageSettings);
   const paletteSwatches = usePaletteSwatches();
   const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
 
@@ -49,13 +55,13 @@ export default function PageSettings() {
         <SettingsField label="Title">
           <input
             type="text"
-            value={store.pageTitle}
+            value={pageTitle}
             onChange={(e) => {
               const newTitle = e.target.value;
-              store.setPageTitle(newTitle);
+              setPageTitle(newTitle);
               // Auto-update slug from title unless user manually edited the slug
               if (!slugManuallyEdited) {
-                store.setPageSlug(slugify(newTitle));
+                setPageSlug(slugify(newTitle));
               }
             }}
             className={INPUT_CLASS}
@@ -64,17 +70,17 @@ export default function PageSettings() {
         <SettingsField label="Slug">
           <input
             type="text"
-            value={store.pageSlug}
+            value={pageSlug}
             onChange={(e) => {
               setSlugManuallyEdited(true);
-              store.setPageSlug(e.target.value);
+              setPageSlug(e.target.value);
             }}
             className={INPUT_CLASS}
           />
         </SettingsField>
         <SettingsField label="Type">
           <p className="text-xs text-neutral-900 py-[7px]">
-            {store.pageType}
+            {pageType}
           </p>
         </SettingsField>
       </SettingsSection>
@@ -82,16 +88,16 @@ export default function PageSettings() {
       <SettingsSection title="Appearance" defaultOpen icon={<AppearanceIcon />}>
         <SettingsField label="Background">
           <ColorSwatchPicker
-            value={parseColorField(store.pageSettings.background_color || "")}
-            onChange={(val) => store.updatePageSettings({ background_color: serializeColorField(val) || "transparent" })}
+            value={parseColorField(pageSettings.background_color || "")}
+            onChange={(val) => updatePageSettings({ background_color: serializeColorField(val) || "transparent" })}
             swatches={paletteSwatches}
             allowGradients
           />
         </SettingsField>
         <SettingsField label="Text Color">
           <ColorSwatchPicker
-            value={store.pageSettings.text_color || ""}
-            onChange={(val) => store.updatePageSettings({ text_color: typeof val === "string" ? val : "" })}
+            value={pageSettings.text_color || ""}
+            onChange={(val) => updatePageSettings({ text_color: typeof val === "string" ? val : "" })}
             swatches={paletteSwatches}
           />
         </SettingsField>
@@ -100,15 +106,15 @@ export default function PageSettings() {
       <SettingsSection title="Navigation" icon={<NavigationIcon />}>
         <SettingsField label="Nav Color">
           <ColorSwatchPicker
-            value={store.pageSettings.nav_color || ""}
-            onChange={(val) => store.updatePageSettings({ nav_color: typeof val === "string" ? val : "" })}
+            value={pageSettings.nav_color || ""}
+            onChange={(val) => updatePageSettings({ nav_color: typeof val === "string" ? val : "" })}
             swatches={paletteSwatches}
           />
         </SettingsField>
         <SettingsField label="Animation Override" hint="Override global nav entrance for this page">
           <select
-            value={store.pageSettings.nav_entrance_animation || ""}
-            onChange={(e) => store.updatePageSettings({ nav_entrance_animation: e.target.value as "" | "fade-in" | "slide-down" | "blur-in" })}
+            value={pageSettings.nav_entrance_animation || ""}
+            onChange={(e) => updatePageSettings({ nav_entrance_animation: e.target.value as "" | "fade-in" | "slide-down" | "blur-in" })}
             className={INPUT_CLASS}
           >
             <option value="">Use Global</option>
@@ -117,27 +123,27 @@ export default function PageSettings() {
             <option value="blur-in">Blur In</option>
           </select>
         </SettingsField>
-        {store.pageSettings.nav_entrance_animation && (
+        {pageSettings.nav_entrance_animation && (
           <>
-            <SettingsField label={`Duration: ${store.pageSettings.nav_entrance_duration || 600}ms`}>
+            <SettingsField label={`Duration: ${pageSettings.nav_entrance_duration || 600}ms`}>
               <input
                 type="range"
                 min={200}
                 max={5000}
                 step={50}
-                value={store.pageSettings.nav_entrance_duration || 600}
-                onChange={(e) => store.updatePageSettings({ nav_entrance_duration: Number(e.target.value) })}
+                value={pageSettings.nav_entrance_duration || 600}
+                onChange={(e) => updatePageSettings({ nav_entrance_duration: Number(e.target.value) })}
                 className="w-full accent-[#3580f9]"
               />
             </SettingsField>
-            <SettingsField label={`Delay: ${store.pageSettings.nav_entrance_delay || 0}ms`}>
+            <SettingsField label={`Delay: ${pageSettings.nav_entrance_delay || 0}ms`}>
               <input
                 type="range"
                 min={0}
                 max={5000}
                 step={50}
-                value={store.pageSettings.nav_entrance_delay || 0}
-                onChange={(e) => store.updatePageSettings({ nav_entrance_delay: Number(e.target.value) })}
+                value={pageSettings.nav_entrance_delay || 0}
+                onChange={(e) => updatePageSettings({ nav_entrance_delay: Number(e.target.value) })}
                 className="w-full accent-[#3580f9]"
               />
             </SettingsField>
@@ -146,14 +152,14 @@ export default function PageSettings() {
         <SettingsField label="Disable Animation" hint="No nav animation on this page">
           <button
             type="button"
-            onClick={() => store.updatePageSettings({ nav_entrance_disabled: !store.pageSettings.nav_entrance_disabled })}
+            onClick={() => updatePageSettings({ nav_entrance_disabled: !pageSettings.nav_entrance_disabled })}
             className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
-              store.pageSettings.nav_entrance_disabled ? "bg-[#3580f9]" : "bg-neutral-300"
+              pageSettings.nav_entrance_disabled ? "bg-[#3580f9]" : "bg-neutral-300"
             }`}
           >
             <span
               className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${
-                store.pageSettings.nav_entrance_disabled ? "translate-x-[18px]" : "translate-x-[3px]"
+                pageSettings.nav_entrance_disabled ? "translate-x-[18px]" : "translate-x-[3px]"
               }`}
             />
           </button>
@@ -166,7 +172,8 @@ export default function PageSettings() {
 
 /** SEO settings — rendered in the dedicated SEO tab at page level. */
 export function PageSeoSettings() {
-  const store = useBuilderStore();
+  const metadata = useBuilderStore((s) => s.metadata);
+  const setMetadata = useBuilderStore((s) => s.setMetadata);
 
   return (
     <>
@@ -174,17 +181,17 @@ export function PageSeoSettings() {
         <SettingsField label="SEO Title">
           <input
             type="text"
-            value={store.metadata.seo_title || ""}
-            onChange={(e) => store.setMetadata({ seo_title: e.target.value })}
+            value={metadata.seo_title || ""}
+            onChange={(e) => setMetadata({ seo_title: e.target.value })}
             className={INPUT_CLASS}
             placeholder="Page title for search engines"
           />
         </SettingsField>
         <SettingsField label="Description">
           <textarea
-            value={store.metadata.seo_description || ""}
+            value={metadata.seo_description || ""}
             onChange={(e) =>
-              store.setMetadata({ seo_description: e.target.value })
+              setMetadata({ seo_description: e.target.value })
             }
             rows={2}
             className={`${INPUT_CLASS} resize-y`}
@@ -194,9 +201,9 @@ export function PageSeoSettings() {
         <SettingsField label="OG Image" hint="Social sharing image path">
           <input
             type="text"
-            value={store.metadata.og_image_path || ""}
+            value={metadata.og_image_path || ""}
             onChange={(e) =>
-              store.setMetadata({ og_image_path: e.target.value })
+              setMetadata({ og_image_path: e.target.value })
             }
             className={INPUT_CLASS}
             placeholder="og/page-image.jpg"

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

@@ -55,7 +55,7 @@ interface ParallaxGroupSettingsProps {
 export default function ParallaxGroupSettings({
   group,
 }: ParallaxGroupSettingsProps) {
-  const store = useBuilderStore();
+  const updateParallaxGroupSettings = useBuilderStore((s) => s.updateParallaxGroupSettings);
   const activeEffect = group.transition_effect || "parallax";
 
   return (
@@ -68,7 +68,7 @@ export default function ParallaxGroupSettings({
               <button
                 key={effect.value}
                 onClick={() =>
-                  store.updateParallaxGroupSettings(group._key, {
+                  updateParallaxGroupSettings(group._key, {
                     transition_effect: effect.value,
                   })
                 }

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

@@ -60,11 +60,11 @@ export default function ParallaxSlideSettings({
   group,
   slide,
 }: ParallaxSlideSettingsProps) {
-  const store = useBuilderStore();
+  const updateParallaxSlideBackground = useBuilderStore((s) => s.updateParallaxSlideBackground);
   const paletteSwatches = usePaletteSwatches();
 
   const updateBg = (fields: Partial<ParallaxSlideV2>) => {
-    store.updateParallaxSlideBackground(group._key, slide._key, fields);
+    updateParallaxSlideBackground(group._key, slide._key, fields);
   };
 
   const bgType = slide.background_type || "image";

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

@@ -22,17 +22,19 @@ import {
 } from "./responsive-helpers";
 
 export function SectionV2AnimationTab({ section }: { section: PageSectionV2 }) {
-  const store = useBuilderStore();
-  const activeViewport = store.activeViewport;
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const updateSectionV2Settings = useBuilderStore((s) => s.updateSectionV2Settings);
+  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const pageSettings = useBuilderStore((s) => s.pageSettings);
   const isResponsive = activeViewport !== "desktop";
 
   /** Viewport-aware update: desktop writes to settings, tablet/phone to responsive */
   const updateAnimSetting = (property: "enter_animation" | "stagger", value: unknown) => {
     if (activeViewport === "desktop") {
-      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
+      updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
     } else {
       const responsive = buildSectionV2SettingOverride(section, activeViewport, property, value);
-      store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+      updateSectionV2Responsive(section._key, responsive ?? undefined);
     }
   };
 
@@ -73,7 +75,7 @@ export function SectionV2AnimationTab({ section }: { section: PageSectionV2 }) {
           </div>
         )}
         <EnterAnimationPicker
-          mode={{ level: "section", parentConfig: store.pageSettings.enter_animation }}
+          mode={{ level: "section", parentConfig: pageSettings.enter_animation }}
           config={effectiveEnterAnim}
           onChange={(cfg) => updateAnimSetting("enter_animation", cfg)}
         />

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

@@ -62,17 +62,21 @@ function SectionOverrideBadge({
 }
 
 export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
-  const store = useBuilderStore();
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const updateSectionV2Settings = useBuilderStore((s) => s.updateSectionV2Settings);
+  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+  const setColorPickerPreview = useBuilderStore((s) => s.setColorPickerPreview);
+  const clearColorPickerPreview = useBuilderStore((s) => s.clearColorPickerPreview);
   const paletteSwatches = usePaletteSwatches();
   const settings = section.settings;
-  const activeViewport = store.activeViewport;
 
   // Live preview callbacks (Phase 4)
   const handleBgPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ sectionKey: section._key, field: "background_color", value: val });
+    setColorPickerPreview({ sectionKey: section._key, field: "background_color", value: val });
   };
   const handleBorderPreview = (val: import("../../../lib/sanity/types").ColorField) => {
-    store.setColorPickerPreview({ sectionKey: section._key, field: "border_color", value: val });
+    setColorPickerPreview({ sectionKey: section._key, field: "border_color", value: val });
   };
 
   const viewportLabel = activeViewport !== "desktop"
@@ -85,7 +89,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
    */
   const updateSettingResponsive = (property: string, value: unknown) => {
     if (activeViewport === "desktop") {
-      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
+      updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
     } else {
       const existing = section.responsive || {};
       const vp = activeViewport as "tablet" | "phone";
@@ -95,7 +99,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
       const responsive = { ...existing, [vp]: vpOverride };
       // Clean up empty viewport override
       if (!vpOverride.columns?.length && !vpOverride.settings) delete responsive[vp];
-      store.updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
+      updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
     }
   };
 
@@ -183,7 +187,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getSettingValue<string>("background_color", ""))}
-            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("background_color", serializeColorField(val)); }}
+            onChange={(val) => { clearColorPickerPreview(); updateSettingResponsive("background_color", serializeColorField(val)); }}
             swatches={paletteSwatches}
             allowGradients
             onPreview={handleBgPreview}
@@ -215,7 +219,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
         <SettingsField label="Image">
           <AssetPathInput
             value={getSettingValue<string>("background_image", "")}
-            onFocus={() => store._pushSnapshot()}
+            onFocus={() => _pushSnapshot()}
             onChange={(v) => updateSettingResponsive("background_image", v)}
             placeholder="path/to/image.jpg"
             filterType="image"
@@ -277,7 +281,7 @@ export function SectionV2LayoutTab({ section }: { section: PageSectionV2 }) {
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getSettingValue<string>("border_color", ""))}
-            onChange={(val) => { store.clearColorPickerPreview(); updateSettingResponsive("border_color", serializeColorField(val)); }}
+            onChange={(val) => { clearColorPickerPreview(); updateSettingResponsive("border_color", serializeColorField(val)); }}
             swatches={paletteSwatches}
             allowGradients
             onPreview={handleBorderPreview}

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

@@ -164,9 +164,10 @@ function PresetGrid({ section }: { section: PageSectionV2 }) {
 // ============================================
 
 export default function SectionV2Settings({ section }: { section: PageSectionV2 }) {
-  const store = useBuilderStore();
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const updateSectionV2Settings = useBuilderStore((s) => s.updateSectionV2Settings);
+  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
   const settings = section.settings;
-  const activeViewport = store.activeViewport;
   const isResponsive = activeViewport !== "desktop";
 
   const hasColOverrides = hasAnyColumnV2Overrides(section, activeViewport);
@@ -176,10 +177,10 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
   /** Viewport-aware update: desktop writes to settings, tablet/phone to responsive */
   const updateSettingResponsive = (property: keyof SectionV2SettingsOverridable, value: unknown) => {
     if (activeViewport === "desktop") {
-      store.updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
+      updateSectionV2Settings(section._key, { [property]: value } as Partial<SectionV2SettingsType>);
     } else {
       const responsive = buildSectionV2SettingOverride(section, activeViewport, property, value);
-      store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+      updateSectionV2Responsive(section._key, responsive ?? undefined);
     }
   };
 
@@ -190,7 +191,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
   const handleStack = () => {
     const colOverrides = buildStackOverride(section);
     const responsive = buildColumnV2Overrides(section, activeViewport, colOverrides);
-    store.updateSectionV2Responsive(section._key, responsive ?? undefined);
+    updateSectionV2Responsive(section._key, responsive ?? undefined);
   };
 
   const handleReset = () => {
@@ -199,7 +200,7 @@ export default function SectionV2Settings({ section }: { section: PageSectionV2
     const vp = activeViewport as "tablet" | "phone";
     const responsive = { ...existing };
     delete responsive[vp];
-    store.updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
+    updateSectionV2Responsive(section._key, Object.keys(responsive).length ? responsive : undefined);
   };
 
   return (