@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/blocks/preview-03/components/part-source.ts

@@ -0,0 +1,48 @@
+/**
+ * The preview-03 source part: a source an assistant cited, either a url (a
+ * link with its title and host) or a document (its title, file name, media
+ * type and source id). A fragment helper, rendered by the server.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/part-source.ts`. Ported from shadcn/ui's preview-03.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import { ExternalLinkIcon, FileSearchIcon } from '../../../lib/icons.ts';
+
+export type SourcePart =
+  | { type: 'source-url'; sourceId: string; url: string; title?: string }
+  | { type: 'source-document'; sourceId: string; mediaType: string; title?: string; filename?: string };
+
+function hostname(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}
+
+export function partSource(opts: { part: SourcePart; class?: string }) {
+  const { part } = opts;
+  const icon = 'flex size-8 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground';
+  if (part.type === 'source-url') {
+    return html`<a data-slot="part-source" data-type=${part.type} href=${part.url} target="_blank" rel="noreferrer" class=${cn('flex w-full max-w-full min-w-0 items-center gap-2 rounded-lg border bg-muted/40 p-3 text-sm transition-colors hover:bg-muted', opts.class)}>
+      <span class=${icon}>${ExternalLinkIcon('size-4')}</span>
+      <span class="min-w-0 flex-1">
+        <span class="block truncate font-medium">${part.title ?? part.url}</span>
+        <span class="block truncate text-xs text-muted-foreground">${hostname(part.url)}</span>
+      </span>
+      <span data-slot="badge" data-variant="outline" class=${cn(badgeClass({ variant: 'outline' }), 'shrink-0')}>URL</span>
+    </a>`;
+  }
+  return html`<div data-slot="part-source" data-type=${part.type} class=${cn('flex w-full max-w-full min-w-0 items-start gap-2 rounded-lg border bg-muted/40 p-3 text-sm', opts.class)}>
+    <span class=${icon}>${FileSearchIcon('size-4')}</span>
+    <span class="min-w-0 flex-1">
+      <span class="block truncate font-medium">${part.title ?? part.filename ?? 'Document source'}</span>
+      <span class="mt-0.5 block truncate text-xs text-muted-foreground">${[part.filename, part.mediaType].filter(Boolean).join(' / ')}</span>
+      <span class="mt-2 block text-xs text-muted-foreground">Source ID: ${part.sourceId}</span>
+    </span>
+    <span data-slot="badge" data-variant="outline" class=${cn(badgeClass({ variant: 'outline' }), 'shrink-0')}>Document</span>
+  </div>`;
+}

package/packages/registry/blocks/preview-03/components/part-text.ts

@@ -0,0 +1,69 @@
+/**
+ * The preview-03 text part: one text part of a chat message, in a bubble. A
+ * user's text is shown as written; an assistant's is read as Markdown
+ * (paragraphs, `-` and `1.` lists, `**bold**`, `*italic*` and inline code).
+ * A fragment helper, rendered by the server.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/part-text.ts`. Ported from shadcn/ui's preview-03,
+ * where the Markdown is Streamdown. Swap `markdown()` for a full Markdown
+ * renderer if your replies carry tables or fenced code.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { bubbleClass, bubbleContentClass } from '../../../components/bubble.ts';
+
+export type PartTextVariant = 'default' | 'bubble';
+export type ChatRole = 'user' | 'system' | 'assistant';
+
+/** `**bold**`, `*italic*` and inline code, everything else as text. */
+function inline(text: string): unknown[] {
+  const out: unknown[] = [];
+  const re = /\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`/g;
+  let last = 0;
+  for (const m of text.matchAll(re)) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    if (m[1] !== undefined) out.push(html`<strong>${m[1]}</strong>`);
+    else if (m[2] !== undefined) out.push(html`<em>${m[2]}</em>`);
+    else out.push(html`<code class="rounded-sm bg-muted px-1 py-0.5 font-mono text-[0.9em]">${m[3]}</code>`);
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+/** A small Markdown subset, enough for the scripted replies. */
+export function markdown(text: string): TemplateResult {
+  // Runs of consecutive lines of one kind: a bullet list, a numbered list, or
+  // a paragraph (a blank line also ends a paragraph).
+  const runs: Array<{ kind: 'ul' | 'ol' | 'p'; lines: string[] }> = [];
+  for (const line of text.trim().split('\n')) {
+    if (!line.trim()) {
+      runs.push({ kind: 'p', lines: [] });
+      continue;
+    }
+    const kind = /^\s*-\s+/.test(line) ? 'ul' : /^\s*\d+\.\s+/.test(line) ? 'ol' : 'p';
+    const last = runs[runs.length - 1];
+    if (last && last.kind === kind) last.lines.push(line);
+    else runs.push({ kind, lines: [line] });
+  }
+  return html`<div class="space-y-3">${runs.filter((r) => r.lines.length).map((r) => {
+    if (r.kind === 'ul') {
+      return html`<ul class="list-disc space-y-1 ps-5">${r.lines.map((l) => html`<li>${inline(l.replace(/^\s*-\s+/, ''))}</li>`)}</ul>`;
+    }
+    if (r.kind === 'ol') {
+      return html`<ol class="list-decimal space-y-1 ps-5">${r.lines.map((l) => html`<li>${inline(l.replace(/^\s*\d+\.\s+/, ''))}</li>`)}</ol>`;
+    }
+    return html`<p>${r.lines.map((l, i) => html`${i ? html`<br>` : ''}${inline(l)}`)}</p>`;
+  })}</div>`;
+}
+
+export function partText(opts: { text: string; role?: ChatRole; variant?: PartTextVariant; tinted?: boolean; class?: string }) {
+  const { text, role, variant, tinted = false } = opts;
+  const content = role === 'user' || variant === 'bubble' ? html`<span class="whitespace-pre-wrap">${text}</span>` : markdown(text);
+  const bubbleVariant = variant === 'bubble' ? (tinted ? 'tinted' : 'default') : role === 'user' ? 'default' : 'ghost';
+  return html`<div data-slot="bubble" data-variant=${bubbleVariant} class=${cn(bubbleClass({ variant: bubbleVariant }), opts.class)}>
+    <div data-slot="bubble-content" class=${bubbleContentClass()}>${content}</div>
+  </div>`;
+}

package/packages/registry/blocks/preview-03/components/part-tool.ts

@@ -0,0 +1,71 @@
+/**
+ * The preview-03 tool part: one tool call in an assistant turn, with its
+ * title, name and state, and its input, output or error underneath. A
+ * fragment helper, rendered by the server.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/part-tool.ts`. Ported from shadcn/ui's preview-03.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { badgeClass } from '../../../components/badge.ts';
+import { separatorClass } from '../../../components/separator.ts';
+import { SettingsIcon } from '../../../lib/icons.ts';
+
+export interface ToolPart {
+  /** `tool-<name>`, or `dynamic-tool` with a `toolName`. */
+  type: string;
+  toolName?: string;
+  toolCallId: string;
+  title?: string;
+  state: string;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+}
+
+function toolName(part: ToolPart): string {
+  return part.type === 'dynamic-tool' ? (part.toolName ?? 'dynamicTool') : part.type.replace('tool-', '');
+}
+
+function toolTitle(part: ToolPart): string {
+  if (typeof part.title === 'string') return part.title;
+  return toolName(part)
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function formatValue(value: unknown): string {
+  return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+}
+
+export function partTool(opts: { part: ToolPart; class?: string }) {
+  const { part } = opts;
+  if (part.type !== 'dynamic-tool' && !part.type.startsWith('tool-')) return '';
+  const hasBody = part.input !== undefined || part.output !== undefined || !!part.errorText;
+  const pre = 'overflow-auto rounded-md bg-background p-2 text-xs leading-relaxed';
+  return html`<div data-slot="part-tool" data-state=${part.state} class=${cn('w-full max-w-full min-w-0 rounded-lg border bg-muted/40 text-sm', opts.class)}>
+    <div class="flex min-w-0 items-center gap-2 px-3 py-2">
+      <span class="flex size-7 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">${SettingsIcon('size-4')}</span>
+      <div class="min-w-0 flex-1">
+        <div class="truncate font-medium">${toolTitle(part)}</div>
+        <div class="truncate text-xs text-muted-foreground">${toolName(part)}</div>
+      </div>
+      <span data-slot="badge" data-variant="outline" class=${cn(badgeClass({ variant: 'outline' }), 'capitalize')}>${part.state.replace(/-/g, ' ')}</span>
+    </div>
+    ${hasBody ? html`
+      <div role="none" data-slot="separator" data-orientation="horizontal" class=${separatorClass()}></div>
+      <div class="grid gap-3 p-3">
+        ${part.input !== undefined ? html`<div class="grid gap-1">
+          <div class="text-xs font-medium text-muted-foreground">Input</div>
+          <pre class=${cn('max-h-32', pre)}>${formatValue(part.input)}</pre>
+        </div>` : ''}
+        ${part.output !== undefined ? html`<div class="grid gap-1">
+          <div class="text-xs font-medium text-muted-foreground">Output</div>
+          <pre class=${cn('max-h-40', pre)}>${formatValue(part.output)}</pre>
+        </div>` : ''}
+        ${part.errorText ? html`<div class="rounded-md border border-destructive/30 bg-destructive/10 p-2 text-xs text-destructive">${part.errorText}</div>` : ''}
+      </div>` : ''}
+  </div>`;
+}

package/packages/registry/blocks/preview-03/components/prompt-input.ts

@@ -0,0 +1,86 @@
+/**
+ * The preview-03 prompt input: a chat composer, a textarea with an add menu
+ * and a send button in one input group. A fragment helper, rendered by the
+ * server; the menu is the kit's `<ui-dropdown-menu>`.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a `'use server'`
+ * file (`<form action=${sendMessage}>`) and read the `prompt` field, or
+ * handle the submit in the element that owns the conversation, as
+ * `<preview-03-chat>` (chat-player.ts) does for the scripted demo.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at
+ * `components/preview-03/prompt-input.ts`. Ported from shadcn/ui's preview-03.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { fieldGroupClass } from '../../../components/field.ts';
+import {
+  inputGroupAddonClass,
+  inputGroupButtonClass,
+  inputGroupClass,
+  inputGroupTextareaClass,
+} from '../../../components/input-group.ts';
+import '../../../components/dropdown-menu.ts';
+import { ArrowUpIcon, BookOpenIcon, BotIcon, BrainIcon, CheckIcon, GlobeIcon, ImageIcon, MonitorIcon, MoreHorizontalIcon, PaperclipIcon, PlusIcon, SquareIcon } from '../../../lib/icons.ts';
+
+/**
+ * `id` names the textarea and the add menu's button, so it must be unique on
+ * the page. `value` is the text the box opens with.
+ */
+export function promptInput(opts: { id: string; value?: string; class?: string }) {
+  const value = opts.value ?? '';
+  const addId = `${opts.id}-add`;
+  // `flex-col` stacks the box over the toolbar. Most styles do it for any
+  // group with a block-end addon; new-york does not, so it is written here.
+  return html`<form data-slot="prompt-input" class=${cn('w-full', opts.class)}>
+    <div data-slot="field-group" class=${cn(fieldGroupClass(), 'gap-1')}>
+      <div data-slot="input-group" role="group" class=${cn(inputGroupClass(), 'h-auto flex-col')}>
+        <textarea
+          data-slot="input-group-control"
+          data-chat-input
+          id=${opts.id}
+          name="prompt"
+          aria-label="Message"
+          placeholder="Ask me anything..."
+          class=${cn(inputGroupTextareaClass(), 'h-10 min-h-10 overflow-y-auto transition-all')}
+        >${value}</textarea>
+        <div role="group" data-slot="input-group-addon" data-align="block-end" class=${cn(inputGroupAddonClass({ align: 'block-end' }), 'p-2')}>
+          <button type="button" id=${addId} data-slot="input-group-button" data-variant="ghost" data-size="icon-sm" class=${inputGroupButtonClass({ size: 'icon-sm', variant: 'ghost' })}>
+            ${PlusIcon()}<span class="sr-only">Add</span>
+          </button>
+          <button type="submit" data-chat-send data-slot="input-group-button" data-variant="default" data-size="icon-sm" data-visible="true" ?disabled=${!value.trim()} class=${cn(inputGroupButtonClass({ size: 'icon-sm', variant: 'default' }), 'ml-auto data-[visible=false]:hidden')}>
+            ${ArrowUpIcon()}<span class="sr-only">Send</span>
+          </button>
+          <button type="button" data-chat-stop data-slot="input-group-button" data-variant="default" data-size="icon-sm" data-visible="false" class=${cn(inputGroupButtonClass({ size: 'icon-sm', variant: 'default' }), 'ml-auto data-[visible=false]:hidden')}>
+            ${SquareIcon('fill-foreground')}<span class="sr-only">Stop</span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <ui-dropdown-menu trigger=${addId}>
+      <ui-dropdown-menu-content class="w-fit">
+        <ui-dropdown-menu-group>
+          <ui-dropdown-menu-item>${PaperclipIcon()}Add Photos and Files</ui-dropdown-menu-item>
+          <ui-dropdown-menu-item>${MonitorIcon()}Take a Screenshot</ui-dropdown-menu-item>
+        </ui-dropdown-menu-group>
+        <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+        <ui-dropdown-menu-group>
+          <ui-dropdown-menu-item>${ImageIcon()}Create Image</ui-dropdown-menu-item>
+          <ui-dropdown-menu-item>${BrainIcon()}Deep Research</ui-dropdown-menu-item>
+          <ui-dropdown-menu-item>${GlobeIcon()}Web Search</ui-dropdown-menu-item>
+        </ui-dropdown-menu-group>
+        <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+        <ui-dropdown-menu-group>
+          <ui-dropdown-menu-sub>
+            <ui-dropdown-menu-sub-trigger>${MoreHorizontalIcon()}More</ui-dropdown-menu-sub-trigger>
+            <ui-dropdown-menu-sub-content>
+              <ui-dropdown-menu-item>${BotIcon()}Agent Mode</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${BookOpenIcon()}Add Sources</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${CheckIcon()}Create Tasks</ui-dropdown-menu-item>
+            </ui-dropdown-menu-sub-content>
+          </ui-dropdown-menu-sub>
+        </ui-dropdown-menu-group>
+      </ui-dropdown-menu-content>
+    </ui-dropdown-menu>
+  </form>`;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * The preview-03 block's page: four AI chat cards side by side, a simple
+ * chat, a group chat, a reasoning trace and a file review, each a scripted
+ * conversation you can step through with the send button.
+ *
+ * Installed by `npx @webjsdev/ui add preview-03` at `app/preview-03/page.ts`.
+ * It is app code you own, so edit it freely, and point each card's prompt
+ * input at your own chat endpoint. Ported from shadcn/ui's preview-03.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { spinner } from '../../components/spinner.ts';
+import { filesChat } from './cards/files-chat.ts';
+import { groupChat } from './cards/group-chat.ts';
+import { reasoningChat } from './cards/reasoning-chat.ts';
+import { simpleChat } from './cards/simple-chat.ts';
+
+export const metadata: Metadata = { title: 'Preview 03' };
+
+const COLUMN = 'flex h-full min-h-0 flex-1 flex-col p-1 [contain-intrinsic-size:380px_1200px] [content-visibility:auto]';
+
+export default function Preview03Page() {
+  return html`
+    <div class="flex h-screen min-h-0 flex-col 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 min-h-0 w-full min-w-max flex-1 justify-center">
+        <div
+          class="grid min-h-0 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)"
+          data-slot="capture-target"
+        >
+          <div class=${COLUMN}>${simpleChat()}</div>
+          <div class=${COLUMN}>${groupChat()}</div>
+          <div class=${COLUMN}>${reasoningChat()}</div>
+          <div class=${COLUMN}>${filesChat()}</div>
+        </div>
+      </div>
+      <div class="sr-only">${spinner()}</div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-01/components/app-sidebar.ts

@@ -0,0 +1,113 @@
+/**
+ * The sidebar-01 app sidebar: a version switcher and a search field in the
+ * header, then one group per docs section with its pages as links. A
+ * fragment helper, so the markup is rendered by the server; the sidebar, its
+ * rail and the version menu are the kit's elements. Ported from shadcn/ui's
+ * sidebar-01.
+ *
+ * The data below is sample data. Replace it with your own, point each `url`
+ * at a real route, and mark the current page with `isActive`.
+ */
+import { html, nothing } from '@webjsdev/core';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { searchForm } from './search-form.ts';
+import { versionSwitcher } from './version-switcher.ts';
+
+interface NavSection {
+  title: string;
+  url: string;
+  items: { title: string; url: string; isActive?: boolean }[];
+}
+
+// This is sample data.
+const data: { versions: string[]; navMain: NavSection[] } = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        { title: 'Installation', url: '#' },
+        { title: 'Project Structure', url: '#' },
+      ],
+    },
+    {
+      title: 'Build Your Application',
+      url: '#',
+      items: [
+        { title: 'Routing', url: '#' },
+        { title: 'Data Fetching', url: '#', isActive: true },
+        { title: 'Rendering', url: '#' },
+        { title: 'Caching', url: '#' },
+        { title: 'Styling', url: '#' },
+        { title: 'Optimizing', url: '#' },
+        { title: 'Configuring', url: '#' },
+        { title: 'Testing', url: '#' },
+        { title: 'Authentication', url: '#' },
+        { title: 'Deploying', url: '#' },
+        { title: 'Upgrading', url: '#' },
+        { title: 'Examples', url: '#' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        { title: 'Components', url: '#' },
+        { title: 'File Conventions', url: '#' },
+        { title: 'Functions', url: '#' },
+        { title: 'next.config.js Options', url: '#' },
+        { title: 'CLI', url: '#' },
+        { title: 'Edge Runtime', url: '#' },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        { title: 'Accessibility', url: '#' },
+        { title: 'Fast Refresh', url: '#' },
+        { title: 'Next.js Compiler', url: '#' },
+        { title: 'Supported Browsers', url: '#' },
+        { title: 'Turbopack', url: '#' },
+      ],
+    },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar>
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        ${versionSwitcher({ versions: data.versions, defaultVersion: data.versions[0] })}
+        ${searchForm()}
+      </div>
+      <nav aria-label="Docs" data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${data.navMain.map((section) => html`
+          <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+            <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>${section.title}</div>
+            <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+              <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+                ${section.items.map((item) => html`
+                  <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                    <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuButtonClass()}>${item.title}</a>
+                  </li>
+                `)}
+              </ul>
+            </div>
+          </div>
+        `)}
+      </nav>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-01/components/search-form.ts

@@ -0,0 +1,33 @@
+/**
+ * The sidebar-01 search form: a search field at the top of the sidebar. A
+ * fragment helper, so it renders on the server and ships no JavaScript.
+ * Ported from shadcn/ui's sidebar-01.
+ *
+ * The `<form>` has no `action` yet. Point it at your search route as a GET
+ * (`<form action="/search">`), or bind a server action from a `'use server'`
+ * file (`<form action=${search}>`). Until then a submit reloads the page with
+ * `?q=` in the URL.
+ */
+import { html, nothing } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { labelClass } from '../../../components/label.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarInputClass,
+} from '../../../components/sidebar.ts';
+import { SearchIcon } from '../../../lib/icons.ts';
+
+export function searchForm(opts: { class?: string } = {}) {
+  return html`
+    <form role="search" class=${opts.class ?? nothing}>
+      <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'py-0')}>
+        <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'relative')}>
+          <label data-slot="label" for="search" class=${cn(labelClass(), 'sr-only')}>Search</label>
+          <input data-slot="sidebar-input" data-sidebar="input" id="search" name="q" placeholder="Search the docs..." class=${cn(sidebarInputClass(), 'pl-8')}>
+          ${SearchIcon('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none')}
+        </div>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/sidebar-01/components/version-switcher.ts

