@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/blocks/preview-02/cards/claimable-balance.ts

@@ -0,0 +1,54 @@
+/**
+ * The preview-02 "Claimable Balance" card: the balance, a status badge and a
+ * breakdown in a muted item. A fragment helper. Installed at
+ * `components/preview-02/claimable-balance.ts`. Ported from shadcn/ui's
+ * preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { itemClass, itemContentClass } from '../../../components/item.ts';
+import { separatorClass } from '../../../components/separator.ts';
+
+function row(label: string, value: string, strong = false) {
+  return html`<div class="flex items-center justify-between">
+    <span class="text-sm text-muted-foreground">${label}</span>
+    <span class=${strong ? 'text-sm font-semibold tabular-nums' : 'text-sm font-medium tabular-nums'}>${value}</span>
+  </div>`;
+}
+
+export function claimableBalance() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Claimable Balance</div>
+        <div data-slot="card-title" class=${cn(cardTitleClass(), 'text-5xl tabular-nums')}>$0.00</div>
+        <span data-slot="badge" data-variant="outline" class=${badgeClass({ variant: 'outline' })}>
+          <span class="size-2 rounded-full bg-yellow-500"></span>
+          Pending Setup
+        </span>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-1 flex-col justify-end')}>
+        <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')}>
+            ${row('Net Royalties', '$0.00')}
+            ${row('Processing Fee', '-$0.00')}
+            <div role="none" data-slot="separator" data-orientation="horizontal" class=${separatorClass()}></div>
+            ${row('Total Ready to Claim', '$0.00 USD', true)}
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Once your bank is connected, balances over $10.00 are automatically eligible for monthly distribution on the 15th of each month.</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/contribution-history.ts

@@ -0,0 +1,80 @@
+/**
+ * The preview-02 "Contribution History" card: six months of contributions as
+ * a bar chart, two summary items and a report button. A fragment helper; the
+ * chart is the kit's `<ui-chart>`, drawn by the server. Installed at
+ * `components/preview-02/contribution-history.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,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { barChart, type ChartConfig } from '../../../components/chart.ts';
+import { itemClass, itemContentClass, itemDescriptionClass } from '../../../components/item.ts';
+
+const chartData = [
+  { month: 'Dec', amount: 800 },
+  { month: 'Jan', amount: 1100 },
+  { month: 'Feb', amount: 900 },
+  { month: 'Mar', amount: 1300 },
+  { month: 'Apr', amount: 750 },
+  { month: 'May', amount: 1400 },
+];
+
+const chartConfig: ChartConfig = {
+  amount: { label: 'Contribution', color: 'var(--chart-2)' },
+};
+
+function summary(label: string, value: string, note: string) {
+  return html`<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-1')}>
+      <p data-slot="item-description" class=${cn(itemDescriptionClass(), 'text-xs font-medium tracking-wider text-muted-foreground uppercase')}>${label}</p>
+      <span class="font-heading text-lg font-semibold">${value}</span>
+      <span class="text-sm text-muted-foreground">${note}</span>
+    </div>
+  </div>`;
+}
+
+export function contributionHistory() {
+  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()}>Contribution History</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Last 6 months of activity</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Monthly contributions, December to May',
+          class: 'h-[200px] w-full',
+          width: 330,
+          height: 200,
+          margin: { left: 0, right: 0, top: 8, bottom: 0 },
+          xAxis: { dataKey: 'month', tickLine: false, tickMargin: 8, axisLine: false },
+          yAxis: false,
+          grid: false,
+          maxBarSize: 40,
+          tooltip: { cursor: false, hideLabel: true, class: 'min-w-40' },
+          bars: [{ dataKey: 'amount', fill: 'var(--color-amount)', radius: [6, 6, 0, 0] }],
+        })}
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div class="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
+          ${summary('Upcoming', 'May 25, 2024', '$1,000 scheduled')}
+          ${summary('Auto-Save Plan', 'Accelerated', 'Recurring weekly')}
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>View Full Report</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/cover-art.ts

@@ -0,0 +1,41 @@
+/**
+ * The preview-02 Cover Art card: an image drop target over a real file
+ * input, with an upload button that opens the same input. A fragment helper.
+ * Installed by `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/cover-art.ts`. Ported from shadcn/ui's preview-02.
+ *
+ * Wrap it in a `<form enctype="multipart/form-data">` bound to your upload
+ * action, and the file input submits with it.
+ */
+import { html } from '@webjsdev/core';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass, cardDescriptionClass, cardFooterClass } from '../../../components/card.ts';
+import { itemClass } from '../../../components/item.ts';
+import { labelClass } from '../../../components/label.ts';
+import { cn } from '../../../lib/utils.ts';
+import { ImageIcon } from '../../../lib/icons.ts';
+
+export function coverArt() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-3')}>
+        <label data-slot="label" for="cover-art" class=${cn(labelClass(), 'text-center text-xs font-normal tracking-wider text-muted-foreground uppercase')}>Cover Art</label>
+        <div data-slot="item" data-variant="outline" data-size="default" class=${cn(itemClass({ variant: 'outline' }), 'aspect-square')}>
+          <label for="cover-art" class="flex size-full cursor-pointer items-center justify-center">
+            ${ImageIcon('size-10 text-muted-foreground/50')}
+            <span class="sr-only">Choose cover art</span>
+          </label>
+        </div>
+        <input id="cover-art" name="cover-art" type="file" accept="image/jpeg,image/png" class="sr-only">
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2')}>
+        <label for="cover-art" data-slot="button" data-variant="secondary" data-size="default" class=${cn(buttonClass({ variant: 'secondary' }), 'w-full cursor-pointer')}>Upload Artwork</label>
+        <div data-slot="card-description" class=${cn(cardDescriptionClass(), 'text-center text-xs')}>
+          Minimum 3000 × 3000px
+          <br>
+          JPEG or PNG only
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/dividend-income.ts

