@elabs-ai/components-ui 4.0.0

package/dist/lib/cn.d.ts

@@ -0,0 +1,10 @@
+import { ClassValue } from 'clsx';
+
+/**
+ * Merge class names with conflict resolution. `clsx` handles conditionals;
+ * `tailwind-merge` ensures later Tailwind utilities win (e.g. `p-2 p-4` -> `p-4`).
+ * Use this in every component that accepts a `className` prop.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/cn.js

@@ -0,0 +1,20 @@
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var TEXT_ROLES = ["display", "title", "subtitle", "body", "caption", "meta", "kpi", "code"];
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: TEXT_ROLES }],
+      // `font-display` is the display-face seam (sibling of font-mono, #187).
+      "font-family": [{ font: ["display"] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * The semantic type roles (`--text-<role>` tokens → `text-<role>` utilities, #187).\n * tailwind-merge doesn't know custom theme keys, so without registration it\n * classifies `text-title` as a text COLOR — and `cn(\"text-kpi\", \"text-foreground\")`\n * would silently drop the role. Registering the roles in the `font-size` class\n * group makes role-vs-role and role-vs-raw-size conflicts resolve correctly while\n * keeping role + color independent.\n */\nconst TEXT_ROLES = [\"display\", \"title\", \"subtitle\", \"body\", \"caption\", \"meta\", \"kpi\", \"code\"];\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: TEXT_ROLES }],\n      // `font-display` is the display-face seam (sibling of font-mono, #187).\n      \"font-family\": [{ font: [\"display\"] }],\n    },\n  },\n});\n\n/**\n * Merge class names with conflict resolution. `clsx` handles conditionals;\n * `tailwind-merge` ensures later Tailwind utilities win (e.g. `p-2 p-4` -> `p-4`).\n * Use this in every component that accepts a `className` prop.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAUpC,IAAM,aAAa,CAAC,WAAW,SAAS,YAAY,QAAQ,WAAW,QAAQ,OAAO,MAAM;AAE5F,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,EAAE,MAAM,WAAW,CAAC;AAAA;AAAA,MAElC,eAAe,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC;AAAA,IACvC;AAAA,EACF;AACF,CAAC;AAOM,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@elabs-ai/components-ui",
+  "version": "4.0.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mreimitz/elabs-components.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./lib/cn": {
+      "types": "./dist/lib/cn.d.ts",
+      "default": "./dist/lib/cn.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-direction": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-toolbar": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-virtual": "^3.14.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "embla-carousel-react": "^8.5.1",
+    "input-otp": "^1.4.1",
+    "lucide-react": "^0.577.0",
+    "react-day-picker": "^9.4.4",
+    "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^2.1.7",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.6.0",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "@elabs-ai/components-tokens": "4.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.2",
+    "@elabs-ai/components-eslint-config": "0.1.0",
+    "@elabs-ai/components-typescript-config": "0.1.0",
+    "@elabs-ai/components-tokens": "4.0.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist .turbo coverage"
+  }
+}

package/src/blocks/sidebar-02/app-sidebar.tsx