@@ -0,0 +1,50 @@
+/**
+ * The sidebar-01 version switcher: the docs logo with the current version,
+ * opening a menu of the versions. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-01.
+ *
+ * It renders `defaultVersion` as the selected one. shadcn keeps the choice in
+ * React state; in your app the version is server data (a route segment or a
+ * cookie), so render the right one on the server and make each item a link
+ * to that version.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { CheckIcon, ChevronsUpDownIcon, GalleryVerticalEndIcon } from '../../../lib/icons.ts';
+
+export function versionSwitcher({ versions, defaultVersion }: { versions: string[]; defaultVersion: string }) {
+  const selected = defaultVersion;
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <ui-dropdown-menu>
+          <ui-dropdown-menu-trigger>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${GalleryVerticalEndIcon('size-4')}
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-medium">Documentation</span>
+                <span>v${selected}</span>
+              </div>
+              ${ChevronsUpDownIcon('ml-auto')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-(--radix-dropdown-menu-trigger-width)" align="start">
+            ${versions.map((version) => html`
+              <ui-dropdown-menu-item>
+                v${version} ${version === selected ? CheckIcon('ml-auto') : ''}
+              </ui-dropdown-menu-item>
+            `)}
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-01/page.ts

@@ -0,0 +1,58 @@
+/**
+ * The sidebar-01 block's page: a docs-style sidebar with its navigation
+ * grouped by section, beside a header with a breadcrumb and a placeholder
+ * content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-01` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-01.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <ui-sidebar-trigger class="-ml-1"></ui-sidebar-trigger>
+          <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+          <nav aria-label="breadcrumb" data-slot="breadcrumb">
+            <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+              <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+              </li>
+              <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+              <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+              </li>
+            </ol>
+          </nav>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+          </div>
+          <div class="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}