@odla-ai/chapter 0.4.0 → 0.7.0

package/dist/ui/index.js

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useState } from "react";
 import { TopBar, TopBarLink } from "@odla-ai/ui/components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var badgeText = (brand) => brand.badge ?? brand.name.slice(0, 3).toUpperCase();
+var brandDisplay = (brand) => brand.wordmark ?? brand.name;
 var S = {
   gate: {
     minHeight: "100vh",
@@ -66,7 +67,7 @@ function Gate(props) {
   return /* @__PURE__ */ jsx("div", { style: S.gate, children: /* @__PURE__ */ jsxs("div", { style: S.gateInner, children: [
     /* @__PURE__ */ jsxs("div", { style: S.brandBox, children: [
       /* @__PURE__ */ jsx("div", { style: S.badge, children: badgeText(brand) }),
-      /* @__PURE__ */ jsx("h1", { style: S.h1, children: brand.name }),
+      /* @__PURE__ */ jsx("h1", { style: S.h1, children: brandDisplay(brand) }),
       tagline ? /* @__PURE__ */ jsx("p", { style: { ...S.muted, margin: "8px 0 0", fontSize: 14 }, children: tagline }) : null
     ] }),
     children
@@ -99,7 +100,7 @@ function AdminShell(props) {
     /* @__PURE__ */ jsxs(TopBar, { children: [
       /* @__PURE__ */ jsxs("a", { className: "topbar-brand", href: "/", style: { display: "inline-flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsx("span", { style: S.badgeSm, children: badgeText(brand) }),
-        brand.name
+        brandDisplay(brand)
       ] }),
       /* @__PURE__ */ jsx("nav", { className: "topbar-nav", "aria-label": "Admin navigation", children: sections.map((s) => /* @__PURE__ */ jsx(TopBarLink, { active: section === s.id, onClick: () => go(s.id), children: s.label }, s.id)) }),
       /* @__PURE__ */ jsx("div", { className: "topbar-spacer" }),
@@ -212,8 +213,69 @@ function ChapterAdmin(props) {
   ] });
 }
 
+// src/ui/admin-people.tsx
+import { useState as useState3 } from "react";
+import { CrmList, RecordPanel, useCrmQuery, useCrmRecord } from "@odla-ai/crm/ui";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function PeopleBody(props) {
+  const { crm, client, type } = props;
+  const hookClient = client;
+  const query = useCrmQuery(hookClient, type);
+  const [openId, setOpenId] = useState3(null);
+  const record = useCrmRecord(hookClient, openId);
+  const [saving, setSaving] = useState3(false);
+  const saveFields = async (input) => {
+    if (!openId) return;
+    setSaving(true);
+    try {
+      await client.updateRecord(openId, { input });
+      record.refresh();
+      query.refresh();
+    } finally {
+      setSaving(false);
+    }
+  };
+  const moveStage = async (to) => {
+    if (!openId) return;
+    await client.setStage(openId, to);
+    record.refresh();
+    query.refresh();
+  };
+  const addTag = async (tag) => {
+    if (openId) {
+      await client.addTag(openId, tag);
+      record.refresh();
+    }
+  };
+  const removeTag = async (tag) => {
+    if (openId) {
+      await client.removeTag(openId, tag);
+      record.refresh();
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "wrap", children: [
+    /* @__PURE__ */ jsx3(CrmList, { crm, type, query, onOpenRecord: (r) => setOpenId(r.id) }),
+    record.detail ? /* @__PURE__ */ jsx3(
+      RecordPanel,
+      {
+        crm,
+        detail: record.detail,
+        onSaveFields: saveFields,
+        onMoveStage: moveStage,
+        onAddTag: addTag,
+        onRemoveTag: removeTag,
+        saving
+      }
+    ) : null
+  ] });
+}
+function peopleSection(options) {
+  const { crm, id = "people", label = "People", type = "person" } = options;
+  return { id, label, render: (ctx) => /* @__PURE__ */ jsx3(PeopleBody, { crm, client: ctx.client, type }) };
+}
+
 // src/ui/slot-picker.tsx
-import { useMemo as useMemo2, useState as useState3 } from "react";
+import { useMemo as useMemo2, useState as useState4 } from "react";
 
 // src/ui/datetime.ts
 function tzShort(tz) {
@@ -264,7 +326,7 @@ function groupSlotsByDay(slots, tz) {
 }
 
 // src/ui/slot-picker.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_CLASSES = {
   days: "slot-days",
   day: "slot-day",
@@ -275,13 +337,13 @@ function SlotPicker(props) {
   const { slots, timezone, selectedStartAt, onPick, onDayChange, classes = DEFAULT_CLASSES } = props;
   const byDay = useMemo2(() => groupSlotsByDay(slots, timezone), [slots, timezone]);
   const dayKeys = [...byDay.keys()];
-  const [activeDay, setActiveDay] = useState3(dayKeys[0]);
+  const [activeDay, setActiveDay] = useState4(dayKeys[0]);
   const day = activeDay !== void 0 && byDay.has(activeDay) ? activeDay : dayKeys[0];
   const times = (day !== void 0 ? byDay.get(day) : void 0) ?? [];
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx3("div", { className: classes.days, children: dayKeys.map((key) => {
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx4("div", { className: classes.days, children: dayKeys.map((key) => {
       const first = byDay.get(key)?.[0];
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -296,7 +358,7 @@ function SlotPicker(props) {
         key
       );
     }) }),
-    /* @__PURE__ */ jsx3("div", { className: classes.times, children: times.map((s) => /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4("div", { className: classes.times, children: times.map((s) => /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -311,18 +373,18 @@ function SlotPicker(props) {
 }
 
 // src/ui/members.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState6 } from "react";
 
 // src/ui/reschedule.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Rescheduler(props) {
   const { api, applicationId, timezone, onRescheduled, label = "Change your time" } = props;
-  const [open, setOpen] = useState4(false);
-  const [slots, setSlots] = useState4(null);
-  const [tz, setTz] = useState4(timezone);
-  const [busy, setBusy] = useState4(false);
-  const [msg, setMsg] = useState4(null);
+  const [open, setOpen] = useState5(false);
+  const [slots, setSlots] = useState5(null);
+  const [tz, setTz] = useState5(timezone);
+  const [busy, setBusy] = useState5(false);
+  const [msg, setMsg] = useState5(null);
   const start = async () => {
     setOpen(true);
     setSlots(null);
@@ -355,7 +417,7 @@ function Rescheduler(props) {
     }
   };
   if (!open) {
-    return /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: /* @__PURE__ */ jsx5(
       "a",
       {
         href: "#",
@@ -367,8 +429,8 @@ function Rescheduler(props) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs4("div", { className: "msched", children: [
-    slots === null ? /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: "Loading available times\u2026" }) : slots.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: msg ?? "No open times right now. Please check back soon." }) : /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("div", { className: "msched", children: [
+    slots === null ? /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: "Loading available times\u2026" }) : slots.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: msg ?? "No open times right now. Please check back soon." }) : /* @__PURE__ */ jsx5(
       SlotPicker,
       {
         slots,
@@ -377,9 +439,9 @@ function Rescheduler(props) {
         onPick: (s) => void pick(s)
       }
     ),
-    busy ? /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: "Rescheduling\u2026" }) : null,
-    msg && slots && slots.length > 0 ? /* @__PURE__ */ jsx4("p", { className: "meeting-note error", children: msg }) : null,
-    /* @__PURE__ */ jsx4("p", { className: "meeting-note", children: /* @__PURE__ */ jsx4(
+    busy ? /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: "Rescheduling\u2026" }) : null,
+    msg && slots && slots.length > 0 ? /* @__PURE__ */ jsx5("p", { className: "meeting-note error", children: msg }) : null,
+    /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: /* @__PURE__ */ jsx5(
       "a",
       {
         href: "#",
@@ -394,12 +456,12 @@ function Rescheduler(props) {
 }
 
 // src/ui/members.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function card(kicker, body) {
-  return /* @__PURE__ */ jsxs5("div", { className: "card", children: [
-    /* @__PURE__ */ jsx5("div", { className: "card-label", children: "Your Application" }),
-    /* @__PURE__ */ jsxs5("div", { className: "meeting-block", children: [
-      /* @__PURE__ */ jsx5("div", { className: "meeting-kicker", children: kicker }),
+  return /* @__PURE__ */ jsxs6("div", { className: "card", children: [
+    /* @__PURE__ */ jsx6("div", { className: "card-label", children: "Your Application" }),
+    /* @__PURE__ */ jsxs6("div", { className: "meeting-block", children: [
+      /* @__PURE__ */ jsx6("div", { className: "meeting-kicker", children: kicker }),
       body
     ] })
   ] });
@@ -409,16 +471,16 @@ function ProvisionalCard(props) {
   if (!application) {
     return card(
       "One step remains",
-      /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "Your account is ready, and the application that completes it takes a few minutes." }),
-        /* @__PURE__ */ jsx5("a", { className: "apply-link", href: applyHref, children: "Apply for membership" })
+      /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx6("div", { className: "meeting-note", children: "Your account is ready, and the application that completes it takes a few minutes." }),
+        /* @__PURE__ */ jsx6("a", { className: "apply-link", href: applyHref, children: "Apply for membership" })
       ] })
     );
   }
   if (application.status === "refunded") {
-    return card("Membership refunded", /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "Your fee has been refunded in full and your membership is canceled." }));
+    return card("Membership refunded", /* @__PURE__ */ jsx6("div", { className: "meeting-note", children: "Your fee has been refunded in full and your membership is canceled." }));
   }
-  const membership = application.paid ? /* @__PURE__ */ jsxs5("div", { className: "meeting-note", children: [
+  const membership = application.paid ? /* @__PURE__ */ jsxs6("div", { className: "meeting-note", children: [
     "Your membership is active",
     application.renewalAt ? ` and renews ${fmtDate(application.renewalAt)}` : "",
     "."
@@ -426,28 +488,28 @@ function ProvisionalCard(props) {
   if (application.meetingAt) {
     return card(
       "Your introduction call",
-      /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsx5("div", { className: "meeting-date", children: fullLabel(application.meetingAt, application.timezone) }),
-        /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "A calendar invitation with the video call link is in your email." }),
-        application.meetUrl ? /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: /* @__PURE__ */ jsx5("a", { href: application.meetUrl, target: "_blank", rel: "noopener", children: "Join the video call" }) }) : null,
-        /* @__PURE__ */ jsx5(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule }),
+      /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx6("div", { className: "meeting-date", children: fullLabel(application.meetingAt, application.timezone) }),
+        /* @__PURE__ */ jsx6("div", { className: "meeting-note", children: "A calendar invitation with the video call link is in your email." }),
+        application.meetUrl ? /* @__PURE__ */ jsx6("div", { className: "meeting-note", children: /* @__PURE__ */ jsx6("a", { href: application.meetUrl, target: "_blank", rel: "noopener", children: "Join the video call" }) }) : null,
+        /* @__PURE__ */ jsx6(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule }),
         membership
       ] })
     );
   }
   return card(
     "Book your introduction call",
-    /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx5("div", { className: "meeting-note", children: "Your application is in. Choose a time below, and a calendar invitation will reach your email." }),
-      /* @__PURE__ */ jsx5(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule, label: "Choose a time" }),
+    /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      /* @__PURE__ */ jsx6("div", { className: "meeting-note", children: "Your application is in. Choose a time below, and a calendar invitation will reach your email." }),
+      /* @__PURE__ */ jsx6(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule, label: "Choose a time" }),
       membership
     ] })
   );
 }
 function MembersArea(props) {
   const { api, signOut, adminHref = "/admin/", applyHref = "/join.html", memberContent } = props;
-  const [me, setMe] = useState5(null);
-  const [error, setError] = useState5(false);
+  const [me, setMe] = useState6(null);
+  const [error, setError] = useState6(false);
   const reload = async () => {
     try {
       setMe(await api("/api/me"));
@@ -458,30 +520,30 @@ function MembersArea(props) {
   useEffect3(() => {
     void reload();
   }, []);
-  if (error) return /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: "Sign in is briefly unavailable. Please refresh." });
-  if (!me) return /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: "Loading\u2026" });
+  if (error) return /* @__PURE__ */ jsx6("p", { className: "meeting-note", children: "Sign in is briefly unavailable. Please refresh." });
+  if (!me) return /* @__PURE__ */ jsx6("p", { className: "meeting-note", children: "Loading\u2026" });
   const role = me.role || "provisional";
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsxs5("div", { className: "card", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "member-row", children: [
-        /* @__PURE__ */ jsx5("span", { className: "member-email", children: me.email }),
-        /* @__PURE__ */ jsx5("span", { className: "role-badge " + role, children: role })
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6("div", { className: "card", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "member-row", children: [
+        /* @__PURE__ */ jsx6("span", { className: "member-email", children: me.email }),
+        /* @__PURE__ */ jsx6("span", { className: "role-badge " + role, children: role })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "account-actions", children: [
-        /* @__PURE__ */ jsx5("button", { className: "btn secondary mini", onClick: signOut, children: "Sign out" }),
-        role === "admin" ? /* @__PURE__ */ jsx5("a", { className: "admin-console-link", href: adminHref, children: "Admin console" }) : null
+      /* @__PURE__ */ jsxs6("div", { className: "account-actions", children: [
+        /* @__PURE__ */ jsx6("button", { className: "btn secondary mini", onClick: signOut, children: "Sign out" }),
+        role === "admin" ? /* @__PURE__ */ jsx6("a", { className: "admin-console-link", href: adminHref, children: "Admin console" }) : null
       ] })
     ] }),
-    role === "provisional" ? /* @__PURE__ */ jsx5(ProvisionalCard, { api, application: me.application, applyHref, onReschedule: reload }) : memberContent ?? /* @__PURE__ */ jsx5("div", { className: "card", children: /* @__PURE__ */ jsx5("div", { className: "card-label", children: "Welcome back." }) })
+    role === "provisional" ? /* @__PURE__ */ jsx6(ProvisionalCard, { api, application: me.application, applyHref, onReschedule: reload }) : memberContent ?? /* @__PURE__ */ jsx6("div", { className: "card", children: /* @__PURE__ */ jsx6("div", { className: "card-label", children: "Welcome back." }) })
   ] });
 }
 
 // src/ui/join.tsx
-import { useEffect as useEffect4, useState as useState7 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 
 // src/ui/payment-step.tsx
-import { useRef, useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useRef, useState as useState7 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var loader = null;
 function loadStripe() {
   const existing = globalThis.Stripe;
@@ -503,8 +565,8 @@ function loadStripe() {
 }
 function PaymentStep(props) {
   const { applicationId, refundPolicyText, onPaid } = props;
-  const [status, setStatus] = useState6("idle");
-  const [error, setError] = useState6(null);
+  const [status, setStatus] = useState7("idle");
+  const [error, setError] = useState7(null);
   const mountRef = useRef(null);
   const stripeRef = useRef(null);
   const elementsRef = useRef(null);
@@ -551,9 +613,9 @@ function PaymentStep(props) {
       setStatus("ready");
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "join-pay", children: [
-    /* @__PURE__ */ jsxs6("label", { className: "compliance-box", children: [
-      /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("div", { className: "join-pay", children: [
+    /* @__PURE__ */ jsxs7("label", { className: "compliance-box", children: [
+      /* @__PURE__ */ jsx7(
         "input",
         {
           type: "checkbox",
@@ -563,23 +625,23 @@ function PaymentStep(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx6("span", { children: refundPolicyText })
+      /* @__PURE__ */ jsx7("span", { children: refundPolicyText })
     ] }),
-    status === "loading" ? /* @__PURE__ */ jsx6("p", { className: "pay-status", children: "Preparing secure payment\u2026" }) : null,
-    /* @__PURE__ */ jsx6("div", { ref: mountRef, hidden: status === "idle" || status === "loading" }),
-    status === "ready" || status === "confirming" ? /* @__PURE__ */ jsx6("button", { className: "submit-btn", disabled: status === "confirming", onClick: () => void pay(), children: status === "confirming" ? "Processing\u2026" : "Pay and continue" }) : null,
-    error ? /* @__PURE__ */ jsx6("p", { className: "pay-error", children: error }) : null
+    status === "loading" ? /* @__PURE__ */ jsx7("p", { className: "pay-status", children: "Preparing secure payment\u2026" }) : null,
+    /* @__PURE__ */ jsx7("div", { ref: mountRef, hidden: status === "idle" || status === "loading" }),
+    status === "ready" || status === "confirming" ? /* @__PURE__ */ jsx7("button", { className: "submit-btn", disabled: status === "confirming", onClick: () => void pay(), children: status === "confirming" ? "Processing\u2026" : "Pay and continue" }) : null,
+    error ? /* @__PURE__ */ jsx7("p", { className: "pay-error", children: error }) : null
   ] });
 }
 
 // src/ui/join.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function JoinBooking(props) {
   const { applicationId, onBooked } = props;
-  const [state, setState] = useState7(null);
-  const [msg, setMsg] = useState7(null);
-  const [busy, setBusy] = useState7(false);
-  const [selected, setSelected] = useState7(null);
+  const [state, setState] = useState8(null);
+  const [msg, setMsg] = useState8(null);
+  const [busy, setBusy] = useState8(false);
+  const [selected, setSelected] = useState8(null);
   const load = async () => {
     setMsg(null);
     try {
@@ -623,9 +685,9 @@ function JoinBooking(props) {
       setBusy(false);
     }
   };
-  if (!state) return /* @__PURE__ */ jsx7("p", { className: "slots-status", children: msg ?? "Loading available times\u2026" });
-  return /* @__PURE__ */ jsxs7("div", { className: "join-book", children: [
-    /* @__PURE__ */ jsx7(
+  if (!state) return /* @__PURE__ */ jsx8("p", { className: "slots-status", children: msg ?? "Loading available times\u2026" });
+  return /* @__PURE__ */ jsxs8("div", { className: "join-book", children: [
+    /* @__PURE__ */ jsx8(
       SlotPicker,
       {
         slots: state.slots,
@@ -635,19 +697,19 @@ function JoinBooking(props) {
         onDayChange: () => setSelected(null)
       }
     ),
-    /* @__PURE__ */ jsxs7("div", { className: "slot-confirm", hidden: !selected, children: [
-      /* @__PURE__ */ jsx7("button", { className: "submit-btn", disabled: busy, onClick: () => void book(), children: busy ? "Booking\u2026" : "Book this time" }),
-      msg ? /* @__PURE__ */ jsx7("p", { className: "step2-note", children: msg }) : null
+    /* @__PURE__ */ jsxs8("div", { className: "slot-confirm", hidden: !selected, children: [
+      /* @__PURE__ */ jsx8("button", { className: "submit-btn", disabled: busy, onClick: () => void book(), children: busy ? "Booking\u2026" : "Book this time" }),
+      msg ? /* @__PURE__ */ jsx8("p", { className: "step2-note", children: msg }) : null
     ] })
   ] });
 }
 function JoinIsland(props) {
   const { config, children, membersHref = "/members/" } = props;
-  const [step, setStep] = useState7("form");
-  const [applicationId, setApplicationId] = useState7(null);
-  const [error, setError] = useState7(null);
-  const [submitting, setSubmitting] = useState7(false);
-  const [booked, setBooked] = useState7(null);
+  const [step, setStep] = useState8("form");
+  const [applicationId, setApplicationId] = useState8(null);
+  const [error, setError] = useState8(null);
+  const [submitting, setSubmitting] = useState8(false);
+  const [booked, setBooked] = useState8(null);
   const submit = async (e) => {
     e.preventDefault();
     setSubmitting(true);
@@ -672,15 +734,15 @@ function JoinIsland(props) {
     }
   };
   if (step === "done" && booked) {
-    return /* @__PURE__ */ jsxs7("div", { className: "join-done card", children: [
-      /* @__PURE__ */ jsx7("div", { className: "card-label", children: "You're booked" }),
-      /* @__PURE__ */ jsx7("p", { className: "meeting-date", children: fullLabel(booked.startAt, booked.timezone) }),
-      /* @__PURE__ */ jsx7("p", { className: "meeting-note", children: "A calendar invitation with the video call link is on its way to your email." }),
-      /* @__PURE__ */ jsx7("a", { className: "apply-link", href: membersHref, children: "Go to your member area" })
+    return /* @__PURE__ */ jsxs8("div", { className: "join-done card", children: [
+      /* @__PURE__ */ jsx8("div", { className: "card-label", children: "You're booked" }),
+      /* @__PURE__ */ jsx8("p", { className: "meeting-date", children: fullLabel(booked.startAt, booked.timezone) }),
+      /* @__PURE__ */ jsx8("p", { className: "meeting-note", children: "A calendar invitation with the video call link is on its way to your email." }),
+      /* @__PURE__ */ jsx8("a", { className: "apply-link", href: membersHref, children: "Go to your member area" })
     ] });
   }
   if (step === "book" && applicationId) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       JoinBooking,
       {
         applicationId,
@@ -692,15 +754,47 @@ function JoinIsland(props) {
     );
   }
   if (step === "pay" && applicationId) {
-    return /* @__PURE__ */ jsx7(PaymentStep, { applicationId, refundPolicyText: config.refundPolicyText ?? "", onPaid: () => setStep("book") });
+    return /* @__PURE__ */ jsx8(PaymentStep, { applicationId, refundPolicyText: config.refundPolicyText ?? "", onPaid: () => setStep("book") });
   }
-  return /* @__PURE__ */ jsxs7("form", { className: "join-form", onSubmit: (e) => void submit(e), children: [
+  return /* @__PURE__ */ jsxs8("form", { className: "join-form", onSubmit: (e) => void submit(e), children: [
     children,
-    error ? /* @__PURE__ */ jsx7("p", { className: "join-error", children: error }) : null,
-    /* @__PURE__ */ jsx7("button", { className: "submit-btn", type: "submit", disabled: submitting, children: submitting ? "Submitting\u2026" : "Submit application" })
+    error ? /* @__PURE__ */ jsx8("p", { className: "join-error", children: error }) : null,
+    /* @__PURE__ */ jsx8("button", { className: "submit-btn", type: "submit", disabled: submitting, children: submitting ? "Submitting\u2026" : "Submit application" })
   ] });
 }
+
+// src/brand.ts
+function paletteVar(key) {
+  return key.startsWith("--") ? key : `--${key}`;
+}
+function cleanValue(value) {
+  return value.replace(/[<>{};]/g, "").trim();
+}
+function brandTokens(brand) {
+  if (!brand) return "";
+  const decls = [];
+  for (const [key, value] of Object.entries(brand.palette ?? {})) {
+    if (typeof value === "string" && value.trim()) decls.push(`${paletteVar(key)}: ${cleanValue(value)};`);
+  }
+  const fonts = brand.fonts;
+  if (fonts?.display) decls.push(`--ui-font-display: ${cleanValue(fonts.display)};`);
+  if (fonts?.body) decls.push(`--ui-font-sans: ${cleanValue(fonts.body)};`);
+  if (fonts?.numeral) decls.push(`--ui-font-numeral: ${cleanValue(fonts.numeral)};`);
+  return decls.length ? `:root {
+  ${decls.join("\n  ")}
+}
+` : "";
+}
+
+// src/ui/brand-style.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function BrandStyle(props) {
+  const css = brandTokens(props.brand);
+  if (!css) return null;
+  return /* @__PURE__ */ jsx9("style", { children: css });
+}
 export {
+  BrandStyle,
   ChapterAdmin,
   JoinIsland,
   MembersArea,
@@ -713,6 +807,7 @@ export {
   fmtMoney,
   fullLabel,
   groupSlotsByDay,
+  peopleSection,
   timeLabel,
   tzShort
 };