@morphika/andami 0.1.8 → 0.1.10

package/components/builder/live-preview/useDragReorder.ts

@@ -0,0 +1,370 @@
+/**
+ * useDragReorder — Custom hook encapsulating all drag-to-reorder logic
+ * for the ProjectGrid masonry preview.
+ *
+ * Manages: drag state machine (grabbed → dragging → swap/cancel),
+ * hold-to-drag timer, global pointer listeners, cancel fly-back animation,
+ * coordinate hit-testing, and project array swap.
+ *
+ * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B4).
+ */
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { MasonryOutput } from "../../../lib/builder/masonry";
+import type { ProjectGridBlock } from "../../../lib/sanity/types";
+import {
+  HOLD_DELAY,
+  MOVE_THRESHOLD_SQ,
+  CANCEL_DURATION,
+  type DragState,
+  hitTestCards,
+} from "./drag-utils";
+
+// ─── Hook Options & Return Types ─────────────────────────────────────
+
+export interface UseDragReorderOptions {
+  block: ProjectGridBlock;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  containerWidth: number;
+  masonry: MasonryOutput;
+}
+
+export interface UseDragReorderResult {
+  dragState: DragState | null;
+  handleDragStart: (
+    key: string,
+    e: React.PointerEvent,
+    cardEl: HTMLDivElement,
+    fromHandle: boolean,
+  ) => void;
+  handleSelect: (key: string) => void;
+  isAnyDragActive: boolean;
+  draggedKey: string | null;
+  hoverTargetKey: string | null;
+  dragPhase: DragState["phase"] | null;
+  draggedItem: NonNullable<ProjectGridBlock["projects"]>[number] | null;
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────
+
+export function useDragReorder({
+  block,
+  containerRef,
+  containerWidth,
+  masonry,
+}: UseDragReorderOptions): UseDragReorderResult {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+  const selectProjectCard = useBuilderStore((s) => s.selectProjectCard);
+  const selectedProjectCardKey = useBuilderStore(
+    (s) => s.selectedProjectCardKey,
+  );
+
+  const [dragState, setDragState] = useState<DragState | null>(null);
+
+  // ── Stable refs for event handlers ────────────────────────────
+
+  const blockRef = useRef(block);
+  blockRef.current = block;
+  const updateBlockRef = useRef(updateBlock);
+  updateBlockRef.current = updateBlock;
+  const pushSnapshotRef = useRef(_pushSnapshot);
+  pushSnapshotRef.current = _pushSnapshot;
+  const containerWidthRef = useRef(containerWidth);
+  containerWidthRef.current = containerWidth;
+  const dragStateRef = useRef(dragState);
+  dragStateRef.current = dragState;
+  const masonryRef = useRef(masonry);
+  masonryRef.current = masonry;
+
+  // Timer & cleanup refs
+  const holdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const holdCleanupRef = useRef<(() => void) | null>(null);
+  const cancelTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelRafRef = useRef<number | null>(null);
+  const didDragRef = useRef(false);
+
+  // ── Drag: initiate ────────────────────────────────────────────
+
+  const initiateDrag = useCallback(
+    (
+      key: string,
+      clientX: number,
+      clientY: number,
+      cardEl: HTMLDivElement,
+    ) => {
+      // Clean up any pending hold
+      if (holdCleanupRef.current) {
+        holdCleanupRef.current();
+        holdCleanupRef.current = null;
+      }
+      // Clean up any cancel animation in progress
+      if (cancelTimerRef.current) {
+        clearTimeout(cancelTimerRef.current);
+        cancelTimerRef.current = null;
+      }
+      if (cancelRafRef.current) {
+        cancelAnimationFrame(cancelRafRef.current);
+        cancelRafRef.current = null;
+      }
+
+      const rect = cardEl.getBoundingClientRect();
+      didDragRef.current = true;
+      setDragState({
+        phase: "grabbed",
+        draggedKey: key,
+        hoverTargetKey: null,
+        mouseX: clientX,
+        mouseY: clientY,
+        startMouseX: clientX,
+        startMouseY: clientY,
+        offsetX: clientX - rect.left,
+        offsetY: clientY - rect.top,
+        cardWidth: rect.width,
+        cardHeight: rect.height,
+        origScreenX: rect.left,
+        origScreenY: rect.top,
+      });
+    },
+    [],
+  );
+
+  const handleDragStart = useCallback(
+    (
+      key: string,
+      e: React.PointerEvent,
+      cardEl: HTMLDivElement,
+      fromHandle: boolean,
+    ) => {
+      if (fromHandle) {
+        e.preventDefault();
+        initiateDrag(key, e.clientX, e.clientY, cardEl);
+        return;
+      }
+
+      // Card body → hold-to-drag
+      const cx = e.clientX;
+      const cy = e.clientY;
+      didDragRef.current = false;
+
+      // Clean any previous pending hold
+      if (holdCleanupRef.current) holdCleanupRef.current();
+
+      const cleanup = () => {
+        if (holdTimerRef.current) {
+          clearTimeout(holdTimerRef.current);
+          holdTimerRef.current = null;
+        }
+        window.removeEventListener("pointerup", onEarlyRelease);
+        window.removeEventListener("pointermove", onEarlyMove);
+        holdCleanupRef.current = null;
+      };
+
+      const onEarlyRelease = () => cleanup();
+
+      const onEarlyMove = (ev: PointerEvent) => {
+        // If user moved > 10px before hold time, cancel (not a drag intent)
+        const dx = ev.clientX - cx;
+        const dy = ev.clientY - cy;
+        if (dx * dx + dy * dy > 100) cleanup();
+      };
+
+      holdTimerRef.current = setTimeout(() => {
+        holdTimerRef.current = null;
+        window.removeEventListener("pointerup", onEarlyRelease);
+        window.removeEventListener("pointermove", onEarlyMove);
+        holdCleanupRef.current = null;
+        initiateDrag(key, cx, cy, cardEl);
+      }, HOLD_DELAY);
+
+      window.addEventListener("pointerup", onEarlyRelease);
+      window.addEventListener("pointermove", onEarlyMove);
+      holdCleanupRef.current = cleanup;
+    },
+    [initiateDrag],
+  );
+
+  // ── Drag: click handler (selection) ───────────────────────────
+
+  const handleSelect = useCallback(
+    (key: string) => {
+      // Suppress click that follows a completed drag
+      if (didDragRef.current) {
+        didDragRef.current = false;
+        return;
+      }
+      selectProjectCard(selectedProjectCardKey === key ? null : key);
+    },
+    [selectProjectCard, selectedProjectCardKey],
+  );
+
+  // ── Global pointer handlers during drag ───────────────────────
+
+  const hasDrag = dragState !== null;
+
+  useEffect(() => {
+    if (!hasDrag) return;
+
+    const onMove = (e: PointerEvent) => {
+      setDragState((prev) => {
+        if (!prev || prev.phase === "cancelling") return prev;
+
+        const next: DragState = {
+          ...prev,
+          mouseX: e.clientX,
+          mouseY: e.clientY,
+        };
+
+        // Transition: grabbed → dragging on sufficient movement
+        if (prev.phase === "grabbed") {
+          const dx = e.clientX - prev.startMouseX;
+          const dy = e.clientY - prev.startMouseY;
+          if (dx * dx + dy * dy > MOVE_THRESHOLD_SQ) {
+            next.phase = "dragging";
+          }
+        }
+
+        // Coordinate-based hit-testing for drop targets
+        if (next.phase === "dragging" && containerRef.current) {
+          next.hoverTargetKey = hitTestCards(
+            e.clientX,
+            e.clientY,
+            containerRef.current,
+            containerWidthRef.current,
+            masonryRef.current,
+            prev.draggedKey,
+          );
+        }
+
+        return next;
+      });
+    };
+
+    const onUp = () => {
+      const prev = dragStateRef.current;
+      if (!prev) {
+        setDragState(null);
+        return;
+      }
+
+      // Grabbed with no movement → cancel (no visual action, allow click through)
+      if (prev.phase === "grabbed") {
+        setDragState(null);
+        setTimeout(() => {
+          didDragRef.current = false;
+        }, 0);
+        return;
+      }
+
+      // Dragging with a valid drop target → swap
+      if (prev.phase === "dragging" && prev.hoverTargetKey) {
+        const blk = blockRef.current;
+        const arr = [...(blk.projects || [])];
+        const fromIdx = arr.findIndex((p) => p._key === prev.draggedKey);
+        const toIdx = arr.findIndex((p) => p._key === prev.hoverTargetKey);
+        if (fromIdx !== -1 && toIdx !== -1 && fromIdx !== toIdx) {
+          pushSnapshotRef.current();
+          [arr[fromIdx], arr[toIdx]] = [arr[toIdx], arr[fromIdx]];
+          updateBlockRef.current(blk._key, {
+            projects: arr,
+          } as Partial<ProjectGridBlock>);
+        }
+        setDragState(null);
+        setTimeout(() => {
+          didDragRef.current = false;
+        }, 0);
+        return;
+      }
+
+      // Dragging with no target → cancel with fly-back animation
+      if (prev.phase === "dragging") {
+        setDragState({ ...prev, phase: "cancelling", hoverTargetKey: null });
+        setTimeout(() => {
+          didDragRef.current = false;
+        }, 0);
+        return;
+      }
+
+      // Fallback: clear
+      setDragState(null);
+    };
+
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+  }, [hasDrag]);
+
+  // ── Cancel animation: fly ghost back to original position ─────
+
+  useEffect(() => {
+    if (dragState?.phase !== "cancelling") return;
+
+    // Double rAF ensures the transition CSS is painted before position change
+    cancelRafRef.current = requestAnimationFrame(() => {
+      cancelRafRef.current = requestAnimationFrame(() => {
+        setDragState((prev) => {
+          if (prev?.phase !== "cancelling") return prev;
+          return {
+            ...prev,
+            mouseX: prev.origScreenX + prev.offsetX,
+            mouseY: prev.origScreenY + prev.offsetY,
+          };
+        });
+        cancelRafRef.current = null;
+      });
+    });
+
+    // Clear state after transition completes
+    cancelTimerRef.current = setTimeout(() => {
+      setDragState(null);
+      cancelTimerRef.current = null;
+    }, CANCEL_DURATION + 50);
+
+    return () => {
+      if (cancelRafRef.current) cancelAnimationFrame(cancelRafRef.current);
+      if (cancelTimerRef.current) {
+        clearTimeout(cancelTimerRef.current);
+        cancelTimerRef.current = null;
+      }
+    };
+  }, [dragState?.phase]);
+
+  // ── Cleanup on unmount ────────────────────────────────────────
+
+  useEffect(
+    () => () => {
+      if (holdTimerRef.current) clearTimeout(holdTimerRef.current);
+      if (holdCleanupRef.current) holdCleanupRef.current();
+      if (cancelTimerRef.current) clearTimeout(cancelTimerRef.current);
+      if (cancelRafRef.current) cancelAnimationFrame(cancelRafRef.current);
+    },
+    [],
+  );
+
+  // ── Derived drag values ───────────────────────────────────────
+
+  const projects = block.projects || [];
+  const draggedKey = dragState?.draggedKey ?? null;
+  const hoverTargetKey =
+    dragState?.phase === "dragging" ? dragState.hoverTargetKey : null;
+  const dragPhase = dragState?.phase ?? null;
+  const isAnyDragActive = dragState !== null;
+  const draggedItem = dragState
+    ? projects.find((p) => p._key === dragState.draggedKey) ?? null
+    : null;
+
+  return {
+    dragState,
+    handleDragStart,
+    handleSelect,
+    isAnyDragActive,
+    draggedKey,
+    hoverTargetKey,
+    dragPhase,
+    draggedItem,
+  };
+}

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

@@ -0,0 +1,152 @@
+"use client";
+
+/**
+ * AnimationTab — Routes to EnterAnimationPicker / HoverEffectPicker based on selection.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ContentBlock, PageSection, ProjectGridBlock } from "../../../lib/sanity/types";
+import type { HoverEffectConfig } from "../../../lib/animation/hover-effect-types";
+import EnterAnimationPicker from "../editors/EnterAnimationPicker";
+import HoverEffectPicker from "../editors/HoverEffectPicker";
+import {
+  getBlockAnimationValue,
+  hasBlockAnimationOverride,
+  setBlockAnimationOverride,
+} from "./responsive-helpers";
+import { CardEntranceSection } from "./CardEntranceSection";
+
+/** Safely extract hover_effect (new unified type) from any content block.
+ *  ProjectGridBlock has a legacy `hover_effect: "3d" | "scale" | "none"` string field
+ *  that collides — skip it (returns undefined). Other blocks have HoverEffectConfig. */
+export function getBlockHoverEffect(block: ContentBlock): HoverEffectConfig | undefined {
+  // ProjectGridBlock hover_effect is the old per-card string — not HoverEffectConfig
+  if (block._type === "projectGridBlock") return undefined;
+  const val = (block as unknown as Record<string, unknown>).hover_effect;
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === "object") return val as HoverEffectConfig;
+  return undefined;
+}
+
+interface AnimationTabProps {
+  selectedBlock: { block: ContentBlock; rowKey: string; colKey: string; isSection: boolean } | null;
+  selectedSection: PageSection | null;
+}
+
+export function AnimationTab({ selectedBlock, selectedSection }: AnimationTabProps) {
+  const store = useBuilderStore();
+
+  // PageSection (V1): enter animation on the section settings level
+  if (selectedSection) {
+    return (
+      <EnterAnimationPicker
+        mode={{ level: "section", parentConfig: store.pageSettings.enter_animation }}
+        config={selectedSection.settings?.enter_animation}
+        onChange={(cfg) => {
+          store.updateSectionSettings(selectedSection._key, { enter_animation: cfg });
+        }}
+      />
+    );
+  }
+
+  // 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 isBlockResponsive = bvp !== "desktop";
+
+    const effectiveEnterAnim = getBlockAnimationValue(
+      selectedBlock.block, bvp, "enter_animation", undefined
+    );
+    const effectiveHoverEffect = getBlockAnimationValue(
+      selectedBlock.block, bvp, "hover_effect", undefined
+    ) as HoverEffectConfig | undefined;
+
+    const hasEnterOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation");
+    const hasHoverOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect");
+
+    return (
+      <>
+        {isBlockResponsive && (
+          <div className="px-4 pt-3">
+            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
+              <span className="text-[11px] font-medium text-[#076bff]">
+                Editing {bvp === "tablet" ? "Tablet" : "Phone"} overrides
+              </span>
+            </div>
+          </div>
+        )}
+        <div className="relative">
+          {hasEnterOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <EnterAnimationPicker
+            mode={{ level: "block", blockType: selectedBlock.block._type }}
+            config={effectiveEnterAnim}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {/* Hover Effect — block-level only, shown if block type has hover presets */}
+        <div className="border-t border-neutral-200 my-1" />
+        <div className="relative">
+          {hasHoverOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <HoverEffectPicker
+            blockType={selectedBlock.block._type}
+            config={effectiveHoverEffect ?? getBlockHoverEffect(selectedBlock.block)}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {isProjectGrid && pgBlock && (
+          <>
+            <div className="border-t border-neutral-200 my-1" />
+            <CardEntranceSection block={pgBlock} />
+          </>
+        )}
+      </>
+    );
+  }
+
+  // Page-level: generic enter animation (no hover at page level)
+  return (
+    <EnterAnimationPicker
+      mode={{ level: "page" }}
+      config={store.pageSettings.enter_animation}
+      onChange={(cfg) => {
+        store.updatePageSettings({ enter_animation: cfg });
+      }}
+    />
+  );
+}

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

@@ -145,59 +145,14 @@ function AlignmentButtons<T extends string>({
   );
 }
 
-// ── Section title icons (small, inline) ──
-
-function AlignmentSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1" y="2" width="9" height="2" rx="0.5" fill="currentColor" opacity="0.7" />
-      <rect x="3" y="6" width="8" height="2" rx="0.5" fill="currentColor" opacity="0.5" />
-      <rect x="2" y="10" width="10" height="2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
-
-function SpacingSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="4" y="4" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.5" />
-      <path d="M7 1 L7 3.5" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M7 10.5 L7 13" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M1 7 L3.5 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-      <path d="M10.5 7 L13 7" stroke="currentColor" strokeWidth="0.8" opacity="0.7" />
-    </svg>
-  );
-}
-
-function OffsetSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" strokeWidth="0.8" strokeDasharray="2 1" fill="none" opacity="0.35" />
-      <rect x="5" y="5" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1" fill="none" opacity="0.7" />
-      <path d="M4 4 L5 5" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
-    </svg>
-  );
-}
-
-function BackgroundSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" fill="currentColor" opacity="0.15" />
-      <rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="0.8" opacity="0.5" fill="none" />
-      <circle cx="5" cy="5" r="1.5" fill="currentColor" opacity="0.5" />
-      <path d="M1.5 10 L5 7 L8 9 L10.5 6.5 L12.5 8.5 L12.5 11 C12.5 11.8 11.8 12.5 11 12.5 L3 12.5 C2.2 12.5 1.5 11.8 1.5 11 Z" fill="currentColor" opacity="0.3" />
-    </svg>
-  );
-}
-
-function BorderSectionIcon() {
-  return (
-    <svg width={14} height={14} viewBox="0 0 14 14" fill="none">
-      <rect x="2" y="2" width="10" height="10" rx="2" stroke="currentColor" strokeWidth="1.2" fill="none" opacity="0.6" />
-      <rect x="2" y="2" width="10" height="1.2" rx="0.5" fill="currentColor" opacity="0.7" />
-    </svg>
-  );
-}
+// ── Section title icons (centralized colored icons — Session 163) ──
+import {
+  AlignmentIcon,
+  SpacingIcon,
+  OffsetIcon,
+  BackgroundIcon,
+  BorderIcon,
+} from "../editors/section-icons";
 
 // ── Override indicator badge ──
 