@@ -0,0 +1,76 @@
+/**
+ * The preview-02 "Q2 Dividend Income" card: one muted item per holding, each
+ * with a small quarterly bar chart and its payout. A fragment helper; the
+ * charts are the kit's `<ui-chart>`, drawn by the server. Installed at
+ * `components/preview-02/dividend-income.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 {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { barChart, type ChartConfig } from '../../../components/chart.ts';
+import {
+  itemClass,
+  itemContentClass,
+  itemDescriptionClass,
+  itemGroupClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { XIcon } from '../../../lib/icons.ts';
+
+const HOLDINGS = [
+  { name: 'Vanguard VIG', shares: '450 Shares', amount: '$1,842.10', data: [380, 420, 390, 652] },
+  { name: 'S&P 500 VOO', shares: '112 Shares', amount: '$928.40', data: [180, 210, 320, 218] },
+  { name: 'Apple AAPL', shares: '85 Shares', amount: '$340.00', data: [60, 70, 120, 90] },
+  { name: 'Realty Income', shares: '320 Shares', amount: '$1,139.50', data: [240, 260, 280, 360] },
+];
+
+const miniChartConfig: ChartConfig = {
+  value: { label: 'Dividend', color: 'var(--chart-2)' },
+};
+
+export function dividendIncome() {
+  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()}>Q2 Dividend Income</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Quarterly dividend payouts across your portfolio holdings.</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <button type="button" data-slot="button" data-variant="ghost" data-size="icon-sm" aria-label="Dismiss" class=${cn(buttonClass({ variant: 'ghost', size: 'icon-sm' }), 'bg-muted')}>${XIcon()}</button>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div role="list" data-slot="item-group" class=${itemGroupClass()}>
+          ${HOLDINGS.map((holding) => 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()}>${holding.name}</div>
+                <p data-slot="item-description" class=${itemDescriptionClass()}>${holding.shares}</p>
+              </div>
+              ${barChart({
+                config: miniChartConfig,
+                data: holding.data.map((value, i) => ({ q: `Q${i + 1}`, value })),
+                title: `${holding.name} quarterly dividends`,
+                class: 'hidden h-8 w-24 md:block',
+                width: 96,
+                height: 32,
+                margin: { top: 0, right: 0, bottom: 0, left: 0 },
+                tooltip: { cursor: false, hideLabel: true },
+                bars: [{ dataKey: 'value', fill: 'var(--color-value)', radius: [3, 3, 0, 0] }],
+              })}
+              <span class="hidden text-sm font-semibold tabular-nums md:block">${holding.amount}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/empty-connect-bank.ts

@@ -0,0 +1,38 @@
+/**
+ * The preview-02 Connect Bank card: an empty state asking to set up payouts.
+ * A fragment helper. Installed by `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/empty-connect-bank.ts`. Ported from shadcn/ui's
+ * preview-02.
+ */
+import { html } from '@webjsdev/core';
+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 { cn } from '../../../lib/utils.ts';
+import { CreditCardIcon } from '../../../lib/icons.ts';
+
+export function emptyConnectBank() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="empty" class=${cn(emptyClass(), 'p-4')}>
+          <div data-slot="empty-icon" data-variant="icon" aria-hidden="true" class=${emptyMediaClass({ variant: 'icon' })}>${CreditCardIcon()}</div>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>Connect Bank</div>
+            <div data-slot="empty-description" class=${emptyDescriptionClass()}>Link your payout method to receive monthly royalty distributions automatically.</div>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <button type="button" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>Set Up Payouts</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/empty-distribute-track.ts

