@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/preview/cards/invite-team.ts

@@ -0,0 +1,78 @@
+/**
+ * The preview block's invite card: two invites with a role each, an "Add
+ * another" button, and a read-only invite link with a copy button. A
+ * fragment helper, rendered by the server, with the kit's `<ui-select>`.
+ * Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/invite-team.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=${sendInvites}>`) 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, fieldLabelClass } from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+import {
+  inputGroupAddonClass,
+  inputGroupButtonClass,
+  inputGroupClass,
+  inputGroupInputClass,
+} from '../../../components/input-group.ts';
+import { selectTriggerClass } from '../../../components/select.ts';
+import { separatorClass } from '../../../components/separator.ts';
+import { CopyIcon, PlusIcon } from '../../../lib/icons.ts';
+
+const INVITES = [
+  { email: 'alex@example.com', role: 'editor' },
+  { email: 'sam@example.com', role: 'viewer' },
+];
+
+const ROLES: Array<[string, string]> = [['admin', 'Admin'], ['editor', 'Editor'], ['viewer', 'Viewer']];
+
+export function inviteTeam() {
+  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()}>Invite Team</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Add members to your workspace</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-col gap-4')}>
+        <form id="invite-team-form" class="flex flex-col gap-3">
+          ${INVITES.map((invite, i) => html`
+            <div class="flex items-center gap-2">
+              <input data-slot="input" type="email" name="email" value=${invite.email} aria-label=${`Invite ${i + 1} email`} class=${cn(inputClass(), 'flex-1')}>
+              <ui-select position="popper">
+                <select name="role" aria-label=${`Invite ${i + 1} role`} class=${cn(selectTriggerClass(), 'w-24')}>
+                  ${ROLES.map(([value, text]) => html`<option value=${value} ?selected=${value === invite.role}>${text}</option>`)}
+                </select>
+              </ui-select>
+            </div>
+          `)}
+        </form>
+        <button type="button" data-slot="button" data-variant="outline" data-size="default" class=${buttonClass({ variant: 'outline' })}>${PlusIcon()}Add another</button>
+        <div data-slot="separator" data-orientation="horizontal" role="none" class=${separatorClass()}></div>
+        <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
+          <label data-slot="field-label" for="invite-team-link" class=${fieldLabelClass()}>Or share invite link</label>
+          <div data-slot="input-group" role="group" class=${inputGroupClass()}>
+            <input data-slot="input-group-control" id="invite-team-link" value="https://app.co/invite/x8f2k" readonly class=${inputGroupInputClass()}>
+            <div data-slot="input-group-addon" data-align="inline-end" role="group" class=${inputGroupAddonClass({ align: 'inline-end' })}>
+              <button type="button" aria-label="Copy link" data-slot="button" data-variant="ghost" data-size="icon-xs" class=${inputGroupButtonClass({ size: 'icon-xs' })}>${CopyIcon()}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="submit" form="invite-team-form" data-slot="button" data-variant="default" data-size="default" class=${cn(buttonClass(), 'w-full')}>Send Invites</button>
+      </div>
+    </div>
+  `;
+}

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

@@ -0,0 +1,91 @@
+/**
+ * The preview block's invoice card: the line items, subtotal, tax and total
+ * in a table, with download and pay buttons. A fragment helper, rendered by
+ * the server. Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/invoice.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 {
+  cardActionClass,
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  tableBodyClass,
+  tableCellClass,
+  tableClass,
+  tableContainerClass,
+  tableHeadClass,
+  tableHeaderClass,
+  tableRowClass,
+} from '../../../components/table.ts';
+
+const INVOICE_ITEMS = [
+  { item: 'Design System License', qty: 1, unitPrice: 499 },
+  { item: 'Priority Support', qty: 12, unitPrice: 99 },
+  { item: 'Custom Components', qty: 3, unitPrice: 250 },
+];
+
+function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 2 }).format(value);
+}
+
+export function invoice() {
+  const subtotal = INVOICE_ITEMS.reduce((sum, row) => sum + row.qty * row.unitPrice, 0);
+  const totalDue = subtotal;
+  const total = (label: string, value: string) => html`
+    <tr data-slot="table-row" class=${tableRowClass()}>
+      <td data-slot="table-cell" colspan="3" class=${cn(tableCellClass(), 'text-right')}>${label}</td>
+      <td data-slot="table-cell" class=${cn(tableCellClass(), 'text-right tabular-nums')}>${value}</td>
+    </tr>
+  `;
+  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()}>Invoice #INV-2847</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Due March 30, 2026</div>
+        <div data-slot="card-action" class=${cardActionClass()}>
+          <span data-slot="badge" data-variant="secondary" class=${badgeClass({ variant: 'secondary' })}>Pending</span>
+        </div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div data-slot="table-container" class=${tableContainerClass()}>
+          <table data-slot="table" class=${tableClass()}>
+            <thead data-slot="table-header" class=${tableHeaderClass()}>
+              <tr data-slot="table-row" class=${tableRowClass()}>
+                <th data-slot="table-head" scope="col" class=${tableHeadClass()}>Item</th>
+                <th data-slot="table-head" scope="col" class=${cn(tableHeadClass(), 'text-right')}>Qty</th>
+                <th data-slot="table-head" scope="col" class=${cn(tableHeadClass(), 'text-right')}>Rate</th>
+                <th data-slot="table-head" scope="col" class=${cn(tableHeadClass(), 'text-right')}>Amount</th>
+              </tr>
+            </thead>
+            <tbody data-slot="table-body" class=${tableBodyClass()}>
+              ${INVOICE_ITEMS.map((row) => html`
+                <tr data-slot="table-row" class=${tableRowClass()}>
+                  <td data-slot="table-cell" class=${tableCellClass()}>${row.item}</td>
+                  <td data-slot="table-cell" class=${cn(tableCellClass(), 'text-right tabular-nums')}>${row.qty}</td>
+                  <td data-slot="table-cell" class=${cn(tableCellClass(), 'text-right tabular-nums')}>${formatCurrency(row.unitPrice)}</td>
+                  <td data-slot="table-cell" class=${cn(tableCellClass(), 'text-right tabular-nums')}>${formatCurrency(row.qty * row.unitPrice)}</td>
+                </tr>
+              `)}
+              ${total('Subtotal', formatCurrency(subtotal))}
+              ${total('Tax', '$0.00')}
+              ${total('Total Due', formatCurrency(totalDue))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="outline" data-size="sm" class=${buttonClass({ variant: 'outline', size: 'sm' })}>Download PDF</button>
+        <button type="button" data-slot="button" data-variant="default" data-size="sm" class=${cn(buttonClass({ size: 'sm' }), 'ml-auto')}>Pay Now</button>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/live-waveform.ts

@@ -0,0 +1,330 @@
+/**
+ * The preview block's live waveform card: an audio waveform drawn on a
+ * canvas, which shows a "processing" wave on load, follows the microphone
+ * once "Start Listening" is pressed, and switches between a mirrored static
+ * view and a scrolling one. Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/live-waveform.ts`. Ported from shadcn/ui's preview
+ * block (its LiveWaveform component and LiveWaveformCard).
+ *
+ * The card's header is a fragment; the waveform and its three buttons are
+ * the `<preview-live-waveform>` element, since they share state. The server
+ * renders the first frame of the processing wave as an SVG, so the card reads
+ * with JavaScript off; the element swaps in the canvas and animates it. With
+ * `prefers-reduced-motion: reduce` the wave holds still until you listen.
+ */
+import { WebComponent, html, svg, signal } 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';
+
+const HEIGHT = 80;
+const BAR_WIDTH = 3;
+const BAR_GAP = 2;
+const BAR_RADIUS = 1.5;
+const BASE_BAR_HEIGHT = 4;
+const FADE_WIDTH = 24;
+const HISTORY_SIZE = 120;
+const UPDATE_RATE = 30;
+// The width the server draws the first frame at, about a preview card's.
+const FIRST_FRAME_WIDTH = 330;
+
+type Mode = 'static' | 'scrolling';
+
+/** The processing wave at `time`, one value in [0.05, 1] per bar. */
+function processingBars(barCount: number, time: number, mode: Mode): number[] {
+  const out: number[] = [];
+  const half = Math.floor(barCount / 2);
+  for (let i = 0; i < barCount; i++) {
+    const pos = mode === 'static' ? (i - half) / half : (i - barCount / 2) / (barCount / 2);
+    const centerWeight = 1 - Math.abs(pos) * 0.4;
+    const combined = mode === 'static'
+      ? Math.sin(time * 1.5 + pos * 3) * 0.25 + Math.sin(time * 0.8 - pos * 2) * 0.2 + Math.cos(time * 2 + pos) * 0.15
+      : Math.sin(time * 1.5 + i * 0.15) * 0.25 + Math.sin(time * 0.8 - i * 0.1) * 0.2 + Math.cos(time * 2 + i * 0.05) * 0.15;
+    out.push(Math.max(0.05, Math.min(1, (0.2 + combined) * centerWeight)));
+  }
+  return out;
+}
+
+/** The first frame as SVG bars, faded at both edges, for the server's paint. */
+function firstFrame() {
+  const step = BAR_WIDTH + BAR_GAP;
+  const bars = processingBars(Math.floor(FIRST_FRAME_WIDTH / step), 0.03, 'static');
+  const centerY = HEIGHT / 2;
+  const fade = Math.min(0.3, FADE_WIDTH / FIRST_FRAME_WIDTH);
+  return html`<svg data-first-frame aria-hidden="true" class="absolute inset-0 block h-full w-full text-[gray]" viewBox=${`0 0 ${FIRST_FRAME_WIDTH} ${HEIGHT}`} preserveAspectRatio="xMinYMid meet">${svg`
+    <defs>
+      <linearGradient id="preview-live-waveform-fade" x1="0" x2="1" y1="0" y2="0">
+        <stop offset="0" stop-color="white" stop-opacity="0"></stop>
+        <stop offset=${fade} stop-color="white" stop-opacity="1"></stop>
+        <stop offset=${1 - fade} stop-color="white" stop-opacity="1"></stop>
+        <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+      </linearGradient>
+      <mask id="preview-live-waveform-mask"><rect width="100%" height="100%" fill="url(#preview-live-waveform-fade)"></rect></mask>
+    </defs>
+    <g mask="url(#preview-live-waveform-mask)" fill="currentColor">
+      ${bars.map((v, i) => {
+        const h = Math.max(BASE_BAR_HEIGHT, v * HEIGHT * 0.8);
+        return svg`<rect x=${i * step} y=${centerY - h / 2} width=${BAR_WIDTH} height=${h} rx=${BAR_RADIUS} opacity=${0.4 + v * 0.6}></rect>`;
+      })}
+    </g>
+  `}</svg>`;
+}
+
+/**
+ * `<preview-live-waveform>`: the waveform and its controls. Light DOM; the
+ * canvas loop runs only while the element is connected.
+ */
+export class PreviewLiveWaveform extends WebComponent {
+  readonly active = signal(false);
+  readonly processing = signal(true);
+  readonly mode = signal<Mode>('static');
+  readonly _ready = signal(false);
+
+  _canvas: HTMLCanvasElement | null = null;
+  _raf = 0;
+  _time = 0;
+  _lastUpdate = 0;
+  _bars: number[] = [];
+  _history: number[] = [];
+  _lastActive: number[] = [];
+  _transition = 0;
+  _fading = 0;
+  _stream: MediaStream | null = null;
+  _audio: AudioContext | null = null;
+  _analyser: AnalyserNode | null = null;
+  _reduced = false;
+  _resize: ResizeObserver | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._reduced = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this._ready.set(true);
+  }
+
+  disconnectedCallback() {
+    cancelAnimationFrame(this._raf);
+    this._raf = 0;
+    this._resize?.disconnect();
+    this._stopMic();
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    this._canvas = this.querySelector('canvas');
+    const box = this._canvas?.parentElement;
+    if (!this._canvas || !box) return;
+    this._resize = new ResizeObserver(() => this._sizeCanvas());
+    this._resize.observe(box);
+    this._sizeCanvas();
+    this._raf = requestAnimationFrame((t) => this._frame(t));
+  }
+
+  _sizeCanvas() {
+    const canvas = this._canvas;
+    const box = canvas?.parentElement;
+    if (!canvas || !box) return;
+    const rect = box.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
+    canvas.getContext('2d')?.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+
+  async _startMic() {
+    try {
+      this._stream = await navigator.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+      });
+      this._audio = new AudioContext();
+      this._analyser = this._audio.createAnalyser();
+      this._analyser.fftSize = 256;
+      this._analyser.smoothingTimeConstant = 0.8;
+      this._audio.createMediaStreamSource(this._stream).connect(this._analyser);
+      this._history = [];
+    } catch {
+      // No microphone, or permission refused: the bars stay at rest.
+      this.active.set(false);
+    }
+  }
+
+  _stopMic() {
+    this._stream?.getTracks().forEach((t) => t.stop());
+    this._stream = null;
+    if (this._audio && this._audio.state !== 'closed') this._audio.close();
+    this._audio = null;
+    this._analyser = null;
+  }
+
+  _toggleActive() {
+    const next = !this.active.get();
+    this.active.set(next);
+    if (next) {
+      this.processing.set(false);
+      this._startMic();
+    } else {
+      this._stopMic();
+      this._fading = 1;
+    }
+  }
+
+  _toggleProcessing() {
+    const next = !this.processing.get();
+    this.processing.set(next);
+    if (next) {
+      this._transition = 0;
+      if (this.active.get()) {
+        this.active.set(false);
+        this._stopMic();
+      }
+    } else {
+      this._fading = 1;
+    }
+  }
+
+  _toggleMode() {
+    this.mode.set(this.mode.get() === 'static' ? 'scrolling' : 'static');
+  }
+
+  _sample(width: number) {
+    const analyser = this._analyser;
+    if (!analyser) return;
+    const data = new Uint8Array(analyser.frequencyBinCount);
+    analyser.getByteFrequencyData(data);
+    const relevant = data.slice(Math.floor(data.length * 0.05), Math.floor(data.length * 0.4));
+    if (this.mode.get() === 'static') {
+      const half = Math.floor(Math.floor(width / (BAR_WIDTH + BAR_GAP)) / 2);
+      const value = (i: number) => Math.max(0.05, Math.min(1, relevant[Math.floor((i / half) * relevant.length)] / 255));
+      const bars: number[] = [];
+      for (let i = half - 1; i >= 0; i--) bars.push(value(i));
+      for (let i = 0; i < half; i++) bars.push(value(i));
+      this._bars = bars;
+      this._lastActive = bars;
+    } else {
+      let sum = 0;
+      for (const v of relevant) sum += v;
+      this._history.push(Math.min(1, Math.max(0.05, sum / relevant.length / 255)));
+      if (this._history.length > HISTORY_SIZE) this._history.shift();
+      this._lastActive = [...this._history];
+    }
+  }
+
+  _frame(now: number) {
+    this._raf = requestAnimationFrame((t) => this._frame(t));
+    const canvas = this._canvas;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) return;
+    const rect = canvas.getBoundingClientRect();
+    const step = BAR_WIDTH + BAR_GAP;
+    const barCount = Math.floor(rect.width / step);
+    const mode = this.mode.get();
+    const active = this.active.get();
+    const processing = this.processing.get();
+
+    if (active && now - this._lastUpdate > UPDATE_RATE) {
+      this._lastUpdate = now;
+      this._sample(rect.width);
+    } else if (processing && !active && !(this._reduced && this._time > 0)) {
+      this._time += 0.03;
+      this._transition = Math.min(1, this._transition + 0.02);
+      let bars = processingBars(barCount, this._time, mode);
+      if (this._lastActive.length && this._transition < 1) {
+        bars = bars.map((v, i) => {
+          const last = this._lastActive[Math.min(i, this._lastActive.length - 1)] || 0;
+          return last * (1 - this._transition) + v * this._transition;
+        });
+      }
+      if (mode === 'static') this._bars = bars;
+      else this._history = bars;
+    } else if (!active && !processing && this._fading > 0) {
+      this._fading = Math.max(0, this._fading - 0.03);
+      const k = this._fading;
+      this._bars = k ? this._bars.map((v) => v * k) : [];
+      this._history = k ? this._history.map((v) => v * k) : [];
+    }
+
+    ctx.clearRect(0, 0, rect.width, rect.height);
+    const centerY = rect.height / 2;
+    ctx.fillStyle = 'gray';
+    const draw = (x: number, value: number) => {
+      const h = Math.max(BASE_BAR_HEIGHT, value * rect.height * 0.8);
+      ctx.globalAlpha = 0.4 + value * 0.6;
+      ctx.beginPath();
+      ctx.roundRect(x, centerY - h / 2, BAR_WIDTH, h, BAR_RADIUS);
+      ctx.fill();
+    };
+    if (mode === 'static') {
+      for (let i = 0; i < barCount && i < this._bars.length; i++) draw(i * step, this._bars[i] || 0.1);
+    } else {
+      for (let i = 0; i < barCount && i < this._history.length; i++) {
+        draw(rect.width - (i + 1) * step, this._history[this._history.length - 1 - i] || 0.1);
+      }
+    }
+    if (rect.width > 0) {
+      const fade = Math.min(0.3, FADE_WIDTH / rect.width);
+      const gradient = ctx.createLinearGradient(0, 0, rect.width, 0);
+      gradient.addColorStop(0, 'rgba(255,255,255,1)');
+      gradient.addColorStop(fade, 'rgba(255,255,255,0)');
+      gradient.addColorStop(1 - fade, 'rgba(255,255,255,0)');
+      gradient.addColorStop(1, 'rgba(255,255,255,1)');
+      ctx.globalCompositeOperation = 'destination-out';
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, rect.width, rect.height);
+      ctx.globalCompositeOperation = 'source-over';
+    }
+    ctx.globalAlpha = 1;
+  }
+
+  render() {
+    const active = this.active.get();
+    const processing = this.processing.get();
+    const mode = this.mode.get();
+    const ready = this._ready.get();
+    const label = active ? 'Live audio waveform' : processing ? 'Processing audio' : 'Audio waveform idle';
+    const button = (on: boolean, text: string, onClick: () => void) => html`<button
+      type="button"
+      data-slot="button"
+      data-variant=${on ? 'default' : 'outline'}
+      data-size="sm"
+      aria-pressed=${on}
+      class=${buttonClass({ variant: on ? 'default' : 'outline', size: 'sm' })}
+      @click=${onClick}
+    >${text}</button>`;
+    return html`
+      <div data-slot="card-content" class=${cardContentClass()}>
+        <div role="img" aria-label=${label} class="relative h-full w-full" style=${`height: ${HEIGHT}px`}>
+          ${!active && !processing ? html`<div class="absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted border-muted-foreground/20"></div>` : ''}
+          ${ready ? '' : firstFrame()}
+          <canvas class="block h-full w-full" aria-hidden="true"></canvas>
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'gap-2')}>
+        ${button(active, `${active ? 'Stop' : 'Start'} Listening`, () => this._toggleActive())}
+        ${button(processing, `${processing ? 'Stop' : 'Start'} Processing`, () => this._toggleProcessing())}
+        <button type="button" data-slot="button" data-variant="outline" data-size="sm" class=${buttonClass({ variant: 'outline', size: 'sm' })} @click=${() => this._toggleMode()}>${mode === 'static' ? 'Static' : 'Scrolling'}</button>
+      </div>
+    `;
+  }
+}
+PreviewLiveWaveform.register('preview-live-waveform');
+
+export function liveWaveformCard() {
+  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()}>Live Audio Waveform</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Real-time microphone input visualization with audio reactivity</div>
+      </div>
+      <preview-live-waveform class="contents"></preview-live-waveform>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/no-team-members.ts

