@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/blocks/preview-02/cards/sidebar-nav.ts

@@ -0,0 +1,88 @@
+/**
+ * The preview-02 sidebar navigation pair: two cards, each holding a
+ * non-collapsible sidebar with two menu groups. A fragment helper; each
+ * sidebar is the kit's `<ui-sidebar collapsible="none">`, which needs no
+ * provider and keeps no state. Installed at
+ * `components/preview-02/sidebar-nav.ts`. Ported from shadcn/ui's preview-02.
+ *
+ * shadcn wraps each one in a SidebarProvider set to `min-h-0`. The kit's
+ * provider is the full-height app shell, and a `collapsible="none"` sidebar
+ * reads nothing from it, so the cards leave it out. Make each entry a link to
+ * a real route, marked `data-active="true"` and `aria-current="page"` on the
+ * current one.
+ */
+import { html, nothing } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { cardClass } from '../../../components/card.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarSeparatorClass,
+} from '../../../components/sidebar.ts';
+import '../../../components/sidebar.ts';
+import { ActivityIcon, ArrowLeftRightIcon, BellIcon, BookOpenIcon, Building2Icon, CircleHelpIcon, CreditCardIcon, FileBarChartIcon, FileTextIcon, LayoutDashboardIcon, MessageSquareIcon, PaintbrushIcon, PieChartIcon, ShieldIcon, TargetIcon, TrendingUpIcon, UserIcon, WalletIcon } from '../../../lib/icons.ts';
+
+type Entry = [icon: (cls?: string) => TemplateResult, label: string, active?: boolean];
+
+function group(label: string, cls: string, entries: Entry[]) {
+  return html`<div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), cls)}>
+    <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>${label}</div>
+    <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${entries.map(([icon, text, active]) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${active ? 'true' : 'false'} aria-current=${active ? 'page' : nothing} class=${sidebarMenuButtonClass()}>${icon()}${text}</a>
+          </li>`)}
+      </ul>
+    </div>
+  </div>`;
+}
+
+function navCard(label: string, top: [string, Entry[]], bottom: [string, Entry[]]) {
+  return html`<div data-slot="card" data-size="default" class=${cn(cardClass(), 'overflow-hidden py-0')}>
+    <ui-sidebar collapsible="none" class="w-full bg-transparent">
+      <nav aria-label=${label} data-slot="sidebar-content" data-sidebar="content" class=${cn(sidebarContentClass(), 'gap-0')}>
+        ${group(top[0], 'pb-1', top[1])}
+        <div role="none" data-slot="sidebar-separator" data-sidebar="separator" data-orientation="horizontal" class=${cn(sidebarSeparatorClass(), 'w-auto!')}></div>
+        ${group(bottom[0], 'pt-1', bottom[1])}
+      </nav>
+    </ui-sidebar>
+  </div>`;
+}
+
+export function sidebarNav() {
+  return html`
+    <div class="grid grid-cols-2 items-start gap-6">
+      ${navCard('Overview and planning', ['Overview', [
+        [LayoutDashboardIcon, 'Dashboard', true],
+        [ArrowLeftRightIcon, 'Transactions'],
+        [TrendingUpIcon, 'Investments'],
+        [Building2Icon, 'Accounts'],
+        [PieChartIcon, 'Spending'],
+      ]], ['Planning', [
+        [TargetIcon, 'Goals'],
+        [WalletIcon, 'Budget'],
+        [FileBarChartIcon, 'Reports'],
+        [FileTextIcon, 'Documents'],
+      ]])}
+      ${navCard('Account and support', ['Account', [
+        [UserIcon, 'Profile'],
+        [CreditCardIcon, 'Billing', true],
+        [BellIcon, 'Notifications'],
+        [ShieldIcon, 'Security'],
+        [PaintbrushIcon, 'Appearance'],
+      ]], ['Support', [
+        [CircleHelpIcon, 'Help Center'],
+        [MessageSquareIcon, 'Contact Us'],
+        [BookOpenIcon, 'Documentation'],
+        [ActivityIcon, 'Status'],
+      ]])}
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/social-links.ts

