@morphika/andami 0.5.4 → 0.5.6

package/components/builder/editors/VideoBlockEditor.tsx

@@ -52,33 +52,35 @@ function extractEmbedId(
 }
 
 export default function VideoBlockEditor({ block }: Props) {
-  const store = useBuilderStore();
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const updateBlockDebounced = useBuilderStore((s) => s.updateBlockDebounced);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
   const viewport = useActiveViewport();
 
-  const snapshotOnFocus = () => store._pushSnapshot();
+  const snapshotOnFocus = () => _pushSnapshot();
 
   // Responsive-aware update for layout/appearance properties
   const updateResponsive = (property: string, value: unknown) => {
     if (viewport === "desktop") {
-      store.updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
+      updateBlock(block._key, { [property]: value } as Partial<ContentBlock>);
     } else {
       const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, value);
-      store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+      updateBlock(block._key, overrides as Partial<ContentBlock>);
     }
   };
 
   const resetOverride = (property: string) => {
     const overrides = setResponsiveOverride(block as ContentBlock, viewport, property, undefined);
-    store.updateBlock(block._key, overrides as Partial<ContentBlock>);
+    updateBlock(block._key, overrides as Partial<ContentBlock>);
   };
 
   // Direct update (base block, not responsive)
   const update = (updates: Partial<VideoBlock>) => {
-    store.updateBlock(block._key, updates as Partial<ContentBlock>);
+    updateBlock(block._key, updates as Partial<ContentBlock>);
   };
 
   const updateDebounced = (updates: Partial<VideoBlock>) => {
-    store.updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
+    updateBlockDebounced(block._key, updates as Partial<ContentBlock>);
   };
 
   // Effective values for the active viewport
@@ -244,7 +246,7 @@ export default function VideoBlockEditor({ block }: Props) {
               value={String(getEffectiveValue<string>(block as ContentBlock, viewport, "border_radius", block.border_radius || "")).replace(/px$/i, "")}
               onFocus={snapshotOnFocus}
               onChange={(e) => {
-                store._pushSnapshot();
+                _pushSnapshot();
                 updateResponsive("border_radius", e.target.value.replace(/[^0-9]/g, ""));
               }}
               className={INPUT_CLASS}

package/components/builder/live-preview/drag-utils.tsx

@@ -7,7 +7,7 @@
  * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B1).
  */
 
-import { BUILDER_BLUE } from "../../../lib/builder/constants";
+import { BUILDER_BLOCK } from "../../../lib/builder/constants";
 import type { MasonryOutput } from "../../../lib/builder/masonry";
 
 // ─── Constants ───────────────────────────────────────────────────────
@@ -15,8 +15,10 @@ import type { MasonryOutput } from "../../../lib/builder/masonry";
 export const HOLD_DELAY = 150; // ms before card-body drag activates
 export const MOVE_THRESHOLD_SQ = 9; // 3px² — grabbed → dragging
 export const CANCEL_DURATION = 200; // ms — cancel fly-back animation
-export const ADMIN_BLUE = BUILDER_BLUE;
-export const DROP_BLUE = BUILDER_BLUE;
+// Project-card DnD chrome inside `projectGridBlock` — semantic is block-level
+// (card reorder within a block), so tracks BUILDER_BLOCK, not BUILDER_YELLOW.
+export const ADMIN_BLUE = BUILDER_BLOCK;
+export const DROP_BLUE = BUILDER_BLOCK;
 
 // ─── Types ───────────────────────────────────────────────────────────
 

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

@@ -35,13 +35,16 @@ interface AnimationTabProps {
 }
 
 export function AnimationTab({ selectedBlock }: AnimationTabProps) {
-  const store = useBuilderStore();
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const pageSettings = useBuilderStore((s) => s.pageSettings);
+  const updatePageSettings = useBuilderStore((s) => s.updatePageSettings);
 
   // Block level: type-specific enter picker + card entrance for projectGrid
   if (selectedBlock) {
     const isProjectGrid = selectedBlock.block._type === "projectGridBlock";
     const pgBlock = isProjectGrid ? (selectedBlock.block as ProjectGridBlock) : null;
-    const bvp = store.activeViewport;
+    const bvp = activeViewport;
     const isBlockResponsive = bvp !== "desktop";
 
     const effectiveEnterAnim = getBlockAnimationValue(
@@ -72,7 +75,7 @@ export function AnimationTab({ selectedBlock }: AnimationTabProps) {
               <button
                 onClick={() => {
                   const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", undefined);
-                  store.updateBlock(selectedBlock.block._key, updates);
+                  updateBlock(selectedBlock.block._key, updates);
                 }}
                 className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
               >
@@ -85,7 +88,7 @@ export function AnimationTab({ selectedBlock }: AnimationTabProps) {
             config={effectiveEnterAnim}
             onChange={(cfg) => {
               const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", cfg);
-              store.updateBlock(selectedBlock.block._key, updates);
+              updateBlock(selectedBlock.block._key, updates);
             }}
           />
         </div>
@@ -98,7 +101,7 @@ export function AnimationTab({ selectedBlock }: AnimationTabProps) {
               <button
                 onClick={() => {
                   const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", undefined);
-                  store.updateBlock(selectedBlock.block._key, updates);
+                  updateBlock(selectedBlock.block._key, updates);
                 }}
                 className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
               >
@@ -111,7 +114,7 @@ export function AnimationTab({ selectedBlock }: AnimationTabProps) {
             config={effectiveHoverEffect ?? getBlockHoverEffect(selectedBlock.block)}
             onChange={(cfg) => {
               const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", cfg);
-              store.updateBlock(selectedBlock.block._key, updates);
+              updateBlock(selectedBlock.block._key, updates);
             }}
           />
         </div>
@@ -129,9 +132,9 @@ export function AnimationTab({ selectedBlock }: AnimationTabProps) {
   return (
     <EnterAnimationPicker
       mode={{ level: "page" }}
-      config={store.pageSettings.enter_animation}
+      config={pageSettings.enter_animation}
       onChange={(cfg) => {
-        store.updatePageSettings({ enter_animation: cfg });
+        updatePageSettings({ enter_animation: cfg });
       }}
     />
   );