2c:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2d:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2e:T895,"use client"; import { AnimatePresence, motion } from "motion/react"; import { useState } from "react"; import { SidebarInset, SidebarProvider, type SidebarProviderProps, type SidebarProps } from "@/components/scalar-ui/sidebar"; import { AppSidebar } from "@/components/scalar-ui/app-shell/app-sidebar"; import { Dashboard, EmptyPage, OrdersPage } from "@/components/scalar-ui/app-shell/dashboard"; import { SiteHeader } from "@/components/scalar-ui/app-shell/site-header"; import { cn } from "@/lib/utils"; export interface AppShellProps extends Omit { /** inset: the page sits in a raised card · sidebar: flush with a hairline · floating: the sidebar is a card. */ variant?: SidebarProps["variant"]; /** icon: collapses to an icon rail · offcanvas: slides away. */ collapsible?: SidebarProps["collapsible"]; defaultPage?: string; } /** A store dashboard: AppSidebar, SiteHeader and the page, each in its own file under app-shell/. */ export function AppShell({ variant = "inset", collapsible = "icon", defaultPage = "Overview", className, ...props }: AppShellProps) { const [page, setPage] = useState(defaultPage); return (

{page === "Overview" ? : page === "Orders" ? : }

); } export default AppShell; 2f:T53b2,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { SidebarInset, SidebarProvider, type SidebarProviderProps, type SidebarProps } from "@/components/scalar-ui/sidebar";
import { AppSidebar } from "@/components/scalar-ui/app-shell/app-sidebar";
import { Dashboard, EmptyPage, OrdersPage } from "@/components/scalar-ui/app-shell/dashboard";
import { SiteHeader } from "@/components/scalar-ui/app-shell/site-header";
import { cn } from "@/lib/utils";

export interface AppShellProps extends Omit<SidebarProviderProps, "children"> {
  /** inset: the page sits in a raised card · sidebar: flush with a hairline · floating: the sidebar is a card. */
  variant?: SidebarProps["variant"];
  /** icon: collapses to an icon rail · offcanvas: slides away. */
  collapsible?: SidebarProps["collapsible"];
  defaultPage?: string;
}

/** A store dashboard: AppSidebar, SiteHeader and the page, each in its own file under app-shell/. */
export function AppShell({ variant = "inset", collapsible = "icon", defaultPage = "Overview", className, ...props }: AppShellProps) {
  const [page, setPage] = useState(defaultPage);
  return (
    <SidebarProvider className={cn("[&_svg]:[stroke-width:var(--ui-icon-stroke,2)]", className)} {...props}>
      <AppSidebar variant={variant} collapsible={collapsible} page={page} onNavigate={setPage} />
      <SidebarInset>
        <SiteHeader page={page} onNavigate={setPage} />
        <div className="relative flex-1 overflow-y-auto">
          <AnimatePresence mode="popLayout" initial={false}>
            <motion.div
              key={page}
              className="h-full"
              initial={{ opacity: 0, y: 6 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, transition: { duration: 0.1 } }}
              transition={{ type: "spring", bounce: 0, duration: 0.35 }}
            >
              {page === "Overview" ? <Dashboard onNavigate={setPage} /> : page === "Orders" ? <OrdersPage /> : <EmptyPage title={page} />}
            </motion.div>
          </AnimatePresence>
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}

export default AppShell;

30:Tc61,import { Bell, ChartNoAxesColumn, CreditCard, Home, Layers, LifeBuoy, Megaphone, Package, Settings, ShoppingBag, Truck, Users, type LucideIcon, } from "lucide-react"; export type NavItem = { title: string; icon: LucideIcon; badge?: number | string; items?: string[] }; export type Store = { id: string; name: string; plan: string; tone: string }; export const stores: Store[] = [ { id: "tide", name: "Tide", plan: "Commerce · Pro", tone: "from-teal-500 to-teal-700" }, { id: "harbor", name: "Harbor & Co", plan: "Wholesale", tone: "from-indigo-500 to-indigo-700" }, { id: "saltwork", name: "Saltwork", plan: "Starter", tone: "from-amber-400 to-orange-600" }, ]; export const user = { name: "Maya Chen", email: "maya@tide.shop", initials: "MC" }; export const navMain: NavItem[] = [ { title: "Overview", icon: Home }, { title: "Orders", icon: ShoppingBag, badge: 12 }, { title: "Products", icon: Layers, items: ["All products", "Collections", "Inventory"] }, { title: "Customers", icon: Users }, { title: "Analytics", icon: ChartNoAxesColumn, badge: "New" }, ]; export const navAccount: NavItem[] = [ { title: "Payouts", icon: CreditCard }, { title: "Shipping", icon: Truck }, { title: "Settings", icon: Settings }, ]; export const navFooter: NavItem[] = [{ title: "Help", icon: LifeBuoy }]; export const stats = [ { label: "Net revenue", value: "$128,430", delta: "+18.2%", spark: [8, 10, 9, 13, 12, 15, 18] }, { label: "Orders", value: "2,184", delta: "+6.4%", spark: [10, 9, 11, 12, 11, 13, 14] }, { label: "Avg. order", value: "$58.80", delta: "+2.1%", spark: [12, 12, 11, 12, 13, 12, 13] }, ]; export const revenue: Record<"7d" | "30d" | "90d", number[]> = { "7d": [42, 48, 45, 52, 58, 55, 64, 61, 70, 68, 76, 74], "30d": [30, 34, 33, 40, 38, 46, 44, 52, 57, 55, 63, 70], "90d": [22, 26, 31, 29, 36, 41, 39, 47, 52, 58, 61, 69], }; export type Order = { id: string; customer: string; items: number; status: "Paid" | "Refunded" | "Pending"; total: string }; export const orders: Order[] = [ { id: "#3021", customer: "Lena Hoffmann", items: 3, status: "Paid", total: "$214.00" }, { id: "#3020", customer: "Kofi Mensah", items: 1, status: "Pending", total: "$89.50" }, { id: "#3019", customer: "Aiko Tanaka", items: 2, status: "Refunded", total: "$42.00" }, { id: "#3018", customer: "Mateo Ruiz", items: 5, status: "Paid", total: "$310.20" }, { id: "#3017", customer: "Priya Nair", items: 1, status: "Paid", total: "$64.00" }, ]; export const notifications: { id: string; title: string; description?: string; time: string; unread?: boolean; announcement?: boolean; icon: LucideIcon }[] = [ { id: "1", title: "New order #3021", description: "Lena Hoffmann ordered 3 items.", time: "2m", unread: true, icon: ShoppingBag }, { id: "2", title: "Low stock: Linen tote", description: "4 left in the Brooklyn warehouse.", time: "1h", unread: true, icon: Package }, { id: "3", title: "Payouts now arrive daily", description: "Switch the schedule in Payouts.", time: "Mon", announcement: true, icon: Megaphone }, { id: "4", title: "Weekly digest is ready", time: "Sun", icon: Bell }, ]; 31:T9317,

import {
  Bell,
  ChartNoAxesColumn,
  CreditCard,
  Home,
  Layers,
  LifeBuoy,
  Megaphone,
  Package,
  Settings,
  ShoppingBag,
  Truck,
  Users,
  type LucideIcon,
} from "lucide-react";

export type NavItem = { title: string; icon: LucideIcon; badge?: number | string; items?: string[] };

export type Store = { id: string; name: string; plan: string; tone: string };

export const stores: Store[] = [
  { id: "tide", name: "Tide", plan: "Commerce · Pro", tone: "from-teal-500 to-teal-700" },
  { id: "harbor", name: "Harbor & Co", plan: "Wholesale", tone: "from-indigo-500 to-indigo-700" },
  { id: "saltwork", name: "Saltwork", plan: "Starter", tone: "from-amber-400 to-orange-600" },
];

export const user = { name: "Maya Chen", email: "maya@tide.shop", initials: "MC" };

export const navMain: NavItem[] = [
  { title: "Overview", icon: Home },
  { title: "Orders", icon: ShoppingBag, badge: 12 },
  { title: "Products", icon: Layers, items: ["All products", "Collections", "Inventory"] },
  { title: "Customers", icon: Users },
  { title: "Analytics", icon: ChartNoAxesColumn, badge: "New" },
];

export const navAccount: NavItem[] = [
  { title: "Payouts", icon: CreditCard },
  { title: "Shipping", icon: Truck },
  { title: "Settings", icon: Settings },
];

export const navFooter: NavItem[] = [{ title: "Help", icon: LifeBuoy }];

export const stats = [
  { label: "Net revenue", value: "$128,430", delta: "+18.2%", spark: [8, 10, 9, 13, 12, 15, 18] },
  { label: "Orders", value: "2,184", delta: "+6.4%", spark: [10, 9, 11, 12, 11, 13, 14] },
  { label: "Avg. order", value: "$58.80", delta: "+2.1%", spark: [12, 12, 11, 12, 13, 12, 13] },
];

export const revenue: Record<"7d" | "30d" | "90d", number[]> = {
  "7d": [42, 48, 45, 52, 58, 55, 64, 61, 70, 68, 76, 74],
  "30d": [30, 34, 33, 40, 38, 46, 44, 52, 57, 55, 63, 70],
  "90d": [22, 26, 31, 29, 36, 41, 39, 47, 52, 58, 61, 69],
};

export type Order = { id: string; customer: string; items: number; status: "Paid" | "Refunded" | "Pending"; total: string };

export const orders: Order[] = [
  { id: "#3021", customer: "Lena Hoffmann", items: 3, status: "Paid", total: "$214.00" },
  { id: "#3020", customer: "Kofi Mensah", items: 1, status: "Pending", total: "$89.50" },
  { id: "#3019", customer: "Aiko Tanaka", items: 2, status: "Refunded", total: "$42.00" },
  { id: "#3018", customer: "Mateo Ruiz", items: 5, status: "Paid", total: "$310.20" },
  { id: "#3017", customer: "Priya Nair", items: 1, status: "Paid", total: "$64.00" },
];

export const notifications: { id: string; title: string; description?: string; time: string; unread?: boolean; announcement?: boolean; icon: LucideIcon }[] = [
  { id: "1", title: "New order #3021", description: "Lena Hoffmann ordered 3 items.", time: "2m", unread: true, icon: ShoppingBag },
  { id: "2", title: "Low stock: Linen tote", description: "4 left in the Brooklyn warehouse.", time: "1h", unread: true, icon: Package },
  { id: "3", title: "Payouts now arrive daily", description: "Switch the schedule in Payouts.", time: "Mon", announcement: true, icon: Megaphone },
  { id: "4", title: "Weekly digest is ready", time: "Sun", icon: Bell },
];

32:T6b1,import { cn } from "@/lib/utils"; export function TideMark({ className }: { className?: string }) { return ( ); } export function HarborMark({ className }: { className?: string }) { return ( ); } export function SaltworkMark({ className }: { className?: string }) { return ( ); } const MARKS = { tide: TideMark, harbor: HarborMark, saltwork: SaltworkMark } as const; export function StoreLogo({ id, tone, size = "md" }: { id: string; tone: string; size?: "sm" | "md" }) { const Mark = MARKS[id as keyof typeof MARKS] ?? TideMark; return ( ); } 33:T51aa,

import { cn } from "@/lib/utils";

export function TideMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M3 9c2.2-2 4.3-2 6.5 0s4.3 2 6.5 0 3.5-2 5 0" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
      <path d="M3 15c2.2-2 4.3-2 6.5 0s4.3 2 6.5 0 3.5-2 5 0" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" opacity="0.5" />
    </svg>
  );
}

export function HarborMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <path d="M12 4v16M6 13a6 6 0 0 0 12 0" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
      <circle cx="12" cy="5.5" r="1.8" fill="currentColor" />
    </svg>
  );
}

export function SaltworkMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden>
      <path d="M12 3 20 17H4Z" fill="currentColor" />
      <path d="M12 10 16 17H8Z" fill="currentColor" opacity="0.45" />
    </svg>
  );
}

const MARKS = { tide: TideMark, harbor: HarborMark, saltwork: SaltworkMark } as const;

export function StoreLogo({ id, tone, size = "md" }: { id: string; tone: string; size?: "sm" | "md" }) {
  const Mark = MARKS[id as keyof typeof MARKS] ?? TideMark;
  return (
    <span
      className={cn(
        "flex shrink-0 items-center justify-center bg-gradient-to-b text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)]",
        size === "md" ? "size-7 rounded-[8px]" : "size-5 rounded-[6px]",
        tone,
      )}
    >
      <Mark className={size === "md" ? "size-4" : "size-3"} />
    </span>
  );
}

34:T77b,"use client"; import { Check, ChevronsUpDown, Plus } from "lucide-react"; import { useState } from "react"; import { SidebarButton, SidebarDropdown, SidebarDropdownContent, SidebarDropdownItem, SidebarDropdownLabel, SidebarDropdownSeparator, SidebarDropdownTrigger, } from "@/components/scalar-ui/sidebar"; import { StoreLogo } from "@/components/scalar-ui/app-shell/brand"; import type { Store } from "@/components/scalar-ui/app-shell/data"; export function TeamSwitcher({ stores }: { stores: Store[] }) { const [current, setCurrent] = useState(stores[0]); return ( }> {current.name} {current.plan} Stores {stores.map((store, i) => ( setCurrent(store)}> {store.name} {store.id === current.id ? : ⌘{i + 1}} ))} Add store ); } 35:T4cf3,

"use client";

import { Check, ChevronsUpDown, Plus } from "lucide-react";
import { useState } from "react";
import {
  SidebarButton,
  SidebarDropdown,
  SidebarDropdownContent,
  SidebarDropdownItem,
  SidebarDropdownLabel,
  SidebarDropdownSeparator,
  SidebarDropdownTrigger,
} from "@/components/scalar-ui/sidebar";
import { StoreLogo } from "@/components/scalar-ui/app-shell/brand";
import type { Store } from "@/components/scalar-ui/app-shell/data";

export function TeamSwitcher({ stores }: { stores: Store[] }) {
  const [current, setCurrent] = useState(stores[0]);
  return (
    <SidebarDropdown>
      <SidebarDropdownTrigger asChild>
        <SidebarButton size="lg" tooltip={current.name} icon={<StoreLogo id={current.id} tone={current.tone} />}>
          <span className="flex min-w-0 flex-1 flex-col leading-tight">
            <span className="truncate text-[13.5px] font-semibold text-neutral-950 dark:text-white">{current.name}</span>
            <span className="truncate text-[11.5px] font-normal text-neutral-500">{current.plan}</span>
          </span>
          <ChevronsUpDown className="size-3.5 shrink-0 text-neutral-400" />
        </SidebarButton>
      </SidebarDropdownTrigger>
      <SidebarDropdownContent>
        <SidebarDropdownLabel>Stores</SidebarDropdownLabel>
        {stores.map((store, i) => (
          <SidebarDropdownItem key={store.id} onSelect={() => setCurrent(store)}>
            <StoreLogo id={store.id} tone={store.tone} size="sm" />
            <span className="flex-1 truncate">{store.name}</span>
            {store.id === current.id ? <Check /> : <span className="text-[11px] text-neutral-400">⌘{i + 1}</span>}
          </SidebarDropdownItem>
        ))}
        <SidebarDropdownSeparator />
        <SidebarDropdownItem>
          <Plus />
          Add store
        </SidebarDropdownItem>
      </SidebarDropdownContent>
    </SidebarDropdown>
  );
}

36:T433,"use client"; import { SidebarGroup, SidebarItem, SidebarSubItem, SidebarSubmenu } from "@/components/scalar-ui/sidebar"; import type { NavItem } from "@/components/scalar-ui/app-shell/data"; export interface NavMainProps { items: NavItem[]; label?: string; page: string; onNavigate: (page: string) => void; } export function NavMain({ items, label, page, onNavigate }: NavMainProps) { return ( {items.map(({ title, icon: Icon, badge, items: pages }) => pages ? ( } label={title} defaultOpen={pages.includes(page)}> {pages.map((p) => ( onNavigate(p)}> {p} ))} ) : ( } badge={badge} active={page === title} onClick={() => onNavigate(title)}> {title} ), )} ); } 37:T3c1b,

"use client";

import { SidebarGroup, SidebarItem, SidebarSubItem, SidebarSubmenu } from "@/components/scalar-ui/sidebar";
import type { NavItem } from "@/components/scalar-ui/app-shell/data";

export interface NavMainProps {
  items: NavItem[];
  label?: string;
  page: string;
  onNavigate: (page: string) => void;
}

export function NavMain({ items, label, page, onNavigate }: NavMainProps) {
  return (
    <SidebarGroup label={label}>
      {items.map(({ title, icon: Icon, badge, items: pages }) =>
        pages ? (
          <SidebarSubmenu key={title} icon={<Icon />} label={title} defaultOpen={pages.includes(page)}>
            {pages.map((p) => (
              <SidebarSubItem key={p} active={page === p} onClick={() => onNavigate(p)}>
                {p}
              </SidebarSubItem>
            ))}
          </SidebarSubmenu>
        ) : (
          <SidebarItem key={title} icon={<Icon />} badge={badge} active={page === title} onClick={() => onNavigate(title)}>
            {title}
          </SidebarItem>
        ),
      )}
    </SidebarGroup>
  );
}

38:T7a6,"use client"; import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut } from "lucide-react"; import { SidebarButton, SidebarDropdown, SidebarDropdownContent, SidebarDropdownItem, SidebarDropdownLabel, SidebarDropdownSeparator, SidebarDropdownTrigger, } from "@/components/scalar-ui/sidebar"; export function NavUser({ user }: { user: { name: string; email: string; initials: string } }) { return ( {user.initials} } > {user.name} {user.email} {user.email} Account Billing Notifications Log out ); } 39:T3f12,

"use client";

import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut } from "lucide-react";
import {
  SidebarButton,
  SidebarDropdown,
  SidebarDropdownContent,
  SidebarDropdownItem,
  SidebarDropdownLabel,
  SidebarDropdownSeparator,
  SidebarDropdownTrigger,
} from "@/components/scalar-ui/sidebar";

export function NavUser({ user }: { user: { name: string; email: string; initials: string } }) {
  return (
    <SidebarDropdown>
      <SidebarDropdownTrigger asChild>
        <SidebarButton
          size="lg"
          tooltip={user.name}
          icon={
            <span className="flex size-7 items-center justify-center rounded-full bg-gradient-to-b from-neutral-200 to-neutral-300 text-[11px] font-semibold text-neutral-700 dark:from-neutral-700 dark:to-neutral-800 dark:text-neutral-200">
              {user.initials}
            </span>
          }
        >
          <span className="flex min-w-0 flex-1 flex-col leading-tight">
            <span className="truncate text-[13px] font-medium text-neutral-950 dark:text-white">{user.name}</span>
            <span className="truncate text-[11.5px] font-normal text-neutral-500">{user.email}</span>
          </span>
          <ChevronsUpDown className="size-3.5 shrink-0 text-neutral-400" />
        </SidebarButton>
      </SidebarDropdownTrigger>
      <SidebarDropdownContent side="top" align="start">
        <SidebarDropdownLabel>{user.email}</SidebarDropdownLabel>
        <SidebarDropdownItem>
          <BadgeCheck />
          Account
        </SidebarDropdownItem>
        <SidebarDropdownItem>
          <CreditCard />
          Billing
        </SidebarDropdownItem>
        <SidebarDropdownItem>
          <Bell />
          Notifications
        </SidebarDropdownItem>
        <SidebarDropdownSeparator />
        <SidebarDropdownItem>
          <LogOut />
          Log out
        </SidebarDropdownItem>
      </SidebarDropdownContent>
    </SidebarDropdown>
  );
}

3a:T4d2,"use client"; import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail, type SidebarProps } from "@/components/scalar-ui/sidebar"; import { NavMain } from "@/components/scalar-ui/app-shell/nav-main"; import { NavUser } from "@/components/scalar-ui/app-shell/nav-user"; import { TeamSwitcher } from "@/components/scalar-ui/app-shell/team-switcher"; import { navAccount, navFooter, navMain, stores, user } from "@/components/scalar-ui/app-shell/data"; export interface AppSidebarProps extends Omit { page: string; onNavigate: (page: string) => void; } export function AppSidebar({ page, onNavigate, width = 232, ...props }: AppSidebarProps) { return ( ); } 3b:T375f,

"use client";

import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail, type SidebarProps } from "@/components/scalar-ui/sidebar";
import { NavMain } from "@/components/scalar-ui/app-shell/nav-main";
import { NavUser } from "@/components/scalar-ui/app-shell/nav-user";
import { TeamSwitcher } from "@/components/scalar-ui/app-shell/team-switcher";
import { navAccount, navFooter, navMain, stores, user } from "@/components/scalar-ui/app-shell/data";

export interface AppSidebarProps extends Omit<SidebarProps, "children"> {
  page: string;
  onNavigate: (page: string) => void;
}

