@dreamtree-org/landing-kit 0.2.0 → 0.4.0

package/MIGRATION.md

@@ -85,3 +85,12 @@ Both moved over on branch `adopt/landing-kit`. What they needed that 0.1.0 lacke
   illustrations, icon lists), `media` + `reverse` for Floor Plan Studio and the collections table, `HowItWorks cta`,
   `DemoCta note`, `intro` `cta` / `glanceNote`, an async `isPublicHost` (registry lookup) and `onPrivateHost: 'app-shell'`.
 - `/seo` gained `product.screenshot`, FAQPage `isPartOf` and `og:image:type`, so both JSON-LD graphs match what they had.
+
+## 0.3.0: the brand moves into your repo
+
+The built-in `brands` / `getBrand(id)` registry is deprecated: it warns once and is removed in 0.5.0. Keep your brand next to your code:
+
+1. Run `npx @dreamtree-org/twreact-ui brand init --id billpro --name BillPro`. Copy your colours in: `color.primary` (the full 50–950 scale), plus optional `marketing.accent` / `marketing.panel` and `logo.mark`.
+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.
+

package/README.md

@@ -1,12 +1,12 @@
 # @dreamtree-org/landing-kit
 
-Replaces the marketing landing setup copied across billpro, taskpro and venturepro (page chrome,
-sections, "Book a demo" dialog, SEO files, Express routes and prerender) with one content-driven
-package that looks like the same family as the `@dreamtree-org/auth-kit` login screens.
+The shared marketing landing pages **and** authentication frame (`<AuthShell>`, `brands`, `getBrand`) for every Dreamtree product: replaces the landing setup copied across billpro, taskpro and venturepro (page chrome, sections, "Book a demo" dialog, SEO files, Express routes and prerender) and the login/signup/reset/platform-admin frame in one package.
 
-- One facade: `<LandingPage brand={getBrand('billpro')} content={content} />`. A product's landing page is a content file.
-- Same brand objects and `--dt-*` colours as auth-kit (`brands` / `getBrand` are re-exported from it).
-- Plain CSS. It looks the same under Tailwind 3, Tailwind 4 (preflight or not) or no Tailwind. Dark mode via `[data-theme="dark"]` or `.dark`.
+- Two facades, both taking the product's brand from **its own repo** (`dreamtree.brand.json`, twreact-ui's brand format) through `toLandingBrand()`:
+  - `<LandingPage brand={brand} content={content} />` — a product's landing page is a content file.
+  - `<AuthShell brand={brand} title="Welcome back">…</AuthShell>` (also available at `@dreamtree-org/landing-kit/auth` + `@dreamtree-org/landing-kit/auth.css`).
+  - The built-in `brands` / `getBrand(id)` registry is **deprecated** (warns once, removed in 0.5.0).
+- Plain CSS (`--dt-*` custom properties). It looks the same under Tailwind 3, Tailwind 4 (preflight or not) or no Tailwind. Dark mode via `[data-theme="dark"]` or `.dark`.
 - Built for prerendered, **un-hydrated** pages (fast and crawlable): `enhanceLanding()` wires the menu and the demo button in a few hundred bytes. It also works hydrated in an SPA or Next.js (`'use client'`, `onBookDemo`, `linkComponent`).
 - Responsive from 320px up. The nav folds into a menu below 1024px. Checked with Playwright at 320/375/768/1024/1440, light and dark.
 
@@ -18,12 +18,13 @@ npm install @dreamtree-org/landing-kit
 
 ```jsx
 // Landing.jsx
-import { LandingPage, getBrand } from '@dreamtree-org/landing-kit';
+import { LandingPage, toLandingBrand } from '@dreamtree-org/landing-kit';
+import brandFile from '../dreamtree.brand.json'; // the product's brand, kept in its repo
 import '@dreamtree-org/landing-kit/styles.css';
 import { content } from './content';
 
 export default function Landing() {
-  return <LandingPage brand={getBrand('billpro')} content={content} />;
+  return <LandingPage brand={toLandingBrand(brandFile, { headline: 'Billing, inventory and GST — done right.' })} content={content} />;
 }
 ```
 
@@ -59,6 +60,20 @@ Then prerender it and serve it (Express recipe below), or render it in your SPA
 
 ## Reference
 
