@morphika/andami 0.1.2 → 0.1.5

package/lib/sanity/queries.ts

@@ -209,7 +209,7 @@ export const publishedProjectSummariesQuery = groq`
 
 // All non-project page slugs (for generateStaticParams on /[slug])
 export const allPageSlugsQuery = groq`
-  *[_type == "page" && page_type != "project" && draft_mode != true].slug.current
+  *[_type == "page" && page_type != "project" && draft_mode != true && defined(slug.current)].slug.current
 `;
 
 // Get a published project page by slug (for public /work/[slug] route)
@@ -231,7 +231,7 @@ export const publishedProjectBySlugQuery = groq`
 
 // All published project slugs (for generateStaticParams on /work/[slug])
 export const allProjectSlugsQuery = groq`
-  *[_type == "page" && page_type == "project" && draft_mode != true].slug.current
+  *[_type == "page" && page_type == "project" && draft_mode != true && defined(slug.current)].slug.current
 `;
 
 // ============================================
@@ -375,7 +375,7 @@ export const siteStylesQuery = groq`
 // ============================================
 
 export const siteSettingsQuery = groq`
-  *[_type == "siteSettings"][0] {
+  *[_id == "siteSettings"][0] {
     nav_items[] {
       _key,
       type,
@@ -398,6 +398,7 @@ export const siteSettingsQuery = groq`
       style_overrides
     },
     nav_design,
+    nav_mobile_design,
     default_title,
     default_description,
     default_og_image,

package/lib/sanity/types.ts

@@ -232,6 +232,9 @@ export interface CoverBlock {
   // Overlay
   overlay?: "none" | "dark" | "light" | "gradient-bottom" | "gradient-top";
   overlay_opacity?: number;
+  /** Custom overlay gradient (Phase 4). JSON-serialized ColorField.
+   *  When set, takes precedence over overlay + overlay_opacity. */
+  overlay_gradient?: string;
   // Layout
   content_align_h?: "left" | "center" | "right";
   content_align_v?: "top" | "center" | "bottom";
@@ -676,7 +679,8 @@ export interface NavItem {
 
 export interface NavDesign {
   logo_text?: string;
-  color?: NavColorVariant;
+  /** Nav text color — legacy NavColorVariant preset OR hex string (e.g. "#d4ff00"). */
+  color?: NavColorVariant | string;
   position?: "fixed" | "sticky" | "static";
   hide_on_scroll?: boolean;
   font_size?: number;
@@ -702,6 +706,31 @@ export interface NavDesign {
   entrance_stagger_delay?: number; // ms between items, default 80
 }
 
+// ============================================
+// Mobile Nav Design — independent mobile menu styles (Session 158)
+// ============================================
+// These styles apply ONLY to the hamburger mobile menu.
+// Page-level nav_color and parallax slide color overrides do NOT
+// affect the mobile menu — it always uses these dedicated values
+// (with fallback to desktop NavDesign where noted).
+
+export interface MobileNavDesign {
+  // ── Overlay (expanded fullscreen menu) ──
+  overlay_bg?: string;          // hex color, default "#0a0a0a" (brand-dark)
+  text_color?: string;          // hex color, empty = inherit from desktop design.color
+  font_size?: number;           // px, default 24
+  text_transform?: "none" | "uppercase" | "lowercase" | "capitalize";
+  items_gap?: number;           // px, default 32
+  items_align?: "left" | "center" | "right";
+
+  // ── Navbar bar (logo + hamburger row, visible before menu opens) ──
+  navbar_bg?: string;           // hex color, empty = transparent
+  navbar_bg_opacity?: number;   // 0–100, default 0
+  hamburger_color?: string;     // hex color, empty = inherit from desktop design.color
+  padding_h?: number;           // px, default 24
+  padding_v?: number;           // px, default 27
+}
+
 // ============================================
 // Storage Provider
 // ============================================
@@ -765,6 +794,7 @@ export interface AssetRegistry {
 export interface SiteSettings {
   nav_items?: NavItem[];
   nav_design?: NavDesign;
+  nav_mobile_design?: MobileNavDesign;
   default_title?: string;
   default_description?: string;
   default_og_image?: string;
@@ -811,6 +841,51 @@ export interface ColorSwatch {
   hex: string;
 }
 
+// ─── Color Field (Phase 2 — gradient-ready) ───
+
+/** A stop in a linear or radial gradient */
+export interface GradientStop {
+  color: string; // hex #RRGGBB
+  alpha: number; // 0-1
+  position: number; // 0-100 (%)
+}
+
+/** A point in a mesh gradient */
+export interface MeshPoint {
+  color: string; // hex #RRGGBB
+  x: number; // 0-100 (%)
+  y: number; // 0-100 (%)
+}
+
+export interface LinearGradient {
+  type: "linear";
+  stops: GradientStop[]; // min 2
+  angle: number; // 0-360
+}
+
+export interface RadialGradient {
+  type: "radial";
+  stops: GradientStop[]; // min 2
+  position: { x: number; y: number }; // center, 0-100
+  shape: "circle" | "ellipse";
+}
+
+export interface MeshGradient {
+  type: "mesh";
+  points: MeshPoint[]; // min 2
+  background: string; // hex
+}
+
+/** Gradient value — only for fields that support gradients */
+export type GradientValue = LinearGradient | RadialGradient | MeshGradient;
+
+/**
+ * Color field value in Sanity.
+ * - string: solid hex color (backward compatible with existing data)
+ * - GradientValue: gradient (Phase 3 UI, renderers ready now)
+ */
+export type ColorField = string | GradientValue;
+
 export interface ColorPalette {
   swatches: ColorSwatch[];
   // Legacy fields (backward compat, may be empty)

package/lib/setup/detect.ts

@@ -103,7 +103,7 @@ export async function isSetupMarkedComplete(): Promise<boolean> {
 
   try {
     const result = await client.fetch<{ complete: boolean }>(
-      `*[_type == "siteSettings"][0]{ "complete": setup_complete == true }`
+      `*[_id == "siteSettings"][0]{ "complete": setup_complete == true }`
     );
     return !!result?.complete;
   } catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",
@@ -46,7 +46,6 @@
   "exports": {
     "./config": "./lib/config/index.ts",
     "./config/types": "./lib/config/types.ts",
-
     "./components/blocks": "./components/blocks/index.ts",
     "./components/blocks/*": "./components/blocks/*.tsx",
     "./components/builder": "./components/builder/index.ts",
@@ -54,18 +53,24 @@
     "./components/builder/editors/*": "./components/builder/editors/*.tsx",
     "./components/builder/settings-panel": "./components/builder/settings-panel/index.ts",
     "./components/builder/settings-panel/*": "./components/builder/settings-panel/*.tsx",
+    "./components/builder/settings-panel/responsive-helpers": "./components/builder/settings-panel/responsive-helpers.ts",
     "./components/builder/asset-browser": "./components/builder/asset-browser/index.ts",
     "./components/builder/asset-browser/*": "./components/builder/asset-browser/*.tsx",
+    "./components/builder/asset-browser/helpers": "./components/builder/asset-browser/helpers.ts",
+    "./components/builder/asset-browser/types": "./components/builder/asset-browser/types.ts",
+    "./components/builder/asset-browser/useAssetBrowser": "./components/builder/asset-browser/useAssetBrowser.ts",
+    "./components/builder/asset-browser/useR2DragDrop": "./components/builder/asset-browser/useR2DragDrop.ts",
+    "./components/builder/asset-browser/useR2Operations": "./components/builder/asset-browser/useR2Operations.ts",
     "./components/builder/live-preview": "./components/builder/live-preview/index.ts",
     "./components/builder/live-preview/*": "./components/builder/live-preview/*.tsx",
     "./components/admin": "./components/admin/index.ts",
     "./components/admin/*": "./components/admin/*.tsx",
     "./components/admin/nav-builder": "./components/admin/nav-builder/index.ts",
     "./components/admin/nav-builder/*": "./components/admin/nav-builder/*.tsx",
+    "./components/admin/nav-builder/nav-builder-utils": "./components/admin/nav-builder/nav-builder-utils.ts",
     "./components/admin/styles": "./components/admin/styles/index.ts",
     "./components/admin/styles/*": "./components/admin/styles/*.tsx",
     "./components/ui/*": "./components/ui/*.tsx",
-
     "./lib/builder": "./lib/builder/index.ts",
     "./lib/builder/*": "./lib/builder/*.ts",
     "./lib/sanity/client": "./lib/sanity/client.ts",
@@ -94,7 +99,6 @@
     "./lib/format-utils": "./lib/format-utils.ts",
     "./lib/utils": "./lib/utils.ts",
     "./lib/asset-retry": "./lib/asset-retry.ts",
-
     "./sanity/schemas": "./sanity/schemas/index.ts",
     "./sanity/schemas/*": "./sanity/schemas/*.ts",
     "./sanity/schemas/blocks": "./sanity/schemas/blocks/index.ts",
@@ -102,12 +106,10 @@
     "./sanity/schemas/objects/*": "./sanity/schemas/objects/*.ts",
     "./sanity/compose": "./sanity/compose.ts",
     "./sanity/config": "./sanity/sanity.config.ts",
-
     "./styles/base.css": "./styles/base.css",
     "./styles/animations.css": "./styles/animations.css",
     "./styles/admin.css": "./styles/admin.css",
     "./styles/globals.css": "./styles/globals.css",
-
     "./site": "./site/index.ts",
     "./site/page": "./site/page.ts",
     "./site/work": "./site/work.ts",
@@ -116,7 +118,6 @@
     "./site/error": "./site/error.ts",
     "./site/robots": "./site/robots.ts",
     "./site/sitemap": "./site/sitemap.ts",
-
     "./admin": "./admin/index.ts",
     "./admin/login": "./admin/login.ts",
     "./admin/pages": "./admin/pages.ts",
@@ -130,14 +131,10 @@
     "./admin/database": "./admin/database.ts",
     "./admin/settings": "./admin/settings.ts",
     "./admin/setup": "./admin/setup.ts",
-
     "./components/admin/setup-wizard": "./components/admin/setup-wizard/index.ts",
     "./components/admin/setup-wizard/*": "./components/admin/setup-wizard/*.tsx",
-
     "./lib/setup/detect": "./lib/setup/detect.ts",
-
     "./studio": "./studio/index.ts",
-
     "./api/admin/auth": "./app/api/admin/auth/route.ts",
     "./api/admin/pages": "./app/api/admin/pages/route.ts",
     "./api/admin/pages/slug": "./app/api/admin/pages/[slug]/route.ts",
@@ -183,7 +180,6 @@
     "@aws-sdk/client-s3": "^3.1021.0",
     "@aws-sdk/s3-request-presigner": "^3.1021.0",
     "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "next-sanity": "^12.1.5",

package/sanity/schemas/siteSettings.ts

@@ -213,6 +213,40 @@ export default defineType({
       ],
     }),
 
+    // === MOBILE NAV DESIGN (Session 158) ===
+    defineField({
+      name: "nav_mobile_design",
+      title: "Mobile Navigation Design",
+      type: "object",
+      group: "nav_design",
+      description: "Independent styles for the mobile hamburger menu",
+      fields: [
+        defineField({ name: "overlay_bg", title: "Overlay Background", type: "string", description: "Hex color for fullscreen menu background" }),
+        defineField({ name: "text_color", title: "Text Color", type: "string", description: "Hex color, empty = inherit from desktop" }),
+        defineField({ name: "font_size", title: "Font Size (px)", type: "number", initialValue: 24 }),
+        defineField({
+          name: "text_transform",
+          title: "Text Transform",
+          type: "string",
+          options: { list: [{ title: "None", value: "none" }, { title: "Uppercase", value: "uppercase" }, { title: "Lowercase", value: "lowercase" }, { title: "Capitalize", value: "capitalize" }] },
+          initialValue: "uppercase",
+        }),
+        defineField({ name: "items_gap", title: "Items Gap (px)", type: "number", initialValue: 32 }),
+        defineField({
+          name: "items_align",
+          title: "Items Align",
+          type: "string",
+          options: { list: [{ title: "Left", value: "left" }, { title: "Center", value: "center" }, { title: "Right", value: "right" }] },
+          initialValue: "center",
+        }),
+        defineField({ name: "navbar_bg", title: "Navbar Bar Background", type: "string", description: "Hex color for the logo+hamburger bar" }),
+        defineField({ name: "navbar_bg_opacity", title: "Navbar Bar BG Opacity (%)", type: "number", initialValue: 0 }),
+        defineField({ name: "hamburger_color", title: "Hamburger Icon Color", type: "string", description: "Hex color, empty = inherit from desktop" }),
+        defineField({ name: "padding_h", title: "Horizontal Padding (px)", type: "number", initialValue: 24 }),
+        defineField({ name: "padding_v", title: "Vertical Padding (px)", type: "number", initialValue: 27 }),
+      ],
+    }),
+
     // === METADATA ===
     defineField({ name: "default_title", title: "Default Title", type: "string", group: "meta", initialValue: _cfg.defaults.metaTitle }),
     defineField({ name: "default_description", title: "Default Description", type: "text", rows: 3, group: "meta" }),

package/styles/base.css

@@ -1,17 +1,14 @@
-@import "tailwindcss";
-
-/* ============================================
+/* ============================================
    Brand Design Tokens
    Values come from site.config.ts palette.
    Tailwind generates classes: bg-brand-*, text-brand-*, etc.
+
+   NOTE: @import "tailwindcss" is NOT included here.
+   Each instance must add it in their own globals.css BEFORE
+   importing this file.
    ============================================ */
 
 @theme inline {
-  /* Brand Colors — semantic tokens.
-     Initial values are neutral placeholders for Tailwind class generation.
-     Actual colors are injected at runtime by StylesProvider from the admin
-     palette, with site.config.ts palette as fallback.
-     See lib/styles/provider.tsx → generateBrandTokens(). */
   --color-brand-accent: var(--brand-accent, #888888);
   --color-brand-accent-alt: var(--brand-accent-alt, #888888);
   --color-brand-secondary: var(--brand-secondary, #888888);
@@ -21,11 +18,9 @@
   --color-brand-muted: var(--brand-muted, #888888);
   --color-brand-dark: var(--brand-dark, #111111);
 
-  /* Fonts — placeholders, overridden by StylesProvider */
   --font-mono: var(--brand-font-mono, ui-monospace, monospace);
   --font-sans: "Inter", system-ui, sans-serif;
 
-  /* Breakpoints — matching original Semplice grid */
   --breakpoint-xs: 0px;
   --breakpoint-sm: 544px;
   --breakpoint-md: 768px;
@@ -33,20 +28,6 @@
   --breakpoint-xl: 1170px;
 }
 
-/* ============================================
-   @font-face — Instance Default Font
-   No hardcoded @font-face here. The default/fallback font is loaded
-   by StylesProvider at runtime based on site.config.ts typography
-   settings and admin-uploaded fonts. For the initial render before
-   JS loads, the --font-mono stack in @theme provides the fallback.
-   ============================================ */
-
-/* ============================================
-   Admin UI Tokens
-   Used across all builder/admin components.
-   JS constants in lib/builder/constants.ts mirror these.
-   ============================================ */
-
 :root {
   --admin-accent: #076bff;
   --admin-accent-dark: #0559d4;
@@ -56,10 +37,6 @@
   --admin-success: #22c55e;
 }
 
-/* ============================================
-   Base styles
-   ============================================ */
-
 html {
   scroll-behavior: smooth;
   overflow-x: clip;
@@ -69,24 +46,17 @@ html {
 body {
   background: var(--color-brand-dark);
   color: var(--color-brand-text);
-  font-family: var(--font-mono);
+  font-family: var(--font-sans);
   overflow-x: clip;
   width: 100%;
-  /* Smooth body bg transition when navigating between pages with different
-     backgrounds. PageBackground component syncs this via inline style. */
   transition: background-color 300ms ease;
 }
 
-/* Public site wrapper:
-   - overflow-x:clip prevents horizontal scroll (iOS WebKit fix, stricter than hidden)
-   - max-width:100vw constrains all children to viewport width */
 [data-site] {
   max-width: 100vw;
   overflow-x: clip;
 }
 
-/* Custom cursor: hide native cursor when enabled via data attribute.
-   Controlled by site.config.ts features.customCursor → site layout. */
 [data-custom-cursor] {
   cursor: none;
 }
@@ -96,37 +66,23 @@ body {
   cursor: none;
 }
 
-/* Restore cursor inside Sanity Studio */
 [data-sanity-studio], [data-sanity-studio] *, [data-ui], [data-ui] * {
   cursor: auto !important;
 }
 
-/* Selection color */
 ::selection {
   background: var(--color-brand-primary);
   color: var(--color-brand-text);
 }
 
-/* ============================================
-   Failed Asset Placeholder
-   Replaces the browser's broken image icon with a subtle,
-   clickable placeholder that invites retry. Applied automatically
-   by lib/asset-retry.ts after exhausting retries.
-   ============================================ */
-
 img[data-asset-failed] {
-  /* Hide the browser's broken image icon */
   color: transparent;
-  /* Show a neutral placeholder background */
   background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
-  /* Ensure it has visible dimensions even without intrinsic size */
   min-height: 60px;
   min-width: 60px;
-  /* Position the "tap to retry" pseudo-element */
   position: relative;
 }
 
-/* "Tap to retry" overlay text — uses outline trick for pseudo on img */
 img[data-asset-failed]::after {
   content: "Tap to retry";
   position: absolute;
@@ -135,7 +91,7 @@ img[data-asset-failed]::after {
   align-items: center;
   justify-content: center;
   font-size: 11px;
-  font-family: var(--font-mono);
+  font-family: var(--font-sans);
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.7);

package/app/globals.css

@@ -1,7 +0,0 @@
-/* Morphika instance — imports all core styles.
-   This is the monolith entry point; equivalent to:
-     @import "@morphika/andami/styles/globals.css";
-   but uses relative paths since we're inside the monorepo. */
-@import "../packages/core/styles/base.css";
-@import "../packages/core/styles/animations.css";
-@import "../packages/core/styles/admin.css";