cal looks like the rest of Hanzo, and an empty field reads as empty

The app mounts <Hanzo> from @hanzo/ui with its stylesheet instead of a stock gui config, so the Booker reads hanzo.ai's own tokens. @hanzo/ui 8.27.89 draws a placeholder at the ink's 45% and the value at the full ink, and @hanzo/booker 8.3.7 carries no sample-data placeholders ("Your name", "[email protected]"), a white pill Confirm (black on light) and a quiet Back. The page follows the device's light or dark, as hanzo.ai and its checkout do, painted in <head> before first paint. Grounds are the checkout's: #000 or #fff, fields on #171717 / #ededed under the #2e2e2e / #d5d5d5 hairline. One layout, the mark then one card, on every page: the landing's frame around the Booker's own card is gone, the booking page is a single card with a white-pill Keep it, and the popup embed draws the Booker bare inside its panel, which follows the device too. An embedded document decides it is framed in <head>, so it is see-through before React mounts. Co-authored-by: Hanzo Dev <[email protected]>
2026-10-16 20:43:01 +00:00 · 2026-10-16 01:09:01 -07:00
parent 6207e90927
commit 5d5a97f993
14 changed files with 677 additions and 377 deletions
@@ -10,11 +10,15 @@
    "preview": "vite preview --host --port 3000"
  },
  "dependencies": {
-    "@hanzo/booker": "^8.3.6",
-    "@hanzo/event": "^0.3.21",
+    "@hanzo/appearance": "0.2.7",
+    "@hanzo/booker": "^8.3.7",
+    "@hanzo/event": "^0.3.57",
    "@hanzo/font": "^1.8.11",
    "@hanzo/gui": "8.3.5",
+    "@hanzo/ui": "^8.27.89",
+    "@hanzogui/animations-css": "8.3.5",
    "@hanzogui/config": "8.3.5",
+    "@hanzogui/telemetry": "8.3.5",
    "react": "19.2.8",
    "react-dom": "19.2.8",
    "react-native-web": "^0.21.2",
@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+// Every page cal.hanzo.ai serves at the top level: the mark, then one card.
+// The card is the Booker's own (or the booking page's), never a second frame
+// drawn around it.
+export function Page({ children }: { children: ReactNode }) {
+  return (
+    <main className="page">
+      <header className="nav">
+        <a className="brand" href="https://hanzo.ai">
+          <img className="brand-mark" src="/logo.svg" alt="" width={22} height={22} />
+          Hanzo
+        </a>
+      </header>
+      {children}
+    </main>
+  );
+}
@@ -47,7 +47,6 @@ const PANEL: Style = {
  "max-height": "760px",
  "border-radius": "12px",
  overflow: "hidden",
-  "background-color": "#0b0b0d",
 };
 const BAR: Style = {
  display: "flex",
@@ -58,18 +57,14 @@ const BAR: Style = {
  "font-family": "system-ui, -apple-system, sans-serif",
  "font-size": "13px",
  "line-height": "1.2",
-  color: "#f3f4f6",
-  "background-color": "#0b0b0d",
 };
 const LABEL: Style = {
  "font-family": "system-ui, -apple-system, sans-serif",
  "font-size": "13px",
-  color: "#9ca3af",
 };
 const DISMISS: Style = {
  "font-family": "system-ui, -apple-system, sans-serif",
  "font-size": "13px",
-  color: "#f3f4f6",
  background: "transparent",
  border: "0",
  padding: "2px 6px",
@@ -134,19 +129,20 @@ export function mount(el: Element): void {
 *  overlay is cal.hanzo.ai's, not the page's. */
 export function open(pk: string): void {
  close();
+  const ink = scheme();
  const root = document.createElement("div");
  apply(root, SCRIM);

  const panel = document.createElement("div");
-  apply(panel, PANEL);
+  apply(panel, { ...PANEL, "background-color": ink.ground });

  const bar = document.createElement("div");
-  apply(bar, BAR);
+  apply(bar, { ...BAR, color: ink.text, "background-color": ink.ground });
  const who = document.createElement("span");
-  apply(who, LABEL);
+  apply(who, { ...LABEL, color: ink.quiet });
  who.textContent = new URL(origin).host;
  const dismiss = document.createElement("button");
-  apply(dismiss, DISMISS);
+  apply(dismiss, { ...DISMISS, color: ink.text });
  dismiss.textContent = "Close";
  dismiss.addEventListener("click", () => close());
  bar.append(who, dismiss);
@@ -162,6 +158,16 @@ export function open(pk: string): void {
  scrim = root;
 }

+/** The popup's ground and ink. The booker inside the frame follows the
+ *  device's light or dark, and this reads the same device, so the panel around
+ *  it agrees with it: the checkout's black or white, and its two inks. */
+function scheme(): { ground: string; text: string; quiet: string } {
+  const light = typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: light)").matches;
+  return light
+    ? { ground: "#ffffff", text: "#0a0a0a", quiet: "#525252" }
+    : { ground: "#000000", text: "#ededed", quiet: "#a3a3a3" };
+}
+
 /** close dismisses the popup. */
 export function close(): void {
  if (!scrim) return;
@@ -1,7 +0,0 @@
-// The hanzogui (Tamagui) config the GuiProvider needs — same recipe the
-// @hanzo/booker render harness proved. @hanzo/booker renders inside GuiProvider.
-import { defaultConfig } from "@hanzogui/config/v4";
-import { createGui } from "hanzogui";
-
-export const config = createGui(defaultConfig);
-export default config;
@@ -1,16 +1,21 @@
 import "@hanzo/font/css";
+import "@hanzo/ui/styles.css";
+import "./styles.css";

 import { AnalyticsProvider } from "@hanzo/event/react";
-import { GuiProvider } from "hanzogui";
+import { Hanzo } from "@hanzo/ui";
 import { createRoot } from "react-dom/client";

 import { App } from "./App";
 import { analytics } from "./analytics";
-import { config } from "./gui";
-import "./styles.css";
+import { SCHEME } from "./scheme";

-// No StrictMode: its double-invoke trips a Tamagui update-depth loop on the
-// marketing page's embedded booker. The Booker itself is idempotent in prod.
+// <Hanzo> is the root every Hanzo surface mounts: @hanzo/ui's gui config and
+// tokens, so the Booker's fields, pills and placeholder read the same values as
+// hanzo.ai's own forms. Its stylesheet is a real file (styles.css above).
+//
+// No StrictMode: its double-invoke trips a gui update-depth loop on the
+// Booker. The Booker itself is idempotent in prod.
 //
 // autoPageview is off — it defaults ON, and @hanzo/event stamps `url` and `path`
 // on every event it builds. One route here is /booking/<uid>, and that uid is the
@@ -19,8 +24,8 @@ import "./styles.css";
 // name in analytics.ts, so the funnel loses nothing by not counting pages.
 createRoot(document.getElementById("root")!).render(
  <AnalyticsProvider client={analytics} autoPageview={false}>
-    <GuiProvider config={config} defaultTheme="dark">
+    <Hanzo appearance={{ install: SCHEME }}>
      <App />
-    </GuiProvider>
+    </Hanzo>
  </AnalyticsProvider>
 );
@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";

 import { calendarApi } from "../api";
 import { booked, useShown } from "../analytics";
+import { Page } from "../Page";

 /** The query names a link may fill the details step with, as a Cal.com link does. */
 const PREFILL = ["name", "email", "notes"] as const;
@@ -36,15 +37,17 @@ export function Booking() {
  useShown("page", target);

  return (
-    <Booker
-      host={owner}
-      eventSlug={slug}
-      apiUrl={calendarApi}
-      prefill={prefill}
-      onBooked={(booking) => {
-        booked("page", target);
-        if (booking?.uid) navigate(`/booking/${booking.uid}`);
-      }}
-    />
+    <Page>
+      <Booker
+        host={owner}
+        eventSlug={slug}
+        apiUrl={calendarApi}
+        prefill={prefill}
+        onBooked={(booking) => {
+          booked("page", target);
+          if (booking?.uid) navigate(`/booking/${booking.uid}`);
+        }}
+      />
+    </Page>
  );
 }
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";

 import { calendarApi } from "../api";
+import { Page } from "../Page";

 type Booking = {
  uid: string;
@@ -59,20 +60,20 @@ export function Confirmation() {

  if (error) {
    return (
-      <main className="shell">
+      <Page>
        <div className="card">
          <p className="muted">{error}</p>
        </div>
-      </main>
+      </Page>
    );
  }
  if (!booking) {
    return (
-      <main className="shell">
+      <Page>
        <div className="card">
          <p className="muted">Loading…</p>
        </div>
-      </main>
+      </Page>
    );
  }

@@ -81,7 +82,7 @@ export function Confirmation() {
  const attendee = booking.attendees?.[0];

  return (
-    <main className="shell">
+    <Page>
      <div className="card">
        <div className={`badge ${canceled ? "badge-off" : "badge-on"}`}>
          {canceled ? "Canceled" : "Confirmed"}
@@ -122,6 +123,6 @@ export function Confirmation() {
          </button>
        )}
      </div>
-    </main>
+    </Page>
  );
 }
@@ -16,7 +16,6 @@ export function Embed() {
  const target = resolve(pk);
  const parent = loader(params.get("parent"));

-  useTransparentPage();
  usePostedHeight(parent);
  useEscapeToClose(parent);
  useShown(surface, target);
@@ -31,25 +30,18 @@ export function Embed() {

  return (
    <main className="embed">
+      {/* The popup's panel is already the card, so the Booker draws none. */}
      <Booker
        host={target.host}
        eventSlug={target.eventSlug}
        apiUrl={calendarApi}
+        bare={surface === "popup"}
        onBooked={() => booked(surface, target)}
      />
    </main>
  );
 }

-// An embedded document paints no background of its own, so the booker sits on
-// whatever the host page already has.
-function useTransparentPage() {
-  useEffect(() => {
-    document.documentElement.classList.add("framed");
-    return () => document.documentElement.classList.remove("framed");
-  }, []);
-}
-
 // The address of every message back to the page around us: embed.js names its
 // own origin in ?parent=, and the browser delivers there or nowhere. A "*"
 // targetOrigin is delivered to whatever the parent happens to be, and a frame
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";

 import { calendarApi } from "../api";
 import { booked, useShown } from "../analytics";
+import { Page } from "../Page";

 // The team calendar for booking time with Hanzo
 const TEAM = { host: "hanzo", eventSlug: "intro" };
@@ -14,27 +15,16 @@ export function Home() {
  useShown("page", TEAM);

  return (
-    <main className="landing">
-      <header className="nav">
-        <span className="brand">
-          <img className="brand-mark" src="/logo.svg" alt="" width={22} height={22} />
-          Hanzo
-        </span>
-      </header>
-
-      <section className="booker-stage">
-        <div className="booker-frame">
-          <Booker
-            host={TEAM.host}
-            eventSlug={TEAM.eventSlug}
-            apiUrl={calendarApi}
-            onBooked={(booking) => {
-              booked("page", TEAM);
-              if (booking?.uid) navigate(`/booking/${booking.uid}`);
-            }}
-          />
-        </div>
-      </section>
-    </main>
+    <Page>
+      <Booker
+        host={TEAM.host}
+        eventSlug={TEAM.eventSlug}
+        apiUrl={calendarApi}
+        onBooked={(booking) => {
+          booked("page", TEAM);
+          if (booking?.uid) navigate(`/booking/${booking.uid}`);
+        }}
+      />
+    </Page>
  );
 }
@@ -0,0 +1,7 @@
+import type { Preference } from "@hanzo/appearance";
+
+// This surface's own default, under a choice the visitor made: it follows the
+// device, light or dark, as hanzo.ai and its checkout do. The boot script in
+// index.html paints it before first paint (vite.config.ts); <Hanzo> keeps
+// following it after.
+export const SCHEME: Preference = { theme: "system" };
@@ -1,21 +1,18 @@
+/* cal.hanzo.ai on @hanzo/ui's tokens (`@hanzo/ui/styles.css`, imported first in
+   main.tsx). Nothing here restates a colour design already publishes; it names
+   the page ground and lays out the one card.
+
+   The ground is the checkout's: black in dark, white in light. Design's own
+   ground is a rung off each (#0a0a0a, #f7f7f7), and hanzo.ai and its checkout
+   paint the pure ends, so this page does too. Fields sit on `--muted` (#171717 /
+   #ededed) under the `--border` hairline, which is #2e2e2e / #d5d5d5 over them. */
 :root {
-  /* Dark monochrome. */
-  --bg: #0a0a0a;
-  --card: #141414;
-  --ink: #ededed;
-  --muted: #8a8a8a;
-  --line: #262626;
-  --accent: #ededed;
-  --on: #ededed;
-  --off: #8a8a8a;
-  --sans: 'Zen', -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Helvetica, Arial, sans-serif;
-  --mono: 'Zen Mono', ui-monospace, "SF Mono", Menlo,
-    Consolas, monospace;
+  --background: #000000;
 }

-* {
-  box-sizing: border-box;
+:root.light,
+:root.t_light {
+  --background: #ffffff;
 }

 html,
@@ -26,50 +23,85 @@ body,
 }

 body {
-  background: var(--bg);
-  color: var(--ink);
-  font-family: var(--sans);
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans), sans-serif;
  -webkit-font-smoothing: antialiased;
 }

-code,
-.hero-note code,
-.foot code {
-  font-family: var(--mono);
+/* ── The page: the mark, then the one card ─────────────────────────────────── */
+.page {
+  max-width: 908px;
+  margin: 0 auto;
+  padding: 16px 16px 48px;
 }

-/* The shell hosts our own light pages (landing, confirmation). The Booker itself
-   ships Cal's Tailwind styling and renders inside its own wrapper. */
-.shell {
+.nav {
  display: flex;
  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 24px;
+  padding: 8px 0 24px;
 }

+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: -0.01em;
+  color: var(--foreground);
+  text-decoration: none;
+}
+
+.brand-mark {
+  display: block;
+}
+
+/* The mark is drawn white; on the light ground it is drawn black. */
+:root.light .brand-mark,
+:root.t_light .brand-mark {
+  filter: invert(1);
+}
+
+@media (min-width: 640px) {
+  .page {
+    padding: 24px 24px 64px;
+  }
+  .nav {
+    padding: 12px 0 40px;
+  }
+}
+
+/* ── The booking page (/booking/:uid) ──────────────────────────────────────── */
 .card {
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 32px;
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px;
  max-width: 480px;
-  width: 100%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .card {
+    padding: 32px;
+  }
 }

 .card h1 {
-  font-size: 22px;
-  margin: 8px 0 6px;
+  font-size: 21px;
+  letter-spacing: -0.02em;
+  margin: 12px 0 6px;
 }

 .muted {
-  color: var(--muted);
+  color: var(--muted-foreground);
  font-size: 14px;
+  margin: 0;
 }

 .when {
-  font-size: 16px;
+  font-size: 15px;
  font-weight: 600;
  margin: 4px 0;
 }
@@ -80,51 +112,59 @@ code,
  word-break: break-word;
 }

-code {
-  background: var(--card);
-  padding: 2px 6px;
-  border-radius: 6px;
-  font-size: 13px;
-}
-
 .badge {
  display: inline-block;
  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
-  margin-bottom: 8px;
+  background: var(--muted);
+  border: 1px solid var(--border);
 }

 .badge-on {
-  background: var(--card);
-  border: 1px solid var(--line);
-  color: var(--on);
+  color: var(--foreground);
 }

 .badge-off {
-  background: var(--card);
-  border: 1px solid var(--line);
-  color: var(--off);
+  color: var(--muted-foreground);
+}
+
+/* Two kinds of control and no third: the one answer the page prefers is the
+   white pill (black in light), and everything else is quiet. */
+.keep,
+.cancel {
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.keep {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border: 1px solid var(--primary);
+}
+
+.keep:hover {
+  background: var(--primary-hover);
+  border-color: var(--primary-hover);
 }

 .cancel {
  margin-top: 20px;
  background: transparent;
-  color: var(--off);
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 10px 16px;
-  font-size: 14px;
-  cursor: pointer;
+  color: var(--muted-foreground);
+  border: 1px solid var(--border);
 }

 .cancel:hover {
-  border-color: var(--off);
+  color: var(--foreground);
 }

+.keep:disabled,
 .cancel:disabled {
  opacity: 0.6;
  cursor: default;
@@ -140,233 +180,27 @@ code {

 /* Keeping the booking is the answer this page prefers, so it looks like one and
   the destructive answer is the quiet one below it. */
-.keep {
-  background: transparent;
-  color: var(--ink);
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 10px 16px;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.keep:hover {
-  border-color: var(--ink);
-}
-
 .confirm .cancel {
  margin-top: 0;
  border: 0;
-  padding: 4px 8px;
+  padding: 6px 12px;
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #0b0b0d;
-    --card: #151517;
-    --ink: #f3f4f6;
-    --muted: #9ca3af;
-    --line: #26262b;
-  }
-  code {
-    background: #26262b;
-  }
+/* ── Framed in someone else's page ─────────────────────────────────────────── */
+/* Paint no ground of our own; the booker's card carries its own. The scheme
+   script stamps `color-scheme` on <html>, and a frame whose color-scheme
+   differs from its host's is given an opaque backdrop by the browser, which
+   would paint a dark slab around the card on a light page. The frame keeps
+   the host's default, so it stays see-through. */
+html.framed {
+  color-scheme: normal !important;
 }

-/* ── Hanzo Calendar marketing landing (cal.hanzo.ai/) ───────────────────── */
-.landing {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 24px;
-}
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 4px 40px;
-}
-.brand {
-  font-weight: 700;
-  font-size: 18px;
-  letter-spacing: -0.01em;
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-}
-.brand-mark {
-  display: block;
-}
-.nav-links {
-  display: inline-flex;
-  align-items: center;
-  gap: 14px;
-}
-.nav-link {
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 600;
-}
-.nav-link:hover {
-  color: var(--ink);
-}
-.nav-cta {
-  color: #0a0a0a;
-  background: var(--accent);
-  text-decoration: none;
-  font-size: 14px;
-  font-weight: 600;
-  border: 1px solid var(--accent);
-  border-radius: 999px;
-  padding: 8px 16px;
-}
-.nav-cta:hover {
-  opacity: 0.9;
-}
-
-/* The product itself — the live Booker — framed as the hero centerpiece. */
-.booker-stage {
-  display: flex;
-  justify-content: center;
-  padding: 8px 0 56px;
-}
-.booker-frame {
-  width: 100%;
-  max-width: 720px;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: 12px;
-  overflow: hidden;
-}
-.hero {
-  text-align: center;
-  padding: 44px 0 24px;
-}
-.hero h1 {
-  font-size: clamp(32px, 6vw, 56px);
-  line-height: 1.05;
-  letter-spacing: -0.03em;
-  margin: 0 0 20px;
-}
-.lede {
-  font-size: 19px;
-  line-height: 1.55;
-  color: var(--muted);
-  max-width: 620px;
-  margin: 0 auto 32px;
-}
-.hero-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-.btn {
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 15px;
-  border-radius: 10px;
-  padding: 13px 22px;
-  border: 1px solid transparent;
-  transition: transform 0.05s ease;
-}
-.btn:active {
-  transform: translateY(1px);
-}
-.btn-primary {
-  background: var(--accent);
-  color: #0a0a0a;
-}
-.btn-ghost {
-  background: transparent;
-  color: var(--ink);
-  border-color: var(--line);
-}
-.hero-note {
-  margin-top: 26px;
-  font-size: 13px;
-  color: var(--muted);
-}
-.hero-note code,
-.foot code {
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  padding: 2px 7px;
-  font-size: 12px;
-}
-.features {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  margin: 24px 0 56px;
-}
-@media (max-width: 640px) {
-  .features {
-    grid-template-columns: 1fr;
-  }
-}
-.feature {
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 24px;
-}
-.feature h3 {
-  margin: 0 0 8px;
-  font-size: 17px;
-  letter-spacing: -0.01em;
-}
-.feature p {
-  margin: 0;
-  color: var(--muted);
-  font-size: 14.5px;
-  line-height: 1.55;
-}
-.foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid var(--line);
-  padding: 24px 4px;
-  font-size: 13px;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-/* The copy-paste embed snippet under the landing booker. */
-.embed-hint {
-  margin: 0 0 56px;
-  text-align: center;
-}
-.embed-hint .muted {
-  margin: 0 0 12px;
-  font-size: 14px;
-}
-.snippet {
-  margin: 0;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 16px 18px;
-  overflow-x: auto;
-  text-align: left;
-  font-size: 12.5px;
-  line-height: 1.7;
-  color: var(--muted);
-}
-
-/* Framed in someone else's page: paint no background of our own, and give the
-   booker the whole document. */
 html.framed,
 html.framed body {
  background: transparent;
 }
+
 .embed {
  padding: 0;
 }
-
-/* FORCE GEIST — Tamagui/hanzogui set font-family inline, so override it. */
-#root, #root * { font-family: var(--sans) !important; }
-code, .hero-note code, .foot code { font-family: var(--mono) !important; }
@@ -6,9 +6,6 @@
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
-    // @hanzo/booker imports its peer under the name `hanzogui`, which the Vite
-    // build aliases to @hanzo/gui. Say the same thing to the type checker.
-    "paths": { "hanzogui": ["./node_modules/@hanzo/gui"] },
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
@@ -1,18 +1,42 @@
+import { bootScript } from "@hanzo/appearance/state";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";

-// Hanzo Calendar SPA — hosts the native universal Booker (@hanzo/booker, Tamagui)
-// against the /v1/calendar backend. The one required piece for Tamagui on web is
-// aliasing react-native -> react-native-web and deduping to a single copy each
-// (the exact recipe the @hanzo/booker render harness proved). NODE_ENV is pinned
-// so React + hanzogui take their production paths in the browser.
+import { SCHEME } from "./src/scheme";
+
+// Hanzo Calendar SPA — hosts the native universal Booker (@hanzo/booker, gui)
+// inside <Hanzo> against the /v1/calendar backend. NODE_ENV is pinned so React
+// and gui take their production paths in the browser.
+//
+// gui's substrate is react-native primitives, which on the web is
+// react-native-web: the alias maps it, and `.web.*` outranks `.js` so
+// react-native-svg (which @hanzo/ui draws icons with) reaches its web build
+// rather than its native codegen. Same mapping as hanzo.ai's checkout.
+//
+// The scheme is painted in <head> before anything renders: a page that decides
+// light or dark after React mounts flashes the wrong ground first. So is
+// `framed`: an embedded document paints no ground of its own, and decided in an
+// effect it showed an opaque slab in the host page until React mounted.
+const FRAMED = `if(location.pathname==="/embed")document.documentElement.classList.add("framed")`;
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    {
+      name: "scheme",
+      transformIndexHtml: () => [
+        { tag: "script", children: `${FRAMED};${bootScript({ base: SCHEME })}`, injectTo: "head-prepend" },
+      ],
+    },
+  ],
  resolve: {
    alias: [
      { find: /^react-native$/, replacement: "react-native-web" },
-      { find: /^hanzogui$/, replacement: "@hanzo/gui" },
+      {
+        find: "@react-native/assets-registry/registry",
+        replacement: "react-native-web/dist/modules/AssetRegistry",
+      },
    ],
+    extensions: [".web.js", ".web.jsx", ".web.ts", ".web.tsx", ".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
    dedupe: ["react", "react-dom", "react-native-web", "@hanzo/gui"],
  },
  define: {
@@ -10,21 +10,33 @@ importers:

  app:
    dependencies:
+      '@hanzo/appearance':
+        specifier: 0.2.7
+        version: 0.2.7([email protected])
      '@hanzo/booker':
-        specifier: ^8.3.6
-        version: 8.3.6(@hanzo/[email protected]([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
+        specifier: ^8.3.7
+        version: 8.3.7(@hanzo/[email protected]([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
      '@hanzo/event':
-        specifier: ^0.3.21
-        version: 0.3.21([email protected])
+        specifier: ^0.3.57
+        version: 0.3.57([email protected])
      '@hanzo/font':
        specifier: ^1.8.11
        version: 1.9.3([email protected](@babel/[email protected])(@types/[email protected])([email protected])([email protected]([email protected]))([email protected]))
      '@hanzo/gui':
        specifier: 8.3.5
        version: 8.3.5([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
+      '@hanzo/ui':
+        specifier: ^8.27.89
+        version: 8.27.89(bo3p4ypxyuvr73h5p2f6vyzt54)
+      '@hanzogui/animations-css':
+        specifier: 8.3.5
+        version: 8.3.5([email protected]([email protected]))([email protected])
      '@hanzogui/config':
        specifier: 8.3.5
        version: 8.3.5([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])
+      '@hanzogui/telemetry':
+        specifier: 8.3.5
+        version: 8.3.5([email protected])
      react:
        specifier: 19.2.8
        version: 19.2.8
@@ -387,6 +399,24 @@ packages:
    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
    engines: {node: '>=6.9.0'}

+  '@codemirror/[email protected]':
+    resolution: {integrity: sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg==}
+
+  '@codemirror/[email protected]':
+    resolution: {integrity: sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==}
+
+  '@codemirror/[email protected]':
+    resolution: {integrity: sha512-zfvU2r3TyylQLMj/te+5CnQ0rSqZi8B1oTCBbQkagcLW4Xc6imab6qN+pEJhsuNOLaJqiRyBXp9UhWA1DhVvDw==}
+
+  '@codemirror/[email protected]':
+    resolution: {integrity: sha512-kAz+AncRtKuIknedxT1bq4XwXv4UowhbkHU1myPrtVb/jZtImWuV5BXzv5vK6i3kYACsdiZiQKFQQ5Mq7elW8w==}
+
+  '@codemirror/[email protected]':
+    resolution: {integrity: sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w==}
+
+  '@codemirror/[email protected]':
+    resolution: {integrity: sha512-hC45YnmJNR1rz42OF57BLoQNFMV12/13drnvibDsR2quNDmldcb4WvYVV81hFQg56i9lcqQMEDqilhX2QDcGQQ==}
+
  '@emnapi/[email protected]':
    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}

@@ -549,8 +579,13 @@ packages:
  '@floating-ui/[email protected]':
    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}

-  '@hanzo/[email protected]':
-    resolution: {integrity: sha512-zyS9+Jz06nWI/GZfRIPSa4g+keq3wkiMO43Um8yrhjC/qCM/+biKbQvHjpkWLzvYvmti6UgB8k+DUqFekzUECg==}
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-kaZpk2kHzKDliFWIv8GOcJss2JlPdWJm24kxuIevLn1QgO1degPZWTftLOhFYnqVvvr6nvy/e+d57fIFJxvQbg==}
+    peerDependencies:
+      react: '>=19.2.8'
+
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-y5m+n8uAtCnTfoa2LO2QRLvv1U/cGa/s3a2624+bWxKPL3b8Vnfp4psgMXp/jdVEDxHberPidKl3jWuzTO9lqg==}
    peerDependencies:
      '@hanzo/gui': '>=8.3.1'
      react: '>=19.2.8'
@@ -559,14 +594,29 @@ packages:
      react-native:
        optional: true

-  '@hanzo/[email protected]':
-    resolution: {integrity: sha512-gUEql7ZteyNIkxdX9G44plCNYMNppdU3K9s9uc3IBtwdMjCS6iRM7Z7EP9aOtZm8LqPnAJU9l7IRYYFKhG9cRQ==}
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-ezz3JEC+5QO4LywK02o24i0CuHZ+askwT4Dmvd+BrXZsJs/Eyw3Xu/EPEZLpZY0cZ5+8sIYO07jUOaWTU3nfAw==}
+    hasBin: true
    peerDependencies:
-      react: ^18.0.0 || ^19.0.0
+      react: '>=18'
    peerDependenciesMeta:
      react:
        optional: true

+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-Phqf4boBMsXpLiABIVGM9DR+xlr0QPkl1yLvuWd7VS0UALeCUUz+Ce2dkkKNsqe2EpLgbiYzaYEmtguY0Tk0Sw==}
+    peerDependencies:
+      '@hanzo/gui': '>=7.2.2'
+      react: '>=19'
+
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-pp+XH+3FmNFP5daQmXTlwMvpJk7NcM3oUS15OlFvxTw7KkzA4+fWr+r7ytqblvU0XwT0QMdiBabIQkh7cc2z5Q==}
+    hasBin: true
+
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-IODMkUcDy3G/lIbu4GyWoJF1dlWV33SVCTsIKXo21cKhmqSNZZGYXSdQotU5QDeA3NU2sAaB8j8/1Vj3iYFLaA==}
+    hasBin: true
+
  '@hanzo/[email protected]':
    resolution: {integrity: sha512-U3A2v3lbQbWFrzwb471FnaoFQVvbMWvPpdI2IipQpl3xyyza7bBbbNeDkREnd/ecixuaXpKZeP+FPSCk1fD8og==}
    peerDependencies:
@@ -575,8 +625,8 @@ packages:
      react:
        optional: true

-  '@hanzo/[email protected].41':
-    resolution: {integrity: sha512-xchy5iI06LFJhOwV7VyhFmweyGp5D41DzJNJopP13qZX/jI7K914EZngceI+6cQIU0BPMEEeWFObkZWJDKtG+g==}
+  '@hanzo/[email protected].57':
+    resolution: {integrity: sha512-hAZeArXvH0C1MsRm7nbDDU58xAzEXBEDczAgh1IshTpvGNfsUcfEcU4dJUtYog2CtjU0nPZXJ+aB9PE1j2l+mA==}
    peerDependencies:
      react: '>=19.2.8'
    peerDependenciesMeta:
@@ -586,6 +636,14 @@ packages:
  '@hanzo/[email protected]':
    resolution: {integrity: sha512-jF800OFibLfnuEqMJUpTyLIs4fmezzXFKGGUPAHjK40FrTWsiAb4j3j1N5sbqBLAv5Ty7FA56dOo67Y+kUSqyA==}

+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-eGK1MTi5tW/luXhddLwrcyK8fq+GE41u/80oIjEKzxHGCfUs8LATiDAGCZ3dYM4D5sxiUS7x8BG2hGuD2gnIUA==}
+
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-CXKXhfRgAj9SnhRJtraS6jEToGz74hbrMSJm85Kp8y6uN64zOH+IvohpWT/Surh9Qn1KWIGXsIx216JMa++X6A==}
+    peerDependencies:
+      next: '>=13.2.0'
+
  '@hanzo/[email protected]':
    resolution: {integrity: sha512-PVCyIFMp/wBVfLsWczVWC3VVxbUzlTDwc/LBRgyT6Fizk09aACq8ByRmbJp0FGKVd1BbUDeekvfv0g1eoj4OvQ==}
    peerDependencies:
@@ -597,6 +655,14 @@ packages:
    peerDependencies:
      react: '>=19.2.8'

+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-acPRsdTD/pfsDLUias989cDZCCg4Q9rCCrlOWVqlAzcN7xyoi3Vl4DjM7Z+feOL5SDPxWY1M0hJn9B1xqGjK4g==}
+    peerDependencies:
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
  '@hanzo/[email protected]':
    resolution: {integrity: sha512-PsCE+qaZdmXZVtkCJXFoDbTr5jJZuxctAEPOVk8LyvnRxfjPUVGW03Phu6N2OWyLDwyq0g4voySkO2h3tQzmYA==}
    peerDependencies:
@@ -605,6 +671,68 @@ packages:
      react:
        optional: true

+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-Y03ewQNDZdr29HWZAvYLHoYenU0I5XzZZ/VTGObkmL39HWSGqwAxzslFDEH2ABOCLl9Pe2P/LsL8hzpWX9hYUw==}
+    peerDependencies:
+      '@hanzogui/lucide-icons-2': '>=7'
+      react: '>=18'
+    peerDependenciesMeta:
+      '@hanzogui/lucide-icons-2':
+        optional: true
+      react:
+        optional: true
+
+  '@hanzo/[email protected]':
+    resolution: {integrity: sha512-S5gxELV/Tp2pm81SQUD6YXTcyB+o7GufbJdsi5iVZjIHs+/KRwljR6cqaxd+pjTO99d+VeP7Yb2iPIJVbtE7Jg==}
+    peerDependencies:
+      '@hanzo/canvas': '>=0.2.3'
+      '@hanzo/cd': '>=0.1.2'
+      '@hanzo/dashboard': '>=0.2.0'
+      '@hanzo/data': '>=1.2.4'
+      '@hanzo/event': '>=0.3.52'
+      '@hanzo/gui': ^8.3.5
+      '@hanzo/iam': '>=0.21.26'
+      '@hanzo/pay': '>=0.1.1'
+      '@hanzo/plans': '>=1.8.1'
+      '@hanzo/usage': '>=0.1.13'
+      '@hanzogui/animations-css': ^8.3.5
+      '@hanzogui/config': ^8.3.5
+      '@hanzogui/lucide-icons-2': ^8.3.5
+      '@hanzogui/next-theme': ^8.3.5
+      '@hanzogui/shell': ^8.3.5
+      '@hanzogui/telemetry': ^8.3.5
+      '@hanzogui/toast': ^8.3.5
+      next: '>=16.3.3'
+      next-themes: '>=0'
+      react: '>=19.2.8'
+      react-dom: '>=19.2.8'
+      react-hook-form: '>=7'
+    peerDependenciesMeta:
+      '@hanzo/canvas':
+        optional: true
+      '@hanzo/cd':
+        optional: true
+      '@hanzo/dashboard':
+        optional: true
+      '@hanzo/event':
+        optional: true
+      '@hanzo/iam':
+        optional: true
+      '@hanzo/pay':
+        optional: true
+      '@hanzo/plans':
+        optional: true
+      '@hanzo/usage':
+        optional: true
+      '@hanzogui/next-theme':
+        optional: true
+      '@hanzogui/shell':
+        optional: true
+      next:
+        optional: true
+      next-themes:
+        optional: true
+
  '@hanzogui/[email protected]':
    resolution: {integrity: sha512-w1m3dGC8TYG9Nrile3ltON1smpa1B1MAB7aQY+UlX93OtMOl6BvaDXzK6VfFqvV7P+6qGfMqZOkvujCAomvREA==}
    peerDependencies:
@@ -822,6 +950,11 @@ packages:
    peerDependencies:
      react: '>=19.2.8'

+  '@hanzogui/[email protected]':
+    resolution: {integrity: sha512-52oKf1kwbr5iVv7kC6/Mumm+VibX8Ak1N8DHPBFtl8TKj8Ky+dCWeOoM4kRbNhBMWII+PgPmr74f5gNC/Yc2yA==}
+    peerDependencies:
+      react: '>=19.2.8'
+
  '@hanzogui/[email protected]':
    resolution: {integrity: sha512-PtBkXCU/VwNg0D7hZYqa5ATfAnCfX4+DZJNRJheUnnTpxNaB0Ybl7YLK+iyzQjzJZRAQuWqX5rFFZuXZHogd3A==}
    peerDependencies:
@@ -857,6 +990,12 @@ packages:
    peerDependencies:
      react: '>=19.2.8'

+  '@hanzogui/[email protected]':
+    resolution: {integrity: sha512-BExY/IGmdqDNxr1hhIKVvi7sX72GDygig6YizFAArxv5JbbWqAn7fqiR3TvQjwIRQnzBXBbxUj0wPUxEtX5ApQ==}
+    peerDependencies:
+      react: '>=19.2.8'
+      react-native-svg: '>=12'
+
  '@hanzogui/[email protected]':
    resolution: {integrity: sha512-md93k9pyNkB0yUPZOcgIsEOJNIcieYIIi7mw9/FO36XGoJgPERjgTN0B4t4xXPtqDKbXbUwolofOAATIbhyc7g==}
    peerDependencies:
@@ -1132,6 +1271,11 @@ packages:
    peerDependencies:
      react: '>=19.2.8'

+  '@icons-pack/[email protected]':
+    resolution: {integrity: sha512-S35E7vJlJzMeoqjwwI7ZmQUJ2W+2KspnB6bc49KdoDGwp5mCgAy9L3sscfWMewQSMgBdPU8KWWwpSGq5DJyAFw==}
+    peerDependencies:
+      react: ^16.13 || ^17 || ^18 || ^19
+
  '@img/[email protected]':
    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
    engines: {node: '>=18'}
@@ -1309,6 +1453,21 @@ packages:
  '@jridgewell/[email protected]':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

+  '@lezer/[email protected]':
+    resolution: {integrity: sha512-H0iErY4e43LpXbYDyBci5W4v/RwTgGV3YzYOlJPiGZ8RY8w51kVE+xLn1tg3Z6UmSfyETvtsUK3r7YsgDQEI7Q==}
+
+  '@lezer/[email protected]':
+    resolution: {integrity: sha512-O1GMVKgtf5YspFaRzpmqkVgMtIk2HG9uMAbH6wdAIdNh3TVzCsch/+cRi+6l2//UGDKe6NB9BW3cvuR5ezMQ0w==}
+
+  '@lezer/[email protected]':
+    resolution: {integrity: sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==}
+
+  '@lezer/[email protected]':
+    resolution: {integrity: sha512-UwgZcl1R66H2hDzBrA7kWyYmX6s8p5TQ+e/t7CuvgCtBEPxbEPaHYHu+pJBvTvDotEJpuQkJjbXuHiw5Cixxgw==}
+
+  '@marijn/[email protected]':
+    resolution: {integrity: sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==}
+
  '@next/[email protected]':
    resolution: {integrity: sha512-x9Vblze1EbtltQYnNH38xCPWU3TVfBd1eXqA3+w9+BTpedkkdNpAaltXlGQ/nsc1+E0mVTNrtcbX3GoO09zeLQ==}

@@ -1694,6 +1853,9 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

+  [email protected]:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
  [email protected]:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}
@@ -1769,6 +1931,9 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==}

+  [email protected]:
+    resolution: {integrity: sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==}
+
  [email protected]:
    resolution: {integrity: sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==}

@@ -1779,6 +1944,17 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}

+  [email protected]:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  [email protected]:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+
+  [email protected]:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
  [email protected]:
    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}

@@ -1811,6 +1987,19 @@ packages:
    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}

+  [email protected]:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  [email protected]:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  [email protected]:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  [email protected]:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
  [email protected]:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}

@@ -1828,6 +2017,10 @@ packages:
    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
    engines: {node: '>= 0.8'}

+  [email protected]:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
  [email protected]:
    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}

