1f:T2d430,
"use client"

import * as React from "react"
import { motion } from "motion/react"
import { useTheme } from "next-themes"
import { useHotkeys } from "react-hotkeys-hook"
import {
  BellIcon,
  BoxIcon,
  CartLarge2Icon,
  Chart2Icon,
  KeyboardIcon,
  Logout2Icon,
  MagnifierIcon,
  MoonIcon,
  SettingsIcon,
  SunIcon,
  UserRoundedIcon,
  UsersGroupRoundedIcon,
  Widget5Icon,
} from "@solar-icons/react/linear"
import {
  BellIcon as BellBold,
  BoxIcon as BoxBold,
  CartLarge2Icon as CartLarge2Bold,
  Chart2Icon as Chart2Bold,
  SettingsIcon as SettingsBold,
  UsersGroupRoundedIcon as UsersGroupRoundedBold,
  Widget5Icon as Widget5Bold,
} from "@solar-icons/react/bold"

import { useDensity, type Density } from "@/hooks/use-density"
import { useHaptics } from "@/lib/haptics"
import { spring } from "@/lib/motion"
import { Icon, type SolarIcon } from "@/components/ui/icon"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { CountBadge } from "@/components/ui/count-badge"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Separator } from "@/components/ui/separator"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { LogoMark } from "@/components/ui/logo"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

export type NavItem = {
  key: string
  label: string
  icon: SolarIcon
  activeIcon: SolarIcon
  badge?: string
}

export const defaultNav: NavItem[] = [
  { key: "overview", label: "Overview", icon: Widget5Icon, activeIcon: Widget5Bold },
  { key: "orders", label: "Orders", icon: CartLarge2Icon, activeIcon: CartLarge2Bold, badge: "12" },
  { key: "customers", label: "Customers", icon: UsersGroupRoundedIcon, activeIcon: UsersGroupRoundedBold },
  { key: "products", label: "Products", icon: BoxIcon, activeIcon: BoxBold },
  { key: "reports", label: "Reports", icon: Chart2Icon, activeIcon: Chart2Bold },
]

const secondaryNav: NavItem[] = [{ key: "settings", label: "Settings", icon: SettingsIcon, activeIcon: SettingsBold }]

/** "G then <key>" jumps to a page — Linear/GitHub style. Keys are nav item keys. */
const goKeys: Record<string, string> = {
  overview: "d",
  orders: "o",
  customers: "c",
  products: "p",
  reports: "r",
  settings: "s",
}

/**
 * App-wide shortcuts. Off while typing in a field (except ⌘K):
 * ⌘K palette · / focus the page's search (`data-shortcut="search"`) · G→X go to page · ? help.
 */
function useAppShortcuts({
  onNavigate,
  togglePalette,
  openHelp,
}: {
  onNavigate: (key: string) => void
  togglePalette: () => void
  openHelp: () => void
}) {
  useHotkeys("mod+k", togglePalette, { preventDefault: true, enableOnFormTags: true }, [togglePalette])
  useHotkeys(
    "slash",
    () => {
      const search = document.querySelector<HTMLElement>("[data-shortcut=search]")
      if (search) search.focus()
      else togglePalette()
    },
    { preventDefault: true },
    [togglePalette],
  )
  // "G then X": the library's `g>o` sequences share one buffer per hook and reset each
  // other, so track G ourselves. Physical keys (event.code) → also works on the Thai layout.
  const gPressedAt = React.useRef(0)
  useHotkeys("g", () => (gPressedAt.current = Date.now()))
  useHotkeys(
    Object.values(goKeys).join(","),
    (_, handler) => {
      if (Date.now() - gPressedAt.current > 1000) return
      gPressedAt.current = 0
      const page = Object.keys(goKeys).find((p) => goKeys[p] === handler.hotkey)
      if (page) onNavigate(page)
    },
    [onNavigate]
  )
  useHotkeys("shift+slash", openHelp, [openHelp])
}