@@ -0,0 +1,160 @@
+/** sidebar-02 — dashboard sidebar (copy-owned block). Adapted from blocks.so
+ *  (ephraim duncan). framer-motion removed (plain fade); next/link -> <a>. */
+"use client";
+
+import {
+  Activity,
+  DollarSign,
+  Home,
+  Infinity as InfinityIcon,
+  Link as LinkIcon,
+  Package2,
+  Percent,
+  PieChart,
+  Settings,
+  ShoppingBag,
+  Sparkles,
+  Store,
+  TrendingUp,
+  Users,
+} from "lucide-react";
+import { AppSidebar, SidebarTrigger, cn, useSidebar } from "@elabs-ai/components-ui";
+import { Logo } from "./logo";
+import DashboardNavigation, { type Route } from "./nav-main";
+import { NotificationsPopover } from "./nav-notifications";
+import { TeamSwitcher } from "./team-switcher";
+
+const sampleNotifications = [
+  {
+    id: "1",
+    fallback: "OM",
+    text: "New order received.",
+    time: "10m ago",
+  },
+  {
+    id: "2",
+    fallback: "JL",
+    text: "Server upgrade completed.",
+    time: "1h ago",
+  },
+  {
+    id: "3",
+    fallback: "HH",
+    text: "New user signed up.",
+    time: "2h ago",
+  },
+];
+
+const dashboardRoutes: Route[] = [
+  { id: "home", title: "Home", icon: <Home className="size-4" />, link: "#" },
+  {
+    id: "products",
+    title: "Products",
+    icon: <Package2 className="size-4" />,
+    link: "#",
+    subs: [
+      { title: "Catalogue", link: "#" },
+      { title: "Checkout Links", link: "#" },
+      { title: "Discounts", link: "#" },
+    ],
+  },
+  {
+    id: "usage-billing",
+    title: "Usage Billing",
+    icon: <PieChart className="size-4" />,
+    link: "#",
+    subs: [
+      { title: "Meters", link: "#" },
+      { title: "Events", link: "#" },
+    ],
+  },
+  { id: "benefits", title: "Benefits", icon: <Sparkles className="size-4" />, link: "#" },
+  { id: "customers", title: "Customers", icon: <Users className="size-4" />, link: "#" },
+  {
+    id: "sales",
+    title: "Sales",
+    icon: <ShoppingBag className="size-4" />,
+    link: "#",
+    subs: [
+      { title: "Orders", link: "#" },
+      { title: "Subscriptions", link: "#" },
+    ],
+  },
+  { id: "storefront", title: "Storefront", icon: <Store className="size-4" />, link: "#" },
+  { id: "analytics", title: "Analytics", icon: <TrendingUp className="size-4" />, link: "#" },
+  {
+    id: "finance",
+    title: "Finance",
+    icon: <DollarSign className="size-4" />,
+    link: "#",
+    subs: [
+      { title: "Incoming", link: "#" },
+      { title: "Outgoing", link: "#" },
+      { title: "Payout Account", link: "#" },
+    ],
+  },
+  {
+    id: "settings",
+    title: "Settings",
+    icon: <Settings className="size-4" />,
+    link: "#",
+    subs: [
+      { title: "General", link: "#" },
+      { title: "Webhooks", link: "#" },
+      { title: "Custom Fields", link: "#" },
+    ],
+  },
+];
+
+// Reference icons retained for parity with the source data shape.
+void Activity;
+void InfinityIcon;
+void LinkIcon;
+void Percent;
+
+const teams = [
+  { name: "Alpha Inc.", logo: Logo, plan: "Free" },
+  { name: "Beta Corp.", logo: Logo, plan: "Free" },
+  { name: "Gamma Tech", logo: Logo, plan: "Free" },
+];
+
+export function DashboardSidebar() {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+
+  const header = (
+    <div
+      className={cn(
+        "flex md:pt-3.5",
+        isCollapsed
+          ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
+          : "flex-row items-center justify-between",
+      )}
+    >
+      <a href="#" className="flex items-center gap-2">
+        <Logo className="h-8 w-8" />
+        {!isCollapsed && <span className="font-semibold text-foreground">Acme</span>}
+      </a>
+      <div
+        className={cn(
+          "flex items-center gap-2 animate-in fade-in",
+          isCollapsed ? "flex-row md:flex-col-reverse" : "flex-row",
+        )}
+      >
+        <NotificationsPopover notifications={sampleNotifications} />
+        <SidebarTrigger />
+      </div>
+    </div>
+  );
+
+  return (
+    <AppSidebar
+      variant="inset"
+      collapsible="icon"
+      header={header}
+      footer={<TeamSwitcher teams={teams} />}
+    >
+      <DashboardNavigation routes={dashboardRoutes} className="gap-4 px-2 py-4" />
+    </AppSidebar>
+  );
+}

package/src/blocks/sidebar-02/logo.tsx

