@tangle-network/agent-app 0.29.0 → 0.30.0

package/dist/{DesignCanvasEditor-IB2FMBBD.js → DesignCanvasEditor-QQNAZRJQ.js}

@@ -1,13 +1,13 @@
 import {
   DesignCanvasEditor
-} from "./chunk-N4ZFKQ5C.js";
+} from "./chunk-YYYXGLLQ.js";
 import "./chunk-YEWTVDDT.js";
 import "./chunk-V5XZKHCL.js";
 import "./chunk-XWJXZ6WE.js";
-import "./chunk-Y2SZVW35.js";
+import "./chunk-LVD37K5V.js";
 import "./chunk-M2EBUDZ7.js";
 import "./chunk-HFC4BTWJ.js";
 export {
   DesignCanvasEditor
 };
-//# sourceMappingURL=DesignCanvasEditor-IB2FMBBD.js.map
+//# sourceMappingURL=DesignCanvasEditor-QQNAZRJQ.js.map

package/dist/{chunk-Y2SZVW35.js → chunk-LVD37K5V.js}

@@ -1,29 +1,29 @@
 // src/theme/theme.ts
 var lightTheme = {
   background: "0 0% 100%",
-  foreground: "222 47% 11%",
-  card: "0 0% 100%",
-  cardForeground: "222 47% 11%",
+  foreground: "0 0% 5%",
+  card: "240 7% 97%",
+  cardForeground: "0 0% 5%",
   popover: "0 0% 100%",
-  popoverForeground: "222 47% 11%",
-  primary: "221 83% 47%",
+  popoverForeground: "0 0% 5%",
+  primary: "245 62% 57%",
   primaryForeground: "0 0% 100%",
-  secondary: "210 40% 96%",
-  secondaryForeground: "222 47% 30%",
-  muted: "210 40% 96%",
-  mutedForeground: "215 16% 44%",
-  accent: "210 40% 96%",
-  accentForeground: "222 47% 11%",
-  destructive: "0 72% 45%",
+  secondary: "240 6% 93%",
+  secondaryForeground: "0 0% 10%",
+  muted: "240 6% 93%",
+  mutedForeground: "240 5% 38%",
+  accent: "240 6% 93%",
+  accentForeground: "0 0% 10%",
+  destructive: "0 72% 41%",
   destructiveForeground: "0 0% 100%",
-  border: "214 32% 91%",
-  input: "214 32% 91%",
-  ring: "221 83% 53%",
-  success: "142 72% 29%",
+  border: "240 6% 89%",
+  input: "240 6% 89%",
+  ring: "245 62% 57%",
+  success: "160 84% 26%",
   successForeground: "0 0% 100%",
-  warning: "38 92% 32%",
+  warning: "41 96% 38%",
   warningForeground: "38 92% 12%",
-  canvasBackdrop: "hsl(220 13% 91%)",
+  canvasBackdrop: "hsl(240 7% 90%)",
   canvasRender: {
     grid: "#c0c0c0",
     snapGrid: "#a0a0a0",
@@ -39,30 +39,30 @@ var lightTheme = {
   }
 };
 var darkTheme = {
-  background: "222 47% 7%",
-  foreground: "210 40% 98%",
-  card: "222 47% 11%",
-  cardForeground: "210 40% 98%",
-  popover: "222 47% 11%",
-  popoverForeground: "210 40% 98%",
-  primary: "217 91% 72%",
-  primaryForeground: "222 47% 11%",
-  secondary: "217 33% 17%",
-  secondaryForeground: "210 40% 90%",
-  muted: "217 33% 17%",
-  mutedForeground: "215 20% 65%",
-  accent: "217 33% 17%",
-  accentForeground: "210 40% 98%",
-  destructive: "0 78% 67%",
+  background: "240 8% 5%",
+  foreground: "240 6% 93%",
+  card: "240 5% 8%",
+  cardForeground: "240 6% 93%",
+  popover: "240 4% 13%",
+  popoverForeground: "240 6% 93%",
+  primary: "239 84% 74%",
+  primaryForeground: "0 0% 100%",
+  secondary: "240 5% 11%",
+  secondaryForeground: "240 6% 93%",
+  muted: "240 5% 11%",
+  mutedForeground: "240 4% 62%",
+  accent: "240 5% 11%",
+  accentForeground: "240 6% 93%",
+  destructive: "348 90% 68%",
   destructiveForeground: "0 0% 12%",
-  border: "217 33% 20%",
-  input: "217 33% 20%",
-  ring: "217 91% 60%",
-  success: "142 60% 50%",
-  successForeground: "142 80% 12%",
-  warning: "38 95% 58%",
+  border: "240 3% 13%",
+  input: "240 5% 11%",
+  ring: "239 84% 74%",
+  success: "160 70% 52%",
+  successForeground: "160 84% 10%",
+  warning: "40 94% 56%",
   warningForeground: "38 92% 12%",
-  canvasBackdrop: "hsl(0 0% 10%)",
+  canvasBackdrop: "hsl(240 8% 5%)",
   canvasRender: {
     grid: "#3a3a3a",
     snapGrid: "#5a5a5a",
@@ -122,4 +122,4 @@ export {
   themeColor,
   themeToCssVars
 };
-//# sourceMappingURL=chunk-Y2SZVW35.js.map
+//# sourceMappingURL=chunk-LVD37K5V.js.map

package/dist/chunk-LVD37K5V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/theme.ts"],"sourcesContent":["/**\n * Typed mirror of tokens.css for runtime/JS theming. The canonical source is\n * tokens.css (`import '@tangle-network/agent-app/styles'`); this module is for\n * apps that compute theme variables in JS, or read color values where CSS\n * custom properties cannot reach — notably Konva canvas render code, which\n * paints to a bitmap and cannot resolve `var(--…)`.\n *\n * Values are shadcn-style HSL channel triples (\"H S% L%\"); wrap with `color()`.\n */\n\nexport interface AgentAppTheme {\n  background: string\n  foreground: string\n  card: string\n  cardForeground: string\n  popover: string\n  popoverForeground: string\n  primary: string\n  primaryForeground: string\n  secondary: string\n  secondaryForeground: string\n  muted: string\n  mutedForeground: string\n  accent: string\n  accentForeground: string\n  destructive: string\n  destructiveForeground: string\n  border: string\n  input: string\n  ring: string\n  success: string\n  successForeground: string\n  warning: string\n  warningForeground: string\n  /** Full CSS color (not a triple) — the canvas/scene backdrop. */\n  canvasBackdrop: string\n  /** Konva render palette — full hex colors the bitmap canvas paints with\n   *  (it cannot resolve `var(--…)`). NOT emitted by themeToCssVars. */\n  canvasRender: CanvasRenderPalette\n}\n\n/**\n * Colors the Konva design-canvas paints directly. Konva renders to a bitmap\n * and cannot read CSS custom properties, so these are full hex strings sourced\n * from the active theme and threaded through the canvas components.\n */\nexport interface CanvasRenderPalette {\n  /** Grid line color (GridLayer). */\n  grid: string\n  /** Grid-snap guide line (SnapGuidesOverlay, kind 'grid'). */\n  snapGrid: string\n  /** Saved ruler-guide snap line (kind 'guide'). */\n  snapGuide: string\n  /** Page edge/center snap line (kinds 'page-edge'/'page-center'). */\n  snapPage: string\n  /** Element edge/center snap line (kinds 'element-edge'/'element-center'). */\n  snapElement: string\n  /** Transformer border + anchor stroke (SelectionLayer). */\n  selectionStroke: string\n  /** Transformer anchor fill (SelectionLayer). */\n  selectionAnchorFill: string\n  /** Video placeholder fill (ElementNode VideoNode). */\n  placeholderFill: string\n  /** Video placeholder stroke (ElementNode VideoNode). */\n  placeholderStroke: string\n  /** Broken/loading image placeholder fill (ElementNode ImageNode). */\n  brokenFill: string\n  /** Broken/loading image placeholder stroke (ElementNode ImageNode). */\n  brokenStroke: string\n}\n\nexport const lightTheme: AgentAppTheme = {\n  background: '0 0% 100%',\n  foreground: '0 0% 5%',\n  card: '240 7% 97%',\n  cardForeground: '0 0% 5%',\n  popover: '0 0% 100%',\n  popoverForeground: '0 0% 5%',\n  primary: '245 62% 57%',\n  primaryForeground: '0 0% 100%',\n  secondary: '240 6% 93%',\n  secondaryForeground: '0 0% 10%',\n  muted: '240 6% 93%',\n  mutedForeground: '240 5% 38%',\n  accent: '240 6% 93%',\n  accentForeground: '0 0% 10%',\n  destructive: '0 72% 41%',\n  destructiveForeground: '0 0% 100%',\n  border: '240 6% 89%',\n  input: '240 6% 89%',\n  ring: '245 62% 57%',\n  success: '160 84% 26%',\n  successForeground: '0 0% 100%',\n  warning: '41 96% 38%',\n  warningForeground: '38 92% 12%',\n  canvasBackdrop: 'hsl(240 7% 90%)',\n  canvasRender: {\n    grid: '#c0c0c0',\n    snapGrid: '#a0a0a0',\n    snapGuide: '#3b82f6',\n    snapPage: '#f59e0b',\n    snapElement: '#f43f5e',\n    selectionStroke: '#00a1ff',\n    selectionAnchorFill: '#ffffff',\n    placeholderFill: '#1f2937',\n    placeholderStroke: '#374151',\n    brokenFill: '#e5e7eb',\n    brokenStroke: '#9ca3af',\n  },\n}\n\nexport const darkTheme: AgentAppTheme = {\n  background: '240 8% 5%',\n  foreground: '240 6% 93%',\n  card: '240 5% 8%',\n  cardForeground: '240 6% 93%',\n  popover: '240 4% 13%',\n  popoverForeground: '240 6% 93%',\n  primary: '239 84% 74%',\n  primaryForeground: '0 0% 100%',\n  secondary: '240 5% 11%',\n  secondaryForeground: '240 6% 93%',\n  muted: '240 5% 11%',\n  mutedForeground: '240 4% 62%',\n  accent: '240 5% 11%',\n  accentForeground: '240 6% 93%',\n  destructive: '348 90% 68%',\n  destructiveForeground: '0 0% 12%',\n  border: '240 3% 13%',\n  input: '240 5% 11%',\n  ring: '239 84% 74%',\n  success: '160 70% 52%',\n  successForeground: '160 84% 10%',\n  warning: '40 94% 56%',\n  warningForeground: '38 92% 12%',\n  canvasBackdrop: 'hsl(240 8% 5%)',\n  canvasRender: {\n    grid: '#3a3a3a',\n    snapGrid: '#5a5a5a',\n    snapGuide: '#3b82f6',\n    snapPage: '#f59e0b',\n    snapElement: '#f43f5e',\n    selectionStroke: '#00a1ff',\n    selectionAnchorFill: '#e5e7eb',\n    placeholderFill: '#2a2f3a',\n    placeholderStroke: '#3f4654',\n    brokenFill: '#262b33',\n    brokenStroke: '#4b5563',\n  },\n}\n\n/** Wrap a channel triple in `hsl()`; pass through values already in a color form. */\nexport function themeColor(value: string): string {\n  return value.startsWith('hsl') || value.startsWith('#') || value.startsWith('rgb')\n    ? value\n    : `hsl(${value})`\n}\n\n/**\n * Map a theme to the full CSS-variable set (shadcn triples + canvas/sequences\n * aliases + canvas surface). Apply at runtime to scope a theme without loading\n * tokens.css: `Object.assign(el.style, themeToCssVars(darkTheme))`.\n */\nexport function themeToCssVars(theme: AgentAppTheme): Record<string, string> {\n  return {\n    '--background': theme.background,\n    '--foreground': theme.foreground,\n    '--card': theme.card,\n    '--card-foreground': theme.cardForeground,\n    '--popover': theme.popover,\n    '--popover-foreground': theme.popoverForeground,\n    '--primary': theme.primary,\n    '--primary-foreground': theme.primaryForeground,\n    '--secondary': theme.secondary,\n    '--secondary-foreground': theme.secondaryForeground,\n    '--muted': theme.muted,\n    '--muted-foreground': theme.mutedForeground,\n    '--accent': theme.accent,\n    '--accent-foreground': theme.accentForeground,\n    '--destructive': theme.destructive,\n    '--destructive-foreground': theme.destructiveForeground,\n    '--border': theme.border,\n    '--input': theme.input,\n    '--ring': theme.ring,\n    '--success': theme.success,\n    '--success-foreground': theme.successForeground,\n    '--warning': theme.warning,\n    '--warning-foreground': theme.warningForeground,\n    '--bg-input': `hsl(${theme.card})`,\n    '--text-primary': `hsl(${theme.foreground})`,\n    '--text-secondary': `hsl(${theme.secondaryForeground})`,\n    '--text-muted': `hsl(${theme.mutedForeground})`,\n    '--text-danger': `hsl(${theme.destructive})`,\n    '--border-default': `hsl(${theme.border})`,\n    '--brand-primary': `hsl(${theme.primary})`,\n    '--canvas-backdrop': theme.canvasBackdrop,\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-S5CAJX6O.js → chunk-WOVCWPFF.js}

@@ -1,7 +1,7 @@
 // src/design-canvas-react/lazy.tsx
 import { lazy } from "react";
 var DesignCanvasLazy = lazy(
-  () => import("./DesignCanvasEditor-IB2FMBBD.js").then((m) => ({ default: m.DesignCanvasEditor }))
+  () => import("./DesignCanvasEditor-QQNAZRJQ.js").then((m) => ({ default: m.DesignCanvasEditor }))
 );
 var DesignCanvasChromeLazy = lazy(
   () => import("./DesignCanvas-AOIVN3SJ.js").then((m) => ({ default: m.DesignCanvas }))
@@ -11,4 +11,4 @@ export {
   DesignCanvasLazy,
   DesignCanvasChromeLazy
 };
-//# sourceMappingURL=chunk-S5CAJX6O.js.map
+//# sourceMappingURL=chunk-WOVCWPFF.js.map

package/dist/{chunk-N4ZFKQ5C.js → chunk-YYYXGLLQ.js}

@@ -24,7 +24,7 @@ import {
 } from "./chunk-XWJXZ6WE.js";
 import {
   lightTheme
-} from "./chunk-Y2SZVW35.js";
+} from "./chunk-LVD37K5V.js";
 import {
   SCENE_SCHEMA_VERSION,
   boundsIntersect,
@@ -1772,4 +1772,4 @@ export {
   Workspace,
   DesignCanvasEditor
 };
-//# sourceMappingURL=chunk-N4ZFKQ5C.js.map
+//# sourceMappingURL=chunk-YYYXGLLQ.js.map

package/dist/design-canvas-react/index.js

@@ -11,7 +11,7 @@ import {
   downloadDataUrl,
   exportDocumentJson,
   exportPageDataUrl
-} from "../chunk-N4ZFKQ5C.js";
+} from "../chunk-YYYXGLLQ.js";
 import {
   BTN,
   BTN_ACTIVE,
@@ -85,8 +85,8 @@ import {
 import {
   DesignCanvasChromeLazy,
   DesignCanvasLazy
-} from "../chunk-S5CAJX6O.js";
-import "../chunk-Y2SZVW35.js";
+} from "../chunk-WOVCWPFF.js";
+import "../chunk-LVD37K5V.js";
 import {
   assertSceneMediaSrc,
   bleedAwareExportBounds,

package/dist/design-canvas-react/lazy.js

@@ -1,7 +1,7 @@
 import {
   DesignCanvasChromeLazy,
   DesignCanvasLazy
-} from "../chunk-S5CAJX6O.js";
+} from "../chunk-WOVCWPFF.js";
 export {
   DesignCanvasChromeLazy,
   DesignCanvasLazy

package/dist/index.js

@@ -18,7 +18,7 @@ import {
   lightTheme,
   themeColor,
   themeToCssVars
-} from "./chunk-Y2SZVW35.js";
+} from "./chunk-LVD37K5V.js";
 import {
   CHANNEL_PRESETS,
   EXPORT_PRESETS,

package/dist/theme/index.js

@@ -4,7 +4,7 @@ import {
   lightTheme,
   themeColor,
   themeToCssVars
-} from "../chunk-Y2SZVW35.js";
+} from "../chunk-LVD37K5V.js";
 export {
   darkTheme,
   lightTheme,

package/dist/theme/tokens.css

@@ -18,36 +18,36 @@
  */
 
 :root {
-  /* shadcn channel triples — "H S% L%", consumed as hsl(var(--name)) */
+  /* shadcn channel triples — "H S% L%", consumed as hsl(var(--name)).
+     Values mirror @tangle-network/brand (Tangle Quiet) so agent-app surfaces
+     match sandbox-ui in the same app. agent-app keeps its own light-default /
+     [data-theme="dark"] scope model (brand is dark-default), so /theme stays
+     dependency-free — only the values are shared, not the cascade. */
   --background: 0 0% 100%;
-  --foreground: 222 47% 11%;
-  --card: 0 0% 100%;
-  --card-foreground: 222 47% 11%;
+  --foreground: 0 0% 5%;
+  --card: 240 7% 97%;
+  --card-foreground: 0 0% 5%;
   --popover: 0 0% 100%;
-  --popover-foreground: 222 47% 11%;
-  --primary: 221 83% 47%;
+  --popover-foreground: 0 0% 5%;
+  --primary: 245 62% 57%;
   --primary-foreground: 0 0% 100%;
-  --secondary: 210 40% 96%;
-  --secondary-foreground: 222 47% 30%;
-  --muted: 210 40% 96%;
-  /* 44% L (was 47%) so muted text clears WCAG AA even on subtly tinted surfaces
-     (e.g. the failed tool card's 5%-red wash); ~4.7:1 on white. */
-  --muted-foreground: 215 16% 44%;
-  --accent: 210 40% 96%;
-  --accent-foreground: 222 47% 11%;
-  --destructive: 0 72% 45%;
+  --secondary: 240 6% 93%;
+  --secondary-foreground: 0 0% 10%;
+  --muted: 240 6% 93%;
+  --muted-foreground: 240 5% 38%;
+  --accent: 240 6% 93%;
+  --accent-foreground: 0 0% 10%;
+  --destructive: 0 72% 41%;
   --destructive-foreground: 0 0% 100%;
-  --border: 214 32% 91%;
-  --input: 214 32% 91%;
-  --ring: 221 83% 53%;
-  /* note: --primary below is darkened from 53% → 47% L so the brand blue clears
-     WCAG AA (4.5:1) when used AS TEXT on a light surface; --ring stays at the
-     brighter 53% (a 2px focus ring only needs 3:1 non-text contrast). */
-  /* status colors — dark enough on light surfaces to clear AA as text (used by
-     chips, dots, and solid buttons via the Tailwind preset's success/warning). */
-  --success: 142 72% 29%;
+  --border: 240 6% 89%;
+  --input: 240 6% 89%;
+  --ring: 245 62% 57%;
+  /* status colors — brand hues (teal/gold/red), but lightness kept dark enough
+     to clear WCAG AA when used AS TEXT on tinted chips. Brand's own status
+     accents are dot/surface colors and are not text-contrast-tuned. */
+  --success: 160 84% 26%;
   --success-foreground: 0 0% 100%;
-  --warning: 38 92% 32%;
+  --warning: 41 96% 38%;
   --warning-foreground: 38 92% 12%;
 
   /* canvas/sequences aliases — full colors, resolve to the triples above */
@@ -62,34 +62,36 @@
 
   /* canvas-only surfaces (not part of the shadcn vocabulary). Name matches the
      `--canvas-backdrop` the design-canvas Workspace references (with a #1a1a1a fallback). */
-  --canvas-backdrop: hsl(220 13% 91%);
+  --canvas-backdrop: hsl(240 7% 90%);
 }
 
 [data-theme='dark'],
 .dark {
-  --background: 222 47% 7%;
-  --foreground: 210 40% 98%;
-  --card: 222 47% 11%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222 47% 11%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 217 91% 72%;
-  --primary-foreground: 222 47% 11%;
-  --secondary: 217 33% 17%;
-  --secondary-foreground: 210 40% 90%;
-  --muted: 217 33% 17%;
-  --muted-foreground: 215 20% 65%;
-  --accent: 217 33% 17%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 78% 67%;
+  --background: 240 8% 5%;
+  --foreground: 240 6% 93%;
+  --card: 240 5% 8%;
+  --card-foreground: 240 6% 93%;
+  --popover: 240 4% 13%;
+  --popover-foreground: 240 6% 93%;
+  /* 74% L (brand's #818CF8 intent) so primary clears AA as TEXT on a primary/10
+     tint in dark; the solid primary button pairs it with a light foreground. */
+  --primary: 239 84% 74%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 240 5% 11%;
+  --secondary-foreground: 240 6% 93%;
+  --muted: 240 5% 11%;
+  --muted-foreground: 240 4% 62%;
+  --accent: 240 5% 11%;
+  --accent-foreground: 240 6% 93%;
+  --destructive: 348 90% 68%;
   --destructive-foreground: 0 0% 12%;
-  --border: 217 33% 20%;
-  --input: 217 33% 20%;
-  --ring: 217 91% 60%;
-  --success: 142 60% 50%;
-  --success-foreground: 142 80% 12%;
-  --warning: 38 95% 58%;
+  --border: 240 3% 13%;
+  --input: 240 5% 11%;
+  --ring: 239 84% 74%;
+  --success: 160 70% 52%;
+  --success-foreground: 160 84% 10%;
+  --warning: 40 94% 56%;
   --warning-foreground: 38 92% 12%;
 
-  --canvas-backdrop: hsl(0 0% 10%);
+  --canvas-backdrop: hsl(240 8% 5%);
 }

package/dist/web-react/index.d.ts

@@ -260,13 +260,18 @@ interface SeatPaywallProps {
     tagline?: string;
     /** CTA label. Default "Unlock {product}". */
     ctaLabel?: string;
+    /** Value-prop bullets. Default = product/usage-derived only; pass your own to
+     *  supply product-specific value props (the shell bakes no GTM copy). */
+    benefits?: ReactNode[];
+    /** Optional fine print under the CTA (e.g. "Cancel anytime."). Omitted by default. */
+    footnote?: ReactNode;
 }
 /**
  * Centered card paywall. The price line reads
  * "$100/mo · includes $50/mo of AI usage" so the included allowance anchors the
  * value without ever exposing the ratio.
  */
-declare function SeatPaywall({ product, onCheckout, priceUsd, includedUsageUsd, tagline, ctaLabel, }: SeatPaywallProps): ReactNode;
+declare function SeatPaywall({ product, onCheckout, priceUsd, includedUsageUsd, tagline, ctaLabel, benefits, footnote, }: SeatPaywallProps): ReactNode;
 
 /**
  * Keyboard + pointer model for a trigger-and-popover pair, dependency-free.

package/dist/web-react/index.js

@@ -895,7 +895,9 @@ function SeatPaywall({
   priceUsd = 100,
   includedUsageUsd = 50,
   tagline,
-  ctaLabel
+  ctaLabel,
+  benefits,
+  footnote
 }) {
   const { pending, run } = usePending();
   return /* @__PURE__ */ jsx4("div", { className: "flex min-h-[60vh] w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs4("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card p-8 shadow-sm", children: [
@@ -917,18 +919,10 @@ function SeatPaywall({
       includedUsageUsd,
       "/mo of AI usage"
     ] }),
-    /* @__PURE__ */ jsxs4("ul", { className: "mt-6 space-y-2.5", children: [
-      /* @__PURE__ */ jsxs4(Benefit, { children: [
-        "Full access to ",
-        product
-      ] }),
-      /* @__PURE__ */ jsxs4(Benefit, { children: [
-        "$",
-        includedUsageUsd,
-        "/mo of AI usage included, every month"
-      ] }),
-      /* @__PURE__ */ jsx4(Benefit, { children: "One Tangle wallet across every product you run" })
-    ] }),
+    /* @__PURE__ */ jsx4("ul", { className: "mt-6 space-y-2.5", children: (benefits ?? [
+      `Full access to ${product}`,
+      `$${includedUsageUsd}/mo of AI usage included, every month`
+    ]).map((benefit, i) => /* @__PURE__ */ jsx4(Benefit, { children: benefit }, i)) }),
     /* @__PURE__ */ jsx4(
       "button",
       {
@@ -939,7 +933,7 @@ function SeatPaywall({
         children: pending ? "Opening checkout\u2026" : ctaLabel ?? `Unlock ${product}`
       }
     ),
-    /* @__PURE__ */ jsx4("p", { className: "mt-3 text-center text-xs text-muted-foreground/70", children: "Cancel anytime." })
+    footnote && /* @__PURE__ */ jsx4("p", { className: "mt-3 text-center text-xs text-muted-foreground/70", children: footnote })
   ] }) });
 }