/** Every shortcut in one place — opened with ? */
function ShortcutsDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  const pages = [...defaultNav, ...secondaryNav].filter((i) => goKeys[i.key])
  const row = (label: string, keys: React.ReactNode) => (
    <div key={label} className="flex items-center justify-between gap-4 py-1.5 text-sm">
      <span>{label}</span>
      {keys}
    </div>
  )
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Keyboard shortcuts</DialogTitle>
          <DialogDescription>Work on every page, except while typing in a field</DialogDescription>
        </DialogHeader>
        <div className="grid gap-4">
          <section>
            <h3 className="mb-1 text-xs font-medium text-muted-foreground">General</h3>
            {row(
              "Search commands or pages",
              <KbdGroup>
                <Kbd>⌘</Kbd>
                <Kbd>K</Kbd>
              </KbdGroup>,
            )}
            {row("Search this page", <Kbd>/</Kbd>)}
            {row(
              "Toggle sidebar",
              <KbdGroup>
                <Kbd>⌘</Kbd>
                <Kbd>B</Kbd>
              </KbdGroup>,
            )}
            {row("Clear table selection", <Kbd>Esc</Kbd>)}
            {row("Show keyboard shortcuts", <Kbd>?</Kbd>)}
          </section>
          <section>
            <h3 className="mb-1 text-xs font-medium text-muted-foreground">Go to</h3>
            {pages.map((p) =>
              row(
                p.label,
                <KbdGroup then>
                  <Kbd>G</Kbd>
                  <Kbd>{goKeys[p.key].toUpperCase()}</Kbd>
                </KbdGroup>,
              ),
            )}
          </section>
        </div>
      </DialogContent>
    </Dialog>
  )
}

/**
 * Block: the standard Craft app frame — collapsible sidebar with animated
 * active indicator + Linear→Bold icon swap, top bar with breadcrumb, ⌘K
 * search, theme toggle, notifications and account menu.
 */
export function AppShell({
  children,
  breadcrumb = ["Craft", "Overview"],
  nav = defaultNav,
  active: activeProp,
  onNavigate,
}: {
  children: React.ReactNode
  breadcrumb?: string[]
  nav?: NavItem[]
  active?: string
  onNavigate?: (key: string) => void
}) {
  const [activeState, setActiveState] = React.useState(nav[0]?.key)
  const active = activeProp ?? activeState
  const navigate = (key: string) => {
    setActiveState(key)
    onNavigate?.(key)
  }
  const [paletteOpen, setPaletteOpen] = React.useState(false)
  const [helpOpen, setHelpOpen] = React.useState(false)
  useAppShortcuts({
    onNavigate: navigate,
    togglePalette: () => setPaletteOpen((o) => !o),
    openHelp: () => setHelpOpen(true),
  })

  return (
    <SidebarProvider>
      <Sidebar collapsible="icon" variant="inset">
        <SidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" className="pointer-events-none">
                <div className="grid size-8 shrink-0 place-items-center">
                  <LogoMark className="size-6" />
                </div>
                <div className="grid flex-1 text-left leading-snug">
                  <span className="truncate text-sm font-semibold">Craft</span>
                  <span className="truncate text-xs text-muted-foreground">Workspace</span>
                </div>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
          <NavGroup label="Main" items={nav} active={active} onSelect={navigate} />
          <NavGroup label="System" items={secondaryNav} active={active} onSelect={navigate} />
        </SidebarContent>
        <SidebarFooter>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" tooltip="Account">
                <Avatar className="size-8 rounded-lg">
                  <AvatarFallback className="rounded-lg">AM</AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-snug">
                  <span className="truncate font-medium">Alex Morgan</span>
                  <span className="truncate text-xs text-muted-foreground">alex@craft.example</span>
                </div>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarFooter>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <TopBar
          breadcrumb={breadcrumb}
          paletteOpen={paletteOpen}
          setPaletteOpen={setPaletteOpen}
          onNavigate={navigate}
          onShowShortcuts={() => setHelpOpen(true)}
        />
        <ShortcutsDialog open={helpOpen} onOpenChange={setHelpOpen} />
        <div className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  )
}

