@dreamtree-org/landing-kit 0.4.0 → 0.6.0

package/MIGRATION.md

@@ -94,3 +94,15 @@ The built-in `brands` / `getBrand(id)` registry is deprecated: it warns once and
 2. Replace `getBrand('billpro')` with `toLandingBrand(require('./dreamtree.brand.json'), { headline, pitch, points, category })`. The copy that used to live in `brands.js` moves into your code.
 3. Run `npx @dreamtree-org/twreact-ui brand build --out app/brand.css` so the app's twreact-ui components use the same colours.
 
+## 0.6.0 — tenant pages (additive)
+
+Nothing changes for product landing pages. New, opt-in:
+
+- `@dreamtree-org/landing-kit/schema` (CommonJS + ESM, no React): `SECTION_TYPES`, `validatePage`,
+  `validateTheme`, `themeVars`, `sanitizeRichText`, `brandPalette`, `contrastRatio`, presets and fonts.
+- `TenantPage`, `HeroSlider`, `NamedIcon` from the main entry, styled by `styles.css` (`.dt-lp-tenant`).
+- `.dt-lp-tenant` adds `--dt-brand-contrast`, `--dt-brand-accent-contrast` and `--dt-lp-font-heading`;
+  `brandStyle()` is unchanged.
+- Apps that stored per-tenant brand colours elsewhere can move them into a theme with
+  `validateTheme({ preset: 'custom', primary, accent })`.
+

package/README.md

@@ -108,6 +108,49 @@ Maps the product's `dreamtree.brand.json` (create it with `npx @dreamtree-org/tw
 | `createDemoIsland(props)` | mounts `DemoDialog` on demand for un-hydrated pages; returns `{ openDemo }` |
 | `BookDemoButton`, `BrandLockup`, `Section`, `SectionIntro`, `TextLink`, `SmartLink` | building blocks |
 
