@svadmin/lite 0.16.11 → 0.22.0

package/README.md

@@ -253,13 +253,31 @@ IE11 before the decision is made.
 
 ## Components & Parity (100% Coverage)
 
-`@svadmin/lite` provides **100% component parity** (103/103 components) corresponding to `@svadmin/ui`. See [PARITY.md](./PARITY.md) for the generated complete matrix and status details.
+`LiteQRCode` is an opt-in subpath export because it statically imports the
+optional `qrcode` peer. The root entry `@svadmin/lite` stays importable without
+it, so the rest of Lite has no extra runtime dependency. Install the peer with
+`bun add qrcode` and import the component directly only when you render QR codes:
+
+```ts
+import LiteQRCode from '@svadmin/lite/components/LiteQRCode.svelte';
+```
+
+`@svadmin/lite` provides **100% component parity** (179/179 components) corresponding to `@svadmin/ui`. See [PARITY.md](./PARITY.md) for the generated complete matrix and status details.
 
 ### Core Pages & Layout
 
 | Component | Description |
 |-----------|-------------|
 | `LiteLayout` | Responsive sidebar + header + main shell (supports nested `menu` links) |
+| `LitePageHeader` / `LiteStatusTabs` / `LiteStatusBadge` | Page heading, status filters and semantic status pills |
+| `LiteMenu` / `LiteAnchor` / `LiteAffix` / `LiteCollapse` / `LiteLink` | Static navigation, in-page anchors and native disclosure |
+| `LiteSpace` / `LiteGrid` / `LiteResizeBox` / `LiteFloatButton` / `LiteBackTop` | Layout and fixed-action primitives |
+| `LiteImage` / `LiteImagePreview` / `LiteVideoPlayer` / `LiteQRCode` | Media rendering with native controls, links and server-rendered QR |
+| `LiteCalendar` / `LiteCarousel` / `LiteTimeline` / `LiteStatistic` / `LiteCountdown` | Read-only dashboards and chronological displays |
+| `LiteCommentThread` / `LiteTour` / `LiteNotificationCenter` / `LiteDetailDrawer` / `LitePopconfirm` | Server-rendered collaboration and disclosure surfaces |
+| `LiteSteps` / `LiteProgress` / `LiteSpin` / `LiteSkeleton` / `LiteResult` | Progress, loading and outcome surfaces |
+| `LiteTree` / `LiteItemList` / `LiteRowActions` / `LiteOtpInput` / `LiteTwoFactorStepper` | Hierarchical data, row actions and verification flows |
+| `LiteAutoComplete` | Native `datalist` suggestions without async client popovers |
 | `LiteSidebar` / `LiteHeader` | Discrete layout primitives |
 | `LiteListPage` | Full-featured list view with search, table, bulk actions, and pagination |
 | `LiteCreatePage` / `LiteEditPage` | Auto-generated CRUD form pages |
@@ -301,6 +319,8 @@ IE11 before the decision is made.
 |-----------|-------------|
 | `LiteStatsCard`, `LiteMetricStrip`, `LiteInsightCard`, `LiteAnomalyBadge`, `LiteBadge` | Metric KPI cards/strips and semantic status badges |
 | `LiteBarChart`, `LiteLineChart`, `LitePieChart` | Server-rendered SVG/HTML charts with fallback data tables |
+| `LiteAreaChart`, `LiteScatterChart`, `LiteRadarChart`, `LiteGaugeChart` | Bounded chart data tables where a client chart engine is unavailable |
+| `LiteFunnelChart`, `LiteHeatmapChart`, `LiteWaterfallChart`, `LiteRoseChart`, `LiteDonutChart` | Bounded chart data tables with the same fallback contract |
 | `LitePresenceAvatarGroup`, `LiteGanttChart`, `LiteOfflineSyncBanner` | Presence, schedule, and offline mutation status rendered without client hydration |
 
 ### Compatibility & Degradation Primitives
