@morphika/andami 0.5.1 → 0.5.3

package/components/builder/blockStyles.tsx

@@ -1,185 +1,192 @@
-"use client";
-
-/**
- * Shared block visual styles — gradients and SVG icon components.
- * Used by BlockTypePicker (add block cards) and SettingsPanel (header).
- *
- * The compact block/section icons exported here are thin wrappers that render
- * the full card icons (`BlockCardIcons.tsx` / `SectionCardIcons.tsx`) at a
- * smaller size. This keeps iconography 100% consistent between the modal
- * cards and the settings panel header — same visual, just scaled.
- *
- * `size` represents the HEIGHT in pixels. Width is derived from the
- * card icon's 220×120 aspect ratio (≈ height × 1.833).
- */
-
-import {
-  TextBlockCardIcon,
-  ImageBlockCardIcon,
-  ImageGridBlockCardIcon,
-  VideoBlockCardIcon,
-  SpacerBlockCardIcon,
-  ButtonBlockCardIcon,
-  BeforeAfterBlockCardIcon,
-  AudioBlockCardIcon,
-} from "./BlockCardIcons";
-import {
-  CoverSectionCardIcon,
-  EmptySectionV2CardIcon,
-  ParallaxGroupCardIcon,
-  ProjectCarouselCardIcon,
-  ProjectGridCardIcon,
-  SavedSectionCardIcon,
-} from "./SectionCardIcons";
-
-// ── Gradient backgrounds per block type ──
-
-export const BLOCK_GRADIENTS: Record<string, string> = {
-  textBlock:      "linear-gradient(135deg, #c9b8ff 0%, #8eb5ff 50%, #b8d4ff 100%)",
-  imageBlock:     "linear-gradient(135deg, #b8ffb8 0%, #d4ffa8 50%, #f0ffc0 100%)",
-  imageGridBlock: "linear-gradient(135deg, #a8c8ff 0%, #c0d8ff 50%, #d8e8ff 100%)",
-  videoBlock:     "linear-gradient(135deg, #ffb8d4 0%, #ffc8a8 50%, #ffe0b8 100%)",
-  spacerBlock:    "linear-gradient(135deg, #d8d8e8 0%, #e8e8f0 50%, #f0f0f8 100%)",
-  buttonBlock:    "linear-gradient(135deg, #ffb8e0 0%, #b8ffe8 50%, #a8ffd8 100%)",
-  beforeAfterBlock: "linear-gradient(135deg, #d8d8e8 0%, #a8c8ff 50%, #b8ffe0 100%)",
-  audioBlock:     "linear-gradient(135deg, #a8c8ff 0%, #d8c0ff 50%, #e0b8ff 100%)",
-  projectGridBlock: "linear-gradient(135deg, #ffd4a8 0%, #ffe8b8 50%, #fff0c8 100%)",
-  coverSection:  "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
-  parallaxGroup: "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 50%, #e8d0ff 100%)",
-  customSectionInstance: "linear-gradient(135deg, #d0b8ff 0%, #b8a8f8 50%, #c8b8ff 100%)",
-  // Non-block contexts
-  row:            "linear-gradient(135deg, #e0e0f0 0%, #d0d8e8 50%, #c8d0e0 100%)",
-  column:         "linear-gradient(135deg, #d8e8f8 0%, #c8ddf0 50%, #b8d0e8 100%)",
-  page:           "linear-gradient(135deg, #f0e8d8 0%, #e8dcc8 50%, #e0d0b8 100%)",
-};
-
-// ── Compact wrappers that render the full card icon at a smaller size ──
-//
-// Card icons are 220×120 (landscape ≈11:6). `size` here is the HEIGHT in px;
-// width is derived automatically to preserve aspect.
-
-const ASPECT = 220 / 120;
-
-function scaleToHeight(size: number): React.CSSProperties {
-  return {
-    width: Math.round(size * ASPECT),
-    height: size,
-    display: "inline-block",
-    flexShrink: 0,
-  };
-}
-
-export function TextBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><TextBlockCardIcon /></span>;
-}
-export function ImageBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ImageBlockCardIcon /></span>;
-}
-export function ImageGridBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ImageGridBlockCardIcon /></span>;
-}
-export function VideoBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><VideoBlockCardIcon /></span>;
-}
-export function SpacerBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><SpacerBlockCardIcon /></span>;
-}
-export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ButtonBlockCardIcon /></span>;
-}
-export function BeforeAfterBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><BeforeAfterBlockCardIcon /></span>;
-}
-export function AudioBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><AudioBlockCardIcon /></span>;
-}
-
-// ── Non-block context icons (compact wrappers of the section card icons) ──
-
-export function CoverSectionSettingsIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><CoverSectionCardIcon /></span>;
-}
-
-/** Plain V2 section (row-level) — uses the Empty Section card icon so the
- *  settings panel matches the Add Section modal iconography. */
-export function RowIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><EmptySectionV2CardIcon /></span>;
-}
-
-export function ColumnIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="colGrad" x1="4" y1="4" x2="36" y2="36">
-          <stop offset="0%" stopColor="#6090c8" />
-          <stop offset="100%" stopColor="#4878b8" />
-        </linearGradient>
-        <filter id="colDrop">
-          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
-        </filter>
-      </defs>
-      <rect x="6" y="4" width="10" height="32" rx="3" fill="url(#colGrad)" opacity="0.9" filter="url(#colDrop)" />
-      <rect x="6" y="4" width="10" height="10" rx="3" fill="white" opacity="0.18" />
-      <rect x="20" y="4" width="14" height="32" rx="3" fill="url(#colGrad)" opacity="0.55" filter="url(#colDrop)" />
-      <rect x="20" y="4" width="14" height="10" rx="3" fill="white" opacity="0.12" />
-    </svg>
-  );
-}
-
-export function PageIcon({ size = 28 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
-      <defs>
-        <linearGradient id="pageGrad" x1="8" y1="2" x2="32" y2="38">
-          <stop offset="0%" stopColor="#c8a870" />
-          <stop offset="100%" stopColor="#a88850" />
-        </linearGradient>
-        <filter id="pageDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
-        </filter>
-      </defs>
-      <rect x="8" y="3" width="24" height="34" rx="3" fill="url(#pageGrad)" filter="url(#pageDrop)" />
-      <rect x="8" y="3" width="24" height="10" rx="3" fill="white" opacity="0.2" />
-      <rect x="12" y="17" width="16" height="2" rx="1" fill="white" opacity="0.35" />
-      <rect x="12" y="22" width="12" height="2" rx="1" fill="white" opacity="0.25" />
-      <rect x="12" y="27" width="14" height="2" rx="1" fill="white" opacity="0.2" />
-    </svg>
-  );
-}
-
-// ── Lookup maps ──
-
-export function ProjectGridBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ProjectGridCardIcon /></span>;
-}
-
-export function ProjectCarouselBlockIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ProjectCarouselCardIcon /></span>;
-}
-
-export function ParallaxGroupIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><ParallaxGroupCardIcon /></span>;
-}
-
-export function CustomSectionInstanceIcon({ size = 28 }: { size?: number }) {
-  return <span style={scaleToHeight(size)}><SavedSectionCardIcon /></span>;
-}
-
-export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
-  textBlock: TextBlockIcon,
-  imageBlock: ImageBlockIcon,
-  imageGridBlock: ImageGridBlockIcon,
-  videoBlock: VideoBlockIcon,
-  spacerBlock: SpacerBlockIcon,
-  buttonBlock: ButtonBlockIcon,
-  beforeAfterBlock: BeforeAfterBlockIcon,
-  audioBlock: AudioBlockIcon,
-  projectGridBlock: ProjectGridBlockIcon,
-  projectCarouselBlock: ProjectCarouselBlockIcon,
-  parallaxGroup: ParallaxGroupIcon,
-  coverSection: CoverSectionSettingsIcon,
-  customSectionInstance: CustomSectionInstanceIcon,
-  row: RowIcon,
-  column: ColumnIcon,
-  page: PageIcon,
-};
+"use client";
+
+/**
+ * Shared block visual styles — gradients and SVG icon components.
+ * Used by BlockTypePicker (add block cards) and SettingsPanel (header).
+ *
+ * The compact block/section icons exported here are thin wrappers that render
+ * the full card icons (`BlockCardIcons.tsx` / `SectionCardIcons.tsx`) at a
+ * smaller size. This keeps iconography 100% consistent between the modal
+ * cards and the settings panel header — same visual, just scaled.
+ *
+ * `size` represents the HEIGHT in pixels. Width is derived from the
+ * card icon's 220×120 aspect ratio (≈ height × 1.833).
+ */
+
+import {
+  TextBlockCardIcon,
+  ImageBlockCardIcon,
+  ImageGridBlockCardIcon,
+  VideoBlockCardIcon,
+  SpacerBlockCardIcon,
+  ButtonBlockCardIcon,
+  BeforeAfterBlockCardIcon,
+  AudioBlockCardIcon,
+} from "./BlockCardIcons";
+import {
+  CoverSectionCardIcon,
+  EmptySectionV2CardIcon,
+  MarqueeCardIcon,
+  ParallaxGroupCardIcon,
+  ProjectCarouselCardIcon,
+  ProjectGridCardIcon,
+  SavedSectionCardIcon,
+} from "./SectionCardIcons";
+
+// ── Gradient backgrounds per block type ──
+
+export const BLOCK_GRADIENTS: Record<string, string> = {
+  textBlock:      "linear-gradient(135deg, #c9b8ff 0%, #8eb5ff 50%, #b8d4ff 100%)",
+  imageBlock:     "linear-gradient(135deg, #b8ffb8 0%, #d4ffa8 50%, #f0ffc0 100%)",
+  imageGridBlock: "linear-gradient(135deg, #a8c8ff 0%, #c0d8ff 50%, #d8e8ff 100%)",
+  videoBlock:     "linear-gradient(135deg, #ffb8d4 0%, #ffc8a8 50%, #ffe0b8 100%)",
+  spacerBlock:    "linear-gradient(135deg, #d8d8e8 0%, #e8e8f0 50%, #f0f0f8 100%)",
+  buttonBlock:    "linear-gradient(135deg, #ffb8e0 0%, #b8ffe8 50%, #a8ffd8 100%)",
+  beforeAfterBlock: "linear-gradient(135deg, #d8d8e8 0%, #a8c8ff 50%, #b8ffe0 100%)",
+  audioBlock:     "linear-gradient(135deg, #a8c8ff 0%, #d8c0ff 50%, #e0b8ff 100%)",
+  projectGridBlock: "linear-gradient(135deg, #ffd4a8 0%, #ffe8b8 50%, #fff0c8 100%)",
+  marqueeBlock:   "linear-gradient(135deg, #e0c8ff 0%, #c8b0ff 50%, #b8a0ff 100%)",
+  coverSection:  "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
+  parallaxGroup: "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 50%, #e8d0ff 100%)",
+  customSectionInstance: "linear-gradient(135deg, #d0b8ff 0%, #b8a8f8 50%, #c8b8ff 100%)",
+  // Non-block contexts
+  row:            "linear-gradient(135deg, #e0e0f0 0%, #d0d8e8 50%, #c8d0e0 100%)",
+  column:         "linear-gradient(135deg, #d8e8f8 0%, #c8ddf0 50%, #b8d0e8 100%)",
+  page:           "linear-gradient(135deg, #f0e8d8 0%, #e8dcc8 50%, #e0d0b8 100%)",
+};
+
+// ── Compact wrappers that render the full card icon at a smaller size ──
+//
+// Card icons are 220×120 (landscape ≈11:6). `size` here is the HEIGHT in px;
+// width is derived automatically to preserve aspect.
+
+const ASPECT = 220 / 120;
+
+function scaleToHeight(size: number): React.CSSProperties {
+  return {
+    width: Math.round(size * ASPECT),
+    height: size,
+    display: "inline-block",
+    flexShrink: 0,
+  };
+}
+
+export function TextBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><TextBlockCardIcon /></span>;
+}
+export function ImageBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ImageBlockCardIcon /></span>;
+}
+export function ImageGridBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ImageGridBlockCardIcon /></span>;
+}
+export function VideoBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><VideoBlockCardIcon /></span>;
+}
+export function SpacerBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><SpacerBlockCardIcon /></span>;
+}
+export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ButtonBlockCardIcon /></span>;
+}
+export function BeforeAfterBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><BeforeAfterBlockCardIcon /></span>;
+}
+export function AudioBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><AudioBlockCardIcon /></span>;
+}
+
+// ── Non-block context icons (compact wrappers of the section card icons) ──
+
+export function CoverSectionSettingsIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><CoverSectionCardIcon /></span>;
+}
+
+/** Plain V2 section (row-level) — uses the Empty Section card icon so the
+ *  settings panel matches the Add Section modal iconography. */
+export function RowIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><EmptySectionV2CardIcon /></span>;
+}
+
+export function ColumnIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="colGrad" x1="4" y1="4" x2="36" y2="36">
+          <stop offset="0%" stopColor="#6090c8" />
+          <stop offset="100%" stopColor="#4878b8" />
+        </linearGradient>
+        <filter id="colDrop">
+          <feDropShadow dx="0" dy="1" stdDeviation="1" floodColor="rgba(0,0,0,0.12)" />
+        </filter>
+      </defs>
+      <rect x="6" y="4" width="10" height="32" rx="3" fill="url(#colGrad)" opacity="0.9" filter="url(#colDrop)" />
+      <rect x="6" y="4" width="10" height="10" rx="3" fill="white" opacity="0.18" />
+      <rect x="20" y="4" width="14" height="32" rx="3" fill="url(#colGrad)" opacity="0.55" filter="url(#colDrop)" />
+      <rect x="20" y="4" width="14" height="10" rx="3" fill="white" opacity="0.12" />
+    </svg>
+  );
+}
+
+export function PageIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="pageGrad" x1="8" y1="2" x2="32" y2="38">
+          <stop offset="0%" stopColor="#c8a870" />
+          <stop offset="100%" stopColor="#a88850" />
+        </linearGradient>
+        <filter id="pageDrop">
+          <feDropShadow dx="0" dy="1.5" stdDeviation="1.5" floodColor="rgba(0,0,0,0.15)" />
+        </filter>
+      </defs>
+      <rect x="8" y="3" width="24" height="34" rx="3" fill="url(#pageGrad)" filter="url(#pageDrop)" />
+      <rect x="8" y="3" width="24" height="10" rx="3" fill="white" opacity="0.2" />
+      <rect x="12" y="17" width="16" height="2" rx="1" fill="white" opacity="0.35" />
+      <rect x="12" y="22" width="12" height="2" rx="1" fill="white" opacity="0.25" />
+      <rect x="12" y="27" width="14" height="2" rx="1" fill="white" opacity="0.2" />
+    </svg>
+  );
+}
+
+// ── Lookup maps ──
+
+export function ProjectGridBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ProjectGridCardIcon /></span>;
+}
+
+export function ProjectCarouselBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ProjectCarouselCardIcon /></span>;
+}
+
+export function MarqueeBlockIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><MarqueeCardIcon /></span>;
+}
+
+export function ParallaxGroupIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><ParallaxGroupCardIcon /></span>;
+}
+
+export function CustomSectionInstanceIcon({ size = 28 }: { size?: number }) {
+  return <span style={scaleToHeight(size)}><SavedSectionCardIcon /></span>;
+}
+
+export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
+  textBlock: TextBlockIcon,
+  imageBlock: ImageBlockIcon,
+  imageGridBlock: ImageGridBlockIcon,
+  videoBlock: VideoBlockIcon,
+  spacerBlock: SpacerBlockIcon,
+  buttonBlock: ButtonBlockIcon,
+  beforeAfterBlock: BeforeAfterBlockIcon,
+  audioBlock: AudioBlockIcon,
+  projectGridBlock: ProjectGridBlockIcon,
+  projectCarouselBlock: ProjectCarouselBlockIcon,
+  marqueeBlock: MarqueeBlockIcon,
+  parallaxGroup: ParallaxGroupIcon,
+  coverSection: CoverSectionSettingsIcon,
+  customSectionInstance: CustomSectionInstanceIcon,
+  row: RowIcon,
+  column: ColumnIcon,
+  page: PageIcon,
+};