+### `toLandingBrand(file, copy?)`
+
+Maps the product's `dreamtree.brand.json` (create it with `npx @dreamtree-org/twreact-ui brand init`) to a `Brand`, so the landing and sign-in pages share the app's colours:
+
+| Brand field | From the brand file |
+|---|---|
+| `id`, `name` | `id`, `name` |
+| `primary` | `marketing.primary`, else `color.primary.600` |
+| `accent` | `marketing.accent`, else `color.primary.300` |
+| `panel` | `marketing.panel`, else `role.shell` |
+| `logoSrc` | `logo.mark` |
+
+`copy` is the product's content (`headline`, `pitch`, `points`, `category`, `platformHeadline`, `platformPitch`). It stays in product code, not the brand file.
+
 ### `<LandingPage>`
 
 | Prop | Type | Default | Meaning |
@@ -93,6 +108,81 @@ Then prerender it and serve it (Express recipe below), or render it in your SPA
 | `createDemoIsland(props)` | mounts `DemoDialog` on demand for un-hydrated pages; returns `{ openDemo }` |
 | `BookDemoButton`, `BrandLockup`, `Section`, `SectionIntro`, `TextLink`, `SmartLink` | building blocks |
 
+### `<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`).
+
+```jsx
+import { AuthShell, getBrand } from '@dreamtree-org/landing-kit/auth';
+import '@dreamtree-org/landing-kit/auth.css';
+
+export default function Login() {
+  return (
+    <AuthShell
+      brand={getBrand('venturepro')}
+      linkComponent={Link}
+      title="Welcome back"
+      subtitle="Sign in to manage your ventures and units."
+      footer={<>New here? <Link to="/register">Register now</Link></>}
+    >
+      {/* your form */}
+    </AuthShell>
+  );
+}
+```
+
+| Prop | Type | Default | Meaning |
+|---|---|---|---|
+| `brand` | `Brand` | required | from `getBrand(id)` (`billpro`, `taskpro`, `venturepro`, `campaignpro`, `firepro`, `procurementpro`, `fitweavepro`, `aiagentbuilder`, `runloompro`, `appforge`) or your own object |
+| `title` | node | required | card heading |
+| `subtitle` | node | | under the heading |
+| `footer` | node | | below the card (e.g. "Register now") |
+| `variant` | `'tenant' \| 'platform'` | `'tenant'` | `'platform'` renders a darker panel + `"Platform"` badge |
+| `legalLinks` | `{label, href}[]` | Privacy, Terms, Data Policy | `[]` hides them |
+| `linkComponent` | component | `<a>` | receives both `to` and `href` |
+| `demoAccounts` | `{ load, onSelect, taps? }` | | hidden demo-accounts panel (below) |
+
+#### Hidden demo accounts (every product, same behaviour)
+
+Tapping the card heading (**"Sign in"**) 4 times quickly reveals a **Demo accounts** row of role chips under the
+form; a chip fills the form (it never submits). Credentials are never bundled: `load` asks the product's API,
+which answers **404 unless the deployment sets `DEMO_ACCOUNTS=1`**, and a 404 renders nothing.
+
+```jsx
+import { AuthShell, fetchDemoAccounts } from '@dreamtree-org/landing-kit/auth';
+
+<AuthShell
+  brand={brand}
+  title="Sign in"
+  demoAccounts={{
+    load: fetchDemoAccounts, // GET /api/auth/demo-accounts (or fetchDemoAccounts('/other/url'))
+    onSelect: (a) => { setEmail(a.identifier); setPassword(a.password); if (a.company) setCompany(a.company); },
+  }}
+>
+```
+
+Server (`@dreamtree-org/landing-kit/demo-server`, no dependencies):
+
+```js
+const { demoAccountsExpress } = require('@dreamtree-org/landing-kit/demo-server');
+app.get('/api/auth/demo-accounts', demoAccountsExpress({
+  // read passwords from the same env vars the seed script uses, so they never drift
+  accounts: (env) => [{ label: 'Admin', identifier: 'admin@demo.test', password: env.SEED_PASSWORD || 'demo1234', company: 'demo' }],
+}));
+
+// Next.js: app/api/auth/demo-accounts/route.ts
+export const GET = () => demoAccountsResponse({ accounts: [...] });
+```
+
+| Env | Meaning |
+|---|---|
+| `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) |
+
+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.
+
 ### `@dreamtree-org/landing-kit/enhance`
 
 `enhanceLanding(root = document, { openDemo | loadDemo, warmDemo, hash = '#book-demo' })`: wires

package/auth.css

@@ -167,6 +167,48 @@
 .dt-auth-legal-link { color: inherit; text-decoration: none; }
 .dt-auth-legal-link:hover { color: var(--dt-brand); text-decoration: underline; }
 
+/* ---- hidden demo-accounts panel (revealed by tapping the heading) ---- */
+.dt-auth-demo { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--dt-auth-border); }
+.dt-auth-demo-label {
+  margin: 0 0 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--dt-auth-muted);
+}
+.dt-auth-demo-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+.dt-auth-demo-chip {
+  appearance: none;
+  margin: 0;
+  padding: 0.3125rem 0.625rem;
+  min-height: 1.75rem;
+  border: 1px solid color-mix(in oklab, var(--dt-brand) 45%, transparent);
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--dt-brand) 8%, transparent);
+  color: color-mix(in oklab, var(--dt-brand) 80%, var(--dt-auth-text));
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.2;
+  cursor: pointer;
+  transition: background-color 120ms, border-color 120ms;
+}
+.dt-auth-demo-chip:hover { background: color-mix(in oklab, var(--dt-brand) 16%, transparent); }
+.dt-auth-demo-chip:focus-visible { outline: 2px solid var(--dt-brand); outline-offset: 2px; }
+.dt-auth-demo-chip[aria-pressed='true'] { background: var(--dt-brand); border-color: var(--dt-brand); color: #fff; }
+.dt-auth-demo-chip--skeleton {
+  width: 4.5rem;
+  border-color: var(--dt-auth-border);
+  background: var(--dt-auth-border);
+  cursor: default;
+  animation: dt-auth-demo-pulse 1.2s ease-in-out infinite;
+}
+@keyframes dt-auth-demo-pulse { 50% { opacity: 0.5; } }
+@media (prefers-reduced-motion: reduce) { .dt-auth-demo-chip--skeleton { animation: none; } }
+.dt-auth-demo-note { margin: 0.625rem 0 0; font-size: 0.75rem; color: var(--dt-auth-muted); }
+.dt-auth-demo-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: inherit; }
+
 /* ---- phones ---- */
 .dt-auth-column,
 .dt-auth-card { min-width: 0; }

package/auth.d.ts

@@ -1,2 +1,3 @@
-export type { BrandId, Brand, LegalLink, AuthShellProps } from './index.js';
-export { AuthShell, brandStyle, brands, getBrand } from './index.js';
+export type { BrandId, Brand, LegalLink, AuthShellProps, AuthDemoAccounts, DemoAccount, DemoAccountsResponse, DemoAccountsProps } from './index.js';
+export { AuthShell, brandStyle, brands, getBrand, toLandingBrand, DemoAccounts, useTapReveal, DEMO_ACCOUNTS_URL, fetchDemoAccounts, normalizeDemoAccounts, stashDemoFill, takeDemoFill } from './index.js';
+export type { BrandFile, BrandCopy } from './index.js';

package/demo-server.d.ts

@@ -0,0 +1,24 @@
+import type { DemoAccount } from './index.js';
+
+type Env = Record<string, string | undefined>;
+
+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;
+  env?: Env | undefined;
+}
+
+export type DemoAccountsResult =
+  | { status: 200; body: { accounts: DemoAccount[] } }
+  | { status: 404; body: { error: string } };
+
+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;
+/** 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;

package/dist/auth.cjs

@@ -21,15 +21,125 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var auth_exports = {};
 __export(auth_exports, {
   AuthShell: () => AuthShell,
+  DEMO_ACCOUNTS_URL: () => DEMO_ACCOUNTS_URL,
+  DemoAccounts: () => DemoAccounts,
   brandStyle: () => brandStyle,
   brands: () => brands,
-  getBrand: () => getBrand
+  fetchDemoAccounts: () => fetchDemoAccounts,
+  getBrand: () => getBrand,
+  normalizeDemoAccounts: () => normalizeDemoAccounts,
+  stashDemoFill: () => stashDemoFill,
+  takeDemoFill: () => takeDemoFill,
+  toLandingBrand: () => toLandingBrand,
+  useTapReveal: () => useTapReveal
 });
 module.exports = __toCommonJS(auth_exports);
 
 // src/AuthShell.jsx
+var import_react3 = require("react");
+
+// src/DemoAccounts.jsx
 var import_react = require("react");
+
+// src/demoFill.js
+var DEMO_ACCOUNTS_URL = "/api/auth/demo-accounts";
+var FILL_KEY = "dt-demo-fill";
+async function fetchDemoAccounts(url = DEMO_ACCOUNTS_URL, init = {}) {
+  try {
+    const res = await fetch(url, { credentials: "include", cache: "no-store", ...init, headers: { Accept: "application/json", ...init.headers } });
+    if (!res.ok) return { accounts: [] };
+    return normalizeDemoAccounts(await res.json());
+  } catch {
+    return { accounts: [] };
+  }
+}
+function normalizeDemoAccounts(data) {
+  const list = Array.isArray(data) ? data : Array.isArray(data == null ? void 0 : data.accounts) ? data.accounts : [];
+  const accounts = list.filter((a) => a && typeof a.label === "string" && typeof a.identifier === "string");
+  let sharedPassword = typeof (data == null ? void 0 : data.sharedPassword) === "string" ? data.sharedPassword : void 0;
+  if (!sharedPassword && accounts.length > 1 && accounts.every((a) => a.password && a.password === accounts[0].password)) {
+    sharedPassword = accounts[0].password;
+  }
+  return sharedPassword ? { accounts, sharedPassword } : { accounts };
+}
+function stashDemoFill(account) {
+  var _a;
+  try {
+    sessionStorage.setItem(FILL_KEY, JSON.stringify({ identifier: account.identifier, password: (_a = account.password) != null ? _a : "", company: account.company }));
+  } catch {
+  }
+}
+function takeDemoFill() {
+  try {
+    const raw = sessionStorage.getItem(FILL_KEY);
+    if (!raw) return null;
+    sessionStorage.removeItem(FILL_KEY);
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+// src/DemoAccounts.jsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function DemoAccounts({ load, onSelect, className = "" }) {
+  const [state, setState] = (0, import_react.useState)({ status: "loading", accounts: [] });
+  const [picked, setPicked] = (0, import_react.useState)(null);
+  const loadRef = (0, import_react.useRef)(load);
+  (0, import_react.useEffect)(() => {
+    let live = true;
+    Promise.resolve().then(() => loadRef.current()).then((data) => live && setState({ status: "ready", ...normalizeDemoAccounts(data) })).catch(() => live && setState({ status: "ready", accounts: [] }));
+    return () => {
+      live = false;
+    };
+  }, []);
+  if (state.status === "ready" && !state.accounts.length) return null;
+  const pick = (account, i) => {
+    setPicked(i);
+    onSelect == null ? void 0 : onSelect(account);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dt-auth-demo ${className}`, "aria-busy": state.status === "loading" || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dt-auth-demo-label", children: "Demo accounts" }),
+    state.status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dt-auth-demo-chips", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-demo-chip dt-auth-demo-chip--skeleton" }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dt-auth-demo-chips", children: state.accounts.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "dt-auth-demo-chip",
+          "aria-pressed": picked === i,
+          title: a.company ? `${a.identifier} \xB7 ${a.company}` : a.identifier,
+          onClick: () => pick(a, i),
+          children: a.label
+        },
+        `${a.label}-${a.identifier}`
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dt-auth-demo-note", children: state.sharedPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        "Shared password ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: state.sharedPassword }),
+        " \u2014 tap a role to fill."
+      ] }) : "Tap a role to fill." })
+    ] })
+  ] });
+}
+
+// src/useTapReveal.js
+var import_react2 = require("react");
+function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
+  const [revealed, setRevealed] = (0, import_react2.useState)(false);
+  const count = (0, import_react2.useRef)(0);
+  const last = (0, import_react2.useRef)(0);
+  const onClick = (0, import_react2.useCallback)(() => {
+    if (revealed) return;
+    const now = Date.now();
+    count.current = now - last.current <= windowMs ? count.current + 1 : 1;
+    last.current = now;
+    if (count.current >= taps) setRevealed(true);
+  }, [revealed, taps, windowMs]);
+  return { revealed, tapProps: { onClick, style: { userSelect: "none", WebkitUserSelect: "none" } } };
+}
+
+// src/AuthShell.jsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_LEGAL = [
   { label: "Privacy Policy", href: "/privacy" },
   { label: "Terms", href: "/terms" },