@@ -2130,6 +2323,9 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==}

+  [email protected]:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
  [email protected]:
    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}

@@ -2288,6 +2484,9 @@ packages:
    resolution: {integrity: sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==}
    engines: {node: '>=18'}

+  [email protected]:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
  [email protected]:
    resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}

@@ -2375,6 +2574,16 @@ packages:
    peerDependencies:
      react: '>=17.0.0'

+  [email protected]:
+    resolution: {integrity: sha512-+NdG0FLzCPhFOp2NNxaUYLF9fyZhNjx9FTBBSYWF71/l6BBlmIc/j6xlp3DbaHWLJbIG7Zd8oznA19xJClU97w==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  [email protected]:
    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}

@@ -2391,6 +2600,12 @@ packages:
      react-native: 0.83 - 0.86
      react-native-worklets: 0.10.x - 0.11.x

+  [email protected]:
+    resolution: {integrity: sha512-uh8yktufYeRU3W9Omi8+SPyLF9BVN4JmLflSgc9oOcKkSKk/S5JUmmTjKZq/L8GHfQUtCvcu/W6X4xhEfBBAjQ==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
  [email protected]:
    resolution: {integrity: sha512-ozvZM0z8UWfduoKnYx03KUccM2LdHNaW8nNJu4Md0glyqWL+Ysa6dRZzMOO6Yp/hhTYT9yluwjknpd9l04uvDw==}
    peerDependencies:
@@ -2564,6 +2779,9 @@ packages:
    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
    engines: {node: '>=8'}

+  [email protected]:
+    resolution: {integrity: sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw==}
+
  [email protected]:
    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
    engines: {node: '>= 12.0.0'}
@@ -2701,6 +2919,9 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}