@@ -0,0 +1,18 @@
+/** sidebar-02 — Acme logo mark (copy-owned block). */
+import type { SVGProps } from "react";
+
+export const Logo = (props: SVGProps<SVGSVGElement>) => (
+  <svg fill="currentColor" height="48" viewBox="0 0 40 48" width="40" {...props}>
+    <clipPath id="acme-a">
+      <path d="m0 0h40v48h-40z" />
+    </clipPath>
+    <g clipPath="url(#acme-a)">
+      <path d="m25.0887 5.05386-3.933-1.05386-3.3145 12.3696-2.9923-11.16736-3.9331 1.05386 3.233 12.0655-8.05262-8.0526-2.87919 2.8792 8.83271 8.8328-10.99975-2.9474-1.05385625 3.933 12.01860625 3.2204c-.1376-.5935-.2104-1.2119-.2104-1.8473 0-4.4976 3.646-8.1436 8.1437-8.1436 4.4976 0 8.1436 3.646 8.1436 8.1436 0 .6313-.0719 1.2459-.2078 1.8359l10.9227 2.9267 1.0538-3.933-12.0664-3.2332 11.0005-2.9476-1.0539-3.933-12.0659 3.233 8.0526-8.0526-2.8792-2.87916-8.7102 8.71026z" />
+      <path d="m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z" />
+      <path d="m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z" />
+      <path d="m21.9807 32.2274c-.65.1671-1.3313.2559-2.0334.2559-.7522 0-1.4806-.102-2.1721-.2929l-2.882 10.7558 3.933 1.0538z" />
+      <path d="m17.6361 32.1507c-1.3796-.4076-2.6067-1.1707-3.5751-2.1833l-7.9325 7.9325 2.87919 2.8792z" />
+      <path d="m13.9956 29.8973c-.9518-1.019-1.6451-2.2826-1.9751-3.6862l-10.95836 2.9363 1.05385 3.933z" />
+    </g>
+  </svg>
+);

package/src/blocks/sidebar-02/nav-main.tsx

@@ -0,0 +1,13 @@
+/**
+ * sidebar-02 — primary navigation.
+ * Re-exports the shared `NavMain` primitive from `@elabs-ai/components-ui` so this block
+ * no longer maintains its own copy (issue #99).
+ *
+ * The block-local alias `DashboardNavigation` is preserved for back-compat
+ * so `app-sidebar.tsx` does not need to change its import name.
+ */
+export { NavMain as default, NavMain as DashboardNavigation } from "@elabs-ai/components-ui";
+export type {
+  NavMainProps as DashboardNavigationProps,
+  NavMainRoute as Route,
+} from "@elabs-ai/components-ui";

package/src/blocks/sidebar-02/nav-notifications.tsx

@@ -0,0 +1,7 @@
+/**
+ * sidebar-02 — notifications popover.
+ * Re-exports the shared `NavNotifications` primitive from `@elabs-ai/components-ui` so this
+ * block no longer maintains its own copy (issue #99).
+ */
+export { NavNotifications as NotificationsPopover } from "@elabs-ai/components-ui";
+export type { NavNotificationsProps, NavNotification } from "@elabs-ai/components-ui";

package/src/blocks/sidebar-02/sidebar-02.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SidebarInset, SidebarProvider } from "@elabs-ai/components-ui";
+import { DashboardSidebar } from "./app-sidebar";
+
+const meta = {
+  title: "Layout/App Shell/Dashboard",
+  parameters: { layout: "fullscreen" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <div className="relative flex h-dvh w-full">
+        <DashboardSidebar />
+        <SidebarInset className="flex flex-col p-6 text-body text-muted-foreground">
+          Dashboard content area (collapsible icon sidebar — press ⌘/Ctrl+B).
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  ),
+};

package/src/blocks/sidebar-02/team-switcher.tsx

@@ -0,0 +1,7 @@
+/**
+ * sidebar-02 — team switcher.
+ * Re-exports the shared `TeamSwitcher` primitive from `@elabs-ai/components-ui` so this block
+ * no longer maintains its own copy (issue #99).
+ */
+export { TeamSwitcher } from "@elabs-ai/components-ui";
+export type { TeamSwitcherProps, TeamSwitcherTeam } from "@elabs-ai/components-ui";

package/src/blocks/sidebar-04/app-sidebar.tsx