@@ -0,0 +1,38 @@
+/**
+ * The preview-02 "Distribute Track" empty state: a card holding the kit's
+ * empty state with a create button. A fragment helper. Installed at
+ * `components/preview-02/empty-distribute-track.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 { PlusIcon } from '../../../lib/icons.ts';
+
+export function emptyDistributeTrack() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="empty" class=${cn(emptyClass(), 'p-4')}>
+          <div data-slot="empty-icon" data-variant="icon" class=${emptyMediaClass({ variant: 'icon' })}>${PlusIcon()}</div>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>Distribute Track</div>
+            <p data-slot="empty-description" class=${emptyDescriptionClass()}>Upload your first master to start reaching listeners on Spotify, Apple Music, and more.</p>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <button type="button" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>Create Release</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/empty-explore-catalog.ts

@@ -0,0 +1,39 @@
+/**
+ * The preview-02 Explore Catalog card: an empty state pointing at the
+ * catalog review. A fragment helper. Installed by
+ * `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/empty-explore-catalog.ts`. Ported from shadcn/ui's
+ * preview-02.
+ */
+import { html } from '@webjsdev/core';
+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 { cn } from '../../../lib/utils.ts';
+import { AudioLinesIcon } from '../../../lib/icons.ts';
+
+export function emptyExploreCatalog() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="empty" class=${cn(emptyClass(), 'p-4')}>
+          <div data-slot="empty-icon" data-variant="icon" aria-hidden="true" class=${emptyMediaClass({ variant: 'icon' })}>${AudioLinesIcon()}</div>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>Explore Catalog</div>
+            <div data-slot="empty-description" class=${emptyDescriptionClass()}>Check your ISRC codes, metadata, and visual assets before going live.</div>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <button type="button" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>View Catalog</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/faq.ts

