@ploykit/ui 0.6.0 → 0.6.2

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "../../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { cn } from "../../lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/tabs.tsx

@@ -0,0 +1,79 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+/**
+ * Textarea 多行文本域：与 Input 完全同族的 token 体系
+ * （border-input / bg-transparent / focus-visible ring / aria-invalid
+ * destructive / disabled / dark:bg-input/30），min-h 起步、支持
+ * ref 与 className 合并。
+ */
+function Textarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,63 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "../../lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/dev.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/index.ts

@@ -0,0 +1,150 @@
+
+
+export { AppShell } from './layouts/AppShell'
+export type { NavItem } from './layouts/AppShell'
+export {
+  Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
+  SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton,
+  SidebarMenuItem, SidebarProvider, SidebarTrigger,
+} from './components/ui/sidebar'
+export { Separator } from './components/ui/separator'
+export { Skeleton } from './components/ui/skeleton'
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/ui/tooltip'
+export { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetTrigger, SheetClose } from './components/ui/sheet'
+export { AppProviders } from './AppProviders'
+
+export { LoginPage } from './pages/LoginPage'
+export type { OAuthProviderOption, LoginPageProps } from './pages/LoginPage'
+export { LandingPage } from './pages/LandingPage'
+export type { Feature as LandingFeature, Plan as LandingPlan } from './pages/LandingPage'
+
+export { Button, buttonVariants } from './components/ui/button'
+export { Input } from './components/ui/input'
+export { Textarea } from './components/ui/textarea'
+export { StatusBadge } from './components/StatusBadge'
+export {
+  Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle,
+  DialogDescription, DialogFooter, DialogClose,
+} from './components/ui/dialog'
+
+export { PageHeader, PageLoading, PageEmpty, PageError } from './components/Page'
+
+export { ConfirmProvider, useConfirm } from './components/ConfirmDialog'
+
+export { NotificationBell } from './components/NotificationBell'
+
+export { WorkspaceSwitcher } from './components/WorkspaceSwitcher'
+
+export { SecretModal, ImpactConfirmation } from './components/SecretModal'
+
+export { cn, statusTone, statusLabel, STATUS_TONE_CLASS, STATUS_LABEL, formatDate, formatDateTime, shortID } from './lib/utils'
+export type { StatusTone } from './lib/utils'
+export { ForgotPasswordPage } from './pages/auth/ForgotPasswordPage'
+export type { ForgotPasswordPageProps } from './pages/auth/ForgotPasswordPage'
+export { ResetPasswordPage } from './pages/auth/ResetPasswordPage'
+export type { ResetPasswordPageProps } from './pages/auth/ResetPasswordPage'
+export { VerifyEmailPage } from './pages/auth/VerifyEmailPage'
+
+export { ErrorBoundary } from './components/ErrorBoundary'
+export type { ErrorBoundaryProps } from './components/ErrorBoundary'
+export { toast, Toaster } from './components/toast'
+export { FormField } from './components/FormField'
+export type { FormFieldProps } from './components/FormField'
+export { DataTable } from './components/DataTable'
+export type { Column, DataTableProps } from './components/DataTable'
+
+export {
+  Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend,
+  FieldSeparator, FieldSet, FieldContent, FieldTitle,
+} from './components/ui/field'
+export { Label } from './components/ui/label'
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/tabs'
+export {
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay,
+  AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger,
+} from './components/ui/alert-dialog'
+export {
+  Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge,
+} from './components/ui/avatar'
+export {
+  DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator,
+  DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent,
+} from './components/ui/dropdown-menu'
+export {
+  Select, SelectContent, SelectGroup, SelectItem, SelectLabel,
+  SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue,
+} from './components/ui/select'
+export {
+  Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger,
+} from './components/ui/popover'
+export { Switch } from './components/ui/switch'
+export {
+  Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue,
+} from './components/ui/progress'
+export { Checkbox } from './components/ui/checkbox'
+export {
+  Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent,
+} from './components/ui/card'
+export {
+  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage,
+  BreadcrumbSeparator, BreadcrumbEllipsis,
+} from './components/ui/breadcrumb'
+export {
+  Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia,
+} from './components/ui/empty'
+
+export { SettingsShell } from './layouts/SettingsShell'
+export type { SettingsNavItem, SettingsNavGroup, SettingsShellProps } from './layouts/SettingsShell'
+export { AuthShell } from './layouts/AuthShell'
+export type { AuthShellProps } from './layouts/AuthShell'
+export { SettingsCard } from './components/SettingsCard'
+export type { SettingsCardProps } from './components/SettingsCard'
+export { UserMenu } from './components/UserMenu'
+export { OnboardingChecklist } from './components/OnboardingChecklist'
+
+export { RegisterPage } from './pages/auth/RegisterPage'
+export type { RegisterPageProps } from './pages/auth/RegisterPage'
+export { InviteAcceptPage } from './pages/auth/InviteAcceptPage'
+
+export { ProfileSettingsPage } from './pages/account/ProfileSettingsPage'
+export type { ProfileSettingsPageProps } from './pages/account/ProfileSettingsPage'
+export { SecuritySettingsPage } from './pages/account/SecuritySettingsPage'
+export { TokensPage } from './pages/account/TokensPage'
+export { NotificationPreferencesPage } from './pages/account/NotificationPreferencesPage'
+export type { NotificationPreferencesPageProps, NotificationTypeMeta } from './pages/account/NotificationPreferencesPage'
+
+export { MembersPage } from './pages/workspace/MembersPage'
+export { RolePermissionsPage } from './pages/workspace/RolePermissionsPage'
+export { ReauthDialog } from './components/ReauthDialog'
+export { WorkspaceGeneralPage } from './pages/workspace/WorkspaceGeneralPage'
+export { WorkspaceAuditPage } from './pages/workspace/WorkspaceAuditPage'
+export { UsagePage } from './pages/workspace/UsagePage'
+export { BillingPage } from './pages/workspace/BillingPage'
+export { BillingSuccessPage } from './pages/workspace/BillingSuccessPage'
+export { WebhooksPage } from './pages/workspace/WebhooksPage'
+
+export { apiErrorMessage } from './lib/api-error'
+
+export { CronInput } from './components/CronInput'
+export { SchedulesPage } from './pages/workspace/SchedulesPage'
+
+export { SiteBanner } from './components/SiteBanner'
+export { SiteBannerLayer } from './components/SiteBannerLayer'
+export type { SiteBannerLayerProps } from './components/SiteBannerLayer'
+
+export { ImpersonationBanner } from './components/ImpersonationBanner'
+
+export { AdminShell } from './pages/admin/AdminShell'
+export { OverviewPage } from './pages/admin/OverviewPage'
+export { UsersPage } from './pages/admin/UsersPage'
+export { UserDetailPage } from './pages/admin/UserDetailPage'
+export { WorkspacesPage } from './pages/admin/WorkspacesPage'
+export { WorkspaceDetailPage } from './pages/admin/WorkspaceDetailPage'
+export { OrdersPage } from './pages/admin/OrdersPage'
+export { WebhookDeliveriesPage } from './pages/admin/WebhookDeliveriesPage'
+export { AuditPage } from './pages/admin/AuditPage'
+export { SSOPage } from './pages/admin/SSOPage'
+export { AdminSettingsPage } from './pages/admin/AdminSettingsPage'

