tembro 3.1.1 → 3.1.5

package/packages/cli/vendor/src/components/inputs/signature-pad.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import * as React from "react"
+import { RotateCcwIcon, Trash2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type SignaturePoint = { x: number; y: number; pressure: number }
+export type SignatureStroke = SignaturePoint[]
+
+export type SignaturePadHandle = {
+  clear: () => void
+  undo: () => void
+  toDataURL: (type?: string, quality?: number) => string
+}
+
+export type SignaturePadProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
+  value?: SignatureStroke[]
+  defaultValue?: SignatureStroke[]
+  onValueChange?: (strokes: SignatureStroke[]) => void
+  onStrokeEnd?: (stroke: SignatureStroke) => void
+  width?: number
+  height?: number
+  lineWidth?: number
+  color?: string
+  backgroundColor?: string
+  disabled?: boolean
+  labels?: {
+    canvas?: string
+    undo?: string
+    clear?: string
+  }
+}
+
+function drawSignature(
+  canvas: HTMLCanvasElement,
+  strokes: SignatureStroke[],
+  options: { color: string; lineWidth: number; backgroundColor: string }
+) {
+  const context = canvas.getContext("2d")
+  if (!context) return
+
+  context.clearRect(0, 0, canvas.width, canvas.height)
+  context.fillStyle = options.backgroundColor
+  context.fillRect(0, 0, canvas.width, canvas.height)
+  context.strokeStyle = options.color
+  context.fillStyle = options.color
+  context.lineCap = "round"
+  context.lineJoin = "round"
+
+  for (const stroke of strokes) {
+    if (stroke.length === 0) continue
+    if (stroke.length === 1) {
+      const point = stroke[0]
+      context.beginPath()
+      context.arc(point.x * canvas.width, point.y * canvas.height, options.lineWidth / 2, 0, Math.PI * 2)
+      context.fill()
+      continue
+    }
+
+    context.beginPath()
+    stroke.forEach((point, index) => {
+      const x = point.x * canvas.width
+      const y = point.y * canvas.height
+      if (index === 0) context.moveTo(x, y)
+      else context.lineTo(x, y)
+    })
+    context.lineWidth = options.lineWidth
+    context.stroke()
+  }
+}
+
+const SignaturePad = React.forwardRef<SignaturePadHandle, SignaturePadProps>(function SignaturePad(
+  {
+    value,
+    defaultValue = [],
+    onValueChange,
+    onStrokeEnd,
+    width = 640,
+    height = 240,
+    lineWidth = 2.5,
+    color = "#111827",
+    backgroundColor = "#ffffff",
+    disabled = false,
+    labels,
+    className,
+    ...props
+  },
+  ref
+) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const activeStrokeRef = React.useRef<{ base: SignatureStroke[]; stroke: SignatureStroke } | null>(null)
+  const [internalValue, setInternalValue] = React.useState<SignatureStroke[]>(defaultValue)
+  const strokes = value ?? internalValue
+
+  const updateValue = React.useCallback(
+    (nextValue: SignatureStroke[]) => {
+      if (value === undefined) setInternalValue(nextValue)
+      onValueChange?.(nextValue)
+    },
+    [onValueChange, value]
+  )
+
+  const clear = React.useCallback(() => updateValue([]), [updateValue])
+  const undo = React.useCallback(() => updateValue(strokes.slice(0, -1)), [strokes, updateValue])
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      clear,
+      undo,
+      toDataURL: (type = "image/png", quality) => canvasRef.current?.toDataURL(type, quality) ?? "",
+    }),
+    [clear, undo]
+  )
+
+  React.useEffect(() => {
+    const canvas = canvasRef.current
+    if (canvas) drawSignature(canvas, strokes, { color, lineWidth, backgroundColor })
+  }, [backgroundColor, color, height, lineWidth, strokes, width])
+
+  const getPoint = (event: React.PointerEvent<HTMLCanvasElement>): SignaturePoint => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    return {
+      x: Math.min(1, Math.max(0, (event.clientX - rect.left) / Math.max(rect.width, 1))),
+      y: Math.min(1, Math.max(0, (event.clientY - rect.top) / Math.max(rect.height, 1))),
+      pressure: event.pressure || 0.5,
+    }
+  }
+
+  return (
+    <div data-slot="signature-pad" className={cn("grid gap-2", className)} {...props}>
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        role="img"
+        aria-label={labels?.canvas ?? "Signature pad"}
+        data-disabled={disabled || undefined}
+        className="w-full touch-none rounded-md border bg-white shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60"
+        style={{ aspectRatio: `${width} / ${height}` }}
+        tabIndex={disabled ? -1 : 0}
+        onPointerDown={(event) => {
+          if (disabled) return
+          const stroke = [getPoint(event)]
+          activeStrokeRef.current = { base: strokes, stroke }
+          event.currentTarget.setPointerCapture(event.pointerId)
+          updateValue([...strokes, stroke])
+        }}
+        onPointerMove={(event) => {
+          const active = activeStrokeRef.current
+          if (!active || disabled || !event.currentTarget.hasPointerCapture(event.pointerId)) return
+          const nextStroke = [...active.stroke, getPoint(event)]
+          activeStrokeRef.current = { ...active, stroke: nextStroke }
+          updateValue([...active.base, nextStroke])
+        }}
+        onPointerUp={(event) => {
+          const active = activeStrokeRef.current
+          if (!active) return
+          activeStrokeRef.current = null
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId)
+          onStrokeEnd?.(active.stroke)
+        }}
+        onPointerCancel={() => {
+          activeStrokeRef.current = null
+        }}
+      />
+      <div className="flex justify-end gap-2">
+        <button
+          type="button"
+          disabled={disabled || strokes.length === 0}
+          className="inline-flex h-9 items-center gap-2 rounded-md border bg-background px-3 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+          onClick={undo}
+        >
+          <RotateCcwIcon className="size-4" aria-hidden="true" />
+          {labels?.undo ?? "Undo"}
+        </button>
+        <button
+          type="button"
+          disabled={disabled || strokes.length === 0}
+          className="inline-flex h-9 items-center gap-2 rounded-md border bg-background px-3 text-sm font-medium outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+          onClick={clear}
+        >
+          <Trash2Icon className="size-4" aria-hidden="true" />
+          {labels?.clear ?? "Clear"}
+        </button>
+      </div>
+    </div>
+  )
+})
+
+export { SignaturePad, drawSignature }

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