@@ -37,10 +147,10 @@ var DEFAULT_LEGAL = [
 ];
 function BrandMark({ brand, size }) {
   if (brand.logoSrc) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
   }
-  if (brand.mark) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-mark-node", children: brand.mark });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
+  if (brand.mark) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-mark-node", children: brand.mark });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
 }
 function brandStyle(brand) {
   return {
@@ -58,50 +168,53 @@ function AuthShell({
   variant = "tenant",
   legalLinks = DEFAULT_LEGAL,
   linkComponent: LinkComponent,
-  className = ""
+  className = "",
+  demoAccounts
 }) {
-  var _a;
-  const headingId = (0, import_react.useId)();
+  var _a, _b;
+  const headingId = (0, import_react3.useId)();
+  const { revealed, tapProps } = useTapReveal({ taps: (_a = demoAccounts == null ? void 0 : demoAccounts.taps) != null ? _a : 4 });
   const isPlatform = variant === "platform";
   const headline = isPlatform ? brand.platformHeadline || "Platform administration" : brand.headline;
   const pitch = isPlatform ? brand.platformPitch || `Super administrator console for ${brand.name}. Every action here is audited.` : brand.pitch;
-  const renderLink = (l) => LinkComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const renderLink = (l) => LinkComponent ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       className: `dt-auth ${isPlatform ? "dt-auth--platform" : ""} ${className}`,
       style: brandStyle(brand),
       "data-product": brand.id,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "dt-auth-panel", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: "/", className: "dt-auth-brand", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrandMark, { brand, size: 28 }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
-            isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("aside", { className: "dt-auth-panel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { href: "/", className: "dt-auth-brand", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrandMark, { brand, size: 28 }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dt-auth-pitch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: headline }),
-            pitch ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: pitch }) : null,
-            !isPlatform && ((_a = brand.points) == null ? void 0 : _a.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: brand.points.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: p }, p)) }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dt-auth-pitch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: headline }),
+            pitch ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: pitch }) : null,
+            !isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { children: brand.points.map((p) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: p }, p)) }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "dt-auth-main", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dt-auth-column", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrandMark, { brand, size: 24 }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
-            isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("main", { className: "dt-auth-main", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dt-auth-column", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrandMark, { brand, size: 24 }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "dt-auth-head", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { id: headingId, children: title }),
-              subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: subtitle }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { className: "dt-auth-head", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
+              subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: subtitle }) : null
             ] }),