@@ -0,0 +1,61 @@
+/**
+ * The preview block's empty team card: a stack of avatars over "No Team
+ * Members" and an invite button. A fragment helper, rendered by the server.
+ * Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/no-team-members.ts`. Ported from shadcn/ui's preview
+ * block.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  avatarClass,
+  avatarFallbackClass,
+  avatarGroupClass,
+  avatarImageClass,
+} from '../../../components/avatar.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';
+
+const MEMBERS = [
+  { src: 'https://webjs.dev/public/avatars/vivek.jpg', alt: '@vivek', fallback: 'VK' },
+  { src: 'https://github.com/maxleiter.png', alt: '@maxleiter', fallback: 'LR' },
+  { src: 'https://github.com/evilrabbit.png', alt: '@evilrabbit', fallback: 'ER' },
+];
+
+export function noTeamMembers() {
+  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(), 'h-56 border')}>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-icon" data-variant="default" class=${emptyMediaClass()}>
+              <div data-slot="avatar-group" class=${cn(avatarGroupClass(), 'grayscale')}>
+                ${MEMBERS.map((m) => html`
+                  <span data-slot="avatar" data-size="lg" class=${avatarClass({ size: 'lg' })}>
+                    <span data-slot="avatar-fallback" class=${avatarFallbackClass()}>${m.fallback}</span>
+                    <img data-slot="avatar-image" src=${m.src} alt=${m.alt} class=${avatarImageClass()}>
+                  </span>
+                `)}
+              </div>
+            </div>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>No Team Members</div>
+            <div data-slot="empty-description" class=${emptyDescriptionClass()}>
+              Invite your team to collaborate on this project.
+            </div>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <button type="button" data-slot="button" data-variant="default" data-size="sm" class=${buttonClass({ size: 'sm' })}>Invite Members</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/not-found.ts

@@ -0,0 +1,46 @@
+/**
+ * The preview block's not-found card: a 404 empty state with a search field
+ * and a way home. A fragment helper, rendered by the server. Installed by
+ * `npx @webjsdev/ui add preview` at `components/preview/not-found.ts`.
+ * Ported from shadcn/ui's preview block.
+ *
+ * The search field is a placeholder: put it in a GET `<form>` aimed at your
+ * search route.
+ */
+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,
+  emptyTitleClass,
+} from '../../../components/empty.ts';
+import { inputGroupAddonClass, inputGroupClass, inputGroupInputClass } from '../../../components/input-group.ts';
+import { kbdClass } from '../../../components/kbd.ts';
+import { SearchIcon } from '../../../lib/icons.ts';
+
+export function notFound() {
+  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(), 'h-72')}>
+          <div data-slot="empty-header" class=${emptyHeaderClass()}>
+            <div data-slot="empty-title" class=${emptyTitleClass()}>404 Not Found</div>
+            <div data-slot="empty-description" class=${emptyDescriptionClass()}>The page you're looking for doesn't exist. Try searching for what you need below.</div>
+          </div>
+          <div data-slot="empty-content" class=${emptyContentClass()}>
+            <div role="group" data-slot="input-group" class=${cn(inputGroupClass(), 'w-3/4')}>
+              <input data-slot="input-group-control" name="q" aria-label="Search pages" placeholder="Try searching for pages..." class=${inputGroupInputClass()}>
+              <div role="group" data-slot="input-group-addon" data-align="inline-start" class=${inputGroupAddonClass()}>${SearchIcon()}</div>
+              <div role="group" data-slot="input-group-addon" data-align="inline-end" class=${inputGroupAddonClass({ align: 'inline-end' })}><kbd data-slot="kbd" class=${kbdClass()}>/</kbd></div>
+            </div>
+            <a href="/" data-slot="button" data-variant="link" data-size="default" class=${buttonClass({ variant: 'link' })}>Go to homepage</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/preview/cards/observability-card.ts

