@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/preview/cards/pie-chart-card.ts

@@ -0,0 +1,84 @@
+/**
+ * The preview block's browser share card: visitors by browser as a donut
+ * with the total in its centre and a legend, then the leading browser's
+ * share as a progress bar. A fragment helper, rendered by the server, with
+ * the kit's chart (plain SVG; `<ui-chart>` adds the tooltip). Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/pie-chart-card.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../../components/chart.ts';
+import { progressClass } from '../../../components/progress.ts';
+
+const pieChartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+];
+
+const pieChartConfig: ChartConfig = {
+  visitors: { label: 'Visitors' },
+  chrome: { label: 'Chrome', color: 'var(--chart-1)' },
+  safari: { label: 'Safari', color: 'var(--chart-2)' },
+  firefox: { label: 'Firefox', color: 'var(--chart-3)' },
+  edge: { label: 'Edge', color: 'var(--chart-4)' },
+};
+
+export function pieChartCard() {
+  const totalVisitors = pieChartData.reduce((sum, item) => sum + item.visitors, 0);
+  const topBrowser = pieChartData.reduce((max, item) => (item.visitors > max.visitors ? item : max));
+  const topBrowserShare = Math.round((topBrowser.visitors / totalVisitors) * 100);
+  const topBrowserLabel = pieChartConfig[topBrowser.browser]?.label ?? 'Top';
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Browser Share</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2026</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <span data-slot="badge" data-variant="outline" class=${badgeClass({ variant: 'outline' })}>${topBrowserLabel}</span>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'pt-0')}>
+        ${pieChart({
+          config: pieChartConfig,
+          data: pieChartData,
+          // The legend is wider than the donut, as Recharts' HTML legend is.
+          class: 'mx-auto aspect-square max-h-[190px] [&_.ui-chart-legend-wrapper]:overflow-visible [&_.ui-chart-surface]:overflow-visible',
+          title: 'Visitors by browser',
+          tooltip: { cursor: false, hideLabel: true },
+          legend: { nameKey: 'browser', class: 'translate-y-2' },
+          pies: [{
+            dataKey: 'visitors',
+            nameKey: 'browser',
+            innerRadius: 50,
+            strokeWidth: 5,
+            center: ({ cx, cy }) => svg`
+              <text x=${cx} y=${cy} text-anchor="middle" dominant-baseline="middle">
+                <tspan x=${cx} y=${cy - 16} class="fill-foreground text-2xl font-bold">${totalVisitors.toLocaleString('en-US')}</tspan>
+                <tspan x=${cx} y=${cy + 4} class="fill-muted-foreground text-xs">Visitors</tspan>
+              </text>`,
+          }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col items-stretch gap-2')}>
+        <div class="flex items-center text-xs">
+          <span class="font-medium">${topBrowserLabel}</span>
+          <span class="ml-auto text-muted-foreground tabular-nums">${topBrowserShare}%</span>
+        </div>
+        <progress data-slot="progress" value=${topBrowserShare} max="100" aria-label=${`${topBrowserLabel} share`} class=${cn(progressClass(), '[&::-moz-progress-bar]:bg-chart-3 [&::-webkit-progress-value]:bg-chart-3')}></progress>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/report-bug.ts

@@ -0,0 +1,71 @@
+/**
+ * The preview block's bug report card: a title, severity and component
+ * pickers, and the steps to reproduce. A fragment helper, rendered by the
+ * server, with the kit's `<ui-select>` around native selects. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/report-bug.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${reportBug}>`) before you ship it.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+import { selectTriggerClass } from '../../../components/select.ts';
+import { textareaClass } from '../../../components/textarea.ts';
+
+const select = (id: string, name: string, label: string, options: Array<[string, string]>, selected: string) => html`
+  <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+    <label data-slot="field-label" for=${id} class=${fieldLabelClass()}>${label}</label>
+    <ui-select>
+      <select id=${id} name=${name} class=${cn(selectTriggerClass(), 'w-full')}>
+        ${options.map(([value, text]) => html`<option value=${value} ?selected=${value === selected}>${text}</option>`)}
+      </select>
+    </ui-select>
+  </div>
+`;
+
+export function reportBug() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Report Bug</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Help us fix issues faster.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <form id="report-bug-form">
+          <div data-slot="field-group" class=${fieldGroupClass()}>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="bug-title" class=${fieldLabelClass()}>Title</label>
+              <input data-slot="input" id="bug-title" name="title" placeholder="Brief description of the issue" class=${inputClass()}>
+            </div>
+            <div class="grid grid-cols-2 gap-3">
+              ${select('bug-severity', 'severity', 'Severity', [['critical', 'Critical'], ['high', 'High'], ['medium', 'Medium'], ['low', 'Low']], 'medium')}
+              ${select('bug-component', 'component', 'Component', [['dashboard', 'Dashboard'], ['auth', 'Auth'], ['api', 'API'], ['billing', 'Billing']], 'dashboard')}
+            </div>
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for="bug-steps" class=${fieldLabelClass()}>Steps to reproduce</label>
+              <textarea data-slot="textarea" id="bug-steps" name="steps" placeholder=${'1. Go to\n2. Click on\n3. Observe...'} class=${cn(textareaClass(), 'min-h-24 resize-none')}></textarea>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <div role="group" data-slot="field" data-orientation="horizontal" class=${cn(fieldClass({ orientation: 'horizontal' }), 'justify-end style-sera:justify-center')}>
+          <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${cn(buttonClass({ variant: 'outline' }), 'style-sera:flex-1')}>Attach File</button>
+          <button type="submit" form="report-bug-form" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'style-sera:flex-1')}>Submit Bug</button>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/shipping-address.ts

@@ -0,0 +1,79 @@
+/**
+ * The preview block's shipping address card: street, apartment, city, state,
+ * ZIP and country fields, and a save-as-default checkbox. A fragment helper,
+ * rendered by the server, with the kit's `<ui-select>` around native selects.
+ * Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/shipping-address.ts`. Ported from shadcn/ui's preview
+ * block.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${saveAddress}>`) before you ship it.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { checkboxClass } from '../../../components/checkbox.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+import { selectTriggerClass } from '../../../components/select.ts';
+
+const input = (id: string, name: string, label: string, placeholder: string) => html`
+  <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+    <label data-slot="field-label" for=${id} class=${fieldLabelClass()}>${label}</label>
+    <input data-slot="input" id=${id} name=${name} placeholder=${placeholder} class=${inputClass()}>
+  </div>
+`;
+
+const select = (id: string, name: string, label: string, options: Array<[string, string]>, selected: string) => html`
+  <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+    <label data-slot="field-label" for=${id} class=${fieldLabelClass()}>${label}</label>
+    <ui-select>
+      <select id=${id} name=${name} class=${cn(selectTriggerClass(), 'w-full')}>
+        ${options.map(([value, text]) => html`<option value=${value} ?selected=${value === selected}>${text}</option>`)}
+      </select>
+    </ui-select>
+  </div>
+`;
+
+export function shippingAddress() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Shipping Address</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Where should we deliver?</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <form id="shipping-address-form">
+          <div data-slot="field-group" class=${fieldGroupClass()}>
+            ${input('shipping-street', 'street', 'Street address', '123 Main Street')}
+            ${input('shipping-apt', 'apartment', 'Apt / Suite', 'Apt 4B')}
+            <div data-slot="field-group" class=${cn(fieldGroupClass(), 'grid grid-cols-2')}>
+              ${input('shipping-city', 'city', 'City', 'San Francisco')}
+              ${select('shipping-state', 'state', 'State', [['CA', 'California'], ['NY', 'New York'], ['TX', 'Texas']], 'CA')}
+            </div>
+            <div data-slot="field-group" class=${cn(fieldGroupClass(), 'grid grid-cols-2')}>
+              ${input('shipping-zip', 'zip', 'ZIP Code', '94102')}
+              ${select('shipping-country', 'country', 'Country', [['US', 'United States'], ['CA', 'Canada'], ['UK', 'United Kingdom']], 'US')}
+            </div>
+            <div role="group" data-slot="field" data-orientation="horizontal" class=${fieldClass({ orientation: 'horizontal' })}>
+              <input type="checkbox" id="shipping-save" name="saveAsDefault" checked data-slot="checkbox" class=${checkboxClass()}>
+              <label data-slot="field-label" for="shipping-save" class=${cn(fieldLabelClass(), 'font-normal')}>Save as default address</label>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="reset" form="shipping-address-form" data-slot="button" data-variant="outline" data-size="sm" class=${buttonClass({ variant: 'outline', size: 'sm' })}>Cancel</button>
+        <button type="submit" form="shipping-address-form" data-slot="button" data-variant="default" data-size="sm" class=${cn(buttonClass({ size: 'sm' }), 'ml-auto')}>Save Address</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/shortcuts.ts

@@ -0,0 +1,57 @@
+/**
+ * The preview block's shortcuts card: a list of commands and their keys. A
+ * fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/shortcuts.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+import {
+  itemActionsClass,
+  itemClass,
+  itemGroupClass,
+  itemHeaderClass,
+  itemSeparatorClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { kbdClass } from '../../../components/kbd.ts';
+
+const SHORTCUTS = [
+  { label: 'Search', keys: ['⌘', 'K'], spoken: 'Command K' },
+  { label: 'Quick Actions', keys: ['⌘', 'J'], spoken: 'Command J' },
+  { label: 'New File', keys: ['⌘', 'N'], spoken: 'Command N' },
+  { label: 'Save', keys: ['⌘', 'S'], spoken: 'Command S' },
+  { label: 'Toggle Sidebar', keys: ['⌘', 'B'], spoken: 'Command B' },
+];
+
+export function shortcuts() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div class="flex flex-col gap-3">
+          <div class="text-sm font-medium">Shortcuts</div>
+          <div role="list" data-slot="item-group" data-size="xs" class=${cn(itemGroupClass(), 'gap-2 text-muted-foreground')}>
+            ${shortcutRows()}
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function shortcutRows() {
+  return SHORTCUTS.map(({ label, keys, spoken }, i) => html`
+    ${i > 0 ? html`<div role="separator" aria-orientation="horizontal" data-slot="item-separator" data-orientation="horizontal" class=${itemSeparatorClass()}></div>` : ''}
+    <div role="listitem" data-slot="item" data-variant="default" data-size="xs" class=${cn(itemClass({ variant: 'default', size: 'xs' }), 'border-0 px-0 py-0')}>
+      <div data-slot="item-header" class=${itemHeaderClass()}>
+        <div data-slot="item-title" class=${cn(itemTitleClass(), 'font-normal')}>${label}</div>
+        <div data-slot="item-actions" class=${itemActionsClass()}>
+          <div class="flex gap-1" role="img" aria-label=${spoken}>
+            ${keys.map((key) => html`<kbd data-slot="kbd" class=${kbdClass()}>${key}</kbd>`)}
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+}

package/packages/registry/blocks/preview/cards/skeleton-loading.ts

@@ -0,0 +1,37 @@
+/**
+ * The preview block's skeleton card: an avatar, text lines and two buttons as
+ * loading placeholders. A fragment helper, rendered by the server. Installed
+ * by `npx @webjsdev/ui add preview` at `components/preview/skeleton-loading.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+import { skeletonClass } from '../../../components/skeleton.ts';
+
+const bone = (cls: string) => html`<div data-slot="skeleton" aria-hidden="true" class=${cn(skeletonClass(), cls)}></div>`;
+
+export function skeletonLoading() {
+  return html`
+    <div data-slot="card" data-size="default" aria-busy="true" class=${cardClass()}>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div class="flex items-center gap-3">
+          ${bone('size-10 rounded-full')}
+          <div class="flex flex-1 flex-col gap-2">
+            ${bone('h-4 w-3/4')}
+            ${bone('h-3 w-1/2')}
+          </div>
+        </div>
+        <div class="flex flex-col gap-2">
+          ${bone('h-3 w-full')}
+          ${bone('h-3 w-full')}
+          ${bone('h-3 w-4/5')}
+        </div>
+        <div class="flex gap-2">
+          ${bone('h-8 w-20')}
+          ${bone('h-8 w-20')}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/sleep-report.ts

@@ -0,0 +1,85 @@
+/**
+ * The preview block's sleep report card: last night's sleep stages as a
+ * stacked bar chart, the time in each stage, and a score. A fragment helper;
+ * the chart is the kit's `barChart`, drawn by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/sleep-report.ts`.
+ * Ported from shadcn/ui's preview block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { barChart, type ChartConfig } from '../../../components/chart.ts';
+
+const sleepChartData = [
+  { hour: '10pm', deep: 0, light: 30, rem: 0 },
+  { hour: '11pm', deep: 20, light: 10, rem: 0 },
+  { hour: '12am', deep: 40, light: 0, rem: 10 },
+  { hour: '1am', deep: 30, light: 5, rem: 15 },
+  { hour: '2am', deep: 10, light: 20, rem: 30 },
+  { hour: '3am', deep: 25, light: 10, rem: 20 },
+  { hour: '4am', deep: 15, light: 25, rem: 10 },
+  { hour: '5am', deep: 5, light: 35, rem: 15 },
+  { hour: '6am', deep: 0, light: 20, rem: 25 },
+];
+
+const sleepChartConfig: ChartConfig = {
+  deep: { label: 'Deep', color: 'var(--chart-1)' },
+  light: { label: 'Light', color: 'var(--chart-2)' },
+  rem: { label: 'REM', color: 'var(--chart-3)' },
+};
+
+const STATS = [
+  { label: 'Deep', value: '2h 10m' },
+  { label: 'Light', value: '3h 48m' },
+  { label: 'REM', value: '1h 26m' },
+  { label: 'Score', value: '84' },
+];
+
+export function sleepReport() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Sleep Report</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Last night · 7h 24m</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-3')}>
+        ${barChart({
+          config: sleepChartConfig,
+          data: sleepChartData,
+          class: 'h-32 w-full',
+          title: 'Sleep stages by hour, last night',
+          width: 330,
+          height: 128,
+          margin: { left: 0, right: 0, top: 0, bottom: 0 },
+          tooltip: false,
+          bars: [
+            { dataKey: 'deep', stackId: 'a', fill: 'var(--color-deep)', radius: 0, barSize: 16 },
+            { dataKey: 'light', stackId: 'a', fill: 'var(--color-light)', radius: 0, barSize: 16 },
+            { dataKey: 'rem', stackId: 'a', fill: 'var(--color-rem)', radius: [2, 2, 0, 0], barSize: 16 },
+          ],
+        })}
+        <div class="grid grid-cols-4 gap-2">
+          ${STATS.map((s) => html`
+            <div class="text-center">
+              <div class="text-sm font-medium tabular-nums">${s.value}</div>
+              <div class="text-xs text-muted-foreground">${s.label}</div>
+            </div>
+          `)}
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <span data-slot="badge" data-variant="outline" class=${badgeClass({ variant: 'outline' })}>Good</span>
+        <button type="button" data-slot="button" data-variant="outline" data-size="sm" class=${cn(buttonClass({ variant: 'outline', size: 'sm' }), 'ml-auto')}>Details</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/style-overview.ts

@@ -0,0 +1,64 @@
+/**
+ * The preview block's style overview card: the style and font names over a
+ * short specimen, and a swatch for each of the theme's colour tokens. A
+ * fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/style-overview.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * shadcn reads the style and font names from the configurator's search
+ * params. Pass them in (`styleOverview({ style, font })`) from the page that
+ * knows them; the defaults name the kit's default style and the site font.
+ * `font` is the heading font's name, or the body font's when the heading
+ * inherits it. Each name sits in a `data-design-system-text` span, so a host
+ * that restyles the card live (the /ui/create configurator) rewrites the
+ * names in place.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+
+const TOKENS = [
+  '--background',
+  '--foreground',
+  '--primary',
+  '--secondary',
+  '--muted',
+  '--accent',
+  '--border',
+  '--chart-1',
+  '--chart-2',
+  '--chart-3',
+  '--chart-4',
+  '--chart-5',
+];
+
+export function styleOverview(opts: { style?: string; font?: string } = {}) {
+  const style = opts.style ?? 'New York';
+  const font = opts.font ?? 'Geist';
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-6 style-lyra:gap-4 style-mira:gap-4')}>
+        <div class="flex flex-col gap-1">
+          <div class="font-heading text-2xl font-medium style-lyra:text-lg style-mira:text-lg style-sera:text-lg style-sera:font-semibold style-sera:tracking-wide style-sera:uppercase">
+            <span data-design-system-text="style">${style}</span> - <span data-design-system-text="font-heading">${font}</span>
+          </div>
+          <div class="line-clamp-2 text-base text-muted-foreground style-lyra:text-sm style-mira:text-sm style-sera:text-sm style-sera:leading-relaxed">
+            Designers love packing quirky glyphs into test phrases. This is a
+            preview of the typography styles.
+          </div>
+        </div>
+        <div class="grid grid-cols-6 gap-3">
+          ${TOKENS.map((token) => html`
+            <div class="flex flex-col flex-wrap items-center gap-2">
+              <div
+                class="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten style-sera:rounded-none style-sera:after:rounded-none"
+                style=${`--color: var(${token})`}
+              ></div>
+              <div class="hidden max-w-14 truncate font-mono text-[0.60rem] md:block style-lyra:max-w-10 style-mira:max-w-10">${token}</div>
+            </div>
+          `)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/typography-specimen.ts

@@ -0,0 +1,107 @@
+/**
+ * The preview block's typography specimen card: the heading and body font
+ * names over a heading and two paragraphs, and a "Share Feedback" button
+ * that opens a feedback form in a dialog. A fragment helper, rendered by the
+ * server, with the kit's `<ui-dialog>` and `<ui-select>`. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/typography-specimen.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * shadcn reads the font names from the configurator's search params. Pass
+ * them in (`typographySpecimen({ heading, body })`) from the page that knows
+ * them; `heading` is "Inherit" when the heading font is the body font. Each
+ * name sits in a `data-design-system-text` span, so a host that restyles the
+ * card live (the /ui/create configurator) rewrites the names in place, the
+ * heading's as "Inherit" when it is the body font (`font-heading-label`).
+ *
+ * The dialog's `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${sendFeedback}>`) before you ship it.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass, cardFooterClass } from '../../../components/card.ts';
+import {
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogTitleClass,
+} from '../../../components/dialog.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+import { selectTriggerClass } from '../../../components/select.ts';
+import { textareaClass } from '../../../components/textarea.ts';
+
+export function typographySpecimen(opts: { heading?: string; body?: string } = {}) {
+  const heading = opts.heading ?? 'Inherit';
+  const body = opts.body ?? 'Geist';
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-2')}>
+        <div class="text-xs font-medium text-muted-foreground uppercase"><span data-design-system-text="font-heading-label">${heading}</span> - <span data-design-system-text="font">${body}</span></div>
+        <p class="font-heading text-2xl font-medium style-sera:text-lg style-sera:font-semibold style-sera:tracking-wider style-sera:uppercase">
+          Designing with rhythm and hierarchy.
+        </p>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          A strong body style keeps long-form content readable and balances the
+          visual weight of headings.
+        </p>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          Thoughtful spacing and cadence help paragraphs scan quickly without
+          feeling dense.
+        </p>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <ui-dialog class="w-full">
+          <ui-dialog-trigger>
+            <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${cn(buttonClass({ variant: 'outline' }), 'w-full')}>
+              Share Feedback
+            </button>
+          </ui-dialog-trigger>
+          <ui-dialog-content>
+            <div data-slot="dialog-header" class=${dialogHeaderClass()}>
+              <h2 data-slot="dialog-title" class=${dialogTitleClass()}>Share Feedback</h2>
+              <p data-slot="dialog-description" class=${dialogDescriptionClass()}>
+                Let us know how we can improve your experience.
+              </p>
+            </div>
+            <form id="typography-feedback-form">
+              <div data-slot="field-group" class=${fieldGroupClass()}>
+                <div class="grid grid-cols-2 gap-3">
+                  <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+                    <label data-slot="field-label" for="typography-feedback-name" class=${fieldLabelClass()}>Name</label>
+                    <input data-slot="input" id="typography-feedback-name" name="name" placeholder="Your name" class=${inputClass()}>
+                  </div>
+                  <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+                    <label data-slot="field-label" for="typography-feedback-email" class=${fieldLabelClass()}>Email</label>
+                    <input data-slot="input" id="typography-feedback-email" name="email" type="email" placeholder="you@example.com" class=${inputClass()}>
+                  </div>
+                </div>
+                <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+                  <label data-slot="field-label" for="typography-feedback-category" class=${fieldLabelClass()}>Category</label>
+                  <ui-select>
+                    <select id="typography-feedback-category" name="category" class=${cn(selectTriggerClass(), 'w-full')}>
+                      <option value="general" selected>General</option>
+                      <option value="bug">Bug Report</option>
+                      <option value="feature">Feature Request</option>
+                      <option value="improvement">Improvement</option>
+                    </select>
+                  </ui-select>
+                </div>
+                <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+                  <label data-slot="field-label" for="typography-feedback-message" class=${fieldLabelClass()}>Message</label>
+                  <textarea data-slot="textarea" id="typography-feedback-message" name="message" placeholder="Tell us what's on your mind..." class=${cn(textareaClass(), 'min-h-24 resize-none')}></textarea>
+                </div>
+              </div>
+            </form>
+            <div data-slot="dialog-footer" class=${dialogFooterClass()}>
+              <ui-dialog-close>
+                <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>Cancel</button>
+              </ui-dialog-close>
+              <button type="submit" form="typography-feedback-form" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>Submit</button>
+            </div>
+          </ui-dialog-content>
+        </ui-dialog>
+      </div>
+    </div>
+  `;
+}