export function AppSidebar({ page, onNavigate, width = 232, ...props }: AppSidebarProps) {
  return (
    <Sidebar width={width} {...props}>
      <SidebarHeader>
        <TeamSwitcher stores={stores} />
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={navMain} page={page} onNavigate={onNavigate} />
        <NavMain label="Account" items={navAccount} page={page} onNavigate={onNavigate} />
      </SidebarContent>
      <SidebarFooter>
        <NavMain items={navFooter} page={page} onNavigate={onNavigate} />
        <NavUser user={user} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}

3c:T952,"use client"; import { Plus } from "lucide-react"; import { useState } from "react"; import { SidebarTrigger } from "@/components/scalar-ui/sidebar"; import { NavbarBreadcrumb, NavbarNotifications, NavbarSearch, type Notification, type SearchGroup } from "@/components/scalar-ui/navbar"; import { navAccount, navMain, notifications } from "@/components/scalar-ui/app-shell/data"; export interface SiteHeaderProps { page: string; onNavigate: (page: string) => void; } export function SiteHeader({ page, onNavigate }: SiteHeaderProps) { const [inbox, setInbox] = useState(() => notifications.map(({ icon: Icon, ...n }) => ({ ...n, icon: }))); const groups: SearchGroup[] = [ { heading: "Pages", items: navMain.flatMap((n) => (n.items ?? [n.title]).map((title) => ({ label: title, icon: , onSelect: () => onNavigate(title) }))) }, { heading: "Account", items: navAccount.map((n) => ({ label: n.title, icon: , onSelect: () => onNavigate(n.title) })) }, ]; return (

Tide {page}

); } 3d:T524e,

"use client";

import { Plus } from "lucide-react";
import { useState } from "react";
import { SidebarTrigger } from "@/components/scalar-ui/sidebar";
import { NavbarBreadcrumb, NavbarNotifications, NavbarSearch, type Notification, type SearchGroup } from "@/components/scalar-ui/navbar";
import { navAccount, navMain, notifications } from "@/components/scalar-ui/app-shell/data";

export interface SiteHeaderProps {
  page: string;
  onNavigate: (page: string) => void;
}

export function SiteHeader({ page, onNavigate }: SiteHeaderProps) {
  const [inbox, setInbox] = useState<Notification[]>(() => notifications.map(({ icon: Icon, ...n }) => ({ ...n, icon: <Icon /> })));
  const groups: SearchGroup[] = [
    { heading: "Pages", items: navMain.flatMap((n) => (n.items ?? [n.title]).map((title) => ({ label: title, icon: <n.icon />, onSelect: () => onNavigate(title) }))) },
    { heading: "Account", items: navAccount.map((n) => ({ label: n.title, icon: <n.icon />, onSelect: () => onNavigate(n.title) })) },
  ];
  return (
    <header className="flex h-12 shrink-0 items-center gap-1 border-b border-black/[0.05] px-2.5 dark:border-white/[0.07]">
      <SidebarTrigger />
      <span className="mx-1 h-4 w-px bg-black/[0.08] dark:bg-white/[0.1]" />
      <NavbarBreadcrumb>
        <span className="px-1 text-[13px] text-neutral-400">Tide</span>
        <span className="truncate px-1 text-[13px] font-medium text-neutral-900 dark:text-white">{page}</span>
      </NavbarBreadcrumb>
      <div className="ml-auto flex items-center gap-1">
        <div className="hidden @[640px]:block">
          <NavbarSearch groups={groups} placeholder="Search Tide…" className="w-[200px]" />
        </div>
        <div className="@[640px]:hidden">
          <NavbarSearch groups={groups} iconOnly shortcut={false} />
        </div>
        <NavbarNotifications items={inbox} onItemsChange={setInbox} />
        <button className="ml-1 hidden h-8 items-center gap-1.5 rounded-[var(--ui-radius,9px)] bg-[var(--ui-accent,#0a0a0a)] px-3 text-[12.5px] font-medium text-[var(--ui-accent-fg,#fff)] shadow-[inset_0_1px_0_rgb(255_255_255/0.15)] outline-none transition-transform active:scale-[0.97] @[440px]:flex dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]">
          <Plus className="size-3.5" />
          New order
        </button>
      </div>
    </header>
  );
}

3e:T5f3,import { ArrowUpRight } from "lucide-react"; import { stats } from "@/components/scalar-ui/app-shell/data"; function Spark({ points }: { points: number[] }) { const max = Math.max(...points); const d = points.map((p, i) => `${(i / (points.length - 1)) * 64},${22 - (p / max) * 20}`).join(" L"); return ( ); } export function SectionCards() { return (

{stats.map((s) => (

{s.label}

{s.value}

{s.delta}

))}

); } 3f:T41a2,

import { ArrowUpRight } from "lucide-react";
import { stats } from "@/components/scalar-ui/app-shell/data";

function Spark({ points }: { points: number[] }) {
  const max = Math.max(...points);
  const d = points.map((p, i) => `${(i / (points.length - 1)) * 64},${22 - (p / max) * 20}`).join(" L");
  return (
    <svg viewBox="0 0 64 24" className="hidden h-6 w-16 overflow-visible text-[var(--ui-accent,#0a0a0a)] @[600px]:block dark:text-[var(--ui-accent,#fff)]" aria-hidden>
      <path d={`M${d}`} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function SectionCards() {
  return (
    <div className="grid grid-cols-3 gap-2.5">
      {stats.map((s) => (
        <div key={s.label} className="rounded-[14px] bg-neutral-50 p-3 ring-1 ring-black/[0.05] dark:bg-white/[0.04] dark:ring-white/[0.06]">
          <p className="text-[12px] text-neutral-500">{s.label}</p>
          <div className="mt-1 flex items-end justify-between gap-2">
            <div className="min-w-0">
              <p className="truncate text-[17px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{s.value}</p>
              <p className="flex items-center gap-0.5 text-[11.5px] font-medium text-emerald-600 dark:text-emerald-400">
                <ArrowUpRight className="size-3" />
                {s.delta}
              </p>
            </div>
            <Spark points={s.spark} />
          </div>
        </div>
      ))}
    </div>
  );
}

40:Te62,"use client"; import { LayoutGroup, motion } from "motion/react"; import { useId, useState } from "react"; import { revenue } from "@/components/scalar-ui/app-shell/data"; import { cn } from "@/lib/utils"; const RANGES = ["7d", "30d", "90d"] as const; const W = 600; const H = 140; function paths(points: number[]) { const max = 80; const xy = points.map((p, i) => [(i / (points.length - 1)) * W, H - (p / max) * (H - 12)] as const); const line = xy.map(([x, y], i) => { if (i === 0) return `M${x},${y}`; const [px, py] = xy[i - 1]; const cx = (px + x) / 2; return `C${cx},${py} ${cx},${y} ${x},${y}`; }); return { line: line.join(" "), area: `${line.join(" ")} L${W},${H} L0,${H} Z` }; } export function RevenueChart() { const [range, setRange] = useState<(typeof RANGES)[number]>("30d"); const uid = useId(); const fill = `fill${uid.replace(/[^a-zA-Z0-9]/g, "")}`; const { line, area } = paths(revenue[range]); const spring = { type: "spring", bounce: 0, duration: 0.6 } as const; return (

Revenue

Gross sales before refunds

{RANGES.map((r) => ( ))}

); } 41:Tadcf,

"use client";

import { LayoutGroup, motion } from "motion/react";
import { useId, useState } from "react";
import { revenue } from "@/components/scalar-ui/app-shell/data";
import { cn } from "@/lib/utils";

const RANGES = ["7d", "30d", "90d"] as const;
const W = 600;
const H = 140;

function paths(points: number[]) {
  const max = 80;
  const xy = points.map((p, i) => [(i / (points.length - 1)) * W, H - (p / max) * (H - 12)] as const);
  const line = xy.map(([x, y], i) => {
    if (i === 0) return `M${x},${y}`;
    const [px, py] = xy[i - 1];
    const cx = (px + x) / 2;
    return `C${cx},${py} ${cx},${y} ${x},${y}`;
  });
  return { line: line.join(" "), area: `${line.join(" ")} L${W},${H} L0,${H} Z` };
}

export function RevenueChart() {
  const [range, setRange] = useState<(typeof RANGES)[number]>("30d");
  const uid = useId();
  const fill = `fill${uid.replace(/[^a-zA-Z0-9]/g, "")}`;
  const { line, area } = paths(revenue[range]);
  const spring = { type: "spring", bounce: 0, duration: 0.6 } as const;
  return (
    <div className="rounded-[14px] p-3.5 ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-[13px] font-medium text-neutral-900 dark:text-white">Revenue</p>
          <p className="text-[12px] text-neutral-500">Gross sales before refunds</p>
        </div>
        <LayoutGroup id={uid}>
          <div role="tablist" className="flex rounded-[var(--ui-pill,999px)] bg-neutral-950/[0.04] p-0.5 dark:bg-white/[0.06]">
            {RANGES.map((r) => (
              <button
                key={r}
                role="tab"
                aria-selected={range === r}
                onClick={() => setRange(r)}
                className={cn(
                  "relative h-6 rounded-[var(--ui-pill,999px)] px-2.5 text-[11.5px] font-medium outline-none transition-colors",
                  range === r ? "text-neutral-950 dark:text-white" : "text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200",
                )}
              >
                {range === r && (
                  <motion.span
                    layoutId="range"
                    className="absolute inset-0 rounded-[var(--ui-pill,999px)] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.05] dark:bg-white/[0.12] dark:ring-0"
                    transition={{ type: "spring", bounce: 0.15, duration: 0.35 }}
                  />
                )}
                <span className="relative">{r}</span>
              </button>
            ))}
          </div>
        </LayoutGroup>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="mt-3 h-[140px] w-full overflow-visible text-[var(--ui-accent,#0a0a0a)] dark:text-[var(--ui-accent,#fff)]" aria-label={`Revenue, last ${range}`}>
        <defs>
          <linearGradient id={fill} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="currentColor" stopOpacity="0.16" />
            <stop offset="1" stopColor="currentColor" stopOpacity="0" />
          </linearGradient>
        </defs>
        {[0.25, 0.5, 0.75].map((f) => (
          <line key={f} x1="0" x2={W} y1={H * f} y2={H * f} className="stroke-black/[0.05] dark:stroke-white/[0.06]" strokeDasharray="3 4" vectorEffect="non-scaling-stroke" />
        ))}
        <motion.path initial={false} animate={{ d: area }} transition={spring} fill={`url(#${fill})`} />
        <motion.path initial={false} animate={{ d: line }} transition={spring} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
      </svg>
    </div>
  );
}

42:T78f,import { orders, type Order } from "@/components/scalar-ui/app-shell/data"; import { cn } from "@/lib/utils"; const STATUS: Record = { Paid: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300", Pending: "bg-amber-500/10 text-amber-700 dark:text-amber-300", Refunded: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300", }; export function RecentOrders({ limit, onViewAll }: { limit?: number; onViewAll?: () => void }) { return (

Recent orders

{onViewAll && ( )}

{orders.slice(0, limit).map((o) => (

{o.id} {o.customer} {o.items} {o.items === 1 ? "item" : "items"} {o.status} {o.total}

))}

); } 43:T409e,

import { orders, type Order } from "@/components/scalar-ui/app-shell/data";
import { cn } from "@/lib/utils";

const STATUS: Record<Order["status"], string> = {
  Paid: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
  Pending: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
  Refunded: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300",
};

export function RecentOrders({ limit, onViewAll }: { limit?: number; onViewAll?: () => void }) {
  return (
    <div className="overflow-hidden rounded-[14px] ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
      <div className="flex items-center justify-between bg-neutral-50 px-3.5 py-2.5 dark:bg-white/[0.03]">
        <p className="text-[13px] font-medium text-neutral-900 dark:text-white">Recent orders</p>
        {onViewAll && (
          <button onClick={onViewAll} className="rounded-[6px] text-[12px] text-neutral-500 outline-none hover:text-neutral-900 focus-visible:text-neutral-900 dark:hover:text-white">
            View all
          </button>
        )}
      </div>
      {orders.slice(0, limit).map((o) => (
        <div key={o.id} className="flex items-center gap-3 border-t border-black/[0.05] px-3.5 py-2.5 text-[12.5px] transition-colors hover:bg-neutral-950/[0.02] dark:border-white/[0.06] dark:hover:bg-white/[0.02]">
          <span className="w-12 font-mono text-[11.5px] text-neutral-400">{o.id}</span>
          <span className="min-w-0 flex-1 truncate text-neutral-800 dark:text-neutral-200">{o.customer}</span>
          <span className="hidden w-14 text-neutral-500 @[560px]:block">{o.items} {o.items === 1 ? "item" : "items"}</span>
          <span className={cn("rounded-[6px] px-1.5 py-0.5 text-[11px] font-medium", STATUS[o.status])}>{o.status}</span>
          <span className="w-16 text-right tabular-nums text-neutral-900 dark:text-white">{o.total}</span>
        </div>
      ))}
    </div>
  );
}

44:T7d4,import { Download } from "lucide-react"; import { RecentOrders } from "@/components/scalar-ui/app-shell/recent-orders"; import { RevenueChart } from "@/components/scalar-ui/app-shell/revenue-chart"; import { SectionCards } from "@/components/scalar-ui/app-shell/section-cards"; export function Dashboard({ onNavigate }: { onNavigate: (page: string) => void }) { return (

Overview

Last 30 days

onNavigate("Orders")} />

); } export function OrdersPage() { return (

Orders

12 need fulfilling

); } export function EmptyPage({ title }: { title: string }) { return (

{title}

{title} goes here

); } 45:T4391,

import { Download } from "lucide-react";
import { RecentOrders } from "@/components/scalar-ui/app-shell/recent-orders";
import { RevenueChart } from "@/components/scalar-ui/app-shell/revenue-chart";
import { SectionCards } from "@/components/scalar-ui/app-shell/section-cards";

export function Dashboard({ onNavigate }: { onNavigate: (page: string) => void }) {
  return (
    <div className="flex flex-col gap-3 p-4">
      <div className="flex items-end justify-between gap-3">
        <div>
          <p className="text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">Overview</p>
          <p className="text-[12.5px] text-neutral-500">Last 30 days</p>
        </div>
        <button className="flex h-8 items-center gap-1.5 rounded-[var(--ui-radius,9px)] px-2.5 text-[12.5px] font-medium text-neutral-700 outline-none ring-1 ring-black/[0.08] hover:bg-neutral-50 dark:text-neutral-300 dark:ring-white/[0.1] dark:hover:bg-white/[0.05]">
          <Download className="size-3.5" />
          Export
        </button>
      </div>
      <SectionCards />
      <RevenueChart />
      <RecentOrders limit={4} onViewAll={() => onNavigate("Orders")} />
    </div>
  );
}

export function OrdersPage() {
  return (
    <div className="flex flex-col gap-3 p-4">
      <div>
        <p className="text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">Orders</p>
        <p className="text-[12.5px] text-neutral-500">12 need fulfilling</p>
      </div>
      <RecentOrders />
    </div>
  );
}

export function EmptyPage({ title }: { title: string }) {
  return (
    <div className="flex h-full flex-col p-4">
      <p className="text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{title}</p>
      <div className="mt-3 flex flex-1 items-center justify-center rounded-[14px] border border-dashed border-black/[0.1] text-[12.5px] text-neutral-400 dark:border-white/[0.1]">
        {title} goes here
      </div>
    </div>
  );
}

46:T9ef,

import { AppShell } from "@/components/scalar-ui/app-shell";

export default function Demo() {
  return (
    <div className="h-[620px] w-full overflow-hidden rounded-[18px] shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_40px_-16px_rgb(0_0_0/0.16)] ring-1 ring-black/[0.08] dark:shadow-none dark:ring-white/[0.1]">
      <AppShell />
    </div>
  );
}

47:T2e07,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Activity, Blocks, BookOpen, Check, ChevronsUpDown, Globe, GitBranch, LayoutGrid, LifeBuoy, Plus, Rocket, Settings, Users } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarButton, SidebarContent, SidebarDropdown, SidebarDropdownContent, SidebarDropdownItem, SidebarDropdownLabel, SidebarDropdownSeparator, SidebarDropdownTrigger, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarRail, SidebarTrigger, } from "@/components/scalar-ui/sidebar"; import { Navbar, NavbarActions, NavbarBreadcrumb, NavbarLink, NavbarNotifications, NavbarSearch, NavbarSwitcher, NavbarTabs, type Notification } from "@/components/scalar-ui/navbar"; const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=96&h=96&fit=crop&crop=faces&auto=format&q=75`; function OrbitMark({ className }: { className?: string }) { return ( ); } const teams = [ { name: "Orbit Studio", plan: "Pro", tile: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" }, { name: "Northwind", plan: "Team", tile: "bg-emerald-600 text-white" }, { name: "Personal", plan: "Hobby", tile: "bg-orange-500 text-white" }, ]; const projects = [ { value: "web", label: "marketing-site", icon: }, { value: "app", label: "dashboard", icon: }, { value: "api", label: "public-api", icon: }, ]; const branches = [ { value: "main", label: "main", icon: }, { value: "onboarding", label: "feat/onboarding", icon: }, ]; const tabs = ["Overview", "Deployments", "Analytics", "Logs", "Storage", "Settings"]; const deployments = [ { env: "Production", branch: "main", commit: "Ship pricing toggle", time: "2m ago", status: "ready", author: "1500648767791-00dcc994a43e" }, { env: "Preview", branch: "feat/onboarding", commit: "Add welcome checklist", time: "1h ago", status: "building", author: "1544005313-94ddf0286df2" }, { env: "Preview", branch: "fix/auth", commit: "Refresh tokens on focus", time: "3h ago", status: "ready", author: "1506794778202-cad84cf45f1d" }, { env: "Preview", branch: "chore/deps", commit: "Bump motion to 12.4", time: "Yesterday", status: "error", author: "1534528741775-53994a69daeb" }, ]; const STATUS = { ready: { dot: "bg-emerald-500", label: "Ready" }, building: { dot: "bg-amber-500", label: "Building" }, error: { dot: "bg-rose-500", label: "Error" }, }; export default function Example() { const [team, setTeam] = useState(teams[0]); const [project, setProject] = useState("web"); const [branch, setBranch] = useState("main"); const [nav, setNav] = useState("Projects"); const [tab, setTab] = useState("Deployments"); const [inbox, setInbox] = useState([ { id: "1", title: "Deploy failed on chore/deps", description: "Build step “typecheck” exited with code 2.", time: "4m", unread: true, icon: }, { id: "2", title: "Noor invited you to Northwind", time: "1h", unread: true, icon: }, ]); return (

} > {team.name} {team.plan} Teams {teams.map((t) => ( setTeam(t)}> {t.name} {t.name === team.name && } ))} Create team {[ { name: "Projects", icon: LayoutGrid }, { name: "Deployments", icon: Rocket }, { name: "Domains", icon: Globe }, { name: "Integrations", icon: Blocks }, { name: "Usage", icon: Activity }, ].map(({ name, icon: Icon }) => ( } active={nav === name} onClick={() => setNav(name)}> {name} ))} {projects.map((p) => ( {p.icon}} onClick={() => setProject(p.value)} className={project === p.value ? "font-medium text-neutral-950 dark:text-white" : undefined}> {p.label} ))} }>Docs }>Support }>Settings New project} /> ({ label: t, icon: , onSelect: () => setTab(t) })) }]} placeholder="Find…" className="hidden w-[170px] @[620px]:flex" /> Jon Park

{tabs.map((t) => ( setTab(t)}> {t} ))}

{tab}

{tab === "Deployments" && ( )}

{tab === "Deployments" ? (

{d.commit}

{d.env} · {d.branch}

{s.label} {d.time}

) : (

{["Requests", "Bandwidth", "Errors"].map((k, i) => (

{k}

{["1.2M", "84 GB", "0.03%"][i]}

))}

)}

); } 48:T19cce,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Activity, Blocks, BookOpen, Check, ChevronsUpDown, Globe, GitBranch, LayoutGrid, LifeBuoy, Plus, Rocket, Settings, Users } from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarContent,
  SidebarDropdown,
  SidebarDropdownContent,
  SidebarDropdownItem,
  SidebarDropdownLabel,
  SidebarDropdownSeparator,
  SidebarDropdownTrigger,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";
import { Navbar, NavbarActions, NavbarBreadcrumb, NavbarLink, NavbarNotifications, NavbarSearch, NavbarSwitcher, NavbarTabs, type Notification } from "@/components/scalar-ui/navbar";

const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=96&h=96&fit=crop&crop=faces&auto=format&q=75`;

function OrbitMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
      <circle cx="11" cy="13" r="6.5" stroke="currentColor" strokeWidth="2.4" />
      <circle cx="18.5" cy="5.5" r="2.5" fill="currentColor" />
    </svg>
  );
}

const teams = [
  { name: "Orbit Studio", plan: "Pro", tile: "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" },
  { name: "Northwind", plan: "Team", tile: "bg-emerald-600 text-white" },
  { name: "Personal", plan: "Hobby", tile: "bg-orange-500 text-white" },
];

const projects = [
  { value: "web", label: "marketing-site", icon: <span className="size-2 rounded-full bg-sky-500" /> },
  { value: "app", label: "dashboard", icon: <span className="size-2 rounded-full bg-violet-500" /> },
  { value: "api", label: "public-api", icon: <span className="size-2 rounded-full bg-amber-500" /> },
];

const branches = [
  { value: "main", label: "main", icon: <GitBranch className="size-3.5 text-neutral-400" /> },
  { value: "onboarding", label: "feat/onboarding", icon: <GitBranch className="size-3.5 text-neutral-400" /> },
];

const tabs = ["Overview", "Deployments", "Analytics", "Logs", "Storage", "Settings"];

const deployments = [
  { env: "Production", branch: "main", commit: "Ship pricing toggle", time: "2m ago", status: "ready", author: "1500648767791-00dcc994a43e" },
  { env: "Preview", branch: "feat/onboarding", commit: "Add welcome checklist", time: "1h ago", status: "building", author: "1544005313-94ddf0286df2" },
  { env: "Preview", branch: "fix/auth", commit: "Refresh tokens on focus", time: "3h ago", status: "ready", author: "1506794778202-cad84cf45f1d" },
  { env: "Preview", branch: "chore/deps", commit: "Bump motion to 12.4", time: "Yesterday", status: "error", author: "1534528741775-53994a69daeb" },
];

const STATUS = {
  ready: { dot: "bg-emerald-500", label: "Ready" },
  building: { dot: "bg-amber-500", label: "Building" },
  error: { dot: "bg-rose-500", label: "Error" },
};

