@odla-ai/chapter 0.31.3 → 0.32.0

package/README.md

@@ -4,8 +4,9 @@ A foundation for **membership sites**. One `defineChapter({...})` config resolve
 the shared application engine — join/apply → Stripe membership → Google booking
 → member area — plus an admin console and CRM, or an **admin-only hub**, on
 odla-db + Clerk + [@odla-ai/crm](https://odla.ai/docs/packages/crm) + calendar +
-email. The host still builds the public pages, routing, and brand presentation;
-Chapter supplies their application mechanics.
+email. The host still builds the public pages and routing. Chapter supplies the
+application mechanics plus an optional, versioned membership-card renderer so
+a hub preview and follower site can render the same reviewed content exactly.
 
 ```sh
 npm install @odla-ai/chapter
@@ -255,6 +256,95 @@ CRM, payment, booking, or account logic to achieve a different brand.
 
 ### Join and member composition
 
+For a centrally managed membership page, validate a bounded presentation
+document against the live, server-authoritative tiers, then render it with
+`MembershipCards`:
+
+```tsx
+import {
+  MEMBERSHIP_PAGE_RENDERER,
+  membershipPageDocument,
+} from "@odla-ai/chapter";
+import { MembershipCards } from "@odla-ai/chapter/ui/member";
+import { ThemeScope } from "@odla-ai/ui/components";
+
+const membershipPage = membershipPageDocument({
+  schemaVersion: 1,
+  renderer: MEMBERSHIP_PAGE_RENDERER,
+  tiers: [
+    {
+      tierId: "steward",
+      variant: "supporting",
+      badge: "Sustains the collective",
+      benefits: ["Everything in **Founding Member**", "The annual retreat"],
+      callout: {
+        label: "A word of thanks",
+        bodyMarkdown: "*You are the reason this collective can exist.*",
+      },
+      ctaLabel: "Fund the movement",
+    },
+    {
+      tierId: "founding",
+      variant: "featured",
+      badge: "Most members start here",
+      compareAtPriceCents: 100_000,
+      billingLabel: "a year",
+      capacity: { total: 100, label: "only" },
+      priceNoteMarkdown: "Your founding rate is **held for as long as you stay**.",
+      benefits: ["Live pitch nights", "A seat in diligence"],
+      ctaLabel: "Join the collective",
+    },
+    {
+      tierId: "associate",
+      summaryMarkdown: "Open to everyone, anywhere",
+      benefits: ["Founder pitch recordings", "The monthly member letter"],
+      ctaLabel: "Join for free",
+    },
+  ],
+}, { tiers: joinConfig.tiers });
+
+<ThemeScope tokens={approvedChapterTokens}>
+  <MembershipCards
+    tiers={joinConfig.tiers}
+    document={membershipPage}
+    applicationPath="/apply"
+  />
+</ThemeScope>
+```
+
+The document controls tier order and bounded copy slots. It cannot author
+prices, free/paid state, tier identity, links, CSS, or HTML; those remain live
+Chapter authority. Unknown fields, missing/duplicate tiers, oversized content,
+and compare-at prices that do not exceed the charged price fail validation.
+Markdown is rendered by the safe renderer from `@odla-ai/ui`.
+
+`MembershipCards` is token-native, including `--ui-font-sans`,
+`--ui-font-display`, and `--ui-font-numeral` as well as the semantic color,
+surface, border, radius, spacing, and shadow tokens. Its responsive layout and
+component CSS are versioned with the renderer. A CMS preview uses
+`mode="preview"`; the public page uses the default link mode. Both therefore
+share the same component, document, tier authority, and token scope.
+
+The same renderer can also replace the placeholder chooser inside
+`JoinIsland` without reimplementing selection:
+
+```tsx
+<JoinIsland
+  config={joinConfig}
+  renderTiers={({ tiers, selectedTierId, selectTier }) => (
+    <MembershipCards
+      tiers={tiers}
+      document={membershipPage}
+      mode="select"
+      selectedTierId={selectedTierId}
+      onSelectTier={selectTier}
+    />
+  )}
+>
+  <ApplicationFields />
+</JoinIsland>
+```
+
 `JoinIsland` keeps application mechanics while exposing presentation seams:
 
 ```tsx
@@ -841,6 +931,14 @@ worker to 6 lines and deleted ~2,500 lines. The order that worked:
 
 These bite silently — a smoke test won't catch them:
 
+- **Application fields generate the application schema.** The resolved
+  `application.required` and `application.optional` lists now control both
+  submit validation and the `applications` entity emitted by
+  `defineChapter()`. Built-in fields retain their types and indexes;
+  site-defined fields become string attrs. A field removed from the reference
+  form no longer remains accidentally required at `db.transact`, and a field
+  listed in both arrays is rejected at definition time. Keep package-owned
+  operational attrs such as `status` out of both lists.
 - **Per-field caps.** `application.defaultMaxLen` is 2000. If your form accepts
   longer input, pass `maxLen` explicitly or the default starts rejecting it.
 - **`services` default** is `["db","calendar","o11y"]`; `smoke` compares config

package/dist/{chunk-QWMP6TSM.js → chunk-BBCT7U3D.js}

@@ -720,6 +720,284 @@ function JoinIsland(props) {
   ] });
 }
 