@@ -0,0 +1,57 @@
+/**
+ * The preview-02 Social Links card: an artist's profile links, each an input
+ * with its service's icon. A fragment helper. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/social-links.ts`.
+ * Ported from shadcn/ui's preview-02.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${saveSocialLinks}>`) before you ship it.
+ */
+import { html, nothing } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { inputGroupAddonClass, inputGroupClass, inputGroupInputClass } from '../../../components/input-group.ts';
+import { cn } from '../../../lib/utils.ts';
+import { CameraIcon, CirclePlusIcon, CloudIcon, GlobeIcon } from '../../../lib/icons.ts';
+
+const LINKS: { id: string; label: string; icon: (cls?: string) => TemplateResult; value?: string; placeholder?: string }[] = [
+  { id: 'spotify-url', label: 'Spotify Artist URL', icon: CirclePlusIcon, value: 'spotify.com/artist/3j...2k' },
+  { id: 'instagram-handle', label: 'Instagram Handle', icon: CameraIcon, value: '@julianduryea_music' },
+  { id: 'soundcloud-url', label: 'SoundCloud URL', icon: CloudIcon, placeholder: 'soundcloud.com/username' },
+  { id: 'website-url', label: 'Website', icon: GlobeIcon, placeholder: 'https://yoursite.com' },
+];
+
+export function socialLinks() {
+  return html`
+    <form data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Social Links</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="field-group" class=${fieldGroupClass()}>
+          ${LINKS.map((link) => html`
+            <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+              <label data-slot="field-label" for=${link.id} class=${fieldLabelClass()}>${link.label}</label>
+              <div data-slot="input-group" role="group" class=${inputGroupClass()}>
+                <input data-slot="input-group-control" id=${link.id} name=${link.id} value=${link.value ?? nothing} placeholder=${link.placeholder ?? nothing} class=${inputGroupInputClass()}>
+                <label data-slot="input-group-addon" data-align="inline-start" for=${link.id} class=${inputGroupAddonClass()}>${link.icon()}</label>
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'justify-end gap-2 style-sera:justify-center')}>
+        <button type="reset" data-slot="button" data-variant="secondary" data-size="default" class=${cn(buttonClass({ variant: 'secondary' }), 'style-sera:flex-1')}>Discard</button>
+        <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'style-sera:flex-1')}>Save Changes</button>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/stock-performance.ts