@@ -0,0 +1,79 @@
+/**
+ * The preview-02 FAQ card: three tabs of questions, each tab an accordion
+ * with its first answer open. A fragment helper; the tabs are the kit's
+ * `<ui-tabs>` and each accordion is native `<details>` sharing a `name`, so
+ * one answer opens at a time with no JavaScript. Installed at
+ * `components/preview-02/faq.ts`. Ported from shadcn/ui's preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  accordionClass,
+  accordionContentClass,
+  accordionContentInnerClass,
+  accordionItemClass,
+  accordionTriggerClass,
+} from '../../../components/accordion.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { cardClass, cardContentClass, cardFooterClass } from '../../../components/card.ts';
+import '../../../components/tabs.ts';
+import { ChevronDownIcon } from '../../../lib/icons.ts';
+
+interface Question { q: string; a: string }
+
+const GENERAL_QUESTIONS: Question[] = [
+  { q: 'How secure is my financial data with Ledger?', a: 'We use bank-level AES-256 encryption, SOC 2 Type II certified infrastructure, and never store your credentials. All connections use read-only access tokens. We are a SEC registered investment advisor.' },
+  { q: 'How do I connect my bank or investment accounts?', a: 'Go to Settings > Linked Accounts and search for your institution. We support over 12,000 banks and brokerages via Plaid and MX.' },
+  { q: 'Can I export my data for tax purposes?', a: 'Yes. Navigate to Reports > Tax Export to download a CSV or PDF summary of your transactions, dividends, and capital gains for any tax year.' },
+];
+
+const BILLING_QUESTIONS: Question[] = [
+  { q: 'What is the difference between Basic and Pro pricing tiers?', a: 'Basic includes budgeting, goal tracking, and up to 3 linked accounts. Pro adds unlimited accounts, dividend tracking, portfolio analysis, and priority support.' },
+  { q: 'How do I cancel my subscription?', a: 'Go to Settings > Billing > Manage Plan and click Cancel. Your access continues until the end of your current billing period.' },
+  { q: 'Do you offer a free trial?', a: 'Yes. All new accounts start with a 14-day Pro trial. No credit card required.' },
+];
+
+const GOALS_QUESTIONS: Question[] = [
+  { q: 'How do I set up a custom financial goal?', a: "Click New Goal from the Savings Targets card. Choose a category, set a target amount and date, and we'll calculate the monthly contribution needed." },
+  { q: 'Can I track multiple goals at once?', a: 'Yes. Pro accounts can track unlimited goals. Basic accounts support up to 3 active goals.' },
+  { q: 'How are monthly contributions calculated?', a: 'We divide the remaining amount by the number of months until your target date, adjusted for your current savings rate and any auto-transfer schedules.' },
+];
+
+function questionList(name: string, questions: Question[]) {
+  return html`<div data-slot="accordion" class=${accordionClass()}>
+    ${questions.map((item, index) => html`
+      <details name=${`faq-${name}`} data-slot="accordion-item" class=${accordionItemClass()} ?open=${index === 0}>
+        <summary data-slot="accordion-trigger" class=${accordionTriggerClass()}>
+          <span>${item.q}</span>
+          ${ChevronDownIcon('pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180')}
+        </summary>
+        <div data-slot="accordion-content" class=${accordionContentClass()}>
+          <div class=${accordionContentInnerClass()}>${item.a}</div>
+        </div>
+      </details>
+    `)}
+  </div>`;
+}
+
+export function faq() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cardClass()}>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <ui-tabs value="general">
+          <ui-tabs-list class="w-full">
+            <ui-tabs-trigger value="general" class="flex-1">General</ui-tabs-trigger>
+            <ui-tabs-trigger value="billing" class="flex-1">Billing</ui-tabs-trigger>
+            <ui-tabs-trigger value="goals" class="flex-1">Goals</ui-tabs-trigger>
+          </ui-tabs-list>
+          <ui-tabs-content value="general">${questionList('general', GENERAL_QUESTIONS)}</ui-tabs-content>
+          <ui-tabs-content value="billing">${questionList('billing', BILLING_QUESTIONS)}</ui-tabs-content>
+          <ui-tabs-content value="goals">${questionList('goals', GOALS_QUESTIONS)}</ui-tabs-content>
+        </ui-tabs>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${cn(buttonClass({ variant: 'outline' }), 'w-full')}>Contact Support</button>
+        <a href="#" data-slot="button" data-variant="link" data-size="default" class=${cn(buttonClass({ variant: 'link' }), 'w-full')}>Learn More</a>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/front-door.ts

@@ -0,0 +1,40 @@
+/**
+ * The preview-02 Front Door card: a smart lock's status over a striped live
+ * camera placeholder. A fragment helper. Installed by
+ * `npx @webjsdev/ui add preview-02` at `components/preview-02/front-door.ts`.
+ * Ported from shadcn/ui's preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { badgeClass } from '../../../components/badge.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { cn } from '../../../lib/utils.ts';
+import { LockIcon } from '../../../lib/icons.ts';
+
+export function frontDoor() {
+  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()}>Front Door</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Smart Lock Pro</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <div class="flex items-center gap-1.5 text-sm text-muted-foreground">
+            Locked
+            ${LockIcon('size-4')}
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div class="relative flex aspect-video items-center justify-center overflow-hidden rounded-lg bg-muted bg-[repeating-linear-gradient(45deg,transparent,transparent_10px,var(--border)_10px,var(--border)_11px)]">
+          <span data-slot="badge" data-variant="destructive" class=${cn(badgeClass({ variant: 'destructive' }), 'absolute top-2 right-2')}>Live</span>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/index-investing.ts

@@ -0,0 +1,31 @@
+/**
+ * The preview-02 "Dollar-Cost Averaging" card: a heading over a paragraph
+ * with an inline link. A fragment helper. Installed at
+ * `components/preview-02/index-investing.ts`. Ported from shadcn/ui's
+ * preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+
+export function indexInvesting() {
+  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()}>Dollar-Cost Averaging</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>A strategy for building wealth over time.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="card-description" class=${cn(cardDescriptionClass(), 'mt-3 text-sm leading-relaxed style-sera:mt-0')}>
+          <a href="#" class="underline underline-offset-4 hover:text-primary">Over time</a>, this smooths out the average cost of your investments. When prices drop, your fixed amount buys more shares. When prices rise, you buy fewer. The result is a lower average cost per share compared to lump-sum investing during volatile periods.
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/kitchen-island.ts

@@ -0,0 +1,90 @@
+/**
+ * The preview-02 "Kitchen Island" light control: an on switch, a scene picker
+ * and four sliders. A fragment helper; the switch, the scene picker and the
+ * sliders are the kit's `<ui-switch>`, `<ui-toggle-group>` and `<ui-slider>`.
+ * Installed at `components/preview-02/kitchen-island.ts`. Ported from
+ * shadcn/ui's preview-02.
+ *
+ * It renders the "Cooking" scene. shadcn moves the four sliders to each
+ * scene's preset from React state. Here the presets are in `SCENES`: listen
+ * for the toggle group's `ui-value-change` in a small element of your own and
+ * set the sliders' values, or post the choice to the server and render it.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  itemActionsClass,
+  itemClass,
+  itemContentClass,
+  itemGroupClass,
+  itemMediaClass,
+  itemTitleClass,
+} from '../../../components/item.ts';
+import { sliderClass } from '../../../components/slider.ts';
+import '../../../components/slider.ts';
+import '../../../components/switch.ts';
+import '../../../components/toggle-group.ts';
+import { SunIcon, ThermometerIcon, TimerIcon, Volume2Icon } from '../../../lib/icons.ts';
+
+/** Each scene's slider values, shadcn's presets. */
+export const SCENES = {
+  cooking: { brightness: 90, colorTemp: 70, volume: 30, fade: 0 },
+  dining: { brightness: 50, colorTemp: 40, volume: 20, fade: 60 },
+  nightlight: { brightness: 15, colorTemp: 20, volume: 0, fade: 80 },
+  focus: { brightness: 100, colorTemp: 85, volume: 0, fade: 0 },
+};
+
+function control(icon: TemplateResult, title: string, name: string, value: number) {
+  return html`<div data-slot="item" data-variant="outline" data-size="sm" class=${itemClass({ variant: 'outline', size: 'sm' })}>
+    <div data-slot="item-media" data-variant="icon" class=${itemMediaClass({ variant: 'icon' })}>${icon}</div>
+    <div data-slot="item-content" class=${cn(itemContentClass(), 'flex-row items-center gap-3')}>
+      <div data-slot="item-title" class=${cn(itemTitleClass(), 'shrink-0')}>${title}</div>
+    </div>
+    <div data-slot="item-actions" class=${cn(itemActionsClass(), 'flex-1')}>
+      <ui-slider class="w-full">
+        <input type="range" name=${name} min="0" max="100" value=${value} aria-label=${title} class=${sliderClass()}>
+      </ui-slider>
+    </div>
+  </div>`;
+}
+
+export function kitchenIsland() {
+  const scene = SCENES.cooking;
+  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()}>Kitchen Island</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Hue Color Ambient</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <ui-switch name="kitchen_island_on" aria-label="Kitchen Island lights" checked></ui-switch>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <div class="flex flex-col gap-2">
+          <span class="sr-only" id="kitchen-island-scenes">Scenes</span>
+          <ui-toggle-group type="single" value="cooking" variant="outline" spacing="1" aria-labelledby="kitchen-island-scenes" class="flex-wrap">
+            <ui-toggle-group-item value="cooking">Cooking</ui-toggle-group-item>
+            <ui-toggle-group-item value="dining">Dining</ui-toggle-group-item>
+            <ui-toggle-group-item value="nightlight">Nightlight</ui-toggle-group-item>
+            <ui-toggle-group-item value="focus">Focus</ui-toggle-group-item>
+          </ui-toggle-group>
+        </div>
+        <div role="list" data-slot="item-group" class=${itemGroupClass()}>
+          ${control(SunIcon(), 'Brightness', 'brightness', scene.brightness)}
+          ${control(ThermometerIcon(), 'Color Temp', 'color_temp', scene.colorTemp)}
+          ${control(Volume2Icon(), 'Volume', 'volume', scene.volume)}
+          ${control(TimerIcon(), 'Fade', 'fade', scene.fade)}
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview-02/cards/loading-card.ts

