astro-component-kit 0.4.0 → 0.5.0

package/src/components/lib/app/HousekeepingBoard.astro

@@ -0,0 +1,189 @@
+---
+/**
+ * HousekeepingBoard — Room status board grouped by floor: clean, dirty, inspecting, occupied and
+ * out of order, with live counters, status filter and a quick "next status" action per room.
+ *
+ * @param {Array<{number: string, floor: string, type?: string, status: Status, guest?: string, note?: string, assignee?: string}>} rooms - Rooms to show.
+ * @param {string} title - Card title. Default 'Housekeeping'.
+ * @param {boolean} interactive - Clicking a tile advances dirty → inspecting → clean (demo/workflow). Default true.
+ * @param {string} variant - Style (card|plain). Default 'card'.
+ * @param {string} size - Tile size (sm|md). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Statuses: clean · dirty · inspecting · occupied · ooo (out of order).
+ * Emits `app:room-status` with `{ room, status }` on change.
+ *
+ * Accessibility: status is written in text on every tile (not colour only); tiles are buttons
+ * with full labels; counters live in a polite region; the filter is a set of toggle buttons.
+ */
+type Status = 'clean' | 'dirty' | 'inspecting' | 'occupied' | 'ooo';
+interface Room { number: string; floor: string; type?: string; status: Status; guest?: string; note?: string; assignee?: string }
+interface Props {
+  rooms?: Room[];
+  title?: string;
+  interactive?: boolean;
+  variant?: 'card' | 'plain';
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const {
+  rooms = [
+    { number: '101', floor: 'Floor 1', type: 'Standard', status: 'clean' },
+    { number: '102', floor: 'Floor 1', type: 'Standard', status: 'occupied', guest: 'A. Tanaka' },
+    { number: '103', floor: 'Floor 1', type: 'Standard', status: 'dirty', assignee: 'Rosa' },
+    { number: '104', floor: 'Floor 1', type: 'Twin', status: 'inspecting', assignee: 'Luis' },
+    { number: '201', floor: 'Floor 2', type: 'Deluxe', status: 'ooo', note: 'A/C repair' },
+    { number: '202', floor: 'Floor 2', type: 'Deluxe', status: 'occupied', guest: 'J. Whitfield' },
+    { number: '203', floor: 'Floor 2', type: 'Deluxe', status: 'dirty', assignee: 'Rosa' },
+    { number: '204', floor: 'Floor 2', type: 'Deluxe', status: 'clean' },
+  ],
+  title = 'Housekeeping',
+  interactive = true,
+  variant = 'card',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const labels: Record<Status, string> = { clean: 'Clean', dirty: 'Dirty', inspecting: 'Inspecting', occupied: 'Occupied', ooo: 'Out of order' };
+const order: Status[] = ['clean', 'dirty', 'inspecting', 'occupied', 'ooo'];
+const floors = Array.from(new Set(rooms.map((r) => r.floor)));
+const counts = Object.fromEntries(order.map((s) => [s, rooms.filter((r) => r.status === s).length]));
+---
+
+<section class:list={['hk', `hk--${variant}`, `hk--${size}`, className]} data-hk data-interactive={interactive ? '' : undefined} aria-labelledby="hk-title">
+  <header class="hk__head">
+    <h2 class="hk__title" id="hk-title">{title}</h2>
+    <div class="hk__filters" role="group" aria-label="Filter rooms by status">
+      <button type="button" class="hk__filter" aria-pressed="true" data-f="">All <span data-c="">{rooms.length}</span></button>
+      {order.map((s) => (
+        <button type="button" class:list={['hk__filter', `hk__filter--${s}`]} aria-pressed="false" data-f={s}>
+          <i aria-hidden="true"></i>{labels[s]} <span data-c={s}>{counts[s]}</span>
+        </button>
+      ))}
+    </div>
+  </header>
+
+  <p class="sr-only" aria-live="polite" data-announce></p>
+
+  {floors.map((floor) => (
+    <div class="hk__floor">
+      <h3 class="hk__floor-title">{floor}</h3>
+      <ul class="hk__grid">
+        {rooms.filter((r) => r.floor === floor).map((r) => (
+          <li data-status={r.status}>
+            <button
+              type="button"
+              class:list={['hk__room', `hk__room--${r.status}`]}
+              data-room={r.number}
+              data-status={r.status}
+              aria-label={`Room ${r.number}, ${labels[r.status]}${r.guest ? `, ${r.guest}` : ''}${r.assignee ? `, assigned to ${r.assignee}` : ''}${interactive && (r.status === 'dirty' || r.status === 'inspecting') ? '. Activate to advance status' : ''}`}
+            >
+              <span class="hk__num">{r.number}</span>
+              {r.type && <span class="hk__type">{r.type}</span>}
+              <span class="hk__state"><i aria-hidden="true"></i><span data-label>{labels[r.status]}</span></span>
+              {(r.guest || r.note || r.assignee) && <span class="hk__meta">{r.guest ?? r.note ?? `→ ${r.assignee}`}</span>}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  ))}
+</section>
+
+<script>
+  const LABELS: Record<string, string> = { clean: 'Clean', dirty: 'Dirty', inspecting: 'Inspecting', occupied: 'Occupied', ooo: 'Out of order' };
+  const NEXT: Record<string, string> = { dirty: 'inspecting', inspecting: 'clean' };
+
+  document.querySelectorAll<HTMLElement>('[data-hk]:not([data-bound])').forEach((hk) => {
+    hk.dataset.bound = '';
+    const filters = Array.from(hk.querySelectorAll<HTMLButtonElement>('[data-f]'));
+    const announce = hk.querySelector<HTMLElement>('[data-announce]')!;
+    let active = '';
+
+    const recount = () => {
+      const items = Array.from(hk.querySelectorAll<HTMLElement>('li[data-status]'));
+      hk.querySelectorAll<HTMLElement>('[data-c]').forEach((c) => {
+        const s = c.dataset.c;
+        c.textContent = String(s ? items.filter((i) => i.dataset.status === s).length : items.length);
+      });
+      items.forEach((i) => { i.hidden = Boolean(active) && i.dataset.status !== active; });
+      hk.querySelectorAll<HTMLElement>('.hk__floor').forEach((f) => { f.hidden = !f.querySelector('li:not([hidden])'); });
+    };
+
+    filters.forEach((f) => f.addEventListener('click', () => {
+      active = f.dataset.f || '';
+      filters.forEach((x) => x.setAttribute('aria-pressed', String(x === f)));
+      recount();
+    }));
+
+    if (hk.hasAttribute('data-interactive')) {
+      hk.querySelectorAll<HTMLButtonElement>('.hk__room').forEach((btn) => btn.addEventListener('click', () => {
+        const next = NEXT[btn.dataset.status || ''];
+        if (!next) return;
+        btn.classList.remove(`hk__room--${btn.dataset.status}`);
+        btn.classList.add(`hk__room--${next}`);
+        btn.dataset.status = next;
+        btn.closest('li')!.dataset.status = next;
+        btn.querySelector('[data-label]')!.textContent = LABELS[next];
+        btn.setAttribute('aria-label', btn.getAttribute('aria-label')!.replace(/, (Dirty|Inspecting|Clean)/, `, ${LABELS[next]}`));
+        announce.textContent = `Room ${btn.dataset.room} is now ${LABELS[next].toLowerCase()}.`;
+        hk.dispatchEvent(new CustomEvent('app:room-status', { bubbles: true, detail: { room: btn.dataset.room, status: next } }));
+        recount();
+      }));
+    }
+  });
+</script>
+
+<style>
+  .hk { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4, 1rem); min-width: 0; }
+  .hk--card { padding: var(--sp-5, 1.25rem); border-radius: var(--r-lg, 16px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: var(--c-bg-1, #0a0a0a); }
+  .hk__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3, 0.75rem); }
+  .hk__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-text-1, #fff); }
+  .hk__filters { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+  .hk__filter { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 0.7rem; border-radius: 999px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); background: transparent; color: var(--c-text-2, #a3a3a3); font: inherit; font-size: 0.76rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
+  .hk__filter i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
+  .hk__filter span { color: var(--c-text-3, #737373); font-variant-numeric: tabular-nums; }
+  .hk__filter[aria-pressed='true'] { background: var(--c-text-1, #fff); color: var(--c-bg, #050505); border-color: var(--c-text-1, #fff); }
+  .hk__filter[aria-pressed='true'] span { color: inherit; opacity: 0.7; }
+
+  .hk__floor[hidden] { display: none; }
+  .hk__floor-title { margin: 0 0 var(--sp-2, 0.5rem); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3, #737373); }
+  .hk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2, 0.5rem); margin: 0; padding: 0; list-style: none; }
+  .hk--sm .hk__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
+  .hk__grid li[hidden] { display: none; }
+  .hk__room {
+    --tone: var(--c-text-3, #737373);
+    display: grid;
+    gap: 2px;
+    width: 100%;
+    min-height: 96px;
+    padding: var(--sp-3, 0.75rem);
+    border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
+    border-top: 3px solid var(--tone);
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--tone) 7%, var(--c-bg-1, #0a0a0a));
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+  }
+  .hk--sm .hk__room { min-height: 76px; }
+  .hk__room:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--tone) 70%, transparent); }
+  .hk__room:focus-visible { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  .hk__num { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
+  .hk__type { font-size: 0.72rem; color: var(--c-text-3, #737373); }
+  .hk__state { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.75rem; font-weight: 700; color: var(--tone); }
+  .hk__state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+  .hk__meta { font-size: 0.72rem; color: var(--c-text-2, #a3a3a3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .hk__room--clean, .hk__filter--clean { --tone: var(--c-success, #34d399); }
+  .hk__room--dirty, .hk__filter--dirty { --tone: var(--c-danger, #f87171); }
+  .hk__room--inspecting, .hk__filter--inspecting { --tone: var(--c-warning, #fbbf24); }
+  .hk__room--occupied, .hk__filter--occupied { --tone: var(--app-accent, var(--c-primary-light, #d4a017)); }
+  .hk__room--ooo, .hk__filter--ooo { --tone: var(--c-text-3, #737373); }
+  .hk__room--ooo { background: repeating-linear-gradient(135deg, rgb(var(--ink-rgb, 255 255 255) / 0.04) 0 8px, transparent 8px 16px), var(--c-bg-1, #0a0a0a); }
+  .hk__filter:focus-visible { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  @media (prefers-reduced-motion: reduce) { .hk__room { transition: none; } }
+</style>

package/src/components/lib/app/PageHeader.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * PageHeader — App page heading: breadcrumb, title, description, period switcher and action
+ * buttons, with optional underline tabs below.
+ *
+ * @param {string} title - Page title. Default 'Dashboard'.
+ * @param {string} description - Supporting text.
+ * @param {Array<{label: string, href?: string}>} breadcrumb - Trail (optional).
+ * @param {Array<{label: string, href?: string, icon?: string, primary?: boolean}>} actions - Buttons on the right.
+ * @param {string[]} periods - Segmented period options (e.g. ['Today','7d','30d']); empty hides it.
+ * @param {number} activePeriod - Selected period index. Default 0.
+ * @param {Array<{label: string, href: string, count?: number}>} tabs - Underline tabs (optional).
+ * @param {string} currentTab - href of the active tab.
+ * @param {string} size - Title scale (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: h1 title; the period switcher is a radio group (arrow keys) that dispatches
+ * `app:period` with `{ index, label }`; tabs are links with aria-current.
+ */
+import { appIcon } from './app-icons';
+
+interface Props {
+  title?: string;
+  description?: string;
+  breadcrumb?: Array<{ label: string; href?: string }>;
+  actions?: Array<{ label: string; href?: string; icon?: string; primary?: boolean }>;
+  periods?: string[];
+  activePeriod?: number;
+  tabs?: Array<{ label: string; href: string; count?: number }>;
+  currentTab?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Dashboard',
+  description = 'Good morning, Lucía — here is what is happening at Hotel Mirador today.',
+  breadcrumb = [],
+  actions = [{ label: 'Export', icon: 'download' }, { label: 'New booking', icon: 'plus', primary: true, href: '#' }],
+  periods = ['Today', '7 days', '30 days', 'Year'],
+  activePeriod = 2,
+  tabs = [],
+  currentTab,
+  size = 'md',
+  className = '',
+} = Astro.props;
+---
+
+<div class:list={['app-ph', `app-ph--${size}`, className]}>
+  {breadcrumb.length > 0 && (
+    <nav class="app-ph__crumbs" aria-label="Breadcrumb">
+      <ol>{breadcrumb.map((b, i) => <li>{b.href && i < breadcrumb.length - 1 ? <a href={b.href}>{b.label}</a> : <span aria-current="page">{b.label}</span>}</li>)}</ol>
+    </nav>
+  )}
+  <div class="app-ph__row">
+    <div class="app-ph__text">
+      <h1 class="app-ph__title">{title}</h1>
+      {description && <p class="app-ph__desc">{description}</p>}
+    </div>
+    <div class="app-ph__tools">
+      {periods.length > 0 && (
+        <div class="app-ph__periods" role="radiogroup" aria-label="Period" data-periods>
+          {periods.map((p, i) => (
+            <button type="button" role="radio" aria-checked={i === activePeriod ? 'true' : 'false'} tabindex={i === activePeriod ? '0' : '-1'} data-i={i}>{p}</button>
+          ))}
+        </div>
+      )}
+      {actions.map((a) => {
+        const Tag = a.href ? 'a' : 'button';
+        return (
+          <Tag class:list={['app-ph__btn', { 'app-ph__btn--primary': a.primary }]} href={a.href} type={a.href ? undefined : 'button'}>
+            {a.icon && <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><Fragment set:html={appIcon(a.icon)} /></svg>}
+            {a.label}
+          </Tag>
+        );
+      })}
+    </div>
+  </div>
+  {tabs.length > 0 && (
+    <nav class="app-ph__tabs" aria-label="Sections">
+      {tabs.map((tab) => (
+        <a href={tab.href} aria-current={tab.href === currentTab ? 'page' : undefined}>
+          {tab.label}{tab.count !== undefined && <span>{tab.count}</span>}
+        </a>
+      ))}
+    </nav>
+  )}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-periods]:not([data-bound])').forEach((group) => {
+    group.dataset.bound = '';
+    const radios = Array.from(group.querySelectorAll<HTMLButtonElement>('[role="radio"]'));
+    const select = (i: number, focus = false) => {
+      radios.forEach((r, n) => { r.setAttribute('aria-checked', String(n === i)); r.tabIndex = n === i ? 0 : -1; });
+      if (focus) radios[i].focus();
+      group.dispatchEvent(new CustomEvent('app:period', { bubbles: true, detail: { index: i, label: radios[i].textContent } }));
+    };
+    radios.forEach((r, i) => {
+      r.addEventListener('click', () => select(i));
+      r.addEventListener('keydown', (e) => {
+        const d = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+        if (!d) return;
+        e.preventDefault();
+        select((i + d + radios.length) % radios.length, true);
+      });
+    });
+  });
+</script>
+
+<style>
+  .app-ph { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4, 1rem); }
+  .app-ph__crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--c-text-3, #737373); }
+  .app-ph__crumbs li + li::before { content: '/'; margin-right: 6px; opacity: 0.6; }
+  .app-ph__crumbs a { color: inherit; text-decoration: none; }
+  .app-ph__crumbs a:hover, .app-ph__crumbs [aria-current] { color: var(--c-text-1, #fff); }
+  .app-ph__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4, 1rem); }
+  .app-ph__title { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.025em; color: var(--c-text-1, #fff); }
+  .app-ph--sm .app-ph__title { font-size: 1.25rem; }
+  .app-ph--lg .app-ph__title { font-size: 2.1rem; }
+  .app-ph__desc { margin: 4px 0 0; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
+  .app-ph__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2, 0.5rem); }
+  .app-ph__periods { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: rgb(var(--ink-rgb, 255 255 255) / 0.03); }
+  .app-ph__periods button { min-height: 34px; padding: 0 0.75rem; border: 0; border-radius: 7px; background: transparent; color: var(--c-text-2, #a3a3a3); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
+  .app-ph__periods [aria-checked='true'] { background: var(--c-bg-1, #0a0a0a); color: var(--c-text-1, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--c-border, rgba(255, 255, 255, 0.08)); }
+  .app-ph__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 40px;
+    padding: 0 0.95rem;
+    border-radius: 10px;
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1));
+    background: var(--c-bg-1, #0a0a0a);
+    color: var(--c-text-1, #fff);
+    font: inherit;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s ease, filter 0.15s ease;
+  }
+  .app-ph__btn:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.06); color: var(--c-text-1, #fff); }
+  .app-ph__btn--primary { border-color: transparent; background: var(--app-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); }
+  .app-ph__btn--primary:hover { background: var(--app-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); filter: brightness(1.08); }
+  .app-ph :is(a, button):focus-visible { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  .app-ph__tabs { display: flex; gap: var(--sp-5, 1.25rem); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); overflow-x: auto; scrollbar-width: none; }
+  .app-ph__tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; border-bottom: 2px solid transparent; color: var(--c-text-2, #a3a3a3); font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
+  .app-ph__tabs a:hover { color: var(--c-text-1, #fff); }
+  .app-ph__tabs a[aria-current] { color: var(--c-text-1, #fff); border-bottom-color: var(--app-accent, var(--c-primary-light, #d4a017)); }
+  .app-ph__tabs span { padding: 0 6px; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.08); font-size: 0.7rem; }
+
+  @container (max-width: 720px) {
+    .app-ph__row { flex-direction: column; align-items: stretch; }
+    .app-ph__tools { justify-content: flex-start; }
+  }
+</style>

package/src/components/lib/app/PlanUsageCard.astro

@@ -0,0 +1,112 @@
+---
+/**
+ * PlanUsageCard — Billing summary: current plan and price, renewal date, usage meters with
+ * warning thresholds, payment method and upgrade / manage actions.
+ *
+ * @param {string} plan - Plan name. Default 'Pro'.
+ * @param {string} price - Price label. Default '€149 / month'.
+ * @param {string} renews - Renewal text. Default 'Renews on Dec 1, 2026'.
+ * @param {Array<{label: string, used: number, limit: number, unit?: string}>} usage - Meters.
+ * @param {string} card - Payment method label (optional). Default 'Visa •••• 4242'.
+ * @param {{label: string, href: string}} upgrade - Primary action. Default upgrade.
+ * @param {{label: string, href: string}} manage - Secondary action (optional).
+ * @param {number} warnAt - Percentage at which a meter turns amber. Default 80.
+ * @param {string} variant - Style (card|accent). Default 'card'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: each meter is a role="meter" with aria-valuenow/min/max and a text value,
+ * so usage is never conveyed by colour alone.
+ */
+interface Props {
+  plan?: string;
+  price?: string;
+  renews?: string;
+  usage?: Array<{ label: string; used: number; limit: number; unit?: string }>;
+  card?: string;
+  upgrade?: { label: string; href: string };
+  manage?: { label: string; href: string };
+  warnAt?: number;
+  variant?: 'card' | 'accent';
+  className?: string;
+}
+
+const {
+  plan = 'Pro',
+  price = '€149 / month',
+  renews = 'Renews on Dec 1, 2026',
+  usage = [
+    { label: 'Rooms', used: 42, limit: 50 },
+    { label: 'Team seats', used: 4, limit: 10 },
+    { label: 'Channel connections', used: 3, limit: 5 },
+    { label: 'Guest emails', used: 8200, limit: 10000, unit: '/ month' },
+  ],
+  card = 'Visa •••• 4242',
+  upgrade = { label: 'Upgrade to Business', href: '#' },
+  manage = { label: 'Manage billing', href: '#' },
+  warnAt = 80,
+  variant = 'card',
+  className = '',
+} = Astro.props;
+
+const fmt = (n: number) => new Intl.NumberFormat('en-GB').format(n);
+---
+
+<section class:list={['plan', `plan--${variant}`, className]} aria-labelledby="plan-title">
+  <header class="plan__head">
+    <div>
+      <p class="plan__eyebrow">Current plan</p>
+      <h2 class="plan__title" id="plan-title">{plan} <span>{price}</span></h2>
+      <p class="plan__renew">{renews}</p>
+    </div>
+    {card && <p class="plan__card"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>{card}</p>}
+  </header>
+  <ul class="plan__meters">
+    {usage.map((u) => {
+      const pct = Math.min(100, Math.round((u.used / u.limit) * 100));
+      const tone = pct >= 100 ? 'danger' : pct >= warnAt ? 'warning' : 'ok';
+      return (
+        <li>
+          <div class="plan__meter-head">
+            <span>{u.label}</span>
+            <strong>{fmt(u.used)} <small>of {fmt(u.limit)}{u.unit ? ` ${u.unit}` : ''}</small></strong>
+          </div>
+          <div class:list={['plan__bar', `plan__bar--${tone}`]} role="meter" aria-label={u.label} aria-valuemin="0" aria-valuemax={u.limit} aria-valuenow={u.used} aria-valuetext={`${fmt(u.used)} of ${fmt(u.limit)}, ${pct}%`}>
+            <span style={`width: ${pct}%`}></span>
+          </div>
+          {tone === 'warning' && <p class="plan__warn">{pct}% used — consider upgrading soon.</p>}
+        </li>
+      );
+    })}
+  </ul>
+  <div class="plan__actions">
+    {upgrade && <a class="plan__btn plan__btn--primary" href={upgrade.href}>{upgrade.label}</a>}
+    {manage && <a class="plan__btn" href={manage.href}>{manage.label}</a>}
+  </div>
+</section>
+
+<style>
+  .plan { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5, 1.25rem); padding: var(--sp-6, 1.5rem); border-radius: var(--r-lg, 16px); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08)); background: var(--c-bg-1, #0a0a0a); }
+  .plan--accent { background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app-accent, var(--c-primary-light, #d4a017)) 22%, transparent), transparent 55%), var(--c-bg-1, #0a0a0a); }
+  .plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4, 1rem); }
+  .plan__eyebrow { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-accent, var(--c-primary-light, #d4a017)); }
+  .plan__title { margin: 4px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--c-text-1, #fff); }
+  .plan__title span { font-size: 0.95rem; font-weight: 500; color: var(--c-text-2, #a3a3a3); }
+  .plan__renew { margin: 2px 0 0; font-size: 0.8rem; color: var(--c-text-3, #737373); }
+  .plan__card { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); font-size: 0.8rem; color: var(--c-text-1, #fff); white-space: nowrap; }
+  .plan__meters { display: grid; gap: var(--sp-4, 1rem); margin: 0; padding: 0; list-style: none; }
+  .plan__meter-head { display: flex; justify-content: space-between; gap: var(--sp-2, 0.5rem); margin-bottom: 6px; font-size: 0.85rem; color: var(--c-text-2, #a3a3a3); }
+  .plan__meter-head strong { color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .plan__meter-head small { font-weight: 500; color: var(--c-text-3, #737373); }
+  .plan__bar { height: 8px; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.08); overflow: hidden; }
+  .plan__bar span { display: block; height: 100%; border-radius: inherit; background: var(--app-accent, var(--c-primary-light, #d4a017)); }
+  .plan__bar--warning span { background: var(--c-warning, #fbbf24); }
+  .plan__bar--danger span { background: var(--c-danger, #f87171); }
+  .plan__warn { margin: 4px 0 0; font-size: 0.75rem; color: var(--c-warning, #fbbf24); }
+  .plan__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2, 0.5rem); }
+  .plan__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 10px; border: 1px solid var(--c-border, rgba(255, 255, 255, 0.12)); color: var(--c-text-1, #fff); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
+  .plan__btn:hover { background: rgb(var(--ink-rgb, 255 255 255) / 0.05); color: var(--c-text-1, #fff); }
+  .plan__btn--primary { border-color: transparent; background: var(--app-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); }
+  .plan__btn--primary:hover { background: var(--app-accent, var(--c-primary-light, #d4a017)); color: var(--c-on-primary, #050505); filter: brightness(1.08); }
+  .plan__btn:focus-visible { outline: 2px solid var(--app-accent, var(--c-primary-light, #d4a017)); outline-offset: 2px; }
+  @container (max-width: 420px) { .plan__head { flex-direction: column; } }
+</style>