@@ -0,0 +1,236 @@
+/** sidebar-04 — double-sided mail sidebar (copy-owned block). Adapted from
+ *  blocks.so (ephraim duncan). Tabler icons mapped to lucide. */
+"use client";
+
+import * as React from "react";
+import { Archive, Box, Clock, Flag, Inbox, Star } from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@elabs-ai/components-ui";
+import { NavUser } from "@elabs-ai/components-ui";
+import { useMail } from "./mail-context";
+
+const data = {
+  user: { name: "ephraim", email: "ephraim@blocks.so", avatar: "" },
+  navMain: [
+    { title: "Inbox", url: "#", icon: Inbox, isActive: true },
+    { title: "Starred", url: "#", icon: Star, isActive: false },
+    { title: "Important", url: "#", icon: Flag, isActive: false },
+    { title: "Scheduled", url: "#", icon: Clock, isActive: false },
+    { title: "Archive", url: "#", icon: Archive, isActive: false },
+  ],
+  labels: [
+    { title: "Personal", color: "bg-green-400 dark:bg-green-300" },
+    { title: "Work", color: "bg-blue-400 dark:bg-blue-300" },
+    { title: "Travel", color: "bg-orange-400 dark:bg-orange-300" },
+    { title: "Receipts", color: "bg-purple-400 dark:bg-purple-300" },
+  ],
+  mails: [
+    {
+      name: "Nora Patel",
+      email: "nora@acme.co",
+      subject: "Welcome to Acme Mail",
+      date: "08:15 AM",
+      teaser:
+        "Hi there — here's a quick tour of your new inbox.\nPin, label, and schedule messages to stay organized.",
+    },
+    {
+      name: "Stripe",
+      email: "no-reply@stripe.com",
+      subject: "Your payout has arrived",
+      date: "Yesterday",
+      teaser:
+        "A payout of $3,245.90 was sent to your bank account.\nView details in your dashboard.",
+    },
+    {
+      name: "GitHub",
+      email: "noreply@github.com",
+      subject: "New activity on acme/app",
+      date: "Tue",
+      teaser:
+        "3 pull requests need your review. CI passed on main.\nClick to open the review queue.",
+    },
+    {
+      name: "Ava Chen",
+      email: "ava.chen@example.com",
+      subject: "Agenda for Friday standup",
+      date: "Mon",
+      teaser:
+        "Let's cover onboarding, billing bugs, and Q4 goals.\nReply with anything you want to add.",
+    },
+    {
+      name: "Figma",
+      email: "updates@figma.com",
+      subject: "What's new in Figma",
+      date: "Sep 12",
+      teaser:
+        "Variables, auto layout improvements, and dev mode updates.\nWatch the recap to learn more.",
+    },
+    {
+      name: "Linear",
+      email: "bot@linear.app",
+      subject: "[ACME-432] Edit modal broken",
+      date: "Sep 11",
+      teaser: "Issue created by Wendy. Repro steps included.\nSeverity: high, priority: P1.",
+    },
+    {
+      name: "Airbnb",
+      email: "booking@airbnb.com",
+      subject: "Your trip to Kyoto",
+      date: "Sep 10",
+      teaser: "Get ready for your stay. Check-in details and local recommendations inside.",
+    },
+    {
+      name: "Notion",
+      email: "team@notion.so",
+      subject: "Weekly team recap",
+      date: "Sep 09",
+      teaser:
+        "Marketing shipped pricing page revamp. Eng closed 14 issues.\nSee full notes in the doc.",
+    },
+  ],
+};
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const [activeItem, setActiveItem] = React.useState(data.navMain[0]);
+  const [mails, setMails] = React.useState(data.mails);
+  const [query, setQuery] = React.useState("");
+  const { setOpen } = useSidebar();
+  const { setSelectedMail } = useMail();
+
+  const filteredMails = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return mails;
+    return mails.filter((m) =>
+      [m.name, m.email, m.subject, m.teaser].join("\n").toLowerCase().includes(q),
+    );
+  }, [mails, query]);
+
+  return (
+    <div className="flex" {...props}>
+      {/* Icon rail */}
+      <Sidebar
+        style={{ "--sidebar-width": "12rem" } as React.CSSProperties}
+        collapsible="none"
+        className="border-e p-2 px-1"
+      >
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
+                <a href="#">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-accent text-sidebar-accent-foreground">
+                    <Box className="size-4" />
+                  </div>
+                  <div className="grid flex-1 text-start text-body leading-tight">
+                    <span className="truncate font-medium">Acme Inc</span>
+                    <span className="truncate text-meta">Enterprise</span>
+                  </div>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {data.navMain.map((item) => (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      onClick={() => {
+                        setActiveItem(item);
+                        const shuffled = [...data.mails].sort(() => Math.random() - 0.5);
+                        setMails(shuffled.slice(0, Math.max(5, Math.floor(Math.random() * 8) + 1)));
+                        setOpen(true);
+                      }}
+                      isActive={activeItem?.title === item.title}
+                      className="px-2.5 md:px-2"
+                    >
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+          <SidebarGroup>
+            <SidebarGroupLabel className="px-1.5 text-meta md:px-0">Labels</SidebarGroupLabel>
+            <SidebarGroupContent className="px-1.5 md:px-0">
+              <SidebarMenu>
+                {data.labels.map((label) => (
+                  <SidebarMenuItem key={label.title}>
+                    <SidebarMenuButton asChild className="px-2.5 md:px-2">
+                      <div className="flex items-center gap-3">
+                        <div className={`h-3 w-3 rounded ${label.color}`} />
+                        <span>{label.title}</span>
+                      </div>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={data.user} />
+        </SidebarFooter>
+      </Sidebar>
+
+      {/* Mail list */}
+      <Sidebar collapsible="none" className="hidden min-w-96 flex-1 border-e md:flex">
+        <SidebarHeader className="gap-3.5 border-b p-4">
+          <div className="flex w-full items-center justify-between">
+            <div className="text-subtitle font-medium text-foreground">{activeItem?.title}</div>
+          </div>
+          <SidebarInput
+            placeholder="Type to search..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup className="px-0 pt-0">
+            <SidebarGroupContent>
+              {filteredMails.length === 0 && (
+                <div className="p-4 text-body text-muted-foreground">No results</div>
+              )}
+              {filteredMails.map((mail) => (
+                <a
+                  href="#"
+                  key={mail.email}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setSelectedMail(mail);
+                  }}
+                  className="flex flex-col items-start gap-2 whitespace-nowrap border-b p-4 text-body leading-tight hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                >
+                  <div className="flex w-full items-center gap-2">
+                    <span>{mail.name}</span>
+                    <span className="ms-auto text-meta">{mail.date}</span>
+                  </div>
+                  <span className="font-medium">{mail.subject}</span>
+                  <span className="line-clamp-2 w-[260px] whitespace-break-spaces text-meta">
+                    {mail.teaser}
+                  </span>
+                </a>
+              ))}
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </div>
+  );
+}

package/src/blocks/sidebar-04/mail-context.tsx

@@ -0,0 +1,29 @@
+/** sidebar-04 — mail selection context (copy-owned block). */
+"use client";
+
+import * as React from "react";
+
+export type Mail = {
+  name: string;
+  email: string;
+  subject: string;
+  date: string;
+  teaser: string;
+  labels?: string[];
+};
+
+type MailContextValue = { selectedMail: Mail | null; setSelectedMail: (mail: Mail | null) => void };
+
+const MailContext = React.createContext<MailContextValue | undefined>(undefined);
+
+export function MailProvider({ children }: { children: React.ReactNode }) {
+  const [selectedMail, setSelectedMail] = React.useState<Mail | null>(null);
+  const value = React.useMemo(() => ({ selectedMail, setSelectedMail }), [selectedMail]);
+  return <MailContext.Provider value={value}>{children}</MailContext.Provider>;
+}
+
+export function useMail() {
+  const ctx = React.useContext(MailContext);
+  if (!ctx) throw new Error("useMail must be used within MailProvider");
+  return ctx;
+}

package/src/blocks/sidebar-04/nav-user.tsx

@@ -0,0 +1,6 @@
+/**
+ * sidebar-04 — account menu. The shared `NavUser` nav primitive lives in
+ * `@elabs-ai/components-ui` (#99); this block re-exports it rather than forking a local copy
+ * (which drifts). The block's `app-sidebar.tsx` already imports it from `@elabs-ai/components-ui`.
+ */
+export { NavUser } from "@elabs-ai/components-ui";