package/src/layouts/AppShell.tsx

@@ -0,0 +1,163 @@
+
+import { useLocation, useNavigate } from 'react-router'
+import { useEffect, type ReactNode } from 'react'
+import { FolderKanban } from 'lucide-react'
+import {
+  Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
+  SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem,
+  SidebarProvider, SidebarTrigger,
+} from '../components/ui/sidebar'
+import {
+  Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbSeparator,
+} from '../components/ui/breadcrumb'
+import { UserMenu } from '../components/UserMenu'
+import { ImpersonationBanner } from '../components/ImpersonationBanner'
+
+// stock SidebarProvider 只写不读 sidebar_state cookie（写入供 SSR 框架回传 defaultOpen）。
+// CSR 产品在组合层回读，保持跨会话折叠状态（P2-17，自 stock 镜像化后上提至此）。
+function readSidebarCookieOpen(): boolean {
+  if (typeof document === 'undefined') return true // SSR 安全
+  return !document.cookie.split('; ').includes('sidebar_state=false')
+}
+
+export interface NavItem {
+  path: string
+  label: string
+  
+  icon?: ReactNode
+}
+
+export function AppShell({ children, nav, brand, logo, logoDark, sidebarFooter, headerRight, breadcrumbTail = null, settingsContent }: {
+  children: ReactNode
+  nav?: NavItem[]
+  brand?: string
+  
+  /** 品牌图形（sidebar 顶栏，方形 mark 最佳，h-7 宽自适应）；与 brand 文字横排。 */
+  logo?: string
+  /** 暗色变体，经 prefers-color-scheme 切换——仅当应用主题跟随系统时才传；
+   *  固定亮色主题的应用不要传（否则深色系统的用户会在亮底上拿到暗色变体）。 */
+  logoDark?: string
+  
+  sidebarFooter?: ReactNode
+  
+  headerRight?: ReactNode
+  
+  breadcrumbTail?: string | null
+  
+  settingsContent?: ReactNode
+}) {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  // 输入焦点时不劫持 Ctrl/Cmd+B（P3-1，自 stock 镜像化后上提至此）：
+  // 捕获阶段拦截可编辑目标上的快捷键，阻断 stock SidebarProvider 的全局监听。
+  useEffect(() => {
+    const guard = (e: KeyboardEvent) => {
+      if (!(e.ctrlKey || e.metaKey) || e.key.toLowerCase() !== 'b') return
+      const t = e.target as HTMLElement | null
+      if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) {
+        e.stopImmediatePropagation()
+      }
+    }
+    window.addEventListener('keydown', guard, true)
+    return () => window.removeEventListener('keydown', guard, true)
+  }, [])
+
+  const items = nav ?? [
+    { path: '/app', label: '概览', icon: <FolderKanban size={17} aria-hidden="true" /> },
+  ]
+  const selected = items.find((item) => location.pathname.startsWith(item.path))
+  const isSettingsMode =
+    settingsContent !== undefined &&
+    (location.pathname.startsWith('/settings') || location.pathname.startsWith('/account'))
+
+  return (
+    <SidebarProvider defaultOpen={readSidebarCookieOpen()}>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 pb-1 pt-1 group-data-[collapsible=icon]:justify-center">
+            {logo && (
+              <picture>
+                <source media="(prefers-color-scheme: dark)" srcSet={logoDark ?? logo} />
+                <img
+                  src={logo}
+                  alt={`${brand ?? 'App'} logo`}
+                  className="h-7 w-auto group-data-[collapsible=icon]:w-7 group-data-[collapsible=icon]:object-contain"
+                />
+              </picture>
+            )}
+            <div className="text-lg font-bold text-foreground group-data-[collapsible=icon]:hidden">
+              {brand ?? 'App'}
+            </div>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          {isSettingsMode ? (
+            settingsContent
+          ) : (
+            <SidebarGroup>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {items.map((item) => {
+                    const active = selected?.path === item.path
+                    return (
+                      <SidebarMenuItem key={item.path}>
+                        <SidebarMenuButton
+                          isActive={active}
+                          aria-current={active ? 'page' : undefined}
+                          tooltip={item.label}
+                          onClick={() => navigate(item.path)}
+                        >
+                          {item.icon}
+                          <span className="truncate">{item.label}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    )
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          )}
+        </SidebarContent>
+        <SidebarFooter className="group-data-[collapsible=icon]:hidden">
+          {sidebarFooter}
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        {/* 模拟会话警示条（ADR 0008）：impersonated_by 非空时持久显示在内容区
+            最顶部；无退出按钮——退出由发起管理员控制。 */}
+        <ImpersonationBanner />
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background px-4">
+          <SidebarTrigger />
+          {/* 面包屑（sidebar-07 蓝本）：nav 命中项为一级；SettingsShell 等二级布局通过
+              props.breadcrumbTail 追加层级。 */}
+          {breadcrumbTail !== null ? (
+            <Breadcrumb>
+              <BreadcrumbList>
+                {selected && (
+                  <>
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>{selected.label}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                  </>
+                )}
+                <BreadcrumbItem>
+                  <BreadcrumbPage>{breadcrumbTail}</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          ) : null}
+          <div className="flex-1" />
+          {headerRight}
+          <UserMenu />
+        </header>
+        {/* P3-23：不再嵌套 <main>——SidebarInset 已是 <main> 地标，文档树内
+            main 必须唯一（嵌套双 main 违反 landmark 唯一性）。滚动责任不变：
+            本元素仍是 overflow-auto 滚动容器（SettingsShell sticky 的参照，
+            见其 aside 注释），语义地标归 SidebarInset 承担。 */}
+        <div className="flex-1 overflow-auto p-6">{children}</div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/src/layouts/AuthShell.tsx

@@ -0,0 +1,24 @@
+
+import type { ReactNode } from 'react'
+
+export interface AuthShellProps {
+  children: ReactNode
+  
+  brand?: ReactNode
+  
+  footer?: ReactNode
+}
+
+export function AuthShell({ children, brand, footer }: AuthShellProps) {
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center bg-background p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        {brand && <div className="mb-6 flex flex-col items-center gap-2 text-center">{brand}</div>}
+        {children}
+        {footer && (
+          <div className="mt-6 text-center text-xs text-muted-foreground">{footer}</div>
+        )}
+      </div>
+    </div>
+  )
+}