export default function Example() {
  const [team, setTeam] = useState(teams[0]);
  const [project, setProject] = useState("web");
  const [branch, setBranch] = useState("main");
  const [nav, setNav] = useState("Projects");
  const [tab, setTab] = useState("Deployments");
  const [inbox, setInbox] = useState<Notification[]>([
    { id: "1", title: "Deploy failed on chore/deps", description: "Build step “typecheck” exited with code 2.", time: "4m", unread: true, icon: <Rocket /> },
    { id: "2", title: "Noor invited you to Northwind", time: "1h", unread: true, icon: <Users /> },
  ]);

  return (
    <div className="h-[600px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
      <SidebarProvider>
        <Sidebar variant="inset" width={228}>
          <SidebarHeader>
            <SidebarDropdown>
              <SidebarDropdownTrigger asChild>
                <SidebarButton
                  size="lg"
                  tooltip={team.name}
                  icon={
                    <span className={`flex size-7 items-center justify-center rounded-[8px] shadow-[inset_0_1px_0_rgb(255_255_255/0.2)] ${team.tile}`}>
                      <OrbitMark className="size-4" />
                    </span>
                  }
                >
                  <span className="flex min-w-0 flex-1 flex-col leading-tight">
                    <span className="truncate text-[13.5px] font-semibold text-neutral-950 dark:text-white">{team.name}</span>
                    <span className="truncate text-[11.5px] font-normal text-neutral-500">{team.plan}</span>
                  </span>
                  <ChevronsUpDown className="size-3.5 shrink-0 text-neutral-400" />
                </SidebarButton>
              </SidebarDropdownTrigger>
              <SidebarDropdownContent>
                <SidebarDropdownLabel>Teams</SidebarDropdownLabel>
                {teams.map((t) => (
                  <SidebarDropdownItem key={t.name} onSelect={() => setTeam(t)}>
                    <span className={`flex size-5 items-center justify-center rounded-[6px] ${t.tile}`}>
                      <OrbitMark className="size-3! text-current!" />
                    </span>
                    <span className="flex-1">{t.name}</span>
                    {t.name === team.name && <Check />}
                  </SidebarDropdownItem>
                ))}
                <SidebarDropdownSeparator />
                <SidebarDropdownItem>
                  <Plus />
                  Create team
                </SidebarDropdownItem>
              </SidebarDropdownContent>
            </SidebarDropdown>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              {[
                { name: "Projects", icon: LayoutGrid },
                { name: "Deployments", icon: Rocket },
                { name: "Domains", icon: Globe },
                { name: "Integrations", icon: Blocks },
                { name: "Usage", icon: Activity },
              ].map(({ name, icon: Icon }) => (
                <SidebarItem key={name} icon={<Icon />} active={nav === name} onClick={() => setNav(name)}>
                  {name}
                </SidebarItem>
              ))}
            </SidebarGroup>
            <SidebarGroup label="Projects">
              {projects.map((p) => (
                <SidebarItem key={p.value} icon={<span className="flex size-4 items-center justify-center">{p.icon}</span>} onClick={() => setProject(p.value)} className={project === p.value ? "font-medium text-neutral-950 dark:text-white" : undefined}>
                  {p.label}
                </SidebarItem>
              ))}
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <SidebarItem icon={<BookOpen />}>Docs</SidebarItem>
            <SidebarItem icon={<LifeBuoy />}>Support</SidebarItem>
            <SidebarItem icon={<Settings />}>Settings</SidebarItem>
          </SidebarFooter>
          <SidebarRail />
        </Sidebar>
        <SidebarInset>
          <Navbar className="border-b-0 pl-2">
            <SidebarTrigger />
            <span className="mx-1 h-4 w-px bg-black/[0.08] dark:bg-white/[0.1]" />
            <NavbarBreadcrumb>
              <NavbarSwitcher label="Projects" items={projects} value={project} onValueChange={setProject} footer={<><Plus className="size-4 text-neutral-400" />New project</>} />
              <NavbarSwitcher label="Branches" items={branches} value={branch} onValueChange={setBranch} />
            </NavbarBreadcrumb>
            <NavbarActions>
              <NavbarSearch
                groups={[{ heading: "Go to", items: tabs.map((t) => ({ label: t, icon: <Rocket />, onSelect: () => setTab(t) })) }]}
                placeholder="Find…"
                className="hidden w-[170px] @[620px]:flex"
              />
              <NavbarNotifications items={inbox} onItemsChange={setInbox} />
              <img src={face("1500648767791-00dcc994a43e")} alt="Jon Park" className="ml-1 size-7 rounded-full object-cover ring-1 ring-black/[0.06]" />
            </NavbarActions>
          </Navbar>
          <NavbarTabs>
            {tabs.map((t) => (
              <NavbarLink key={t} active={tab === t} onClick={() => setTab(t)}>
                {t}
              </NavbarLink>
            ))}
          </NavbarTabs>
          <div className="flex-1 overflow-y-auto">
            <AnimatePresence mode="popLayout" initial={false}>
              <motion.div key={tab} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, transition: { duration: 0.1 } }} transition={{ type: "spring", bounce: 0, duration: 0.35 }} className="p-5">
                <div className="flex items-center justify-between">
                  <h2 className="text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{tab}</h2>
                  {tab === "Deployments" && (
                    <button className="flex h-8 items-center gap-1.5 rounded-[var(--ui-radius,9px)] bg-[var(--ui-accent,#0a0a0a)] px-3 text-[12.5px] font-medium text-[var(--ui-accent-fg,#fff)] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]">
                      <Rocket className="size-3.5" />
                      Redeploy
                    </button>
                  )}
                </div>
                {tab === "Deployments" ? (
                  <ul className="mt-4 divide-y divide-black/[0.05] overflow-hidden rounded-[14px] bg-white ring-1 ring-black/[0.06] dark:divide-white/[0.06] dark:bg-white/[0.03] dark:ring-white/[0.07]">
                    {deployments.map((d) => {
                      const s = STATUS[d.status as keyof typeof STATUS];
                      return (
                        <li key={d.branch} className="flex items-center gap-3 px-4 py-3">
                          <span className={`size-2 shrink-0 rounded-full ${s.dot}`} />
                          <div className="min-w-0 flex-1">
                            <p className="truncate text-[13px] font-medium text-neutral-900 dark:text-white">{d.commit}</p>
                            <p className="mt-0.5 flex items-center gap-1.5 truncate text-[12px] text-neutral-500">
                              {d.env}
                              <span className="text-neutral-300 dark:text-neutral-600">·</span>
                              <GitBranch className="size-3" />
                              {d.branch}
                            </p>
                          </div>
                          <span className="hidden text-[12px] text-neutral-500 @[520px]:block">{s.label}</span>
                          <img src={face(d.author)} alt="" className="size-6 rounded-full object-cover" />
                          <span className="w-[68px] text-right text-[12px] tabular-nums text-neutral-400">{d.time}</span>
                        </li>
                      );
                    })}
                  </ul>
                ) : (
                  <div className="mt-4 grid grid-cols-1 gap-3 @[560px]:grid-cols-3">
                    {["Requests", "Bandwidth", "Errors"].map((k, i) => (
                      <div key={k} className="rounded-[14px] bg-white p-4 ring-1 ring-black/[0.06] dark:bg-white/[0.03] dark:ring-white/[0.07]">
                        <p className="text-[12px] text-neutral-500">{k}</p>
                        <p className="mt-1 text-[20px] font-semibold tracking-[-0.02em] tabular-nums text-neutral-950 dark:text-white">{["1.2M", "84 GB", "0.03%"][i]}</p>
                      </div>
                    ))}
                  </div>
                )}
              </motion.div>
            </AnimatePresence>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </div>
  );
}

49:T319e,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Bell, BookMarked, Eye, FileText, Globe, Image, Link2, Newspaper, PanelLeftClose, PanelLeftOpen, PenLine, Plus, Search, Settings, Users } from "lucide-react"; import { useState } from "react"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarSearch, SidebarSubItem, SidebarSubmenu, useSidebar, } from "@/components/scalar-ui/sidebar"; import { NavbarBreadcrumb, NavbarIconButton, NavbarSwitcher } from "@/components/scalar-ui/navbar"; import { cn } from "@/lib/utils"; const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=64&h=64&fit=crop&crop=faces&auto=format&q=75`; const sites = [ { value: "notes", label: "Field Notes", icon: F }, { value: "docs", label: "Help Center", icon: H }, { value: "log", label: "Changelog", icon: C }, ]; const branches = [ { value: "draft", label: "Draft", description: "Edits not yet live" }, { value: "live", label: "Live", description: "What readers see" }, ]; const people = { amara: { name: "Amara Okafor", photo: "1531123897727-8f129e1688ce" }, diego: { name: "Diego Alvarez", photo: "1506794778202-cad84cf45f1d" }, hana: { name: "Hana Sato", photo: "1544005313-94ddf0286df2" }, liam: { name: "Liam Novak", photo: "1472099645785-5658abf4ff4e" }, }; type Status = "Published" | "Draft" | "Scheduled"; const posts: { title: string; author: keyof typeof people; status: Status; updated: string }[] = [ { title: "Ten things we learned shipping offline mode", author: "amara", status: "Published", updated: "2h ago" }, { title: "A field guide to quiet interfaces", author: "hana", status: "Draft", updated: "Yesterday" }, { title: "How we price for small teams", author: "diego", status: "Scheduled", updated: "Oct 14" }, { title: "Notes from the Lisbon offsite", author: "liam", status: "Published", updated: "Oct 9" }, { title: "Designing the new editor toolbar", author: "amara", status: "Draft", updated: "Oct 7" }, { title: "Why we moved to weekly releases", author: "diego", status: "Published", updated: "Oct 2" }, ]; const STATUS: Record = { Published: "bg-emerald-500", Draft: "bg-neutral-400", Scheduled: "bg-sky-500", }; function Collapse() { const { open, toggle } = useSidebar(); return ( : } onClick={toggle} tooltip="Expand" kbd="⌘B"> Collapse ); } export default function Example() { const [site, setSite] = useState("notes"); const [branch, setBranch] = useState("draft"); const [page, setPage] = useState("Posts"); const [filter, setFilter] = useState<"All" | Status>("All"); const [query, setQuery] = useState(""); const [published, setPublished] = useState(false); const rows = posts.filter((p) => (filter === "All" || p.status === filter) && p.title.toLowerCase().includes(query.toLowerCase())); return (

New site} />

{(["amara", "hana", "diego"] as const).map((k) => ( {people[k].name}

))}

3 editing

{[ { name: "Posts", icon: Newspaper, badge: 24 }, { name: "Pages", icon: FileText }, { name: "Media", icon: Image }, { name: "Authors", icon: Users }, ].map(({ name, icon: Icon, badge }) => ( } badge={badge} active={page === name} onClick={() => setPage(name)}> {name} ))} {["Guides", "Case studies", "Recipes"].map((c) => ( } active={page === c} onClick={() => setPage(c)}> {c} ))} } active={page === "Navigation"} onClick={() => setPage("Navigation")}> Navigation } active={page === "Redirects"} onClick={() => setPage("Redirects")}> Redirects } label="Settings"> {["General", "SEO", "Domains"].map((s) => ( setPage(s)}> {s} ))}

{page}

{page === "Posts" && {rows.length}}

{page === "Posts" ? ( <>

{(["All", "Published", "Draft", "Scheduled"] as const).map((f) => ( ))}

setQuery(e.target.value)} placeholder="Filter posts" className="min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-neutral-400" />

{rows.map((p) => ( {p.title}

{people[p.author].name} · {p.updated} {p.status} ))}

{rows.length === 0 &&

No posts match.

} ) : (

Nothing in {page} yet.

)}

); } 4a:T1bbdb,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Bell, BookMarked, Eye, FileText, Globe, Image, Link2, Newspaper, PanelLeftClose, PanelLeftOpen, PenLine, Plus, Search, Settings, Users } from "lucide-react";
import { useState } from "react";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarSearch,
  SidebarSubItem,
  SidebarSubmenu,
  useSidebar,
} from "@/components/scalar-ui/sidebar";
import { NavbarBreadcrumb, NavbarIconButton, NavbarSwitcher } from "@/components/scalar-ui/navbar";
import { cn } from "@/lib/utils";

const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=64&h=64&fit=crop&crop=faces&auto=format&q=75`;

const sites = [
  { value: "notes", label: "Field Notes", icon: <span className="flex size-4 items-center justify-center rounded-[4px] bg-orange-500 text-[9px] font-bold text-white">F</span> },
  { value: "docs", label: "Help Center", icon: <span className="flex size-4 items-center justify-center rounded-[4px] bg-sky-500 text-[9px] font-bold text-white">H</span> },
  { value: "log", label: "Changelog", icon: <span className="flex size-4 items-center justify-center rounded-[4px] bg-neutral-800 text-[9px] font-bold text-white">C</span> },
];

const branches = [
  { value: "draft", label: "Draft", description: "Edits not yet live" },
  { value: "live", label: "Live", description: "What readers see" },
];

const people = {
  amara: { name: "Amara Okafor", photo: "1531123897727-8f129e1688ce" },
  diego: { name: "Diego Alvarez", photo: "1506794778202-cad84cf45f1d" },
  hana: { name: "Hana Sato", photo: "1544005313-94ddf0286df2" },
  liam: { name: "Liam Novak", photo: "1472099645785-5658abf4ff4e" },
};

type Status = "Published" | "Draft" | "Scheduled";

const posts: { title: string; author: keyof typeof people; status: Status; updated: string }[] = [
  { title: "Ten things we learned shipping offline mode", author: "amara", status: "Published", updated: "2h ago" },
  { title: "A field guide to quiet interfaces", author: "hana", status: "Draft", updated: "Yesterday" },
  { title: "How we price for small teams", author: "diego", status: "Scheduled", updated: "Oct 14" },
  { title: "Notes from the Lisbon offsite", author: "liam", status: "Published", updated: "Oct 9" },
  { title: "Designing the new editor toolbar", author: "amara", status: "Draft", updated: "Oct 7" },
  { title: "Why we moved to weekly releases", author: "diego", status: "Published", updated: "Oct 2" },
];

const STATUS: Record<Status, string> = {
  Published: "bg-emerald-500",
  Draft: "bg-neutral-400",
  Scheduled: "bg-sky-500",
};

function Collapse() {
  const { open, toggle } = useSidebar();
  return (
    <SidebarItem icon={open ? <PanelLeftClose /> : <PanelLeftOpen />} onClick={toggle} tooltip="Expand" kbd="⌘B">
      Collapse
    </SidebarItem>
  );
}

export default function Example() {
  const [site, setSite] = useState("notes");
  const [branch, setBranch] = useState("draft");
  const [page, setPage] = useState("Posts");
  const [filter, setFilter] = useState<"All" | Status>("All");
  const [query, setQuery] = useState("");
  const [published, setPublished] = useState(false);

  const rows = posts.filter((p) => (filter === "All" || p.status === filter) && p.title.toLowerCase().includes(query.toLowerCase()));

  return (
    <div className="flex h-[620px] w-full flex-col overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
      <header className="@container flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 dark:border-white/[0.07]">
        <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-neutral-950 text-white dark:bg-white dark:text-neutral-950">
          <PenLine className="size-3.5" />
        </span>
        <NavbarBreadcrumb>
          <NavbarSwitcher label="Sites" items={sites} value={site} onValueChange={setSite} footer={<><Plus className="size-4 text-neutral-400" />New site</>} />
          <NavbarSwitcher label="Version" items={branches} value={branch} onValueChange={setBranch} />
        </NavbarBreadcrumb>
        <div className="ml-auto flex items-center gap-2">
          <div className="hidden items-center gap-2 @[640px]:flex">
            <div className="flex -space-x-1.5">
              {(["amara", "hana", "diego"] as const).map((k) => (
                <img key={k} src={face(people[k].photo)} alt={people[k].name} title={`${people[k].name} is editing`} className="size-6 rounded-full object-cover ring-2 ring-white dark:ring-neutral-900" />
              ))}
            </div>
            <span className="text-[12px] text-neutral-500">3 editing</span>
          </div>
          <NavbarIconButton aria-label="Notifications">
            <Bell />
          </NavbarIconButton>
          <button className="hidden h-8 items-center gap-1.5 rounded-[var(--ui-radius,9px)] px-2.5 text-[12.5px] font-medium text-neutral-700 ring-1 ring-black/[0.08] @[480px]:flex dark:text-neutral-300 dark:ring-white/[0.1]">
            <Eye className="size-3.5" />
            Preview
          </button>
          <button
            onClick={() => setPublished(true)}
            className="relative flex h-8 items-center overflow-hidden rounded-[var(--ui-radius,9px)] bg-[var(--ui-accent,#0a0a0a)] px-3 text-[12.5px] font-medium text-[var(--ui-accent-fg,#fff)] outline-none transition-transform active:scale-[0.97] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]"
          >
            <AnimatePresence mode="popLayout" initial={false}>
              <motion.span key={String(published)} initial={{ y: 12, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: -12, opacity: 0 }} transition={{ type: "spring", bounce: 0.2, duration: 0.35 }}>
                {published ? "Published" : "Publish"}
              </motion.span>
            </AnimatePresence>
          </button>
        </div>
      </header>
      <div className="min-h-0 flex-1">
        <SidebarProvider>
          <Sidebar width={224}>
            <SidebarHeader>
              <SidebarSearch placeholder="Search content" kbd="/" />
            </SidebarHeader>
            <SidebarContent>
              <SidebarGroup label="Content">
                {[
                  { name: "Posts", icon: Newspaper, badge: 24 },
                  { name: "Pages", icon: FileText },
                  { name: "Media", icon: Image },
                  { name: "Authors", icon: Users },
                ].map(({ name, icon: Icon, badge }) => (
                  <SidebarItem key={name} icon={<Icon />} badge={badge} active={page === name} onClick={() => setPage(name)}>
                    {name}
                  </SidebarItem>
                ))}
              </SidebarGroup>
              <SidebarGroup label="Collections" collapsible defaultOpen={false}>
                {["Guides", "Case studies", "Recipes"].map((c) => (
                  <SidebarItem key={c} icon={<BookMarked />} active={page === c} onClick={() => setPage(c)}>
                    {c}
                  </SidebarItem>
                ))}
              </SidebarGroup>
              <SidebarGroup label="Site" collapsible>
                <SidebarItem icon={<Globe />} active={page === "Navigation"} onClick={() => setPage("Navigation")}>
                  Navigation
                </SidebarItem>
                <SidebarItem icon={<Link2 />} active={page === "Redirects"} onClick={() => setPage("Redirects")}>
                  Redirects
                </SidebarItem>
                <SidebarSubmenu icon={<Settings />} label="Settings">
                  {["General", "SEO", "Domains"].map((s) => (
                    <SidebarSubItem key={s} active={page === s} onClick={() => setPage(s)}>
                      {s}
                    </SidebarSubItem>
                  ))}
                </SidebarSubmenu>
              </SidebarGroup>
            </SidebarContent>
            <SidebarFooter>
              <Collapse />
            </SidebarFooter>
          </Sidebar>
          <SidebarInset>
            <div className="flex-1 overflow-y-auto">
              <div className="px-6 py-5">
                <div className="flex items-center gap-3">
                  <h2 className="text-[20px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{page}</h2>
                  {page === "Posts" && <span className="text-[13px] tabular-nums text-neutral-400">{rows.length}</span>}
                  <button className="ml-auto flex h-8 items-center gap-1.5 rounded-[var(--ui-radius,9px)] px-2.5 text-[12.5px] font-medium text-neutral-800 ring-1 ring-black/[0.08] dark:text-neutral-200 dark:ring-white/[0.1]">
                    <Plus className="size-3.5" />
                    New {page === "Posts" ? "post" : "item"}
                  </button>
                </div>
                {page === "Posts" ? (
                  <>
                    <div className="mt-4 flex items-center gap-2">
                      <div className="flex rounded-[10px] bg-neutral-950/[0.04] p-0.5 dark:bg-white/[0.06]">
                        {(["All", "Published", "Draft", "Scheduled"] as const).map((f) => (
                          <button key={f} onClick={() => setFilter(f)} className="relative h-7 px-2.5 text-[12px] font-medium">
                            {filter === f && <motion.span layoutId="post-filter" className="absolute inset-0 rounded-[8px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.08)] dark:bg-neutral-700" transition={{ type: "spring", bounce: 0.15, duration: 0.3 }} />}
                            <span className={cn("relative", filter === f ? "text-neutral-950 dark:text-white" : "text-neutral-500")}>{f}</span>
                          </button>
                        ))}
                      </div>
                      <label className="ml-auto hidden h-8 w-[200px] items-center gap-2 rounded-[var(--ui-radius,9px)] px-2.5 ring-1 ring-black/[0.08] @[640px]:flex dark:ring-white/[0.1]">
                        <Search className="size-3.5 text-neutral-400" />
                        <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Filter posts" className="min-w-0 flex-1 bg-transparent text-[12.5px] outline-none placeholder:text-neutral-400" />
                      </label>
                    </div>
                    <ul className="mt-3">
                      <AnimatePresence initial={false}>
                        {rows.map((p) => (
                          <motion.li
                            key={p.title}
                            layout
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            transition={{ type: "spring", bounce: 0, duration: 0.3 }}
                            className="flex items-center gap-3 border-b border-black/[0.05] py-3 dark:border-white/[0.06]"
                          >
                            <span className="min-w-0 flex-1">
                              <span className="block truncate text-[13.5px] font-medium text-neutral-950 dark:text-white">{p.title}</span>
                              <span className="mt-0.5 flex items-center gap-1.5 text-[12px] text-neutral-500">
                                <img src={face(people[p.author].photo)} alt="" className="size-4 rounded-full object-cover" />
                                {people[p.author].name} · {p.updated}
                              </span>
                            </span>
                            <span className="flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11.5px] text-neutral-600 ring-1 ring-black/[0.07] dark:text-neutral-300 dark:ring-white/[0.1]">
                              <span className={cn("size-1.5 rounded-full", STATUS[p.status])} />
                              {p.status}
                            </span>
                          </motion.li>
                        ))}
                      </AnimatePresence>
                    </ul>
                    {rows.length === 0 && <p className="py-8 text-center text-[13px] text-neutral-500">No posts match.</p>}
                  </>
                ) : (
                  <div className="mt-6 rounded-[14px] border border-dashed border-black/[0.1] py-12 text-center text-[13px] text-neutral-500 dark:border-white/[0.12]">Nothing in {page} yet.</div>
                )}
              </div>
            </div>
          </SidebarInset>
        </SidebarProvider>
      </div>
    </div>
  );
}