+### Tenant pages (0.6.0): a store's own landing page as data
+
+For multi-tenant apps where **each customer edits their own page** (a store front, a clinic,
+a franchise). The page is a JSON document; the app stores it, the package validates and renders it.
+
+```js
+// Server (CommonJS is fine): validate before storing
+const { validatePage, validateTheme, sanitizeRichText } = require('@dreamtree-org/landing-kit/schema');
+const page = validatePage(req.body.page);      // { ok, errors: [{ path, message }], page }
+const theme = validateTheme(req.body.theme);   // { ok, errors, warnings, theme }
+if (!page.ok || !theme.ok) return res.status(422).json({ errors: [...page.errors, ...theme.errors] });
+```
+
+```jsx
+// Browser: render
+import { TenantPage } from '@dreamtree-org/landing-kit';
+import '@dreamtree-org/landing-kit/styles.css';
+
+<TenantPage
+  page={doc} theme={theme} storeName="TechNext"
+  slots={{ featured: <FeaturedProducts />, categories: (props) => <CategoryTiles title={props.title} /> }}
+  resolveMedia={(ref, variant) => `/api/public-media/${ref.media_id}`}
+  linkComponent={RouterLink}
+  onSubscribe={({ email, consent }) => api.subscribe(email, consent)}
+/>
+```
+
+- **Document:** `{ version: 1, sections: [{ id, type, enabled, props }] }`, at most 20 sections, any order, a type may repeat.
+- **Section types** (`SECTION_TYPES`, each a list of typed fields a builder can turn into a form):
+  `hero_slider`, `featured`†, `categories`†, `promo_banner`, `trust_badges`, `cta_cards`, `testimonials`,
+  `faq`, `rich_text`, `usp_strip`, `brand_strip`, `newsletter`, `gallery`. † rendered from the app's `slots`.
+- **Safe by construction:** links must be http(s), `mailto:`, `tel:`, `/path` or `#fragment`; icons are names
+  (`ICON_NAMES`, drawn from the package's own SVGs); images are `{ media_id }` refs the app resolves;
+  rich text keeps an allowlist (`sanitizeRichText`) on save **and** on render.
+- **Theme:** `{ preset, primary, accent, font, radius, mode, logo, favicon }`. `themeVars(theme)` returns the
+  CSS variables for the page root plus `palette.primary` / `palette.accent` (50…950 from one colour, the
+  colour itself at 600) to map onto the app's own tokens. `validateTheme` warns when button text or links
+  would fall under WCAG contrast. Six `THEME_PRESETS` and six `FONT_PAIRS` (with the stylesheet to load).
+- **HeroSlider:** swipe, arrow keys, always-visible 44px controls, pause/play; autoplay stops on hover,
+  focus and `prefers-reduced-motion`; the first slide's heading is the page's only `h1`.
+- `newSection(type)` / `sectionDefaults(type)` start a section with valid defaults; `defaultPage({ name, tagline })`
+  is a neutral starting page.
+
 ### `<AuthShell>` & `@dreamtree-org/landing-kit/auth`
 
 The shared auth frame for login, signup, password reset, consent and platform-admin sign-in (`desktop [ brand panel 40% | form card ]`, `mobile [ logo · form card · footer · legal links ]`). Import from `@dreamtree-org/landing-kit` or the lightweight `@dreamtree-org/landing-kit/auth` subpath (with `@dreamtree-org/landing-kit/auth.css` or `styles.css`).
@@ -179,6 +222,24 @@ export const GET = () => demoAccountsResponse({ accounts: [...] });
 | `DEMO_ACCOUNTS=1` | turn the endpoint on (off by default; leave it off in production) |
 | `DEMO_ACCOUNTS_JSON` | `[{ label, identifier, password, company? }]`, replaces the built-in list (accounts a deployment created itself) |
 
+#### The `default` demo company (every pro app)
+
+Every pro app seeds a company with slug **`default`** — its branches and **one user per role** —
+so the whole product can be demoed end to end, and the chips list exactly those users:
+
+```js
+const { demoUsers, demoAccountsExpress, requireDemoPassword } = require('@dreamtree-org/landing-kit/demo-server');
+const manifest = [{ role: 'tenant-admin', label: 'Admin' }, { role: 'viewer', label: 'Viewer' }];
+
+// demo:seed (idempotent): create `default`, upsert each user, password = requireDemoPassword()
+// endpoint: one chip per role, emails demoEmail(product, role) → tenant-admin@taskpro.demo.test
+app.get('/api/auth/demo-accounts', demoAccountsExpress({ accounts: (env) => demoUsers(manifest, { product: 'taskpro', env }) }));
+```
+
+| Env | Meaning |
+|---|---|
+| `DEMO_PASSWORD` | the demo users' password (≥ 12 chars); `demo:seed` resets every demo user to it, the chips show it. Unset → no chips |
+
 Company-first logins pick the chip on the company step: call `stashDemoFill(account)` there and
 `takeDemoFill()` when the password step mounts (sessionStorage, read once). Outside AuthShell, render
 `<DemoAccounts load onSelect />` behind `useTapReveal()` yourself.

package/demo-server.d.ts

@@ -6,7 +6,7 @@ export interface DemoAccountsOptions {
   /** The product's own gate (e.g. not a production tenant). DEMO_ACCOUNTS=1 is required as well. */
   enabled?: boolean | undefined;
   /** Built-in list, or a function of env (read seed passwords from the same vars the seed script uses). */
-  accounts?: DemoAccount[] | ((env: Env) => DemoAccount[]) | undefined;
+  accounts?: DemoAccount[] | ((env: Env) => DemoAccount[] | Promise<DemoAccount[]>) | undefined;
   env?: Env | undefined;
 }
 
@@ -16,9 +16,26 @@ export type DemoAccountsResult =
 
 export declare const DEMO_ACCOUNTS_HEADERS: Record<string, string>;
 export declare function demoAccountsEnabled(opts?: Pick<DemoAccountsOptions, 'enabled' | 'env'>): boolean;
-/** 404 unless enabled and DEMO_ACCOUNTS=1; DEMO_ACCOUNTS_JSON replaces `accounts`. */
-export declare function resolveDemoAccounts(opts?: DemoAccountsOptions): DemoAccountsResult;
+/** 404 unless enabled and DEMO_ACCOUNTS=1; DEMO_ACCOUNTS_JSON replaces `accounts`. A Promise when `accounts` is async. */
+export declare function resolveDemoAccounts(opts?: DemoAccountsOptions): DemoAccountsResult | Promise<DemoAccountsResult>;
 /** Express handler for `GET /api/auth/demo-accounts`. */
 export declare function demoAccountsExpress(opts?: DemoAccountsOptions): (req: any, res: any) => void;
 /** Fetch-API Response for a Next.js route handler. */
-export declare function demoAccountsResponse(opts?: DemoAccountsOptions): Response;
+export declare function demoAccountsResponse(opts?: DemoAccountsOptions): Response | Promise<Response>;
+
+/** One row per role in a product's demo manifest. */
+export interface DemoRole {
+  role: string;
+  label: string;
+  /** Defaults to demoEmail(product, role). */
+  email?: string | undefined;
+}
+/** Slug of the shared demo company every pro app seeds: 'default'. */
+export declare const DEMO_COMPANY: 'default';
+export declare const DEMO_PASSWORD_MIN: number;
+/** `${role}@${product}.demo.test` (lower-case, dashes). */
+export declare function demoEmail(product: string, role: string): string;
+/** Manifest → chips in the `default` company with env.DEMO_PASSWORD; [] when DEMO_PASSWORD is unset. */
+export declare function demoUsers(manifest: DemoRole[], opts: { product: string; env?: Env | undefined; company?: string | undefined }): DemoAccount[];
+/** Throws unless DEMO_PASSWORD is set and at least DEMO_PASSWORD_MIN characters; returns it. */
+export declare function requireDemoPassword(env?: Env): string;

package/dist/demo-server.cjs

@@ -20,9 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var demo_server_exports = {};
 __export(demo_server_exports, {
   DEMO_ACCOUNTS_HEADERS: () => DEMO_ACCOUNTS_HEADERS,
+  DEMO_COMPANY: () => DEMO_COMPANY,
+  DEMO_PASSWORD_MIN: () => DEMO_PASSWORD_MIN,
   demoAccountsEnabled: () => demoAccountsEnabled,
   demoAccountsExpress: () => demoAccountsExpress,
   demoAccountsResponse: () => demoAccountsResponse,
+  demoEmail: () => demoEmail,
+  demoUsers: () => demoUsers,
+  requireDemoPassword: () => requireDemoPassword,
   resolveDemoAccounts: () => resolveDemoAccounts
 });
 module.exports = __toCommonJS(demo_server_exports);
@@ -47,29 +52,70 @@ function clean(accounts) {
 function demoAccountsEnabled({ enabled = true, env = process.env } = {}) {
   return Boolean(enabled) && env.DEMO_ACCOUNTS === "1";
 }
-function resolveDemoAccounts({ enabled = true, accounts = [], env = process.env } = {}) {
-  if (!demoAccountsEnabled({ enabled, env })) return { status: 404, body: { error: "Not found" } };
-  const list = clean(fromEnvJson(env.DEMO_ACCOUNTS_JSON) ?? (typeof accounts === "function" ? accounts(env) : accounts));
+function result(accounts) {
+  if (!accounts) return { status: 404, body: { error: "Not found" } };
+  const list = clean(accounts);
   if (!list.length) return { status: 404, body: { error: "Not found" } };
   return { status: 200, body: { accounts: list } };
 }
+function resolveDemoAccounts({ enabled = true, accounts = [], env = process.env } = {}) {
+  const on = demoAccountsEnabled({ enabled, env });
+  if (!on) return result(null);
+  const override = fromEnvJson(env.DEMO_ACCOUNTS_JSON);
+  if (override) return result(override);
+  const list = typeof accounts === "function" ? accounts(env) : accounts;
+  return list && typeof list.then === "function" ? list.then((l) => result(l || []), () => result(null)) : result(list || []);
+}
 var DEMO_ACCOUNTS_HEADERS = { "Cache-Control": "no-store", "X-Robots-Tag": "noindex" };
 function demoAccountsExpress(opts = {}) {
-  return (req, res) => {
-    const { status, body } = resolveDemoAccounts(opts);
+  const send = (res, { status, body }) => {
     res.set(DEMO_ACCOUNTS_HEADERS);
     res.status(status).json(body);
   };
+  return (req, res) => {
+    const r = resolveDemoAccounts(opts);
+    if (typeof r.then === "function") return r.then((x) => send(res, x));
+    send(res, r);
+  };
 }
 function demoAccountsResponse(opts = {}) {
-  const { status, body } = resolveDemoAccounts(opts);
-  return new Response(JSON.stringify(body), { status, headers: { "Content-Type": "application/json", ...DEMO_ACCOUNTS_HEADERS } });
+  const toResponse = ({ status, body }) => new Response(JSON.stringify(body), { status, headers: { "Content-Type": "application/json", ...DEMO_ACCOUNTS_HEADERS } });
+  const r = resolveDemoAccounts(opts);
+  return typeof r.then === "function" ? r.then(toResponse) : toResponse(r);
+}
+var DEMO_COMPANY = "default";
+var DEMO_PASSWORD_MIN = 12;
+function demoEmail(product, role) {
+  const slug = (s) => String(s).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return `${slug(role)}@${slug(product)}.demo.test`;
+}
+function demoUsers(manifest, { product, env = process.env, company = DEMO_COMPANY } = {}) {
+  const password = env.DEMO_PASSWORD;
+  if (!password) return [];
+  return (manifest || []).map((m) => ({
+    label: m.label,
+    identifier: m.email || demoEmail(product, m.role),
+    password,
+    company,
+    role: m.role
+  }));
+}
+function requireDemoPassword(env = process.env) {
+  const p = env.DEMO_PASSWORD;
+  if (!p) throw new Error("DEMO_PASSWORD is not set: demo:seed gives every demo user this password (the login chips show it).");
+  if (p.length < DEMO_PASSWORD_MIN) throw new Error(`DEMO_PASSWORD must be at least ${DEMO_PASSWORD_MIN} characters.`);
+  return p;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEMO_ACCOUNTS_HEADERS,
+  DEMO_COMPANY,
+  DEMO_PASSWORD_MIN,
   demoAccountsEnabled,
   demoAccountsExpress,
   demoAccountsResponse,
+  demoEmail,
+  demoUsers,
+  requireDemoPassword,
   resolveDemoAccounts
 });

package/dist/demo-server.js

@@ -20,28 +20,69 @@ function clean(accounts) {
 function demoAccountsEnabled({ enabled = true, env = process.env } = {}) {
   return Boolean(enabled) && env.DEMO_ACCOUNTS === "1";
 }
-function resolveDemoAccounts({ enabled = true, accounts = [], env = process.env } = {}) {
-  if (!demoAccountsEnabled({ enabled, env })) return { status: 404, body: { error: "Not found" } };
-  const list = clean(fromEnvJson(env.DEMO_ACCOUNTS_JSON) ?? (typeof accounts === "function" ? accounts(env) : accounts));
+function result(accounts) {
+  if (!accounts) return { status: 404, body: { error: "Not found" } };
+  const list = clean(accounts);
   if (!list.length) return { status: 404, body: { error: "Not found" } };
   return { status: 200, body: { accounts: list } };
 }
+function resolveDemoAccounts({ enabled = true, accounts = [], env = process.env } = {}) {
+  const on = demoAccountsEnabled({ enabled, env });
+  if (!on) return result(null);
+  const override = fromEnvJson(env.DEMO_ACCOUNTS_JSON);
+  if (override) return result(override);
+  const list = typeof accounts === "function" ? accounts(env) : accounts;
+  return list && typeof list.then === "function" ? list.then((l) => result(l || []), () => result(null)) : result(list || []);
+}
 var DEMO_ACCOUNTS_HEADERS = { "Cache-Control": "no-store", "X-Robots-Tag": "noindex" };
 function demoAccountsExpress(opts = {}) {
-  return (req, res) => {
-    const { status, body } = resolveDemoAccounts(opts);
+  const send = (res, { status, body }) => {
     res.set(DEMO_ACCOUNTS_HEADERS);
     res.status(status).json(body);
   };
+  return (req, res) => {
+    const r = resolveDemoAccounts(opts);
+    if (typeof r.then === "function") return r.then((x) => send(res, x));
+    send(res, r);
+  };
 }
 function demoAccountsResponse(opts = {}) {
-  const { status, body } = resolveDemoAccounts(opts);
-  return new Response(JSON.stringify(body), { status, headers: { "Content-Type": "application/json", ...DEMO_ACCOUNTS_HEADERS } });
+  const toResponse = ({ status, body }) => new Response(JSON.stringify(body), { status, headers: { "Content-Type": "application/json", ...DEMO_ACCOUNTS_HEADERS } });
+  const r = resolveDemoAccounts(opts);
+  return typeof r.then === "function" ? r.then(toResponse) : toResponse(r);
+}
+var DEMO_COMPANY = "default";
+var DEMO_PASSWORD_MIN = 12;
+function demoEmail(product, role) {
+  const slug = (s) => String(s).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return `${slug(role)}@${slug(product)}.demo.test`;
+}
+function demoUsers(manifest, { product, env = process.env, company = DEMO_COMPANY } = {}) {
+  const password = env.DEMO_PASSWORD;
+  if (!password) return [];
+  return (manifest || []).map((m) => ({
+    label: m.label,
+    identifier: m.email || demoEmail(product, m.role),
+    password,
+    company,
+    role: m.role
+  }));
+}
+function requireDemoPassword(env = process.env) {
+  const p = env.DEMO_PASSWORD;
+  if (!p) throw new Error("DEMO_PASSWORD is not set: demo:seed gives every demo user this password (the login chips show it).");
+  if (p.length < DEMO_PASSWORD_MIN) throw new Error(`DEMO_PASSWORD must be at least ${DEMO_PASSWORD_MIN} characters.`);
+  return p;
 }
 export {
   DEMO_ACCOUNTS_HEADERS,
+  DEMO_COMPANY,
+  DEMO_PASSWORD_MIN,
   demoAccountsEnabled,
   demoAccountsExpress,
   demoAccountsResponse,
+  demoEmail,
+  demoUsers,
+  requireDemoPassword,
   resolveDemoAccounts
 };