@elabs-ai/components-ui 4.0.0

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

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import { SidebarInset, SidebarProvider } from "@elabs-ai/components-ui";
+import { AppSidebar } from "./app-sidebar";
+import { MailProvider, useMail } from "./mail-context";
+
+function MailPreview() {
+  const { selectedMail } = useMail();
+  if (!selectedMail) {
+    return (
+      <div className="flex h-full items-center justify-center text-body text-muted-foreground">
+        Select an email to preview
+      </div>
+    );
+  }
+  return (
+    <div className="flex h-full flex-col">
+      <div className="border-b p-4">
+        <div className="text-title font-semibold">{selectedMail.subject}</div>
+        <div className="text-body text-muted-foreground">
+          From: {selectedMail.name} ({selectedMail.email})
+        </div>
+      </div>
+      <div className="whitespace-pre-wrap p-4 text-body">{`${selectedMail.teaser}\n\nThis is a sample message body for the selected email.`}</div>
+    </div>
+  );
+}
+
+const meta = {
+  title: "Layout/App Shell/Mail",
+  parameters: { layout: "fullscreen" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <MailProvider>
+        <div className="flex h-dvh w-full">
+          <AppSidebar />
+          <SidebarInset>
+            <div className="m-2 flex-1 rounded-xl border">
+              <MailPreview />
+            </div>
+          </SidebarInset>
+        </div>
+      </MailProvider>
+    </SidebarProvider>
+  ),
+};
+
+/**
+ * #397: `layout-app-shell-mail--default` was the worst-measured real screen
+ * for the density type dial (10 of 49 scaling text nodes) because
+ * `app-sidebar.tsx`'s 8 raw `text‑sm`/`text‑xs`/`text‑base` utilities were
+ * immune to `data-density` — see `.claude/rules/styling-and-tokens.md` "Type
+ * is a role, not a size". All 8 now read a `text-<role>` utility instead, so
+ * every one of these text nodes scales. Two columns pin `data-density` on a
+ * plain wrapping div — NOT `<ThemeProvider>`, which writes `data-density` to
+ * `document.documentElement` and would race two columns — mirroring
+ * `Foundations/Typography → Density scale`'s pattern. Representative sample:
+ * one node per converted role class is enough, since every site sharing a
+ * role resolves to the identical computed style.
+ */
+export const DensityComparison: Story = {
+  name: "Density comparison (#397)",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The 8 raw `text‑sm`/`text‑xs`/`text‑base` sites in `app-sidebar.tsx` " +
+          "now read `text-body`/`text-meta`/`text-subtitle`, so they scale with " +
+          "`data-density` like the rest of the shell. `text‑sm` → `text-body` " +
+          "and `text‑base` → `text-subtitle` are documented no-ops (identical " +
+          "size + line-height); `text‑xs` → `text-meta` also adopts " +
+          "`font-weight: 500` + `letter-spacing: 0.01em` (a real, deliberate " +
+          "shift, not a no-op).",
+      },
+    },
+  },
+  render: () => (
+    <div className="flex gap-8">
+      {(["compact", "comfortable", "spacious"] as const).map((mode) => (
+        <div data-density={mode} data-testid={`density-${mode}`} key={mode}>
+          <p className="mb-2 text-caption text-muted-foreground">{mode}</p>
+          <div className="flex h-[420px] w-[520px] overflow-hidden rounded-lg border">
+            <SidebarProvider>
+              <MailProvider>
+                <AppSidebar />
+              </MailProvider>
+            </SidebarProvider>
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const px = (el: Element) => parseFloat(getComputedStyle(el).fontSize);
+    const compact = canvasElement.querySelector('[data-testid="density-compact"]');
+    const comfortable = canvasElement.querySelector('[data-testid="density-comfortable"]');
+    const spacious = canvasElement.querySelector('[data-testid="density-spacious"]');
+    expect(compact).not.toBeNull();
+    expect(comfortable).not.toBeNull();
+    expect(spacious).not.toBeNull();
+
+    // `text‑xs` → `text-meta` sites ("Enterprise", "Labels", mail date, mail
+    // teaser): 11.25px compact / 12px comfortable / 12.75px spacious,
+    // matching Gantt's timescale.
+    await waitFor(() => {
+      expect(compact?.querySelector(".text-meta")).not.toBeNull();
+      expect(comfortable?.querySelector(".text-meta")).not.toBeNull();
+      expect(spacious?.querySelector(".text-meta")).not.toBeNull();
+    });
+    const metaCompact = compact?.querySelector(".text-meta") as Element;
+    const metaComfortable = comfortable?.querySelector(".text-meta") as Element;
+    const metaSpacious = spacious?.querySelector(".text-meta") as Element;
+    expect(px(metaComfortable)).toBe(12);
+    expect(px(metaCompact)).toBe(11.25);
+    expect(px(metaSpacious)).toBe(12.75);
+    expect(px(metaCompact)).toBeLessThan(px(metaComfortable));
+    expect(px(metaSpacious)).toBeGreaterThan(px(metaComfortable));
+
+    // `text‑sm` → `text-body` sites ("Acme Inc" wrapper, mail row): a
+    // documented visual no-op at `comfortable` (14px, identical to a pre-#397
+    // build), still scales at `compact` (13.125px) / `spacious` (14.875px).
+    const bodyCompact = compact?.querySelector(".text-body") as Element;
+    const bodyComfortable = comfortable?.querySelector(".text-body") as Element;
+    const bodySpacious = spacious?.querySelector(".text-body") as Element;
+    expect(bodyCompact).not.toBeNull();
+    expect(bodyComfortable).not.toBeNull();
+    expect(bodySpacious).not.toBeNull();
+    expect(px(bodyComfortable)).toBe(14);
+    expect(px(bodyCompact)).toBe(13.125);
+    expect(px(bodySpacious)).toBe(14.875);
+
+    // `text‑base` → `text-subtitle` site (the mail-list header title, e.g.
+    // "Inbox"): 16px comfortable (identical to a pre-#397 `text‑base` build)
+    // / 15px compact / 17px spacious.
+    const subtitleCompact = compact?.querySelector(".text-subtitle") as Element;
+    const subtitleComfortable = comfortable?.querySelector(".text-subtitle") as Element;
+    const subtitleSpacious = spacious?.querySelector(".text-subtitle") as Element;
+    expect(subtitleCompact).not.toBeNull();
+    expect(subtitleComfortable).not.toBeNull();
+    expect(subtitleSpacious).not.toBeNull();
+    expect(px(subtitleComfortable)).toBe(16);
+    expect(px(subtitleCompact)).toBe(15);
+    expect(px(subtitleSpacious)).toBe(17);
+  },
+};

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

@@ -0,0 +1,375 @@
+/** sidebar-05 — double-sided sidebar (copy-owned block). Adapted from blocks.so
+ *  (ephraim duncan). Icons mapped from @tabler/icons-react to lucide-react. */
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import {
+  Activity,
+  Archive,
+  BarChart3,
+  Bell,
+  Bug,
+  ChevronRight,
+  Cloud,
+  Database,
+  Eye,
+  FileText,
+  Fingerprint,
+  Folder,
+  Folders,
+  Package2,
+  GitCommitHorizontal,
+  GitMerge,
+  GitPullRequest,
+  Globe,
+  Hexagon,
+  Home,
+  Key,
+  Lock,
+  Package,
+  PackageOpen,
+  Play,
+  Settings,
+  ShieldAlert,
+  ShieldCheck,
+  Sparkles,
+  Star,
+  Target,
+  Terminal,
+  User,
+  UserPlus,
+  Webhook,
+  Workflow,
+  X,
+} from "lucide-react";
+import {
+  NavUser,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  TeamSwitcher,
+  cn,
+} from "@elabs-ai/components-ui";
+
+const data = {
+  user: { name: "ephraim", email: "ephraim@blocks.so", avatar: "" },
+  teams: [
+    { name: "OpenAI", logo: Sparkles, plan: "Enterprise" },
+    { name: "Anthropic", logo: Star, plan: "Pro" },
+    { name: "Google", logo: Globe, plan: "Free" },
+    { name: "Meta", logo: Hexagon, plan: "Free" },
+  ],
+};
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  badge?: string;
+  hasSubItems?: boolean;
+  route?: string;
+  subItems?: {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    description?: string;
+  }[];
+}
+
+const sidebarItems: NavItem[] = [
+  {
+    id: "overview",
+    label: "Overview",
+    icon: Home,
+    hasSubItems: true,
+    subItems: [
+      {
+        id: "dashboard",
+        label: "Dashboard",
+        icon: BarChart3,
+        description: "Project overview and activity",
+      },
+      {
+        id: "activity",
+        label: "Activity",
+        icon: Activity,
+        description: "Recent commits and changes",
+      },
+      {
+        id: "insights",
+        label: "Insights",
+        icon: Target,
+        description: "Code analytics and metrics",
+      },
+    ],
+  },
+  {
+    id: "repositories",
+    label: "Repositories",
+    icon: Folders,
+    badge: "12",
+    hasSubItems: true,
+    subItems: [
+      {
+        id: "all-repos",
+        label: "All Repositories",
+        icon: Folder,
+        description: "Browse all your repositories",
+      },
+      { id: "starred", label: "Starred", icon: Star, description: "Your starred repositories" },
+      { id: "archived", label: "Archived", icon: Archive, description: "Archived repositories" },
+    ],
+  },
+  {
+    id: "pull-requests",
+    label: "Pull Requests",
+    icon: GitPullRequest,
+    badge: "3",
+    hasSubItems: true,
+    subItems: [
+      { id: "open-prs", label: "Open", icon: GitPullRequest, description: "Open pull requests" },
+      {
+        id: "review",
+        label: "Review Requests",
+        icon: Eye,
+        description: "PRs awaiting your review",
+      },
+      { id: "merged", label: "Merged", icon: GitMerge, description: "Recently merged PRs" },
+    ],
+  },
+  {
+    id: "issues",
+    label: "Issues",
+    icon: Bug,
+    badge: "7",
+    hasSubItems: true,
+    subItems: [
+      { id: "open-issues", label: "Open Issues", icon: Bug, description: "Active issues and bugs" },
+      {
+        id: "assigned",
+        label: "Assigned to Me",
+        icon: UserPlus,
+        description: "Issues assigned to you",
+      },
+      {
+        id: "created",
+        label: "Created by Me",
+        icon: GitCommitHorizontal,
+        description: "Issues you've created",
+      },
+    ],
+  },
+  {
+    id: "actions",
+    label: "Actions",
+    icon: Workflow,
+    hasSubItems: true,
+    subItems: [
+      {
+        id: "workflows",
+        label: "Workflows",
+        icon: Play,
+        description: "CI/CD workflows and pipelines",
+      },
+      { id: "runners", label: "Runners", icon: Terminal, description: "Self-hosted runners" },
+      { id: "deployments", label: "Deployments", icon: Cloud, description: "Deployment history" },
+    ],
+  },
+  {
+    id: "packages",
+    label: "Packages",
+    icon: Package,
+    hasSubItems: true,
+    subItems: [
+      {
+        id: "published",
+        label: "Published",
+        icon: PackageOpen,
+        description: "Your published packages",
+      },
+      {
+        id: "containers",
+        label: "Container Registry",
+        icon: Database,
+        description: "Docker images and containers",
+      },
+      { id: "npm", label: "npm Packages", icon: Package2, description: "Node.js packages" },
+    ],
+  },
+  {
+    id: "security",
+    label: "Security",
+    icon: Lock,
+    badge: "2",
+    hasSubItems: true,
+    subItems: [
+      {
+        id: "alerts",
+        label: "Security Alerts",
+        icon: ShieldAlert,
+        description: "Vulnerability alerts",
+      },
+      {
+        id: "advisories",
+        label: "Advisories",
+        icon: ShieldCheck,
+        description: "Security advisories",
+      },
+      { id: "secrets", label: "Secrets", icon: Fingerprint, description: "Repository secrets" },
+    ],
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    icon: Settings,
+    hasSubItems: true,
+    subItems: [
+      { id: "profile", label: "Profile", icon: User, description: "Your profile settings" },
+      {
+        id: "notifications",
+        label: "Notifications",
+        icon: Bell,
+        description: "Notification preferences",
+      },
+      { id: "webhooks", label: "Webhooks", icon: Webhook, description: "Webhook configurations" },
+      { id: "api-keys", label: "API Keys", icon: Key, description: "Personal access tokens" },
+    ],
+  },
+  { id: "docs", label: "Documentation", icon: FileText, hasSubItems: false, route: "/docs" },
+];
+
+export function AppSidebar() {
+  const [activeItem, setActiveItem] = useState<string | null>("overview");
+  const [selectedSubItem, setSelectedSubItem] = useState<string | null>(null);
+  const activeItemData = sidebarItems.find((item) => item.id === activeItem);
+
+  const handleItemClick = (item: NavItem) => {
+    if (item.hasSubItems) {
+      const isActive = activeItem === item.id;
+      setActiveItem(isActive ? null : item.id);
+      if (isActive) setSelectedSubItem(null);
+    } else {
+      setActiveItem(null);
+      setSelectedSubItem(null);
+    }
+  };
+
+  return (
+    <div className="flex h-dvh bg-background">
+      <Sidebar side="left" variant="sidebar" collapsible="none" className="w-64 border-e">
+        <SidebarHeader>
+          <TeamSwitcher teams={data.teams} />
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {sidebarItems.map((item) => {
+                  const Icon = item.icon;
+                  const isActive = activeItem === item.id;
+                  const chevron = (
+                    <ChevronRight
+                      className={cn(
+                        "h-4 w-4 shrink-0 transition-transform",
+                        isActive && "rotate-90",
+                      )}
+                    />
+                  );
+                  return (
+                    <SidebarMenuItem key={item.id}>
+                      <SidebarMenuButton
+                        isActive={isActive}
+                        className="h-10 w-full px-3"
+                        onClick={() => handleItemClick(item)}
+                      >
+                        <div className="flex min-w-0 flex-1 items-center gap-3">
+                          <Icon className="h-4 w-4 shrink-0" />
+                          <span className="truncate">{item.label}</span>
+                        </div>
+                        <div className="ms-auto flex min-w-fit shrink-0 items-center gap-1">
+                          {(item.badge || item.hasSubItems) &&
+                            (item.badge ? (
+                              <SidebarMenuBadge
+                                className={cn("min-w-fit", item.hasSubItems && "gap-x-3")}
+                              >
+                                {item.badge}
+                                {item.hasSubItems && chevron}
+                              </SidebarMenuBadge>
+                            ) : (
+                              chevron
+                            ))}
+                        </div>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={data.user} />
+        </SidebarFooter>
+      </Sidebar>
+
+      {activeItem && activeItemData?.subItems && (
+        <Sidebar
+          side="left"
+          variant="sidebar"
+          collapsible="none"
+          className="w-72 animate-in slide-in-from-left-5 border-e duration-base ease-entrance"
+        >
+          <SidebarHeader className="flex flex-row items-center justify-between border-b px-4">
+            <h3 className="font-medium">{activeItemData.label}</h3>
+            <button
+              onClick={() => setActiveItem(null)}
+              className="flex h-6 w-6 items-center justify-center rounded-md p-0 hover:bg-sidebar-accent"
+              aria-label="Close panel"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {activeItemData.subItems.map((subItem) => {
+                    const SubIcon = subItem.icon;
+                    const isSelected = selectedSubItem === subItem.id;
+                    return (
+                      <SidebarMenuItem key={subItem.id}>
+                        <SidebarMenuButton
+                          isActive={isSelected}
+                          className="h-auto w-full justify-start gap-3 px-3 py-2"
+                          onClick={() => setSelectedSubItem(isSelected ? null : subItem.id)}
+                        >
+                          <SubIcon className="mt-0.5 h-5 w-5 shrink-0 self-start" />
+                          <div className="min-w-0 flex-1 text-start">
+                            <div className="font-medium">{subItem.label}</div>
+                            {subItem.description && (
+                              <div className="mt-0.5 text-xs text-muted-foreground">
+                                {subItem.description}
+                              </div>
+                            )}
+                          </div>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    );
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+        </Sidebar>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SidebarProvider } from "@elabs-ai/components-ui";
+import { AppSidebar } from "./app-sidebar";
+
+const meta = {
+  title: "Layout/App Shell/Double-Sided",
+  parameters: { layout: "fullscreen" },
+} satisfies Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <AppSidebar />
+    </SidebarProvider>
+  ),
+};

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

@@ -0,0 +1,6 @@
+/**
+ * sidebar-05 — team switcher. The shared `TeamSwitcher` 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 { TeamSwitcher } from "@elabs-ai/components-ui";