4b:T7eef,"use client"; import { AnimatePresence, motion } from "motion/react"; import { ArrowLeftRight, ArrowUp, Bell, Check, ChevronRight, Columns3, Contact, Home, Inbox, LineChart, LogOut, Maximize2, Mic, Minimize2, MousePointer2, Plus, Rows3, Settings, Undo2, Users, X, } from "lucide-react"; import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"; import { Sidebar, SidebarContent, SidebarDropdown, SidebarDropdownContent, SidebarDropdownItem, SidebarDropdownSeparator, SidebarDropdownTrigger, SidebarFooter, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, } from "@/components/scalar-ui/sidebar"; import { NavbarSearch, type SearchGroup } from "@/components/scalar-ui/navbar"; import { cn } from "@/lib/utils"; const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=96&h=96&fit=crop&crop=faces&auto=format&q=75`; const STAGES = ["Lead", "Qualified", "Proposal", "Won"] as const; type Stage = (typeof STAGES)[number]; type Deal = { id: string; company: string; contact: string; photo: string; value: number; stage: Stage; tile: string }; const START: Deal[] = [ { id: "northwind", company: "Northwind", contact: "Amara Okafor", photo: "1531123897727-8f129e1688ce", value: 24000, stage: "Proposal", tile: "bg-sky-500" }, { id: "lumen", company: "Lumen Labs", contact: "Diego Alvarez", photo: "1506794778202-cad84cf45f1d", value: 8600, stage: "Qualified", tile: "bg-violet-500" }, { id: "kumo", company: "Kumo", contact: "Hana Sato", photo: "1544005313-94ddf0286df2", value: 41000, stage: "Won", tile: "bg-emerald-500" }, { id: "tandem", company: "Tandem", contact: "Priya Raman", photo: "1580489944761-15a19d654956", value: 12500, stage: "Lead", tile: "bg-amber-500" }, { id: "fable", company: "Fable & Co", contact: "Theo Laurent", photo: "1539571696357-5a69c17a67c6", value: 5200, stage: "Lead", tile: "bg-rose-500" }, { id: "orbit", company: "Orbit", contact: "Liam Novak", photo: "1472099645785-5658abf4ff4e", value: 18900, stage: "Qualified", tile: "bg-neutral-800" }, { id: "pine", company: "Pine Health", contact: "Zoe Fischer", photo: "1534528741775-53994a69daeb", value: 32000, stage: "Proposal", tile: "bg-teal-600" }, ]; const STAGE_TONE: Record = { Lead: "bg-neutral-400", Qualified: "bg-sky-500", Proposal: "bg-amber-500", Won: "bg-emerald-500", }; const suggestions = ["Only deals over $20k", "Move Tandem to Qualified", "Switch to board view", "Switch to dark mode"]; type View = { view: "table" | "board"; stage: Stage | null; min: number; sort: "recent" | "value"; deals: Deal[]; open: string | null }; type Step = { label: string; done: boolean }; type Message = { id: number; role: "user" | "assistant"; text: string; steps?: Step[]; before?: View; undone?: boolean }; const money = (n: number) => `$${n >= 1000 ? `${(n / 1000).toFixed(n % 1000 ? 1 : 0)}k` : n}`; function TallyMark({ className }: { className?: string }) { return ( ); } function Typed({ text, onDone }: { text: string; onDone?: () => void }) { const [count, setCount] = useState(0); const words = text.split(" "); useEffect(() => { if (count >= words.length) return onDone?.(); const t = setTimeout(() => setCount((c) => c + 1), 28); return () => clearTimeout(t); }, [count, words.length, onDone]); return <>{words.slice(0, count).join(" ")}; } function Header({ onAsk, asking, search, account }: { onAsk: () => void; asking: boolean; search: ReactNode; account: ReactNode }) { const button = "flex h-8 items-center gap-1.5 rounded-[9px] px-2.5 text-[13px] font-medium text-neutral-700 ring-1 ring-black/[0.08] outline-none transition-colors hover:bg-neutral-50 dark:text-neutral-200 dark:ring-white/[0.1] dark:hover:bg-white/[0.06]"; return (

{search}

{account}

); } export default function Example() { const [state, setState] = useState({ view: "table", stage: null, min: 0, sort: "recent", deals: START, open: null }); const [menu, setMenu] = useState(false); const [asking, setAsking] = useState(true); const [wide, setWide] = useState(false); const [messages, setMessages] = useState([]); const [draft, setDraft] = useState(""); const [busy, setBusy] = useState(false); const [theme, setTheme] = useState<"light" | "dark">("light"); const scroller = useRef(null); const finish = useCallback(() => setBusy(false), []); useEffect(() => { setTheme(document.documentElement.classList.contains("dark") ? "dark" : "light"); const key = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "j") { e.preventDefault(); setAsking((a) => !a); } }; window.addEventListener("keydown", key); return () => window.removeEventListener("keydown", key); }, []); useEffect(() => { scroller.current?.scrollTo({ top: scroller.current.scrollHeight, behavior: "smooth" }); }, [messages]); const applyTheme = (next: "light" | "dark") => { document.documentElement.classList.toggle("dark", next === "dark"); setTheme(next); }; const patch = (p: Partial) => setState((s) => ({ ...s, ...p })); const plan = (raw: string) => { const t = raw.toLowerCase(); const steps: { label: string; run: () => void }[] = []; const named = (s: string) => START.find((d) => s.includes(d.company.toLowerCase().split(" ")[0])); const stageIn = (s: string) => STAGES.find((st) => s.includes(st.toLowerCase())); if (/\bdark\b|night/.test(t)) steps.push({ label: "Switched to dark mode", run: () => applyTheme("dark") }); else if (/\blight\b/.test(t)) steps.push({ label: "Switched to light mode", run: () => applyTheme("light") }); const move = t.match(/move\s+(.+?)\s+to\s+(\w+)/); if (move) { const deal = named(move[1]); const stage = stageIn(move[2]); if (deal && stage) steps.push({ label: `Moved ${deal.company} to ${stage}`, run: () => setState((s) => ({ ...s, open: deal.id, deals: s.deals.map((d) => (d.id === deal.id ? { ...d, stage } : d)) })) }); } else { const stage = stageIn(t); if (stage) steps.push({ label: `Showing ${stage} deals`, run: () => patch({ stage }) }); const deal = /open|show me|details/.test(t) ? named(t) : undefined; if (deal) steps.push({ label: `Opened ${deal.company}`, run: () => patch({ open: deal.id }) }); } const over = t.match(/(?:over|above|more than|bigger than|>)\s*\$?(\d+(?:\.\d+)?)\s*(k)?/); if (over) { const min = Number(over[1]) * (over[2] ? 1000 : 1); steps.push({ label: `Only deals over ${money(min)}`, run: () => patch({ min }) }); } if (/board|kanban|columns/.test(t)) steps.push({ label: "Switched to the board", run: () => patch({ view: "board" }) }); else if (/table|list|rows/.test(t)) steps.push({ label: "Switched to the table", run: () => patch({ view: "table" }) }); if (/sort|biggest|largest|highest/.test(t)) steps.push({ label: "Sorted by value", run: () => patch({ sort: "value" }) }); if (/clear|reset|everything|all deals/.test(t)) steps.push({ label: "Cleared filters", run: () => patch({ stage: null, min: 0, open: null }) }); if (/account|menu|workspace|settings/.test(t)) steps.push({ label: "Opened the account menu", run: () => setMenu(true) }); if (/close (the )?(chat|panel)|hide (the )?(chat|panel)/.test(t)) steps.push({ label: "Closed this panel", run: () => setAsking(false) }); let reply: string; if (/total|pipeline|how much|worth/.test(t)) { const open = state.deals.filter((d) => d.stage !== "Won"); reply = `The open pipeline is ${money(open.reduce((s, d) => s + d.value, 0))} across ${open.length} deals.`; } else if (steps.length) reply = `Done. ${steps.map((s, i) => (i ? s.label[0].toLowerCase() + s.label.slice(1) : s.label)).join(", ")}. Anything else?`.replace(/, ([^,]*)\. Anything/, " and $1. Anything"); else reply = "I can filter by stage or value, sort, switch between table and board, open or move a deal, open your account menu or change the theme. Try “Move Tandem to Won”."; return { steps, reply }; }; const send = (text: string) => { const value = text.trim(); if (!value || busy) return; const { steps, reply } = plan(value); const id = Date.now(); setDraft(""); setBusy(true); setMessages((m) => [...m, { id, role: "user", text: value }, { id: id + 1, role: "assistant", text: "", steps: steps.map((s) => ({ label: s.label, done: false })), before: steps.length ? state : undefined }]); steps.forEach((s, i) => setTimeout(() => { s.run(); setMessages((m) => m.map((msg) => (msg.id === id + 1 ? { ...msg, steps: msg.steps?.map((st, j) => (j === i ? { ...st, done: true } : st)) } : msg))); }, 420 * (i + 1)), ); setTimeout(() => setMessages((m) => m.map((msg) => (msg.id === id + 1 ? { ...msg, text: reply } : msg))), 420 * (steps.length + 1)); }; const undo = (m: Message) => { if (!m.before) return; setState(m.before); setMessages((all) => all.map((x) => (x.id === m.id ? { ...x, undone: true } : x))); }; const shown = state.deals.filter((d) => (!state.stage || d.stage === state.stage) && d.value >= state.min).sort((a, b) => (state.sort === "value" ? b.value - a.value : 0)); const opened = state.deals.find((d) => d.id === state.open); const groups: SearchGroup[] = [ { heading: "Deals", items: START.slice(0, 5).map((d) => ({ label: d.company, icon: , onSelect: () => patch({ open: d.id }) })) }, { heading: "Go to", items: [{ label: "Board view", icon: , onSelect: () => patch({ view: "board" }) }, { label: "Ask Tally", icon: , shortcut: "⌘J", onSelect: () => setAsking(true) }] }, ]; const account = (

Quarter target 68%

$136k of $200k closed

Team

EMEA Sales

8 members

Settings Team settings

Theme

{(["light", "dark"] as const).map((m) => ( ))}

Sign out ); return (

}>Home } active> Deals }>Contacts } badge={3}> Inbox }>Settings

setAsking(!asking)} account={account} search={} />

Deals

{shown.length} deals · {money(shown.reduce((s, d) => s + d.value, 0))}

{( [ ["table", Rows3], ["board", Columns3], ] as const ).map(([v, Icon]) => ( ))}

{[null, ...STAGES].map((s) => ( ))} {state.min > 0 && ( )}

{state.view === "table" ? (

{shown.map((d) => ( patch({ open: state.open === d.id ? null : d.id })} className={cn( "flex cursor-pointer items-center gap-3 border-b border-black/[0.05] px-3 py-2.5 last:border-0 dark:border-white/[0.06]", state.open === d.id ? "bg-indigo-500/[0.06]" : "hover:bg-neutral-950/[0.02] dark:hover:bg-white/[0.03]", )} > {d.company[0]} {d.company}

{d.contact} {d.stage} {money(d.value)} ))}

{shown.length === 0 &&

No deals match. Ask to clear the filters.

}

) : (

{STAGES.map((s) => (

{s}

{shown .filter((d) => d.stage === s) .map((d) => ( patch({ open: state.open === d.id ? null : d.id })} transition={{ type: "spring", bounce: 0.15, duration: 0.45 }} className={cn("rounded-[10px] bg-white p-2.5 text-left shadow-[0_1px_2px_rgb(0_0_0/0.05)] ring-1 dark:bg-neutral-900", state.open === d.id ? "ring-indigo-500/60" : "ring-black/[0.06] dark:ring-white/[0.07]")} > {d.company}

{money(d.value)} ))}

))}

)} {opened && (

{opened.company} · {money(opened.value)}

{opened.contact} · {opened.stage}

)}

{messages.length ? "Tally" : "New chat"} {[ { label: wide ? "Narrow" : "Widen", icon: wide ? Minimize2 : Maximize2, run: () => setWide(!wide) }, { label: "New chat", icon: Plus, run: () => (setMessages([]), setBusy(false)) }, { label: "Close", icon: X, run: () => setAsking(false) }, ].map(({ label, icon: Icon, run }) => ( ))}

{messages.length === 0 ? (

Ask Tally to do it for you.

It can filter, sort, move deals and change settings on this page. Press ⌘J to open it anywhere.

{suggestions.map((s) => ( ))}

) : (

{messages.map((m) => m.role === "user" ? ( {m.text} ) : ( {m.steps?.map((s) => (

{s.done && !m.undone && } {s.label}

))} {m.text && (

{m.undone ? "Undone." : }

)} {m.text && m.before && !m.undone && ( )} ), )}

)}

{ e.preventDefault(); send(draft); }} className="m-3 mt-0 rounded-[16px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]" >

setDraft(e.target.value)}
 onKeyDown={(e) => {
 if (e.key === "Enter" && !e.shiftKey) {
 e.preventDefault();
 send(draft);
 }
 }}
 rows={2}
 placeholder="Ask anything…"
 className="w-full resize-none bg-transparent px-1 text-[13px] text-neutral-950 outline-none placeholder:text-neutral-400 dark:text-white"
 />
 <div className="flex items-center gap-1">
 <button type="button" aria-label="Attach" className="flex size-7 items-center justify-center rounded-full text-neutral-500 hover:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08]">
 <Plus className="size-4" />
 </button>
 <button type="button" aria-label="Dictate" className="ml-auto flex size-7 items-center justify-center rounded-full text-neutral-500 hover:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08]">
 <Mic className="size-4" />
 </button>
 <button type="submit" aria-label="Send" disabled={!draft.trim() || busy} className="flex size-7 items-center justify-center rounded-full bg-neutral-950 text-white transition-opacity disabled:opacity-30 dark:bg-white dark:text-neutral-950">
 <ArrowUp className="size-4" />
 </button>
 </div>
 </form>
 </div>
 </motion.aside>
 </SidebarProvider>
 </div>
 );
}
4c:T4ab43,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>"use client";

import { AnimatePresence, motion } from "motion/react";
import {
 ArrowLeftRight,
 ArrowUp,
 Bell,
 Check,
 ChevronRight,
 Columns3,
 Contact,
 Home,
 Inbox,
 LineChart,
 LogOut,
 Maximize2,
 Mic,
 Minimize2,
 MousePointer2,
 Plus,
 Rows3,
 Settings,
 Undo2,
 Users,
 X,
} from "lucide-react";
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
import {
 Sidebar,
 SidebarContent,
 SidebarDropdown,
 SidebarDropdownContent,
 SidebarDropdownItem,
 SidebarDropdownSeparator,
 SidebarDropdownTrigger,
 SidebarFooter,
 SidebarGroup,
 SidebarHeader,
 SidebarInset,
 SidebarItem,
 SidebarProvider,
} from "@/components/scalar-ui/sidebar";
import { NavbarSearch, type SearchGroup } from "@/components/scalar-ui/navbar";
import { cn } from "@/lib/utils";