@@ -0,0 +1,34 @@
+/**
+ * The preview-02 loading card: a card's skeleton placeholder. A fragment
+ * helper. Installed by `npx @webjsdev/ui add preview-02` at
+ * `components/preview-02/loading-card.ts`. Ported from shadcn/ui's preview-02.
+ */
+import { html } from '@webjsdev/core';
+import { cardClass, cardContentClass, cardHeaderClass } from '../../../components/card.ts';
+import { skeletonClass } from '../../../components/skeleton.ts';
+import { cn } from '../../../lib/utils.ts';
+
+const skeleton = (cls: string) => html`<div data-slot="skeleton" aria-hidden="true" class=${cn(skeletonClass(), cls)}></div>`;
+
+export function loadingCard() {
+  return html`
+    <div data-slot="card" data-size="default" aria-busy="true" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        ${skeleton('h-5 w-32')}
+        ${skeleton('h-4 w-48')}
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        ${skeleton('h-32 w-full rounded-lg')}
+        <div class="flex flex-col gap-2">
+          ${skeleton('h-4 w-full')}
+          ${skeleton('h-4 w-3/4')}
+          ${skeleton('h-4 w-1/2')}
+        </div>
+        <div class="flex gap-2">
+          ${skeleton('h-9 flex-1 rounded-md')}
+          ${skeleton('h-9 flex-1 rounded-md')}
+        </div>
+      </div>
+    </div>
+  `;
+}