function NavGroup({
  label,
  items,
  active,
  onSelect,
}: {
  label: string
  items: NavItem[]
  active?: string
  onSelect: (key: string) => void
}) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>{label}</SidebarGroupLabel>
      <SidebarGroupContent>
        <SidebarMenu>
          {items.map((item) => {
            const isActive = item.key === active
            return (
              <SidebarMenuItem key={item.key}>
                <SidebarMenuButton
                  isActive={isActive}
                  tooltip={item.label}
                  onClick={() => onSelect(item.key)}
                  className="relative isolate data-[active=true]:bg-transparent"
                >
                  {isActive && (
                    <motion.span
                      layoutId="app-shell-nav-active"
                      transition={spring.snappy}
                      className="absolute inset-0 -z-10 rounded-full bg-sidebar-accent ring-1 ring-sidebar-border"
                    />
                  )}
                  <Icon
                    as={item.icon}
                    activeAs={item.activeIcon}
                    active={isActive}
                    className={isActive ? "text-primary" : undefined}
                  />
                  <span>{item.label}</span>
                </SidebarMenuButton>
                {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
              </SidebarMenuItem>
            )
          })}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}

function TopBar({
  breadcrumb,
  paletteOpen: open,
  setPaletteOpen: setOpen,
  onNavigate,
  onShowShortcuts,
}: {
  breadcrumb: string[]
  paletteOpen: boolean
  setPaletteOpen: (open: boolean) => void
  onNavigate: (key: string) => void
  onShowShortcuts: () => void
}) {
  return (
    <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 rounded-t-xl border-b glass px-4">
      <SidebarTrigger className="-ml-1" />
      <Separator orientation="vertical" className="mr-1 data-vertical:h-4 data-vertical:self-center" />
      <Breadcrumb className="hidden sm:block">
        <BreadcrumbList>
          {breadcrumb.map((crumb, i) => (
            <React.Fragment key={crumb}>
              {i > 0 && <BreadcrumbSeparator />}
              <BreadcrumbItem>
                {i === breadcrumb.length - 1 ? (
                  <BreadcrumbPage>{crumb}</BreadcrumbPage>
                ) : (
                  <span className="text-muted-foreground">{crumb}</span>
                )}
              </BreadcrumbItem>
            </React.Fragment>
          ))}
        </BreadcrumbList>
      </Breadcrumb>
      <div className="ml-auto flex items-center gap-1.5">
        <Button
          variant="outline"
          className="w-9 justify-start px-0 text-muted-foreground sm:w-56 sm:px-3"
          onClick={() => setOpen(true)}
          aria-label="Search"
        >
          <MagnifierIcon className="mx-auto sm:mx-0" />
          <span className="hidden sm:inline">Search…</span>
          <KbdGroup className="ml-auto hidden sm:inline-flex">
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
          </KbdGroup>
        </Button>
        <ThemeToggle />
        <Notifications />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" size="icon" className="rounded-full" aria-label="Account menu">
              <Avatar className="size-8">
                <AvatarFallback>AM</AvatarFallback>
              </Avatar>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-52">
            <DropdownMenuLabel>My account</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <UserRoundedIcon /> Profile
            </DropdownMenuItem>
            <DropdownMenuItem>
              <SettingsIcon /> Settings
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DensityMenu />
            <HapticsMenuItem />
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive">
              <Logout2Icon /> Sign out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <CommandDialog open={open} onOpenChange={setOpen}>
        {/* shadcn v4 CommandDialog does not wrap children in <Command> — without it cmdk crashes */}
        <Command>
          <CommandInput placeholder="Type a command or search pages…" />
          <CommandList>
            <CommandEmpty>No results found</CommandEmpty>
            <CommandGroup heading="Go to">
              {[...defaultNav, ...secondaryNav].map((item) => (
                <CommandItem
                  key={item.key}
                  onSelect={() => {
                    setOpen(false)
                    onNavigate(item.key)
                  }}
                >
                  <item.icon />
                  {item.label}
                  {goKeys[item.key] && (
                    <CommandShortcut>
                      <KbdGroup then>
                        <Kbd>G</Kbd>
                        <Kbd>{goKeys[item.key].toUpperCase()}</Kbd>
                      </KbdGroup>
                    </CommandShortcut>
                  )}
                </CommandItem>
              ))}
            </CommandGroup>
            <CommandGroup heading="Help">
              <CommandItem
                onSelect={() => {
                  setOpen(false)
                  onShowShortcuts()
                }}
              >
                <KeyboardIcon />
                All keyboard shortcuts
                <CommandShortcut>
                  <Kbd>?</Kbd>
                </CommandShortcut>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </header>
  )
}