const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=96&h=96&fit=crop&crop=faces&auto=format&q=75`;

const STAGES = ["Lead", "Qualified", "Proposal", "Won"] as const;
type Stage = (typeof STAGES)[number];
type Deal = { id: string; company: string; contact: string; photo: string; value: number; stage: Stage; tile: string };

const START: Deal[] = [
 { id: "northwind", company: "Northwind", contact: "Amara Okafor", photo: "1531123897727-8f129e1688ce", value: 24000, stage: "Proposal", tile: "bg-sky-500" },
 { id: "lumen", company: "Lumen Labs", contact: "Diego Alvarez", photo: "1506794778202-cad84cf45f1d", value: 8600, stage: "Qualified", tile: "bg-violet-500" },
 { id: "kumo", company: "Kumo", contact: "Hana Sato", photo: "1544005313-94ddf0286df2", value: 41000, stage: "Won", tile: "bg-emerald-500" },
 { id: "tandem", company: "Tandem", contact: "Priya Raman", photo: "1580489944761-15a19d654956", value: 12500, stage: "Lead", tile: "bg-amber-500" },
 { id: "fable", company: "Fable & Co", contact: "Theo Laurent", photo: "1539571696357-5a69c17a67c6", value: 5200, stage: "Lead", tile: "bg-rose-500" },
 { id: "orbit", company: "Orbit", contact: "Liam Novak", photo: "1472099645785-5658abf4ff4e", value: 18900, stage: "Qualified", tile: "bg-neutral-800" },
 { id: "pine", company: "Pine Health", contact: "Zoe Fischer", photo: "1534528741775-53994a69daeb", value: 32000, stage: "Proposal", tile: "bg-teal-600" },
];

const STAGE_TONE: Record<Stage, string> = {
 Lead: "bg-neutral-400",
 Qualified: "bg-sky-500",
 Proposal: "bg-amber-500",
 Won: "bg-emerald-500",
};

const suggestions = ["Only deals over $20k", "Move Tandem to Qualified", "Switch to board view", "Switch to dark mode"];

type View = { view: "table" | "board"; stage: Stage | null; min: number; sort: "recent" | "value"; deals: Deal[]; open: string | null };
type Step = { label: string; done: boolean };
type Message = { id: number; role: "user" | "assistant"; text: string; steps?: Step[]; before?: View; undone?: boolean };

const money = (n: number) => `$${n >= 1000 ? `${(n / 1000).toFixed(n % 1000 ? 1 : 0)}k` : n}`;

function TallyMark({ className }: { className?: string }) {
 return (
 <svg viewBox="0 0 24 24" className={className} aria-hidden>
 <rect x="3" y="3" width="18" height="18" rx="6" fill="currentColor" />
 <path d="M8 15.5 11 9l2.2 4.2L15 11l1.5 4.5" fill="none" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className="dark:stroke-neutral-950" />
 </svg>
 );
}

function Typed({ text, onDone }: { text: string; onDone?: () => void }) {
 const [count, setCount] = useState(0);
 const words = text.split(" ");
 useEffect(() => {
 if (count >= words.length) return onDone?.();
 const t = setTimeout(() => setCount((c) => c + 1), 28);
 return () => clearTimeout(t);
 }, [count, words.length, onDone]);
 return <>{words.slice(0, count).join(" ")}</>;
}

function Header({ onAsk, asking, search, account }: { onAsk: () => void; asking: boolean; search: ReactNode; account: ReactNode }) {
 const button = "flex h-8 items-center gap-1.5 rounded-[9px] px-2.5 text-[13px] font-medium text-neutral-700 ring-1 ring-black/[0.08] outline-none transition-colors hover:bg-neutral-50 dark:text-neutral-200 dark:ring-white/[0.1] dark:hover:bg-white/[0.06]";
 return (
 <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 dark:border-white/[0.07]">
 <nav className="flex min-w-0 items-center gap-1 text-[13.5px]">
 <span className="text-neutral-500">Sales</span>
 <ChevronRight className="size-3.5 text-neutral-400" />
 <span className="truncate font-medium text-neutral-950 dark:text-white">Deals</span>
 </nav>
 <div className="mx-auto hidden w-[240px] @[760px]:block">{search}</div>
 <div className="ml-auto flex items-center gap-1.5 @[760px]:ml-0">
 <button className={cn(button, "hidden @[560px]:flex")}>Feedback</button>
 <button className={cn(button, "hidden @[560px]:flex")}>Docs</button>
 <button onClick={onAsk} aria-pressed={asking} className={cn(button, asking && "bg-neutral-950/[0.05] dark:bg-white/[0.08]")}>
 <MousePointer2 className="size-3.5 -scale-x-100 fill-current text-indigo-500" />
 Ask
 </button>
 <button aria-label="Notifications" className="flex size-8 items-center justify-center rounded-[9px] text-neutral-500 ring-1 ring-black/[0.08] outline-none transition-colors hover:bg-neutral-50 dark:ring-white/[0.1] dark:hover:bg-white/[0.06]">
 <Bell className="size-4" />
 </button>
 {account}
 </div>
 </header>
 );
}

export default function Example() {
 const [state, setState] = useState<View>({ view: "table", stage: null, min: 0, sort: "recent", deals: START, open: null });
 const [menu, setMenu] = useState(false);
 const [asking, setAsking] = useState(true);
 const [wide, setWide] = useState(false);
 const [messages, setMessages] = useState<Message[]>([]);
 const [draft, setDraft] = useState("");
 const [busy, setBusy] = useState(false);
 const [theme, setTheme] = useState<"light" | "dark">("light");
 const scroller = useRef<HTMLDivElement>(null);
 const finish = useCallback(() => setBusy(false), []);

 useEffect(() => {
 setTheme(document.documentElement.classList.contains("dark") ? "dark" : "light");
 const key = (e: KeyboardEvent) => {
 if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "j") {
 e.preventDefault();
 setAsking((a) => !a);
 }
 };
 window.addEventListener("keydown", key);
 return () => window.removeEventListener("keydown", key);
 }, []);

 useEffect(() => {
 scroller.current?.scrollTo({ top: scroller.current.scrollHeight, behavior: "smooth" });
 }, [messages]);

 const applyTheme = (next: "light" | "dark") => {
 document.documentElement.classList.toggle("dark", next === "dark");
 setTheme(next);
 };

 const patch = (p: Partial<View>) => setState((s) => ({ ...s, ...p }));

 const plan = (raw: string) => {
 const t = raw.toLowerCase();
 const steps: { label: string; run: () => void }[] = [];
 const named = (s: string) => START.find((d) => s.includes(d.company.toLowerCase().split(" ")[0]));
 const stageIn = (s: string) => STAGES.find((st) => s.includes(st.toLowerCase()));

 if (/\bdark\b|night/.test(t)) steps.push({ label: "Switched to dark mode", run: () => applyTheme("dark") });
 else if (/\blight\b/.test(t)) steps.push({ label: "Switched to light mode", run: () => applyTheme("light") });

 const move = t.match(/move\s+(.+?)\s+to\s+(\w+)/);
 if (move) {
 const deal = named(move[1]);
 const stage = stageIn(move[2]);
 if (deal && stage)
 steps.push({ label: `Moved ${deal.company} to ${stage}`, run: () => setState((s) => ({ ...s, open: deal.id, deals: s.deals.map((d) => (d.id === deal.id ? { ...d, stage } : d)) })) });
 } else {
 const stage = stageIn(t);
 if (stage) steps.push({ label: `Showing ${stage} deals`, run: () => patch({ stage }) });
 const deal = /open|show me|details/.test(t) ? named(t) : undefined;
 if (deal) steps.push({ label: `Opened ${deal.company}`, run: () => patch({ open: deal.id }) });
 }
 const over = t.match(/(?:over|above|more than|bigger than|>)\s*\$?(\d+(?:\.\d+)?)\s*(k)?/);
 if (over) {
 const min = Number(over[1]) * (over[2] ? 1000 : 1);
 steps.push({ label: `Only deals over ${money(min)}`, run: () => patch({ min }) });
 }
 if (/board|kanban|columns/.test(t)) steps.push({ label: "Switched to the board", run: () => patch({ view: "board" }) });
 else if (/table|list|rows/.test(t)) steps.push({ label: "Switched to the table", run: () => patch({ view: "table" }) });
 if (/sort|biggest|largest|highest/.test(t)) steps.push({ label: "Sorted by value", run: () => patch({ sort: "value" }) });
 if (/clear|reset|everything|all deals/.test(t)) steps.push({ label: "Cleared filters", run: () => patch({ stage: null, min: 0, open: null }) });
 if (/account|menu|workspace|settings/.test(t)) steps.push({ label: "Opened the account menu", run: () => setMenu(true) });
 if (/close (the )?(chat|panel)|hide (the )?(chat|panel)/.test(t)) steps.push({ label: "Closed this panel", run: () => setAsking(false) });

 let reply: string;
 if (/total|pipeline|how much|worth/.test(t)) {
 const open = state.deals.filter((d) => d.stage !== "Won");
 reply = `The open pipeline is ${money(open.reduce((s, d) => s + d.value, 0))} across ${open.length} deals.`;
 } else if (steps.length) reply = `Done. ${steps.map((s, i) => (i ? s.label[0].toLowerCase() + s.label.slice(1) : s.label)).join(", ")}. Anything else?`.replace(/, ([^,]*)\. Anything/, " and $1. Anything");
 else reply = "I can filter by stage or value, sort, switch between table and board, open or move a deal, open your account menu or change the theme. Try “Move Tandem to Won”.";
 return { steps, reply };
 };

 const send = (text: string) => {
 const value = text.trim();
 if (!value || busy) return;
 const { steps, reply } = plan(value);
 const id = Date.now();
 setDraft("");
 setBusy(true);
 setMessages((m) => [...m, { id, role: "user", text: value }, { id: id + 1, role: "assistant", text: "", steps: steps.map((s) => ({ label: s.label, done: false })), before: steps.length ? state : undefined }]);
 steps.forEach((s, i) =>
 setTimeout(() => {
 s.run();
 setMessages((m) => m.map((msg) => (msg.id === id + 1 ? { ...msg, steps: msg.steps?.map((st, j) => (j === i ? { ...st, done: true } : st)) } : msg)));
 }, 420 * (i + 1)),
 );
 setTimeout(() => setMessages((m) => m.map((msg) => (msg.id === id + 1 ? { ...msg, text: reply } : msg))), 420 * (steps.length + 1));
 };

 const undo = (m: Message) => {
 if (!m.before) return;
 setState(m.before);
 setMessages((all) => all.map((x) => (x.id === m.id ? { ...x, undone: true } : x)));
 };

 const shown = state.deals.filter((d) => (!state.stage || d.stage === state.stage) && d.value >= state.min).sort((a, b) => (state.sort === "value" ? b.value - a.value : 0));
 const opened = state.deals.find((d) => d.id === state.open);

 const groups: SearchGroup[] = [
 { heading: "Deals", items: START.slice(0, 5).map((d) => ({ label: d.company, icon: <LineChart />, onSelect: () => patch({ open: d.id }) })) },
 { heading: "Go to", items: [{ label: "Board view", icon: <Columns3 />, onSelect: () => patch({ view: "board" }) }, { label: "Ask Tally", icon: <MousePointer2 />, shortcut: "⌘J", onSelect: () => setAsking(true) }] },
 ];

 const account = (
 <SidebarDropdown open={menu} onOpenChange={setMenu}>
 <SidebarDropdownTrigger asChild>
 <button aria-label="Account" className="ml-0.5 size-8 overflow-hidden rounded-full ring-2 ring-black/[0.06] outline-none transition-transform active:scale-95 dark:ring-white/[0.1]">
 <img src={face("1494790108377-be9c29b29330")} alt="Maya Chen" className="size-full object-cover" />
 </button>
 </SidebarDropdownTrigger>
 <SidebarDropdownContent align="end" className="w-[248px]">
 <div className="rounded-[10px] p-2 ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
 <div className="flex items-center gap-2 text-[13px] font-medium">
 Quarter target
 <span className="ml-auto text-[12px] tabular-nums text-neutral-500">68%</span>
 </div>
 <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-neutral-950/[0.07] dark:bg-white/[0.1]">
 <div className="h-full w-[68%] rounded-full bg-indigo-500" />
 </div>
 <p className="mt-1.5 text-[11.5px] text-neutral-500">$136k of $200k closed</p>
 </div>
 <div className="mt-1.5 flex items-center gap-2 rounded-[10px] p-2 ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
 <div className="min-w-0 flex-1">
 <p className="text-[11px] text-neutral-500">Team</p>
 <p className="truncate text-[13px] font-medium">EMEA Sales</p>
 <p className="text-[11px] text-neutral-500">8 members</p>
 </div>
 <button aria-label="Switch team" className="flex size-7 items-center justify-center rounded-[8px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <ArrowLeftRight className="size-3.5" />
 </button>
 </div>
 <SidebarDropdownSeparator />
 <SidebarDropdownItem>
 <Settings />
 Settings
 </SidebarDropdownItem>
 <SidebarDropdownItem>
 <Users />
 Team settings
 </SidebarDropdownItem>
 <div className="flex h-8 items-center gap-2.5 px-2 text-[13px] text-neutral-700 dark:text-neutral-300">
 <span className="flex-1">Theme</span>
 <div className="flex rounded-[8px] bg-neutral-950/[0.05] p-0.5 dark:bg-white/[0.08]">
 {(["light", "dark"] as const).map((m) => (
 <button
 key={m}
 onClick={() => applyTheme(m)}
 className={cn("h-6 rounded-[6px] px-2 text-[11.5px] font-medium capitalize", theme === m ? "bg-white text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.1)] dark:bg-neutral-700 dark:text-white" : "text-neutral-500")}
 >
 {m}
 </button>
 ))}
 </div>
 </div>
 <SidebarDropdownSeparator />
 <SidebarDropdownItem>
 <LogOut />
 Sign out
 </SidebarDropdownItem>
 </SidebarDropdownContent>
 </SidebarDropdown>
 );

 return (
 <div className="h-[640px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider open={false} shortcut={false}>
 <Sidebar collapsible="icon">
 <SidebarHeader>
 <span className="flex size-8 items-center justify-center self-center text-indigo-600 dark:text-indigo-400">
 <TallyMark className="size-6" />
 </span>
 </SidebarHeader>
 <SidebarContent className="gap-4">
 <SidebarGroup>
 <SidebarItem icon={<Home />}>Home</SidebarItem>
 <SidebarItem icon={<LineChart />} active>
 Deals
 </SidebarItem>
 <SidebarItem icon={<Contact />}>Contacts</SidebarItem>
 <SidebarItem icon={<Inbox />} badge={3}>
 Inbox
 </SidebarItem>
 </SidebarGroup>
 </SidebarContent>
 <SidebarFooter>
 <SidebarItem icon={<Settings />}>Settings</SidebarItem>
 </SidebarFooter>
 </Sidebar>
 <SidebarInset>
 <Header asking={asking} onAsk={() => setAsking(!asking)} account={account} search={<NavbarSearch groups={groups} placeholder="Search deals…" className="w-full" />} />
 <div className="flex-1 overflow-y-auto">
 <div className="mx-auto max-w-[760px] px-5 py-6">
 <div className="flex items-end justify-between gap-3">
 <div>
 <h2 className="text-[22px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">Deals</h2>
 <p className="mt-1 text-[12.5px] tabular-nums text-neutral-500">
 {shown.length} deals · {money(shown.reduce((s, d) => s + d.value, 0))}
 </p>
 </div>
 <div className="flex items-center gap-2">
 <div className="flex rounded-[10px] bg-neutral-950/[0.05] p-0.5 dark:bg-white/[0.07]">
 {(
 [
 ["table", Rows3],
 ["board", Columns3],
 ] as const
 ).map(([v, Icon]) => (
 <button
 key={v}
 aria-label={`${v} view`}
 aria-pressed={state.view === v}
 onClick={() => patch({ view: v })}
 className={cn("flex h-7 w-8 items-center justify-center rounded-[8px] transition-colors", state.view === v ? "bg-white text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.1)] dark:bg-neutral-700 dark:text-white" : "text-neutral-500")}
 >
 <Icon className="size-3.5" />
 </button>
 ))}
 </div>
 <button className="flex h-8 items-center gap-1.5 rounded-[9px] bg-neutral-950 px-3 text-[13px] font-medium text-white dark:bg-white dark:text-neutral-950">
 <Plus className="size-3.5" />
 New deal
 </button>
 </div>
 </div>
 <div className="mt-4 flex flex-wrap gap-1.5">
 {[null, ...STAGES].map((s) => (
 <button
 key={s ?? "all"}
 onClick={() => patch({ stage: s })}
 aria-pressed={state.stage === s}
 className={cn(
 "flex h-8 items-center gap-1.5 rounded-[9px] px-2.5 text-[12.5px] ring-1 outline-none transition-colors",
 state.stage === s
 ? "bg-neutral-950 text-white ring-neutral-950 dark:bg-white dark:text-neutral-950 dark:ring-white"
 : "text-neutral-700 ring-black/[0.08] hover:bg-neutral-50 dark:text-neutral-300 dark:ring-white/[0.1] dark:hover:bg-white/[0.05]",
 )}
 >
 {s && <span className={cn("size-1.5 rounded-full", STAGE_TONE[s])} />}
 {s ?? "All stages"}
 </button>
 ))}
 {state.min > 0 && (
 <button onClick={() => patch({ min: 0 })} className="flex h-8 items-center gap-1 rounded-[9px] bg-indigo-500/10 px-2.5 text-[12.5px] font-medium text-indigo-700 dark:text-indigo-300">
 Over {money(state.min)}
 <X className="size-3" />
 </button>
 )}
 </div>
 <div className="mt-4">
 {state.view === "table" ? (
 <div className="overflow-hidden rounded-[14px] ring-1 ring-black/[0.06] dark:ring-white/[0.07]">
 <ul>
 <AnimatePresence initial={false}>
 {shown.map((d) => (
 <motion.li
 key={d.id}
 layout
 initial={{ opacity: 0 }}
 animate={{ opacity: 1 }}
 exit={{ opacity: 0 }}
 transition={{ type: "spring", bounce: 0, duration: 0.3 }}
 onClick={() => patch({ open: state.open === d.id ? null : d.id })}
 className={cn(
 "flex cursor-pointer items-center gap-3 border-b border-black/[0.05] px-3 py-2.5 last:border-0 dark:border-white/[0.06]",
 state.open === d.id ? "bg-indigo-500/[0.06]" : "hover:bg-neutral-950/[0.02] dark:hover:bg-white/[0.03]",
 )}
 >
 <span className={cn("flex size-8 shrink-0 items-center justify-center rounded-[9px] text-[12px] font-bold text-white", d.tile)}>{d.company[0]}</span>
 <span className="min-w-0 flex-1">
 <span className="block truncate text-[13.5px] font-medium text-neutral-950 dark:text-white">{d.company}</span>
 <span className="flex items-center gap-1.5 text-[12px] text-neutral-500">
 <img src={face(d.photo)} alt="" className="size-4 rounded-full object-cover" />
 {d.contact}
 </span>
 </span>
 <span className="hidden w-[92px] items-center gap-1.5 text-[12px] text-neutral-600 @[480px]:flex dark:text-neutral-400">
 <span className={cn("size-1.5 rounded-full", STAGE_TONE[d.stage])} />
 {d.stage}
 </span>
 <span className="w-[64px] text-right text-[13px] font-medium tabular-nums text-neutral-950 dark:text-white">{money(d.value)}</span>
 </motion.li>
 ))}
 </AnimatePresence>
 </ul>
 {shown.length === 0 && <p className="py-8 text-center text-[13px] text-neutral-500">No deals match. Ask to clear the filters.</p>}
 </div>
 ) : (
 <div className="overflow-x-auto">
 <div className="grid min-w-[480px] grid-cols-4 gap-2">
 {STAGES.map((s) => (
 <div key={s} className="rounded-[14px] bg-neutral-950/[0.03] p-1.5 dark:bg-white/[0.03]">
 <p className="flex items-center gap-1.5 px-1.5 pb-1.5 pt-1 text-[12px] font-medium text-neutral-600 dark:text-neutral-400">
 <span className={cn("size-1.5 rounded-full", STAGE_TONE[s])} />
 {s}
 </p>
 <div className="flex flex-col gap-1.5">
 {shown
 .filter((d) => d.stage === s)
 .map((d) => (
 <motion.button
 layoutId={`deal-${d.id}`}
 key={d.id}
 onClick={() => patch({ open: state.open === d.id ? null : d.id })}
 transition={{ type: "spring", bounce: 0.15, duration: 0.45 }}
 className={cn("rounded-[10px] bg-white p-2.5 text-left shadow-[0_1px_2px_rgb(0_0_0/0.05)] ring-1 dark:bg-neutral-900", state.open === d.id ? "ring-indigo-500/60" : "ring-black/[0.06] dark:ring-white/[0.07]")}
 >
 <span className="block truncate text-[12.5px] font-medium text-neutral-950 dark:text-white">{d.company}</span>
 <span className="mt-1.5 flex items-center justify-between">
 <img src={face(d.photo)} alt="" className="size-5 rounded-full object-cover" />
 <span className="text-[12px] font-medium tabular-nums text-neutral-700 dark:text-neutral-300">{money(d.value)}</span>
 </span>
 </motion.button>
 ))}
 </div>
 </div>
 ))}
 </div>
 </div>
 )}
 <AnimatePresence>
 {opened && (
 <motion.div
 initial={{ opacity: 0, y: 8 }}
 animate={{ opacity: 1, y: 0 }}
 exit={{ opacity: 0, y: 8 }}
 transition={{ type: "spring", bounce: 0.15, duration: 0.35 }}
 className="mt-3 flex items-center gap-3 rounded-[14px] bg-white p-3 shadow-[0_1px_2px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.07]"
 >
 <img src={face(opened.photo)} alt="" className="size-10 rounded-full object-cover" />
 <div className="min-w-0 flex-1">
 <p className="truncate text-[13.5px] font-medium text-neutral-950 dark:text-white">
 {opened.company} · {money(opened.value)}
 </p>
 <p className="text-[12px] text-neutral-500">
 {opened.contact} · {opened.stage}
 </p>
 </div>
 <button onClick={() => patch({ open: null })} aria-label="Close" className="flex size-7 items-center justify-center rounded-[8px] text-neutral-400 hover:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08]">
 <X className="size-4" />
 </button>
 </motion.div>
 )}
 </AnimatePresence>
 </div>
 </div>
 </div>
 </SidebarInset>
 <motion.aside
 initial={false}
 animate={{ width: asking ? (wide ? 440 : 320) : 0 }}
 transition={{ type: "spring", bounce: 0, duration: 0.4 }}
 className="relative h-full shrink-0 overflow-hidden border-l border-black/[0.06] bg-neutral-50 dark:border-white/[0.07] dark:bg-neutral-950"
 aria-hidden={!asking}
 >
 <div className="absolute inset-y-0 right-0 flex flex-col" style={{ width: wide ? 440 : 320 }}>
 <div className="flex h-12 shrink-0 items-center gap-1 px-3">
 <span className="flex-1 text-[13.5px] font-medium text-neutral-950 dark:text-white">{messages.length ? "Tally" : "New chat"}</span>
 {[
 { label: wide ? "Narrow" : "Widen", icon: wide ? Minimize2 : Maximize2, run: () => setWide(!wide) },
 { label: "New chat", icon: Plus, run: () => (setMessages([]), setBusy(false)) },
 { label: "Close", icon: X, run: () => setAsking(false) },
 ].map(({ label, icon: Icon, run }) => (
 <button
 key={label}
 aria-label={label}
 title={label}
 onClick={run}
 className="flex size-7 items-center justify-center rounded-[8px] text-neutral-500 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white"
 >
 <Icon className="size-4" />
 </button>
 ))}
 </div>
 <div ref={scroller} className="flex-1 overflow-y-auto px-3">
 {messages.length === 0 ? (
 <div className="flex h-full flex-col items-center justify-center px-4 text-center">
 <MousePointer2 className="size-6 -scale-x-100 fill-indigo-500 text-indigo-500" />
 <p className="mt-3 text-[13.5px] font-medium text-neutral-800 dark:text-neutral-200">Ask Tally to do it for you.</p>
 <p className="mt-1 text-[12.5px] leading-relaxed text-neutral-500">It can filter, sort, move deals and change settings on this page. Press ⌘J to open it anywhere.</p>
 <div className="mt-4 flex flex-wrap justify-center gap-1.5">
 {suggestions.map((s) => (
 <button
 key={s}
 onClick={() => send(s)}
 className="h-7 rounded-full bg-white px-2.5 text-[12px] text-neutral-700 shadow-[0_1px_2px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.07] outline-none transition-colors hover:text-neutral-950 dark:bg-white/[0.05] dark:text-neutral-300 dark:ring-white/[0.08] dark:hover:text-white"
 >
 {s}
 </button>
 ))}
 </div>
 </div>
 ) : (
 <div className="flex flex-col gap-3 pb-3 pt-1">
 {messages.map((m) =>
 m.role === "user" ? (
 <motion.p key={m.id} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="ml-8 self-end rounded-[14px] rounded-br-[6px] bg-neutral-950 px-3 py-2 text-[13px] text-white dark:bg-white dark:text-neutral-950">
 {m.text}
 </motion.p>
 ) : (
 <motion.div key={m.id} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="mr-6 flex flex-col gap-1.5">
 {m.steps?.map((s) => (
 <div key={s.label} className={cn("flex items-center gap-2 text-[12.5px] transition-colors", m.undone ? "text-neutral-400 line-through" : s.done ? "text-neutral-700 dark:text-neutral-300" : "text-neutral-400")}>
 <span className={cn("flex size-4 items-center justify-center rounded-full transition-colors", s.done && !m.undone ? "bg-emerald-500 text-white" : "ring-1 ring-neutral-300 dark:ring-neutral-600")}>
 {s.done && !m.undone && <Check className="size-2.5" strokeWidth={3} />}
 </span>
 {s.label}
 </div>
 ))}
 {m.text && (
 <p className="text-[13px] leading-relaxed text-neutral-800 dark:text-neutral-200">{m.undone ? "Undone." : <Typed text={m.text} onDone={finish} />}</p>
 )}
 {m.text && m.before && !m.undone && (
 <button onClick={() => undo(m)} className="flex items-center gap-1 self-start text-[12px] text-neutral-500 hover:text-neutral-900 dark:hover:text-white">
 <Undo2 className="size-3" />
 Undo
 </button>
 )}
 </motion.div>
 ),
 )}
 </div>
 )}
 </div>
 <form
 onSubmit={(e) => {
 e.preventDefault();
 send(draft);
 }}
 className="m-3 mt-0 rounded-[16px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]"
 >
 <textarea
 value={draft}
 onChange={(e) => setDraft(e.target.value)}
 onKeyDown={(e) => {
 if (e.key === "Enter" && !e.shiftKey) {
 e.preventDefault();
 send(draft);
 }
 }}
 rows={2}
 placeholder="Ask anything…"
 className="w-full resize-none bg-transparent px-1 text-[13px] text-neutral-950 outline-none placeholder:text-neutral-400 dark:text-white"
 />
 <div className="flex items-center gap-1">
 <button type="button" aria-label="Attach" className="flex size-7 items-center justify-center rounded-full text-neutral-500 hover:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08]">
 <Plus className="size-4" />
 </button>
 <button type="button" aria-label="Dictate" className="ml-auto flex size-7 items-center justify-center rounded-full text-neutral-500 hover:bg-neutral-950/[0.05] dark:hover:bg-white/[0.08]">
 <Mic className="size-4" />
 </button>
 <button type="submit" aria-label="Send" disabled={!draft.trim() || busy} className="flex size-7 items-center justify-center rounded-full bg-neutral-950 text-white transition-opacity disabled:opacity-30 dark:bg-white dark:text-neutral-950">
 <ArrowUp className="size-4" />
 </button>
 </div>
 </form>
 </div>
 </motion.aside>
 </SidebarProvider>
 </div>
 );
}
</code></pre>4d:T4888,"use client";

import { AnimatePresence, motion } from "motion/react";
import {
  Circle,
  Grid3x3,
  MessageSquare,
  Mic,
  MicOff,
  Pause,
  Phone,
  PhoneIncoming,
  PhoneMissed,
  PhoneOff,
  PhoneOutgoing,
  Play,
  UserPlus,
  Users,
  Voicemail,
  Volume2,
} from "lucide-react";
import { useEffect, useState, type ReactNode } from "react";
import {
  Sidebar,
  SidebarButton,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarProvider,
  SidebarRail,
  SidebarSearch,
  SidebarTrigger,
} from "@/components/scalar-ui/sidebar";
import { cn } from "@/lib/utils";

const face = (id: string, size = 96) => `https://images.unsplash.com/photo-${id}?w=${size}&h=${size}&fit=crop&crop=faces&auto=format&q=75`;

type Direction = "in" | "out" | "missed";

const people = [
  { id: "amara", name: "Amara Okafor", role: "Head of Design · Lumen", phone: "+1 (415) 555‑0142", photo: "1531123897727-8f129e1688ce", last: "in" as Direction, when: "2m", duration: "12:08" },
  { id: "diego", name: "Diego Alvarez", role: "Account Executive", phone: "+34 612 55 01 88", photo: "1506794778202-cad84cf45f1d", last: "out" as Direction, when: "28m", duration: "4:51" },
  { id: "hana", name: "Hana Sato", role: "Product Lead · Kumo", phone: "+81 90‑5550‑2231", photo: "1544005313-94ddf0286df2", last: "missed" as Direction, when: "1h", duration: "" },
  { id: "liam", name: "Liam Novak", role: "Engineering Manager", phone: "+420 601 555 019", photo: "1472099645785-5658abf4ff4e", last: "in" as Direction, when: "3h", duration: "21:40" },
  { id: "priya", name: "Priya Raman", role: "Founder · Tandem", phone: "+91 98450 55512", photo: "1580489944761-15a19d654956", last: "out" as Direction, when: "Yesterday", duration: "9:02" },
  { id: "theo", name: "Theo Laurent", role: "Recruiter", phone: "+33 6 55 01 42 77", photo: "1539571696357-5a69c17a67c6", last: "missed" as Direction, when: "Mon", duration: "" },
];