+// src/ui/membership-cards.tsx
+import { Markdown } from "@odla-ai/ui/components";
+
+// src/membership-page.ts
+var MEMBERSHIP_PAGE_RENDERER = "membership-cards-v1";
+var TIER_ID = /^[a-z][a-z0-9-]{0,79}$/;
+var VARIANTS = /* @__PURE__ */ new Set(["standard", "featured", "supporting"]);
+var ROOT_KEYS = /* @__PURE__ */ new Set(["schemaVersion", "renderer", "tiers", "footnoteMarkdown"]);
+var TIER_KEYS = /* @__PURE__ */ new Set([
+  "tierId",
+  "variant",
+  "badge",
+  "summaryMarkdown",
+  "priceEyebrow",
+  "compareAtPriceCents",
+  "billingLabel",
+  "priceNoteMarkdown",
+  "capacity",
+  "benefits",
+  "callout",
+  "ctaLabel"
+]);
+var CALLOUT_KEYS = /* @__PURE__ */ new Set(["label", "bodyMarkdown"]);
+var CAPACITY_KEYS = /* @__PURE__ */ new Set(["total", "label"]);
+var MAX_TIERS = 20;
+var MAX_BENEFITS = 24;
+var MAX_MARKDOWN = 65536;
+var MAX_LABEL = 160;
+var objectRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
+function rejectUnknownKeys(value, allowed, path, errors) {
+  for (const key of Object.keys(value)) {
+    if (!allowed.has(key)) errors.push(`${path}.${key} is not supported`);
+  }
+}
+function boundedString(value, path, errors, max, required = false) {
+  if (value === void 0) {
+    if (required) errors.push(`${path} is required`);
+    return void 0;
+  }
+  if (typeof value !== "string") {
+    errors.push(`${path} must be a string`);
+    return void 0;
+  }
+  const text = value.trim();
+  if (required && !text) errors.push(`${path} is required`);
+  if (text.length > max) errors.push(`${path} must be at most ${max.toLocaleString("en-US")} characters`);
+  return text;
+}
+function validateMembershipPageDocument(input, options = {}) {
+  const errors = [];
+  const root = objectRecord(input);
+  if (!root) return { ok: false, errors: ["document must be an object"] };
+  rejectUnknownKeys(root, ROOT_KEYS, "document", errors);
+  if (root.schemaVersion !== 1) errors.push("document.schemaVersion must be 1");
+  if (root.renderer !== MEMBERSHIP_PAGE_RENDERER) {
+    errors.push(`document.renderer must be "${MEMBERSHIP_PAGE_RENDERER}"`);
+  }
+  if (!Array.isArray(root.tiers)) errors.push("document.tiers must be an array");
+  const rawTiers = Array.isArray(root.tiers) ? root.tiers : [];
+  if (Array.isArray(root.tiers) && rawTiers.length === 0) errors.push("document.tiers must include at least one tier");
+  if (rawTiers.length > MAX_TIERS) errors.push(`document.tiers supports at most ${MAX_TIERS} entries`);
+  const authority = new Map((options.tiers ?? []).map((tier) => [tier.id, tier]));
+  const seen = /* @__PURE__ */ new Set();
+  const tiers = [];
+  for (const [index, raw] of rawTiers.slice(0, MAX_TIERS).entries()) {
+    const path = `document.tiers[${index}]`;
+    const item = objectRecord(raw);
+    if (!item) {
+      errors.push(`${path} must be an object`);
+      continue;
+    }
+    rejectUnknownKeys(item, TIER_KEYS, path, errors);
+    const tierId = boundedString(item.tierId, `${path}.tierId`, errors, 80, true) ?? "";
+    if (tierId && !TIER_ID.test(tierId)) errors.push(`${path}.tierId must be a lowercase kebab-case id`);
+    if (seen.has(tierId)) errors.push(`${path}.tierId duplicates "${tierId}"`);
+    seen.add(tierId);
+    if (authority.size && !authority.has(tierId)) errors.push(`${path}.tierId "${tierId}" is not an offered tier`);
+    const variant = item.variant;
+    if (variant !== void 0 && (typeof variant !== "string" || !VARIANTS.has(variant))) {
+      errors.push(`${path}.variant must be standard, featured, or supporting`);
+    }
+    const compareAt = item.compareAtPriceCents;
+    if (compareAt !== void 0 && (!Number.isInteger(compareAt) || Number(compareAt) < 0 || Number(compareAt) > 1e8)) {
+      errors.push(`${path}.compareAtPriceCents must be an integer from 0 to 100,000,000`);
+    }
+    const actual = authority.get(tierId)?.priceCents;
+    if (Number.isInteger(compareAt) && actual !== void 0 && Number(compareAt) <= actual) {
+      errors.push(`${path}.compareAtPriceCents must be greater than the authoritative tier price`);
+    }
+    let benefits;
+    if (item.benefits !== void 0) {
+      if (!Array.isArray(item.benefits)) errors.push(`${path}.benefits must be an array`);
+      else {
+        if (item.benefits.length > MAX_BENEFITS) errors.push(`${path}.benefits supports at most ${MAX_BENEFITS} entries`);
+        benefits = item.benefits.slice(0, MAX_BENEFITS).flatMap((benefit, benefitIndex) => {
+          const text = boundedString(benefit, `${path}.benefits[${benefitIndex}]`, errors, 2e3, true);
+          return text ? [text] : [];
+        });
+      }
+    }
+    let callout;
+    if (item.callout !== void 0) {
+      const rawCallout = objectRecord(item.callout);
+      if (!rawCallout) errors.push(`${path}.callout must be an object`);
+      else {
+        rejectUnknownKeys(rawCallout, CALLOUT_KEYS, `${path}.callout`, errors);
+        const bodyMarkdown = boundedString(rawCallout.bodyMarkdown, `${path}.callout.bodyMarkdown`, errors, MAX_MARKDOWN, true);
+        const label = boundedString(rawCallout.label, `${path}.callout.label`, errors, MAX_LABEL);
+        if (bodyMarkdown) callout = { ...label ? { label } : {}, bodyMarkdown };
+      }
+    }
+    let capacity;
+    if (item.capacity !== void 0) {
+      const rawCapacity = objectRecord(item.capacity);
+      if (!rawCapacity) errors.push(`${path}.capacity must be an object`);
+      else {
+        rejectUnknownKeys(rawCapacity, CAPACITY_KEYS, `${path}.capacity`, errors);
+        const total = rawCapacity.total;
+        if (!Number.isInteger(total) || Number(total) < 1 || Number(total) > 1e6) {
+          errors.push(`${path}.capacity.total must be an integer from 1 to 1,000,000`);
+        }
+        const label = boundedString(rawCapacity.label, `${path}.capacity.label`, errors, MAX_LABEL);
+        if (Number.isInteger(total) && Number(total) >= 1 && Number(total) <= 1e6) {
+          capacity = { total: Number(total), ...label ? { label } : {} };
+        }
+      }
+    }
+    const badge = boundedString(item.badge, `${path}.badge`, errors, MAX_LABEL);
+    const summaryMarkdown = boundedString(item.summaryMarkdown, `${path}.summaryMarkdown`, errors, MAX_MARKDOWN);
+    const priceEyebrow = boundedString(item.priceEyebrow, `${path}.priceEyebrow`, errors, MAX_LABEL);
+    const billingLabel = boundedString(item.billingLabel, `${path}.billingLabel`, errors, MAX_LABEL);
+    const priceNoteMarkdown = boundedString(item.priceNoteMarkdown, `${path}.priceNoteMarkdown`, errors, MAX_MARKDOWN);
+    const ctaLabel = boundedString(item.ctaLabel, `${path}.ctaLabel`, errors, MAX_LABEL);
+    tiers.push({
+      tierId,
+      ...typeof variant === "string" && VARIANTS.has(variant) ? { variant } : {},
+      ...badge ? { badge } : {},
+      ...summaryMarkdown ? { summaryMarkdown } : {},
+      ...priceEyebrow ? { priceEyebrow } : {},
+      ...Number.isInteger(compareAt) ? { compareAtPriceCents: Number(compareAt) } : {},
+      ...billingLabel ? { billingLabel } : {},
+      ...priceNoteMarkdown ? { priceNoteMarkdown } : {},
+      ...capacity ? { capacity } : {},
+      ...benefits ? { benefits } : {},
+      ...callout ? { callout } : {},
+      ...ctaLabel ? { ctaLabel } : {}
+    });
+  }
+  if (authority.size) {
+    for (const tierId of authority.keys()) {
+      if (!seen.has(tierId)) errors.push(`document.tiers is missing offered tier "${tierId}"`);
+    }
+  }
+  const footnoteMarkdown = boundedString(root.footnoteMarkdown, "document.footnoteMarkdown", errors, MAX_MARKDOWN);
+  if (errors.length) return { ok: false, errors };
+  return {
+    ok: true,
+    value: {
+      schemaVersion: 1,
+      renderer: MEMBERSHIP_PAGE_RENDERER,
+      tiers,
+      ...footnoteMarkdown ? { footnoteMarkdown } : {}
+    }
+  };
+}
+function membershipPageDocument(input, options = {}) {
+  const result = validateMembershipPageDocument(input, options);
+  if (!result.ok) throw new TypeError(`Invalid membership page document: ${result.errors.join("; ")}`);
+  return result.value;
+}
+
+// src/ui/membership-cards.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "preact/jsx-runtime";
+var MEMBERSHIP_CARDS_CSS = `
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}]{font-family:var(--ui-font-sans,ui-sans-serif,system-ui,sans-serif);color:var(--ui-text,#17252d)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-grid{display:grid;grid-template-columns:1fr;gap:var(--ui-space-6,1.5rem);align-items:stretch}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:clamp(1.35rem,3vw,2.25rem);border:1px solid var(--ui-border,#d9e1e1);border-radius:var(--ui-radius-lg,1.25rem);background:var(--ui-surface,#fff);box-shadow:var(--ui-shadow,0 10px 30px rgb(8 31 44 / .05))}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-card[data-variant=featured]{border-color:var(--ui-accent,#168c84);box-shadow:var(--ui-shadow-strong,var(--ui-shadow,0 18px 48px rgb(8 31 44 / .1)))}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-badge{align-self:flex-start;margin:-2.85rem 0 1.35rem;padding:.55rem 1rem;border-radius:999px;background:var(--ui-accent,#168c84);color:var(--ui-on-accent,#fff);font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:var(--ui-text-xs,.75rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] [data-variant=supporting] .chapter-membership-badge{background:var(--ui-accent-strong,#0d3b52)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-name{margin:0;font-family:var(--ui-font-display,ui-serif,Georgia,serif);font-size:clamp(1.65rem,3vw,2.25rem);font-weight:var(--ui-font-weight-display,400);line-height:1.08;color:var(--ui-text,#17252d)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-price-row{display:flex;flex-wrap:wrap;align-items:end;gap:.45rem;margin:1.1rem 0 .7rem}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-price{font-family:var(--ui-font-numeral,var(--ui-font-display,ui-serif,Georgia,serif));font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--ui-text,#17252d)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-compare{font-size:var(--ui-text-lg,1.125rem);color:var(--ui-text-muted,#66777f);text-decoration:line-through}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-billing{padding-bottom:.18rem;color:var(--ui-text-muted,#66777f)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-price-eyebrow{margin:1rem 0 -.75rem;font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:var(--ui-text-xs,.75rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-accent-strong,#0d3b52)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-summary{color:var(--ui-text-muted,#66777f)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-summary.ui-markdown,[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-price-note.ui-markdown,[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-benefit.ui-markdown,[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-callout .ui-markdown{font:inherit;color:inherit}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-capacity{display:grid;place-items:center;align-self:flex-start;width:4.75rem;height:4.75rem;margin:.35rem 0;border:2px solid var(--ui-accent,#168c84);border-radius:50%;color:var(--ui-accent-strong,#0d3b52)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-capacity strong{font-family:var(--ui-font-numeral,var(--ui-font-display,ui-serif,Georgia,serif));font-size:1.7rem;font-weight:400;line-height:1}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-capacity small{font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-benefits{display:grid;gap:.8rem;margin:1.3rem 0;padding:0;list-style:none}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-benefits li{display:grid;grid-template-columns:1.2rem minmax(0,1fr);gap:.55rem;align-items:start}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-check{display:grid;place-items:center;width:1.15rem;height:1.15rem;margin-top:.12rem;border-radius:50%;background:var(--ui-accent-soft,#edf7fa);color:var(--ui-accent-strong,#0d3b52);font-size:.72rem;font-weight:800}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-callout{margin:1rem 0;padding:1.15rem;border-radius:var(--ui-radius-md,.9rem);background:var(--ui-surface-2,#f1f6fa);color:var(--ui-text,#17252d)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-callout-label{margin:0 0 .6rem;font-family:var(--ui-font-mono,ui-monospace,monospace);font-size:var(--ui-text-xs,.75rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-accent-strong,#0d3b52)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-action{display:inline-flex;align-items:center;justify-content:flex-start;gap:.4rem;margin-top:auto;padding:1.25rem 0 0;border:0;background:transparent;color:var(--ui-accent-strong,#0d3b52);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-action[aria-current=true]{color:var(--ui-accent,#168c84)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-action:focus-visible{outline:none;box-shadow:var(--ui-focus,0 0 0 3px var(--ui-accent-soft,#dff5f1));border-radius:var(--ui-radius-sm,.2rem)}
+[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-footnote{margin:1.5rem auto 0;max-width:70ch;color:var(--ui-text-muted,#66777f);text-align:center}
+@media (min-width:56rem){[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-grid{grid-template-columns:repeat(var(--chapter-membership-columns,3),minmax(0,1fr))}}
+@media (prefers-reduced-motion:no-preference){[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-action{transition:color .16s ease,transform .16s ease}[data-chapter-membership=${MEMBERSHIP_PAGE_RENDERER}] .chapter-membership-action:hover{transform:translateX(.2rem)}}
+`;
+var safeApplicationPath = (value) => {
+  if (typeof value !== "string" || !/^\/(?!\/)[^\s#\\]*$/.test(value)) return "/apply";
+  try {
+    const resolved = new URL(value, "https://chapter.invalid");
+    return resolved.origin === "https://chapter.invalid" ? `${resolved.pathname}${resolved.search}` : "/apply";
+  } catch {
+    return "/apply";
+  }
+};
+function membershipApplicationHref(applicationPath, tierId) {
+  const path = safeApplicationPath(applicationPath);
+  return `${path}${path.includes("?") ? "&" : "?"}tier=${encodeURIComponent(tierId)}`;
+}
+function TierAction(props) {
+  if (props.mode === "select") {
+    return /* @__PURE__ */ jsxs8("button", { type: "button", className: "chapter-membership-action", "aria-current": props.selected ? "true" : void 0, onClick: () => props.onSelectTier?.(props.tierId), children: [
+      props.label,
+      /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\u2192" })
+    ] });
+  }
+  if (props.mode === "preview") {
+    return /* @__PURE__ */ jsxs8("span", { className: "chapter-membership-action", "aria-disabled": "true", children: [
+      props.label,
+      /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\u2192" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8("a", { className: "chapter-membership-action", href: membershipApplicationHref(props.applicationPath, props.tierId), children: [
+    props.label,
+    /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\u2192" })
+  ] });
+}
+function TierCard(props) {
+  const { tier, presentation } = props;
+  const summary = presentation.summaryMarkdown ?? tier.blurb;
+  const action = presentation.ctaLabel ?? (tier.free ? "Join for free" : `Choose ${tier.name}`);
+  return /* @__PURE__ */ jsxs8("article", { className: "chapter-membership-card", "data-tier-id": tier.id, "data-variant": presentation.variant ?? "standard", children: [
+    presentation.badge ? /* @__PURE__ */ jsx8("div", { className: "chapter-membership-badge", children: presentation.badge }) : null,
+    /* @__PURE__ */ jsx8("h3", { className: "chapter-membership-name", children: tier.name }),
+    presentation.priceEyebrow ? /* @__PURE__ */ jsx8("p", { className: "chapter-membership-price-eyebrow", children: presentation.priceEyebrow }) : null,
+    presentation.capacity ? /* @__PURE__ */ jsxs8("div", { className: "chapter-membership-capacity", "aria-label": `${presentation.capacity.total} ${presentation.capacity.label ?? "available"}`, children: [
+      /* @__PURE__ */ jsx8("strong", { children: presentation.capacity.total.toLocaleString("en-US") }),
+      /* @__PURE__ */ jsx8("small", { children: presentation.capacity.label ?? "available" })
+    ] }) : null,
+    /* @__PURE__ */ jsxs8("div", { className: "chapter-membership-price-row", children: [
+      presentation.compareAtPriceCents !== void 0 ? /* @__PURE__ */ jsx8("span", { className: "chapter-membership-compare", children: fmtMoney(presentation.compareAtPriceCents) }) : null,
+      /* @__PURE__ */ jsx8("span", { className: "chapter-membership-price", children: tier.free ? "Free" : fmtMoney(tier.priceCents) }),
+      !tier.free && presentation.billingLabel ? /* @__PURE__ */ jsx8("span", { className: "chapter-membership-billing", children: presentation.billingLabel }) : null
+    ] }),
+    presentation.priceNoteMarkdown ? /* @__PURE__ */ jsx8(Markdown, { className: "chapter-membership-price-note", source: presentation.priceNoteMarkdown }) : null,
+    summary ? /* @__PURE__ */ jsx8(Markdown, { className: "chapter-membership-summary", source: summary }) : null,
+    presentation.benefits?.length ? /* @__PURE__ */ jsx8("ul", { className: "chapter-membership-benefits", children: presentation.benefits.map((benefit, index) => /* @__PURE__ */ jsxs8("li", { children: [
+      /* @__PURE__ */ jsx8("span", { className: "chapter-membership-check", "aria-hidden": "true", children: "\u2713" }),
+      /* @__PURE__ */ jsx8(Markdown, { className: "chapter-membership-benefit", source: benefit })
+    ] }, `${tier.id}-benefit-${index}`)) }) : null,
+    presentation.callout ? /* @__PURE__ */ jsxs8("aside", { className: "chapter-membership-callout", children: [
+      presentation.callout.label ? /* @__PURE__ */ jsx8("p", { className: "chapter-membership-callout-label", children: presentation.callout.label }) : null,
+      /* @__PURE__ */ jsx8(Markdown, { source: presentation.callout.bodyMarkdown })
+    ] }) : null,
+    /* @__PURE__ */ jsx8(TierAction, { tierId: tier.id, label: action, mode: props.mode, selected: props.selected, applicationPath: props.applicationPath, onSelectTier: props.onSelectTier })
+  ] });
+}
+function MembershipCards(props) {
+  const document2 = membershipPageDocument(props.document, { tiers: props.tiers });
+  const byId = new Map(props.tiers.map((tier) => [tier.id, tier]));
+  const mode = props.mode ?? "link";
+  return /* @__PURE__ */ jsxs8("section", { className: ["chapter-membership", props.className].filter(Boolean).join(" "), "data-chapter-membership": MEMBERSHIP_PAGE_RENDERER, "aria-label": props.ariaLabel ?? "Membership options", children: [
+    /* @__PURE__ */ jsx8("style", { children: MEMBERSHIP_CARDS_CSS }),
+    /* @__PURE__ */ jsx8("div", { className: "chapter-membership-grid", style: { "--chapter-membership-columns": String(Math.min(document2.tiers.length, 3)) }, children: document2.tiers.map((presentation) => {
+      const tier = byId.get(presentation.tierId);
+      return /* @__PURE__ */ jsx8(TierCard, { tier, presentation, mode, selected: props.selectedTierId === tier.id, applicationPath: props.applicationPath, onSelectTier: props.onSelectTier }, tier.id);
+    }) }),
+    document2.footnoteMarkdown ? /* @__PURE__ */ jsx8(Markdown, { className: "chapter-membership-footnote", source: document2.footnoteMarkdown }) : null
+  ] });
+}
+
 export {
   tzShort,
   dayKey,
@@ -737,6 +1015,8 @@ export {
   TierPlaceholder,
   tierNeedsPayment,
   loadJoinResume,
-  JoinIsland
+  JoinIsland,
+  membershipApplicationHref,
+  MembershipCards
 };
-//# sourceMappingURL=chunk-QWMP6TSM.js.map
+//# sourceMappingURL=chunk-BBCT7U3D.js.map