const initialNotifications = [
  { id: 1, title: "New order ORD-24305", time: "2 min ago" },
  { id: 2, title: "Refund requested for ORD-24109", time: "1 hr ago" },
  { id: 3, title: "“Medium roast coffee” is running low", time: "3 hr ago" },
]

function Notifications() {
  const [unread, setUnread] = React.useState(initialNotifications)

  return (
    <DropdownMenu>
      <Tooltip>
        <TooltipTrigger asChild>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="relative"
              aria-label={`Notifications, ${unread.length} unread`}
            >
              <Icon as={BellIcon} activeAs={BellBold} active={unread.length > 0} />
              <CountBadge count={unread.length} className="absolute -top-0.5 -right-0.5" />
            </Button>
          </DropdownMenuTrigger>
        </TooltipTrigger>
        <TooltipContent>Notifications</TooltipContent>
      </Tooltip>
      <DropdownMenuContent align="end" className="w-72">
        <DropdownMenuLabel className="flex items-center justify-between">
          Notifications
          {unread.length > 0 && (
            <button
              type="button"
              className="text-xs font-normal text-primary hover:underline"
              onClick={() => setUnread([])}
            >
              Mark all as read
            </button>
          )}
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        {unread.length === 0 ? (
          <p className="px-2 py-6 text-center text-sm text-muted-foreground">No new notifications</p>
        ) : (
          unread.map((n) => (
            <DropdownMenuItem
              key={n.id}
              className="items-start"
              onSelect={(e) => {
                e.preventDefault()
                setUnread((list) => list.filter((x) => x.id !== n.id))
              }}
            >
              <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
              <span className="grid gap-0.5">
                <span>{n.title}</span>
                <span className="text-xs text-muted-foreground">{n.time}</span>
              </span>
            </DropdownMenuItem>
          ))
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/** Account-menu section: comfortable (36px controls) vs compact (32px, tighter table rows) */
/** Phone haptics on/off — stays open so the change is felt right away */
function HapticsMenuItem() {
  const { enabled, setEnabled } = useHaptics()
  return (
    <DropdownMenuCheckboxItem checked={enabled} onCheckedChange={setEnabled} onSelect={(e) => e.preventDefault()}>
      Haptic feedback
    </DropdownMenuCheckboxItem>
  )
}

function DensityMenu() {
  const [density, setDensity] = useDensity()
  return (
    <>
      <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">Density</DropdownMenuLabel>
      <DropdownMenuRadioGroup value={density} onValueChange={(v) => setDensity(v as Density)}>
        <DropdownMenuRadioItem value="comfortable" onSelect={(e) => e.preventDefault()}>
          Comfortable
        </DropdownMenuRadioItem>
        <DropdownMenuRadioItem value="compact" onSelect={(e) => e.preventDefault()}>
          Compact
        </DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </>
  )
}

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme()
  // false during SSR/hydration, true after — avoids a theme-dependent hydration mismatch
  const mounted = React.useSyncExternalStore(
    () => () => {},
    () => true,
    () => false,
  )
  const dark = mounted && resolvedTheme === "dark"

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
          onClick={() => setTheme(dark ? "light" : "dark")}
        >
          <Icon as={SunIcon} activeAs={MoonIcon} active={dark} />
        </Button>
      </TooltipTrigger>
      <TooltipContent>{dark ? "Light mode" : "Dark mode"}</TooltipContent>
    </Tooltip>
  )
}
1e:["$","div",null,{"className":"max-h-[32rem] overflow-auto p-4 font-mono text-[0.8125rem] leading-relaxed [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$1f"}}]
Installation
