@morphika/andami 0.5.0 → 0.5.2

package/lib/builder/constants.ts

@@ -1,111 +1,111 @@
-/**
- * Shared constants for the builder and public site renderers.
- * Consolidates duplicated maps and utility functions.
- */
-
-
-// ============================================
-// Responsive Breakpoints
-// ============================================
-// Single source of truth for all media query breakpoints.
-// Import these instead of hardcoding numeric values.
-
-export const BREAKPOINTS = {
-  /** Phone max-width breakpoint (640px) */
-  phone: 640,
-  /** Scroll animation disable breakpoint (768px) */
-  mobileAnimation: 768,
-  /** Tablet max-width breakpoint (1024px) */
-  tablet: 1024,
-} as const;
-
-// ============================================
-// Default Grid Width
-// ============================================
-// The default page grid max-width in pixels.
-
-export const DEFAULT_GRID_WIDTH = "1445";
-export const DEFAULT_GRID_WIDTH_PX = `${DEFAULT_GRID_WIDTH}px`;
-
-// ============================================
-// Default Page Colors
-// ============================================
-// Default background and text colors for new pages.
-
-export const DEFAULT_BG_COLOR = "#ffffff";
-export const DEFAULT_TEXT_COLOR = "#000000";
-
-// ============================================
-// Admin UI Colors
-// ============================================
-// Accent colors used throughout the admin/builder interface.
-// These are also available as CSS custom properties:
-//   --admin-accent, --admin-accent-dark
-
-export const ADMIN_ACCENT = "#076bff";
-export const ADMIN_ACCENT_DARK = "#0559d4";
-export const ADMIN_ACCENT_SHADOW = "rgba(7,107,255,0.06)";
-export const ADMIN_ERROR = "#ed3821";
-export const ADMIN_ERROR_DARK = "#d42f1a";
-
-// ============================================
-// Builder Semantic Color System
-// ============================================
-// Each UI entity in the builder has a dedicated color to provide
-// visual differentiation at a glance. This is a design rule that
-// MUST be followed across all builder components.
-//
-//   BLUE    (#4794e2) — Columns: outlines, resize handles, drag grip,
-//                        column selection/hover chrome.
-//   BLUE    (#4794e2) — Blocks: "+ Add Block" buttons, block toolbar
-//                        pill, block selection ring, block-level actions.
-//                        (Same hue as columns — a future pass may split
-//                        these into distinct hues if the shared blue is
-//                        causing ambiguity.)
-//   VIOLET  (#7500d5) — Sections: side pill, cover/parallax accent,
-//                        section outlines, hover/selection chrome.
-//                        Also used for Custom Sections card chrome.
-//
-// When adding new builder UI, pick the color that matches the entity
-// being represented, not the action being performed. For example, a
-// delete button on a column is BLUE (it belongs to the column chrome),
-// while the delete inside a block toolbar is BLUE too (inside the block
-// pill, on hover it flashes red as a destructive cue).
-
-export const BUILDER_BLUE = "#4794e2";       // Columns (softened — was #076bff)
-export const BUILDER_BLOCK = "#4794e2";      // Blocks — same hue as columns for now
-export const BUILDER_VIOLET = "#7500d5";     // Sections (incl. Custom)
-export const BUILDER_GREEN = "#22c55e";      // Success / confirmation cues (e.g. R2 asset check)
-
-/**
- * @deprecated Use `BUILDER_BLOCK` instead. The legacy name survived multiple
- * colour migrations (orange → emerald → blue) and no longer reflects reality.
- * Kept as an alias so third-party code doesn't break at the import boundary.
- */
-export const BUILDER_ORANGE = BUILDER_BLOCK;
-
-/**
- * Padding map for Row settings (in pixels)
- * Used by builder (SortableRow, ReadOnlyFrame) and public site (RowRenderer)
- */
-export const PADDING_MAP: Record<string, string> = {
-  none: "0",
-  small: "16px",
-  medium: "32px",
-  large: "64px",
-  xlarge: "96px",
-};
-
-/**
- * Padding map for Row settings (in Tailwind classes)
- * Used only by public site (RowRenderer) when using class-based padding
- */
-export const PADDING_CLASSES_MAP: Record<string, string> = {
-  none: "py-0",
-  small: "py-4",
-  medium: "py-8",
-  large: "py-16",
-  xlarge: "py-24",
-};
-
-
+/**
+ * Shared constants for the builder and public site renderers.
+ * Consolidates duplicated maps and utility functions.
+ */
+
+
+// ============================================
+// Responsive Breakpoints
+// ============================================
+// Single source of truth for all media query breakpoints.
+// Import these instead of hardcoding numeric values.
+
+export const BREAKPOINTS = {
+  /** Phone max-width breakpoint (640px) */
+  phone: 640,
+  /** Scroll animation disable breakpoint (768px) */
+  mobileAnimation: 768,
+  /** Tablet max-width breakpoint (1024px) */
+  tablet: 1024,
+} as const;
+
+// ============================================
+// Default Grid Width
+// ============================================
+// The default page grid max-width in pixels.
+
+export const DEFAULT_GRID_WIDTH = "1445";
+export const DEFAULT_GRID_WIDTH_PX = `${DEFAULT_GRID_WIDTH}px`;
+
+// ============================================
+// Default Page Colors
+// ============================================
+// Default background and text colors for new pages.
+
+export const DEFAULT_BG_COLOR = "#ffffff";
+export const DEFAULT_TEXT_COLOR = "#000000";
+
+// ============================================
+// Admin UI Colors
+// ============================================
+// Accent colors used throughout the admin/builder interface.
+// These are also available as CSS custom properties:
+//   --admin-accent, --admin-accent-dark
+
+export const ADMIN_ACCENT = "#3580f9";
+export const ADMIN_ACCENT_DARK = "#2d6dd4";
+export const ADMIN_ACCENT_SHADOW = "rgba(53,128,249,0.06)";
+export const ADMIN_ERROR = "#ed3821";
+export const ADMIN_ERROR_DARK = "#d42f1a";
+
+// ============================================
+// Builder Semantic Color System
+// ============================================
+// Each UI entity in the builder has a dedicated color to provide
+// visual differentiation at a glance. This is a design rule that
+// MUST be followed across all builder components.
+//
+//   BLUE    (#3580f9) — Columns: outlines, resize handles, drag grip,
+//                        column selection/hover chrome.
+//   BLUE    (#3580f9) — Blocks: "+ Add Block" buttons, block toolbar
+//                        pill, block selection ring, block-level actions.
+//                        (Same hue as columns — a future pass may split
+//                        these into distinct hues if the shared blue is
+//                        causing ambiguity.)
+//   VIOLET  (#7500d5) — Sections: side pill, cover/parallax accent,
+//                        section outlines, hover/selection chrome.
+//                        Also used for Custom Sections card chrome.
+//
+// When adding new builder UI, pick the color that matches the entity
+// being represented, not the action being performed. For example, a
+// delete button on a column is BLUE (it belongs to the column chrome),
+// while the delete inside a block toolbar is BLUE too (inside the block
+// pill, on hover it flashes red as a destructive cue).
+
+export const BUILDER_BLUE = "#3580f9";       // Columns (unified strong blue)
+export const BUILDER_BLOCK = "#3580f9";      // Blocks — same hue as columns
+export const BUILDER_VIOLET = "#7500d5";     // Sections (incl. Custom)
+export const BUILDER_GREEN = "#22c55e";      // Success / confirmation cues (e.g. R2 asset check)
+
+/**
+ * @deprecated Use `BUILDER_BLOCK` instead. The legacy name survived multiple
+ * colour migrations (orange → emerald → blue) and no longer reflects reality.
+ * Kept as an alias so third-party code doesn't break at the import boundary.
+ */
+export const BUILDER_ORANGE = BUILDER_BLOCK;
+
+/**
+ * Padding map for Row settings (in pixels)
+ * Used by builder (SortableRow, ReadOnlyFrame) and public site (RowRenderer)
+ */
+export const PADDING_MAP: Record<string, string> = {
+  none: "0",
+  small: "16px",
+  medium: "32px",
+  large: "64px",
+  xlarge: "96px",
+};
+
+/**
+ * Padding map for Row settings (in Tailwind classes)
+ * Used only by public site (RowRenderer) when using class-based padding
+ */
+export const PADDING_CLASSES_MAP: Record<string, string> = {
+  none: "py-0",
+  small: "py-4",
+  medium: "py-8",
+  large: "py-16",
+  xlarge: "py-24",
+};
+
+

package/lib/builder/store-sections.ts

@@ -1,4 +1,4 @@
-import type { BuilderStore, BuilderState, BlockType, SectionSliceActions } from "./types";
+import type { BuilderStore, BuilderState, BlockType, SectionSliceActions, SectionBlockType } from "./types";
 import type {
   ContentBlock,
   ContentItem,
@@ -59,7 +59,7 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
      * Existing V1 pages still work — V1 update/delete actions are kept until
      * the data migration in Session 165.
      */
-    addSection: (blockType: "projectGridBlock" | "projectCarouselBlock", afterRowKey?: string | null): void => {
+    addSection: (blockType: SectionBlockType, afterRowKey?: string | null): void => {
       get()._pushSnapshot();
       const block = createDefaultBlock(blockType);
       const gridColumns = 12;