const DIRECTION = {
  in: { icon: PhoneIncoming, label: "Incoming", tone: "text-neutral-400" },
  out: { icon: PhoneOutgoing, label: "Outgoing", tone: "text-neutral-400" },
  missed: { icon: PhoneMissed, label: "Missed", tone: "text-rose-500" },
};

const bars = [6, 10, 16, 9, 22, 14, 28, 18, 12, 24, 30, 20, 11, 17, 26, 13, 8, 19, 27, 15, 10, 21, 12, 7, 16, 9, 5];

const keys = [
  ["1", ""],
  ["2", "ABC"],
  ["3", "DEF"],
  ["4", "GHI"],
  ["5", "JKL"],
  ["6", "MNO"],
  ["7", "PQRS"],
  ["8", "TUV"],
  ["9", "WXYZ"],
  ["*", ""],
  ["0", "+"],
  ["#", ""],
];

const clock = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;

export default function Example() {
 const [selected, setSelected] = useState("amara");
 const [state, setState] = useState<"idle" | "ringing" | "live" | "ended">("live");
 const [seconds, setSeconds] = useState(127);
 const [muted, setMuted] = useState(false);
 const [held, setHeld] = useState(false);
 const [speaker, setSpeaker] = useState(false);
 const [recording, setRecording] = useState(true);
 const [keypad, setKeypad] = useState(false);
 const [digits, setDigits] = useState("");
 const [onCall, setOnCall] = useState("amara");
 const person = people.find((p) => p.id === selected)!;
 const caller = people.find((p) => p.id === onCall)!;
 const viewingCall = selected === onCall && state !== "idle";

useEffect(() => {
    if (state !== "live" || held) return;
    const t = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(t);
  }, [state, held]);

useEffect(() => {
    if (state !== "ringing") return;
    const t = setTimeout(() => setState("live"), 1800);
    return () => clearTimeout(t);
  }, [state]);

const call = (id: string) => {
    setOnCall(id);
    setSelected(id);
    setSeconds(0);
    setMuted(false);
    setHeld(false);
    setKeypad(false);
    setDigits("");
    setState("ringing");
  };

return (
 <div className="h-[600px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider>
 <Sidebar variant="inset" width={252}>
 <SidebarHeader>
 <div className="flex h-9 items-center gap-2 px-1.5">
 
 <Phone className="size-3.5 fill-current" />
 
 Relay
 </div>
 <SidebarSearch placeholder="Search people" />
 </SidebarHeader>
 <SidebarContent>
 <SidebarGroup>
 <SidebarItem icon={<Phone />} active>
 Calls
 </SidebarItem>
 <SidebarItem icon={<Users />}>Contacts</SidebarItem>
 <SidebarItem icon={<Voicemail />} badge={3}>
 Voicemail
 </SidebarItem>
 <SidebarItem icon={<Circle />}>Recordings</SidebarItem>
 </SidebarGroup>
 <SidebarGroup label="Recent">
 {people.map((p) => {
 const d = DIRECTION[p.last];
 return (
 <li key={p.id} className="flex">
 <SidebarButton size="lg" active={selected === p.id} onClick={() => setSelected(p.id)} tooltip={p.name} icon={<Avatar photo={p.photo} name={p.name} className="size-8" />}>
 
 {p.name}
 
 <d.icon className={cn("size-3", d.tone)} />
 {d.label} · {p.when}
 
 
 {p.id === onCall && state === "live" && }
 </SidebarButton>
 </li>
 );
 })}
 </SidebarGroup>
 </SidebarContent>
 <SidebarFooter>
 <AnimatePresence initial={false}>
 {state === "live" && !viewingCall && (
 <motion.button
 initial={{ opacity: 0, y: 8 }}
 animate={{ opacity: 1, y: 0 }}
 exit={{ opacity: 0, y: 8 }}
 transition={{ type: "spring", bounce: 0.2, duration: 0.35 }}
 onClick={() => setSelected(onCall)}
 className="flex items-center gap-2 overflow-hidden rounded-[12px] bg-emerald-600 p-1.5 pr-2.5 text-left text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.2)]"
 >
 <Avatar photo={caller.photo} name={caller.name} className="size-7 shrink-0 ring-white/30" />
 
 {caller.name}
 {clock(seconds)}
 
 <Phone className="size-3.5 shrink-0 fill-current" />
 </motion.button>
 )}
 </AnimatePresence>
 </SidebarFooter>
 <SidebarRail />
 </Sidebar>
 <SidebarInset>
 <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.05] px-3 dark:border-white/[0.07]">
 <SidebarTrigger />
 Calls
 
 
 Available
 
 </header>
 <div className="flex min-h-0 flex-1">
 <AnimatePresence mode="popLayout" initial={false}>
 <motion.section
 key={selected + (viewingCall ? state : "card")}
 initial={{ opacity: 0, scale: 0.98 }}
 animate={{ opacity: 1, scale: 1 }}
 exit={{ opacity: 0, transition: { duration: 0.1 } }}
 transition={{ type: "spring", bounce: 0.15, duration: 0.4 }}
 className="flex min-w-0 flex-1 flex-col items-center justify-center px-6 text-center"
 >
 <div className="relative">
 {viewingCall && state === "live" && !muted && !held && }
 <Avatar photo={person.photo} name={person.name} className={cn("size-24 transition-[filter]", held && viewingCall && "grayscale")} />
 </div>
 <h3 className="mt-4 text-[19px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{person.name}</h3>
 {person.role}
 
 {!viewingCall
 ? person.phone
 : state === "ringing"
 ? "Calling…"
 : state === "ended"
 ? `Call ended · ${clock(seconds)}`
 : held
 ? `On hold · ${clock(seconds)}`
 : `${clock(seconds)}${digits ? ` · ${digits}` : ""}`}
 
 {viewingCall && state === "live" && (
 <div className="mt-4 flex h-8 items-center gap-[3px]" aria-hidden>
 {bars.map((h, i) => (
 <motion.span
 key={i}
 className="w-[3px] rounded-full bg-emerald-500"
 initial={false}
 animate={{ height: muted || held ? 3 : h, opacity: muted || held ? 0.35 : 1 }}
 transition={{ type: "spring", bounce: 0.3, duration: 0.4, delay: i * 0.008 }}
 />
 ))}
 </div>
 )}
 {viewingCall && state === "live" ? (
 <div className="mt-6 w-full max-w-[300px]">
 <AnimatePresence mode="wait" initial={false}>
 {keypad ? (
 <motion.div key="pad" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} transition={{ type: "spring", bounce: 0.15, duration: 0.3 }} className="grid grid-cols-3 gap-2">
 {keys.map(([k, sub]) => (
 <button key={k} onClick={() => setDigits((d) => (d + k).slice(-12))} className="flex h-12 flex-col items-center justify-center rounded-[14px] bg-neutral-950/[0.04] outline-none transition-[background-color,transform] hover:bg-neutral-950/[0.07] active:scale-95 dark:bg-white/[0.06] dark:hover:bg-white/[0.1]">
 {k}
 {sub && {sub}}
 </button>
 ))}
 </motion.div>
 ) : (
 <motion.div key="controls" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} transition={{ type: "spring", bounce: 0.15, duration: 0.3 }} className="grid grid-cols-3 justify-items-center gap-y-3">
 <Control label={muted ? "Unmute" : "Mute"} active={muted} onClick={() => setMuted(!muted)}>
 {muted ? <MicOff /> : <Mic />}
 </Control>
 <Control label="Keypad" onClick={() => setKeypad(true)}>
 <Grid3x3 />
 </Control>
 <Control label="Speaker" active={speaker} onClick={() => setSpeaker(!speaker)}>
 <Volume2 />
 </Control>
 <Control label="Add" onClick={() => {}}>
 <UserPlus />
 </Control>
 <Control label={held ? "Resume" : "Hold"} active={held} onClick={() => setHeld(!held)}>
 {held ? <Play /> : <Pause />}
 </Control>
 <Control label="Record" active={recording} onClick={() => setRecording(!recording)}>
 <Circle className={cn(recording && "fill-rose-500 text-rose-500")} />
 </Control>
 </motion.div>
 )}
 </AnimatePresence>
 <div className="mt-5 flex items-center justify-center gap-3">
 {keypad && (
 <button onClick={() => setKeypad(false)} className="h-10 rounded-full px-4 text-[13px] font-medium text-neutral-600 hover:text-neutral-950 dark:text-neutral-300 dark:hover:text-white">
 Hide
 </button>
 )}
 <button onClick={() => setState("ended")} aria-label="End call" className="flex h-12 w-[72px] items-center justify-center rounded-full bg-rose-500 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)] outline-none transition-transform active:scale-95">
 <PhoneOff className="size-5" />
 </button>
 </div>
 </div>
 ) : viewingCall && state === "ringing" ? (
 <button onClick={() => setState("ended")} aria-label="Cancel call" className="mt-8 flex h-12 w-[72px] items-center justify-center rounded-full bg-rose-500 text-white outline-none transition-transform active:scale-95">
 <PhoneOff className="size-5" />
 </button>
 ) : (
 <div className="mt-6 flex gap-2">
 <button
 onClick={() => call(person.id)}
 disabled={state === "live" || state === "ringing"}
 className="flex h-9 items-center gap-2 rounded-full bg-emerald-600 px-4 text-[13px] font-medium text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.2)] outline-none transition-[opacity,transform] active:scale-[0.97] disabled:opacity-40"
 >
 <Phone className="size-3.5 fill-current" />
 {viewingCall && state === "ended" ? "Call back" : "Call"}
 </button>
 <button className="flex h-9 items-center gap-2 rounded-full bg-neutral-950/[0.05] px-4 text-[13px] font-medium text-neutral-800 outline-none dark:bg-white/[0.08] dark:text-neutral-200">
 <MessageSquare className="size-3.5" />
 Message
 </button>
 </div>
 )}
 </motion.section>
 </AnimatePresence>
 <aside className="hidden w-[240px] shrink-0 flex-col border-l border-black/[0.05] p-4 @[720px]:flex dark:border-white/[0.07]">
 History with {person.name.split(" ")[0]}
 <ul className="mt-2 flex flex-col">
 {[person.last, "out" as Direction, "in" as Direction].map((dir, i) => {
 const d = DIRECTION[dir];
 return (
 <li key={i} className="flex items-center gap-2.5 border-b border-black/[0.04] py-2.5 text-[12.5px] last:border-0 dark:border-white/[0.05]">
 <d.icon className={cn("size-3.5", d.tone)} />
 {d.label}
 {i === 0 ? person.when : i === 1 ? "Oct 3" : "Sep 28"}
 </li>
 );
 })}
 </ul>
 On this call
 <div className="mt-2 flex -space-x-2">
 {[caller.photo, "1494790108377-be9c29b29330", "1599566150163-29194dcaad36"].map((id) => (
 <img key={id} src={face(id)} alt="" className="size-8 rounded-full object-cover ring-2 ring-white dark:ring-neutral-900" />
 ))}
 </div>
 Notes
 
 Wants the annual plan for 40 seats. Send the security review before Friday.
 
 </aside>
 </div>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
4e:T2bc93,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>"use client";

import { AnimatePresence, motion } from "motion/react";
import {
 Circle,
 Grid3x3,
 MessageSquare,
 Mic,
 MicOff,
 Pause,
 Phone,
 PhoneIncoming,
 PhoneMissed,
 PhoneOff,
 PhoneOutgoing,
 Play,
 UserPlus,
 Users,
 Voicemail,
 Volume2,
} from "lucide-react";
import { useEffect, useState, type ReactNode } from "react";
import {
 Sidebar,
 SidebarButton,
 SidebarContent,
 SidebarFooter,
 SidebarGroup,
 SidebarHeader,
 SidebarInset,
 SidebarItem,
 SidebarProvider,
 SidebarRail,
 SidebarSearch,
 SidebarTrigger,
} from "@/components/scalar-ui/sidebar";
import { cn } from "@/lib/utils";

const face = (id: string, size = 96) => `https://images.unsplash.com/photo-${id}?w=${size}&h=${size}&fit=crop&crop=faces&auto=format&q=75`;

type Direction = "in" | "out" | "missed";

const people = [
 { id: "amara", name: "Amara Okafor", role: "Head of Design · Lumen", phone: "+1 (415) 555‑0142", photo: "1531123897727-8f129e1688ce", last: "in" as Direction, when: "2m", duration: "12:08" },
 { id: "diego", name: "Diego Alvarez", role: "Account Executive", phone: "+34 612 55 01 88", photo: "1506794778202-cad84cf45f1d", last: "out" as Direction, when: "28m", duration: "4:51" },
 { id: "hana", name: "Hana Sato", role: "Product Lead · Kumo", phone: "+81 90‑5550‑2231", photo: "1544005313-94ddf0286df2", last: "missed" as Direction, when: "1h", duration: "" },
 { id: "liam", name: "Liam Novak", role: "Engineering Manager", phone: "+420 601 555 019", photo: "1472099645785-5658abf4ff4e", last: "in" as Direction, when: "3h", duration: "21:40" },
 { id: "priya", name: "Priya Raman", role: "Founder · Tandem", phone: "+91 98450 55512", photo: "1580489944761-15a19d654956", last: "out" as Direction, when: "Yesterday", duration: "9:02" },
 { id: "theo", name: "Theo Laurent", role: "Recruiter", phone: "+33 6 55 01 42 77", photo: "1539571696357-5a69c17a67c6", last: "missed" as Direction, when: "Mon", duration: "" },
];

const DIRECTION = {
 in: { icon: PhoneIncoming, label: "Incoming", tone: "text-neutral-400" },
 out: { icon: PhoneOutgoing, label: "Outgoing", tone: "text-neutral-400" },
 missed: { icon: PhoneMissed, label: "Missed", tone: "text-rose-500" },
};

const bars = [6, 10, 16, 9, 22, 14, 28, 18, 12, 24, 30, 20, 11, 17, 26, 13, 8, 19, 27, 15, 10, 21, 12, 7, 16, 9, 5];

const keys = [
 ["1", ""],
 ["2", "ABC"],
 ["3", "DEF"],
 ["4", "GHI"],
 ["5", "JKL"],
 ["6", "MNO"],
 ["7", "PQRS"],
 ["8", "TUV"],
 ["9", "WXYZ"],
 ["*", ""],
 ["0", "+"],
 ["#", ""],
];

const clock = (s: number) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;

function Avatar({ photo, name, className }: { photo: string; name: string; className?: string }) {
 return <img src={face(photo, 160)} alt={name} className={cn("rounded-full object-cover ring-1 ring-black/[0.06] dark:ring-white/[0.1]", className)} />;
}

function Control({ label, active, onClick, children }: { label: string; active?: boolean; onClick?: () => void; children: ReactNode }) {
 return (
 <button onClick={onClick} aria-pressed={active} className="group flex w-16 flex-col items-center gap-1.5 outline-none">
 <span
 className={cn(
 "flex size-12 items-center justify-center rounded-full transition-[background-color,color,transform] duration-150 group-active:scale-95 [&_svg]:size-[18px]",
 active ? "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" : "bg-neutral-950/[0.05] text-neutral-700 hover:bg-neutral-950/[0.08] dark:bg-white/[0.08] dark:text-neutral-200 dark:hover:bg-white/[0.12]",
 )}
 >
 {children}
 </span>
 <span className="text-[11.5px] text-neutral-500">{label}</span>
 </button>
 );
}

export default function Example() {
 const [selected, setSelected] = useState("amara");
 const [state, setState] = useState<"idle" | "ringing" | "live" | "ended">("live");
 const [seconds, setSeconds] = useState(127);
 const [muted, setMuted] = useState(false);
 const [held, setHeld] = useState(false);
 const [speaker, setSpeaker] = useState(false);
 const [recording, setRecording] = useState(true);
 const [keypad, setKeypad] = useState(false);
 const [digits, setDigits] = useState("");
 const [onCall, setOnCall] = useState("amara");
 const person = people.find((p) => p.id === selected)!;
 const caller = people.find((p) => p.id === onCall)!;
 const viewingCall = selected === onCall && state !== "idle";

 useEffect(() => {
 if (state !== "live" || held) return;
 const t = setInterval(() => setSeconds((s) => s + 1), 1000);
 return () => clearInterval(t);
 }, [state, held]);

 useEffect(() => {
 if (state !== "ringing") return;
 const t = setTimeout(() => setState("live"), 1800);
 return () => clearTimeout(t);
 }, [state]);

 const call = (id: string) => {
 setOnCall(id);
 setSelected(id);
 setSeconds(0);
 setMuted(false);
 setHeld(false);
 setKeypad(false);
 setDigits("");
 setState("ringing");
 };

 return (
 <div className="h-[600px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider>
 <Sidebar variant="inset" width={252}>
 <SidebarHeader>
 <div className="flex h-9 items-center gap-2 px-1.5">
 <span className="flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-emerald-500 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.3)]">
 <Phone className="size-3.5 fill-current" />
 </span>
 <span className="truncate text-[14px] font-semibold text-neutral-950 dark:text-white">Relay</span>
 </div>
 <SidebarSearch placeholder="Search people" />
 </SidebarHeader>
 <SidebarContent>
 <SidebarGroup>
 <SidebarItem icon={<Phone />} active>
 Calls
 </SidebarItem>
 <SidebarItem icon={<Users />}>Contacts</SidebarItem>
 <SidebarItem icon={<Voicemail />} badge={3}>
 Voicemail
 </SidebarItem>
 <SidebarItem icon={<Circle />}>Recordings</SidebarItem>
 </SidebarGroup>
 <SidebarGroup label="Recent">
 {people.map((p) => {
 const d = DIRECTION[p.last];
 return (
 <li key={p.id} className="flex">
 <SidebarButton size="lg" active={selected === p.id} onClick={() => setSelected(p.id)} tooltip={p.name} icon={<Avatar photo={p.photo} name={p.name} className="size-8" />}>
 <span className="flex min-w-0 flex-1 flex-col leading-tight">
 <span className={cn("truncate text-[13px]", p.last === "missed" ? "text-rose-600 dark:text-rose-400" : "text-neutral-900 dark:text-white")}>{p.name}</span>
 <span className="flex items-center gap-1 text-[11.5px] font-normal text-neutral-500">
 <d.icon className={cn("size-3", d.tone)} />
 {d.label} · {p.when}
 </span>
 </span>
 {p.id === onCall && state === "live" && <span className="size-2 shrink-0 rounded-full bg-emerald-500" />}
 </SidebarButton>
 </li>
 );
 })}
 </SidebarGroup>
 </SidebarContent>
 <SidebarFooter>
 <AnimatePresence initial={false}>
 {state === "live" && !viewingCall && (
 <motion.button
 initial={{ opacity: 0, y: 8 }}
 animate={{ opacity: 1, y: 0 }}
 exit={{ opacity: 0, y: 8 }}
 transition={{ type: "spring", bounce: 0.2, duration: 0.35 }}
 onClick={() => setSelected(onCall)}
 className="flex items-center gap-2 overflow-hidden rounded-[12px] bg-emerald-600 p-1.5 pr-2.5 text-left text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.2)]"
 >
 <Avatar photo={caller.photo} name={caller.name} className="size-7 shrink-0 ring-white/30" />
 <span className="min-w-0 flex-1 whitespace-nowrap">
 <span className="block truncate text-[12.5px] font-medium">{caller.name}</span>
 <span className="block text-[11px] tabular-nums text-white/75">{clock(seconds)}</span>
 </span>
 <Phone className="size-3.5 shrink-0 fill-current" />
 </motion.button>
 )}
 </AnimatePresence>
 </SidebarFooter>
 <SidebarRail />
 </Sidebar>
 <SidebarInset>
 <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.05] px-3 dark:border-white/[0.07]">
 <SidebarTrigger />
 <span className="text-[13.5px] font-medium text-neutral-950 dark:text-white">Calls</span>
 <span className="ml-auto flex items-center gap-1.5 text-[12px] text-neutral-500">
 <span className="size-1.5 rounded-full bg-emerald-500" />
 Available
 </span>
 </header>
 <div className="flex min-h-0 flex-1">
 <AnimatePresence mode="popLayout" initial={false}>
 <motion.section
 key={selected + (viewingCall ? state : "card")}
 initial={{ opacity: 0, scale: 0.98 }}
 animate={{ opacity: 1, scale: 1 }}
 exit={{ opacity: 0, transition: { duration: 0.1 } }}
 transition={{ type: "spring", bounce: 0.15, duration: 0.4 }}
 className="flex min-w-0 flex-1 flex-col items-center justify-center px-6 text-center"
 >
 <div className="relative">
 {viewingCall && state === "live" && !muted && !held && <span className="absolute -inset-2 rounded-full ring-2 ring-emerald-500/40" />}
 <Avatar photo={person.photo} name={person.name} className={cn("size-24 transition-[filter]", held && viewingCall && "grayscale")} />
 </div>
 <h3 className="mt-4 text-[19px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{person.name}</h3>
 <p className="mt-0.5 text-[13px] text-neutral-500">{person.role}</p>
 <p className="mt-2 h-5 text-[13px] tabular-nums text-neutral-700 dark:text-neutral-300">
 {!viewingCall
 ? person.phone
 : state === "ringing"
 ? "Calling…"
 : state === "ended"
 ? `Call ended · ${clock(seconds)}`
 : held
 ? `On hold · ${clock(seconds)}`
 : `${clock(seconds)}${digits ? ` · ${digits}` : ""}`}
 </p>
 {viewingCall && state === "live" && (
 <div className="mt-4 flex h-8 items-center gap-[3px]" aria-hidden>
 {bars.map((h, i) => (
 <motion.span
 key={i}
 className="w-[3px] rounded-full bg-emerald-500"
 initial={false}
 animate={{ height: muted || held ? 3 : h, opacity: muted || held ? 0.35 : 1 }}
 transition={{ type: "spring", bounce: 0.3, duration: 0.4, delay: i * 0.008 }}
 />
 ))}
 </div>
 )}
 {viewingCall && state === "live" ? (
 <div className="mt-6 w-full max-w-[300px]">
 <AnimatePresence mode="wait" initial={false}>
 {keypad ? (
 <motion.div key="pad" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} transition={{ type: "spring", bounce: 0.15, duration: 0.3 }} className="grid grid-cols-3 gap-2">
 {keys.map(([k, sub]) => (
 <button key={k} onClick={() => setDigits((d) => (d + k).slice(-12))} className="flex h-12 flex-col items-center justify-center rounded-[14px] bg-neutral-950/[0.04] outline-none transition-[background-color,transform] hover:bg-neutral-950/[0.07] active:scale-95 dark:bg-white/[0.06] dark:hover:bg-white/[0.1]">
 <span className="text-[17px] font-medium leading-none text-neutral-900 dark:text-white">{k}</span>
 {sub && <span className="mt-0.5 text-[9px] font-medium tracking-[0.12em] text-neutral-400">{sub}</span>}
 </button>
 ))}
 </motion.div>
 ) : (
 <motion.div key="controls" initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} transition={{ type: "spring", bounce: 0.15, duration: 0.3 }} className="grid grid-cols-3 justify-items-center gap-y-3">
 <Control label={muted ? "Unmute" : "Mute"} active={muted} onClick={() => setMuted(!muted)}>
 {muted ? <MicOff /> : <Mic />}
 </Control>
 <Control label="Keypad" onClick={() => setKeypad(true)}>
 <Grid3x3 />
 </Control>
 <Control label="Speaker" active={speaker} onClick={() => setSpeaker(!speaker)}>
 <Volume2 />
 </Control>
 <Control label="Add" onClick={() => {}}>
 <UserPlus />
 </Control>
 <Control label={held ? "Resume" : "Hold"} active={held} onClick={() => setHeld(!held)}>
 {held ? <Play /> : <Pause />}
 </Control>
 <Control label="Record" active={recording} onClick={() => setRecording(!recording)}>
 <Circle className={cn(recording && "fill-rose-500 text-rose-500")} />
 </Control>
 </motion.div>
 )}
 </AnimatePresence>
 <div className="mt-5 flex items-center justify-center gap-3">
 {keypad && (
 <button onClick={() => setKeypad(false)} className="h-10 rounded-full px-4 text-[13px] font-medium text-neutral-600 hover:text-neutral-950 dark:text-neutral-300 dark:hover:text-white">
 Hide
 </button>
 )}
 <button onClick={() => setState("ended")} aria-label="End call" className="flex h-12 w-[72px] items-center justify-center rounded-full bg-rose-500 text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.25)] outline-none transition-transform active:scale-95">
 <PhoneOff className="size-5" />
 </button>
 </div>
 </div>
 ) : viewingCall && state === "ringing" ? (
 <button onClick={() => setState("ended")} aria-label="Cancel call" className="mt-8 flex h-12 w-[72px] items-center justify-center rounded-full bg-rose-500 text-white outline-none transition-transform active:scale-95">
 <PhoneOff className="size-5" />
 </button>
 ) : (
 <div className="mt-6 flex gap-2">
 <button
 onClick={() => call(person.id)}
 disabled={state === "live" || state === "ringing"}
 className="flex h-9 items-center gap-2 rounded-full bg-emerald-600 px-4 text-[13px] font-medium text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.2)] outline-none transition-[opacity,transform] active:scale-[0.97] disabled:opacity-40"
 >
 <Phone className="size-3.5 fill-current" />
 {viewingCall && state === "ended" ? "Call back" : "Call"}
 </button>
 <button className="flex h-9 items-center gap-2 rounded-full bg-neutral-950/[0.05] px-4 text-[13px] font-medium text-neutral-800 outline-none dark:bg-white/[0.08] dark:text-neutral-200">
 <MessageSquare className="size-3.5" />
 Message
 </button>
 </div>
 )}
 </motion.section>
 </AnimatePresence>
 <aside className="hidden w-[240px] shrink-0 flex-col border-l border-black/[0.05] p-4 @[720px]:flex dark:border-white/[0.07]">
 <p className="text-[12px] font-medium text-neutral-400">History with {person.name.split(" ")[0]}</p>
 <ul className="mt-2 flex flex-col">
 {[person.last, "out" as Direction, "in" as Direction].map((dir, i) => {
 const d = DIRECTION[dir];
 return (
 <li key={i} className="flex items-center gap-2.5 border-b border-black/[0.04] py-2.5 text-[12.5px] last:border-0 dark:border-white/[0.05]">
 <d.icon className={cn("size-3.5", d.tone)} />
 <span className="flex-1 text-neutral-700 dark:text-neutral-300">{d.label}</span>
 <span className="tabular-nums text-neutral-400">{i === 0 ? person.when : i === 1 ? "Oct 3" : "Sep 28"}</span>
 </li>
 );
 })}
 </ul>
 <p className="mt-5 text-[12px] font-medium text-neutral-400">On this call</p>
 <div className="mt-2 flex -space-x-2">
 {[caller.photo, "1494790108377-be9c29b29330", "1599566150163-29194dcaad36"].map((id) => (
 <img key={id} src={face(id)} alt="" className="size-8 rounded-full object-cover ring-2 ring-white dark:ring-neutral-900" />
 ))}
 </div>
 <p className="mt-5 text-[12px] font-medium text-neutral-400">Notes</p>
 <p className="mt-2 rounded-[12px] bg-neutral-950/[0.03] p-3 text-[12.5px] leading-relaxed text-neutral-600 dark:bg-white/[0.04] dark:text-neutral-400">
 Wants the annual plan for 40 seats. Send the security review before Friday.
 </p>
 </aside>
 </div>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
