@dreamtree-org/landing-kit 0.4.0 → 0.6.0

package/index.d.ts

@@ -295,3 +295,32 @@ export declare const LandingProvider: import('react').Provider<{ brand: Brand |
 export declare function useLanding(): { brand: Brand | null; linkComponent: ComponentType<any> | null; onBookDemo: ((t: HTMLElement) => void) | null; home: boolean };
 /** The "Book a demo" island for an un-hydrated page: React mounts on first open. */
 export declare function createDemoIsland(props: Omit<DemoDialogProps, 'onClose'> | (() => Omit<DemoDialogProps, 'onClose'>)): { openDemo(trigger?: HTMLElement | null): void; close(): void };
+
+// ---------------------------------------------------------------------------
+// Tenant pages: a store's own landing page as data. Validate and build pages
+// with `@dreamtree-org/landing-kit/schema`; render them with TenantPage.
+import type { PageDoc, Theme, MediaRef, SectionType, ValidationError, Palette, FontPair } from './schema';
+
+export interface TenantPageProps {
+  /** A page document (validated again here; invalid sections are dropped). */
+  page: PageDoc | unknown;
+  theme?: Partial<Theme> | null;
+  /** App-rendered content for slot sections: a node or a function of the section's props. */
+  slots?: Partial<Record<'featured' | 'categories', ReactNode | ((props: Record<string, unknown>) => ReactNode)>>;
+  /** Uploaded image → URL ('wide' | 'narrow' | 'logo' | 'gallery'). */
+  resolveMedia?: (ref: MediaRef, variant: string) => string | null;
+  linkComponent?: ComponentType<any> | null;
+  /** Newsletter sign-up handler; reject with an Error to show its message. */
+  onSubscribe?: ((data: { email: string; consent: boolean; section: string }) => Promise<unknown>) | null;
+  storeName?: string;
+  className?: string;
+  /** 1 (default): the first section's heading is the page's h1. */
+  headingStart?: 1 | 2;
+}
+export function TenantPage(props: TenantPageProps): JSX.Element;
+export const TENANT_BLOCKS: Record<SectionType, (props: any) => JSX.Element | null>;
+export function HeroSlider(props: Record<string, unknown>): JSX.Element | null;
+export function NamedIcon(props: { name: string; size?: number; className?: string }): JSX.Element | null;
+export function validatePage(doc: unknown): { ok: boolean; errors: ValidationError[]; page: PageDoc };
+export function validateTheme(theme: unknown): { ok: boolean; errors: ValidationError[]; warnings: ValidationError[]; theme: Theme };
+export function themeVars(theme: unknown): { theme: Theme; font: FontPair; palette: { primary: Palette; accent: Palette }; style: Record<string, string> };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/landing-kit",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "The shared marketing site and auth frame (AuthShell + brands) for every Dreamtree product: content-driven landing pages, login/signup shell, Express routes, prerender and SEO files.",
   "type": "module",
   "license": "MIT",
@@ -36,6 +36,11 @@
       "import": "./dist/seo.js",
       "require": "./dist/seo.cjs"
     },
