@dreamtree-org/landing-kit 0.10.0 → 0.10.1

package/README.md

@@ -261,6 +261,7 @@ export default function Login() {
 | `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) |
+| `ssoProvider` | `{ startUrl, mode, label?, companySlug?, returnTo?, autoRedirect? }` | | "Continue with Dreamtree" (Dreamtree ID single sign-on, below) |
 
 #### Hidden demo accounts (every product, same behaviour)
 
@@ -321,6 +322,45 @@ Company-first logins pick the chip on the company step: call `stashDemoFill(acco
 `takeDemoFill()` when the password step mounts (sessionStorage, read once). Outside AuthShell, render
 `<DemoAccounts load onSelect />` behind `useTapReveal()` yourself.
 
+#### Dreamtree ID single sign-on (`ssoProvider`)
+
+Each app maps its `AUTH_MODE` env to `ssoProvider`: `local` → leave it out (the card is byte-for-byte what it
+was), `hybrid` → a **Continue with Dreamtree** button and an "or" divider above your form, `sso` → no form, a
+"Redirecting to Dreamtree ID…" status (`role="status"`) and `window.location.assign` after mount, with the
+same button kept as the fallback if JS or the redirect fails.
+
+```jsx
+// hybrid: the local form stays, Dreamtree goes on top
+<AuthShell
+  brand={brand}
+  title="Sign in"
+  ssoProvider={{ startUrl: '/auth/sso/start', mode: 'hybrid', companySlug: slug, returnTo: '/dashboard' }}
+>
+  <LoginForm />
+</AuthShell>
+
+// sso: Dreamtree only; children (and the demo-accounts panel) are not rendered
+<AuthShell
+  brand={brand}
+  title="Sign in"
+  ssoProvider={{ startUrl: '/auth/sso/start', mode: 'sso', companySlug: params.slug, returnTo: searchParams.get('next') ?? '/' }}
+/>
+```
+
+| Field | Type | Default | Meaning |
+|---|---|---|---|
+| `startUrl` | `string` | required | the app's SSO entry point (`/auth/sso/start`); may already have a query or `#hash` |
+| `mode` | `'hybrid' \| 'sso'` | required | see above |
+| `label` | `string` | `"Continue with Dreamtree"` | button text (its accessible name) |
+| `companySlug` | `string` | | sent as `dt_company` (the `/c/[slug]/login` company) |
+| `returnTo` | `string` | | sent as `return_to`; leave it out and the app's start route picks its default |
+| `autoRedirect` | `boolean` | `true` in `sso` | `false` shows only the button (no status, no redirect); ignored in `hybrid` |
+
+The link is `buildSsoUrl(startUrl, { returnTo, companySlug })` (also exported): both values are URI-encoded,
+replace same-named params already on `startUrl`, and every other param and the `#hash` are kept. It is pure
+string work, so server rendering never touches `window`; the redirect happens only in an effect, once per
+mount. The spinner does not animate under `prefers-reduced-motion`.
+
 ### `@dreamtree-org/landing-kit/enhance`
 
 `enhanceLanding(root = document, { openDemo | loadDemo, warmDemo, hash = '#book-demo' })`: wires

package/auth.css

@@ -209,6 +209,63 @@
 .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; }
 
+/* ---- Dreamtree ID single sign-on (ssoProvider, DTID-32) ---- */
+.dt-auth-sso-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--dt-brand);
+  border-radius: 0.5rem;
+  background: var(--dt-brand);
+  color: #fff;
+  font: inherit;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 120ms;
+}
+.dt-auth-sso-btn:hover { background: color-mix(in oklab, var(--dt-brand) 88%, black); }
+.dt-auth-sso-btn:focus-visible { outline: 2px solid var(--dt-brand); outline-offset: 2px; }
+.dt-auth-sso-icon { flex: none; }
+.dt-auth-or {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.25rem 0;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--dt-auth-muted);
+}
+.dt-auth-or::before,
+.dt-auth-or::after { content: ''; flex: 1; border-top: 1px solid var(--dt-auth-border); }
+.dt-auth-sso-status {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
+  color: var(--dt-auth-muted);
+}
+.dt-auth-sso-spinner {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--dt-brand-soft);
+  border-top-color: var(--dt-brand);
+  border-radius: 999px;
+  animation: dt-auth-sso-spin 0.8s linear infinite;
+}
+@keyframes dt-auth-sso-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .dt-auth-sso-spinner { animation: none; }
+  .dt-auth-sso-btn { transition: none; }
+}
+
 /* ---- phones ---- */
 .dt-auth-column,
 .dt-auth-card { min-width: 0; }