@@ -4,8 +4,9 @@ import * as React from "react"
 import { ChevronRightIcon, MenuIcon, XIcon } from "lucide-react"
 
 import { useIsMobile } from "@/hooks/use-is-mobile"
-import { Tooltip } from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
+import { Tooltip } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { ControllableDetails } from "./controllable-details"
 
 type AppSidebarNavItem = {
   key: string
@@ -17,8 +18,10 @@ type AppSidebarNavItem = {
   disabled?: boolean
   badge?: React.ReactNode
   hidden?: boolean
-  sectionLabel?: React.ReactNode
-  defaultExpanded?: boolean
+  sectionLabel?: React.ReactNode
+  defaultExpanded?: boolean
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
   current?: React.AriaAttributes["aria-current"]
   tooltip?: React.ReactNode
   onSelect?: () => void
@@ -33,7 +36,7 @@ type AppSidebarFooterAccount = {
   onSelect?: () => void
 }
 
-type AppSidebarProps = React.ComponentProps<"aside"> & {
+export type AppSidebarProps = React.ComponentProps<"aside"> & {
   header?: React.ReactNode
   footer?: React.ReactNode
   items?: AppSidebarNavItem[]
@@ -45,16 +48,21 @@ type AppSidebarProps = React.ComponentProps<"aside"> & {
   railItems?: AppSidebarNavItem[]
   footerAccount?: AppSidebarFooterAccount
   secondaryActions?: AppSidebarNavItem[]
-  footerSecondary?: React.ReactNode
-  tooltipOnCollapsed?: boolean
-  responsive?: boolean
+  footerSecondary?: React.ReactNode
+  tooltipOnCollapsed?: boolean
+  showSectionLabels?: boolean
+  itemSize?: "sm" | "md" | "lg"
+  activeIndicator?: "none" | "bar" | "pill"
+  navigationLabel?: string
+  responsive?: boolean
   mobileBreakpoint?: number
   mobileOpen?: boolean
   defaultMobileOpen?: boolean
   onMobileOpenChange?: (open: boolean) => void
   mobileTitle?: React.ReactNode
-  mobileDescription?: React.ReactNode
-  mobileToggleLabel?: string
+  mobileDescription?: React.ReactNode
+  mobileToggleLabel?: string
+  mobileCloseLabel?: string
   mobileToggleIcon?: React.ReactNode
   showMobileToggle?: boolean
   closeOnSelect?: boolean
@@ -81,10 +89,10 @@ function getSidebarInteractiveClassName({
   disabled?: boolean
 }) {
   return cn(
-    "border border-transparent bg-transparent text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)] hover:border-[color:var(--aui-sidebar-item-active-border)] hover:bg-[color:var(--aui-sidebar-item-hover-bg)] hover:text-[color:var(--sidebar-foreground)] focus-visible:border-[color:var(--sidebar-ring)] focus-visible:bg-[color:var(--aui-sidebar-item-hover-bg)] focus-visible:text-[color:var(--sidebar-foreground)] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--sidebar-ring),transparent_82%)]",
+    "border border-transparent bg-transparent text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_6%)] hover:border-[color:var(--aui-sidebar-item-active-border)] hover:bg-[color:var(--aui-sidebar-item-hover-bg)] hover:text-[color:var(--sidebar-foreground)] focus-visible:border-[color:var(--sidebar-ring)] focus-visible:bg-[color:var(--aui-sidebar-item-hover-bg)] focus-visible:text-[color:var(--sidebar-foreground)] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--sidebar-ring),transparent_82%)]",
     active &&
       "border-[color:var(--aui-sidebar-item-active-border)] bg-[color:var(--aui-sidebar-item-active-bg)] text-[color:var(--aui-sidebar-item-active-fg)] shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_10px_24px_color-mix(in_oklch,var(--sidebar-primary),transparent_88%)]",
-    disabled && "hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_18%)]"
+    disabled && "hover:border-transparent hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--sidebar-foreground),transparent_6%)]"
   )
 }
 
@@ -102,32 +110,38 @@ function triggerSidebarItem(item: AppSidebarNavItem, onItemSelect?: (item: AppSi
   onItemSelect?.(item)
 }
 
-function SidebarLeafItem({
-  item,
-  collapsed,
-  depth,
-  onItemSelect,
-  renderLink,
-}: {
-  item: AppSidebarNavItem
-  collapsed: boolean
-  depth: number
-  onItemSelect?: (item: AppSidebarNavItem) => void
-  renderLink?: AppSidebarProps["renderLink"]
-}) {
+function SidebarLeafItem({
+  item,
+  collapsed,
+  depth,
+  itemSize,
+  activeIndicator,
+  onItemSelect,
+  renderLink,
+}: {
+  item: AppSidebarNavItem
+  collapsed: boolean
+  depth: number
+  itemSize: NonNullable<AppSidebarProps["itemSize"]>
+  activeIndicator: NonNullable<AppSidebarProps["activeIndicator"]>
+  onItemSelect?: (item: AppSidebarNavItem) => void
+  renderLink?: AppSidebarProps["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-active": item.active || undefined,
-    "data-disabled": item.disabled || undefined,
-    "data-depth": String(depth),
-    className: cn(
-      "flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
-      getSidebarInteractiveClassName({ active: item.active, disabled: item.disabled }),
-      collapsed && "justify-center px-2"
-    ),
+    "data-active": item.active || undefined,
+    "data-disabled": item.disabled || undefined,
+    "data-depth": String(depth),
+    "data-size": itemSize,
+    "data-active-indicator": activeIndicator,
+    className: cn(
+      "flex items-center gap-2 border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      getSidebarInteractiveClassName({ active: item.active, disabled: item.disabled }),
+      collapsed && "justify-center px-2"
+    ),
   }
 
   const content = (
@@ -223,25 +237,31 @@ function SidebarLeafItem({
   )
 }
 
-function SidebarTree({
-  items,
-  collapsed,
-  depth,
-  onItemSelect,
-  renderLink,
-}: {
-  items: AppSidebarNavItem[]
-  collapsed: boolean
-  depth: number
-  onItemSelect?: (item: AppSidebarNavItem) => void
-  renderLink?: AppSidebarProps["renderLink"]
-}) {
+function SidebarTree({
+  items,
+  collapsed,
+  depth,
+  showSectionLabels,
+  itemSize,
+  activeIndicator,
+  onItemSelect,
+  renderLink,
+}: {
+  items: AppSidebarNavItem[]
+  collapsed: boolean
+  depth: number
+  showSectionLabels: boolean
+  itemSize: NonNullable<AppSidebarProps["itemSize"]>
+  activeIndicator: NonNullable<AppSidebarProps["activeIndicator"]>
+  onItemSelect?: (item: AppSidebarNavItem) => void
+  renderLink?: AppSidebarProps["renderLink"]
+}) {
   return items.map((item) => {
     if (item.hidden) return null
 
     const hasChildren = hasVisibleSidebarChildren(item)
     const active = isSidebarItemActive(item)
-    const showSectionLabel = !collapsed && depth === 0 && item.sectionLabel
+    const showSectionLabel = showSectionLabels && !collapsed && depth === 0 && item.sectionLabel
 
     if (!hasChildren) {
       return (
@@ -249,18 +269,20 @@ function SidebarTree({
           {showSectionLabel ? (
             <div
               data-slot="app-sidebar-group-label"
-              className="px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
+              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>
           ) : null}
-          <SidebarLeafItem
-            item={item}
-            collapsed={collapsed}
-            depth={depth}
-            onItemSelect={onItemSelect}
-            renderLink={renderLink}
-          />
+          <SidebarLeafItem
+            item={item}
+            collapsed={collapsed}
+            depth={depth}
+            itemSize={itemSize}
+            activeIndicator={activeIndicator}
+            onItemSelect={onItemSelect}
+            renderLink={renderLink}
+          />
         </React.Fragment>
       )
     }
@@ -272,19 +294,28 @@ function SidebarTree({
         {showSectionLabel && (
           <div
             data-slot="app-sidebar-group-label"
-            className="px-2.5 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground first:pt-0"
+            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>
         )}
-        <details data-slot="app-sidebar-group-details" open={defaultExpanded} className="group/app-sidebar-details">
-          <summary
-            data-slot="app-sidebar-group-trigger"
-            className={cn(
-              "flex min-h-9 list-none items-center gap-2 rounded-lg border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]",
-              getSidebarInteractiveClassName({ active }),
-              collapsed ? "justify-center px-2" : "px-2.5"
-            )}
+        <ControllableDetails
+          data-slot="app-sidebar-group-details"
+          open={item.expanded}
+          defaultOpen={defaultExpanded}
+          className="group/app-sidebar-details"
+          onOpenChange={item.onExpandedChange}
+        >
+          <summary
+            data-slot="app-sidebar-group-trigger"
+            data-size={itemSize}
+            data-active={active || undefined}
+            data-active-indicator={activeIndicator}
+            className={cn(
+              "flex list-none items-center gap-2 border border-transparent text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow]",
+              getSidebarInteractiveClassName({ active }),
+              collapsed ? "justify-center px-2" : "px-2.5"
+            )}
           >
             {item.icon ? (
               collapsed ? (
@@ -300,25 +331,28 @@ function SidebarTree({
             {!collapsed && (
               <ChevronRightIcon
                 data-slot="app-sidebar-group-chevron"
-                className="ml-auto size-3.5 shrink-0 text-muted-foreground transition-transform group-open/app-sidebar-details:rotate-90"
+                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"
               />
             )}
           </summary>
-          <div data-slot="app-sidebar-group-content" className={cn("mt-1 space-y-1", !collapsed && "pl-3")}>
-            <SidebarTree
-              items={item.items ?? []}
-              collapsed={collapsed}
-              depth={depth + 1}
-              onItemSelect={onItemSelect}
-              renderLink={renderLink}
-            />
+          <div data-slot="app-sidebar-group-content" className={cn("mt-1 flex flex-col gap-1", !collapsed && "pl-3")}>
+            <SidebarTree
+              items={item.items ?? []}
+              collapsed={collapsed}
+              depth={depth + 1}
+              showSectionLabels={showSectionLabels}
+              itemSize={itemSize}
+              activeIndicator={activeIndicator}
+              onItemSelect={onItemSelect}
+              renderLink={renderLink}
+            />
           </div>
-        </details>
-      </div>
-    )
-  })
-}
-
+        </ControllableDetails>
+      </div>
+    )
+  })
+}
+
 function SidebarActionButton({
   item,
   collapsed,
@@ -399,14 +433,14 @@ 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-foreground">
-            {account.label}
-          </span>
-          {account.description ? (
-            <span data-slot="app-sidebar-account-description" className="block truncate text-xs text-muted-foreground">
-              {account.description}
-            </span>
-          ) : null}
+          <span data-slot="app-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%)]">
+              {account.description}
+            </span>
+          ) : null}
         </span>
       ) : null}
     </button>
@@ -434,16 +468,21 @@ function SidebarSurface({
   railItems = [],
   footerAccount,
   secondaryActions = [],
-  footerSecondary,
-  footerClassName,
-  tooltipOnCollapsed,
-  onItemSelect,
+  footerSecondary,
+  footerClassName,
+  tooltipOnCollapsed,
+  showSectionLabels = true,
+  itemSize = "md",
+  activeIndicator = "bar",
+  navigationLabel = "Primary navigation",
+  onItemSelect,
   renderItem,
   renderLink,
   children,
   mobile,
-  mobileTitle,
-  mobileDescription,
+  mobileTitle,
+  mobileDescription,
+  mobileCloseLabel = "Close navigation",
   onRequestClose,
   closeOnSelect = true,
   ...props
@@ -494,7 +533,7 @@ function SidebarSurface({
             {mobile && onRequestClose ? (
               <button
                 type="button"
-                aria-label="Close navigation"
+                aria-label={mobileCloseLabel}
                 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}
@@ -506,7 +545,11 @@ function SidebarSurface({
         </div>
       )}
 
-      <nav data-slot="app-sidebar-nav" className="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
+      <nav
+        data-slot="app-sidebar-nav"
+        aria-label={navigationLabel}
+        className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain p-2"
+      >
         {children ??
           visibleItems.map((item) => {
             if (!renderItem) return null
@@ -523,13 +566,16 @@ function SidebarSurface({
             )
           })}
         {!children && !renderItem && (
-          <SidebarTree
-            items={visibleItems}
-            collapsed={collapsed}
-            depth={0}
-            onItemSelect={handleSelect}
-            renderLink={renderLink}
-          />
+          <SidebarTree
+            items={visibleItems}
+            collapsed={collapsed}
+            depth={0}
+            showSectionLabels={showSectionLabels}
+            itemSize={itemSize}
+            activeIndicator={activeIndicator}
+            onItemSelect={handleSelect}
+            renderLink={renderLink}
+          />
         )}
       </nav>
 
@@ -607,16 +653,21 @@ function Sidebar({
   railItems = [],
   footerAccount,
   secondaryActions = [],
-  footerSecondary,
-  tooltipOnCollapsed = true,
-  responsive = true,
+  footerSecondary,
+  tooltipOnCollapsed = true,
+  showSectionLabels = true,
+  itemSize = "md",
+  activeIndicator = "bar",
+  navigationLabel = "Primary navigation",
+  responsive = true,
   mobileBreakpoint = DEFAULT_APP_SIDEBAR_BREAKPOINT,
   mobileOpen: mobileOpenProp,
   defaultMobileOpen = false,
   onMobileOpenChange,
   mobileTitle,
-  mobileDescription,
-  mobileToggleLabel = "Open navigation",
+  mobileDescription,
+  mobileToggleLabel = "Open navigation",
+  mobileCloseLabel = "Close navigation",
   mobileToggleIcon,
   showMobileToggle = true,
   closeOnSelect = true,
@@ -679,9 +730,14 @@ function Sidebar({
     railItems,
     footerAccount,
     secondaryActions,
-    footerSecondary,
-    tooltipOnCollapsed,
-    closeOnSelect,
+    footerSecondary,
+    tooltipOnCollapsed,
+    showSectionLabels,
+    itemSize,
+    activeIndicator,
+    navigationLabel,
+    mobileCloseLabel,
+    closeOnSelect,
     onItemSelect,
     renderItem,
     renderLink,
@@ -696,7 +752,7 @@ function Sidebar({
   const defaultTrigger = (
     <button
       type="button"
-      aria-label={mobileOpen ? "Close navigation" : mobileToggleLabel}
+      aria-label={mobileOpen ? mobileCloseLabel : mobileToggleLabel}
       data-slot="app-sidebar-mobile-trigger"
       data-state={mobileOpen ? "open" : "closed"}
       className={cn(
@@ -708,7 +764,7 @@ function Sidebar({
       <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>
+      <span>{mobileOpen ? mobileCloseLabel : mobileToggleLabel}</span>
     </button>
   )
 

package/packages/cli/vendor/src/components/layout/controllable-details.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+
+type ControllableDetailsProps = Omit<React.ComponentProps<"details">, "open" | "onToggle"> & {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+function ControllableDetails({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}: ControllableDetailsProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const isControlled = open !== undefined
+
+  return (
+    <details
+      {...props}
+      open={isControlled ? open : uncontrolledOpen}
+      onToggle={(event) => {
+        const nextOpen = event.currentTarget.open
+        if (!isControlled) setUncontrolledOpen(nextOpen)
+        onOpenChange?.(nextOpen)
+      }}
+    >
+      {children}
+    </details>
+  )
+}
+
+export { ControllableDetails }
+export type { ControllableDetailsProps }

package/packages/cli/vendor/src/components/layout/demo.tsx

@@ -2,6 +2,4 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 
 export const layoutShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
-  component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
-  component("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text."),
 ])