tembro 3.1.17 → 4.0.1

package/packages/cli/vendor/src/components/layout/{app-sidebar.tsx → sidebar.tsx}

@@ -3,17 +3,18 @@
 import * as React from "react"
 import { ChevronRightIcon, MenuIcon, XIcon } from "lucide-react"
 
-import { useIsMobile } from "@/hooks/use-is-mobile"
+import { useIsMobile } from "@/hooks/use-is-mobile"
 import { Tooltip } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 import { ControllableDetails } from "./controllable-details"
+import { useSidebar } from "./sidebar-context"
 
-type AppSidebarNavItem = {
+export type SidebarItem = {
   key: string
   label: React.ReactNode
   icon?: React.ReactNode
   href?: string
-  items?: AppSidebarNavItem[]
+  items?: SidebarItem[]
   active?: boolean
   disabled?: boolean
   badge?: React.ReactNode
@@ -27,7 +28,7 @@ type AppSidebarNavItem = {
   onSelect?: () => void
 }
 
-type AppSidebarFooterAccount = {
+export type SidebarFooterAccount = {
   label: React.ReactNode
   description?: React.ReactNode
   avatar?: React.ReactNode
@@ -36,18 +37,18 @@ type AppSidebarFooterAccount = {
   onSelect?: () => void
 }
 
-export type AppSidebarProps = React.ComponentProps<"aside"> & {
+export type SidebarProps = React.ComponentProps<"aside"> & {
   header?: React.ReactNode
   footer?: React.ReactNode
-  items?: AppSidebarNavItem[]
+  items?: SidebarItem[]
   collapsed?: boolean
   width?: React.CSSProperties["width"]
   collapsedWidth?: React.CSSProperties["width"]
   mobileWidth?: React.CSSProperties["width"]
   collapsedRail?: React.ReactNode
-  railItems?: AppSidebarNavItem[]
-  footerAccount?: AppSidebarFooterAccount
-  secondaryActions?: AppSidebarNavItem[]
+  railItems?: SidebarItem[]
+  footerAccount?: SidebarFooterAccount
+  secondaryActions?: SidebarItem[]
   footerSecondary?: React.ReactNode
   tooltipOnCollapsed?: boolean
   showSectionLabels?: boolean
@@ -71,12 +72,12 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
   mobileOverlayClassName?: string
   footerClassName?: string
   renderMobileToggle?: (state: { open: boolean; setOpen: (open: boolean) => void }) => React.ReactNode
-  onItemSelect?: (item: AppSidebarNavItem) => void
-  renderItem?: (item: AppSidebarNavItem, state: { collapsed: boolean }) => React.ReactNode
-  renderLink?: (props: React.ComponentProps<"a"> & { item: AppSidebarNavItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
-}
-
-const DEFAULT_APP_SIDEBAR_BREAKPOINT = 1024
+  onItemSelect?: (item: SidebarItem) => void
+  renderItem?: (item: SidebarItem, state: { collapsed: boolean }) => React.ReactNode
+  renderLink?: (props: React.ComponentProps<"a"> & { item: SidebarItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
+}
+
+const DEFAULT_SIDEBAR_BREAKPOINT = 1024
 const DEFAULT_SIDEBAR_WIDTH = "18rem"
 const DEFAULT_COLLAPSED_SIDEBAR_WIDTH = "4.75rem"
 const DEFAULT_MOBILE_SIDEBAR_WIDTH = "min(88vw, 22rem)"
@@ -104,8 +105,8 @@ function getSidebarItemLayoutClassName({
 }: {
   collapsed: boolean
   depth: number
-  itemSize: NonNullable<AppSidebarProps["itemSize"]>
-  activeIndicator: NonNullable<AppSidebarProps["activeIndicator"]>
+  itemSize: NonNullable<SidebarProps["itemSize"]>
+  activeIndicator: NonNullable<SidebarProps["activeIndicator"]>
 }) {
   return cn(
     "relative w-full rounded-[min(var(--radius-xl),14px)] py-2",
@@ -121,16 +122,16 @@ function getSidebarItemLayoutClassName({
   )
 }
 
-function hasVisibleSidebarChildren(item: AppSidebarNavItem) {
+function hasVisibleSidebarChildren(item: SidebarItem) {
   return item.items?.some((child) => !child.hidden) ?? false
 }
 
-function isSidebarItemActive(item: AppSidebarNavItem): boolean {
+function isSidebarItemActive(item: SidebarItem): boolean {
   if (item.active) return true
   return item.items?.some((child) => isSidebarItemActive(child)) ?? false
 }
 
-function triggerSidebarItem(item: AppSidebarNavItem, onItemSelect?: (item: AppSidebarNavItem) => void) {
+function triggerSidebarItem(item: SidebarItem, onItemSelect?: (item: SidebarItem) => void) {
   item.onSelect?.()
   onItemSelect?.(item)
 }
@@ -144,19 +145,19 @@ function SidebarLeafItem({
   onItemSelect,
   renderLink,
 }: {
-  item: AppSidebarNavItem
+  item: SidebarItem
   collapsed: boolean
   depth: number
-  itemSize: NonNullable<AppSidebarProps["itemSize"]>
-  activeIndicator: NonNullable<AppSidebarProps["activeIndicator"]>
-  onItemSelect?: (item: AppSidebarNavItem) => void
-  renderLink?: AppSidebarProps["renderLink"]
+  itemSize: NonNullable<SidebarProps["itemSize"]>
+  activeIndicator: NonNullable<SidebarProps["activeIndicator"]>
+  onItemSelect?: (item: SidebarItem) => void
+  renderLink?: SidebarProps["renderLink"]
 }) {
   const currentValue: React.AriaAttributes["aria-current"] = item.current ?? (item.active ? "page" : undefined)
   const commonProps = {
     "aria-current": currentValue,
     "aria-disabled": item.disabled || undefined,
-    "data-slot": "app-sidebar-item" as const,
+    "data-slot": "sidebar-item" as const,
     "data-active": item.active || undefined,
     "data-disabled": item.disabled || undefined,
     "data-depth": String(depth),
@@ -272,14 +273,14 @@ function SidebarTree({
   onItemSelect,
   renderLink,
 }: {
-  items: AppSidebarNavItem[]
+  items: SidebarItem[]
   collapsed: boolean
   depth: number
   showSectionLabels: boolean
-  itemSize: NonNullable<AppSidebarProps["itemSize"]>
-  activeIndicator: NonNullable<AppSidebarProps["activeIndicator"]>
-  onItemSelect?: (item: AppSidebarNavItem) => void
-  renderLink?: AppSidebarProps["renderLink"]
+  itemSize: NonNullable<SidebarProps["itemSize"]>
+  activeIndicator: NonNullable<SidebarProps["activeIndicator"]>
+  onItemSelect?: (item: SidebarItem) => void
+  renderLink?: SidebarProps["renderLink"]
 }) {
   return items.map((item) => {
     if (item.hidden) return null
@@ -293,7 +294,7 @@ function SidebarTree({
         <React.Fragment key={item.key}>
           {showSectionLabel ? (
             <div
-              data-slot="app-sidebar-group-label"
+              data-slot="sidebar-group-label"
               className="px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] first:pt-0"
             >
               {item.sectionLabel}
@@ -315,24 +316,24 @@ function SidebarTree({
     const defaultExpanded = item.defaultExpanded ?? active
 
     return (
-      <div key={item.key} data-slot="app-sidebar-group" data-depth={depth}>
+      <div key={item.key} data-slot="sidebar-group" data-depth={depth}>
         {showSectionLabel && (
           <div
-            data-slot="app-sidebar-group-label"
+            data-slot="sidebar-group-label"
             className="px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] first:pt-0"
           >
             {item.sectionLabel}
           </div>
         )}
         <ControllableDetails
-          data-slot="app-sidebar-group-details"
+          data-slot="sidebar-group-details"
           open={item.expanded}
           defaultOpen={defaultExpanded}
-          className="group/app-sidebar-details"
+          className="group/sidebar-details"
           onOpenChange={item.onExpandedChange}
         >
           <summary
-            data-slot="app-sidebar-group-trigger"
+            data-slot="sidebar-group-trigger"
             data-size={itemSize}
             data-active={active || undefined}
             data-active-indicator={activeIndicator}
@@ -355,12 +356,12 @@ function SidebarTree({
             {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
             {!collapsed && (
               <ChevronRightIcon
-                data-slot="app-sidebar-group-chevron"
-                className="ml-auto size-3.5 shrink-0 text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] transition-transform group-open/app-sidebar-details:rotate-90"
+                data-slot="sidebar-group-chevron"
+                className="ml-auto size-3.5 shrink-0 text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_42%)] transition-transform group-open/sidebar-details:rotate-90"
               />
             )}
           </summary>
-          <div data-slot="app-sidebar-group-content" className={cn("mt-1 flex flex-col gap-1", !collapsed && "pl-3")}>
+          <div data-slot="sidebar-group-content" className={cn("mt-1 flex flex-col gap-1", !collapsed && "pl-3")}>
             <SidebarTree
               items={item.items ?? []}
               collapsed={collapsed}
@@ -383,14 +384,14 @@ function SidebarActionButton({
   collapsed,
   onItemSelect,
 }: {
-  item: AppSidebarNavItem
+  item: SidebarItem
   collapsed: boolean
-  onItemSelect?: (item: AppSidebarNavItem) => void
+  onItemSelect?: (item: SidebarItem) => void
 }) {
   const content = (
     <button
       type="button"
-      data-slot="app-sidebar-action"
+      data-slot="sidebar-action"
       data-active={item.active || undefined}
       data-disabled={item.disabled || undefined}
       className={cn(
@@ -424,14 +425,14 @@ function SidebarFooterAccount({
   collapsed,
   onAfterSelect,
 }: {
-  account: AppSidebarFooterAccount
+  account: SidebarFooterAccount
   collapsed: boolean
   onAfterSelect?: () => void
 }) {
   const body = (
     <button
       type="button"
-      data-slot="app-sidebar-account"
+      data-slot="sidebar-account"
       className={cn(
         "flex w-full items-center gap-3 rounded-[min(var(--radius-xl),16px)] border border-transparent text-left transition-[background-color,border-color,color,box-shadow]",
         getSidebarInteractiveClassName({}),
@@ -450,7 +451,7 @@ function SidebarFooterAccount({
     >
       {account.avatar ? (
         <span
-          data-slot="app-sidebar-account-avatar"
+          data-slot="sidebar-account-avatar"
           className="inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border/65 bg-muted/45 text-sm font-semibold"
         >
           {account.avatar}
@@ -458,11 +459,11 @@ function SidebarFooterAccount({
       ) : null}
       {!collapsed ? (
         <span className="min-w-0 flex-1">
-          <span data-slot="app-sidebar-account-label" className="block truncate text-sm font-semibold text-[color:var(--sidebar-foreground)]">
+          <span data-slot="sidebar-account-label" className="block truncate text-sm font-semibold text-[color:var(--sidebar-foreground)]">
             {account.label}
           </span>
           {account.description ? (
-            <span data-slot="app-sidebar-account-description" className="block truncate text-xs text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_36%)]">
+            <span data-slot="sidebar-account-description" className="block truncate text-xs text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_36%)]">
               {account.description}
             </span>
           ) : null}
@@ -511,7 +512,7 @@ function SidebarSurface({
   onRequestClose,
   closeOnSelect = true,
   ...props
-}: Omit<AppSidebarProps, "responsive" | "mobileBreakpoint" | "mobileOpen" | "defaultMobileOpen" | "onMobileOpenChange" | "mobileToggleLabel" | "mobileToggleIcon" | "showMobileToggle" | "mobileToggleClassName" | "mobilePanelClassName" | "mobileOverlayClassName" | "renderMobileToggle"> & {
+}: Omit<SidebarProps, "responsive" | "mobileBreakpoint" | "mobileOpen" | "defaultMobileOpen" | "onMobileOpenChange" | "mobileToggleLabel" | "mobileToggleIcon" | "showMobileToggle" | "mobileToggleClassName" | "mobilePanelClassName" | "mobileOverlayClassName" | "renderMobileToggle"> & {
   mobile?: boolean
   onRequestClose?: () => void
 }) {
@@ -519,7 +520,7 @@ function SidebarSurface({
   const visibleRailItems = railItems.filter((item) => !item.hidden)
   const visibleSecondaryActions = secondaryActions.filter((item) => !item.hidden)
 
-  const handleSelect = React.useCallback((item: AppSidebarNavItem) => {
+  const handleSelect = React.useCallback((item: SidebarItem) => {
     onItemSelect?.(item)
     if (mobile && closeOnSelect) onRequestClose?.()
   }, [closeOnSelect, mobile, onItemSelect, onRequestClose])
@@ -528,10 +529,10 @@ function SidebarSurface({
 
   return (
     <aside
-      data-slot="app-sidebar"
+      data-slot="sidebar"
       data-collapsed={collapsed || undefined}
       data-mobile={mobile || undefined}
-      className={cn("flex h-full min-h-0 flex-col overflow-hidden", className)}
+      className={cn("group/sidebar flex h-full min-h-0 flex-col overflow-hidden", className)}
       style={{
         width: collapsed ? collapsedWidth : width,
         minWidth: collapsed ? collapsedWidth : width,
@@ -540,7 +541,7 @@ function SidebarSurface({
       {...props}
     >
       {(header || showMobileHeader) && (
-        <div data-slot="app-sidebar-header" className="shrink-0 border-b p-3">
+        <div data-slot="sidebar-header" className="shrink-0 border-b p-3">
           <div className="flex items-start gap-3">
             <div className="min-w-0 flex-1">
               {header ?? null}
@@ -559,7 +560,7 @@ function SidebarSurface({
               <button
                 type="button"
                 aria-label={mobileCloseLabel}
-                data-slot="app-sidebar-mobile-close"
+                data-slot="sidebar-mobile-close"
                 className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg-alt,var(--muted))] text-[color:var(--aui-page-foreground,var(--foreground))] transition hover:bg-[color:var(--aui-control-bg,var(--muted))]"
                 onClick={onRequestClose}
               >
@@ -571,7 +572,7 @@ function SidebarSurface({
       )}
 
       <nav
-        data-slot="app-sidebar-nav"
+        data-slot="sidebar-nav"
         aria-label={navigationLabel}
         className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain p-2"
       >
@@ -605,11 +606,11 @@ function SidebarSurface({
       </nav>
 
       {(footerAccount || footerSecondary || footer || visibleSecondaryActions.length > 0 || (collapsed && (collapsedRail || visibleRailItems.length > 0))) && (
-        <div data-slot="app-sidebar-footer" className={cn("shrink-0 border-t p-3", footerClassName)}>
+        <div data-slot="sidebar-footer" className={cn("shrink-0 border-t p-3", footerClassName)}>
           {collapsed ? (
             <>
               {visibleRailItems.length > 0 ? (
-                <div data-slot="app-sidebar-rail-actions" className="grid gap-2">
+                <div data-slot="sidebar-rail-actions" className="grid gap-2">
                   {visibleRailItems.map((item) => (
                     <SidebarActionButton
                       key={item.key}
@@ -620,18 +621,18 @@ function SidebarSurface({
                   ))}
                 </div>
               ) : null}
-              {collapsedRail ? <div data-slot="app-sidebar-rail">{collapsedRail}</div> : null}
+              {collapsedRail ? <div data-slot="sidebar-rail">{collapsedRail}</div> : null}
             </>
           ) : null}
           {!collapsed && footerAccount ? (
-            <div data-slot="app-sidebar-account-wrap" className="mb-3">
+            <div data-slot="sidebar-account-wrap" className="mb-3">
               <SidebarFooterAccount account={footerAccount} collapsed={false} onAfterSelect={() => {
                 if (mobile && closeOnSelect) onRequestClose?.()
               }} />
             </div>
           ) : null}
           {!collapsed && visibleSecondaryActions.length > 0 ? (
-            <div data-slot="app-sidebar-secondary-actions" className="mb-3 grid gap-2">
+            <div data-slot="sidebar-secondary-actions" className="mb-3 grid gap-2">
               {visibleSecondaryActions.map((item) => (
                 <SidebarActionButton
                   key={item.key}
@@ -643,12 +644,12 @@ function SidebarSurface({
             </div>
           ) : null}
           {!collapsed && footerSecondary ? (
-            <div data-slot="app-sidebar-footer-secondary" className="mb-3">
+            <div data-slot="sidebar-footer-secondary" className="mb-3">
               {footerSecondary}
             </div>
           ) : null}
           {collapsed && footerAccount ? (
-            <div data-slot="app-sidebar-account-wrap">
+            <div data-slot="sidebar-account-wrap">
               <SidebarFooterAccount
                 account={footerAccount}
                 collapsed
@@ -665,12 +666,12 @@ function SidebarSurface({
   )
 }
 
-function Sidebar({
+function Sidebar({
   className,
   header,
   footer,
   items = [],
-  collapsed = false,
+  collapsed: collapsedProp,
   width = DEFAULT_SIDEBAR_WIDTH,
   collapsedWidth = DEFAULT_COLLAPSED_SIDEBAR_WIDTH,
   mobileWidth = DEFAULT_MOBILE_SIDEBAR_WIDTH,
@@ -685,7 +686,7 @@ function Sidebar({
   activeIndicator = "bar",
   navigationLabel = "Primary navigation",
   responsive = true,
-  mobileBreakpoint = DEFAULT_APP_SIDEBAR_BREAKPOINT,
+  mobileBreakpoint = DEFAULT_SIDEBAR_BREAKPOINT,
   mobileOpen: mobileOpenProp,
   defaultMobileOpen = false,
   onMobileOpenChange,
@@ -705,18 +706,22 @@ function Sidebar({
   renderLink,
   children,
   ...props
-}: AppSidebarProps) {
-  const matchesMobileBreakpoint = useIsMobile(mobileBreakpoint)
+}: SidebarProps) {
+  const sidebarContext = useSidebar(true)
+  const collapsed = collapsedProp ?? sidebarContext?.collapsed ?? false
+  const matchesMobileBreakpoint = useIsMobile(mobileBreakpoint)
   const isMobile = responsive && matchesMobileBreakpoint
   const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = React.useState(defaultMobileOpen)
-  const mobileOpen = mobileOpenProp ?? uncontrolledMobileOpen
+  const mobileOpen = mobileOpenProp ?? sidebarContext?.mobileOpen ?? uncontrolledMobileOpen
 
-  const setMobileOpen = React.useCallback((nextOpen: boolean) => {
-    if (mobileOpenProp == null) {
-      setUncontrolledMobileOpen(nextOpen)
-    }
-    onMobileOpenChange?.(nextOpen)
-  }, [mobileOpenProp, onMobileOpenChange])
+  const setMobileOpen = React.useCallback((nextOpen: boolean) => {
+    if (mobileOpenProp == null && sidebarContext) {
+      sidebarContext.setMobileOpen(nextOpen)
+    } else if (mobileOpenProp == null) {
+      setUncontrolledMobileOpen(nextOpen)
+    }
+    onMobileOpenChange?.(nextOpen)
+  }, [mobileOpenProp, onMobileOpenChange, sidebarContext])
 
   React.useEffect(() => {
     if (!isMobile && mobileOpen) {
@@ -778,7 +783,7 @@ function Sidebar({
     <button
       type="button"
       aria-label={mobileOpen ? mobileCloseLabel : mobileToggleLabel}
-      data-slot="app-sidebar-mobile-trigger"
+      data-slot="sidebar-mobile-trigger"
       data-state={mobileOpen ? "open" : "closed"}
       className={cn(
         "inline-flex min-h-10 items-center gap-2 rounded-xl border border-[color:var(--aui-divider,var(--border))] bg-[color:var(--aui-page-bg,var(--background))] px-3 text-sm font-medium text-[color:var(--aui-page-foreground,var(--foreground))] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt,var(--muted))]",
@@ -800,11 +805,11 @@ function Sidebar({
           ? renderMobileToggle({ open: mobileOpen, setOpen: setMobileOpen })
           : defaultTrigger
         : null}
-      <div data-slot="app-sidebar-mobile-root" className="relative z-40">
+      <div data-slot="sidebar-mobile-root" className="relative z-40">
         <button
           type="button"
           aria-label="Dismiss navigation"
-          data-slot="app-sidebar-mobile-overlay"
+          data-slot="sidebar-mobile-overlay"
           data-state={mobileOpen ? "open" : "closed"}
           className={cn(
             "fixed inset-0 z-40 bg-black/45 transition-opacity duration-200",
@@ -846,8 +851,3 @@ function Sidebar({
 }
 
 export { Sidebar }
-export type {
-  AppSidebarFooterAccount as SidebarFooterAccount,
-  AppSidebarNavItem as SidebarItem,
-  AppSidebarProps as SidebarProps,
-}

package/packages/cli/vendor/src/components/layout/{app-header.tsx → workspace-header.tsx}

@@ -2,7 +2,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type AppHeaderProps = React.ComponentProps<"header"> & {
+export type WorkspaceHeaderProps = React.ComponentProps<"header"> & {
   left?: React.ReactNode
   center?: React.ReactNode
   right?: React.ReactNode
@@ -10,7 +10,7 @@ export type AppHeaderProps = React.ComponentProps<"header"> & {
   heightClassName?: string
 }
 
-function AppHeader({
+function WorkspaceHeader({
   className,
   left,
   center,
@@ -19,10 +19,10 @@ function AppHeader({
   heightClassName = "h-14",
   children,
   ...props
-}: AppHeaderProps) {
+}: WorkspaceHeaderProps) {
   return (
     <header
-      data-slot="app-header"
+      data-slot="workspace-header"
       data-sticky={sticky || undefined}
       className={cn(
         "z-30 flex shrink-0 items-center gap-3 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80",
@@ -43,4 +43,4 @@ function AppHeader({
   )
 }
 
-export { AppHeader }
+export { WorkspaceHeader }

package/packages/cli/vendor/src/components/layout/workspace-layout.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type WorkspaceLayoutProps = React.ComponentProps<"div"> & {
+  viewport?: boolean
+}
+
+function WorkspaceLayout({ viewport = true, className, ...props }: WorkspaceLayoutProps) {
+  return (
+    <div
+      data-slot="workspace-layout"
+      data-viewport={viewport || undefined}
+      className={cn(
+        "flex min-h-0 min-w-0 bg-[color:var(--aui-page-bg,var(--background))] text-foreground",
+        viewport && "h-dvh max-h-dvh w-full overflow-hidden overscroll-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export type WorkspaceContentProps = React.ComponentProps<"div">
+
+function WorkspaceContent({ className, ...props }: WorkspaceContentProps) {
+  return (
+    <div
+      data-slot="workspace-content"
+      className={cn("isolate flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", className)}
+      {...props}
+    />
+  )
+}
+
+export type WorkspaceMainProps = React.ComponentProps<"main"> & {
+  scrollable?: boolean
+  padded?: boolean
+}
+
+function WorkspaceMain({ scrollable = true, padded = false, className, ...props }: WorkspaceMainProps) {
+  return (
+    <main
+      data-slot="workspace-main"
+      data-scrollable={scrollable || undefined}
+      className={cn(
+        "min-h-0 min-w-0 flex-1",
+        scrollable && "overflow-x-hidden overflow-y-auto overscroll-contain [scrollbar-gutter:stable]",
+        padded && "p-4 md:p-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { WorkspaceContent, WorkspaceLayout, WorkspaceMain }

package/packages/cli/vendor/src/components/patterns/empty-state.tsx

@@ -1,8 +1,7 @@
 import * as React from "react"
-import { AlertCircleIcon, SearchXIcon } from "lucide-react"
 
+import { StateView, type StateViewProps } from "@/components/feedback/state-view"
 import { Button, buttonVariants } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
 
 export type EmptyStateTone = "empty" | "error" | "info"
 
@@ -13,85 +12,33 @@ export type EmptyStateAction = {
   variant?: React.ComponentProps<typeof Button>["variant"]
 }
 
-export type EmptyStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+export type EmptyStateProps = Omit<StateViewProps, "status" | "tone" | "actions" | "size" | "slot"> & {
   tone?: EmptyStateTone
-  title?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
   primaryAction?: EmptyStateAction
   secondaryAction?: EmptyStateAction
   compact?: boolean
 }
 
-function renderEmptyStateAction(action: EmptyStateAction, fallbackVariant: React.ComponentProps<typeof Button>["variant"]) {
-  if (action.href) {
-    return (
-      <a className={buttonVariants({ variant: action.variant ?? fallbackVariant })} href={action.href}>
-        {action.label}
-      </a>
-    )
-  }
-
-  return (
-    <Button type="button" variant={action.variant ?? fallbackVariant} onClick={action.onClick}>
-      {action.label}
-    </Button>
-  )
+function renderAction(action: EmptyStateAction, fallbackVariant: React.ComponentProps<typeof Button>["variant"]) {
+  if (action.href) return <a className={buttonVariants({ variant: action.variant ?? fallbackVariant })} href={action.href}>{action.label}</a>
+  return <Button type="button" variant={action.variant ?? fallbackVariant} onClick={action.onClick}>{action.label}</Button>
 }
 
-function defaultEmptyStateIcon(tone: EmptyStateTone) {
-  if (tone === "error") return <AlertCircleIcon data-icon="inline-start" />
-  return <SearchXIcon data-icon="inline-start" />
-}
+/** @deprecated Use StateView. */
+function EmptyState({ tone = "empty", primaryAction, secondaryAction, compact = false, ...props }: EmptyStateProps) {
+  const actions = primaryAction || secondaryAction ? (
+    <>
+      {secondaryAction ? renderAction(secondaryAction, "outline") : null}
+      {primaryAction ? renderAction(primaryAction, "default") : null}
+    </>
+  ) : undefined
 
-function EmptyState({
-  className,
-  tone = "empty",
-  title,
-  description,
-  icon,
-  primaryAction,
-  secondaryAction,
-  compact = false,
-  ...props
-}: EmptyStateProps) {
-  return (
-    <div
-      data-slot="empty-state"
-      data-tone={tone}
-      data-compact={compact || undefined}
-      role={tone === "error" ? "alert" : "status"}
-      className={cn(
-        "flex flex-col items-center justify-center rounded-xl border bg-card text-center text-card-foreground shadow-sm",
-        compact ? "gap-3 p-5" : "min-h-64 gap-4 p-8",
-        className
-      )}
-      {...props}
-    >
-      <div
-        data-slot="empty-state-icon"
-        className="flex size-12 items-center justify-center rounded-full border bg-muted text-muted-foreground"
-      >
-        {icon ?? defaultEmptyStateIcon(tone)}
-      </div>
-      {(title || description) && (
-        <div data-slot="empty-state-content" className="grid max-w-md gap-1">
-          {title && <h2 className="text-base font-semibold tracking-tight">{title}</h2>}
-          {description && <p className="text-sm leading-6 text-muted-foreground">{description}</p>}
-        </div>
-      )}
-      {(primaryAction || secondaryAction) && (
-        <div data-slot="empty-state-actions" className="flex flex-wrap items-center justify-center gap-2">
-          {secondaryAction ? renderEmptyStateAction(secondaryAction, "outline") : null}
-          {primaryAction ? renderEmptyStateAction(primaryAction, "default") : null}
-        </div>
-      )}
-    </div>
-  )
+  return <StateView status={tone} size={compact ? "compact" : "default"} actions={actions} slot="empty-state" {...props} />
 }
 
 export type ErrorStateProps = Omit<EmptyStateProps, "tone">
 
+/** @deprecated Use StateView with status="error". */
 function ErrorState(props: ErrorStateProps) {
   return <EmptyState tone="error" {...props} />
 }