@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/blocks/sidebar-10/components/nav-actions.ts

@@ -0,0 +1,84 @@
+/**
+ * The sidebar-10 page actions: the last-edited date, a favourite button and a
+ * "More" button opening a menu of page actions, laid out as a small sidebar
+ * in a popover. A fragment helper; the popover is the native Popover API, so
+ * it opens, light-dismisses and closes on Escape with no JavaScript. Ported
+ * from shadcn/ui's sidebar-10.
+ *
+ * shadcn opens the popover once the page has mounted. Here it starts closed,
+ * since a native popover cannot be open in server-rendered HTML. The actions
+ * are placeholders: make each one a link or a form posting to an action.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import { popoverContentClass } from '../../../components/popover.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { ArrowDownIcon, ArrowUpIcon, BellIcon, ChartLineIcon, CopyIcon, CornerUpLeftIcon, CornerUpRightIcon, FileTextIcon, GalleryVerticalEndIcon, LinkIcon, MoreHorizontalIcon, Settings2Icon, StarIcon, Trash2Icon, TrashIcon } from '../../../lib/icons.ts';
+
+const data: { label: string; icon: (cls?: string) => TemplateResult }[][] = [
+  [
+    { label: 'Customize Page', icon: Settings2Icon },
+    { label: 'Turn into wiki', icon: FileTextIcon },
+  ],
+  [
+    { label: 'Copy Link', icon: LinkIcon },
+    { label: 'Duplicate', icon: CopyIcon },
+    { label: 'Move to', icon: CornerUpRightIcon },
+    { label: 'Move to Trash', icon: Trash2Icon },
+  ],
+  [
+    { label: 'Undo', icon: CornerUpLeftIcon },
+    { label: 'View analytics', icon: ChartLineIcon },
+    { label: 'Version History', icon: GalleryVerticalEndIcon },
+    { label: 'Show delete pages', icon: TrashIcon },
+    { label: 'Notifications', icon: BellIcon },
+  ],
+  [
+    { label: 'Import', icon: ArrowUpIcon },
+    { label: 'Export', icon: ArrowDownIcon },
+  ],
+];
+
+export function navActions() {
+  return html`
+    <div class="flex items-center gap-2 text-sm">
+      <div class="hidden font-medium text-muted-foreground md:inline-block">Edit Oct 08</div>
+      <button type="button" data-slot="button" aria-label="Add to favorites" class=${cn(buttonClass({ variant: 'ghost', size: 'icon' }), 'h-7 w-7')}>
+        ${StarIcon()}
+      </button>
+      <button type="button" data-slot="button" popovertarget="nav-actions" aria-haspopup="dialog" aria-label="More actions" class=${cn(buttonClass({ variant: 'ghost', size: 'icon' }), 'h-7 w-7')}>
+        ${MoreHorizontalIcon()}
+      </button>
+      <div id="nav-actions" popover role="dialog" aria-label="Page actions" data-slot="popover-content" class=${cn(popoverContentClass({ side: 'bottom', align: 'end' }), 'w-56 overflow-hidden rounded-lg p-0')}>
+        <ui-sidebar collapsible="none" class="bg-transparent">
+          <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+            ${data.map((group) => html`
+              <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'border-b last:border-none')}>
+                <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'gap-0')}>
+                  <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+                    ${group.map((item) => html`
+                      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                        <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+                          ${item.icon()} <span>${item.label}</span>
+                        </button>
+                      </li>
+                    `)}
+                  </ul>
+                </div>
+              </div>
+            `)}
+          </div>
+        </ui-sidebar>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-10/components/nav-favorites.ts

@@ -0,0 +1,66 @@
+/**
+ * The sidebar-10 favorites: one link per favourite page, each with a "More"
+ * menu that shows on hover, and a trailing "More" item. Hidden while the
+ * sidebar is collapsed to icons. A fragment helper; the menus are the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-10.
+ *
+ * Each "More" button sits right after its link, a sibling of it, because the
+ * kit's styles place it with `peer-*` selectors that need exactly that. The
+ * menu names it through `trigger="<id>"`, so the ids must be unique on the page.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { ArrowUpRightIcon, LinkIcon, MoreHorizontalIcon, StarOffIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+export interface Favorite {
+  name: string;
+  url: string;
+  emoji: string;
+}
+
+export function navFavorites({ favorites }: { favorites: Favorite[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'group-data-[collapsible=icon]:hidden')}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Favorites</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${favorites.map((item, i) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href=${item.url} title=${item.name} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+              <span>${item.emoji}</span>
+              <span>${item.name}</span>
+            </a>
+            <button type="button" id=${`nav-favorite-more-${i}`} data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'aria-expanded:bg-muted')}>
+              ${MoreHorizontalIcon()}
+              <span class="sr-only">More</span>
+            </button>
+            <ui-dropdown-menu trigger=${`nav-favorite-more-${i}`}>
+              <ui-dropdown-menu-content class="w-56 rounded-lg" side="right" align="start">
+                <ui-dropdown-menu-item>${StarOffIcon('text-muted-foreground')}<span>Remove from Favorites</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item>${LinkIcon('text-muted-foreground')}<span>Copy Link</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>${ArrowUpRightIcon('text-muted-foreground')}<span>Open in New Tab</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item>${Trash2Icon('text-muted-foreground')}<span>Delete</span></ui-dropdown-menu-item>
+              </ui-dropdown-menu-content>
+            </ui-dropdown-menu>
+          </li>
+        `)}
+        <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+          <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'text-sidebar-foreground/70')}>
+            ${MoreHorizontalIcon()}
+            <span>More</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-10/components/nav-main.ts

@@ -0,0 +1,37 @@
+/**
+ * The sidebar-10 main nav: search, the assistant, home and the inbox, as
+ * plain links. A fragment helper. Ported from shadcn/ui's sidebar-10.
+ *
+ * Mark the current page's link `data-active="true"` and `aria-current="page"`
+ * (the `isActive` field below does it for the sample).
+ */
+import { html, nothing } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+
+export interface NavMainItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+  isActive?: boolean;
+  badge?: string;
+}
+
+export function navMain({ items }: { items: NavMainItem[] }) {
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      ${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.icon()}
+            <span>${item.title}</span>
+          </a>
+        </li>
+      `)}
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-10/components/nav-secondary.ts

@@ -0,0 +1,43 @@
+/**
+ * The sidebar-10 secondary nav: calendar, settings, templates, trash and
+ * help at the bottom of the sidebar, each an optional badge. A fragment
+ * helper. Ported from shadcn/ui's sidebar-10.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarMenuBadgeClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+
+export interface NavSecondaryItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+  badge?: string;
+}
+
+export function navSecondary({ items, class: cls }: { items: NavSecondaryItem[]; class?: string }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), cls)}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${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" class=${sidebarMenuButtonClass()}>
+                ${item.icon()}
+                <span>${item.title}</span>
+              </a>
+              ${item.badge ? html`<div data-slot="sidebar-menu-badge" data-sidebar="menu-badge" class=${sidebarMenuBadgeClass()}>${item.badge}</div>` : ''}
+            </li>
+          `)}
+        </ul>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-10/components/nav-workspaces.ts