@@ -335,7 +355,7 @@ To monitor and maintain 100% component parity between `@svadmin/ui` and `@svadmi
 - **CLI Dashboard**: Run `bun run check:parity` to inspect the live coverage matrix in terminal.
 - **Parity Matrix Document**: [PARITY.md](./PARITY.md) is auto-generated with exhaustive module-by-module tables.
 - **Machine-Readable JSON**: `packages/lite/parity.json` provides structured data for automation.
-- **Interactive Showroom**: Visit `/lite/parity` in the example app to interactively preview all 103 components and live metrics.
+- **Interactive Showroom**: Visit `/lite/parity` in the example app to interactively preview all 179 components and live metrics.
 - **CI Contract Test**: `scripts/parity-contract.test.ts` runs in CI to prevent regression and ensure every new UI component has a documented Lite counterpart.
 
 ## Server Utilities
@@ -352,6 +372,43 @@ To monitor and maintain 100% component parity between `@svadmin/ui` and `@svadmi
 
 Schema generation is TypeBox-only. The former Zod-named exports and parser-compatible methods were removed; use `Check`, `Errors`, and `Decode` on the returned schema.
 
+## Styling Hooks
+
+Most components accept a single `class` that is **merged** with the built-in class
+list, never replacing it:
+
+```svelte
+<LiteStatsCard class="dense" label="Orders" value={42} />
+<!-- renders class="lite-stats-card lite-card dense" -->
+```
+
+Fields take the hook on both of their render roots, so one prop covers show and
+edit mode (`LiteTextField` → `.lite-field-value` / `.lite-field-edit`,
+`LiteTagField` → tag container / `.lite-tags-input`, …).
+
+Structural components take **named** hooks, because the part you usually restyle is
+inside the wrapper:
+
+| Component | Hooks | Lands on |
+| --- | --- | --- |
+| `LiteLayout` | `class`, `classSidebar`, `classMobileNav`, `classMain` | wrapper, desktop sidebar, mobile nav, main region |
+| `LiteSidebar` | `class` | the sidebar `nav` |
+| `LiteSplitPaneLayout` | `class`, `classPane1`, `classDivider`, `classPane2` | container, first pane, divider, second pane |
+
+Omitting every hook leaves the rendered HTML byte-identical (the class attribute is
+built with a trimmed template, not an empty interpolation). This is covered by
+`packages/lite/src/components/LiteClassHooks.test.svelte.ts`.
+
+Styling hook coverage — how many `exact` mappings expose the same `class` entry the
+reference component does — is tracked separately in `CLASS-HOOKS.md` and never
+changes a parity status. `Lite` ships `lite.css`, so a missing hook is styling debt,
+not a capability gap. Regenerate both artifacts with:
+
+```bash
+bun run check:parity   # writes PARITY.md, parity.json, CLASS-HOOKS.md, class-hooks.json
+bun run check:parity:verify
+```
+
 ## CSS
 
 Import `@svadmin/lite/lite.css` in your layout. It's fully self-contained:
@@ -364,6 +421,18 @@ Import `@svadmin/lite/lite.css` in your layout. It's fully self-contained:
 - Print-optimized styles
 - ~800 lines, ~19KB unminified
 
+Rich content previews (Markdown, insight, comments, notifications, activity) ship
+literal `tok-*` token colours here. Hosts that can rely on CSS custom properties
+may also import the opt-in theme:
+
+```ts
+import '@svadmin/lite/lite-code-theme.css';
+```
+
+It exposes `--lite-token-{comment,keyword,string,number,function,type}` with the
+literal palette as fallbacks and a `lite-dark` preset class, so one override
+re-themes every preview surface.
+
 This CSS baseline helps older browsers, but the generated Svelte/SvelteKit application and any Tailwind v4 UI used alongside Lite still require the browser targets configured by those tools (Tailwind v4 itself targets modern browsers).
 
 ## Optional: Progressive Enhancement

package/dist/components/LiteActivityFeed.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { renderRichContent, type MarkdownRenderOptions } from '../rich-content.js';
+
   interface LiteActivityItem {
     id: string;
     user?: { name: string };
@@ -13,16 +15,28 @@
     activities?: LiteActivityItem[];
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    /** Render note bodies as Markdown/allowlisted HTML. Defaults to plain text. */
+    richContent?: boolean;
+    richContentOptions?: MarkdownRenderOptions;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
     activities = [],
     action = '',
     method = 'POST',
+    richContent = false,
+    richContentOptions,
+    class: className = '',
   }: Props = $props();
+
+  function body(value: string): string {
+    return renderRichContent(value, richContentOptions);
+  }
 </script>
 
-<div class="lite-activity-card">
+<div class="lite-activity-card {className}">
   <div class="lite-activity-header">
     <strong>Activity & Timeline Stream</strong>
   </div>