@@ -287,7 +242,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       )}
 
       {/* Alignment */}
-      <SettingsSection title="Alignment" defaultOpen icon={<AlignmentSectionIcon />}>
+      <SettingsSection title="Alignment" defaultOpen icon={<AlignmentIcon />}>
         <SettingsField label="Horizontal">
           <AlignmentButtons<AlignH>
             options={[
@@ -329,7 +284,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Spacing (Padding) */}
-      <SettingsSection title="Spacing" defaultOpen icon={<SpacingSectionIcon />}>
+      <SettingsSection title="Spacing" defaultOpen icon={<SpacingIcon />}>
         <TRBLInputs
           top={getBlockLayoutValue<string>(block, activeViewport, "spacing_top", "0")}
           right={getBlockLayoutValue<string>(block, activeViewport, "spacing_right", "0")}
@@ -348,7 +303,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Offset (Margin) */}
-      <SettingsSection title="Offset" icon={<OffsetSectionIcon />}>
+      <SettingsSection title="Offset" icon={<OffsetIcon />}>
         <TRBLInputs
           top={getBlockLayoutValue<string>(block, activeViewport, "offset_top", "0")}
           right={getBlockLayoutValue<string>(block, activeViewport, "offset_right", "0")}
@@ -367,7 +322,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Background */}
-      <SettingsSection title="Background" defaultOpen icon={<BackgroundSectionIcon />}>
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "background_color", ""))}
@@ -466,7 +421,7 @@ export function BlockLayoutTab({ block }: { block: ContentBlock }) {
       </SettingsSection>
 
       {/* Border */}
-      <SettingsSection title="Border" icon={<BorderSectionIcon />}>
+      <SettingsSection title="Border" icon={<BorderIcon />}>
         <SettingsField label="Color">
           <ColorSwatchPicker
             value={parseColorField(getBlockLayoutValue<string>(block, activeViewport, "border_color", ""))}