@dreamtree-org/landing-kit 0.10.0 → 0.10.1

package/dist/platform.js

@@ -36,7 +36,7 @@ function readPlatformCsrf(cookieString, name) {
   return null;
 }
 function joinUrl(basePath, path, query) {
-  const base2 = basePath.replace(/\/+$/, "");
+  const base3 = basePath.replace(/\/+$/, "");
   const rel = path ? `/${String(path).replace(/^\/+/, "")}` : "";
   const params = new URLSearchParams();
   for (const [k, v] of Object.entries(query != null ? query : {})) {
@@ -44,7 +44,7 @@ function joinUrl(basePath, path, query) {
     params.append(k, String(v));
   }
   const qs = params.toString();
-  return `${base2}${rel}${qs ? `?${qs}` : ""}`;
+  return `${base3}${rel}${qs ? `?${qs}` : ""}`;
 }
 function createPlatformClient(opts = {}) {
   var _a, _b, _c, _d, _e;
@@ -2780,10 +2780,10 @@ function PlatformConsole({
   const browser = useBrowserLocation(!routed);
   const pathname = routed ? givenPath : browser.pathname;
   const navigate = givenNavigate != null ? givenNavigate : browser.navigate;
-  const base2 = `/${trim(basePath)}`.replace(/\/$/, "") || "";
+  const base3 = `/${trim(basePath)}`.replace(/\/$/, "") || "";
   const client = useMemo3(
-    () => given != null ? given : createPlatformClient({ basePath: apiBasePath, loginPath: loginPath != null ? loginPath : `${base2}/login` }),
-    [given, apiBasePath, loginPath, base2]
+    () => given != null ? given : createPlatformClient({ basePath: apiBasePath, loginPath: loginPath != null ? loginPath : `${base3}/login` }),
+    [given, apiBasePath, loginPath, base3]
   );
   const Link = useMemo3(() => makeLink(linkAs, navigate), [linkAs, navigate]);
   const [me, setMe] = useState14(initialMe);
@@ -2797,7 +2797,7 @@ function PlatformConsole({
   useEffect7(() => {
     void reloadMe();
   }, [reloadMe]);
-  const href = useCallback4((rel2 = "") => `${base2}/${trim(rel2)}`.replace(/\/$/, "") || "/", [base2]);
+  const href = useCallback4((rel2 = "") => `${base3}/${trim(rel2)}`.replace(/\/$/, "") || "/", [base3]);
   const companyLoginPath = useCallback4(
     (slug) => {
       var _a2, _b2;
@@ -2815,10 +2815,10 @@ function PlatformConsole({
       await client.post("auth/logout", {}, { skipAuthRedirect: true });
     } finally {
       if (onSignOut) onSignOut();
-      else if (typeof window !== "undefined") window.location.assign(loginPath != null ? loginPath : `${base2}/login`);
+      else if (typeof window !== "undefined") window.location.assign(loginPath != null ? loginPath : `${base3}/login`);
     }
   };
-  const rel = pathname.startsWith(base2) ? pathname.slice(base2.length) : pathname;
+  const rel = pathname.startsWith(base3) ? pathname.slice(base3.length) : pathname;
   const route = matchConsoleRoute(rel, visiblePages);
   const gate = me && me.access && me.access.console === false;
   const active = (prefix) => prefix === "" ? route.view === "overview" : trim(rel) === prefix || trim(rel).startsWith(`${prefix}/`);
@@ -2844,7 +2844,7 @@ function PlatformConsole({
     features: enabled,
     companyLoginPath,
     companyLoginUrl: (slug) => `${origin}${companyLoginPath(slug)}`,
-    loginUrl: `${origin}${loginPath != null ? loginPath : `${base2}/login`}`,
+    loginUrl: `${origin}${loginPath != null ? loginPath : `${base3}/login`}`,
     brand,
     appName: appName != null ? appName : (_a = me == null ? void 0 : me.app) == null ? void 0 : _a.name
   };
@@ -2867,7 +2867,7 @@ function PlatformConsole({
 
 // src/platform/PlatformLogin.jsx
 import React17, { useMemo as useMemo4, useState as useState17 } from "react";
-import { Alert as Alert9, Button as Button13, Input as Input11 } from "@dreamtree-org/twreact-ui";
+import { Alert as Alert10, Button as Button13, Input as Input11 } from "@dreamtree-org/twreact-ui";
 
 // src/AuthShell.jsx
 import { useId } from "react";
@@ -2928,12 +2928,115 @@ function DemoAccounts({ load, onSelect, className = "" }) {
   ] });
 }
 
+// src/DreamtreeSso.jsx
+import { useEffect as useEffect9, useRef as useRef4 } 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 Fragment7, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var base2 = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+  focusable: "false"
+};
+var make2 = (paths) => function Icon({ size = 16, className = "dt-lp-icon" }) {
+  return /* @__PURE__ */ jsx19("svg", { ...base2, width: size, height: size, className, children: paths });
+};
+var ArrowRight = make2(/* @__PURE__ */ jsx19("path", { d: "M5 12h14M13 6l6 6-6 6" }));
+var ChevronRight = make2(/* @__PURE__ */ jsx19("path", { d: "m9 6 6 6-6 6" }));
+var Check = make2(/* @__PURE__ */ jsx19("path", { d: "M20 6 9 17l-5-5" }));
+var Help = make2(
+  /* @__PURE__ */ jsxs17(Fragment7, { children: [
+    /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx19("path", { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01" })
+  ] })
+);
+var Alert9 = make2(
+  /* @__PURE__ */ jsxs17(Fragment7, { children: [
+    /* @__PURE__ */ jsx19("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__ */ jsx19("path", { d: "M12 9v4M12 17h.01" })
+  ] })
+);
+var MenuIcon = make2(/* @__PURE__ */ jsx19("path", { d: "M4 6h16M4 12h16M4 18h16" }));
+var Close = make2(/* @__PURE__ */ jsx19("path", { d: "M18 6 6 18M6 6l12 12" }));
+var Calendar = make2(
+  /* @__PURE__ */ jsxs17(Fragment7, { children: [
+    /* @__PURE__ */ jsx19("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx19("path", { d: "M16 2v4M8 2v4M3 10h18m-12 6 2 2 4-4" })
+  ] })
+);
+
+// src/DreamtreeSso.jsx
+import { Fragment as Fragment8, jsx as jsx20, jsxs as jsxs18 } 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 = useRef4(false);
+  useEffect9(() => {
+    if (!autoRedirect || redirected.current) return;
+    redirected.current = true;
+    window.location.assign(href);
+  }, [autoRedirect, href]);
+  const button = /* @__PURE__ */ jsxs18("a", { className: "dt-auth-sso-btn", href, children: [
+    /* @__PURE__ */ jsx20("span", { children: label }),
+    /* @__PURE__ */ jsx20(ArrowRight, { size: 16, className: "dt-auth-sso-icon" })
+  ] });
+  if (isSso) {
+    return /* @__PURE__ */ jsxs18("div", { className: "dt-auth-sso dt-auth-sso--only", children: [
+      autoRedirect ? /* @__PURE__ */ jsxs18("p", { className: "dt-auth-sso-status", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx20("span", { className: "dt-auth-sso-spinner", "aria-hidden": "true" }),
+        "Redirecting to Dreamtree ID\u2026"
+      ] }) : null,
+      button
+    ] });
+  }
+  return /* @__PURE__ */ jsxs18(Fragment8, { children: [
+    /* @__PURE__ */ jsx20("div", { className: "dt-auth-sso", children: button }),
+    /* @__PURE__ */ jsx20("div", { className: "dt-auth-or", children: /* @__PURE__ */ jsx20("span", { children: "or" }) }),
+    children
+  ] });
+}
+
 // src/useTapReveal.js
-import { useCallback as useCallback5, useRef as useRef4, useState as useState16 } from "react";
+import { useCallback as useCallback5, useRef as useRef5, useState as useState16 } from "react";
 function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
   const [revealed, setRevealed] = useState16(false);
-  const count = useRef4(0);
-  const last = useRef4(0);
+  const count = useRef5(0);
+  const last = useRef5(0);
   const onClick = useCallback5(() => {
     if (revealed) return;
     const now = Date.now();
@@ -2945,7 +3048,7 @@ function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
 }
 
 // src/AuthShell.jsx
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var DEFAULT_LEGAL = [
   { label: "Privacy Policy", href: "/privacy" },
   { label: "Terms", href: "/terms" },
@@ -2953,10 +3056,10 @@ var DEFAULT_LEGAL = [
 ];
 function BrandMark({ brand, size }) {
   if (brand.logoSrc) {
-    return /* @__PURE__ */ jsx19("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
+    return /* @__PURE__ */ jsx21("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
   }
-  if (brand.mark) return /* @__PURE__ */ jsx19("span", { className: "dt-auth-mark-node", children: brand.mark });
-  return /* @__PURE__ */ jsx19("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
+  if (brand.mark) return /* @__PURE__ */ jsx21("span", { className: "dt-auth-mark-node", children: brand.mark });
+  return /* @__PURE__ */ jsx21("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
 }
 function brandStyle(brand) {
   return {
@@ -2975,7 +3078,8 @@ function AuthShell({
   legalLinks = DEFAULT_LEGAL,
   linkComponent: LinkComponent,
   className = "",
-  demoAccounts
+  demoAccounts,
+  ssoProvider
 }) {
   var _a, _b;
   const headingId = useId();
@@ -2983,44 +3087,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__ */ jsx19(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ jsx19("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
-  return /* @__PURE__ */ jsxs17(
+  const renderLink = (l) => LinkComponent ? /* @__PURE__ */ jsx21(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ jsx21("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: `dt-auth ${isPlatform ? "dt-auth--platform" : ""} ${className}`,
       style: brandStyle(brand),
       "data-product": brand.id,
       children: [
-        /* @__PURE__ */ jsxs17("aside", { className: "dt-auth-panel", children: [
-          /* @__PURE__ */ jsxs17("a", { href: "/", className: "dt-auth-brand", children: [
-            /* @__PURE__ */ jsx19(BrandMark, { brand, size: 28 }),
-            /* @__PURE__ */ jsx19("span", { className: "dt-auth-brand-name", children: brand.name }),
-            isPlatform ? /* @__PURE__ */ jsx19("span", { className: "dt-auth-badge", children: "Platform" }) : null
+        /* @__PURE__ */ jsxs19("aside", { className: "dt-auth-panel", children: [
+          /* @__PURE__ */ jsxs19("a", { href: "/", className: "dt-auth-brand", children: [
+            /* @__PURE__ */ jsx21(BrandMark, { brand, size: 28 }),
+            /* @__PURE__ */ jsx21("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ jsx21("span", { className: "dt-auth-badge", children: "Platform" }) : null
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "dt-auth-pitch", children: [
-            /* @__PURE__ */ jsx19("h2", { children: headline }),
-            pitch ? /* @__PURE__ */ jsx19("p", { children: pitch }) : null,
-            !isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx19("ul", { children: brand.points.map((p) => /* @__PURE__ */ jsx19("li", { children: p }, p)) }) : null
+          /* @__PURE__ */ jsxs19("div", { className: "dt-auth-pitch", children: [
+            /* @__PURE__ */ jsx21("h2", { children: headline }),
+            pitch ? /* @__PURE__ */ jsx21("p", { children: pitch }) : null,
+            !isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx21("ul", { children: brand.points.map((p) => /* @__PURE__ */ jsx21("li", { children: p }, p)) }) : null
           ] }),
-          /* @__PURE__ */ jsx19("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
+          /* @__PURE__ */ jsx21("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
         ] }),
-        /* @__PURE__ */ jsx19("main", { className: "dt-auth-main", children: /* @__PURE__ */ jsxs17("div", { className: "dt-auth-column", children: [
-          /* @__PURE__ */ jsxs17("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
-            /* @__PURE__ */ jsx19(BrandMark, { brand, size: 24 }),
-            /* @__PURE__ */ jsx19("span", { className: "dt-auth-brand-name", children: brand.name }),
-            isPlatform ? /* @__PURE__ */ jsx19("span", { className: "dt-auth-badge", children: "Platform" }) : null
+        /* @__PURE__ */ jsx21("main", { className: "dt-auth-main", children: /* @__PURE__ */ jsxs19("div", { className: "dt-auth-column", children: [
+          /* @__PURE__ */ jsxs19("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
+            /* @__PURE__ */ jsx21(BrandMark, { brand, size: 24 }),
+            /* @__PURE__ */ jsx21("span", { className: "dt-auth-brand-name", children: brand.name }),
+            isPlatform ? /* @__PURE__ */ jsx21("span", { className: "dt-auth-badge", children: "Platform" }) : null
           ] }),
-          /* @__PURE__ */ jsxs17("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
-            /* @__PURE__ */ jsxs17("header", { className: "dt-auth-head", children: [
-              /* @__PURE__ */ jsx19("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
-              subtitle ? /* @__PURE__ */ jsx19("p", { children: subtitle }) : null
+          /* @__PURE__ */ jsxs19("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
+            /* @__PURE__ */ jsxs19("header", { className: "dt-auth-head", children: [
+              /* @__PURE__ */ jsx21("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
+              subtitle ? /* @__PURE__ */ jsx21("p", { children: subtitle }) : null
             ] }),
-            children,
-            demoAccounts && revealed ? /* @__PURE__ */ jsx19(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
+            ssoProvider ? /* @__PURE__ */ jsx21(DreamtreeSso, { provider: ssoProvider, children }) : children,
+            demoAccounts && revealed && (ssoProvider == null ? void 0 : ssoProvider.mode) !== "sso" ? /* @__PURE__ */ jsx21(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
           ] }),
-          footer ? /* @__PURE__ */ jsx19("div", { className: "dt-auth-footer", children: footer }) : null,
-          (legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ jsx19("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ jsxs17("span", { className: "dt-auth-legal-item", children: [
-            i > 0 ? /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", children: "\xB7" }) : null,
+          footer ? /* @__PURE__ */ jsx21("div", { className: "dt-auth-footer", children: footer }) : null,
+          (legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ jsx21("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ jsxs19("span", { className: "dt-auth-legal-item", children: [
+            i > 0 ? /* @__PURE__ */ jsx21("span", { "aria-hidden": "true", children: "\xB7" }) : null,
             renderLink(l)
           ] }, l.href)) }) : null
         ] }) })
@@ -3030,7 +3134,7 @@ function AuthShell({
 }
 
 // src/platform/PlatformLogin.jsx
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function PlatformLogin({ brand, basePath, client: given, onSignedIn, redirectTo = "/platform", title = "Platform administration", subtitle = "Administrator sign-in", linkComponent, legalLinks }) {
   const client = useMemo4(() => given != null ? given : createPlatformClient({ basePath, onUnauthorized: () => {
   } }), [given, basePath]);
@@ -3080,17 +3184,17 @@ function PlatformLogin({ brand, basePath, client: given, onSignedIn, redirectTo
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx20(AuthShell, { brand, variant: "platform", title, subtitle, linkComponent, legalLinks, children: step === "password" ? /* @__PURE__ */ jsxs18("form", { onSubmit: submitPassword, className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx20(Input11, { label: "Admin email", type: "email", autoComplete: "username", autoFocus: true, value: email, onChange: (e) => setEmail(e.target.value) }),
-    /* @__PURE__ */ jsx20(Input11, { label: "Password", type: "password", autoComplete: "current-password", value: password, onChange: (e) => setPassword(e.target.value) }),
-    error && /* @__PURE__ */ jsx20(Alert9, { variant: "error", children: error }),
-    /* @__PURE__ */ jsx20(Button13, { type: "submit", loading: busy, disabled: !email || !password, fullWidth: true, children: "Sign in" })
-  ] }) : /* @__PURE__ */ jsxs18("form", { onSubmit: submitCode, className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ jsx20("p", { className: "text-sm", children: "Enter the 6-digit code from your authenticator app." }),
-    /* @__PURE__ */ jsx20(Input11, { label: "Authenticator code", otp: true, autoFocus: true, value: code, onChange: (e) => setCode(e.target.value.replace(/\s/g, "")) }),
-    error && /* @__PURE__ */ jsx20(Alert9, { variant: "error", children: error }),
-    /* @__PURE__ */ jsx20(Button13, { type: "submit", loading: busy, disabled: code.length < 6, fullWidth: true, children: "Verify" }),
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(AuthShell, { brand, variant: "platform", title, subtitle, linkComponent, legalLinks, children: step === "password" ? /* @__PURE__ */ jsxs20("form", { onSubmit: submitPassword, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx22(Input11, { label: "Admin email", type: "email", autoComplete: "username", autoFocus: true, value: email, onChange: (e) => setEmail(e.target.value) }),
+    /* @__PURE__ */ jsx22(Input11, { label: "Password", type: "password", autoComplete: "current-password", value: password, onChange: (e) => setPassword(e.target.value) }),
+    error && /* @__PURE__ */ jsx22(Alert10, { variant: "error", children: error }),
+    /* @__PURE__ */ jsx22(Button13, { type: "submit", loading: busy, disabled: !email || !password, fullWidth: true, children: "Sign in" })
+  ] }) : /* @__PURE__ */ jsxs20("form", { onSubmit: submitCode, className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx22("p", { className: "text-sm", children: "Enter the 6-digit code from your authenticator app." }),
+    /* @__PURE__ */ jsx22(Input11, { label: "Authenticator code", otp: true, autoFocus: true, value: code, onChange: (e) => setCode(e.target.value.replace(/\s/g, "")) }),
+    error && /* @__PURE__ */ jsx22(Alert10, { variant: "error", children: error }),
+    /* @__PURE__ */ jsx22(Button13, { type: "submit", loading: busy, disabled: code.length < 6, fullWidth: true, children: "Verify" }),
+    /* @__PURE__ */ jsx22(
       Button13,
       {
         variant: "ghost",

package/index.d.ts

@@ -57,6 +57,26 @@ export interface AuthShellProps {
    * the form. Nothing renders when `load` returns no accounts (demo mode off).
    */
   demoAccounts?: AuthDemoAccounts | undefined;
+  /**
+   * Dreamtree ID single sign-on (DTID-32). Absent = today's local form, unchanged.
+   * 'hybrid' adds a "Continue with Dreamtree" button and an "or" divider above `children`;
+   * 'sso' drops `children` (and the demo-accounts panel) and redirects to the start URL on mount.
+   */
+  ssoProvider?: SsoProvider | undefined;
+}
+
+export interface SsoProvider {
+  /** The app's SSO entry point, e.g. '/auth/sso/start'. May already carry a query or #hash. */
+  startUrl: string;
+  mode: 'hybrid' | 'sso';
+  /** Button text. Default "Continue with Dreamtree". */
+  label?: string | undefined;
+  /** Sent as `dt_company` (the /c/[slug]/login company). */
+  companySlug?: string | undefined;
+  /** Sent as `return_to`: where the app lands after sign-in. */
+  returnTo?: string | undefined;
+  /** 'sso' only: redirect with window.location.assign after mount. Default true; the button always stays as a fallback. */
+  autoRedirect?: boolean | undefined;
 }
 
 export interface DemoAccount {
@@ -89,6 +109,11 @@ export interface DemoAccountsProps {
 }
 
 export declare function AuthShell(props: AuthShellProps): ReactElement;
+/**
+ * `startUrl` plus `return_to` / `dt_company` (URI-encoded, replacing same-named params already
+ * there; other params and the #hash are kept). Pure: safe during SSR.
+ */
+export declare function buildSsoUrl(startUrl: string, opts?: Pick<SsoProvider, 'returnTo' | 'companySlug'>): string;
 /** 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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/landing-kit",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "The shared marketing site, auth frame (AuthShell + brands) and Platform admin console for every Dreamtree product: content-driven landing pages, login/signup shell, platform console client, Express routes, prerender and SEO files.",
   "author": {
     "name": "Partha Preetham Krishna",
@@ -106,7 +106,8 @@
     "esbuild": "^0.25.0",
     "express": "^4.22.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1"
   },
   "engines": {
     "node": ">=18"

package/styles.css

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