</code></pre>4f:Te8d,"use client";

import { Bell, Plus, Search } from "lucide-react";
import { useState } from "react";
import { Navbar, NavbarActions, NavbarBrand, NavbarIconButton, NavbarLink, NavbarLinks } from "@/components/scalar-ui/navbar";

function QuillMark({ className }: { className?: string }) {
 return (
 <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
 <path d="M20 4C11 4 6 9 5 19c4-7 8-9 12-9-2.5-1-5-.5-7 1 2-4 5.5-6 10-7Z" fill="currentColor" />
 </svg>
 );
}

const links = ["Home", "Drafts", "Published", "Analytics"];
const posts = [
  ["Designing calm software", "Draft · 1,240 words", "linear-gradient(135deg,#e7e5e4,#a8a29e)"],
  ["Notes on spacing", "Published · 3.2k reads", "linear-gradient(135deg,#fde68a,#f59e0b)"],
  ["Why we ditched modals", "Published · 8.9k reads", "linear-gradient(135deg,#bbf7d0,#10b981)"],
  ["Small teams, big products", "Draft · 640 words", "linear-gradient(135deg,#fecdd3,#f43f5e)"],
  ["A year of weekly releases", "Published · 2.4k reads", "linear-gradient(135deg,#e5e5e5,#525252)"],
  ["Writing release notes", "Draft · 410 words", "linear-gradient(135deg,#fed7aa,#ea580c)"],
];

export default function Example() {
 const [active, setActive] = useState("Home");
 return (
 <div className="@container flex h-[540px] w-full flex-col overflow-hidden rounded-[18px] bg-neutral-50 ring-1 ring-black/[0.08] dark:bg-neutral-950 dark:ring-white/[0.1]">
 <Navbar className="px-4">
 <NavbarBrand
 logo={
 
 <QuillMark className="size-4" />
 
 }
 >
 Quill
 </NavbarBrand>
 <NavbarLinks className="ml-3 hidden @[560px]:flex">
 {links.map((l) => (
 <NavbarLink key={l} active={active === l} onClick={() => setActive(l)}>
 {l}
 </NavbarLink>
 ))}
 </NavbarLinks>
 <NavbarActions className="gap-1.5">
 <NavbarIconButton aria-label="Search">
 <Search />
 </NavbarIconButton>
 <NavbarIconButton aria-label="Notifications">
 <Bell />
 </NavbarIconButton>
 <button className="flex h-8 items-center gap-1 rounded-[var(--ui-pill,999px)] bg-[var(--ui-accent,#0a0a0a)] px-3 text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]">
 <Plus className="size-3.5" />
 New post
 </button>
 </NavbarActions>
 </Navbar>
 <main className="flex-1 overflow-y-auto">
 <div className="mx-auto max-w-[720px] px-5 py-6">
 {active}
 A top bar suits apps with a handful of areas; there is no sidebar to collapse.
 <div className="mt-5 grid grid-cols-2 gap-3 @[620px]:grid-cols-3">
 {posts.map(([title, meta, bg]) => (
 <div key={title} className="overflow-hidden rounded-[16px] bg-white ring-1 ring-black/[0.05] dark:bg-neutral-900 dark:ring-white/[0.07]">
 <div className="h-20" style={{ background: bg }} />
 <div className="p-3">
 {title}
 {meta}
 </div>
 </div>
 ))}
 </div>
 </div>
 </main>
 </div>
 );
}
50:T7bfb,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>"use client";

import { Bell, Plus, Search } from "lucide-react";
import { useState } from "react";
import { Navbar, NavbarActions, NavbarBrand, NavbarIconButton, NavbarLink, NavbarLinks } from "@/components/scalar-ui/navbar";

function QuillMark({ className }: { className?: string }) {
 return (
 <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden>
 <path d="M20 4C11 4 6 9 5 19c4-7 8-9 12-9-2.5-1-5-.5-7 1 2-4 5.5-6 10-7Z" fill="currentColor" />
 </svg>
 );
}

const links = ["Home", "Drafts", "Published", "Analytics"];
const posts = [
 ["Designing calm software", "Draft · 1,240 words", "linear-gradient(135deg,#e7e5e4,#a8a29e)"],
 ["Notes on spacing", "Published · 3.2k reads", "linear-gradient(135deg,#fde68a,#f59e0b)"],
 ["Why we ditched modals", "Published · 8.9k reads", "linear-gradient(135deg,#bbf7d0,#10b981)"],
 ["Small teams, big products", "Draft · 640 words", "linear-gradient(135deg,#fecdd3,#f43f5e)"],
 ["A year of weekly releases", "Published · 2.4k reads", "linear-gradient(135deg,#e5e5e5,#525252)"],
 ["Writing release notes", "Draft · 410 words", "linear-gradient(135deg,#fed7aa,#ea580c)"],
];

export default function Example() {
 const [active, setActive] = useState("Home");
 return (
 <div className="@container flex h-[540px] w-full flex-col overflow-hidden rounded-[18px] bg-neutral-50 ring-1 ring-black/[0.08] dark:bg-neutral-950 dark:ring-white/[0.1]">
 <Navbar className="px-4">
 <NavbarBrand
 logo={
 <span className="flex size-7 items-center justify-center rounded-[8px] bg-neutral-950 text-white dark:bg-white dark:text-neutral-950">
 <QuillMark className="size-4" />
 </span>
 }
 >
 Quill
 </NavbarBrand>
 <NavbarLinks className="ml-3 hidden @[560px]:flex">
 {links.map((l) => (
 <NavbarLink key={l} active={active === l} onClick={() => setActive(l)}>
 {l}
 </NavbarLink>
 ))}
 </NavbarLinks>
 <NavbarActions className="gap-1.5">
 <NavbarIconButton aria-label="Search">
 <Search />
 </NavbarIconButton>
 <NavbarIconButton aria-label="Notifications">
 <Bell />
 </NavbarIconButton>
 <button className="flex h-8 items-center gap-1 rounded-[var(--ui-pill,999px)] bg-[var(--ui-accent,#0a0a0a)] px-3 text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]">
 <Plus className="size-3.5" />
 New post
 </button>
 </NavbarActions>
 </Navbar>
 <main className="flex-1 overflow-y-auto">
 <div className="mx-auto max-w-[720px] px-5 py-6">
 <p className="text-[20px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{active}</p>
 <p className="text-[13px] text-neutral-500">A top bar suits apps with a handful of areas; there is no sidebar to collapse.</p>
 <div className="mt-5 grid grid-cols-2 gap-3 @[620px]:grid-cols-3">
 {posts.map(([title, meta, bg]) => (
 <div key={title} className="overflow-hidden rounded-[16px] bg-white ring-1 ring-black/[0.05] dark:bg-neutral-900 dark:ring-white/[0.07]">
 <div className="h-20" style={{ background: bg }} />
 <div className="p-3">
 <p className="truncate text-[13px] font-medium text-neutral-900 dark:text-white">{title}</p>
 <p className="truncate text-[11.5px] text-neutral-500">{meta}</p>
 </div>
 </div>
 ))}
 </div>
 </div>
 </main>
 </div>
 );
}
</code></pre>51:T171c,"use client";

import { AnimatePresence, motion } from "motion/react";
import { Archive, Clock, File, Inbox, Reply, Search, Send, Star, Trash2 } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar";

const folders = [
  { name: "Inbox", icon: Inbox, count: 2 },
  { name: "Starred", icon: Star },
  { name: "Snoozed", icon: Clock },
  { name: "Sent", icon: Send },
  { name: "Drafts", icon: File },
  { name: "Archive", icon: Archive },
  { name: "Trash", icon: Trash2 },
];

const threads = [
  { id: 1, from: "Ari Levi", subject: "Design review moved to Thursday", preview: "Quick heads-up: the room was double booked, so we’re moving to Thursday at 2pm.", time: "9:41", unread: true },
  { id: 2, from: "Stripe", subject: "Your October payout is on its way", preview: "A payout of $12,480.22 will arrive in your bank account on Oct 14.", time: "8:02", unread: true },
  { id: 3, from: "Noor Haddad", subject: "Offer letter: final version", preview: "Attached is the final version with the updated start date and equity.", time: "Yesterday" },
  { id: 4, from: "Jon Park", subject: "Re: pricing experiment", preview: "The annual toggle lifted conversions by 9%. Want to roll it out?", time: "Mon" },
  { id: 5, from: "Linear", subject: "4 issues assigned to you", preview: "BIL-482, BIL-487, WEB-120 and WEB-122 need your attention.", time: "Mon" },
];

