astro-component-kit 0.3.1 → 0.4.0

package/src/components/lib/cards/PricingCompareMiniCard.astro

@@ -0,0 +1,196 @@
+---
+/**
+ * PricingCompareMiniCard — High-conversion mini pricing card with plan perks, price tier, and action button.
+ * 
+ * @param {string} planName - Plan name (e.g. 'Pro Developer').
+ * @param {string} price - Price figure (e.g. '$29').
+ * @param {string} period - Frequency string (e.g. '/month').
+ * @param {string} description - Plan highlight subtitle.
+ * @param {string[]} features - List of plan feature bullet points.
+ * @param {boolean} featured - Whether the card is visually emphasized.
+ * @param {string} ctaText - Label for the call to action button. Default is 'Get Started'.
+ * @param {string} ctaHref - Link URL for the button.
+ */
+interface Props {
+  planName: string;
+  price: string;
+  period?: string;
+  description?: string;
+  features?: string[];
+  featured?: boolean;
+  ctaText?: string;
+  ctaHref?: string;
+}
+
+const {
+  planName = 'Pro Developer',
+  price = '$29',
+  period = '/month',
+  description = 'For growing teams and fast production workflows.',
+  features = [
+    'Unlimited UI components',
+    'Full source code access',
+    'Commercial license',
+    'Community Discord support',
+  ],
+  featured = false,
+  ctaText = 'Get Started',
+  ctaHref = '#',
+} = Astro.props;
+---
+
+<div class:list={['mini-price-card', { 'mini-price-card--featured': featured }]}>
+  {featured && <span class="mini-price-card__badge">Most Popular</span>}
+
+  <div class="mini-price-card__header">
+    <h3 class="mini-price-card__plan">{planName}</h3>
+    <p class="mini-price-card__desc">{description}</p>
+    <div class="mini-price-card__amount">
+      <span class="val">{price}</span>
+      <span class="period">{period}</span>
+    </div>
+  </div>
+
+  <ul class="mini-price-card__features">
+    {features.map((feat) => (
+      <li class="mini-price-card__feature">
+        <svg class="check-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+        <span>{feat}</span>
+      </li>
+    ))}
+  </ul>
+
+  <a href={ctaHref} class="mini-price-card__btn">
+    {ctaText}
+    <span aria-hidden="true">→</span>
+  </a>
+</div>
+
+<style>
+  .mini-price-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: var(--sp-6, 1.5rem);
+    background: rgba(255, 255, 255, 0.02);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 24px);
+    width: 100%;
+    max-width: 320px;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .mini-price-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(184, 134, 11, 0.3);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+  }
+
+  .mini-price-card--featured {
+    border-color: rgba(184, 134, 11, 0.5);
+    background: radial-gradient(circle at top, rgba(184, 134, 11, 0.12), rgba(255, 255, 255, 0.02) 60%);
+    box-shadow: 0 12px 36px rgba(184, 134, 11, 0.15);
+  }
+
+  .mini-price-card__badge {
+    position: absolute;
+    top: -12px;
+    right: 20px;
+    background: linear-gradient(135deg, #d4a017, #b8860b);
+    color: #050505;
+    font-size: 0.72rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 0.25rem 0.75rem;
+    border-radius: var(--r-full, 9999px);
+    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
+  }
+
+  .mini-price-card__plan {
+    font-size: 1.15rem;
+    font-weight: 800;
+    color: var(--c-text-1, #ffffff);
+    margin: 0;
+  }
+
+  .mini-price-card__desc {
+    font-size: 0.8rem;
+    color: var(--c-text-2, #a3a3a3);
+    margin: 4px 0 16px 0;
+    line-height: 1.45;
+  }
+
+  .mini-price-card__amount {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    margin-bottom: var(--sp-4, 1rem);
+    padding-bottom: var(--sp-4, 1rem);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .mini-price-card__amount .val {
+    font-size: 2.2rem;
+    font-weight: 900;
+    color: var(--c-text-1, #ffffff);
+    letter-spacing: -0.03em;
+  }
+
+  .mini-price-card__amount .period {
+    font-size: 0.82rem;
+    color: var(--c-text-3, #737373);
+  }
+
+  .mini-price-card__features {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 0 0 24px 0;
+    padding: 0;
+    flex: 1;
+  }
+
+  .mini-price-card__feature {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.82rem;
+    color: var(--c-text-2, #a3a3a3);
+  }
+
+  .check-icon {
+    color: var(--c-primary-light, #d4a017);
+    flex-shrink: 0;
+  }
+
+  .mini-price-card__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--c-text-1, #ffffff);
+    font-size: 0.88rem;
+    font-weight: 700;
+    text-decoration: none;
+    border-radius: var(--r-md, 12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.25s ease;
+  }
+
+  .mini-price-card--featured .mini-price-card__btn,
+  .mini-price-card__btn:hover {
+    background: linear-gradient(135deg, #d4a017, #b8860b);
+    color: #050505;
+    border-color: transparent;
+    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.35);
+  }
+</style>

package/src/components/lib/cards/StatsTrendCard.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * StatsTrendCard — Compact KPI metric card featuring delta percentages, trend directions, and mini activity bars.
+ * 
+ * @param {string} label - Metric name (e.g. 'Active Users').
+ * @param {string} value - Formatted value figure (e.g. '42,850').
+ * @param {string} change - Delta percentage string (e.g. '+18.4%').
+ * @param {'up' | 'down' | 'neutral'} trend - Direction of the trend. Default is 'up'.
+ * @param {string} timeframe - Timeframe subtitle (e.g. 'vs last month').
+ */
+interface Props {
+  label: string;
+  value: string;
+  change: string;
+  trend?: 'up' | 'down' | 'neutral';
+  timeframe?: string;
+}
+
+const {
+  label = 'Monthly Active Builders',
+  value = '14,290',
+  change = '+18.4%',
+  trend = 'up',
+  timeframe = 'vs last 30 days',
+} = Astro.props;
+
+const bars = [35, 55, 40, 75, 60, 90, 80, 100];
+---
+
+<div class="trend-card">
+  <div class="trend-card__top">
+    <span class="trend-card__label">{label}</span>
+    <span class:list={['trend-card__badge', `trend-card__badge--${trend}`]}>
+      {trend === 'up' && '↑'}
+      {trend === 'down' && '↓'}
+      {change}
+    </span>
+  </div>
+
+  <div class="trend-card__value">{value}</div>
+
+  <div class="trend-card__bottom">
+    <span class="trend-card__timeframe">{timeframe}</span>
+    <div class="trend-card__chart" aria-hidden="true">
+      {bars.map((h) => (
+        <span class="bar" style={`height: ${h}%;`}></span>
+      ))}
+    </div>
+  </div>
+</div>
+
+<style>
+  .trend-card {
+    display: flex;
+    flex-direction: column;
+    padding: var(--sp-6, 1.5rem);
+    background: rgba(255, 255, 255, 0.02);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 20px);
+    width: 100%;
+    max-width: 280px;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    transition: transform 0.25s ease, border-color 0.25s ease;
+  }
+
+  .trend-card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(184, 134, 11, 0.3);
+  }
+
+  .trend-card__top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .trend-card__label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--c-text-2, #a3a3a3);
+  }
+
+  .trend-card__badge {
+    font-size: 0.72rem;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: var(--r-full, 9999px);
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .trend-card__badge--up {
+    background: rgba(16, 185, 129, 0.15);
+    color: #34d399;
+    border: 1px solid rgba(16, 185, 129, 0.3);
+  }
+
+  .trend-card__badge--down {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+    border: 1px solid rgba(239, 68, 68, 0.3);
+  }
+
+  .trend-card__badge--neutral {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--c-text-2, #a3a3a3);
+  }
+
+  .trend-card__value {
+    font-size: 1.85rem;
+    font-weight: 900;
+    color: var(--c-text-1, #ffffff);
+    letter-spacing: -0.02em;
+    margin-bottom: 12px;
+  }
+
+  .trend-card__bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  .trend-card__timeframe {
+    font-size: 0.74rem;
+    color: var(--c-text-3, #737373);
+  }
+
+  .trend-card__chart {
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    height: 24px;
+    width: 60px;
+  }
+
+  .bar {
+    flex: 1;
+    background: rgba(184, 134, 11, 0.35);
+    border-radius: 2px;
+    transition: background 0.2s;
+  }
+
+  .trend-card:hover .bar {
+    background: var(--c-primary-light, #d4a017);
+  }
+</style>

package/src/components/lib/cards/index.ts

@@ -20,3 +20,6 @@ export { default as StatCard } from './StatCard.astro';
 export { default as TaskKanbanCard } from './TaskKanbanCard.astro';
 export { default as TestimonialCardClean } from './TestimonialCardClean.astro';
 export { default as WeatherWidgetCard } from './WeatherWidgetCard.astro';
+export { default as PricingCompareMiniCard } from './PricingCompareMiniCard.astro';
+export { default as GithubRepoCard } from './GithubRepoCard.astro';
+export { default as StatsTrendCard } from './StatsTrendCard.astro';

package/src/components/lib/charts/ActivityRings.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * ActivityRings — Concentric closed rings tracking daily goals (move, exercise,
+ * stand style). Values over 100% wrap with a stronger overlap stroke.
+ *
+ * @param {Array<{label: string, value: number, goal: number, unit?: string}>} rings - Up to 4 goals.
+ * @param {string[]} colors - Optional per-ring colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { arcStroke, colorAt } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  rings?: Array<{ label: string; value: number; goal: number; unit?: string }>;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Today',
+  subtitle = 'Daily goals',
+  rings = [
+    { label: 'Focus time', value: 5.2, goal: 6, unit: 'h' },
+    { label: 'Tasks done', value: 11, goal: 8 },
+    { label: 'Reviews', value: 3, goal: 5 },
+  ],
+  colors = ['var(--chart-5, #d55181)', 'var(--chart-3, #199e70)', 'var(--chart-1, #3987e5)'],
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const S = 220;
+const c = S / 2;
+const stroke = 20;
+const items = rings.slice(0, 4).map((r, i) => {
+  const radius = c - stroke / 2 - 4 - i * (stroke + 4);
+  const pct = r.value / (r.goal || 1);
+  return { ...r, radius, pct, color: colorAt(i, colors) };
+});
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Goal', 'Value', 'Target', 'Progress'], rows: items.map((r) => [r.label, `${r.value}${r.unit ?? ''}`, `${r.goal}${r.unit ?? ''}`, `${Math.round(r.pct * 100)}%`]) }}
+>
+  <div class="ar">
+    <svg viewBox={`0 0 ${S} ${S}`} role="img" aria-label={`${title}: ${items.map((r) => `${r.label} ${Math.round(r.pct * 100)}%`).join(', ')}`}>
+      {items.map((r) => {
+        const main = Math.min(r.pct, 0.9999);
+        const extra = r.pct > 1 ? Math.min(r.pct - 1, 0.9999) : 0;
+        return (
+          <g>
+            <circle cx={c} cy={c} r={r.radius} fill="none" stroke={r.color} stroke-opacity="0.16" stroke-width={stroke} />
+            {main > 0 && <path class="ar__arc" d={arcStroke(c, c, r.radius, 0, Math.PI * 2 * main)} fill="none" stroke={r.color} stroke-width={stroke} stroke-linecap="round" />}
+            {extra > 0 && <path d={arcStroke(c, c, r.radius, 0, Math.PI * 2 * extra)} fill="none" stroke={r.color} stroke-width={stroke} stroke-linecap="round" style="filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)) brightness(1.15)" />}
+          </g>
+        );
+      })}
+    </svg>
+    <ul class="ar__list">
+      {items.map((r) => (
+        <li>
+          <span class="ar__label"><i style={`background:${r.color}`} aria-hidden="true"></i>{r.label}</span>
+          <span class="ar__value">{r.value}{r.unit ?? ''}<small>/{r.goal}{r.unit ?? ''}</small></span>
+          <span class="ar__pct">{Math.round(r.pct * 100)}%{r.pct >= 1 && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-label="goal met"><path d="M20 6 9 17l-5-5" /></svg>}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+</ChartFrame>
+
+<style>
+  .ar {
+    display: grid;
+    grid-template-columns: minmax(0, 220px) 1fr;
+    gap: 2rem;
+    align-items: center;
+  }
+  .ar__arc {
+    stroke-dasharray: 800;
+    stroke-dashoffset: 800;
+    animation: ar-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  @keyframes ar-draw { to { stroke-dashoffset: 0; } }
+  .ar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
+  .ar__list li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; }
+  .ar__label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); grid-column: 1 / -1; }
+  .ar__label i { width: 10px; height: 10px; border-radius: 50%; }
+  .ar__value { font-size: 1.25rem; font-weight: 700; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .ar__value small { font-size: 0.8rem; color: var(--c-text-3, #8a8a8a); font-weight: 500; }
+  .ar__pct { display: inline-flex; align-items: center; gap: 0.3rem; align-self: end; font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); font-variant-numeric: tabular-nums; }
+  .ar__pct svg { color: var(--chart-pos, #34c38f); }
+  @media (max-width: 520px) { .ar { grid-template-columns: 1fr; justify-items: center; } .ar__list { width: 100%; } .ar svg { max-width: 200px; } }
+  @media (prefers-reduced-motion: reduce) { .ar__arc { animation: none; stroke-dashoffset: 0; } }
+</style>

package/src/components/lib/charts/BoxPlotChart.astro

@@ -0,0 +1,109 @@
+---
+/**
+ * BoxPlotChart — Distribution summary per group: median, interquartile box,
+ * 1.5×IQR whiskers and outlier dots. Computes stats from raw values.
+ *
+ * @param {Array<{label: string, values: number[]}>} groups - Raw observations per group.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Box color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, quantile } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  groups?: Array<{ label: string; values: number[] }>;
+  suffix?: string;
+  height?: number;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const rand = (seed: number, n: number, mean: number, spread: number) =>
+  Array.from({ length: n }, (_, i) => {
+    const a = Math.sin((i + 1) * seed) * 9999;
+    const b = Math.sin((i + 3) * seed * 1.7) * 9999;
+    return Math.round(mean + ((a - Math.floor(a)) + (b - Math.floor(b)) - 1) * spread);
+  });
+
+const {
+  title = 'Response time by region',
+  subtitle = 'Distribution of p50 latency, ms',
+  groups = [
+    { label: 'us-east', values: [...rand(1.3, 40, 82, 40), 190] },
+    { label: 'us-west', values: rand(2.7, 40, 95, 45) },
+    { label: 'eu-central', values: [...rand(4.1, 40, 70, 30), 160, 172] },
+    { label: 'ap-south', values: rand(5.9, 40, 140, 70) },
+    { label: 'sa-east', values: rand(8.3, 40, 160, 55) },
+  ],
+  suffix = 'ms',
+  height = 290,
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const stats = groups.map((g) => {
+  const s = [...g.values].sort((a, b) => a - b);
+  const q1 = quantile(s, 0.25);
+  const med = quantile(s, 0.5);
+  const q3 = quantile(s, 0.75);
+  const iqr = q3 - q1;
+  const lo = s.find((v) => v >= q1 - 1.5 * iqr) ?? s[0];
+  const hi = [...s].reverse().find((v) => v <= q3 + 1.5 * iqr) ?? s[s.length - 1];
+  const outliers = s.filter((v) => v < lo || v > hi);
+  return { label: g.label, q1, med, q3, lo, hi, outliers, n: s.length };
+});
+
+const W = 640;
+const H = height;
+const m = { t: 14, r: 12, b: 30, l: 48 };
+const allV = groups.flatMap((g) => g.values);
+const ticks = niceTicks(Math.min(...allV), Math.max(...allV), 4);
+const y = scaleLinear(ticks[0], ticks[ticks.length - 1], H - m.b, m.t);
+const band = (W - m.l - m.r) / groups.length;
+const bw = Math.min(56, band * 0.45);
+const f = (v: number) => `${Math.round(v)}${suffix}`;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Group', 'Min', 'Q1', 'Median', 'Q3', 'Max', 'Outliers'], rows: stats.map((s) => [s.label, f(s.lo), f(s.q1), f(s.med), f(s.q3), f(s.hi), s.outliers.length]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: box plot of ${groups.length} groups`}>
+    {ticks.map((t) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={m.l - 8} y={y(t) + 4} text-anchor="end">{f(t)}</text>
+      </g>
+    ))}
+    {stats.map((s, i) => {
+      const cx = m.l + i * band + band / 2;
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img"
+          aria-label={`${s.label}: median ${f(s.med)}, IQR ${f(s.q1)}–${f(s.q3)}, range ${f(s.lo)}–${f(s.hi)}, ${s.outliers.length} outliers`}
+          data-tip-title={s.label} data-tip={`Max: ${f(s.hi)}|Q3: ${f(s.q3)}|${color}::Median: ${f(s.med)}|Q1: ${f(s.q1)}|Min: ${f(s.lo)}${s.outliers.length ? `|Outliers: ${s.outliers.length}` : ''}`}>
+          <rect x={cx - band / 2} y={m.t} width={band} height={H - m.t - m.b} fill="transparent" />
+          <line x1={cx} x2={cx} y1={y(s.hi)} y2={y(s.q3)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <line x1={cx} x2={cx} y1={y(s.q1)} y2={y(s.lo)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <line x1={cx - bw / 4} x2={cx + bw / 4} y1={y(s.hi)} y2={y(s.hi)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <line x1={cx - bw / 4} x2={cx + bw / 4} y1={y(s.lo)} y2={y(s.lo)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <rect x={cx - bw / 2} y={y(s.q3)} width={bw} height={Math.max(1, y(s.q1) - y(s.q3))} rx="4" fill={color} fill-opacity="0.3" stroke={color} stroke-width="1.5" />
+          <line x1={cx - bw / 2} x2={cx + bw / 2} y1={y(s.med)} y2={y(s.med)} stroke="var(--c-text-1, #fff)" stroke-width="2.5" />
+          {s.outliers.map((o) => <circle cx={cx} cy={y(o)} r="3.5" fill="none" stroke={color} stroke-width="1.5" />)}
+          <text class="cf-label" x={cx} y={H - 10} text-anchor="middle">{s.label}</text>
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/BubbleChart.astro

@@ -0,0 +1,101 @@
+---
+/**
+ * BubbleChart — Three-variable scatter: x, y and bubble area (z). Larger
+ * bubbles are drawn first so small ones stay visible on top.
+ *
+ * @param {Array<{label: string, x: number, y: number, z: number, group?: number}>} items - Bubbles.
+ * @param {string[]} groups - Group names (max 3) mapped to color slots.
+ * @param {string} xLabel - X-axis title.
+ * @param {string} yLabel - Y-axis title.
+ * @param {string} zLabel - Bubble size meaning.
+ * @param {string[]} colors - Optional per-group colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, colorAt, formatCompact } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; x: number; y: number; z: number; group?: number }>;
+  groups?: string[];
+  xLabel?: string;
+  yLabel?: string;
+  zLabel?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Market opportunity',
+  subtitle = 'Growth vs margin, bubble = revenue',
+  items = [
+    { label: 'Analytics', x: 34, y: 62, z: 120, group: 0 },
+    { label: 'Payments', x: 18, y: 41, z: 260, group: 0 },
+    { label: 'CRM', x: 9, y: 55, z: 180, group: 1 },
+    { label: 'Hosting', x: 22, y: 28, z: 90, group: 1 },
+    { label: 'AI tools', x: 71, y: 48, z: 70, group: 2 },
+    { label: 'Security', x: 27, y: 72, z: 140, group: 2 },
+    { label: 'Email', x: 6, y: 66, z: 60, group: 1 },
+    { label: 'Design', x: 41, y: 58, z: 85, group: 0 },
+  ],
+  groups = ['Core', 'Mature', 'Emerging'],
+  xLabel = 'YoY growth (%)',
+  yLabel = 'Gross margin (%)',
+  zLabel = 'Revenue ($M)',
+  height = 320,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 20, r: 24, b: 40, l: 48 };
+const xt = niceTicks(0, Math.max(...items.map((i) => i.x)), 5);
+const yt = niceTicks(0, Math.max(...items.map((i) => i.y)), 4);
+const x = scaleLinear(xt[0], xt[xt.length - 1], m.l, W - m.r);
+const y = scaleLinear(yt[0], yt[yt.length - 1], H - m.b, m.t);
+const zMax = Math.max(...items.map((i) => i.z)) || 1;
+const r = (z: number) => 6 + Math.sqrt(z / zMax) * 30; // area-proportional radius
+const sorted = [...items].sort((a, b) => b.z - a.z);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={groups.slice(0, 3).map((g, i) => ({ label: g, color: colorAt(i, colors) }))}
+  table={{ headers: ['Item', 'Group', xLabel, yLabel, zLabel], rows: items.map((i) => [i.label, groups[i.group ?? 0] ?? '—', i.x, i.y, i.z]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: bubble chart of ${items.length} items`}>
+    {yt.map((t) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={m.l - 8} y={y(t) + 4} text-anchor="end">{formatCompact(t)}</text>
+      </g>
+    ))}
+    {xt.map((t) => <text class="cf-label" x={x(t)} y={H - m.b + 16} text-anchor="middle">{formatCompact(t)}</text>)}
+    <text class="cf-label" x={(m.l + W - m.r) / 2} y={H - 4} text-anchor="middle">{xLabel}</text>
+    <text class="cf-label" transform={`translate(12 ${(m.t + H - m.b) / 2}) rotate(-90)`} text-anchor="middle">{yLabel}</text>
+
+    {sorted.map((it) => {
+      const col = colorAt(it.group ?? 0, colors);
+      const rad = r(it.z);
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${it.label}: ${xLabel} ${it.x}, ${yLabel} ${it.y}, ${zLabel} ${it.z}`}
+          data-tip-title={it.label} data-tip={`${col}::${groups[it.group ?? 0] ?? ''}|${xLabel}: ${it.x}|${yLabel}: ${it.y}|${zLabel}: ${it.z}`}>
+          <circle cx={x(it.x)} cy={y(it.y)} r={rad} fill={col} fill-opacity="0.55" stroke={col} stroke-width="1.5" />
+          {rad > 18 && <text x={x(it.x)} y={y(it.y) + 4} text-anchor="middle" fill="#fff" font-size="11" font-weight="600">{it.label}</text>}
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>