+    "./schema": {
+      "types": "./schema.d.ts",
+      "import": "./dist/schema.js",
+      "require": "./dist/schema.cjs"
+    },
     "./demo-server": {
       "types": "./demo-server.d.ts",
       "import": "./dist/demo-server.js",
@@ -60,6 +65,7 @@
     "auth.d.ts",
     "server.d.ts",
     "seo.d.ts",
+    "schema.d.ts",
     "demo-server.d.ts",
     "enhance.d.ts",
     "README.md",
@@ -70,7 +76,8 @@
     "build": "node build.mjs",
     "test": "node build.mjs && node --test test/*.test.mjs",
     "prepublishOnly": "npm test",
-    "test:viewports": "node build.mjs && node test/viewports.mjs"
+    "test:viewports": "node build.mjs && node test/viewports.mjs",
+    "test:tenant-viewports": "node build.mjs && node test/tenant-viewports.mjs"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -94,7 +101,8 @@
     "llms.txt",
     "express",
     "prerender",
-    "dreamtree"
+    "dreamtree",
+    "multi-tenant"
   ],
   "publishConfig": {
     "access": "public"

package/schema.d.ts

@@ -0,0 +1,96 @@
+// @dreamtree-org/landing-kit/schema — tenant landing pages as data (no React, no DOM).
+
+export type FieldKind = 'text' | 'textarea' | 'url' | 'image' | 'icon' | 'select' | 'bool' | 'list' | 'richtext';
+export interface FieldOption { value: string; label: string }
+export interface FieldDef {
+  key: string;
+  kind: FieldKind;
+  label: string;
+  /** Characters for text kinds; items for lists. */
+  max?: number;
+  /** Minimum items (lists). */
+  min?: number;
+  required?: boolean;
+  options?: FieldOption[];
+  /** Fields of each list item. */
+  of?: FieldDef[];
+  /** Which item field names a list row in a builder. */
+  itemLabel?: string;
+  default?: unknown;
+}
+export interface SectionTypeDef {
+  label: string;
+  description: string;
+  /** Rendered by the app through TenantPage `slots[type]` (featured, categories). */
+  slot?: boolean;
+  fields: FieldDef[];
+}
+export type SectionType =
+  | 'hero_slider' | 'featured' | 'categories' | 'promo_banner' | 'trust_badges' | 'cta_cards' | 'testimonials'
+  | 'faq' | 'rich_text' | 'usp_strip' | 'brand_strip' | 'newsletter' | 'gallery';
+export type IconName =
+  | 'shield-check' | 'badge-check' | 'truck' | 'wrench' | 'refresh' | 'battery' | 'cpu' | 'laptop' | 'star' | 'headset'
+  | 'rupee' | 'award' | 'clock' | 'map-pin' | 'phone' | 'check' | 'sparkles' | 'tag' | 'gift' | 'heart';
+/** An uploaded image: the app resolves media_id to a URL. */
+export interface MediaRef { media_id: string | number; alt?: string }
+
+export interface PageSection { id: string; type: SectionType; enabled: boolean; props: Record<string, unknown> }
+export interface PageDoc { version: 1; sections: PageSection[] }
+export interface ValidationError { path: string; message: string }
+
+export const SECTION_TYPES: Record<SectionType, SectionTypeDef>;
+export const SECTION_TYPE_KEYS: SectionType[];
+export const ICON_NAMES: IconName[];
+export const PAGE_VERSION: 1;
+export const MAX_SECTIONS: number;
+export function sectionDefaults(type: SectionType): Record<string, unknown>;
+export function newSectionId(type: SectionType): string;
+export function newSection(type: SectionType): PageSection;
+
+/** Normalise a page (defaults filled, unknown props dropped, rich text sanitised) and report every problem by path. */
+export function validatePage(doc: unknown): { ok: boolean; errors: ValidationError[]; page: PageDoc };
+/** Hero with the store's name and tagline, then the featured and category slots. */
+export function defaultPage(store?: { name?: string; tagline?: string }): PageDoc;
+
+export type FontPairKey = 'system' | 'inter' | 'poppins' | 'dmsans' | 'nunito' | 'serif';
+export type RadiusKey = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type ThemeMode = 'light' | 'dark' | 'auto';
+export type PresetKey = 'classic' | 'forest' | 'sunset' | 'midnight' | 'slate' | 'berry';
+export interface Theme {
+  preset: PresetKey | 'custom';
+  primary: string;
+  accent: string;
+  font: FontPairKey;
+  radius: RadiusKey;
+  mode: ThemeMode;
+  logo: MediaRef | null;
+  favicon: MediaRef | null;
+}
+export interface FontPair { label: string; heading: string; body: string; /** Stylesheet to load, or null for system fonts. */ href: string | null }
+export type Palette = Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950, string>;
+
+export const THEME_PRESETS: Record<PresetKey, { label: string; primary: string; accent: string; font: FontPairKey; radius: RadiusKey; mode: ThemeMode }>;
+export const FONT_PAIRS: Record<FontPairKey, FontPair>;
+export const RADII: Record<RadiusKey, [string, string]>;
+export const MODES: ThemeMode[];
+export const DEFAULT_THEME: Theme;
+/** Errors for malformed values; warnings for readability (contrast) the builder should show. */
+export function validateTheme(theme: unknown): { ok: boolean; errors: ValidationError[]; warnings: ValidationError[]; theme: Theme };
+/** CSS variables for a .dt-landing root plus the generated palettes (to map onto an app's own tokens). */
+export function themeVars(theme: unknown): { theme: Theme; font: FontPair; palette: { primary: Palette; accent: Palette }; style: Record<string, string> };
+
+/** Allowlist sanitiser (p, br, h2–h4, strong, b, em, i, u, ul, ol, li, a[href], blockquote). */
+export function sanitizeRichText(html: unknown, opts?: { maxLength?: number }): string;
+/** http(s), mailto:, tel:, /path or #fragment — otherwise null. */
+export function safeHref(href: unknown): string | null;
+
+/** 50…950 from one colour; the colour itself is step 600. */
+export function brandPalette(hex: string): Palette;
+export function contrastRatio(a: string, b: string): number;
+/** '#ffffff' or '#101828', whichever reads better on `hex`. */
+export function readableOn(hex: string): string;
+export function luminance(hex: string): number;
+export function hexToOklch(hex: string): { l: number; c: number; h: number };
+export function oklchToHex(c: { l: number; c: number; h: number }): string;
+export function isHex(v: unknown): boolean;
+export const PALETTE_STEPS: number[];

package/styles.css

@@ -876,3 +876,125 @@ html:has(.dt-landing) { scroll-behavior: smooth; scroll-padding-top: calc(var(--
 /* Shared helpers for form content inside the card */
 .dt-auth-link { color: var(--dt-brand); font-weight: 500; font-size: 0.875rem; text-decoration: none; }
 .dt-auth-link:hover { text-decoration: underline; }
+
+/* ================================================================== *
+ * Tenant pages (TenantPage): a store's own landing page from data.
+ * Theme variables come from themeVars(): --dt-brand, --dt-brand-accent,
+ * --dt-brand-contrast, --dt-lp-font, --dt-lp-font-heading, --dt-lp-radius.
+ * ================================================================== */
+.dt-lp-tenant { min-height: 0; --dt-brand-contrast: #fff; --dt-brand-accent-contrast: #fff; --dt-lp-font-heading: var(--dt-lp-font); }
+.dt-lp-tenant :where(h1, h2, h3, .dt-lp-h2, .dt-lp-h3) { font-family: var(--dt-lp-font-heading); }
+.dt-lp-tenant .dt-lp-btn--primary { color: var(--dt-brand-contrast); }
+.dt-lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+
+/* Hero slider */
+.dt-lp-hero-slider { position: relative; overflow: hidden; background: var(--dt-brand-panel); color: #fff; }
+.dt-lp-slides { position: relative; display: grid; }
+.dt-lp-slide { grid-area: 1 / 1; position: relative; display: flex; align-items: center; min-height: 22rem; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; background: linear-gradient(120deg, var(--dt-brand-panel), var(--dt-brand)); }
+.dt-lp-slide[data-active] { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
+.dt-lp-hero-slider--compact .dt-lp-slide { min-height: 16rem; }
+.dt-lp-hero-slider--tall .dt-lp-slide { min-height: 30rem; }
+@media (min-width: 768px) {
+  .dt-lp-slide { min-height: 26rem; }
+  .dt-lp-hero-slider--compact .dt-lp-slide { min-height: 18rem; }
+  .dt-lp-hero-slider--tall .dt-lp-slide { min-height: 36rem; }
+}
+.dt-lp-slide-media, .dt-lp-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
+.dt-lp-slide-media img { object-fit: cover; max-width: none; }
+.dt-lp-slide--image::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
+.dt-lp-slide--overlay-light::after { background: linear-gradient(90deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.15)); }
+.dt-lp-slide--overlay-strong::after { background: rgb(0 0 0 / 0.6); }
+.dt-lp-slide--center.dt-lp-slide--overlay-light::after { background: rgb(0 0 0 / 0.4); }
+.dt-lp-slide-body { position: relative; z-index: 1; width: 100%; padding-top: 3rem; padding-bottom: 4.5rem; }
+.dt-lp-slide-copy { max-width: 38rem; display: grid; gap: 1rem; justify-items: start; }
+.dt-lp-slide--center .dt-lp-slide-copy { margin: 0 auto; text-align: center; justify-items: center; }
+.dt-lp-slide-eyebrow { color: rgb(255 255 255 / 0.85); }
+.dt-lp-slide-heading { font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
+.dt-lp-slide-text { font-size: 1.0625rem; color: rgb(255 255 255 / 0.9); max-width: 34rem; }
+.dt-lp-slide-cta { margin-top: 0.5rem; }
+.dt-lp-slider-controls { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
+.dt-lp-slider-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.5); background: rgb(0 0 0 / 0.35); color: #fff; cursor: pointer; }
+.dt-lp-slider-btn:hover { background: rgb(0 0 0 / 0.55); }
+.dt-lp-slider-btn:focus-visible, .dt-lp-slider-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
+.dt-lp-slider-dots { display: flex; gap: 0.25rem; }
+.dt-lp-slider-dot { width: 1.75rem; height: 2.75rem; border: 0; background: transparent; cursor: pointer; position: relative; padding: 0; }
+.dt-lp-slider-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 0.625rem; height: 0.625rem; border-radius: 999px; transform: translate(-50%, -50%); background: rgb(255 255 255 / 0.5); }
+.dt-lp-slider-dot[aria-current='true']::before { background: #fff; width: 1.25rem; }
+@media (prefers-reduced-motion: reduce) {
+  .dt-lp-slide, .dt-lp-slide[data-active] { transition: none; }
+}
+
+/* Grids and cards for tenant sections */
+.dt-lp-tgrid { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: 1fr; }
+.dt-lp-intro + .dt-lp-tgrid { margin-top: 2rem; }
+.dt-lp-tgrid:first-child { margin-top: 0; }
+@media (min-width: 640px) { .dt-lp-tgrid--2, .dt-lp-tgrid--3, .dt-lp-tgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 1024px) { .dt-lp-tgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dt-lp-tgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+.dt-lp-tcard { height: 100%; }
+.dt-lp-ctacard { display: flex; gap: 1rem; align-items: flex-start; height: 100%; transition: border-color 0.15s, box-shadow 0.15s; }
+.dt-lp-ctacard:hover { border-color: var(--dt-brand-line); box-shadow: 0 4px 16px rgb(16 24 40 / 0.08); }
+.dt-lp-ctacard .dt-lp-icon-tile + .dt-lp-card-text { margin-top: 0; }
+.dt-lp-ctacard .dt-lp-textlink { margin-top: 0.75rem; }
+.dt-lp-quote { display: flex; flex-direction: column; gap: 0.75rem; }
+.dt-lp-quote blockquote p { color: var(--dt-lp-text); font-size: 0.9375rem; }
+.dt-lp-quote-by { font-size: 0.875rem; color: var(--dt-lp-muted); margin-top: auto; }
+.dt-lp-stars { display: flex; gap: 0.125rem; font-size: 1rem; line-height: 1; }
+.dt-lp-star { color: var(--dt-lp-border); }
+.dt-lp-star--on { color: var(--dt-lp-warn); }
+
+/* Promo banner */
+.dt-lp-promo-wrap { padding: 2rem 0; }
+.dt-lp-promo { position: relative; display: grid; gap: 1.5rem; align-items: center; padding: 2rem; border-radius: var(--dt-lp-radius-lg); overflow: hidden; color: #fff; }
+.dt-lp-promo--brand { background: linear-gradient(120deg, var(--dt-brand-panel), var(--dt-brand)); }
+.dt-lp-promo--accent { background: var(--dt-brand-accent); color: var(--dt-brand-accent-contrast); }
+.dt-lp-promo--dark { background: var(--dt-lp-dark-bg); }
+.dt-lp-promo-copy { display: grid; gap: 0.75rem; justify-items: start; }
+.dt-lp-promo .dt-lp-promo-heading { color: inherit; }
+.dt-lp-promo-text { opacity: 0.9; max-width: 36rem; }
+.dt-lp-promo-img { width: 100%; max-height: 16rem; object-fit: cover; border-radius: var(--dt-lp-radius); }
+@media (min-width: 768px) { .dt-lp-promo { padding: 2.5rem 3rem; } .dt-lp-promo--image { grid-template-columns: 3fr 2fr; } }
+
+/* Rich text */
+.dt-lp-prose { margin-top: 1rem; color: var(--dt-lp-body); }
+.dt-lp-prose > * + * { margin-top: 0.875rem; }
+.dt-lp-prose h2, .dt-lp-prose h3, .dt-lp-prose h4 { color: var(--dt-lp-text); font-weight: 600; line-height: 1.3; }
+.dt-lp-prose h2 { font-size: 1.375rem; margin-top: 1.5rem; }
+.dt-lp-prose h3 { font-size: 1.125rem; margin-top: 1.25rem; }
+.dt-lp-prose ul, .dt-lp-prose ol { padding-left: 1.25rem; }
+.dt-lp-prose ul { list-style: disc; }
+.dt-lp-prose ol { list-style: decimal; }
+.dt-lp-prose a { color: var(--dt-brand-ink); text-decoration: underline; }
+.dt-lp-prose blockquote { border-left: 3px solid var(--dt-brand-line); padding-left: 1rem; color: var(--dt-lp-text); }
+
+/* Highlights strip */
+.dt-lp-usp { padding: 1rem 0; }
+.dt-lp-usp-list { display: grid; gap: 0.75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
+.dt-lp-usp-item { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--dt-lp-text); }
+.dt-lp-usp-icon { color: var(--dt-brand-ink); margin-top: 0.125rem; }
+.dt-lp-usp-text { display: block; font-size: 0.8125rem; color: var(--dt-lp-muted); }
+
+/* Brands */
+.dt-lp-brand-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin-top: 1.5rem; }
+.dt-lp-brand-item { display: flex; align-items: center; min-height: 2.5rem; font-weight: 700; font-size: 1.125rem; color: var(--dt-lp-muted); letter-spacing: 0.02em; }
+.dt-lp-brand-item img { max-height: 2.5rem; width: auto; filter: grayscale(1); opacity: 0.8; }
+
+/* Newsletter */
+.dt-lp-news { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
+.dt-lp-news-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.dt-lp-input { flex: 1 1 14rem; min-height: 2.75rem; padding: 0.5rem 0.875rem; border: 1px solid var(--dt-lp-border); border-radius: var(--dt-lp-radius); background: var(--dt-lp-surface); color: var(--dt-lp-text); font: inherit; }
+.dt-lp-input:focus-visible { outline: 2px solid var(--dt-brand); outline-offset: 1px; }
+.dt-lp-news-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8125rem; color: var(--dt-lp-body); text-align: left; }
+.dt-lp-news-consent input { margin-top: 0.2rem; accent-color: var(--dt-brand); }
+.dt-lp-news-done { margin-top: 1.5rem; text-align: center; font-weight: 600; color: var(--dt-brand-ink); }
+.dt-lp-news-error { font-size: 0.875rem; color: #b42318; }
+
+/* Gallery */
+.dt-lp-gallery { display: grid; gap: 0.75rem; margin-top: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 768px) { .dt-lp-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dt-lp-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+.dt-lp-gallery figure { position: relative; border-radius: var(--dt-lp-radius); overflow: hidden; background: var(--dt-lp-muted-bg); aspect-ratio: 4 / 3; }
+.dt-lp-gallery img { width: 100%; height: 100%; object-fit: cover; }
+.dt-lp-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / 0.6)); }
+
+/* App-filled slots (featured, categories) */
+.dt-lp-slot-body { margin-top: 1.5rem; }
+.dt-lp-intro:empty + .dt-lp-slot-body, .dt-lp-slot-body:first-child { margin-top: 0; }