@@ -0,0 +1,44 @@
+/**
+ * The preview block's observability card: a tinted cover photo over an
+ * announcement, with a call to action and a status badge. A fragment helper,
+ * rendered by the server. Installed by `npx @webjsdev/ui add preview` at
+ * `components/preview/observability-card.ts`. Ported from shadcn/ui's preview
+ * block.
+ *
+ * The cover is shadcn's Unsplash photo (by mymind). Swap in your own image.
+ */
+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,
+  cardDescriptionClass,
+  cardFooterClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import { PlusIcon } from '../../../lib/icons.ts';
+
+const COVER = 'https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
+
+export function observabilityCard() {
+  return html`
+    <div data-slot="card" data-size="default" class=${cn(cardClass(), 'relative w-full max-w-md overflow-hidden pt-0')}>
+      <div class="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color"></div>
+      <img src=${COVER} alt="Photo by mymind on Unsplash" title="Photo by mymind on Unsplash" class="relative z-20 aspect-video w-full object-cover brightness-60 grayscale">
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Observability Plus is replacing Monitoring</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>
+          Switch to the improved way to explore your data, with natural
+          language. Monitoring will no longer be available on the Pro plan in
+          November, 2025
+        </div>
+      </div>
+      <div data-slot="card-footer" class=${cardFooterClass()}>
+        <button type="button" data-slot="button" data-variant="default" data-size="default" class=${buttonClass()}>Create Query ${PlusIcon()}</button>
+        <span data-slot="badge" data-variant="secondary" class=${cn(badgeClass({ variant: 'secondary' }), 'ml-auto')}>Warning</span>
+      </div>
+    </div>
+  `;
+}