package/auth.d.ts

@@ -1,3 +1,3 @@
-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 { BrandId, Brand, LegalLink, AuthShellProps, SsoProvider, AuthDemoAccounts, DemoAccount, DemoAccountsResponse, DemoAccountsProps } from './index.js';
+export { AuthShell, buildSsoUrl, brandStyle, brands, getBrand, toLandingBrand, DemoAccounts, useTapReveal, DEMO_ACCOUNTS_URL, fetchDemoAccounts, normalizeDemoAccounts, stashDemoFill, takeDemoFill } from './index.js';
 export type { BrandFile, BrandCopy } from './index.js';

package/dist/auth.cjs

@@ -25,6 +25,7 @@ __export(auth_exports, {
   DemoAccounts: () => DemoAccounts,
   brandStyle: () => brandStyle,
   brands: () => brands,
+  buildSsoUrl: () => buildSsoUrl,
   fetchDemoAccounts: () => fetchDemoAccounts,
   getBrand: () => getBrand,
   normalizeDemoAccounts: () => normalizeDemoAccounts,
@@ -36,7 +37,7 @@ __export(auth_exports, {
 module.exports = __toCommonJS(auth_exports);
 
 // src/AuthShell.jsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // src/DemoAccounts.jsx
 var import_react = require("react");
@@ -122,13 +123,116 @@ function DemoAccounts({ load, onSelect, className = "" }) {
   ] });
 }
 
-// src/useTapReveal.js
+// src/DreamtreeSso.jsx
+var import_react3 = require("react");
+
+// src/sso.js
+function decodeKey(part) {
+  const key = part.split("=")[0];
+  try {
+    return decodeURIComponent(key.replace(/\+/g, " "));
+  } catch {
+    return key;
+  }
+}
+function buildSsoUrl(startUrl, { returnTo, companySlug } = {}) {
+  const raw = String(startUrl != null ? startUrl : "");
+  const hashAt = raw.indexOf("#");
+  const hash = hashAt === -1 ? "" : raw.slice(hashAt);
+  const beforeHash = hashAt === -1 ? raw : raw.slice(0, hashAt);
+  const queryAt = beforeHash.indexOf("?");
+  const path = queryAt === -1 ? beforeHash : beforeHash.slice(0, queryAt);
+  const query = queryAt === -1 ? "" : beforeHash.slice(queryAt + 1);
+  const add = [
+    ["return_to", returnTo],
+    ["dt_company", companySlug]
+  ].filter(([, v]) => v != null && v !== "");
+  const replaced = new Set(add.map(([k]) => k));
+  const params = query.split("&").filter((p) => p && !replaced.has(decodeKey(p))).concat(add.map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`));
+  return `${path}${params.length ? `?${params.join("&")}` : ""}${hash}`;
+}
+
+// src/icons.jsx
 var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var base = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+  focusable: "false"
+};
+var make = (paths) => function Icon({ size = 16, className = "dt-lp-icon" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...base, width: size, height: size, className, children: paths });
+};
+var ArrowRight = make(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 12h14M13 6l6 6-6 6" }));
+var ChevronRight = make(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m9 6 6 6-6 6" }));
+var Check = make(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20 6 9 17l-5-5" }));
+var Help = make(
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01" })
+  ] })
+);
+var Alert = make(
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 9v4M12 17h.01" })
+  ] })
+);
+var MenuIcon = make(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 6h16M4 12h16M4 18h16" }));
+var Close = make(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }));
+var Calendar = make(
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M16 2v4M8 2v4M3 10h18m-12 6 2 2 4-4" })
+  ] })
+);
+
+// src/DreamtreeSso.jsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_SSO_LABEL = "Continue with Dreamtree";
+function DreamtreeSso({ provider, children }) {
+  const { startUrl, mode, label = DEFAULT_SSO_LABEL, companySlug, returnTo } = provider;
+  const isSso = mode === "sso";
+  const autoRedirect = isSso && provider.autoRedirect !== false;
+  const href = buildSsoUrl(startUrl, { returnTo, companySlug });
+  const redirected = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    if (!autoRedirect || redirected.current) return;
+    redirected.current = true;
+    window.location.assign(href);
+  }, [autoRedirect, href]);
+  const button = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("a", { className: "dt-auth-sso-btn", href, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowRight, { size: 16, className: "dt-auth-sso-icon" })
+  ] });
+  if (isSso) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "dt-auth-sso dt-auth-sso--only", children: [
+      autoRedirect ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "dt-auth-sso-status", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "dt-auth-sso-spinner", "aria-hidden": "true" }),
+        "Redirecting to Dreamtree ID\u2026"
+      ] }) : null,
+      button
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dt-auth-sso", children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dt-auth-or", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "or" }) }),
+    children
+  ] });
+}
+
+// src/useTapReveal.js
+var import_react4 = 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)(() => {
+  const [revealed, setRevealed] = (0, import_react4.useState)(false);
+  const count = (0, import_react4.useRef)(0);
+  const last = (0, import_react4.useRef)(0);
+  const onClick = (0, import_react4.useCallback)(() => {
     if (revealed) return;
     const now = Date.now();
     count.current = now - last.current <= windowMs ? count.current + 1 : 1;
@@ -139,7 +243,7 @@ function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
 }
 
 // src/AuthShell.jsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var DEFAULT_LEGAL = [
   { label: "Privacy Policy", href: "/privacy" },
   { label: "Terms", href: "/terms" },
@@ -147,10 +251,10 @@ var DEFAULT_LEGAL = [
 ];
 function BrandMark({ brand, size }) {
   if (brand.logoSrc) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
   }
-  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) });
+  if (brand.mark) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dt-auth-mark-node", children: brand.mark });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
 }
 function brandStyle(brand) {
   return {
@@ -169,52 +273,53 @@ function AuthShell({
   legalLinks = DEFAULT_LEGAL,
   linkComponent: LinkComponent,
   className = "",
-  demoAccounts
+  demoAccounts,
+  ssoProvider
 }) {
   var _a, _b;
-  const headingId = (0, import_react3.useId)();
+  const headingId = (0, import_react5.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_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)(
+  const renderLink = (l) => LinkComponent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: `dt-auth ${isPlatform ? "dt-auth--platform" : ""} ${className}`,
       style: brandStyle(brand),
       "data-product": brand.id,
       children: [
-        /* @__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_runtime4.jsxs)("aside", { className: "dt-auth-panel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("a", { href: "/", className: "dt-auth-brand", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrandMark, { brand, size: 28 }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : 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_runtime4.jsxs)("div", { className: "dt-auth-pitch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: headline }),
+            pitch ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: pitch }) : null,
+            !isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { children: brand.points.map((p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: p }, p)) }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
         ] }),
-        /* @__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_runtime4.jsx)("main", { className: "dt-auth-main", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dt-auth-column", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrandMark, { brand, size: 24 }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dt-auth-badge", children: "Platform" }) : 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
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "dt-auth-head", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
+              subtitle ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: subtitle }) : null
             ] }),
-            children,
-            demoAccounts && revealed ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
+            ssoProvider ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DreamtreeSso, { provider: ssoProvider, children }) : children,
+            demoAccounts && revealed && (ssoProvider == null ? void 0 : ssoProvider.mode) !== "sso" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : 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,
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dt-auth-footer", children: footer }) : null,
+          (legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "dt-auth-legal-item", children: [
+            i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: "\xB7" }) : null,
             renderLink(l)
           ] }, l.href)) }) : null
         ] }) })

package/dist/auth.js

@@ -87,12 +87,115 @@ function DemoAccounts({ load, onSelect, className = "" }) {
   ] });
 }
 
+// src/DreamtreeSso.jsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/sso.js
+function decodeKey(part) {
+  const key = part.split("=")[0];
+  try {
+    return decodeURIComponent(key.replace(/\+/g, " "));
+  } catch {
+    return key;
+  }
+}
+function buildSsoUrl(startUrl, { returnTo, companySlug } = {}) {
+  const raw = String(startUrl != null ? startUrl : "");
+  const hashAt = raw.indexOf("#");
+  const hash = hashAt === -1 ? "" : raw.slice(hashAt);
+  const beforeHash = hashAt === -1 ? raw : raw.slice(0, hashAt);
+  const queryAt = beforeHash.indexOf("?");
+  const path = queryAt === -1 ? beforeHash : beforeHash.slice(0, queryAt);
+  const query = queryAt === -1 ? "" : beforeHash.slice(queryAt + 1);
+  const add = [
+    ["return_to", returnTo],
+    ["dt_company", companySlug]
+  ].filter(([, v]) => v != null && v !== "");
+  const replaced = new Set(add.map(([k]) => k));
+  const params = query.split("&").filter((p) => p && !replaced.has(decodeKey(p))).concat(add.map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`));
+  return `${path}${params.length ? `?${params.join("&")}` : ""}${hash}`;
+}
+
+// src/icons.jsx
+import { createElement, isValidElement } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var base = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+  focusable: "false"
+};
+var make = (paths) => function Icon({ size = 16, className = "dt-lp-icon" }) {
+  return /* @__PURE__ */ jsx2("svg", { ...base, width: size, height: size, className, children: paths });
+};
+var ArrowRight = make(/* @__PURE__ */ jsx2("path", { d: "M5 12h14M13 6l6 6-6 6" }));
+var ChevronRight = make(/* @__PURE__ */ jsx2("path", { d: "m9 6 6 6-6 6" }));
+var Check = make(/* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" }));
+var Help = make(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01" })
+  ] })
+);
+var Alert = make(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 9v4M12 17h.01" })
+  ] })
+);
+var MenuIcon = make(/* @__PURE__ */ jsx2("path", { d: "M4 6h16M4 12h16M4 18h16" }));
+var Close = make(/* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }));
+var Calendar = make(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M16 2v4M8 2v4M3 10h18m-12 6 2 2 4-4" })
+  ] })
+);
+
+// src/DreamtreeSso.jsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_SSO_LABEL = "Continue with Dreamtree";
+function DreamtreeSso({ provider, children }) {
+  const { startUrl, mode, label = DEFAULT_SSO_LABEL, companySlug, returnTo } = provider;
+  const isSso = mode === "sso";
+  const autoRedirect = isSso && provider.autoRedirect !== false;
+  const href = buildSsoUrl(startUrl, { returnTo, companySlug });
+  const redirected = useRef2(false);
+  useEffect2(() => {
+    if (!autoRedirect || redirected.current) return;
+    redirected.current = true;
+    window.location.assign(href);
+  }, [autoRedirect, href]);
+  const button = /* @__PURE__ */ jsxs3("a", { className: "dt-auth-sso-btn", href, children: [
+    /* @__PURE__ */ jsx3("span", { children: label }),
+    /* @__PURE__ */ jsx3(ArrowRight, { size: 16, className: "dt-auth-sso-icon" })
+  ] });
+  if (isSso) {
+    return /* @__PURE__ */ jsxs3("div", { className: "dt-auth-sso dt-auth-sso--only", children: [
+      autoRedirect ? /* @__PURE__ */ jsxs3("p", { className: "dt-auth-sso-status", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx3("span", { className: "dt-auth-sso-spinner", "aria-hidden": "true" }),
+        "Redirecting to Dreamtree ID\u2026"
+      ] }) : null,
+      button
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3("div", { className: "dt-auth-sso", children: button }),
+    /* @__PURE__ */ jsx3("div", { className: "dt-auth-or", children: /* @__PURE__ */ jsx3("span", { children: "or" }) }),
+    children
+  ] });
+}
+
 // src/useTapReveal.js