+  [email protected]:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
  [email protected]:
    resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}

@@ -3179,6 +3400,41 @@ snapshots:
      '@babel/helper-string-parser': 7.29.7
      '@babel/helper-validator-identifier': 7.29.7

+  '@codemirror/[email protected]':
+    dependencies:
+      '@codemirror/language': 6.13.1
+      '@codemirror/state': 6.7.6
+      '@codemirror/view': 6.43.14
+      '@lezer/common': 1.5.3
+
+  '@codemirror/[email protected]':
+    dependencies:
+      '@codemirror/language': 6.13.1
+      '@lezer/json': 1.0.3
+
+  '@codemirror/[email protected]':
+    dependencies:
+      '@codemirror/state': 6.7.6
+      '@codemirror/streamparser': 6.0.0
+      '@codemirror/view': 6.43.14
+      '@lezer/common': 1.5.3
+      '@lezer/highlight': 1.2.5
+      '@lezer/lr': 1.4.11
+      style-mod: 4.1.4
+
+  '@codemirror/[email protected]':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.4
+
+  '@codemirror/[email protected]': {}
+
+  '@codemirror/[email protected]':
+    dependencies:
+      '@codemirror/state': 6.7.6
+      crelt: 1.0.7
+      style-mod: 4.1.4
+      w3c-keyname: 2.2.8
+
  '@emnapi/[email protected]':
    dependencies:
      tslib: 2.8.1
