@dreamtree-org/landing-kit 0.2.1 → 0.5.0

package/index.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, CSSProperties, ReactElement, ReactNode } from 'react';
 
-/** Products with a built-in brand entry. */
+/** @deprecated Products with a built-in brand entry. Keep the brand in dreamtree.brand.json instead (removed in 0.5.0). */
 export type BrandId =
   | 'billpro'
   | 'taskpro'
@@ -51,13 +51,86 @@ export interface AuthShellProps {
   /** react-router `Link` or next/link; receives both `to` and `href`. */
   linkComponent?: ComponentType<any> | undefined;
   className?: string | undefined;
+  /**
+   * Hidden demo-accounts panel: tapping the heading `taps` (default 4) times reveals a row of
+   * role chips under the form. `load` runs on reveal (use `fetchDemoAccounts`); `onSelect` fills
+   * the form. Nothing renders when `load` returns no accounts (demo mode off).
+   */
+  demoAccounts?: AuthDemoAccounts | undefined;
+}
+
+export interface DemoAccount {
+  /** Chip text, e.g. "Admin", "Manager". */
+  label: string;
+  /** Email, username or mobile the login form takes. */
+  identifier: string;
+  password: string;
+  /** Company / workspace / shop slug, for logins scoped to one. */
+  company?: string | undefined;
+  role?: string | undefined;
+}
+
+export interface DemoAccountsResponse {
+  accounts: DemoAccount[];
+  /** Shown under the chips; derived when every account has the same password. */
+  sharedPassword?: string | undefined;
+}
+
+export interface AuthDemoAccounts {
+  load: () => Promise<DemoAccountsResponse | DemoAccount[]>;
+  onSelect: (account: DemoAccount) => void;
+  taps?: number | undefined;
+}
+
+export interface DemoAccountsProps {
+  load: AuthDemoAccounts['load'];
+  onSelect?: AuthDemoAccounts['onSelect'] | undefined;
+  className?: string | undefined;
 }
 
 export declare function AuthShell(props: AuthShellProps): ReactElement;
+/** The chip row AuthShell reveals; render it yourself for a login outside AuthShell. */
+export declare function DemoAccounts(props: DemoAccountsProps): ReactElement | null;
+/** `taps` clicks, each within `windowMs` of the last, set `revealed` for the page's life. */
+export declare function useTapReveal(opts?: { taps?: number; windowMs?: number }): {
+  revealed: boolean;
+  tapProps: { onClick: () => void; style: CSSProperties };
+};
+export declare const DEMO_ACCOUNTS_URL: '/api/auth/demo-accounts';
+/** GET the product's demo accounts; 404 (demo mode off) or any error resolves to `{ accounts: [] }`. */
+export declare function fetchDemoAccounts(url?: string, init?: RequestInit): Promise<DemoAccountsResponse>;
+export declare function normalizeDemoAccounts(data: unknown): DemoAccountsResponse;
+/** Company-first logins: keep the picked account (sessionStorage) for the password step. */
+export declare function stashDemoFill(account: DemoAccount): void;
+/** Read and clear what `stashDemoFill` kept; null when nothing was picked. */
+export declare function takeDemoFill(): { identifier: string; password: string; company?: string } | null;
 export declare function brandStyle(brand: Brand): CSSProperties;
+/** @deprecated Keep the brand in dreamtree.brand.json and use toLandingBrand() (removed in 0.5.0). */
 export declare const brands: Record<string, Brand>;
+/** @deprecated Keep the brand in dreamtree.brand.json and use toLandingBrand() (removed in 0.5.0). */
 export declare function getBrand(id: BrandId | (string & {})): Brand;
 
+/** The parts of a product's dreamtree.brand.json (twreact-ui's brand format) that landing-kit reads. */
+export interface BrandFile {
+  id?: string;
+  name?: string;
+  label?: string;
+  logo?: { mark?: string; wordmark?: string; [key: string]: string | undefined };
+  color?: { primary?: Partial<Record<'50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950', string>> };
+  role?: { shell?: string | { light?: string; dark?: string } };
+  marketing?: { primary?: string; accent?: string; panel?: string };
+}
+
+/** The product's content for the brand panel and landing hero (not part of the brand file). */
+export type BrandCopy = Partial<Pick<Brand, 'headline' | 'pitch' | 'points' | 'category' | 'platformHeadline' | 'platformPitch' | 'mark' | 'logoSrc'>>;
+
+/**
+ * Map a product's dreamtree.brand.json to the Brand AuthShell, MarketingLayout and LandingPage take.
+ * primary = marketing.primary ?? color.primary.600; accent = marketing.accent ?? color.primary.300;
+ * panel = marketing.panel ?? role.shell; logoSrc = logo.mark.
+ */
+export declare function toLandingBrand(file: BrandFile, copy?: BrandCopy): Brand;
+
 /** A lucide-react style component (`Receipt`) or an element (`<Receipt />`). */
 export type Icon = ComponentType<any> | ReactElement;
 export interface NavLink { label: string; href: string; reload?: boolean }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/landing-kit",
-  "version": "0.2.1",
+  "version": "0.5.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"
     },
+    "./demo-server": {
+      "types": "./demo-server.d.ts",
+      "import": "./dist/demo-server.js",
+      "require": "./dist/demo-server.cjs"
+    },
     "./enhance": {
       "types": "./enhance.d.ts",
       "import": "./dist/enhance.js",
@@ -55,6 +60,7 @@
     "auth.d.ts",
     "server.d.ts",
     "seo.d.ts",
+    "demo-server.d.ts",
     "enhance.d.ts",
     "README.md",
     "MIGRATION.md",

package/styles.css

@@ -808,6 +808,48 @@ html:has(.dt-landing) { scroll-behavior: smooth; scroll-padding-top: calc(var(--
 .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; }