tembro 2.0.1 → 2.0.3

package/packages/cli/vendor/src/components/calendar/calendar.tsx

@@ -269,7 +269,7 @@ function Calendar({
       data-slot="calendar"
       data-months={resolvedNumberOfMonths}
       className={cn(
-        "w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur",
+        "w-fit rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-popover p-3 text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))]",
         className
       )}
       {...props}
@@ -279,7 +279,7 @@ function Calendar({
           type="button"
           variant="outline"
           size="icon-sm"
-          className="rounded-full border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
+          className="rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
           aria-label={labels?.previousMonth ?? "Previous month"}
           onClick={() => setMonth(addMonths(currentMonth, -navigationStep))}
         >
@@ -293,7 +293,7 @@ function Calendar({
           type="button"
           variant="outline"
           size="icon-sm"
-          className="rounded-full border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
+          className="rounded-[var(--radius-md)] border-border/70 bg-background text-foreground shadow-none hover:border-border hover:bg-accent hover:text-accent-foreground"
           aria-label={labels?.nextMonth ?? "Next month"}
           onClick={() => setMonth(addMonths(currentMonth, navigationStep))}
         >
@@ -310,7 +310,7 @@ function Calendar({
         }
       >
         {monthDaysByMonth.map(({ month: visibleMonth, days }) => (
-          <div key={toDateKey(visibleMonth)} className="min-w-[16.5rem] rounded-[var(--radius-lg)] bg-transparent p-1">
+          <div key={toDateKey(visibleMonth)} className="min-w-[16.5rem] rounded-[var(--radius-md)] bg-transparent p-1">
             {shouldShowMonthHeaders && (
               <div className="mb-2 text-center text-sm font-semibold capitalize tracking-tight text-foreground">
                 {getMonthLabel(visibleMonth, locale)}
@@ -354,7 +354,7 @@ function Calendar({
                     data-in-range={inRange || undefined}
                     data-disabled-reason={disabledReason}
                     className={cn(
-                      "flex h-9 items-center justify-center rounded-[var(--radius-md)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30",
+                      "flex h-9 items-center justify-center rounded-[var(--radius-sm)] border border-transparent text-sm font-medium outline-none transition-[background-color,color,border-color,box-shadow,transform] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-30",
                       outside && "text-muted-foreground/34",
                       dateKey === todayKey && "border-border/70 bg-muted/60 text-foreground",
                       inRange && "bg-primary/10 text-foreground",

package/packages/cli/vendor/src/components/inputs/clearable-input.tsx

@@ -96,7 +96,7 @@ const ClearableInput = React.forwardRef<HTMLInputElement, ClearableInputProps>(
                 type="button"
                 data-slot="clearable-input-clear"
                 aria-label={clearLabel}
-                className="inline-flex size-7 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                className="inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)] border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                 onClick={handleClearClick}
                 onMouseDown={handleClearMouseDown}
                 onDoubleClick={handleClearMouseDown}

package/packages/cli/vendor/src/components/inputs/input-chrome.tsx

@@ -22,7 +22,7 @@ function InputChrome({
     <div
       data-slot="input-chrome"
       className={cn(
-        "flex h-10 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)]",
+        "flex h-11 w-full min-w-0 items-center rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] shadow-[var(--aui-control-shadow,none)] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-within:border-[color:var(--ring)] focus-within:shadow-[var(--aui-control-shadow,none),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)]",
         className
       )}
       {...props}

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

@@ -1,5 +1,7 @@
 import * as React from "react"
+import { MenuIcon, XIcon } from "lucide-react"
 
+import { useIsMobile } from "@/hooks/use-is-mobile"
 import { Tooltip } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 
@@ -40,11 +42,28 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
   secondaryActions?: AppSidebarNavItem[]
   footerSecondary?: React.ReactNode
   tooltipOnCollapsed?: boolean
+  responsive?: boolean
+  mobileBreakpoint?: number
+  mobileOpen?: boolean
+  defaultMobileOpen?: boolean
+  onMobileOpenChange?: (open: boolean) => void
+  mobileTitle?: React.ReactNode
+  mobileDescription?: React.ReactNode
+  mobileToggleLabel?: string
+  mobileToggleIcon?: React.ReactNode
+  showMobileToggle?: boolean
+  closeOnSelect?: boolean
+  mobileToggleClassName?: string
+  mobilePanelClassName?: string
+  mobileOverlayClassName?: 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
+
 function hasVisibleSidebarChildren(item: AppSidebarNavItem) {
   return item.items?.some((child) => !child.hidden) ?? false
 }
@@ -54,6 +73,11 @@ function isSidebarItemActive(item: AppSidebarNavItem): boolean {
   return item.items?.some((child) => isSidebarItemActive(child)) ?? false
 }
 
+function triggerSidebarItem(item: AppSidebarNavItem, onItemSelect?: (item: AppSidebarNavItem) => void) {
+  item.onSelect?.()
+  onItemSelect?.(item)
+}
+
 function SidebarLeafItem({
   item,
   collapsed,
@@ -111,8 +135,7 @@ function SidebarLeafItem({
                 event.preventDefault()
                 return
               }
-              item.onSelect?.()
-              onItemSelect?.(item)
+              triggerSidebarItem(item, onItemSelect)
             },
             children: content,
           })}
@@ -129,8 +152,7 @@ function SidebarLeafItem({
             event.preventDefault()
             return
           }
-          item.onSelect?.()
-          onItemSelect?.(item)
+          triggerSidebarItem(item, onItemSelect)
         }}
       >
         {content}
@@ -148,8 +170,7 @@ function SidebarLeafItem({
           if (item.disabled) return
           const href = item.href
           if (!href) return
-          item.onSelect?.()
-          onItemSelect?.(item)
+          triggerSidebarItem(item, onItemSelect)
           if (href.startsWith("http")) {
             window.open(href, "_blank", "noopener,noreferrer")
             return
@@ -168,8 +189,8 @@ function SidebarLeafItem({
       disabled={item.disabled}
       {...commonProps}
       onClick={() => {
-        item.onSelect?.()
-        onItemSelect?.(item)
+        if (item.disabled) return
+        triggerSidebarItem(item, onItemSelect)
       }}
     >
       {content}
@@ -250,7 +271,14 @@ function SidebarTree({
             ) : null}
             {!collapsed && <span className="min-w-0 flex-1 truncate">{item.label}</span>}
             {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
-            {!collapsed && <span data-slot="app-sidebar-group-chevron" className="ml-auto text-xs text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90">›</span>}
+            {!collapsed && (
+              <span
+                data-slot="app-sidebar-group-chevron"
+                className="ml-auto text-xs text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90"
+              >
+                ›
+              </span>
+            )}
           </summary>
           <div data-slot="app-sidebar-group-content" className={cn("mt-1 space-y-1", !collapsed && "pl-3")}>
             <SidebarTree
@@ -289,8 +317,7 @@ function SidebarActionButton({
       disabled={item.disabled}
       onClick={() => {
         if (item.disabled) return
-        item.onSelect?.()
-        onItemSelect?.(item)
+        triggerSidebarItem(item, onItemSelect)
       }}
     >
       {item.icon ? <span className="shrink-0">{item.icon}</span> : null}
@@ -311,9 +338,11 @@ function SidebarActionButton({
 function SidebarFooterAccount({
   account,
   collapsed,
+  onAfterSelect,
 }: {
   account: AppSidebarFooterAccount
   collapsed: boolean
+  onAfterSelect?: () => void
 }) {
   const body = (
     <button
@@ -325,6 +354,7 @@ function SidebarFooterAccount({
       )}
       onClick={() => {
         account.onSelect?.()
+        onAfterSelect?.()
         if (!account.href) return
         if (account.href.startsWith("http")) {
           window.open(account.href, "_blank", "noopener,noreferrer")
@@ -365,7 +395,7 @@ function SidebarFooterAccount({
   )
 }
 
-function AppSidebar({
+function SidebarSurface({
   className,
   header,
   footer,
@@ -376,25 +406,70 @@ function AppSidebar({
   footerAccount,
   secondaryActions = [],
   footerSecondary,
-  tooltipOnCollapsed = true,
+  tooltipOnCollapsed,
   onItemSelect,
   renderItem,
   renderLink,
   children,
+  mobile,
+  mobileTitle,
+  mobileDescription,
+  onRequestClose,
+  closeOnSelect = true,
   ...props
-}: AppSidebarProps) {
+}: Omit<AppSidebarProps, "responsive" | "mobileBreakpoint" | "mobileOpen" | "defaultMobileOpen" | "onMobileOpenChange" | "mobileToggleLabel" | "mobileToggleIcon" | "showMobileToggle" | "mobileToggleClassName" | "mobilePanelClassName" | "mobileOverlayClassName" | "renderMobileToggle"> & {
+  mobile?: boolean
+  onRequestClose?: () => void
+}) {
   const visibleItems = items.filter((item) => !item.hidden)
   const visibleRailItems = railItems.filter((item) => !item.hidden)
   const visibleSecondaryActions = secondaryActions.filter((item) => !item.hidden)
 
+  const handleSelect = React.useCallback((item: AppSidebarNavItem) => {
+    onItemSelect?.(item)
+    if (mobile && closeOnSelect) onRequestClose?.()
+  }, [closeOnSelect, mobile, onItemSelect, onRequestClose])
+
+  const showMobileHeader = mobile && (mobileTitle || mobileDescription || onRequestClose)
+
   return (
     <aside
       data-slot="app-sidebar"
       data-collapsed={collapsed || undefined}
+      data-mobile={mobile || undefined}
       className={cn("flex h-full min-h-0 flex-col overflow-hidden", className)}
       {...props}
     >
-      {header && <div data-slot="app-sidebar-header" className="shrink-0 border-b p-3">{header}</div>}
+      {(header || showMobileHeader) && (
+        <div data-slot="app-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}
+              {showMobileHeader ? (
+                <div className={cn(header && "mt-3")}>
+                  {mobileTitle ? (
+                    <p className="text-sm font-semibold text-foreground">{mobileTitle}</p>
+                  ) : null}
+                  {mobileDescription ? (
+                    <p className="mt-1 text-xs leading-5 text-muted-foreground">{mobileDescription}</p>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+            {mobile && onRequestClose ? (
+              <button
+                type="button"
+                aria-label="Close navigation"
+                data-slot="app-sidebar-mobile-close"
+                className="inline-flex size-9 shrink-0 items-center justify-center rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] text-[color:var(--aui-page-foreground)] transition hover:bg-[color:var(--aui-control-bg)]"
+                onClick={onRequestClose}
+              >
+                <XIcon className="size-4" />
+              </button>
+            ) : null}
+          </div>
+        </div>
+      )}
 
       <nav data-slot="app-sidebar-nav" className="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
         {children ??
@@ -417,7 +492,7 @@ function AppSidebar({
             items={visibleItems}
             collapsed={collapsed}
             depth={0}
-            onItemSelect={onItemSelect}
+            onItemSelect={handleSelect}
             renderLink={renderLink}
           />
         )}
@@ -434,7 +509,7 @@ function AppSidebar({
                       key={item.key}
                       item={item}
                       collapsed
-                      onItemSelect={onItemSelect}
+                      onItemSelect={handleSelect}
                     />
                   ))}
                 </div>
@@ -444,7 +519,9 @@ function AppSidebar({
           ) : null}
           {!collapsed && footerAccount ? (
             <div data-slot="app-sidebar-account-wrap" className="mb-3">
-              <SidebarFooterAccount account={footerAccount} collapsed={false} />
+              <SidebarFooterAccount account={footerAccount} collapsed={false} onAfterSelect={() => {
+                if (mobile && closeOnSelect) onRequestClose?.()
+              }} />
             </div>
           ) : null}
           {!collapsed && visibleSecondaryActions.length > 0 ? (
@@ -454,7 +531,7 @@ function AppSidebar({
                   key={item.key}
                   item={item}
                   collapsed={false}
-                  onItemSelect={onItemSelect}
+                  onItemSelect={handleSelect}
                 />
               ))}
             </div>
@@ -466,7 +543,13 @@ function AppSidebar({
           ) : null}
           {collapsed && footerAccount ? (
             <div data-slot="app-sidebar-account-wrap">
-              <SidebarFooterAccount account={footerAccount} collapsed />
+              <SidebarFooterAccount
+                account={footerAccount}
+                collapsed
+                onAfterSelect={() => {
+                  if (mobile && closeOnSelect) onRequestClose?.()
+                }}
+              />
             </div>
           ) : null}
           {!collapsed && footer}
@@ -475,7 +558,162 @@ function AppSidebar({
     </aside>
   )
 }
-
+
+function AppSidebar({
+  className,
+  header,
+  footer,
+  items = [],
+  collapsed = false,
+  collapsedRail,
+  railItems = [],
+  footerAccount,
+  secondaryActions = [],
+  footerSecondary,
+  tooltipOnCollapsed = true,
+  responsive = true,
+  mobileBreakpoint = DEFAULT_APP_SIDEBAR_BREAKPOINT,
+  mobileOpen: mobileOpenProp,
+  defaultMobileOpen = false,
+  onMobileOpenChange,
+  mobileTitle,
+  mobileDescription,
+  mobileToggleLabel = "Open navigation",
+  mobileToggleIcon,
+  showMobileToggle = true,
+  closeOnSelect = true,
+  mobileToggleClassName,
+  mobilePanelClassName,
+  mobileOverlayClassName,
+  renderMobileToggle,
+  onItemSelect,
+  renderItem,
+  renderLink,
+  children,
+  ...props
+}: AppSidebarProps) {
+  const isMobile = responsive ? useIsMobile(mobileBreakpoint) : false
+  const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = React.useState(defaultMobileOpen)
+  const mobileOpen = mobileOpenProp ?? uncontrolledMobileOpen
+
+  const setMobileOpen = React.useCallback((nextOpen: boolean) => {
+    if (mobileOpenProp == null) {
+      setUncontrolledMobileOpen(nextOpen)
+    }
+    onMobileOpenChange?.(nextOpen)
+  }, [mobileOpenProp, onMobileOpenChange])
+
+  React.useEffect(() => {
+    if (!isMobile && mobileOpen) {
+      setMobileOpen(false)
+    }
+  }, [isMobile, mobileOpen, setMobileOpen])
+
+  React.useEffect(() => {
+    if (!isMobile || !mobileOpen) return
+
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setMobileOpen(false)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [isMobile, mobileOpen, setMobileOpen])
+
+  const baseProps = {
+    className,
+    header,
+    footer,
+    items,
+    collapsed,
+    collapsedRail,
+    railItems,
+    footerAccount,
+    secondaryActions,
+    footerSecondary,
+    tooltipOnCollapsed,
+    closeOnSelect,
+    onItemSelect,
+    renderItem,
+    renderLink,
+    children,
+    ...props,
+  }
+
+  if (!responsive || !isMobile) {
+    return <SidebarSurface {...baseProps} />
+  }
+
+  const defaultTrigger = (
+    <button
+      type="button"
+      aria-label={mobileOpen ? "Close navigation" : mobileToggleLabel}
+      data-slot="app-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)] bg-[color:var(--aui-page-bg)] px-3 text-sm font-medium text-[color:var(--aui-page-foreground)] shadow-sm transition hover:bg-[color:var(--aui-page-bg-alt)]",
+        mobileToggleClassName
+      )}
+      onClick={() => setMobileOpen(!mobileOpen)}
+    >
+      <span className="inline-flex size-8 items-center justify-center rounded-lg bg-[color:var(--aui-page-bg-alt)]">
+        {mobileToggleIcon ?? <MenuIcon className="size-4" />}
+      </span>
+      <span>{mobileOpen ? "Close navigation" : mobileToggleLabel}</span>
+    </button>
+  )
+
+  return (
+    <>
+      {showMobileToggle
+        ? renderMobileToggle
+          ? renderMobileToggle({ open: mobileOpen, setOpen: setMobileOpen })
+          : defaultTrigger
+        : null}
+      <div data-slot="app-sidebar-mobile-root" className="relative z-40">
+        <button
+          type="button"
+          aria-label="Dismiss navigation"
+          data-slot="app-sidebar-mobile-overlay"
+          data-state={mobileOpen ? "open" : "closed"}
+          className={cn(
+            "fixed inset-0 z-40 bg-black/45 transition-opacity duration-200",
+            mobileOpen ? "opacity-100" : "pointer-events-none opacity-0",
+            mobileOverlayClassName
+          )}
+          onClick={() => setMobileOpen(false)}
+        />
+        <SidebarSurface
+          {...baseProps}
+          mobile
+          collapsed={false}
+          mobileTitle={mobileTitle}
+          mobileDescription={mobileDescription}
+          onRequestClose={() => setMobileOpen(false)}
+          data-state={mobileOpen ? "open" : "closed"}
+          role="dialog"
+          aria-modal="true"
+          aria-label={typeof mobileTitle === "string" ? mobileTitle : "Navigation"}
+          className={cn(
+            "fixed inset-y-0 left-0 z-50 w-[min(88vw,22rem)] max-w-[22rem] border-r border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] shadow-2xl transition-transform duration-200 ease-out",
+            mobileOpen ? "translate-x-0" : "-translate-x-full",
+            mobilePanelClassName,
+            className
+          )}
+        />
+      </div>
+    </>
+  )
+}
+
 /**
  * Canonical sidebar surface for new usage.
  */

package/packages/cli/vendor/src/components/ui/button/index.tsx

@@ -5,11 +5,11 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "border-[color:color-mix(in_oklch,var(--primary),black_10%)] bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,0_10px_24px_rgba(16,185,129,0.18))] hover:border-[color:color-mix(in_oklch,var(--primary),black_18%)] hover:bg-[color:color-mix(in_oklch,var(--primary),white_8%)]",
+        default: "border-[color:color-mix(in_oklch,var(--primary),black_10%)] bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,0_10px_24px_rgba(16,185,129,0.18))] hover:border-[color:color-mix(in_oklch,var(--primary),black_18%)] hover:bg-[color:color-mix(in_oklch,var(--primary),white_8%)] hover:text-primary-foreground",
         outline: "bg-[color:var(--aui-control-surface,var(--background))] text-foreground shadow-none",
         secondary: "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_6%)] bg-secondary text-secondary-foreground shadow-none",
         ghost: "border-transparent bg-transparent shadow-none",

package/packages/cli/vendor/src/components/ui/input/primitive.tsx

@@ -13,7 +13,7 @@ function InputPrimitive({ className, type, ...props }: InputPrimitiveProps) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-11 w-full min-w-0 rounded-[var(--aui-control-radius,var(--radius-lg))] border border-[color:color-mix(in_oklch,var(--aui-control-border-strong,var(--input)),var(--foreground)_6%)] bg-[color:var(--aui-control-surface,var(--background))] px-4 py-2.5 text-sm font-medium text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/72 hover:border-[color:color-mix(in_oklch,var(--aui-control-hover-border,var(--ring)),var(--foreground)_10%)] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
+        "h-11 w-full min-w-0 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:color-mix(in_oklch,var(--aui-control-border-strong,var(--input)),var(--foreground)_6%)] bg-[color:var(--aui-control-surface,var(--background))] px-3.5 py-2.5 text-sm font-normal text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/74 hover:border-[color:color-mix(in_oklch,var(--aui-control-hover-border,var(--ring)),var(--foreground)_10%)] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
         className
       )}
       {...props}

package/packages/cli/vendor/src/components/ui/select/index.tsx

@@ -54,7 +54,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-10 data-[size=lg]:h-11 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-full min-w-0 items-center justify-between gap-2 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--input))] bg-[color:var(--aui-control-surface,var(--background))] pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] hover:shadow-[var(--aui-control-shadow-hover,0_2px_6px_rgba(15,23,42,0.06))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-danger-ring,var(--destructive)),0_0_0_4px_var(--aui-danger-ring-soft,transparent)] data-placeholder:text-muted-foreground/74 data-[size=default]:h-11 data-[size=lg]:h-12 data-[size=sm]:h-9 data-[size=sm]:rounded-[var(--radius-sm)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -166,7 +166,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
-        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1.5 [&_svg:not([class*='size-'])]:size-4",
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -184,7 +184,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
-        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1.5 [&_svg:not([class*='size-'])]:size-4",
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +1,4 @@
-export const PACKAGE_LATEST_VERSION = "2.0.1"
-export const PACKAGE_LATEST_RELEASE_DATE = "July 7, 2026"
+export const PACKAGE_LATEST_VERSION = "2.0.3"
+export const PACKAGE_LATEST_RELEASE_DATE = "July 8, 2026"
 export const PACKAGE_DEPENDENCY_RANGE = `^${PACKAGE_LATEST_VERSION}`
 

package/packages/cli/vendor/src/showcase/premium/app-shell/showcase.tsx

@@ -69,9 +69,13 @@ export function AppShellShowcase({ mode }: ComponentDemoProps) {
 
         <div className="grid min-h-[420px] lg:grid-cols-[250px_minmax(0,1fr)_260px]">
           <AppSidebar
-            className={collapsed ? "hidden lg:block" : ""}
+            responsive
+            mobileTitle="Workspace navigation"
+            mobileDescription="Open the shell menu first, then move through app routes without squeezing the main content."
             header={<div className="px-3 py-2 text-sm font-semibold">AZA Studio</div>}
             footer={<div className="aui-text-muted px-3 py-2 text-xs">Shell footer</div>}
+            className={collapsed ? "lg:w-[92px]" : ""}
+            collapsed={collapsed}
           >
             <SidebarNav items={navItems} />
           </AppSidebar>

package/packages/cli/vendor/src/showcase/premium/app-sidebar/showcase.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import { BarChart3Icon, CreditCardIcon, FolderIcon, HomeIcon, SettingsIcon } from "lucide-react"
 
 import { AppSidebar, Badge, Button } from "@/index"
+import { cn } from "@/lib/utils"
 
 import type { ComponentDemoProps } from "../types"
 
@@ -18,6 +19,7 @@ const panelClass = "rounded-[22px] border border-[color:var(--aui-divider)] bg-[
 export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
   const [activeKey, setActiveKey] = React.useState("overview")
   const [collapsed, setCollapsed] = React.useState(mode === "playground")
+  const [previewSurface, setPreviewSurface] = React.useState<"desktop" | "mobile">("desktop")
 
   const items = React.useMemo(
     () =>
@@ -30,6 +32,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
   )
 
   const activeItem = navItems.find((item) => item.key === activeKey)
+  const mobilePreview = previewSurface === "mobile"
 
   return (
     <div className="space-y-5">
@@ -45,7 +48,7 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
           <div className="flex flex-wrap gap-2">
             <Badge variant="outline" className="rounded-full">Header slot</Badge>
             <Badge variant="outline" className="rounded-full">Badges</Badge>
-            <Badge variant="outline" className="rounded-full">Collapsed rail</Badge>
+            <Badge variant="outline" className="rounded-full">Mobile drawer</Badge>
           </div>
         </div>
       </section>
@@ -58,14 +61,25 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
           <Button size="sm" variant="outline" onClick={() => setActiveKey("reports")}>
             Jump to reports
           </Button>
+          <Button size="sm" variant={mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("mobile")}>
+            Mobile drawer
+          </Button>
+          <Button size="sm" variant={!mobilePreview ? "default" : "outline"} onClick={() => setPreviewSurface("desktop")}>
+            Desktop rail
+          </Button>
         </div>
       ) : null}
 
       <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
-        <section className={panelClass}>
+        <section className={cn(panelClass, mobilePreview && "mx-auto w-full max-w-[420px]")}>
           <AppSidebar
             collapsed={collapsed}
             items={items}
+            responsive
+            mobileBreakpoint={mobilePreview ? 10000 : 0}
+            mobileTitle="Workspace navigation"
+            mobileDescription="Open routes, check badges, and move between sections from one compact drawer."
+            mobileToggleLabel="Open workspace menu"
             header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
             footer={<div className="aui-text-muted px-3 py-2 text-xs">Starter plan • 3 editors</div>}
             className="min-h-[440px] rounded-[22px] border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"
@@ -81,8 +95,8 @@ export function AppSidebarShowcase({ mode }: ComponentDemoProps) {
 
           <div className="mt-6 grid gap-3 sm:grid-cols-3">
             <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
-              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Mode</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{collapsed ? "Collapsed" : "Expanded"}</p>
+              <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Shell</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{mobilePreview ? "Mobile drawer" : (collapsed ? "Collapsed" : "Expanded")}</p>
             </div>
             <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3">
               <p className="text-[11px] font-semibold uppercase tracking-[0.24em] aui-text-muted">Visible items</p>