@nozle-js/react 0.10.2 → 0.12.0

package/README.md

@@ -13,9 +13,11 @@ React components for Nozle's public catalog, checkout, and customer billing port
 ## Install
 
 ```bash
-npm install @nozle-js/react@0.10.2 react react-dom @stripe/stripe-js @stripe/react-stripe-js
+npm install @nozle-js/react@0.11.0 @tanstack/react-query react react-dom @stripe/stripe-js @stripe/react-stripe-js
 ```
 
+The billing hooks (`useSubscription`, `useUsage`, `useInvoices` and the others) read your backend through `BillingProvider billingEndpoint`, served by `createBillingHandler` from `@nozle-js/node`; see [Hooks](https://docs.nozle.dev/sdks/react/hooks). Components need no Tailwind or host CSS. Style them with `appearance` on `BillingProvider` or on a component, using a theme from `@nozle-js/react/themes`, your own variables and per-element overrides; see [Styling](https://docs.nozle.dev/sdks/react/styling).
+
 ## Merchant-backed checkout
 
 ```tsx
@@ -50,6 +52,53 @@ The merchant endpoint authenticates the user, derives the Nozle customer from th
 
 `createCheckout` returns a `stripe`, `razorpay`, `hosted`, `processing`, `completed`, or `scheduled` result. Nozle payment fulfillment determines activation; Razorpay requires capture. A browser redirect or callback alone does not prove activation.
 
+## Pricing table and plan families
+
+`PricingTable` shows one card per plan family. A family groups the billing intervals of one offer (for example Pro monthly and Pro yearly) and carries the pricing table settings you set in the Nozle dashboard (Developers → Customize SDK). `GET /api/v1/plans` returns them as `families` next to `plans`:
+
+| Family field | Effect |
+| --- | --- |
+| `show_on_pricing: false` | The family is hidden. Plans with `pending_deletion: true` are left out, and a family without plans is hidden |
+| `pricing_position` | Cards are ordered by it, ascending. Families without a position follow in API order |
+| `pricing_highlighted` | The card is highlighted (at most one). The `highlightPlan` prop, a family code or plan code, overrides it |
+| `badge_text` / `cta_text` | Badge on the highlighted card (default "Most Popular"; the `highlightLabel` prop replaces it) and button text (default "Get {name}") |
+| `features[].show_on_pricing: false` | The feature is left out of the card |
+| `features[].display_position` | Features are ordered by it, then by name |
+| `features[].show_description` | The feature's description appears as a muted line under the bullet |
+
+The interval switch offers the intervals of the visible families (Weekly, Monthly, Quarterly, Every 6 months, Annual) and is hidden when there is only one. Each card shows the family's plan for the selected interval as a per-month price (`$40.83 /mo`) with its billing line (`Billed $490 yearly · save 17%`, saving against the family's monthly plan), and a family without a plan for that interval shows its nearest interval. Feature values come from the selected plan's entitlements, for example `Projects: 20` or `Storage (GB: 10, Tier: fast)`. The button and checkout use the selected plan's code.
+
+```tsx
+<PricingTable
+  returnUrl={window.location.href}
+  defaultInterval="yearly"
+  locale="en-GB"
+  features={{
+    pro: ["Priority support", { label: "API access", description: "REST and GraphQL" }],
+  }}
+  onSelect={(plan, family) => console.log(plan.code, family?.code)}
+/>
+```
+
+- `defaultInterval` picks the first interval (`"annual"` also works). Otherwise Monthly when offered, else the first one. `showToggle={false}` hides the switch.
+- `features` is a record keyed by family code (or plan code) that replaces the catalog features of that card, or an array aligned to the rendered cards.
+- `contactSalesPlans` takes family codes as well as plan codes: the card shows "Custom" and a "Contact Sales" button.
+- Cards follow the `appearance` theme like the other components: the highlighted family uses `colorHighlight` (default `colorPrimary`) and `highlightStyle`, and a theme's `planCardLayout: "panel"` lays family cards out as panels with the same billing line. The default highlight (`#4f46e5` in the `light` theme) keeps its white text at WCAG AA contrast; if you set your own `colorHighlight`, check that `colorHighlightForeground` on it reaches 4.5:1.
+- `annualDiscountLabel` replaces the computed "Save N%" on the Annual option.
+- `locale` (default `en-US`) formats prices and feature values. Prices are exact in the currency's minor units (`¥1,500` for 1500 JPY), and whole amounts show no decimals (`$20`).
+- Pass `plans` and `families` to render without fetching. With `plans` alone, or with an older API that returns no `families`, each plan is its own card as before, sorted by price (or by `sort`), with its price per its own interval (`$14.99 /quarter`, no per-month price or billing line) and what the plan gives as its features.
+
+For a custom pricing page, use the same rules with `usePlans()`:
+
+```tsx
+const { plans, families } = usePlans();
+const intervals = getAvailableIntervals({ plans, families });
+const cards = getPricingCards({ plans, families }, { interval: "yearly", locale: "en-US" });
+// cards[i]: { family, plan, name, price, pricePeriod, billing, features, highlighted, badge, cta, ... }
+```
+
+`getPricingIntervalOptions(catalog)` returns the switch options with their labels and best saving, and `getDefaultInterval(catalog, preferred?)` the interval to start on.
+
 ## Payment providers: Stripe and Razorpay
 
 Your merchant backend returns whatever result Nozle gives for the customer's connected provider, and `CheckoutButton` handles each `type`:

package/dist/chunk-NLPONQ5O.js

@@ -0,0 +1,246 @@
+// src/appearance/tokens.ts
+var CSS_VAR = {
+  colorPrimary: "--nozle-primary",
+  colorPrimaryForeground: "--nozle-primary-foreground",
+  colorBackground: "--nozle-background",
+  colorCard: "--nozle-card",
+  colorForeground: "--nozle-foreground",
+  colorMuted: "--nozle-muted",
+  colorMutedForeground: "--nozle-muted-foreground",
+  colorAccent: "--nozle-accent",
+  colorAccentForeground: "--nozle-accent-foreground",
+  colorBorder: "--nozle-border",
+  colorDanger: "--nozle-destructive",
+  colorWarning: "--nozle-warning",
+  colorSuccess: "--nozle-success",
+  colorSecondary: "--nozle-secondary",
+  colorInput: "--nozle-input",
+  colorHighlight: "--nozle-highlight",
+  colorHighlightForeground: "--nozle-highlight-foreground",
+  fontFamily: "--nozle-font",
+  fontFamilyNumbers: "--nozle-font-numbers",
+  labelFont: "--nozle-label-font",
+  labelTextTransform: "--nozle-label-transform",
+  labelLetterSpacing: "--nozle-label-spacing",
+  fontTitle: "--nozle-font-title",
+  fontHeading: "--nozle-font-heading",
+  fontMetric: "--nozle-font-metric",
+  fontBody: "--nozle-font-body",
+  fontMeta: "--nozle-font-meta",
+  fontAction: "--nozle-font-action",
+  borderRadius: "--nozle-radius",
+  borderWidth: "--nozle-border-width",
+  shadow: "--nozle-shadow",
+  buttonRadius: "--nozle-button-radius",
+  buttonBorderWidth: "--nozle-button-border-width",
+  buttonBorderColor: "--nozle-button-border",
+  buttonShadow: "--nozle-button-shadow"
+};
+var LIGHT = {
+  colorPrimary: "#4f46e5",
+  colorPrimaryForeground: "#ffffff",
+  colorBackground: "#ffffff",
+  colorCard: "#ffffff",
+  colorForeground: "#111827",
+  colorMuted: "#f3f4f6",
+  colorAccent: "#eef2ff",
+  colorAccentForeground: "#3730a3",
+  colorBorder: "#e5e7eb",
+  colorDanger: "#dc2626",
+  colorWarning: "#d97706",
+  colorSuccess: "#16a34a",
+  fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif",
+  borderRadius: "12px",
+  borderWidth: "1px",
+  shadow: "0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)"
+};
+var ALIASES = {
+  colorPrimary: ["--nozle-pricing-highlight", "--nozle-portal-accent"],
+  colorBackground: ["--nozle-pricing-bg", "--nozle-portal-background"],
+  colorCard: ["--nozle-pricing-card-bg"],
+  colorForeground: ["--nozle-portal-text"],
+  colorMuted: ["--nozle-portal-muted-background"],
+  colorMutedForeground: ["--nozle-portal-muted"],
+  colorBorder: ["--nozle-pricing-border", "--nozle-portal-border"],
+  borderRadius: ["--nozle-pricing-radius"]
+};
+function chain(key, last = LIGHT[key]) {
+  return [CSS_VAR[key], ...ALIASES[key] ?? []].reduceRight(
+    (fallback, name) => `var(${name}, ${fallback})`,
+    last
+  );
+}
+var soft = (color, base, percent) => `color-mix(in srgb, ${color} ${percent}%, ${base})`;
+var primary = chain("colorPrimary");
+var card = chain("colorCard");
+var danger = chain("colorDanger");
+var warning = chain("colorWarning");
+var success = chain("colorSuccess");
+var foreground = chain("colorForeground");
+var primaryForeground = chain("colorPrimaryForeground");
+var font = chain("fontFamily");
+var DERIVED_MUTED_FOREGROUND = `color-mix(in srgb, ${foreground} 62%, ${card})`;
+var T = {
+  primary,
+  primaryForeground,
+  highlight: `var(--nozle-highlight, ${primary})`,
+  highlightForeground: `var(--nozle-highlight-foreground, ${primaryForeground})`,
+  background: chain("colorBackground"),
+  card,
+  foreground,
+  muted: chain("colorMuted"),
+  mutedForeground: chain("colorMutedForeground", DERIVED_MUTED_FOREGROUND),
+  accent: chain("colorAccent"),
+  secondary: `var(--nozle-secondary, ${chain("colorMuted")})`,
+  input: `var(--nozle-input, ${chain("colorBorder")})`,
+  accentForeground: chain("colorAccentForeground"),
+  border: chain("colorBorder"),
+  danger,
+  warning,
+  success,
+  font,
+  fontNumbers: "var(--nozle-font-numbers, inherit)",
+  labelFont: `var(--nozle-label-font, 600 12px/1.4 ${font})`,
+  fontTitle: `var(--nozle-font-title, 700 20px/1.25 ${font})`,
+  fontHeading: `var(--nozle-font-heading, 600 16px/1.35 ${font})`,
+  fontMetric: `var(--nozle-font-metric, 700 28px/1.1 var(--nozle-font-numbers, ${font}))`,
+  fontBody: `var(--nozle-font-body, 400 14px/1.5 ${font})`,
+  fontMeta: `var(--nozle-font-meta, 400 12px/1.4 ${font})`,
+  fontAction: `var(--nozle-font-action, 600 14px/1.4 ${font})`,
+  labelTransform: "var(--nozle-label-transform, none)",
+  labelSpacing: "var(--nozle-label-spacing, normal)",
+  radius: chain("borderRadius"),
+  borderWidth: chain("borderWidth"),
+  shadow: chain("shadow"),
+  /** Tinted backgrounds and borders for notices, derived from the matching colour. */
+  dangerSoft: soft(danger, card, 10),
+  dangerBorder: soft(danger, card, 30),
+  warningSoft: soft(warning, card, 12),
+  warningBorder: soft(warning, card, 35),
+  /** Status text: the status colour mixed with the text colour, so it stays readable on its soft background. */
+  dangerText: soft(danger, foreground, 70),
+  warningText: soft(warning, foreground, 70),
+  successText: soft(success, foreground, 70),
+  successSoft: soft(success, card, 12),
+  primarySoft: soft(primary, card, 10),
+  primaryHover: soft(primary, "black", 88),
+  skeleton: soft(foreground, card, 8),
+  /** Table header band and the lighter line between table rows. */
+  tableHeader: soft(chain("colorMuted"), card, 50),
+  rowLine: soft(chain("colorBorder"), card, 70)
+};
+var text = {
+  title: { font: T.fontTitle, color: T.foreground },
+  heading: { font: T.fontHeading, color: T.foreground },
+  metric: { font: T.fontMetric, fontVariantNumeric: "tabular-nums", color: T.foreground },
+  body: { font: T.fontBody, color: T.foreground },
+  secondary: { font: T.fontBody, color: T.mutedForeground },
+  meta: { font: T.fontMeta, color: T.mutedForeground },
+  label: {
+    font: T.labelFont,
+    letterSpacing: T.labelSpacing,
+    textTransform: T.labelTransform,
+    color: T.mutedForeground
+  },
+  action: { font: T.fontAction }
+};
+var border = (color = T.border) => `${T.borderWidth} solid ${color}`;
+var buttonBorderWidth = `var(--nozle-button-border-width, ${T.borderWidth})`;
+var primaryButtonBorder = (color) => `${buttonBorderWidth} solid var(--nozle-button-border, ${color})`;
+var buttonBorder = (color) => `${buttonBorderWidth} solid ${color}`;
+var buttonRadius = (fallback) => `var(--nozle-button-radius, ${fallback})`;
+var buttonShadow = "var(--nozle-button-shadow, none)";
+function addTheme(target, theme) {
+  if (!theme) return;
+  Object.assign(target.variables, theme.variables);
+  if (theme.planCardLayout) target.planCardLayout = theme.planCardLayout;
+  for (const [key, value] of Object.entries(theme.elements ?? {})) {
+    const current = target.elements[key] ?? {};
+    target.elements[key] = typeof value === "string" ? { ...current, className: [current.className, value].filter(Boolean).join(" ") } : { ...current, style: { ...current.style, ...value } };
+  }
+}
+function mergeAppearance(...layers) {
+  const resolved = { variables: {}, elements: {} };
+  for (const layer of layers) {
+    if (!layer) continue;
+    const themes = Array.isArray(layer.theme) ? layer.theme : [layer.theme];
+    themes.forEach((theme) => addTheme(resolved, theme));
+    addTheme(resolved, layer);
+  }
+  return resolved;
+}
+function toCssVars(variables) {
+  const style = {};
+  for (const [key, value] of Object.entries(variables)) {
+    if (value == null || value === "") continue;
+    if (key === "colorScheme") style.colorScheme = value;
+    else style[CSS_VAR[key]] = value;
+  }
+  return style;
+}
+var surface = {
+  ...text.body,
+  background: T.card,
+  border: border(),
+  borderRadius: T.radius,
+  boxShadow: T.shadow,
+  padding: "1.25rem"
+};
+var table = {
+  frame: {
+    ...text.body,
+    background: T.card,
+    border: border(),
+    borderRadius: T.radius,
+    overflowX: "auto",
+    minWidth: 0,
+    maxWidth: "100%"
+  },
+  table: { width: "100%", borderCollapse: "collapse", font: "inherit" },
+  head: (numeric = false) => ({
+    height: "44px",
+    padding: "0 20px",
+    textAlign: numeric ? "right" : "left",
+    verticalAlign: "middle",
+    ...text.label,
+    whiteSpace: "nowrap",
+    background: T.tableHeader,
+    borderBottom: border()
+  }),
+  /** `last`: the final body row, whose line the frame already draws. */
+  cell: (numeric = false, last = false) => ({
+    height: "48px",
+    padding: "14px 20px",
+    verticalAlign: "middle",
+    whiteSpace: "nowrap",
+    textAlign: numeric ? "right" : "left",
+    borderBottom: last ? "none" : border(T.rowLine),
+    ...numeric && { fontFamily: T.fontNumbers, fontVariantNumeric: "tabular-nums" }
+  }),
+  foot: (numeric = false) => ({
+    ...table.cell(numeric, true),
+    borderTop: border(),
+    background: T.tableHeader,
+    fontWeight: 600
+  })
+};
+function buttonStyle(variant = "primary", busy = false) {
+  const colors = {
+    primary: { background: T.primary, color: T.primaryForeground, border: primaryButtonBorder(T.primary), boxShadow: buttonShadow },
+    secondary: { background: T.secondary, color: T.foreground, border: buttonBorder(T.input) },
+    outline: { background: "transparent", color: T.primary, border: buttonBorder(T.primary) }
+  };
+  return {
+    ...colors[variant],
+    padding: "0.75rem 1.5rem",
+    borderRadius: buttonRadius(`calc(${T.radius} * 0.75)`),
+    ...text.action,
+    cursor: busy ? "wait" : "pointer",
+    opacity: busy ? 0.7 : 1,
+    transition: "filter 0.15s ease"
+  };
+}
+
+export { DERIVED_MUTED_FOREGROUND, LIGHT, T, border, buttonRadius, buttonStyle, mergeAppearance, primaryButtonBorder, surface, table, text, toCssVars };
+//# sourceMappingURL=chunk-NLPONQ5O.js.map
+//# sourceMappingURL=chunk-NLPONQ5O.js.map

package/dist/chunk-NLPONQ5O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/appearance/tokens.ts"],"names":[],"mappings":"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","file":"chunk-NLPONQ5O.js","sourcesContent":["import type { CSSProperties } from \"react\";\n\n/** Design tokens. Every value is a CSS value, for example `#4f46e5`, `oklch(...)` or `var(--primary)`. */\nexport interface Variables {\n  colorPrimary?: string;\n  colorPrimaryForeground?: string;\n  colorBackground?: string;\n  colorCard?: string;\n  colorForeground?: string;\n  colorMuted?: string;\n  colorMutedForeground?: string;\n  colorAccent?: string;\n  colorAccentForeground?: string;\n  colorBorder?: string;\n  colorDanger?: string;\n  colorWarning?: string;\n  colorSuccess?: string;\n  /** Fill of secondary buttons. Defaults to `colorMuted`. */\n  colorSecondary?: string;\n  /** Border of secondary buttons and other controls. Defaults to `colorBorder`. */\n  colorInput?: string;\n  /** The highlighted pricing card (`highlightPlan`). Defaults to `colorPrimary`. */\n  colorHighlight?: string;\n  /** Text on a filled highlighted card. Defaults to `colorPrimaryForeground`. */\n  colorHighlightForeground?: string;\n  fontFamily?: string;\n  /** Font of numbers in tables. Defaults to the surrounding font. */\n  fontFamilyNumbers?: string;\n  /** CSS `font` shorthand of small labels: table headers and plan card status labels. */\n  labelFont?: string;\n  /** `text-transform` of small labels, for example `uppercase`. */\n  labelTextTransform?: string;\n  /** `letter-spacing` of small labels. */\n  labelLetterSpacing?: string;\n  /** CSS `font` shorthand of titles: dialog and portal titles. Default `700 20px/1.25` in `fontFamily`. */\n  fontTitle?: string;\n  /** CSS `font` shorthand of headings: plan names and section headings. Default `600 16px/1.35` in `fontFamily`. */\n  fontHeading?: string;\n  /**\n   * CSS `font` shorthand of large numbers: prices, balances and totals, shown in tabular figures.\n   * Default `700 28px/1.1` in `fontFamilyNumbers`, else `fontFamily`.\n   */\n  fontMetric?: string;\n  /** CSS `font` shorthand of body text and descriptions. Default `400 14px/1.5` in `fontFamily`. */\n  fontBody?: string;\n  /** CSS `font` shorthand of small text: dates, intervals and hints. Default `400 12px/1.4` in `fontFamily`. */\n  fontMeta?: string;\n  /** CSS `font` shorthand of buttons and links. Default `600 14px/1.4` in `fontFamily`. */\n  fontAction?: string;\n  borderRadius?: string;\n  borderWidth?: string;\n  shadow?: string;\n  /** Corner radius of buttons. Defaults to a fraction of `borderRadius`. */\n  buttonRadius?: string;\n  /** Border width of buttons. Defaults to `borderWidth`. */\n  buttonBorderWidth?: string;\n  /** Border colour of primary buttons. Defaults to the button's fill colour. */\n  buttonBorderColor?: string;\n  /** Shadow of primary buttons only, for example a hard offset. Defaults to none. */\n  buttonShadow?: string;\n  /** Sets the CSS `color-scheme` of the component, so native controls follow the theme. */\n  colorScheme?: \"light\" | \"dark\" | \"light dark\";\n}\n\nexport type ElementKey =\n  | \"pricingTable\"\n  | \"pricingTable__toggle\"\n  | \"pricingTable__toggleButton\"\n  | \"pricingTable__grid\"\n  | \"planCard\"\n  | \"planCard__header\"\n  | \"planCard__badge\"\n  | \"planCard__name\"\n  | \"planCard__description\"\n  | \"planCard__price\"\n  | \"planCard__features\"\n  | \"planCard__feature\"\n  | \"planCard__cta\"\n  | \"planComparison\"\n  | \"planComparison__table\"\n  | \"planComparison__row\"\n  | \"planComparison__cell\"\n  | \"creditBalance\"\n  | \"creditBalance__amount\"\n  | \"creditHistory\"\n  | \"creditHistory__table\"\n  | \"creditHistory__row\"\n  | \"usageBreakdown\"\n  | \"usageBreakdown__row\"\n  | \"usageTrend\"\n  | \"usageTrend__bar\"\n  | \"usageMeter\"\n  | \"usageMeter__label\"\n  | \"usageMeter__value\"\n  | \"usageMeter__track\"\n  | \"usageMeter__fill\"\n  | \"usageDashboard\"\n  | \"usageAlert\"\n  | \"usageAlert__dismiss\"\n  | \"currentPlan\"\n  | \"currentPlan__name\"\n  | \"currentPlan__status\"\n  | \"currentPlan__price\"\n  | \"currentPlan__scheduled\"\n  | \"currentPlan__notice\"\n  | \"currentPlan__usage\"\n  | \"currentPlan__details\"\n  | \"planBadge\"\n  | \"paymentMethod\"\n  | \"checkoutButton\"\n  | \"upgradeButton\"\n  | \"checkout\"\n  | \"checkout__submit\"\n  | \"checkout__error\"\n  | \"upgradeModal\"\n  | \"upgradeModal__dialog\"\n  | \"upgradeModal__actions\"\n  | \"upgradePrompt\"\n  | \"lockedOverlay\"\n  | \"lockedOverlay__panel\"\n  | \"billingPortal\"\n  | \"billingPortal__section\"\n  | \"billingPortal__card\"\n  | \"billingPortal__table\"\n  | \"billingPortal__error\"\n  | \"cancellationControl\"\n  | \"planChangeControl\"\n  | \"poweredBy\";\n\n/** A string adds a class name; an object adds inline styles. */\nexport type Elements = Partial<Record<ElementKey, string | CSSProperties>>;\n\nexport interface Theme {\n  variables?: Variables;\n  elements?: Elements;\n  /**\n   * How plan cards are laid out. `card` (default): name, description, price and ticked features.\n   * `panel`: the name in a header band with the plan's status on the right, then price,\n   * description and plain feature lines.\n   */\n  planCardLayout?: \"card\" | \"panel\";\n}\n\n/** A theme (or a stack of themes, last wins) plus your own variables and elements on top. */\nexport interface Appearance extends Theme {\n  theme?: Theme | Theme[];\n}\n\ntype ColorKey = Exclude<keyof Variables, \"colorScheme\">;\n\nconst CSS_VAR: Record<ColorKey, string> = {\n  colorPrimary: \"--nozle-primary\",\n  colorPrimaryForeground: \"--nozle-primary-foreground\",\n  colorBackground: \"--nozle-background\",\n  colorCard: \"--nozle-card\",\n  colorForeground: \"--nozle-foreground\",\n  colorMuted: \"--nozle-muted\",\n  colorMutedForeground: \"--nozle-muted-foreground\",\n  colorAccent: \"--nozle-accent\",\n  colorAccentForeground: \"--nozle-accent-foreground\",\n  colorBorder: \"--nozle-border\",\n  colorDanger: \"--nozle-destructive\",\n  colorWarning: \"--nozle-warning\",\n  colorSuccess: \"--nozle-success\",\n  colorSecondary: \"--nozle-secondary\",\n  colorInput: \"--nozle-input\",\n  colorHighlight: \"--nozle-highlight\",\n  colorHighlightForeground: \"--nozle-highlight-foreground\",\n  fontFamily: \"--nozle-font\",\n  fontFamilyNumbers: \"--nozle-font-numbers\",\n  labelFont: \"--nozle-label-font\",\n  labelTextTransform: \"--nozle-label-transform\",\n  labelLetterSpacing: \"--nozle-label-spacing\",\n  fontTitle: \"--nozle-font-title\",\n  fontHeading: \"--nozle-font-heading\",\n  fontMetric: \"--nozle-font-metric\",\n  fontBody: \"--nozle-font-body\",\n  fontMeta: \"--nozle-font-meta\",\n  fontAction: \"--nozle-font-action\",\n  borderRadius: \"--nozle-radius\",\n  borderWidth: \"--nozle-border-width\",\n  shadow: \"--nozle-shadow\",\n  buttonRadius: \"--nozle-button-radius\",\n  buttonBorderWidth: \"--nozle-button-border-width\",\n  buttonBorderColor: \"--nozle-button-border\",\n  buttonShadow: \"--nozle-button-shadow\",\n};\n\n/** The light values every component falls back to when nothing else sets a token. */\n// The highlight colours default to the primary colours, the muted text to a mix of the text and card\n// colours, the text roles to sizes in `fontFamily`, and the button values to the general ones or to\n// each button's own, so they have no value of their own here.\ntype DerivedKey =\n  | \"colorMutedForeground\"\n  | \"colorHighlight\"\n  | \"colorHighlightForeground\"\n  | \"colorSecondary\"\n  | \"colorInput\"\n  | \"fontFamilyNumbers\"\n  | \"labelFont\"\n  | \"labelTextTransform\"\n  | \"labelLetterSpacing\"\n  | \"fontTitle\"\n  | \"fontHeading\"\n  | \"fontMetric\"\n  | \"fontBody\"\n  | \"fontMeta\"\n  | \"fontAction\"\n  | \"buttonRadius\"\n  | \"buttonBorderWidth\"\n  | \"buttonBorderColor\"\n  | \"buttonShadow\";\n\nexport const LIGHT: Required<Omit<Variables, \"colorScheme\" | DerivedKey>> = {\n  colorPrimary: \"#4f46e5\",\n  colorPrimaryForeground: \"#ffffff\",\n  colorBackground: \"#ffffff\",\n  colorCard: \"#ffffff\",\n  colorForeground: \"#111827\",\n  colorMuted: \"#f3f4f6\",\n  colorAccent: \"#eef2ff\",\n  colorAccentForeground: \"#3730a3\",\n  colorBorder: \"#e5e7eb\",\n  colorDanger: \"#dc2626\",\n  colorWarning: \"#d97706\",\n  colorSuccess: \"#16a34a\",\n  fontFamily: \"system-ui, -apple-system, 'Segoe UI', sans-serif\",\n  borderRadius: \"12px\",\n  borderWidth: \"1px\",\n  shadow: \"0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)\",\n};\n\n// Variable names from earlier releases, still read after the --nozle-* name.\nconst ALIASES: Partial<Record<ColorKey, string[]>> = {\n  colorPrimary: [\"--nozle-pricing-highlight\", \"--nozle-portal-accent\"],\n  colorBackground: [\"--nozle-pricing-bg\", \"--nozle-portal-background\"],\n  colorCard: [\"--nozle-pricing-card-bg\"],\n  colorForeground: [\"--nozle-portal-text\"],\n  colorMuted: [\"--nozle-portal-muted-background\"],\n  colorMutedForeground: [\"--nozle-portal-muted\"],\n  colorBorder: [\"--nozle-pricing-border\", \"--nozle-portal-border\"],\n  borderRadius: [\"--nozle-pricing-radius\"],\n};\n\nfunction chain(key: ColorKey, last: string = LIGHT[key as Exclude<ColorKey, DerivedKey>]): string {\n  return [CSS_VAR[key], ...(ALIASES[key] ?? [])].reduceRight(\n    (fallback, name) => `var(${name}, ${fallback})`,\n    last,\n  );\n}\n\nconst soft = (color: string, base: string, percent: number) =>\n  `color-mix(in srgb, ${color} ${percent}%, ${base})`;\n\nconst primary = chain(\"colorPrimary\");\nconst card = chain(\"colorCard\");\nconst danger = chain(\"colorDanger\");\nconst warning = chain(\"colorWarning\");\nconst success = chain(\"colorSuccess\");\nconst foreground = chain(\"colorForeground\");\nconst primaryForeground = chain(\"colorPrimaryForeground\");\nconst font = chain(\"fontFamily\");\n\n/**\n * Muted text when `colorMutedForeground` is not set: the text colour mixed into the card colour, so\n * changing `colorForeground` recolours muted text too.\n */\nexport const DERIVED_MUTED_FOREGROUND = `color-mix(in srgb, ${foreground} 62%, ${card})`;\n\n/** CSS values for component styles: each reads its token, then older names, then the light value. */\nexport const T = {\n  primary,\n  primaryForeground,\n  highlight: `var(--nozle-highlight, ${primary})`,\n  highlightForeground: `var(--nozle-highlight-foreground, ${primaryForeground})`,\n  background: chain(\"colorBackground\"),\n  card,\n  foreground,\n  muted: chain(\"colorMuted\"),\n  mutedForeground: chain(\"colorMutedForeground\", DERIVED_MUTED_FOREGROUND),\n  accent: chain(\"colorAccent\"),\n  secondary: `var(--nozle-secondary, ${chain(\"colorMuted\")})`,\n  input: `var(--nozle-input, ${chain(\"colorBorder\")})`,\n  accentForeground: chain(\"colorAccentForeground\"),\n  border: chain(\"colorBorder\"),\n  danger,\n  warning,\n  success,\n  font,\n  fontNumbers: \"var(--nozle-font-numbers, inherit)\",\n  labelFont: `var(--nozle-label-font, 600 12px/1.4 ${font})`,\n  fontTitle: `var(--nozle-font-title, 700 20px/1.25 ${font})`,\n  fontHeading: `var(--nozle-font-heading, 600 16px/1.35 ${font})`,\n  fontMetric: `var(--nozle-font-metric, 700 28px/1.1 var(--nozle-font-numbers, ${font}))`,\n  fontBody: `var(--nozle-font-body, 400 14px/1.5 ${font})`,\n  fontMeta: `var(--nozle-font-meta, 400 12px/1.4 ${font})`,\n  fontAction: `var(--nozle-font-action, 600 14px/1.4 ${font})`,\n  labelTransform: \"var(--nozle-label-transform, none)\",\n  labelSpacing: \"var(--nozle-label-spacing, normal)\",\n  radius: chain(\"borderRadius\"),\n  borderWidth: chain(\"borderWidth\"),\n  shadow: chain(\"shadow\"),\n  /** Tinted backgrounds and borders for notices, derived from the matching colour. */\n  dangerSoft: soft(danger, card, 10),\n  dangerBorder: soft(danger, card, 30),\n  warningSoft: soft(warning, card, 12),\n  warningBorder: soft(warning, card, 35),\n  /** Status text: the status colour mixed with the text colour, so it stays readable on its soft background. */\n  dangerText: soft(danger, foreground, 70),\n  warningText: soft(warning, foreground, 70),\n  successText: soft(success, foreground, 70),\n  successSoft: soft(success, card, 12),\n  primarySoft: soft(primary, card, 10),\n  primaryHover: soft(primary, \"black\", 88),\n  skeleton: soft(foreground, card, 8),\n  /** Table header band and the lighter line between table rows. */\n  tableHeader: soft(chain(\"colorMuted\"), card, 50),\n  rowLine: soft(chain(\"colorBorder\"), card, 70),\n} as const;\n\n/**\n * Text roles. Each sets the role's font (a `font` shorthand variable) and its default colour; a\n * component may change the colour, for example to a status colour or the text on a filled card.\n * `font` comes first because the shorthand resets the longhands after it.\n */\nexport const text = {\n  title: { font: T.fontTitle, color: T.foreground },\n  heading: { font: T.fontHeading, color: T.foreground },\n  metric: { font: T.fontMetric, fontVariantNumeric: \"tabular-nums\", color: T.foreground },\n  body: { font: T.fontBody, color: T.foreground },\n  secondary: { font: T.fontBody, color: T.mutedForeground },\n  meta: { font: T.fontMeta, color: T.mutedForeground },\n  label: {\n    font: T.labelFont,\n    letterSpacing: T.labelSpacing,\n    textTransform: T.labelTransform as CSSProperties[\"textTransform\"],\n    color: T.mutedForeground,\n  },\n  action: { font: T.fontAction },\n} satisfies Record<string, CSSProperties>;\n\n/** `border` shorthand using the theme's border width and colour. */\nexport const border = (color: string = T.border) => `${T.borderWidth} solid ${color}`;\n\nconst buttonBorderWidth = `var(--nozle-button-border-width, ${T.borderWidth})`;\n\n/** `border` shorthand for a primary button: `buttonBorderColor` first, then `color`. */\nexport const primaryButtonBorder = (color: string) => `${buttonBorderWidth} solid var(--nozle-button-border, ${color})`;\n\n/** `border` shorthand for any other button. */\nexport const buttonBorder = (color: string) => `${buttonBorderWidth} solid ${color}`;\n\n/** Button corner radius: the `buttonRadius` token, else `fallback`. */\nexport const buttonRadius = (fallback: string) => `var(--nozle-button-radius, ${fallback})`;\n\nexport const buttonShadow = \"var(--nozle-button-shadow, none)\";\n\nexport interface ResolvedAppearance {\n  variables: Variables;\n  planCardLayout?: \"card\" | \"panel\";\n  elements: Partial<Record<ElementKey, { className?: string; style?: CSSProperties }>>;\n}\n\nfunction addTheme(target: ResolvedAppearance, theme: Theme | undefined) {\n  if (!theme) return;\n  Object.assign(target.variables, theme.variables);\n  if (theme.planCardLayout) target.planCardLayout = theme.planCardLayout;\n  for (const [key, value] of Object.entries(theme.elements ?? {}) as [ElementKey, string | CSSProperties][]) {\n    const current = target.elements[key] ?? {};\n    target.elements[key] =\n      typeof value === \"string\"\n        ? { ...current, className: [current.className, value].filter(Boolean).join(\" \") }\n        : { ...current, style: { ...current.style, ...value } };\n  }\n}\n\n/**\n * Merges appearances in order, each later one winning: for each, its theme (or themes, in order) then\n * its own variables and elements. Pass the provider's appearance first, then the component's.\n */\nexport function mergeAppearance(...layers: (Appearance | undefined)[]): ResolvedAppearance {\n  const resolved: ResolvedAppearance = { variables: {}, elements: {} };\n  for (const layer of layers) {\n    if (!layer) continue;\n    const themes = Array.isArray(layer.theme) ? layer.theme : [layer.theme];\n    themes.forEach((theme) => addTheme(resolved, theme));\n    addTheme(resolved, layer);\n  }\n  return resolved;\n}\n\n/** Inline CSS custom properties for a set of variables; `colorScheme` becomes `color-scheme`. */\nexport function toCssVars(variables: Variables): CSSProperties {\n  const style: Record<string, string> = {};\n  for (const [key, value] of Object.entries(variables)) {\n    if (value == null || value === \"\") continue;\n    if (key === \"colorScheme\") style.colorScheme = value;\n    else style[CSS_VAR[key as ColorKey]] = value;\n  }\n  return style as CSSProperties;\n}\n\n/** The card frame shared by the data components. */\nexport const surface: CSSProperties = {\n  ...text.body,\n  background: T.card,\n  border: border(),\n  borderRadius: T.radius,\n  boxShadow: T.shadow,\n  padding: \"1.25rem\",\n};\n\n/** Tables, after the Nozle dashboard table: a bordered frame, a tinted header band with small\n * uppercase labels, roomy rows, and numbers right-aligned in tabular figures. */\nexport const table = {\n  frame: {\n    ...text.body,\n    background: T.card,\n    border: border(),\n    borderRadius: T.radius,\n    overflowX: \"auto\",\n    minWidth: 0,\n    maxWidth: \"100%\",\n  } as CSSProperties,\n  table: { width: \"100%\", borderCollapse: \"collapse\", font: \"inherit\" } as CSSProperties,\n  head: (numeric = false): CSSProperties => ({\n    height: \"44px\",\n    padding: \"0 20px\",\n    textAlign: numeric ? \"right\" : \"left\",\n    verticalAlign: \"middle\",\n    ...text.label,\n    whiteSpace: \"nowrap\",\n    background: T.tableHeader,\n    borderBottom: border(),\n  }),\n  /** `last`: the final body row, whose line the frame already draws. */\n  cell: (numeric = false, last = false): CSSProperties => ({\n    height: \"48px\",\n    padding: \"14px 20px\",\n    verticalAlign: \"middle\",\n    whiteSpace: \"nowrap\",\n    textAlign: numeric ? \"right\" : \"left\",\n    borderBottom: last ? \"none\" : border(T.rowLine),\n    ...(numeric && { fontFamily: T.fontNumbers, fontVariantNumeric: \"tabular-nums\" }),\n  }),\n  foot: (numeric = false): CSSProperties => ({\n    ...table.cell(numeric, true),\n    borderTop: border(),\n    background: T.tableHeader,\n    fontWeight: 600,\n  }),\n};\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\";\n\n/** Button look shared by every component, from the theme tokens. */\nexport function buttonStyle(variant: ButtonVariant = \"primary\", busy = false): CSSProperties {\n  const colors: Record<ButtonVariant, CSSProperties> = {\n    primary: { background: T.primary, color: T.primaryForeground, border: primaryButtonBorder(T.primary), boxShadow: buttonShadow },\n    secondary: { background: T.secondary, color: T.foreground, border: buttonBorder(T.input) },\n    outline: { background: \"transparent\", color: T.primary, border: buttonBorder(T.primary) },\n  };\n  return {\n    ...colors[variant],\n    padding: \"0.75rem 1.5rem\",\n    borderRadius: buttonRadius(`calc(${T.radius} * 0.75)`),\n    ...text.action,\n    cursor: busy ? \"wait\" : \"pointer\",\n    opacity: busy ? 0.7 : 1,\n    transition: \"filter 0.15s ease\",\n  };\n}\n"]}