@@ -37,7 +51,12 @@
         </div>
         {#if act.comment}
           <div class="lite-activity-comment">
-            {act.comment}
+            {#if richContent}
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -- 内容由 renderRichContent 转义或白名单过滤，高亮回调仅允许可信服务端实现。 -->
+              <div class="lite-activity-rich">{@html body(act.comment)}</div>
+            {:else}
+              {act.comment}
+            {/if}
           </div>
         {/if}
       </li>
@@ -61,14 +80,14 @@
 <style>
   .lite-activity-card {
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 16px;
     margin-bottom: 16px;
   }
   .lite-activity-header {
     padding-bottom: 8px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #E5E6EB;
     margin-bottom: 12px;
     font-size: 13px;
   }
@@ -79,20 +98,23 @@
   }
   .lite-activity-item {
     padding: 8px 0;
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid #F2F3F5;
     font-size: 12px;
   }
   .lite-activity-time {
-    color: #94a3b8;
+    color: #86909C;
     margin-left: 8px;
     font-size: 11px;
   }
   .lite-activity-comment {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background: #F7F8FA;
+    border: 1px solid #E5E6EB;
     padding: 6px 10px;
     border-radius: 4px;
     margin-top: 4px;
-    color: #475569;
+    color: #4E5969;
   }
+  .lite-activity-rich :global(p) { margin: 0; }
+  .lite-activity-rich :global(a) { color: #165DFF; }
+  .lite-activity-rich :global(code) { padding: 1px 4px; border-radius: 3px; background: #F2F3F5; font-family: monospace; font-size: 12px; }
 </style>

package/dist/components/LiteActivityFeed.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type MarkdownRenderOptions } from '../rich-content.js';
 interface LiteActivityItem {
     id: string;
     user?: {
@@ -13,6 +14,11 @@ interface Props {
     activities?: LiteActivityItem[];
     action?: string;
     method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    /** Render note bodies as Markdown/allowlisted HTML. Defaults to plain text. */
+    richContent?: boolean;
+    richContentOptions?: MarkdownRenderOptions;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteActivityFeed: import("svelte").Component<Props, {}, "">;
 type LiteActivityFeed = ReturnType<typeof LiteActivityFeed>;

package/dist/components/LiteAffix.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    top?: number;
+    bottom?: number;
+    zIndex?: number;
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+  }
+
+  let { top = 16, bottom, zIndex = 10, label = 'Affixed content', class: className = '', children }: Props = $props();
+
+  // The reference applies `top` always and `bottom` when provided; dropping `top`
+  // whenever `bottom` was set made the offset silently wrong.
+  const style = $derived(
+    `top:${top}px;${bottom === undefined ? '' : `bottom:${bottom}px;`}z-index:${zIndex}`,
+  );
+</script>
+
+<div class={`lite-affix ${className}`.trim()} style={style} aria-label={label}>
+  {@render children()}
+</div>
+
+<style>
+  .lite-affix { position: sticky; }
+</style>

package/dist/components/LiteAffix.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    top?: number;
+    bottom?: number;
+    zIndex?: number;
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+    children: Snippet;
+}
+declare const LiteAffix: import("svelte").Component<Props, {}, "">;
+type LiteAffix = ReturnType<typeof LiteAffix>;
+export default LiteAffix;

package/dist/components/LiteAnchor.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  interface AnchorItem {
+    id: string;
+    label: string;
+    level?: number;
+  }
+
+  interface Props {
+    items: AnchorItem[];
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+  }
+
+  let { items, label = 'On this page', class: className = '' }: Props = $props();
+</script>
+
+<nav class="lite-anchor {className}" aria-label={label}>
+  <p class="lite-anchor__title">{label}</p>
+  <ul>
+    {#each items as item (item.id)}
+      <li style={`padding-left:${Math.max(0, (item.level ?? 1) - 1) * 12}px`}>
+        <a href={`#${item.id}`}>{item.label}</a>
+      </li>
+    {/each}
+  </ul>
+</nav>
+
+<style>
+  .lite-anchor { display: block; min-width: 0; }
+  .lite-anchor__title { margin: 0; color: #86909C; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+  .lite-anchor ul { display: block; margin: 0; padding: 0; list-style: none; }
+  .lite-anchor a { display: block; padding: 4px 8px; border-left: 2px solid transparent; color: #4E5969; font-size: 13px; text-decoration: none; }
+  .lite-anchor a:hover { border-left-color: #165DFF; background: #F7F8FA; color: #165DFF; }
+
+  .lite-anchor > * + * { margin-top: 8px; }
+  .lite-anchor li + li { margin-top: 4px; }
+</style>

package/dist/components/LiteAnchor.svelte.d.ts

@@ -0,0 +1,14 @@
+interface AnchorItem {
+    id: string;
+    label: string;
+    level?: number;
+}
+interface Props {
+    items: AnchorItem[];
+    label?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
+}
+declare const LiteAnchor: import("svelte").Component<Props, {}, "">;
+type LiteAnchor = ReturnType<typeof LiteAnchor>;
+export default LiteAnchor;

package/dist/components/LiteApprovalActionCard.svelte

@@ -6,6 +6,8 @@
     status?: 'pending' | 'approved' | 'rejected' | 'recalled';
     action?: string;
     children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
@@ -13,13 +15,14 @@
     status = 'pending',
     action = '',
     children,
+    class: className = '',
   }: Props = $props();
 </script>
 
-<div class="lite-approval-card lite-form-group">
+<div class="lite-approval-card lite-form-group {className}">
   <div class="lite-approval-header">
     <strong>{title}</strong>
-    <span class="lite-badge lite-badge-{status}">{status.toUpperCase()}</span>
+    <span class="lite-badge lite-badge-{status}">{status}</span>
   </div>
 
   {#if children}
@@ -49,8 +52,8 @@
 <style>
   .lite-approval-card {
     padding: 12px;
-    background: #f8fafc;
-    border: 1px solid #cbd5e1;
+    background: #F7F8FA;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
   }
@@ -63,7 +66,7 @@
   }
   .lite-approval-body {
     font-size: 12px;
-    color: #475569;
+    color: #4E5969;
     margin-bottom: 12px;
   }
   .lite-approval-field {

package/dist/components/LiteApprovalActionCard.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     status?: 'pending' | 'approved' | 'rejected' | 'recalled';
     action?: string;
     children?: Snippet;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteApprovalActionCard: import("svelte").Component<Props, {}, "">;
 type LiteApprovalActionCard = ReturnType<typeof LiteApprovalActionCard>;

package/dist/components/LiteAuditLog.svelte

@@ -52,15 +52,15 @@
     <tbody>
       {#each logs as log, _i (_i)}
         <tr>
-          <td style="font-family:monospace;font-size:12px;color:#64748b;">{formatDate(log.createdAt)}</td>
+          <td style="font-family:monospace;font-size:12px;color:#4E5969;">{formatDate(log.createdAt)}</td>
           <td>{log.userName ?? '—'}</td>
           <td><span class="lite-badge {actionClass(log.action)}">{log.action}</span></td>
-          <td style="color:#64748b;">{log.resource ?? '—'}</td>
-          <td style="font-family:monospace;font-size:12px;color:#64748b;">{log.ipAddress ?? '—'}</td>
+          <td style="color:#4E5969;">{log.resource ?? '—'}</td>
+          <td style="font-family:monospace;font-size:12px;color:#4E5969;">{log.ipAddress ?? '—'}</td>
         </tr>
       {:else}
         <tr>
-          <td colspan="5" style="text-align:center;padding:24px;color:#94a3b8;">No audit logs found.</td>
+          <td colspan="5" style="text-align:center;padding:24px;color:#86909C;">No audit logs found.</td>
         </tr>
       {/each}
     </tbody>
@@ -72,7 +72,7 @@
       {#if page > 1}
         <a href={`${basePath}page={page - 1}`} class="lite-btn lite-btn-sm">&laquo; Prev</a>
       {/if}
-      <span style="padding:0 12px;font-size:14px;color:#64748b;">Page {page} / {totalPages} ({total} total)</span>
+      <span style="padding:0 12px;font-size:14px;color:#4E5969;">Page {page} / {totalPages} ({total} total)</span>
       {#if page < totalPages}
         <a href={`${basePath}page={page + 1}`} class="lite-btn lite-btn-sm">Next &raquo;</a>
       {/if}
@@ -88,8 +88,8 @@
     font-size: 12px;
     font-weight: 600;
   }
-  .lite-badge-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
-  .lite-badge-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
-  .lite-badge-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
-  .lite-badge-default { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
+  .lite-badge-danger { background: #FFECE8; color: #dc2626; border: 1px solid #FDCDC5; }
+  .lite-badge-success { background: #f0fdf4; color: #009A29; border: 1px solid #bbf7d0; }
+  .lite-badge-warning { background: #FFF7E8; color: #D25F00; border: 1px solid #FFE4BA; }
+  .lite-badge-default { background: #F2F3F5; color: #4E5969; border: 1px solid #E5E6EB; }
 </style>

package/dist/components/LiteAutoComplete.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  interface Props {
+    name: string;
+    options: string[];
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    listId?: string;
+  }
+
+  let {
+    name,
+    options,
+    value = '',
+    label,
+    placeholder = 'Type or choose a suggestion',
+    required = false,
+    disabled = false,
+    listId = `${name}-options`,
+  }: Props = $props();
+</script>
+
+<label class="lite-form-group">
+  {#if label}<span>{label}</span>{/if}
+  <input
+    class="lite-input"
+    type="text"
+    {name}
+    {value}
+    {placeholder}
+    {required}
+    {disabled}
+    list={listId}
+    autocomplete="off"
+  />
+  <datalist id={listId}>
+    {#each options as option (option)}<option value={option}></option>{/each}
+  </datalist>
+</label>

package/dist/components/LiteAutoComplete.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    name: string;
+    options: string[];
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    listId?: string;
+}
+declare const LiteAutoComplete: import("svelte").Component<Props, {}, "">;
+type LiteAutoComplete = ReturnType<typeof LiteAutoComplete>;
+export default LiteAutoComplete;

package/dist/components/LiteBackTop.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    href?: string;
+    label?: string;
+    thresholdText?: string;
+  }
+
+  let { href = '#top', label = 'Back to top', thresholdText = '↑ Top' }: Props = $props();
+</script>
+
+<a class="lite-back-top" {href} aria-label={label}>{thresholdText}</a>
+
+<style>
+  .lite-back-top { position: fixed; right: 24px; bottom: 80px; display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #E5E6EB; border-radius: 999px; background: #fff; color: #1D2129; box-shadow: 0 6px 20px rgba(29, 33, 41, 0.16); font-size: 12px; text-decoration: none; }
+  .lite-back-top:hover { color: #165DFF; text-decoration: none; }
+</style>

package/dist/components/LiteBackTop.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    href?: string;
+    label?: string;
+    thresholdText?: string;
+}
+declare const LiteBackTop: import("svelte").Component<Props, {}, "">;
+type LiteBackTop = ReturnType<typeof LiteBackTop>;
+export default LiteBackTop;

package/dist/components/LiteBreadcrumbs.svelte

@@ -13,15 +13,18 @@
     items: BreadcrumbItem[];
     /** Separator character between items */
     separator?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
   }
 
   let {
     items,
     separator = '/',
+    class: className = '',
   }: Props = $props();
 </script>
 
-<nav class="lite-breadcrumbs" aria-label="Breadcrumb">
+<nav class="lite-breadcrumbs {className}" aria-label="Breadcrumb">
   <ol>
     {#each items as item, i (i)}
       <li>

package/dist/components/LiteBreadcrumbs.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     items: BreadcrumbItem[];
     /** Separator character between items */
     separator?: string;
+    /** Caller class merged with the built-in class list. */
+    class?: string;
 }
 declare const LiteBreadcrumbs: import("svelte").Component<Props, {}, "">;
 type LiteBreadcrumbs = ReturnType<typeof LiteBreadcrumbs>;

package/dist/components/LiteCalendar.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  interface CalendarEvent {
+    id: string;
+    date: string;
+    label: string;
+    href?: string;
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+  }
+
+  interface Props {
+    value?: string;
+    events?: CalendarEvent[];
+    locale?: string;
+    weekStartsOn?: 0 | 1;
+    min?: string;
+    max?: string;
+    title?: string;
+    hrefFor?: (iso: string) => string;
+  }
+
+  let {
+    value = '',
+    events = [],
+    locale,
+    weekStartsOn = 0,
+    min,
+    max,
+    title,
+    hrefFor,
+  }: Props = $props();
+
+  const initial = $derived(value ? new Date(`${value}T12:00:00`) : new Date());
+  const year = $derived(initial.getFullYear());
+  const month = $derived(initial.getMonth());
+  const heading = $derived(title ?? new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(new Date(year, month, 1)));
+  const weekdays = $derived.by(() => {
+    const format = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+    return Array.from({ length: 7 }, (_, index) => format.format(new Date(2024, 0, 7 + ((index + weekStartsOn) % 7))));
+  });
+  const days = $derived.by(() => {
+    const first = new Date(year, month, 1);
+    const offset = (first.getDay() - weekStartsOn + 7) % 7;
+    return Array.from({ length: 42 }, (_, index) => {
+      const date = new Date(year, month, 1 - offset + index);
+      const iso = toIso(date);
+      return {
+        iso,
+        day: date.getDate(),
+        outside: date.getMonth() !== month,
+        selected: iso === value,
+        events: events.filter((event) => event.date === iso),
+        disabled: Boolean(min && iso < min) || Boolean(max && iso > max),
+      };
+    });
+  });
+  const upcoming = $derived(events.filter((event) => !value || event.date >= value).slice(0, 8));
+
+  function toIso(date: Date): string {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+  }
+</script>
+
+<section class="lite-calendar lite-card" aria-label={heading}>
+  <header>
+    <h2>{heading}</h2>
+    {#if value}<span>{value}</span>{/if}
+  </header>
+  <table>
+    <thead>
+      <tr>{#each weekdays as weekday (weekday)}<th scope="col">{weekday}</th>{/each}</tr>
+    </thead>
+    <tbody>
+      {#each Array.from({ length: 6 }, (_, week) => week) as week (week)}
+        <tr>
+          {#each days.slice(week * 7, week * 7 + 7) as day (day.iso)}
+            <td data-outside={day.outside || undefined} data-selected={day.selected || undefined} data-disabled={day.disabled || undefined}>
+              {#if day.disabled}
+                <span>{day.day}</span>
+              {:else if hrefFor}
+                <a href={hrefFor(day.iso)} aria-current={day.selected ? 'date' : undefined}>{day.day}</a>
+              {:else}
+                <span aria-current={day.selected ? 'date' : undefined}>{day.day}</span>
+              {/if}
+              {#if day.events.length > 0}<span class="lite-calendar__dot" title={`${day.events.length} event(s)`}></span>{/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+  {#if upcoming.length > 0}
+    <ul class="lite-calendar__events">
+      {#each upcoming as event (event.id)}
+        <li data-tone={event.tone ?? 'neutral'}>
+          <time>{event.date}</time>
+          {#if event.href}<a href={event.href}>{event.label}</a>{:else}<span>{event.label}</span>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+<style>
+  .lite-calendar { padding: 0; overflow: hidden; }
+  .lite-calendar header { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #E5E6EB; }
+  .lite-calendar h2 { margin: 0; color: #1D2129; font-size: 14px; }
+  .lite-calendar header span { color: #86909C; font-size: 12px; }
+  .lite-calendar table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+  .lite-calendar th { padding: 8px 4px; color: #86909C; font-size: 11px; font-weight: 600; text-align: center; }
+  .lite-calendar td { position: relative; height: 40px; padding: 4px; border: 1px solid #F2F3F5; color: #1D2129; font-size: 12px; text-align: center; }
+  .lite-calendar td a, .lite-calendar td > span:first-child { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: inherit; text-decoration: none; }
+  .lite-calendar td a:hover { background: #F7F8FA; color: #165DFF; }
+  .lite-calendar td[data-selected] a, .lite-calendar td[data-selected] > span:first-child { background: #165DFF; color: #fff; }
+  .lite-calendar td[data-outside] { color: #C9CDD4; }
+  .lite-calendar td[data-disabled] { color: #E5E6EB; }
+  .lite-calendar__dot { position: absolute; right: 50%; bottom: 3px; width: 4px; height: 4px; margin-right: -2px; border-radius: 999px; background: #165DFF; }
+  .lite-calendar__events { margin: 0; padding: 8px 16px 12px; border-top: 1px solid #E5E6EB; list-style: none; }
+  .lite-calendar__events li { display: flex; padding: 4px 0; color: #4E5969; font-size: 12px; }
+  .lite-calendar__events time { color: #86909C; font-variant-numeric: tabular-nums; }
+  .lite-calendar__events a { color: #165DFF; }
+
+  .lite-calendar header > * + * { margin-left: 12px; }
+  .lite-calendar__events li > * + * { margin-left: 8px; }
+</style>