@@ -0,0 +1,106 @@
+/**
+ * The preview-02 Stock Performance card: a ticker picker over a six-month
+ * price chart. A fragment helper; the picker is the kit's `<ui-combobox>` and
+ * the chart its server-drawn `areaChart`. Installed by
+ * `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/stock-performance.ts`. Ported from shadcn/ui's
+ * preview-02.
+ *
+ * It renders the chart for `ticker` (VOO by default). shadcn swaps the chart
+ * in React state when another ticker is picked; in your app, put the picker
+ * in a GET form (the combobox submits its value under `name`) and render the
+ * chart for the ticker in the query string.
+ */
+import { html, svg } from '@webjsdev/core';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { areaChart, type ChartConfig } from '../../../components/chart.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import { separatorClass } from '../../../components/separator.ts';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/combobox.ts';
+
+const TICKERS = ['VOO', 'VIG', 'AAPL', 'MSFT', 'GOOGL', 'AMZN', 'TSLA'];
+
+const CHART_DATA: Record<string, { month: string; price: number }[]> = {
+  VOO: [
+    { month: 'Jan', price: 412 },
+    { month: 'Feb', price: 438 },
+    { month: 'Mar', price: 395 },
+    { month: 'Apr', price: 450 },
+    { month: 'May', price: 420 },
+    { month: 'Jun', price: 462 },
+  ],
+  AAPL: [
+    { month: 'Jan', price: 185 },
+    { month: 'Feb', price: 210 },
+    { month: 'Mar', price: 172 },
+    { month: 'Apr', price: 198 },
+    { month: 'May', price: 178 },
+    { month: 'Jun', price: 215 },
+  ],
+};
+
+const DEFAULT_DATA = [
+  { month: 'Jan', price: 100 },
+  { month: 'Feb', price: 118 },
+  { month: 'Mar', price: 95 },
+  { month: 'Apr', price: 125 },
+  { month: 'May', price: 108 },
+  { month: 'Jun', price: 130 },
+];
+
+const chartConfig = {
+  price: { label: 'Price', color: 'var(--chart-1)' },
+} satisfies ChartConfig;
+
+export function stockPerformance(opts: { ticker?: string } = {}) {
+  const ticker = opts.ticker ?? 'VOO';
+  const data = CHART_DATA[ticker] ?? DEFAULT_DATA;
+  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()}>Stock Performance</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>6-month price history.</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div data-slot="field-group" class=${fieldGroupClass()}>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <label data-slot="field-label" for="ticker-select" class=${fieldLabelClass()}>Ticker</label>
+            <ui-combobox name="ticker" value=${ticker}>
+              <ui-combobox-input input-id="ticker-select" placeholder="Search ticker..."></ui-combobox-input>
+              <ui-combobox-content>
+                <ui-combobox-empty>No tickers found.</ui-combobox-empty>
+                <ui-combobox-list>
+                  ${TICKERS.map((item) => html`<ui-combobox-item value=${item}>${item}</ui-combobox-item>`)}
+                </ui-combobox-list>
+              </ui-combobox-content>
+            </ui-combobox>
+          </div>
+        </div>
+        <div role="none" data-slot="separator" data-orientation="horizontal" class=${cn(separatorClass(), 'style-sera:hidden')}></div>
+        ${areaChart({
+          config: chartConfig,
+          data,
+          title: `${ticker} price over six months`,
+          class: 'aspect-auto h-[200px] w-full',
+          width: 330,
+          height: 200,
+          margin: { left: 0, right: 0, top: 8, bottom: 0 },
+          defs: svg`<linearGradient id="stock-performance-fill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="var(--color-price)" stop-opacity="0.3"></stop>
+            <stop offset="100%" stop-color="var(--color-price)" stop-opacity="0.05"></stop>
+          </linearGradient>`,
+          grid: { vertical: false, strokeDasharray: '3 3' },
+          tooltip: { cursor: false, hideLabel: true },
+          areas: [{ dataKey: 'price', type: 'monotone', stroke: 'var(--color-price)', strokeWidth: 2, fill: 'url(#stock-performance-fill)' }],
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/syncing-state.ts

@@ -0,0 +1,37 @@
+/**
+ * The preview-02 "Syncing your accounts" card: the kit's empty state with a
+ * spinner as its media. A fragment helper. Installed at
+ * `components/preview-02/syncing-state.ts`. Ported from shadcn/ui's preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass } from '../../../components/card.ts';
+import {
+  emptyClass,
+  emptyContentClass,
+  emptyDescriptionClass,
+  emptyHeaderClass,
+  emptyMediaClass,
+  emptyTitleClass,
+} from '../../../components/empty.ts';
+import { spinner } from '../../../components/spinner.ts';
+
+export function syncingState() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'p-0')}>
+        <div data-slot="empty" class=${cn(emptyClass(), 'p-4')}>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-icon" data-variant="icon" class=${emptyMediaClass({ variant: 'icon' })}>${spinner({ decorative: true })}</div>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>Syncing your accounts</div>
+            <p data-slot="empty-description" class=${emptyDescriptionClass()}>We're pulling in your latest transactions. This usually takes a few seconds.</p>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/transfer-funds.ts

@@ -0,0 +1,111 @@
+/**
+ * The preview-02 Transfer Funds card: an amount, the accounts to move it
+ * between, and a summary of the transfer. A fragment helper; the account
+ * pickers are the kit's `<ui-select>` around native selects. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/transfer-funds.ts`.
+ * Ported from shadcn/ui's preview-02.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${transferFunds}>`) before you ship it.
+ */
+import { html } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { fieldClass, fieldGroupClass, fieldLabelClass } from '../../../components/field.ts';
+import {
+  inputGroupAddonClass,
+  inputGroupClass,
+  inputGroupInputClass,
+  inputGroupTextClass,
+} from '../../../components/input-group.ts';
+import { itemClass, itemContentClass } from '../../../components/item.ts';
+import { selectTriggerClass } from '../../../components/select.ts';
+import { separatorClass } from '../../../components/separator.ts';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/select.ts';
+import { XIcon } from '../../../lib/icons.ts';
+
+function accountSelect(id: string, name: string, value: string, options: { value: string; label: string }[]) {
+  return html`<ui-select class="w-full">
+    <select id=${id} name=${name} class=${cn(selectTriggerClass(), 'w-full')}>
+      <optgroup>
+        ${options.map((o) => html`<option value=${o.value} ?selected=${o.value === value}>${o.label}</option>`)}
+      </optgroup>
+    </select>
+  </ui-select>`;
+}
+
+const separator = () => html`<div role="none" data-slot="separator" data-orientation="horizontal" class=${separatorClass()}></div>`;
+
+export function transferFunds() {
+  return html`
+    <form data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Transfer Funds</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Move money between your connected accounts.</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <button type="button" data-slot="button" data-variant="ghost" data-size="icon-sm" class=${cn(buttonClass({ variant: 'ghost', size: 'icon-sm' }), 'bg-muted')}>
+            ${XIcon()}
+            <span class="sr-only">Close</span>
+          </button>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="field-group" class=${fieldGroupClass()}>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <label data-slot="field-label" for="transfer-amount" class=${fieldLabelClass()}>Amount to Transfer</label>
+            <div data-slot="input-group" role="group" class=${inputGroupClass()}>
+              <input data-slot="input-group-control" id="transfer-amount" name="amount" value="1,200.00" class=${inputGroupInputClass()}>
+              <label data-slot="input-group-addon" data-align="inline-start" for="transfer-amount" class=${inputGroupAddonClass()}>
+                <span class=${inputGroupTextClass()}>$</span>
+              </label>
+            </div>
+          </div>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <label data-slot="field-label" for="from-account" class=${fieldLabelClass()}>From Account</label>
+            ${accountSelect('from-account', 'from', 'checking', [
+              { value: 'checking', label: 'Main Checking (··8402), $12,450.00' },
+              { value: 'business', label: 'Business (··7731), $8,920.00' },
+            ])}
+          </div>
+          <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+            <label data-slot="field-label" for="to-account" class=${fieldLabelClass()}>To Account</label>
+            ${accountSelect('to-account', 'to', 'savings', [
+              { value: 'savings', label: 'High Yield Savings (··1192), $42,100.00' },
+              { value: 'investment', label: 'Investment (··3349), $18,200.00' },
+            ])}
+          </div>
+          <div data-slot="item" data-variant="muted" data-size="default" class=${cn(itemClass({ variant: 'muted' }), 'flex-col items-stretch')}>
+            <div data-slot="item-content" class=${cn(itemContentClass(), 'gap-3')}>
+              <div class="flex items-center justify-between">
+                <span class="text-sm text-muted-foreground">Estimated arrival</span>
+                <span class="text-sm font-medium">Today, Apr 14</span>
+              </div>
+              ${separator()}
+              <div class="flex items-center justify-between">
+                <span class="text-sm text-muted-foreground">Transaction fee</span>
+                <span class="text-sm font-medium tabular-nums">$0.00</span>
+              </div>
+              ${separator()}
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium">Total amount</span>
+                <span class="text-sm font-semibold tabular-nums">$1,200.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="submit" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>Confirm Transfer</button>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/upcoming-payments.ts

@@ -0,0 +1,69 @@
+/**
+ * The preview-02 Upcoming Payments card: a month calendar over the payments
+ * scheduled next. A fragment helper; the calendar is the kit's
+ * `<ui-calendar>`, opened on today. Installed by
+ * `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/upcoming-payments.ts`. Ported from shadcn/ui's
+ * preview-02.
+ *
+ * The payments below are sample data. List the ones scheduled around the
+ * selected day from your own data.
+ */
+import { html } from '@webjsdev/core';
+import { badgeClass } from '../../../components/badge.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemGroupClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/calendar.ts';
+
+const PAYMENTS = [
+  { title: 'Netflix Subscription', date: 'Apr 15, 2024', amount: '$19.99' },
+  { title: 'Rent Payment', date: 'Apr 1, 2024', amount: '$2,400.00' },
+  { title: 'Auto Insurance', date: 'Apr 22, 2024', amount: '$186.00' },
+];
+
+/** Today as the calendar's value, "YYYY-MM-DD". */
+function today(): string {
+  const d = new Date();
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+export function upcomingPayments() {
+  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()}>Upcoming Payments</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Select a date to view scheduled payments.</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div data-slot="item" data-variant="outline" data-size="default" class=${cn(itemClass({ variant: 'outline' }), 'justify-center')}>
+          <ui-calendar mode="single" value=${today()} aria-label="Payment date" class="w-full [--cell-size:--spacing(8)] md:[--cell-size:--spacing(10)] style-sera:md:[--cell-size:--spacing(9)]"></ui-calendar>
+        </div>
+        <div role="list" data-slot="item-group" class=${cn(itemGroupClass(), 'w-full')}>
+          ${PAYMENTS.map((p) => html`
+            <div role="listitem" data-slot="item" data-variant="muted" data-size="default" class=${itemClass({ variant: 'muted' })}>
+              <div data-slot="item-content" class=${itemContentClass()}>
+                <div data-slot="item-title" class=${itemTitleClass()}>${p.title}</div>
+                <p data-slot="item-description" class=${itemDescriptionClass()}>${p.date}</p>
+              </div>
+              <span data-slot="badge" data-variant="secondary" class=${badgeClass({ variant: 'secondary' })}>${p.amount}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/page.ts

@@ -0,0 +1,111 @@
+/**
+ * The preview-02 block's page: thirty-odd finance, music-catalog and
+ * smart-home cards laid out in seven columns, a preview of the kit's
+ * components working together.
+ *
+ * Installed by `npx @webjsdev/ui add preview-02` at `app/preview-02/page.ts`,
+ * with each card at `components/preview-02/<card>.ts`. It is app code you
+ * own, so keep the cards you want and delete the rest. Ported from
+ * shadcn/ui's preview-02, the page its design-system configurator previews.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { accountAccess } from './cards/account-access.ts';
+import { cardOverview } from './cards/card-overview.ts';
+import { claimableBalance } from './cards/claimable-balance.ts';
+import { contributionHistory } from './cards/contribution-history.ts';
+import { coverArt } from './cards/cover-art.ts';
+import { dividendIncome } from './cards/dividend-income.ts';
+import { emptyConnectBank } from './cards/empty-connect-bank.ts';
+import { emptyDistributeTrack } from './cards/empty-distribute-track.ts';
+import { emptyExploreCatalog } from './cards/empty-explore-catalog.ts';
+import { faq } from './cards/faq.ts';
+import { frontDoor } from './cards/front-door.ts';
+import { indexInvesting } from './cards/index-investing.ts';
+import { kitchenIsland } from './cards/kitchen-island.ts';
+import { loadingCard } from './cards/loading-card.ts';
+import { newMilestone } from './cards/new-milestone.ts';
+import { notificationSettings } from './cards/notification-settings.ts';
+import { payments } from './cards/payments.ts';
+import { payoutThreshold } from './cards/payout-threshold.ts';
+import { powerUsage } from './cards/power-usage.ts';
+import { preferences } from './cards/preferences.ts';
+import { qrConnect } from './cards/qr-connect.ts';
+import { receivingMethod } from './cards/receiving-method.ts';
+import { recentTransactions } from './cards/recent-transactions.ts';
+import { releaseCatalog } from './cards/release-catalog.ts';
+import { rollerShades } from './cards/roller-shades.ts';
+import { savingsProgress } from './cards/savings-progress.ts';
+import { savingsTargets } from './cards/savings-targets.ts';
+import { sidebarNav } from './cards/sidebar-nav.ts';
+import { socialLinks } from './cards/social-links.ts';
+import { stockPerformance } from './cards/stock-performance.ts';
+import { syncingState } from './cards/syncing-state.ts';
+import { transferFunds } from './cards/transfer-funds.ts';
+import { upcomingPayments } from './cards/upcoming-payments.ts';
+
+export const metadata: Metadata = { title: 'Preview' };
+
+const COLUMN = 'flex flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]';
+
+export default function Preview02Page() {
+  return html`
+    <div class="overflow-x-auto overflow-y-hidden bg-muted contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)] dark:bg-background style-lyra:md:[--gap:--spacing(6)] style-mira:md:[--gap:--spacing(6)]">
+      <div class="flex w-full min-w-max justify-center">
+        <div data-slot="capture-target" class="grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background style-lyra:md:w-[2600px] style-mira:md:w-[2600px] *:[div]:gap-(--gap)">
+          <div class=${COLUMN}>
+            ${contributionHistory()}
+            ${emptyDistributeTrack()}
+            ${qrConnect()}
+            ${dividendIncome()}
+            ${indexInvesting()}
+            ${syncingState()}
+          </div>
+          <div class=${COLUMN}>
+            ${payoutThreshold()}
+            ${claimableBalance()}
+            ${preferences()}
+            ${savingsProgress()}
+            ${kitchenIsland()}
+          </div>
+          <div class="col-span-2 flex flex-col p-1 [contain-intrinsic-size:760px_1200px] [content-visibility:auto]">
+            ${savingsTargets()}
+            ${recentTransactions()}
+            <div class="grid grid-cols-2 items-start gap-(--gap)">
+              <div class="flex flex-col gap-(--gap)">
+                ${sidebarNav()}
+                ${faq()}
+              </div>
+              <div class="flex flex-col gap-(--gap)">
+                ${payments()}
+                ${frontDoor()}
+              </div>
+            </div>
+            ${releaseCatalog()}
+          </div>
+          <div class=${COLUMN}>
+            ${accountAccess()}
+            ${cardOverview()}
+            ${transferFunds()}
+            ${coverArt()}
+            ${loadingCard()}
+          </div>
+          <div class=${COLUMN}>
+            ${receivingMethod()}
+            ${powerUsage()}
+            ${emptyConnectBank()}
+            ${upcomingPayments()}
+            ${rollerShades()}
+          </div>
+          <div class=${COLUMN}>
+            ${stockPerformance()}
+            ${emptyExploreCatalog()}
+            ${newMilestone()}
+            ${socialLinks()}
+            ${notificationSettings()}
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-03/cards/files-chat.ts

@@ -0,0 +1,75 @@
+/**
+ * The preview-03 files chat card: a message carrying an image and a PDF, and
+ * a reply that returns two files of its own, each shown as the kit's
+ * attachment. A fragment helper, rendered by the server;
+ * `<preview-03-chat>` plays the turn.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/files-chat.ts`. Ported from shadcn/ui's preview-03.
+ */
+import { html } from '@webjsdev/core';
+import { chatCard, chatItem, chatMessage, type ChatPrompt } from '../components/chat-card.ts';
+import { partFile, type FilePart } from '../components/part-file.ts';
+import { partText } from '../components/part-text.ts';
+
+const SCRIPT: Array<{ user: string; userFiles: FilePart[]; text: string; files: FilePart[] }> = [
+  {
+    user: 'Review these files and tell me what stands out.',
+    userFiles: [
+      {
+        filename: 'workspace.png',
+        mediaType: 'image/png',
+        url: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80',
+      },
+      {
+        filename: 'research-brief.pdf',
+        mediaType: 'application/pdf',
+        url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+      },
+    ],
+    text: 'The image reads like a focused workspace, while the document should be treated as the source of record. I would summarize the PDF first, then use the image only as supporting context.',
+    files: [
+      {
+        filename: 'annotated-workspace.png',
+        mediaType: 'image/png',
+        url: 'https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80',
+      },
+      {
+        filename: 'file-review-notes.pdf',
+        mediaType: 'application/pdf',
+        url: 'https://example.com/file-review-notes.pdf',
+      },
+    ],
+  },
+];
+
+export function filesChat() {
+  const prompts: ChatPrompt[] = SCRIPT.map((t) => ({ text: t.user }));
+  return chatCard({
+    id: 'files-chat-prompt',
+    caption: 'Files',
+    title: 'File review',
+    description: 'Image and document file parts.',
+    prompts,
+    transcript: SCRIPT.map((t, turn) => html`
+      ${chatItem({
+        turn, kind: 'user', id: `files-${turn}-user`, anchor: true,
+        content: chatMessage({
+          role: 'user',
+          align: 'end',
+          contentClass: 'flex-col items-end gap-2',
+          content: html`${t.userFiles.map((part) => partFile({ part }))}${partText({ text: t.user, variant: 'bubble' })}`,
+        }),
+      })}
+      ${chatItem({
+        turn, kind: 'reply', id: `files-${turn}-assistant`, delay: 1000,
+        content: chatMessage({
+          role: 'assistant',
+          align: 'start',
+          contentClass: 'flex-col items-start gap-2',
+          content: html`${t.files.map((part) => partFile({ part }))}${partText({ text: t.text, variant: 'default' })}`,
+        }),
+      })}
+    `),
+  });
+}