export default function Example() {
 const [folder, setFolder] = useState("Inbox");
 const [open, setOpen] = useState(1);
 const thread = threads.find((t) => t.id === open)!;
 return (
 <div className="h-[540px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider defaultOpen={false}>
 <Sidebar width={200}>
 <SidebarHeader>
 <SidebarItem icon={<Search />} kbd="/">
 Search
 </SidebarItem>
 </SidebarHeader>
 <SidebarContent>
 <SidebarGroup>
 {folders.map(({ name, icon: Icon, count }) => (
 <SidebarItem key={name} icon={<Icon />} badge={count} active={folder === name} onClick={() => setFolder(name)}>
 {name}
 </SidebarItem>
 ))}
 </SidebarGroup>
 </SidebarContent>
 </Sidebar>
 <SidebarInset className="flex-row">
 <section className="flex w-[42%] min-w-[220px] flex-col border-r border-black/[0.06] dark:border-white/[0.07]">
 <header className="flex h-12 shrink-0 items-center gap-2 px-3">
 <SidebarTrigger />
 {folder}
 </header>
 <ul className="flex-1 overflow-y-auto px-1.5 pb-1.5">
 {threads.map((t) => (
 <li key={t.id}>
 <button onClick={() => setOpen(t.id)} className="relative w-full rounded-[12px] px-3 py-2.5 text-left outline-none focus-visible:bg-neutral-950/[0.04]">
 {open === t.id && <motion.span layoutId="mail-selected" className="absolute inset-0 rounded-[12px] bg-neutral-950/[0.05] dark:bg-white/[0.07]" transition={{ type: "spring", bounce: 0.15, duration: 0.35 }} />}
 
 {t.unread && }
 {t.from}
 {t.time}
 
 {t.subject}
 {t.preview}
 </button>
 </li>
 ))}
 </ul>
 </section>
 <AnimatePresence mode="wait">
 <motion.article
 key={thread.id}
 initial={{ opacity: 0, y: 6 }}
 animate={{ opacity: 1, y: 0 }}
 exit={{ opacity: 0, y: -4 }}
 transition={{ type: "spring", bounce: 0, duration: 0.25 }}
 className="flex min-w-0 flex-1 flex-col"
 >
 <header className="flex h-12 shrink-0 items-center justify-end gap-1 border-b border-black/[0.05] px-3 dark:border-white/[0.06]">
 {[Archive, Clock, Reply].map((Icon, i) => (
 <button key={i} className="flex size-8 items-center justify-center rounded-full text-neutral-500 hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
 <Icon className="size-4" />
 </button>
 ))}
 </header>
 <div className="flex-1 overflow-y-auto p-5">
 {thread.subject}
 
 {thread.from} · {thread.time}
 
 {thread.preview}
 Let me know if anything changes on your side.
 </div>
 </motion.article>
 </AnimatePresence>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
52:Tc228,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>"use client";

import { AnimatePresence, motion } from "motion/react";
import { Archive, Clock, File, Inbox, Reply, Search, Send, Star, Trash2 } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarHeader, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar";

const folders = [
 { name: "Inbox", icon: Inbox, count: 2 },
 { name: "Starred", icon: Star },
 { name: "Snoozed", icon: Clock },
 { name: "Sent", icon: Send },
 { name: "Drafts", icon: File },
 { name: "Archive", icon: Archive },
 { name: "Trash", icon: Trash2 },
];

const threads = [
 { id: 1, from: "Ari Levi", subject: "Design review moved to Thursday", preview: "Quick heads-up: the room was double booked, so we’re moving to Thursday at 2pm.", time: "9:41", unread: true },
 { id: 2, from: "Stripe", subject: "Your October payout is on its way", preview: "A payout of $12,480.22 will arrive in your bank account on Oct 14.", time: "8:02", unread: true },
 { id: 3, from: "Noor Haddad", subject: "Offer letter: final version", preview: "Attached is the final version with the updated start date and equity.", time: "Yesterday" },
 { id: 4, from: "Jon Park", subject: "Re: pricing experiment", preview: "The annual toggle lifted conversions by 9%. Want to roll it out?", time: "Mon" },
 { id: 5, from: "Linear", subject: "4 issues assigned to you", preview: "BIL-482, BIL-487, WEB-120 and WEB-122 need your attention.", time: "Mon" },
];

export default function Example() {
 const [folder, setFolder] = useState("Inbox");
 const [open, setOpen] = useState(1);
 const thread = threads.find((t) => t.id === open)!;
 return (
 <div className="h-[540px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider defaultOpen={false}>
 <Sidebar width={200}>
 <SidebarHeader>
 <SidebarItem icon={<Search />} kbd="/">
 Search
 </SidebarItem>
 </SidebarHeader>
 <SidebarContent>
 <SidebarGroup>
 {folders.map(({ name, icon: Icon, count }) => (
 <SidebarItem key={name} icon={<Icon />} badge={count} active={folder === name} onClick={() => setFolder(name)}>
 {name}
 </SidebarItem>
 ))}
 </SidebarGroup>
 </SidebarContent>
 </Sidebar>
 <SidebarInset className="flex-row">
 <section className="flex w-[42%] min-w-[220px] flex-col border-r border-black/[0.06] dark:border-white/[0.07]">
 <header className="flex h-12 shrink-0 items-center gap-2 px-3">
 <SidebarTrigger />
 <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">{folder}</span>
 </header>
 <ul className="flex-1 overflow-y-auto px-1.5 pb-1.5">
 {threads.map((t) => (
 <li key={t.id}>
 <button onClick={() => setOpen(t.id)} className="relative w-full rounded-[12px] px-3 py-2.5 text-left outline-none focus-visible:bg-neutral-950/[0.04]">
 {open === t.id && <motion.span layoutId="mail-selected" className="absolute inset-0 rounded-[12px] bg-neutral-950/[0.05] dark:bg-white/[0.07]" transition={{ type: "spring", bounce: 0.15, duration: 0.35 }} />}
 <span className="relative flex items-center gap-2">
 {t.unread && <span className="size-1.5 shrink-0 rounded-full bg-neutral-950 dark:bg-white" />}
 <span className={`flex-1 truncate text-[13px] ${t.unread ? "font-semibold text-neutral-950 dark:text-white" : "text-neutral-800 dark:text-neutral-200"}`}>{t.from}</span>
 <span className="shrink-0 text-[11px] text-neutral-400">{t.time}</span>
 </span>
 <span className="relative mt-0.5 block truncate text-[12.5px] text-neutral-700 dark:text-neutral-300">{t.subject}</span>
 <span className="relative block truncate text-[12px] text-neutral-400">{t.preview}</span>
 </button>
 </li>
 ))}
 </ul>
 </section>
 <AnimatePresence mode="wait">
 <motion.article
 key={thread.id}
 initial={{ opacity: 0, y: 6 }}
 animate={{ opacity: 1, y: 0 }}
 exit={{ opacity: 0, y: -4 }}
 transition={{ type: "spring", bounce: 0, duration: 0.25 }}
 className="flex min-w-0 flex-1 flex-col"
 >
 <header className="flex h-12 shrink-0 items-center justify-end gap-1 border-b border-black/[0.05] px-3 dark:border-white/[0.06]">
 {[Archive, Clock, Reply].map((Icon, i) => (
 <button key={i} className="flex size-8 items-center justify-center rounded-full text-neutral-500 hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
 <Icon className="size-4" />
 </button>
 ))}
 </header>
 <div className="flex-1 overflow-y-auto p-5">
 <p className="text-[16px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">{thread.subject}</p>
 <p className="mt-1 text-[12.5px] text-neutral-500">
 {thread.from} · {thread.time}
 </p>
 <p className="mt-4 text-[13.5px] leading-relaxed text-neutral-700 dark:text-neutral-300">{thread.preview}</p>
 <p className="mt-3 text-[13.5px] leading-relaxed text-neutral-700 dark:text-neutral-300">Let me know if anything changes on your side.</p>
 </div>
 </motion.article>
 </AnimatePresence>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
</code></pre>53:T17f6,"use client";

import { motion } from "motion/react";
import { Bell, CreditCard, Home, KeyRound, LayoutGrid, Palette, Settings, Shield, User, Users } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarInset, SidebarItem, SidebarProvider } from "@/components/scalar-ui/sidebar";

const sections = [
  { group: "Account", items: [{ name: "Profile", icon: User }, { name: "Notifications", icon: Bell }, { name: "Appearance", icon: Palette }] },
  { group: "Workspace", items: [{ name: "General", icon: Settings }, { name: "Members", icon: Users }, { name: "Billing", icon: CreditCard }, { name: "Security", icon: Shield }, { name: "API keys", icon: KeyRound }] },
];

const field = "h-9 w-full rounded-[10px] bg-white px-3 text-[13px] text-neutral-900 shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-black/[0.08] focus:ring-neutral-950/30 dark:bg-neutral-900 dark:text-white dark:ring-white/[0.1]";

export default function Example() {
 const [page, setPage] = useState("Profile");
 const [prefs, setPrefs] = useState({ digest: true, mentions: true, product: false });
 return (
 <div className="h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider defaultOpen={false} shortcut={false}>
 <Sidebar width={200}>
 <SidebarContent className="pt-2">
 <SidebarGroup>
 <SidebarItem icon={<Home />}>Home</SidebarItem>
 <SidebarItem icon={<LayoutGrid />}>Projects</SidebarItem>
 <SidebarItem icon={<Settings />} active>
 Settings
 </SidebarItem>
 </SidebarGroup>
 </SidebarContent>
 </Sidebar>
 <SidebarInset className="@container flex-row">
 <nav className="hidden w-[190px] shrink-0 flex-col gap-4 border-r border-black/[0.06] p-3 @[520px]:flex dark:border-white/[0.07]">
 Settings
 {sections.map((s) => (
 <div key={s.group}>
 {s.group}
 {s.items.map(({ name, icon: Icon }) => (
 <button key={name} onClick={() => setPage(name)} className={`relative flex h-8 w-full items-center gap-2.5 rounded-[9px] px-2 text-[13px] outline-none ${page === name ? "font-medium text-neutral-950 dark:text-white" : "text-neutral-600 hover:text-neutral-950 dark:text-neutral-400 dark:hover:text-white"}`}>
 {page === name && <motion.span layoutId="settings-nav" className="absolute inset-0 rounded-[9px] bg-neutral-950/[0.06] dark:bg-white/[0.08]" transition={{ type: "spring", bounce: 0.15, duration: 0.35 }} />}
 <Icon className="relative size-4 text-neutral-500" />
 {name}
 </button>
 ))}
 </div>
 ))}
 </nav>
 <div className="min-w-0 flex-1 overflow-y-auto px-6 py-5">
 {page}
 Manage how you appear and what we send you.
 <section className="mt-5 rounded-[16px] ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
 <div className="grid gap-4 p-4 @[640px]:grid-cols-2">
 <label className="block">
 Name
 <input defaultValue="Maya Chen" className={field} />
 </label>
 <label className="block">
 Email
 <input defaultValue="maya@halcyon.so" className={field} />
 </label>
 </div>
 <div className="flex justify-end border-t border-black/[0.05] bg-neutral-50/70 px-4 py-2.5 dark:border-white/[0.06] dark:bg-white/[0.02]">
 <button className="h-8 rounded-[9px] bg-neutral-950 px-3 text-[12.5px] font-medium text-white dark:bg-white dark:text-neutral-950">Save</button>
 </div>
 </section>
 <section className="mt-4 rounded-[16px] ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
 {[
 ["digest", "Weekly digest", "A summary of activity every Monday."],
 ["mentions", "Mentions", "When someone @mentions you."],
 ["product", "Product news", "New features and announcements."],
 ].map(([key, title, hint]) => (
 <div key={key} className="flex items-center gap-4 border-b border-black/[0.05] px-4 py-3 last:border-0 dark:border-white/[0.06]">
 <div className="min-w-0 flex-1">
 {title}
 {hint}
 </div>
 <Switch label={title} on={prefs[key as keyof typeof prefs]} onChange={(on) => setPrefs((p) => ({ ...p, [key]: on }))} />
 </div>
 ))}
 </section>
 </div>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
54:Tcbd5,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>"use client";

import { motion } from "motion/react";
import { Bell, CreditCard, Home, KeyRound, LayoutGrid, Palette, Settings, Shield, User, Users } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarInset, SidebarItem, SidebarProvider } from "@/components/scalar-ui/sidebar";

const sections = [
 { group: "Account", items: [{ name: "Profile", icon: User }, { name: "Notifications", icon: Bell }, { name: "Appearance", icon: Palette }] },
 { group: "Workspace", items: [{ name: "General", icon: Settings }, { name: "Members", icon: Users }, { name: "Billing", icon: CreditCard }, { name: "Security", icon: Shield }, { name: "API keys", icon: KeyRound }] },
];

const field = "h-9 w-full rounded-[10px] bg-white px-3 text-[13px] text-neutral-900 shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-black/[0.08] focus:ring-neutral-950/30 dark:bg-neutral-900 dark:text-white dark:ring-white/[0.1]";

function Switch({ on, onChange, label }: { on: boolean; onChange: (on: boolean) => void; label: string }) {
 return (
 <button role="switch" aria-checked={on} aria-label={label} onClick={() => onChange(!on)} className={`relative h-5 w-9 shrink-0 rounded-full p-0.5 transition-colors ${on ? "bg-neutral-950 dark:bg-white" : "bg-neutral-950/15 dark:bg-white/20"}`}>
 <motion.span className="block size-4 rounded-full bg-white shadow-[0_1px_2px_rgb(0_0_0/0.2)] dark:bg-neutral-950" animate={{ x: on ? 16 : 0 }} transition={{ type: "spring", bounce: 0.3, duration: 0.35 }} />
 </button>
 );
}

export default function Example() {
 const [page, setPage] = useState("Profile");
 const [prefs, setPrefs] = useState({ digest: true, mentions: true, product: false });
 return (
 <div className="h-[560px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider defaultOpen={false} shortcut={false}>
 <Sidebar width={200}>
 <SidebarContent className="pt-2">
 <SidebarGroup>
 <SidebarItem icon={<Home />}>Home</SidebarItem>
 <SidebarItem icon={<LayoutGrid />}>Projects</SidebarItem>
 <SidebarItem icon={<Settings />} active>
 Settings
 </SidebarItem>
 </SidebarGroup>
 </SidebarContent>
 </Sidebar>
 <SidebarInset className="@container flex-row">
 <nav className="hidden w-[190px] shrink-0 flex-col gap-4 border-r border-black/[0.06] p-3 @[520px]:flex dark:border-white/[0.07]">
 <p className="px-2 pt-1 text-[15px] font-semibold text-neutral-950 dark:text-white">Settings</p>
 {sections.map((s) => (
 <div key={s.group}>
 <p className="px-2 pb-1 text-[11.5px] font-medium text-neutral-400">{s.group}</p>
 {s.items.map(({ name, icon: Icon }) => (
 <button key={name} onClick={() => setPage(name)} className={`relative flex h-8 w-full items-center gap-2.5 rounded-[9px] px-2 text-[13px] outline-none ${page === name ? "font-medium text-neutral-950 dark:text-white" : "text-neutral-600 hover:text-neutral-950 dark:text-neutral-400 dark:hover:text-white"}`}>
 {page === name && <motion.span layoutId="settings-nav" className="absolute inset-0 rounded-[9px] bg-neutral-950/[0.06] dark:bg-white/[0.08]" transition={{ type: "spring", bounce: 0.15, duration: 0.35 }} />}
 <Icon className="relative size-4 text-neutral-500" />
 <span className="relative">{name}</span>
 </button>
 ))}
 </div>
 ))}
 </nav>
 <div className="min-w-0 flex-1 overflow-y-auto px-6 py-5">
 <p className="text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">{page}</p>
 <p className="text-[12.5px] text-neutral-500">Manage how you appear and what we send you.</p>
 <section className="mt-5 rounded-[16px] ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
 <div className="grid gap-4 p-4 @[640px]:grid-cols-2">
 <label className="block">
 <span className="mb-1.5 block text-[12.5px] font-medium text-neutral-700 dark:text-neutral-300">Name</span>
 <input defaultValue="Maya Chen" className={field} />
 </label>
 <label className="block">
 <span className="mb-1.5 block text-[12.5px] font-medium text-neutral-700 dark:text-neutral-300">Email</span>
 <input defaultValue="maya@halcyon.so" className={field} />
 </label>
 </div>
 <div className="flex justify-end border-t border-black/[0.05] bg-neutral-50/70 px-4 py-2.5 dark:border-white/[0.06] dark:bg-white/[0.02]">
 <button className="h-8 rounded-[9px] bg-neutral-950 px-3 text-[12.5px] font-medium text-white dark:bg-white dark:text-neutral-950">Save</button>
 </div>
 </section>
 <section className="mt-4 rounded-[16px] ring-1 ring-black/[0.06] dark:ring-white/[0.08]">
 {[
 ["digest", "Weekly digest", "A summary of activity every Monday."],
 ["mentions", "Mentions", "When someone @mentions you."],
 ["product", "Product news", "New features and announcements."],
 ].map(([key, title, hint]) => (
 <div key={key} className="flex items-center gap-4 border-b border-black/[0.05] px-4 py-3 last:border-0 dark:border-white/[0.06]">
 <div className="min-w-0 flex-1">
 <p className="text-[13px] font-medium text-neutral-900 dark:text-white">{title}</p>
 <p className="text-[12px] text-neutral-500">{hint}</p>
 </div>
 <Switch label={title} on={prefs[key as keyof typeof prefs]} onChange={(on) => setPrefs((p) => ({ ...p, [key]: on }))} />
 </div>
 ))}
 </section>
 </div>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
</code></pre>55:T1a85,"use client";

import { AnimatePresence, motion } from "motion/react";
import { Building2, ChartNoAxesColumn, Home, Mail, MapPin, Phone, Users, X } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar";

const people = [
  { id: "1", name: "Lena Hoffmann", company: "Brightline", stage: "Customer", city: "Berlin", value: "$24k" },
  { id: "2", name: "Kofi Mensah", company: "Akwaaba Pay", stage: "Trial", city: "Accra", value: "$8k" },
  { id: "3", name: "Aiko Tanaka", company: "Mori Labs", stage: "Lead", city: "Osaka", value: "$12k" },
  { id: "4", name: "Mateo Ruiz", company: "Sol Studio", stage: "Customer", city: "Madrid", value: "$31k" },
  { id: "5", name: "Priya Nair", company: "Kettle", stage: "Trial", city: "Pune", value: "$6k" },
  { id: "6", name: "Ezra Cohen", company: "Northwind", stage: "Lead", city: "Haifa", value: "$15k" },
];

const stage: Record<string, string> = {
 Customer: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
 Trial: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
 Lead: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300",
};

export default function Example() {
 const [selected, setSelected] = useState<string | null>("1");
 const person = people.find((p) => p.id === selected);
 return (
 <div className="h-[520px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider defaultOpen={false}>
 <Sidebar width={200}>
 <SidebarContent className="pt-2">
 <SidebarGroup>
 <SidebarItem icon={<Home />}>Home</SidebarItem>
 <SidebarItem icon={<Users />} active>
 Contacts
 </SidebarItem>
 <SidebarItem icon={<ChartNoAxesColumn />}>Pipeline</SidebarItem>
 </SidebarGroup>
 </SidebarContent>
 </Sidebar>
 <SidebarInset className="flex-row">
 <section className="flex min-w-0 flex-1 flex-col">
 <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 dark:border-white/[0.07]">
 <SidebarTrigger />
 Contacts
 {people.length}
 </header>
 <div className="flex-1 overflow-y-auto">
 {people.map((p) => (
 <button
 key={p.id}
 onClick={() => setSelected(selected === p.id ? null : p.id)}
 className={`flex w-full items-center gap-3 border-b border-black/[0.04] px-4 py-2.5 text-left outline-none transition-colors dark:border-white/[0.05] ${selected === p.id ? "bg-neutral-950/[0.04] dark:bg-white/[0.06]" : "hover:bg-neutral-950/[0.02] dark:hover:bg-white/[0.03]"}`}
 >
 
 {p.name.split(" ").map((n) => n[0]).join("")}
 
 
 {p.name}
 {p.company}
 
 {p.stage}
 </button>
 ))}
 </div>
 </section>
 <AnimatePresence initial={false}>
 {person && (
 <motion.aside
 initial={{ width: 0, opacity: 0 }}
 animate={{ width: 260, opacity: 1 }}
 exit={{ width: 0, opacity: 0 }}
 transition={{ type: "spring", bounce: 0.12, duration: 0.45 }}
 className="shrink-0 overflow-hidden border-l border-black/[0.06] bg-neutral-50/70 dark:border-white/[0.07] dark:bg-white/[0.02]"
 >
 <div className="w-[260px] p-4">
 <div className="flex items-start justify-between">
 <span className="flex size-11 items-center justify-center rounded-full bg-white text-[14px] font-semibold text-neutral-800 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:text-white dark:ring-white/[0.1]">
 {person.name.split(" ").map((n) => n[0]).join("")}
 
 <button aria-label="Close" onClick={() => setSelected(null)} className="flex size-7 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
 <X className="size-4" />
 </button>
 </div>
 <AnimatePresence mode="wait">
 <motion.div key={person.id} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }} transition={{ duration: 0.18 }}>
 {person.name}
 Deal value {person.value}
 <dl className="mt-4 space-y-2.5 text-[12.5px]">
 {[
 [Building2, person.company],
 [MapPin, person.city],
 [Mail, `${person.name.split(" ")[0].toLowerCase()}@${person.company.toLowerCase().replace(/\s/g, "")}.com`],
 [Phone, "+1 (555) 014-2290"],
 ].map(([Icon, text], i) => {
 const I = Icon as typeof Mail;
 return (
 <div key={i} className="flex items-center gap-2.5 text-neutral-700 dark:text-neutral-300">
 
 {text as string}
 </div>
 );
 })}
 </dl>
 </motion.div>
 </AnimatePresence>
 </div>
 </motion.aside>
 )}
 </AnimatePresence>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
56:Te6b1,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>"use client";

import { AnimatePresence, motion } from "motion/react";
import { Building2, ChartNoAxesColumn, Home, Mail, MapPin, Phone, Users, X } from "lucide-react";
import { useState } from "react";
import { Sidebar, SidebarContent, SidebarGroup, SidebarInset, SidebarItem, SidebarProvider, SidebarTrigger } from "@/components/scalar-ui/sidebar";

const people = [
 { id: "1", name: "Lena Hoffmann", company: "Brightline", stage: "Customer", city: "Berlin", value: "$24k" },
 { id: "2", name: "Kofi Mensah", company: "Akwaaba Pay", stage: "Trial", city: "Accra", value: "$8k" },
 { id: "3", name: "Aiko Tanaka", company: "Mori Labs", stage: "Lead", city: "Osaka", value: "$12k" },
 { id: "4", name: "Mateo Ruiz", company: "Sol Studio", stage: "Customer", city: "Madrid", value: "$31k" },
 { id: "5", name: "Priya Nair", company: "Kettle", stage: "Trial", city: "Pune", value: "$6k" },
 { id: "6", name: "Ezra Cohen", company: "Northwind", stage: "Lead", city: "Haifa", value: "$15k" },
];

const stage: Record<string, string> = {
 Customer: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
 Trial: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
 Lead: "bg-neutral-950/[0.05] text-neutral-600 dark:bg-white/[0.08] dark:text-neutral-300",
};

export default function Example() {
 const [selected, setSelected] = useState<string | null>("1");
 const person = people.find((p) => p.id === selected);
 return (
 <div className="h-[520px] w-full overflow-hidden rounded-[18px] ring-1 ring-black/[0.08] dark:ring-white/[0.1]">
 <SidebarProvider defaultOpen={false}>
 <Sidebar width={200}>
 <SidebarContent className="pt-2">
 <SidebarGroup>
 <SidebarItem icon={<Home />}>Home</SidebarItem>
 <SidebarItem icon={<Users />} active>
 Contacts
 </SidebarItem>
 <SidebarItem icon={<ChartNoAxesColumn />}>Pipeline</SidebarItem>
 </SidebarGroup>
 </SidebarContent>
 </Sidebar>
 <SidebarInset className="flex-row">
 <section className="flex min-w-0 flex-1 flex-col">
 <header className="flex h-12 shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 dark:border-white/[0.07]">
 <SidebarTrigger />
 <span className="text-[14px] font-semibold text-neutral-950 dark:text-white">Contacts</span>
 <span className="text-[12px] text-neutral-400">{people.length}</span>
 </header>
 <div className="flex-1 overflow-y-auto">
 {people.map((p) => (
 <button
 key={p.id}
 onClick={() => setSelected(selected === p.id ? null : p.id)}
 className={`flex w-full items-center gap-3 border-b border-black/[0.04] px-4 py-2.5 text-left outline-none transition-colors dark:border-white/[0.05] ${selected === p.id ? "bg-neutral-950/[0.04] dark:bg-white/[0.06]" : "hover:bg-neutral-950/[0.02] dark:hover:bg-white/[0.03]"}`}
 >
 <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-neutral-950/[0.06] text-[11px] font-semibold text-neutral-700 dark:bg-white/[0.1] dark:text-neutral-200">
 {p.name.split(" ").map((n) => n[0]).join("")}
 </span>
 <span className="min-w-0 flex-1">
 <span className="block truncate text-[13px] font-medium text-neutral-900 dark:text-white">{p.name}</span>
 <span className="block truncate text-[12px] text-neutral-500">{p.company}</span>
 </span>
 <span className={`rounded-[6px] px-1.5 py-0.5 text-[11px] font-medium ${stage[p.stage]}`}>{p.stage}</span>
 </button>
 ))}
 </div>
 </section>
 <AnimatePresence initial={false}>
 {person && (
 <motion.aside
 initial={{ width: 0, opacity: 0 }}
 animate={{ width: 260, opacity: 1 }}
 exit={{ width: 0, opacity: 0 }}
 transition={{ type: "spring", bounce: 0.12, duration: 0.45 }}
 className="shrink-0 overflow-hidden border-l border-black/[0.06] bg-neutral-50/70 dark:border-white/[0.07] dark:bg-white/[0.02]"
 >
 <div className="w-[260px] p-4">
 <div className="flex items-start justify-between">
 <span className="flex size-11 items-center justify-center rounded-full bg-white text-[14px] font-semibold text-neutral-800 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.07] dark:bg-neutral-800 dark:text-white dark:ring-white/[0.1]">
 {person.name.split(" ").map((n) => n[0]).join("")}
 </span>
 <button aria-label="Close" onClick={() => setSelected(null)} className="flex size-7 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white">
 <X className="size-4" />
 </button>
 </div>
 <AnimatePresence mode="wait">
 <motion.div key={person.id} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }} transition={{ duration: 0.18 }}>
 <p className="mt-3 text-[15px] font-semibold text-neutral-950 dark:text-white">{person.name}</p>
 <p className="text-[12.5px] text-neutral-500">Deal value {person.value}</p>
 <dl className="mt-4 space-y-2.5 text-[12.5px]">
 {[
 [Building2, person.company],
 [MapPin, person.city],
 [Mail, `${person.name.split(" ")[0].toLowerCase()}@${person.company.toLowerCase().replace(/\s/g, "")}.com`],
 [Phone, "+1 (555) 014-2290"],
 ].map(([Icon, text], i) => {
 const I = Icon as typeof Mail;
 return (
 <div key={i} className="flex items-center gap-2.5 text-neutral-700 dark:text-neutral-300">
 <I className="size-3.5 text-neutral-400" />
 <span className="truncate">{text as string}</span>
 </div>
 );
 })}
 </dl>
 </motion.div>
 </AnimatePresence>
 </div>
 </motion.aside>
 )}
 </AnimatePresence>
 </SidebarInset>
 </SidebarProvider>
 </div>
 );
}
</code></pre>29:["$","section","app-shell",{"id":"app-shell","aria-labelledby":"app-shell-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"app-shell-title","className":"sr-only","children":"App Shell"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · cmdk · motion · lucide-react"}]]}],false]}],["$","$L2c",null,{"children":["$","$L2d",null,{"slug":"app-shell","gated":{"unlocked":true,"files":[{"name":"app-shell.tsx","code":"$2e","html":"$2f"},{"name":"app-shell/data.ts","code":"$30","html":"$31"},{"name":"app-shell/brand.tsx","code":"$32","html":"$33"},{"name":"app-shell/team-switcher.tsx","code":"$34","html":"$35"},{"name":"app-shell/nav-main.tsx","code":"$36","html":"$37"},{"name":"app-shell/nav-user.tsx","code":"$38","html":"$39"},{"name":"app-shell/app-sidebar.tsx","code":"$3a","html":"$3b"},{"name":"app-shell/site-header.tsx","code":"$3c","html":"$3d"},{"name":"app-shell/section-cards.tsx","code":"$3e","html":"$3f"},{"name":"app-shell/revenue-chart.tsx","code":"$40","html":"$41"},{"name":"app-shell/recent-orders.tsx","code":"$42","html":"$43"},{"name":"app-shell/dashboard.tsx","code":"$44","html":"$45"},{"name":"demo.tsx","code":"import { AppShell } from \"@/components/scalar-ui/app-shell\";\n\nexport default function Demo() {\n return (\n <div className=\"h-[620px] w-full overflow-hidden rounded-[18px] shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_40px_-16px_rgb(0_0_0/0.16)] ring-1 ring-black/[0.08] dark:shadow-none dark:ring-white/[0.1]\">\n <AppShell />\n </div>\n );\n}\n","html":"$46"}],"examples":{"sidebar-navbar":{"name":"sidebar-navbar.tsx","code":"$47","html":"$48"},"top-bar":{"name":"top-bar.tsx","code":"$49","html":"$4a"},"ask-ai":{"name":"ask-ai.tsx","code":"$4b","html":"$4c"},"calls":{"name":"calls.tsx","code":"$4d","html":"$4e"},"topbar-only":{"name":"topbar-only.tsx","code":"$4f","html":"$50"},"mail":{"name":"mail.tsx","code":"$51","html":"$52"},"settings":{"name":"settings.tsx","code":"$53","html":"$54"},"split-detail":{"name":"split-detail.tsx","code":"$55","html":"$56"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add app-shell","shadcn":"npx shadcn@latest add https://scalarui.com/r/app-shell.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui cmdk motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L57","toolbar":"$L58"}]}],["$L59","$L5a","$L5b","$L5c","$L5d","$L5e","$L5f","$L60"]]}]
</article></body></html>

App Shells

App Shells