-            children
+            children,
+            demoAccounts && revealed ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
           ] }),
-          footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dt-auth-footer", children: footer }) : null,
-          (legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dt-auth-legal-item", children: [
-            i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\xB7" }) : null,
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dt-auth-footer", children: footer }) : null,
+          (legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "dt-auth-legal-item", children: [
+            i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: "\xB7" }) : null,
             renderLink(l)
           ] }, l.href)) }) : null
         ] }) })
@@ -225,8 +338,39 @@ var brands = {
     category: "by Dreamtree-Org"
   }
 };
+var warned = false;
 function getBrand(id) {
+  if (!warned && typeof console !== "undefined") {
+    warned = true;
+    console.warn('landing-kit: getBrand() and the built-in brands are deprecated (removed in 0.5.0). Keep your brand in dreamtree.brand.json and use toLandingBrand(require("./dreamtree.brand.json"), copy).');
+  }
   const b = brands[id];
   if (!b) throw new Error(`landing-kit: unknown brand "${id}" (known: ${Object.keys(brands).join(", ")})`);
   return b;
 }
+
+// src/brandFile.js
+var shellOf = (role) => {
+  const shell = role && role.shell;
+  return typeof shell === "string" ? shell : shell && shell.light;
+};
+function toLandingBrand(file, copy = {}) {
+  if (!file || typeof file !== "object") throw new Error("landing-kit: toLandingBrand needs the parsed dreamtree.brand.json object.");
+  const id = file.id || file.name;
+  if (!id) throw new Error('landing-kit: the brand file has no "id". Run `npx @dreamtree-org/twreact-ui brand validate`.');
+  const scale = file.color && file.color.primary || {};
+  const marketing = file.marketing || {};
+  const primary = marketing.primary || scale["600"] || scale["700"] || scale["500"];
+  if (!primary) throw new Error(`landing-kit: brand "${id}" sets no primary colour (color.primary.600 or marketing.primary).`);
+  const brand = {
+    id,
+    name: (file.id ? file.name : file.label) || id,
+    primary,
+    accent: marketing.accent || scale["300"] || void 0,
+    panel: marketing.panel || shellOf(file.role) || void 0,
+    logoSrc: file.logo && file.logo.mark || void 0,
+    headline: "",
+    ...copy
+  };
+  return Object.fromEntries(Object.entries(brand).filter(([, v]) => v !== void 0));
+}