@@ -3276,31 +3532,57 @@ snapshots:

  '@floating-ui/[email protected]': {}

-  '@hanzo/[email protected](@hanzo/[email protected]([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])':
+  '@hanzo/[email protected]([email protected])':
+    dependencies:
+      '@hanzo/design': 0.5.33
+      react: 19.2.8
+
+  '@hanzo/[email protected](@hanzo/[email protected]([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])':
    dependencies:
      '@hanzo/gui': 8.3.5([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
      react: 19.2.8
    optionalDependencies:
      react-native: 0.86.0(@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected])

-  '@hanzo/[email protected]([email protected])':
+  '@hanzo/[email protected]([email protected])':
+    dependencies:
+      '@hanzo/logo': 1.0.26([email protected])
    optionalDependencies:
      react: 19.2.8

+  '@hanzo/[email protected](@hanzo/[email protected]([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])':
+    dependencies:
+      '@hanzo/gui': 8.3.5([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
+      '@hanzogui/lucide-icons-2': 8.3.5([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])
+      react: 19.2.8
+    transitivePeerDependencies:
+      - react-dom
+      - react-native-svg
+
+  '@hanzo/[email protected]': {}
+
+  '@hanzo/[email protected]': {}
+
  '@hanzo/[email protected]([email protected])':
    dependencies:
      '@hanzo/events': 0.2.2
    optionalDependencies:
      react: 19.2.8

-  '@hanzo/[email protected].41([email protected])':
+  '@hanzo/[email protected].57([email protected])':
    dependencies:
-      '@hanzo/events': 0.2.2
+      '@hanzo/events': 0.3.1
    optionalDependencies:
      react: 19.2.8

  '@hanzo/[email protected]': {}

+  '@hanzo/[email protected]': {}
+
+  '@hanzo/[email protected]([email protected](@babel/[email protected])(@types/[email protected])([email protected])([email protected]([email protected]))([email protected]))':
+    dependencies:
+      next: 16.3.6(@babel/[email protected])(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])
+
  '@hanzo/[email protected]([email protected](@babel/[email protected])(@types/[email protected])([email protected])([email protected]([email protected]))([email protected]))':
    dependencies:
      next: 16.3.6(@babel/[email protected])(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])
@@ -3377,12 +3659,55 @@ snapshots:
      - react-dom
      - react-native

+  '@hanzo/[email protected]([email protected])':
+    optionalDependencies:
+      react: 19.2.8
+
  '@hanzo/[email protected]([email protected])':
    dependencies:
      '@hanzo/event': 0.3.39([email protected])
    optionalDependencies:
      react: 19.2.8

+  '@hanzo/[email protected](@hanzogui/[email protected]([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected]))([email protected])':
+    optionalDependencies:
+      '@hanzogui/lucide-icons-2': 8.3.5([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])
+      react: 19.2.8
+
+  '@hanzo/[email protected](bo3p4ypxyuvr73h5p2f6vyzt54)':
+    dependencies:
+      '@codemirror/commands': 6.11.1
+      '@codemirror/lang-json': 6.0.2
+      '@codemirror/language': 6.13.1
+      '@codemirror/state': 6.7.6
+      '@codemirror/view': 6.43.14
+      '@hanzo/appearance': 0.2.7([email protected])
+      '@hanzo/brand': 1.4.8([email protected])
+      '@hanzo/data': 1.2.4(@hanzo/[email protected]([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])
+      '@hanzo/design': 0.5.35
+      '@hanzo/font': 1.9.2([email protected](@babel/[email protected])(@types/[email protected])([email protected])([email protected]([email protected]))([email protected]))
+      '@hanzo/gui': 8.3.5([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
+      '@hanzo/logo': 1.0.26([email protected])
+      '@hanzo/products': 0.2.6(@hanzogui/[email protected]([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected]))([email protected])
+      '@hanzogui/animations-css': 8.3.5([email protected]([email protected]))([email protected])
+      '@hanzogui/config': 8.3.5([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])
+      '@hanzogui/lucide-icons-2': 8.3.5([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])
+      '@hanzogui/telemetry': 8.3.5([email protected])
+      '@hanzogui/toast': 8.3.5([email protected]([email protected]))([email protected])
+      '@icons-pack/react-simple-icons': 13.15.1([email protected])
+      '@lezer/highlight': 1.2.5
+      react: 19.2.8
+      react-dom: 19.2.8([email protected])
+      react-hook-form: 7.90.0(@types/[email protected])([email protected])
+      react-native-svg: 15.16.0([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
+      react-native-web: 0.21.3([email protected]([email protected]))([email protected])
+    optionalDependencies:
+      '@hanzo/event': 0.3.57([email protected])
+      next: 16.3.6(@babel/[email protected])(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])
+    transitivePeerDependencies:
+      - encoding
+      - react-native
+
  '@hanzogui/[email protected]([email protected]([email protected]))([email protected])':
    dependencies:
      '@hanzogui/collapsible': 8.3.5([email protected]([email protected]))([email protected])
@@ -3862,6 +4187,14 @@ snapshots:
    transitivePeerDependencies:
      - react-dom

+  '@hanzogui/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@hanzogui/core': 8.3.5([email protected]([email protected]))([email protected])
+      '@hanzogui/sizable-context': 8.3.5([email protected]([email protected]))([email protected])
+      react: 19.2.8
+    transitivePeerDependencies:
+      - react-dom
+
  '@hanzogui/[email protected]([email protected])':
    dependencies:
      '@hanzogui/constants': 8.3.5([email protected])
@@ -3937,6 +4270,15 @@ snapshots:
    transitivePeerDependencies:
      - react-dom

+  '@hanzogui/[email protected]([email protected]([email protected]))([email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]))([email protected])':
+    dependencies:
+      '@hanzogui/core': 8.3.5([email protected]([email protected]))([email protected])
+      '@hanzogui/helpers-icon': 8.3.5([email protected]([email protected]))([email protected])
+      react: 19.2.8
+      react-native-svg: 15.16.0([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
+    transitivePeerDependencies:
+      - react-dom
+
  '@hanzogui/[email protected]([email protected]([email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])':
    dependencies:
      '@hanzogui/core': 8.3.5([email protected]([email protected]))([email protected])
@@ -4297,7 +4639,7 @@ snapshots:

  '@hanzogui/[email protected]([email protected])':
    dependencies:
-      '@hanzo/event': 0.3.41([email protected])
+      '@hanzo/event': 0.3.57([email protected])
      '@hanzo/observe': 0.1.11([email protected])
      react: 19.2.8

@@ -4501,6 +4843,10 @@ snapshots:
    dependencies:
      react: 19.2.8

+  '@icons-pack/[email protected]([email protected])':
+    dependencies:
+      react: 19.2.8
+
  '@img/[email protected]':
    optional: true

@@ -4647,6 +4993,24 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

+  '@lezer/[email protected]': {}
+
+  '@lezer/[email protected]':
+    dependencies:
+      '@lezer/common': 1.5.3
+
+  '@lezer/[email protected]':
+    dependencies:
+      '@lezer/common': 1.5.3
+      '@lezer/highlight': 1.2.5
+      '@lezer/lr': 1.4.11
+
+  '@lezer/[email protected]':
+    dependencies:
+      '@lezer/common': 1.5.3
+
+  '@marijn/[email protected]': {}
+
  '@next/[email protected]': {}

  '@next/[email protected]':
@@ -5029,6 +5393,8 @@ snapshots:

  [email protected]: {}

+  [email protected]: {}
+
  [email protected]:
    dependencies:
      fill-range: 7.1.1
@@ -5114,6 +5480,8 @@ snapshots:
    dependencies:
      browserslist: 4.28.7

+  [email protected]: {}
+
  [email protected]:
    dependencies:
      node-fetch: 2.7.0
@@ -5130,6 +5498,21 @@ snapshots:
    dependencies:
      hyphenate-style-name: 1.1.0

+  [email protected]:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  [email protected]:
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
+  [email protected]: {}
+
  [email protected]: {}

  [email protected]:
@@ -5147,6 +5530,24 @@ snapshots:
  [email protected]:
    optional: true

+  [email protected]:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      domelementtype: 2.3.0
+
+  [email protected]:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
  [email protected]: {}

  [email protected]: {}
@@ -5157,6 +5558,8 @@ snapshots:

  [email protected]: {}

+  [email protected]: {}
+
  [email protected]:
    dependencies:
      stackframe: 1.3.4
@@ -5444,6 +5847,8 @@ snapshots:

  [email protected]: {}

+  [email protected]: {}
+
  [email protected]: {}

  [email protected]: {}
@@ -5695,6 +6100,10 @@ snapshots:

  [email protected]: {}

+  [email protected]:
+    dependencies:
+      boolbase: 1.0.0
+
  [email protected]: {}

  [email protected]:
@@ -5779,6 +6188,12 @@ snapshots:
    dependencies:
      react: 19.2.8

+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.3.0
+
  [email protected]: {}

  [email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]):
@@ -5794,6 +6209,13 @@ snapshots:
      react-native-worklets: 0.10.2(@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected])
      semver: 7.8.5

+  [email protected]([email protected](@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected]))([email protected]):
+    dependencies:
+      css-select: 5.2.2
+      css-tree: 1.1.3
+      react: 19.2.8
+      react-native: 0.86.0(@babel/[email protected])(@react-native/[email protected](@babel/[email protected]))(@types/[email protected])([email protected])
+
  [email protected]([email protected]([email protected]))([email protected]):
    dependencies:
      '@babel/runtime': 7.29.7
@@ -6066,6 +6488,8 @@ snapshots:
    dependencies:
      ansi-regex: 5.0.1

+  [email protected]: {}
+
  [email protected](@babel/[email protected])([email protected]):
    dependencies:
      client-only: 0.0.1
@@ -6153,6 +6577,8 @@ snapshots:

  [email protected]: {}

+  [email protected]: {}
+
  [email protected]:
    dependencies:
      makeerror: 1.0.12