-import { useCallback, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback, useRef as useRef3, useState as useState2 } from "react";
 function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
   const [revealed, setRevealed] = useState2(false);
-  const count = useRef2(0);
-  const last = useRef2(0);
+  const count = useRef3(0);
+  const last = useRef3(0);
   const onClick = useCallback(() => {
     if (revealed) return;
     const now = Date.now();
@@ -104,7 +207,7 @@ function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
 }
 
 // src/AuthShell.jsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_LEGAL = [
   { label: "Privacy Policy", href: "/privacy" },
   { label: "Terms", href: "/terms" },
@@ -112,10 +215,10 @@ var DEFAULT_LEGAL = [
 ];
 function BrandMark({ brand, size }) {
   if (brand.logoSrc) {
-    return /* @__PURE__ */ jsx2("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
+    return /* @__PURE__ */ jsx4("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
   }
-  if (brand.mark) return /* @__PURE__ */ jsx2("span", { className: "dt-auth-mark-node", children: brand.mark });
-  return /* @__PURE__ */ jsx2("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
+  if (brand.mark) return /* @__PURE__ */ jsx4("span", { className: "dt-auth-mark-node", children: brand.mark });
+  return /* @__PURE__ */ jsx4("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
 }
 function brandStyle(brand) {
   return {
@@ -134,7 +237,8 @@ function AuthShell({
   legalLinks = DEFAULT_LEGAL,
   linkComponent: LinkComponent,
   className = "",
-  demoAccounts
+  demoAccounts,
+  ssoProvider
 }) {
   var _a, _b;
   const headingId = useId();
@@ -142,44 +246,44 @@ function AuthShell({
   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__ */ jsx2(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ jsx2("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
-  return /* @__PURE__ */ jsxs2(
+  const renderLink = (l) => LinkComponent ? /* @__PURE__ */ jsx4(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ jsx4("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: `dt-auth ${isPlatform ? "dt-auth--platform" : ""} ${className}`,
       style: brandStyle(brand),
       "data-product": brand.id,
       children: [
-        /* @__PURE__ */ jsxs2("aside", { className: "dt-auth-panel", children: [
-          /* @__PURE__ */ jsxs2("a", { href: "/", className: "dt-auth-brand", children: [
-            /* @__PURE__ */ jsx2(BrandMark, { brand, size: 28 }),
-            /* @__PURE__ */ jsx2("span", { className: "dt-auth-brand-name", children: brand.name }),
-            isPlatform ? /* @__PURE__ */ jsx2("span", { className: "dt-auth-badge", children: "Platform" }) : null
+        /* @__PURE__ */ jsxs4("aside", { className: "dt-auth-panel", children: [
+          /* @__PURE__ */ jsxs4("a", { href: "/", className: "dt-auth-brand", children: [
+            /* @__PURE__ */ jsx4(BrandMark, { brand, size: 28 }),
+            /* @__PURE__ */ jsx4("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ jsx4("span", { className: "dt-auth-badge", children: "Platform" }) : null
           ] }),
-          /* @__PURE__ */ jsxs2("div", { className: "dt-auth-pitch", children: [
-            /* @__PURE__ */ jsx2("h2", { children: headline }),
-            pitch ? /* @__PURE__ */ jsx2("p", { children: pitch }) : null,
-            !isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx2("ul", { children: brand.points.map((p) => /* @__PURE__ */ jsx2("li", { children: p }, p)) }) : null
+          /* @__PURE__ */ jsxs4("div", { className: "dt-auth-pitch", children: [
+            /* @__PURE__ */ jsx4("h2", { children: headline }),
+            pitch ? /* @__PURE__ */ jsx4("p", { children: pitch }) : null,
+            !isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx4("ul", { children: brand.points.map((p) => /* @__PURE__ */ jsx4("li", { children: p }, p)) }) : null
           ] }),
-          /* @__PURE__ */ jsx2("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
+          /* @__PURE__ */ jsx4("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
         ] }),
-        /* @__PURE__ */ jsx2("main", { className: "dt-auth-main", children: /* @__PURE__ */ jsxs2("div", { className: "dt-auth-column", children: [
-          /* @__PURE__ */ jsxs2("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
-            /* @__PURE__ */ jsx2(BrandMark, { brand, size: 24 }),
-            /* @__PURE__ */ jsx2("span", { className: "dt-auth-brand-name", children: brand.name }),
-            isPlatform ? /* @__PURE__ */ jsx2("span", { className: "dt-auth-badge", children: "Platform" }) : null
+        /* @__PURE__ */ jsx4("main", { className: "dt-auth-main", children: /* @__PURE__ */ jsxs4("div", { className: "dt-auth-column", children: [
+          /* @__PURE__ */ jsxs4("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
+            /* @__PURE__ */ jsx4(BrandMark, { brand, size: 24 }),
+            /* @__PURE__ */ jsx4("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ jsx4("span", { className: "dt-auth-badge", children: "Platform" }) : null
           ] }),
-          /* @__PURE__ */ jsxs2("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
-            /* @__PURE__ */ jsxs2("header", { className: "dt-auth-head", children: [
-              /* @__PURE__ */ jsx2("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
-              subtitle ? /* @__PURE__ */ jsx2("p", { children: subtitle }) : null
+          /* @__PURE__ */ jsxs4("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
+            /* @__PURE__ */ jsxs4("header", { className: "dt-auth-head", children: [
+              /* @__PURE__ */ jsx4("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
+              subtitle ? /* @__PURE__ */ jsx4("p", { children: subtitle }) : null
             ] }),
-            children,
-            demoAccounts && revealed ? /* @__PURE__ */ jsx2(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
+            ssoProvider ? /* @__PURE__ */ jsx4(DreamtreeSso, { provider: ssoProvider, children }) : children,
+            demoAccounts && revealed && (ssoProvider == null ? void 0 : ssoProvider.mode) !== "sso" ? /* @__PURE__ */ jsx4(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
           ] }),
-          footer ? /* @__PURE__ */ jsx2("div", { className: "dt-auth-footer", children: footer }) : null,
-          (legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ jsx2("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ jsxs2("span", { className: "dt-auth-legal-item", children: [
-            i > 0 ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\xB7" }) : null,
+          footer ? /* @__PURE__ */ jsx4("div", { className: "dt-auth-footer", children: footer }) : null,
+          (legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ jsx4("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ jsxs4("span", { className: "dt-auth-legal-item", children: [
+            i > 0 ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\xB7" }) : null,
             renderLink(l)
           ] }, l.href)) }) : null
         ] }) })
@@ -345,6 +449,7 @@ export {
   DemoAccounts,
   brandStyle,
   brands,
+  buildSsoUrl,
   fetchDemoAccounts,
   getBrand,
   normalizeDemoAccounts,