@dreamtree-org/landing-kit 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dreamtree-Org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/MIGRATION.md

@@ -0,0 +1,87 @@
+# Moving a product onto @dreamtree-org/landing-kit
+
+## Where each piece came from
+
+| Package piece | Extracted from | Notes |
+|---|---|---|
+| `LandingPage` content model, multi-page `MarketingLayout`, `Breadcrumbs`, `PageHero` | taskpro `features/landing/{pages.js, content.js, LandingChrome.jsx}` | the best architecture: one content file, one page list |
+| `Header`, `Hero`, `FeatureSection` variants, `Audiences`, `HowItWorks`, `Faq`, `DemoCta`, `DreamtreeFooter`, `PreviewFrame` | billpro / venturepro `pages/landing/Landing.jsx` (billpro is the newest copy) | Tailwind classes turned into plain CSS on auth-kit's `--dt-*` variables |
+| `DemoDialog` | venturepro `DemoDialog.jsx` (fields, consent + privacy line) + billpro `DemoDialog.jsx` (native `<dialog>`, no UI library) | fields and submit are props |
+| `createDemoIsland` | billpro / taskpro / venturepro `landing/demoIsland.jsx` | |
+| `enhanceLanding` (`/enhance`) | taskpro `landing/wire.js` + billpro `landing/main.jsx` (`#book-demo`) | adds Escape-to-close |
+| `/seo` builders | billpro `landing/seo.js`, taskpro `lib/seo.js` (head, AI crawler list), procurementpro `structured-data.tsx` (origin-less graph) | framework-neutral; `site` is a parameter |
+| `landingRoutes`, `sessionCheck`, `siteUrl`, `verificationTags` (`/server`) | billpro `utils/landing.js` (host rule, verification tags, raw-file 404s, `/solutions` redirect) + taskpro (manifest-only routing, trailing-slash handling, `app-shell` session mode) | host and session checks are hooks |
+| `prerenderPages` | billpro `client/scripts/prerender-landing.mjs` steps 3–4 | validates every page before writing any |
+
+## Files it replaces (per product)
+
+| Before | After |
+|---|---|
+| `pages/landing/Landing.jsx` (≈680 lines: Header, Hero, sections, footer, WRAP/EYEBROW/BookDemoButton) | `<LandingPage brand content preview />` (≈15 lines) |
+| `pages/landing/SolutionPage.jsx` / taskpro `MarketingPage.jsx`, `LandingChrome.jsx` | `MarketingLayout` + `PageHero` + `FeatureSection variant="detail"` + `Faq` + `DemoCta` |
+| `DemoDialog.jsx` / `DemoRequestDialog.jsx` | `DemoDialog` with the product's `fields` + `onSubmit` |
+| `landing/main.jsx`, `landing/wire.js`, `landing/demoIsland.jsx` | `enhanceLanding()` + `createDemoIsland()` (3–5 lines each) |
+| `landing/seo.js` | `/seo` builders called with the product's data |
+| `utils/landing.js` | `/server` `landingRoutes(app, { dist, isPublicHost, hasSession })` |
+| `scripts/prerender-landing.mjs` steps 3–4 | `prerenderPages()` |
+| `tailwind.landing.config.*`, `landing/landing.css` | not needed for the page; keep only if your product preview uses Tailwind |
+
+Kept per product: `content.js` (the words), solution/sub-page data, the product preview, the Vite build of
+`landing.html` + SSR entry, the demo request model, and the server's host/session rules.
+
+## Before / after (billpro pilot, branch `adopt/landing-kit`)
+
+```jsx
+// before: client/src/pages/landing/Landing.jsx, 678 lines of JSX + Tailwind
+export default function Landing() {
+  return (<><a href="#main" …>Skip to content</a><Header /><main id="main"><Hero /><ProductPreview /><Intro />
+    <Billing /><Inventory /><Gst /><Accounts /><Audiences /><HowItWorks /><AiBand /><RightFit /><SolutionsGrid />
+    <Faq /><DemoCta /></main><Footer /></>);
+}
+
+// after: 16 lines; the words live in content.js's `content` object
+export const brand = getBrand('billpro');
+export default function Landing() {
+  return <LandingPage brand={brand} content={content} preview={<ProductPreview />} />;
+}
+```
+
+```js
+// before: utils/landing.js, 152 lines
+// after:
+landingRoutes(app, { dist: clientDist, isPublicHost: isPlatformHost, hasSession, redirects: { '/solutions': '/#solutions' } });
+```
+
+Result: 15 source files, +391 / −1375 lines. BillPro's own tests (landing, solution pages, server routes, the
+full client suite) pass unchanged except two footer assertions that named Tailwind classes. Client build and prerender produce the same 7 pages.
+
+## Steps
+
+1. `npm install @dreamtree-org/landing-kit` in the server and client packages.
+2. Add a `content` object to your `content.js` (see README). Keep the existing named exports if tests or SEO read them.
+3. Replace `Landing.jsx` with `<LandingPage>`. Move the product preview into `<PreviewFrame>`.
+4. Rebuild sub-pages with `MarketingLayout home={false}` + blocks.
+5. `main.jsx`: import `@dreamtree-org/landing-kit/styles.css` and call `enhanceLanding`. Make `demoIsland.jsx` call `createDemoIsland`.
+6. Rewrite `seo.js` with `/seo` builders (pass `faq`, `howTo` from the same content).
+7. Use `prerenderPages()` in the prerender script and `landingRoutes()` in the server.
+8. Update the `speakable` selectors: section headings are `#<section id>-title` (e.g. `#what-is-billpro-title`).
+
+## Visible changes to expect
+
+- Brand colour is auth-kit's (BillPro `#15803d` instead of `#19a249`), the same as the login screen.
+- Headings, cards, spacing and the closing CTA panel follow one shared scale. Section `h2` ids become `<id>-title`.
+- The phone menu now collapses below 1024px (it was 768px), so tablets get the menu instead of a crowded bar.
+
+## taskpro and venturepro (0.1.1)
+
+Both moved over on branch `adopt/landing-kit`. What they needed that 0.1.0 lacked became options, not forks:
+
+- **taskpro** (4 pages: `/`, `/features`, `/use-cases`, `/ai-connections`): `slots` for "What is TaskPro?" and
+  "About", `media` for the My Work / workflow / MCP illustrations, card `label`s, `cta` arrays, `DemoDialog validate`
+  + server `fields` (its inline-error demo form), and `landingRoutes` `manifest: 'landing/pages.json'` (paths relative
+  to the manifest), `trailingSlash: 'serve'`, `rawFiles: 'redirect'`, `cacheControl: 'no-cache'` so its server tests
+  pass unchanged. Its `lib/seo.js` keeps its API as an adapter over `/seo`.
+- **venturepro** (1 page): `hero.backdrop` (the skyline), `Audiences` `media` + `features` (crane / bedroom
+  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.

package/README.md

@@ -1,3 +1,192 @@
-# Temporary Holding Version
+# @dreamtree-org/landing-kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+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.
+
+- 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`.
+- 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.
+
+## 60-second start
+
+```bash
+npm install @dreamtree-org/landing-kit
+```
+
+```jsx
+// Landing.jsx
+import { LandingPage, getBrand } from '@dreamtree-org/landing-kit';
+import '@dreamtree-org/landing-kit/styles.css';
+import { content } from './content';
+
+export default function Landing() {
+  return <LandingPage brand={getBrand('billpro')} content={content} />;
+}
+```
+
+```js
+// content.js: plain data (icons are any component, e.g. lucide-react)
+import { FileText, Barcode } from 'lucide-react';
+
+export const content = {
+  nav: [{ label: 'Billing', href: '#billing' }, { label: 'FAQ', href: '#faq' }],
+  hero: {
+    eyebrow: 'GST billing software · Inventory',
+    title: ['GST Billing & Inventory Software', 'for Indian Businesses'], // 2nd half is underlined
+    lead: 'Create GST invoices, manage stock and prepare GST summaries in one app.',
+    chips: ['Retail shops', 'Wholesalers'],
+    secondary: { label: 'See it in action', href: '#product' },
+  },
+  sections: [
+    { id: 'billing', eyebrow: 'Billing', title: 'GST Billing Software', body: '…',
+      items: [{ title: 'GST tax invoices', body: '…', icon: FileText }, { title: 'Barcode billing', body: '…', icon: Barcode }],
+      cta: { label: 'Book a billing demo', demo: true } },
+    { id: 'gst', variant: 'highlight', title: 'GSTR-1 & GSTR-3B reports', note: 'Summaries, not portal filing.', items: ['GSTR-1', 'GSTR-3B'] },
+    { use: 'audiences' },                       // place a tail block here instead of at the end
+  ],
+  audiences: { id: 'industries', title: 'Who it is for', items: [{ id: 'retail', title: 'Retail shops', body: '…', href: '/solutions/retail' }] },
+  steps: { title: 'How it works', steps: [{ name: 'Set up', text: '…' }, { name: 'Bill', text: '…' }, { name: 'Review', text: '…' }] },
+  faq: { title: 'Frequently asked questions', items: [{ q: 'What is BillPro?', a: '…' }] },
+  cta: { title: 'See BillPro with your business', body: '…', chips: ['Retail', 'Wholesale'] },
+  footer: { blurb: '…', tagline: 'Bill fast.', columns: [{ title: 'Product', links: [{ label: 'Log in', href: '/login', reload: true }] }] },
+};
+```
+
+Then prerender it and serve it (Express recipe below), or render it in your SPA / Next page.
+
+## Reference
+
+### `<LandingPage>`
+
+| Prop | Type | Default | Meaning |
+|---|---|---|---|
+| `brand` | `Brand` | required | `getBrand(id)` (auth-kit's brand objects) or your own `{ id, name, primary, accent?, logoSrc? }` |
+| `content` | `LandingContent` | required | `{ nav, login, hero, sections[], audiences, steps, faq, cta, footer }`; only `hero` is required |
+| `preview` | node | | e.g. `<PreviewFrame>…your app screen in HTML…</PreviewFrame>`, which rides over the hero |
+| `slots` | `{ [name]: node }` | | a product's own sections, placed by `{ use: '<name>' }` in `content.sections` |
+| `linkComponent` | component | `<a>` | react-router `Link` / next/link for in-app paths; gets `to` and `href` |
+| `onBookDemo` | `(button) => void` | | when hydrated; un-hydrated pages use `enhanceLanding` |
+| `home` | boolean | `true` | `false` on sub-pages: `#faq` links become `/#faq` |
+
+`content.sections[]` render in order after the hero. Each one is `FeatureSection` props, or
+`{ use: 'audiences' | 'steps' | 'faq' | 'cta' | 'preview' | <slot name> }`, or a React element. `audiences`, `steps`, `faq` and
+`cta` that are not placed with `use` follow the sections in that order. `login: null` hides "Log in".
+
+### Blocks (all exported, all usable on their own)
+
+| Block | Purpose |
+|---|---|
+| `MarketingLayout` | skip link + sticky `Header` + `<main>` + `DreamtreeFooter`; sets brand colours and context. Use it for sub-pages |
+| `Header` | brand lockup, nav, "Log in", "Book a demo", phone menu (`data-menu-toggle`, `#mobile-nav`) |
+| `Hero` / `PageHero` + `Breadcrumbs` | the page's one `h1` (`#hero-title`); `PageHero` adds breadcrumbs and `#answer` for sub-pages |
+| `PreviewFrame` | window chrome + "Demo data" badge + hidden heading/caption around your product screen |
+| `FeatureSection` | `variant`: `cards` (default) · `split` · `list` · `intro` · `highlight` (dark band + warning note) · `band` · `compare` · `links` · `detail`; `tone`: `plain` · `tinted` · `muted` · `dark` |
+| `Audiences` | who-it-is-for cards with anchors and links |
+| `HowItWorks` | numbered steps (feed the same steps to the HowTo JSON-LD) |
+| `Faq` | native `<details>`, every answer in the HTML |
+| `DemoCta` | the closing brand panel |
+| `DreamtreeFooter` | Dreamtree-Org mark, blurb, link columns, copyright bar |
+| `DemoDialog` | native `<dialog>` demo form: your `fields`, honeypot, consent + privacy line, `onSubmit(data)` |
+| `createDemoIsland(props)` | mounts `DemoDialog` on demand for un-hydrated pages; returns `{ openDemo }` |
+| `BookDemoButton`, `BrandLockup`, `Section`, `SectionIntro`, `TextLink`, `SmartLink` | building blocks |
+
+### `@dreamtree-org/landing-kit/enhance`
+
+`enhanceLanding(root = document, { openDemo | loadDemo, warmDemo, hash = '#book-demo' })`: wires
+`[data-menu-toggle]`, `[data-scroll-to]` and `[data-book-demo]` on a prerendered page. Returns `unwire()`.
+
+### `@dreamtree-org/landing-kit/seo` (pure: browser, Node, Next)
+
+| Function | Returns |
+|---|---|
+| `buildJsonLd({ site, product, org, page, faq, howTo, breadcrumbs, parts, keywords, speakable, lastmod })` | schema.org graph: Organization, WebSite, SoftwareApplication, WebPage, BreadcrumbList, FAQPage, HowTo |
+| `contentFacts(content)` | `{ faq, howTo, features, sections }` from a LandingPage content object, so page and JSON-LD cannot drift |
+| `buildHead({ site, page, product, jsonLd })` | `<title>`, description, canonical, OG/Twitter, llms alternate, JSON-LD script |
+| `buildRobots({ privatePaths, crawlers })` · `buildSitemap({ pages, lastmod })` · `buildLlmsTxt(…)` · `buildLlmsFullTxt(…)` | crawler files |
+| `jsonLdScript(graph)` · `pageUrl(path, site)` · `escapeHtml` | helpers |
+
+`site` defaults to `'__SITE_URL__'` (filled in at serve time). Pass a real origin when you have one, or `null`
+to emit a graph without URLs. No ratings, reviews or prices are ever generated; an `Offer` (with no price) only appears with `product.offers`.
+
+### `@dreamtree-org/landing-kit/server` (Express, CommonJS-safe, includes everything in `/seo`)
+
+| Function | Meaning |
+|---|---|
+| `landingRoutes(app, { dist, isPublicHost, hasSession, redirects, onSession, onPrivateHost, trailingSlash, rawFiles, manifest, cacheControl })` | serves `/` (visitors only, `Vary: Cookie`), every page in the manifest (default `landing-pages.json`; its paths are relative to its own directory), robots/sitemap/llms with the origin filled in, verification meta tags from env; 404s the raw files (`rawFiles: 'redirect'` 301s them to their page instead); `/x/` → 301 `/x` (`trailingSlash: 'serve'` answers both); `isPublicHost` may be async; a non-public host gets `Disallow: /` and, at `/`, `next()` or the app shell (`onPrivateHost: 'app-shell'`) |
+| `prerenderPages({ dist, pages, files, homeFile, pagesDir, manifest })` | build step: fills `%TITLE% %DESCRIPTION% %PATH% %JSONLD% %HEAD% <!--landing-->` per page, writes `landing.html`, `landing-pages/…`, the manifest and crawler files; throws on an unfilled slot before writing anything |
+| `sessionCheck({ cookie: 'JWT_TOKEN', bearer, verify })` | `hasSession(req)` from your own JWT check |
+| `siteUrl(req)` · `verificationTags(env)` · `readCookie` · `fillSite` | helpers |
+
+### CSS variables
+
+Set by `brand`: `--dt-brand`, `--dt-brand-accent`, `--dt-brand-panel`. Override on `.dt-landing`:
+`--dt-lp-bg`, `--dt-lp-surface`, `--dt-lp-muted-bg`, `--dt-lp-border`, `--dt-lp-text`, `--dt-lp-body`, `--dt-lp-muted`,
+`--dt-lp-radius`, `--dt-lp-max`, `--dt-lp-font`, `--dt-lp-header-h`.
+
+### Product extension points (0.1.1)
+
+Keep a product's own pictures and sections without forking markup:
+
+| Where | Prop | What it takes |
+|---|---|---|
+| `FeatureSection` `split` · `band` · `highlight` | `media`, `reverse` | your node (preview, figure, illustration) on the visual side; items become an icon row under the text; `reverse` puts the visual first |
+| `FeatureSection` | `cta` | one CtaSpec or an array (side by side) |
+| `FeatureSection` `split` / `detail` | `bullets` | a checklist under the text |
+| `FeatureSection` `intro` | `cta`, `glanceNote` | a CTA under the text; a note inside the "at a glance" card |
+| card items | `label` | a small kicker above the title ("01 · Visibility") |
+| `Hero` | `backdrop` | a decorative node behind the copy (aria-hidden) |
+| `Audiences` items | `media`, `features` | an illustration beside the heading; a short icon list |
+| `HowItWorks` | `cta` | a CTA under the steps |
+| `DemoCta` | `note`, `link` | a "what to tell us" box; a quiet link (e.g. Log in) |
+| `DemoDialog` | `validate` | `(form) => ({ field: message })`, inline errors before submit; an Error thrown by `onSubmit` with `fields` shows them too |
+| `landingRoutes` | `isPublicHost` async, `onPrivateHost`, `trailingSlash`, `rawFiles` | see `/server` above |
+
+## Recipes
+
+**Express + Vite, prerendered and un-hydrated (billpro / taskpro / venturepro).**
+
+```js
+// client/src/landing/main.jsx (landing.html's script)
+import '@dreamtree-org/landing-kit/styles.css';
+import { enhanceLanding } from '@dreamtree-org/landing-kit/enhance';
+enhanceLanding(document, { loadDemo: () => import('./demoIsland.jsx') });
+
+// client/src/landing/demoIsland.jsx
+import { createDemoIsland, getBrand } from '@dreamtree-org/landing-kit';
+export const { openDemo } = createDemoIsland({ brand: getBrand('billpro'), fields, onSubmit: postDemoRequest });
+
+// client/scripts/prerender-landing.mjs, after vite builds landing.html + the SSR entry
+const { prerenderPages } = await import('@dreamtree-org/landing-kit/server');
+prerenderPages({ dist, pages: mod.renderPages(today), files: { 'robots.txt': robots, 'sitemap.xml': map, 'llms.txt': llms } });
+
+// server.js (before express.static)
+const { landingRoutes, sessionCheck } = require('@dreamtree-org/landing-kit/server');
+landingRoutes(app, {
+  dist: path.join(__dirname, 'client/dist'),
+  isPublicHost: (req) => req.context?.domainKind === 'shared' && req.context?.domainCompanyId == null,
+  hasSession: sessionCheck({ verify: (t) => tokenService.verify(t).success === true }),
+  redirects: { '/solutions': '/#solutions' },
+});
+```
+
+**SPA, hydrated.** `<LandingPage brand={brand} content={content} linkComponent={Link} onBookDemo={() => setOpen(true)} />`
+and render `<DemoDialog open={open} onClose={…} onSubmit={…} brand={brand} />`.
+
+**Next.js (App Router).** The components are `'use client'`. For SEO, build in server code:
+`<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: jsonLdScript(buildJsonLd({ site: origin, … })) }} />`,
+and in `app/robots.ts` / `app/sitemap.ts` use `buildRobots` / `buildSitemap` with `site: origin`, or return Next's metadata objects from the same data.
+
+## What it deliberately does NOT do
+
+- No product copy, prices, ratings or customer counts. Every word comes from your content file.
+- No product screenshots. `PreviewFrame` frames the HTML preview you write (and may style with Tailwind).
+- No HTTP for the demo form. `onSubmit` is yours (korm `submitDemoRequest`, fetch, anything). It does not store consent either.
+- No Vite/Next build plugin. You keep your own landing.html, SSR entry and build; the package fills and writes the files.
+- No icon library. Pass lucide (or any) components.
+
+## License
+
+MIT

package/auth.css

@@ -0,0 +1,195 @@
+/*
+ * @dreamtree-org/auth-kit — the shared auth frame.
+ * A product sets --dt-brand (and optionally --dt-brand-accent / --dt-brand-panel)
+ * through the `brand` prop; every other colour is derived here so all products
+ * share the same contrast, spacing and shape.
+ */
+.dt-auth {
+  --dt-brand: #1e3a6e;
+  --dt-brand-accent: var(--dt-brand);
+  --dt-brand-panel: color-mix(in oklab, var(--dt-brand) 82%, black);
+  --dt-brand-soft: color-mix(in oklab, var(--dt-brand) 12%, white);
+  --dt-auth-bg: #f6f7f9;
+  --dt-auth-card: #ffffff;
+  --dt-auth-border: #e4e7ec;
+  --dt-auth-text: #101828;
+  --dt-auth-muted: #667085;
+  --dt-auth-radius: 0.75rem;
+  --dt-auth-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-height: 100dvh;
+  background: var(--dt-auth-bg);
+  color: var(--dt-auth-text);
+  font-family: var(--dt-auth-font);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+    env(safe-area-inset-left);
+  overflow-x: hidden;
+  -webkit-text-size-adjust: 100%;
+}
+.dt-auth *,
+.dt-auth *::before,
+.dt-auth *::after { box-sizing: border-box; }
+
+:root[data-theme='dark'] .dt-auth,
+.dark .dt-auth {
+  --dt-brand-panel: color-mix(in oklab, var(--dt-brand) 55%, #0b0f17);
+  --dt-auth-bg: #0b0f17;
+  --dt-auth-card: #131a26;
+  --dt-auth-border: #243042;
+  --dt-auth-text: #e6eaf2;
+  --dt-auth-muted: #98a2b3;
+}
+
+/* Platform doors get a darker, unmistakable panel so an admin never confuses them */
+.dt-auth--platform { --dt-brand-panel: color-mix(in oklab, var(--dt-brand) 30%, #0b0f17); }
+
+/* ---- brand panel (desktop only) ---- */
+.dt-auth-panel { display: none; }
+@media (min-width: 1024px) {
+  .dt-auth { flex-direction: row; }
+  .dt-auth-panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 40%;
+    max-width: 640px;
+    padding: 2.5rem;
+    background: var(--dt-brand-panel);
+    color: #fff;
+  }
+}
+.dt-auth-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: inherit;
+  text-decoration: none;
+}
+.dt-auth-brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
+.dt-auth-brand--mobile {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--dt-brand);
+}
+.dt-auth-brand--mobile .dt-auth-brand-name { font-size: 1.125rem; }
+@media (min-width: 1024px) { .dt-auth-brand--mobile { display: none; } }
+
+.dt-auth-monogram {
+  display: inline-grid;
+  place-items: center;
+  border-radius: 0.5rem;
+  background: var(--dt-brand-accent);
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.95em;
+}
+.dt-auth-panel .dt-auth-monogram { background: var(--dt-brand-accent); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); }
+.dt-auth-mark-img { display: block; object-fit: contain; }
+/* A dark logo must stay visible on the dark brand panel */
+.dt-auth-panel .dt-auth-mark-img { background: #fff; border-radius: 0.375rem; padding: 0.1875rem; }
+.dt-auth-mark-node { display: inline-flex; color: var(--dt-brand-accent); }
+.dt-auth-panel .dt-auth-mark-node { color: var(--dt-brand-accent); }
+
+.dt-auth-badge {
+  margin-left: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  background: rgb(255 255 255 / 0.14);
+  border: 1px solid rgb(255 255 255 / 0.24);
+}
+.dt-auth-brand--mobile .dt-auth-badge { background: var(--dt-brand-soft); border-color: transparent; }
+
+.dt-auth-pitch h2 { margin: 0; color: #fff; font-size: 1.875rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
+.dt-auth-pitch p { margin: 1rem 0 0; max-width: 28rem; line-height: 1.6; color: rgb(255 255 255 / 0.8); }
+.dt-auth-pitch ul { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
+.dt-auth-pitch li { position: relative; padding-left: 1.5rem; color: rgb(255 255 255 / 0.88); font-size: 0.9375rem; }
+.dt-auth-pitch li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.45em;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 999px;
+  background: var(--dt-brand-accent);
+  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.15);
+}
+.dt-auth-panel-foot { margin: 0; font-size: 0.75rem; color: rgb(255 255 255 / 0.6); }
+
+/* ---- form side ---- */
+.dt-auth-main {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+@media (min-width: 640px) { .dt-auth-main { padding: 2rem; } }
+.dt-auth-column { width: 100%; max-width: 28rem; }
+.dt-auth-card {
+  background: var(--dt-auth-card);
+  border: 1px solid var(--dt-auth-border);
+  border-radius: var(--dt-auth-radius);
+  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
+  padding: 1.5rem;
+}
+@media (min-width: 640px) { .dt-auth-card { padding: 2rem; } }
+.dt-auth-head { margin-bottom: 1.5rem; }
+.dt-auth-head h1 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--dt-auth-text); }
+.dt-auth-head p { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--dt-auth-muted); }
+
+.dt-auth-footer { margin-top: 1rem; text-align: center; font-size: 0.875rem; color: var(--dt-auth-muted); }
+/* Host apps often colour bare h2/p globally (Tailwind @layer base); keep the frame's own colours */
+.dt-auth-footer p { color: inherit; }
+/* Only real links take the brand colour; an inert <a> (no href, or aria-disabled) keeps its own style */
+.dt-auth-footer a[href]:not([aria-disabled='true']) { color: var(--dt-brand); font-weight: 500; text-decoration: none; }
+.dt-auth-footer a[href]:not([aria-disabled='true']):hover { text-decoration: underline; }
+.dt-auth-legal {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--dt-auth-muted);
+}
+.dt-auth-legal-item { display: inline-flex; align-items: center; gap: 0.75rem; }
+.dt-auth-legal-link { color: inherit; text-decoration: none; }
+.dt-auth-legal-link:hover { color: var(--dt-brand); text-decoration: underline; }
+
+/* ---- phones ---- */
+.dt-auth-column,
+.dt-auth-card { min-width: 0; }
+.dt-auth-card { overflow-wrap: anywhere; }
+.dt-auth-legal-link,
+.dt-auth-footer a { display: inline-block; padding: 0.375rem 0.125rem; } /* ≥24px tap target */
+@media (max-width: 639px) {
+  /* iOS Safari zooms into any focused field under 16px — keep the page still */
+  .dt-auth input,
+  .dt-auth select,
+  .dt-auth textarea { font-size: 16px; }
+  .dt-auth-main { align-items: flex-start; padding-top: 2rem; }
+}
+@media (max-width: 359px) {
+  .dt-auth-main { padding: 1.25rem 0.75rem; }
+  .dt-auth-card { padding: 1.125rem; border-radius: 0.625rem; }
+  .dt-auth-head h1 { font-size: 1.125rem; }
+}
+/* Short landscape phones: don't vertically centre a form taller than the screen */
+@media (max-height: 560px) {
+  .dt-auth-main { align-items: flex-start; }
+}
+
+/* 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; }

package/auth.d.ts

@@ -0,0 +1,2 @@
+export type { BrandId, Brand, LegalLink, AuthShellProps } from './index.js';
+export { AuthShell, brandStyle, brands, getBrand } from './index.js';