@@ -0,0 +1,78 @@
+/**
+ * The sidebar-10 workspaces: one link per workspace with a chevron that
+ * shows its pages and a "+" to add one, both showing on hover, and a
+ * trailing "More" item. A fragment helper; each workspace is a native
+ * `<details>` whose `<summary>` is the chevron, so its pages open and close
+ * with no JavaScript. Ported from shadcn/ui's sidebar-10.
+ *
+ * The "+" button is a placeholder: make it a link or a form posting to the
+ * action that creates a page.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronRightIcon, MoreHorizontalIcon, PlusIcon } from '../../../lib/icons.ts';
+
+export interface Workspace {
+  name: string;
+  emoji: string;
+  pages: { name: string; url: string; emoji: string }[];
+}
+
+export function navWorkspaces({ workspaces }: { workspaces: Workspace[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Workspaces</div>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${workspaces.map((workspace) => 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" class=${sidebarMenuButtonClass()}>
+                <span>${workspace.emoji}</span>
+                <span>${workspace.name}</span>
+              </a>
+              <details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')}>
+                <summary data-slot="sidebar-menu-action" data-sidebar="menu-action" aria-label=${`Show the pages in ${workspace.name}`} class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'top-1.5 left-2 h-5 cursor-pointer list-none bg-sidebar-accent text-sidebar-accent-foreground group-open/collapsible:rotate-90 group-open/collapsible:opacity-100 [&::-webkit-details-marker]:hidden')}>
+                  ${ChevronRightIcon()}
+                </summary>
+                <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+                  <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                    ${workspace.pages.map((page) => html`
+                      <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                        <a href=${page.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" class=${sidebarMenuSubButtonClass()}>
+                          <span>${page.emoji}</span>
+                          <span>${page.name}</span>
+                        </a>
+                      </li>
+                    `)}
+                  </ul>
+                </div>
+              </details>
+              <button type="button" data-slot="sidebar-menu-action" data-sidebar="menu-action" aria-label=${`Add a page to ${workspace.name}`} class=${sidebarMenuActionClass({ showOnHover: true })}>
+                ${PlusIcon()}
+              </button>
+            </li>
+          `)}
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'text-sidebar-foreground/70')}>
+              ${MoreHorizontalIcon()}
+              <span>More</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-10/components/team-switcher.ts

@@ -0,0 +1,63 @@
+/**
+ * The sidebar-10 team switcher: a compact button with the active team's logo
+ * and name, opening a menu of the teams below it. A fragment helper; the menu
+ * is the kit's `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-10.
+ *
+ * It renders the first team as the active one. shadcn keeps the choice in
+ * React state; in your app the active team is server data (a session value or
+ * a route segment), so render the right one on the server and make each item
+ * a link or a form that switches it.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronDownIcon, PlusIcon } from '../../../lib/icons.ts';
+
+export interface Team {
+  name: string;
+  logo: (cls?: string) => TemplateResult;
+  plan: string;
+}
+
+export function teamSwitcher({ teams }: { teams: Team[] }) {
+  const active = teams[0];
+  if (!active) return '';
+  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="default" class=${cn(sidebarMenuButtonClass(), 'w-fit px-1.5')}>
+              <div class="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                ${active.logo()}
+              </div>
+              <span class="truncate font-medium">${active.name}</span>
+              ${ChevronDownIcon('opacity-50')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-64 rounded-lg" side="bottom" align="start">
+            <ui-dropdown-menu-label class="text-xs text-muted-foreground">Teams</ui-dropdown-menu-label>
+            ${teams.map((team, index) => html`
+              <ui-dropdown-menu-item class="gap-2 p-2">
+                <div class="flex size-6 items-center justify-center rounded-xs border">${team.logo()}</div>
+                ${team.name}
+                <ui-dropdown-menu-shortcut>⌘${index + 1}</ui-dropdown-menu-shortcut>
+              </ui-dropdown-menu-item>
+            `)}
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item class="gap-2 p-2">
+              <div class="flex size-6 items-center justify-center rounded-md border bg-background">${PlusIcon('size-4')}</div>
+              <div class="font-medium text-muted-foreground">Add team</div>
+            </ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

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

@@ -0,0 +1,46 @@
+/**
+ * The sidebar-10 block's page: a notes-app sidebar beside a header with the
+ * page title and its actions menu, over a placeholder document.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-10` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-10.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import { breadcrumbItemClass, breadcrumbListClass, breadcrumbPageClass } from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { navActions } from './components/nav-actions.ts';
+
+export const metadata: Metadata = { title: 'Project Management & Task Tracking' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="flex h-14 shrink-0 items-center gap-2">
+          <div class="flex flex-1 items-center gap-2 px-3">
+            <ui-sidebar-trigger></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=${breadcrumbItemClass()}>
+                  <span data-slot="breadcrumb-page" class=${cn(breadcrumbPageClass(), 'line-clamp-1')} aria-current="page">Project Management & Task Tracking</span>
+                </li>
+              </ol>
+            </nav>
+          </div>
+          <div class="ml-auto px-3">${navActions()}</div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 px-4 py-10">
+          <div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50"></div>
+          <div class="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50"></div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

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

@@ -0,0 +1,114 @@
+/**
+ * The sidebar-11 app sidebar: a list of changed files with their git state,
+ * and the project's files as a collapsible tree. A fragment helper, so the
+ * markup is rendered by the server; each folder is a native `<details>`, so
+ * the tree opens and closes with no JavaScript. Ported from shadcn/ui's
+ * sidebar-11.
+ *
+ * The data below is sample data. Replace it with your own, and make each
+ * file a link to where it opens.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarMenuBadgeClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubClass,
+} from '../../../components/sidebar.ts';
+import { ChevronRightIcon, FileIcon, FolderIcon } from '../../../lib/icons.ts';
+
+/** A file name, or a folder as `[name, ...children]`. */
+type TreeItem = string | TreeItem[];
+
+// This is sample data.
+const data: { changes: { file: string; state: string }[]; tree: TreeItem[] } = {
+  changes: [
+    { file: 'README.md', state: 'M' },
+    { file: 'api/hello/route.ts', state: 'U' },
+    { file: 'app/layout.tsx', state: 'M' },
+  ],
+  tree: [
+    ['app', ['api', ['hello', ['route.ts']], 'page.tsx', 'layout.tsx', ['blog', ['page.tsx']]]],
+    ['components', ['ui', 'button.tsx', 'card.tsx'], 'header.tsx', 'footer.tsx'],
+    ['lib', ['util.ts']],
+    ['public', 'favicon.ico', 'vercel.svg'],
+    '.eslintrc.json',
+    '.gitignore',
+    'next.config.js',
+    'tailwind.config.js',
+    'package.json',
+    'README.md',
+  ],
+};
+
+function tree(item: TreeItem): unknown {
+  const [name, ...items] = Array.isArray(item) ? item : [item];
+  if (!items.length) {
+    const active = name === 'button.tsx';
+    return html`
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${active ? 'true' : 'false'} class=${cn(sidebarMenuButtonClass(), 'data-[active=true]:bg-transparent')}>
+          ${FileIcon()}
+          ${name}
+        </button>
+      </li>
+    `;
+  }
+  return html`
+    <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+      <details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible [&[open]>summary>svg:first-child]:rotate-90')} ?open=${name === 'components' || name === 'ui'}>
+        <summary data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'cursor-pointer list-none [&::-webkit-details-marker]:hidden')}>
+          ${ChevronRightIcon('transition-transform')}
+          ${FolderIcon()}
+          ${name}
+        </summary>
+        <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+          <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+            ${items.map((sub) => tree(sub))}
+          </ul>
+        </div>
+      </details>
+    </li>
+  `;
+}
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+          <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Changes</div>
+          <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+            <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+              ${data.changes.map((item) => html`
+                <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                  <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+                    ${FileIcon()}
+                    ${item.file}
+                  </button>
+                  <div data-slot="sidebar-menu-badge" data-sidebar="menu-badge" class=${sidebarMenuBadgeClass()}>${item.state}</div>
+                </li>
+              `)}
+            </ul>
+          </div>
+        </div>
+        <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+          <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Files</div>
+          <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+            <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+              ${data.tree.map((item) => tree(item))}
+            </ul>
+          </div>
+        </div>
+      </div>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

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

@@ -0,0 +1,63 @@
+/**
+ * The sidebar-11 block's page: a sidebar with a collapsible file tree,
+ * beside a header with the open file's path and a placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-11` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-11.
+ */
+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' };
+
+const separator = html`<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>`;
+
+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="#">components</a>
+              </li>
+              ${separator}
+              <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">ui</a>
+              </li>
+              ${separator}
+              <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">button.tsx</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>
+  `;
+}