tembro 2.0.4 → 2.0.5

package/packages/cli/vendor/src/components/inputs/combobox.tsx

@@ -15,15 +15,19 @@ export type ComboboxOption<TValue extends string = string> = {
   hidden?: boolean
 }
 
-export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
+export type ComboboxProps<TValue extends string = string> = React.ComponentProps<"div"> & {
   value?: TValue
   options: ComboboxOption<TValue>[]
   onValueChange?: (value: TValue | undefined, option?: ComboboxOption<TValue>) => void
   placeholder?: React.ReactNode
   searchPlaceholder?: string
-  emptyLabel?: React.ReactNode
-  disabled?: boolean
+  emptyLabel?: React.ReactNode
+  disabled?: boolean
   invalid?: boolean
+  clearable?: boolean
+  allowDeselect?: boolean
+  showSelectedDescription?: boolean
+  onSearchChange?: (value: string) => void
   triggerClassName?: string
   contentClassName?: string
   optionClassName?: string
@@ -36,9 +40,13 @@ function Combobox<TValue extends string = string>({
   onValueChange,
   placeholder = "Select option",
   searchPlaceholder = "Search...",
-  emptyLabel = "No option found",
+  emptyLabel = "No option found",
   disabled = false,
   invalid,
+  clearable = false,
+  allowDeselect = false,
+  showSelectedDescription = true,
+  onSearchChange,
   triggerClassName,
   contentClassName,
   optionClassName,
@@ -58,7 +66,16 @@ function Combobox<TValue extends string = string>({
 
   return (
     <div data-slot="combobox" className={cn("grid w-full gap-2", className)} {...props}>
-      <Popover open={open} onOpenChange={setOpen}>
+      <Popover
+        open={open}
+        onOpenChange={(nextOpen) => {
+          setOpen(nextOpen)
+          if (!nextOpen) {
+            setSearch("")
+            onSearchChange?.("")
+          }
+        }}
+      >
         <PopoverTrigger
           render={
             <Button
@@ -71,9 +88,40 @@ function Combobox<TValue extends string = string>({
             />
           }
         >
-          <span className={cn("min-w-0 flex-1 truncate font-medium", !selectedOption && "font-normal text-muted-foreground")}>
-            {selectedOption?.label ?? placeholder}
+          <span className={cn("min-w-0 flex-1", !selectedOption && "text-muted-foreground")}>
+            {selectedOption ? (
+              <span className="flex min-w-0 flex-col items-start">
+                <span className="truncate font-medium">{selectedOption.label}</span>
+                {showSelectedDescription && selectedOption.description ? (
+                  <span className="truncate text-[11px] text-muted-foreground">{selectedOption.description}</span>
+                ) : null}
+              </span>
+            ) : (
+              <span className="truncate font-normal">{placeholder}</span>
+            )}
           </span>
+          {clearable && selectedOption && !disabled ? (
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label="Clear value"
+              className="inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted/55 hover:text-foreground"
+              onClick={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                onValueChange?.(undefined, undefined)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  onValueChange?.(undefined, undefined)
+                }
+              }}
+            >
+              ×
+            </span>
+          ) : null}
           <ChevronDownIcon className="size-4 opacity-60" />
         </PopoverTrigger>
         <PopoverContent
@@ -83,7 +131,15 @@ function Combobox<TValue extends string = string>({
         >
           <div className="relative mb-2">
             <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input value={search} onChange={(event) => setSearch(event.target.value)} placeholder={searchPlaceholder} className={cn("h-9 pl-8", searchClassName)} />
+            <Input
+              value={search}
+              onChange={(event) => {
+                setSearch(event.target.value)
+                onSearchChange?.(event.target.value)
+              }}
+              placeholder={searchPlaceholder}
+              className={cn("h-9 pl-8", searchClassName)}
+            />
           </div>
           <div className="max-h-64 overflow-y-auto">
             {filteredOptions.length ? filteredOptions.map((option) => {
@@ -99,7 +155,8 @@ function Combobox<TValue extends string = string>({
                     optionClassName
                   )}
                   onClick={() => {
-                    onValueChange?.(option.value, option)
+                    const nextValue = allowDeselect && active ? undefined : option.value
+                    onValueChange?.(nextValue, nextValue ? option : undefined)
                     setOpen(false)
                   }}
                 >

package/packages/cli/vendor/src/components/inputs/simple-select.tsx

@@ -32,10 +32,11 @@ export type SimpleSelectProps = Omit<
   size?: "sm" | "default" | "lg"
   clearable?: boolean
   searchable?: boolean
-  loading?: boolean
-  loadingLabel?: React.ReactNode
-  disabled?: boolean
-  triggerClassName?: string
+  loading?: boolean
+  loadingLabel?: React.ReactNode
+  disabled?: boolean
+  showSelectedDescription?: boolean
+  triggerClassName?: string
   contentClassName?: string
   itemClassName?: string
   searchClassName?: string
@@ -63,23 +64,34 @@ function SimpleSelect({
   size = "default",
   clearable = false,
   searchable = false,
-  loading = false,
-  loadingLabel = "Loading options...",
-  disabled = false,
-  triggerClassName,
+  loading = false,
+  loadingLabel = "Loading options...",
+  disabled = false,
+  showSelectedDescription = true,
+  triggerClassName,
   contentClassName,
   itemClassName,
-  searchClassName,
-  renderOption,
-  invalid,
-  ...props
-}: SimpleSelectProps) {
+  searchClassName,
+  renderOption,
+  invalid,
+  onOpenChange,
+  ...props
+}: SimpleSelectProps) {
   const [search, setSearch] = React.useState("")
   const selectedOption = options.find((option) => option.value === value)
   const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
 
   return (
-    <Select value={value} onValueChange={(val) => onValueChange?.(val as string)} disabled={disabled || loading} {...props}>
+    <Select
+      value={value}
+      onValueChange={(val) => onValueChange?.(val as string)}
+      disabled={disabled || loading}
+      onOpenChange={(open, eventDetails) => {
+        if (!open) setSearch("")
+        onOpenChange?.(open, eventDetails)
+      }}
+      {...props}
+    >
       <SelectTrigger
         size={size}
         aria-invalid={invalid || undefined}
@@ -88,12 +100,22 @@ function SimpleSelect({
           triggerClassName
         )}
       >
-        <SelectValue placeholder={placeholder}>{selectedOption?.label}</SelectValue>
-        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
-        {clearable && value && !disabled && !loading ? (
-          <button
-            type="button"
-            aria-label={clearLabel}
+        <SelectValue placeholder={placeholder}>
+          {selectedOption ? (
+            <span className="flex min-w-0 flex-col items-start">
+              <span className="truncate">{selectedOption.label}</span>
+              {showSelectedDescription && selectedOption.description ? (
+                <span className="truncate text-[11px] font-medium text-muted-foreground">{selectedOption.description}</span>
+              ) : null}
+            </span>
+          ) : null}
+        </SelectValue>
+        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
+        {clearable && value && !disabled && !loading ? (
+          <span
+            role="button"
+            tabIndex={0}
+            aria-label={clearLabel}
             className="ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={(event) => {
               event.preventDefault()
@@ -102,11 +124,17 @@ function SimpleSelect({
             }}
             onMouseDown={stopInteractivePropagation}
             onDoubleClick={stopInteractivePropagation}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault()
+                onValueChange?.(undefined)
+              }
+            }}
           >
-            <XIcon className="size-3.5" />
-          </button>
-        ) : null}
-      </SelectTrigger>
+            <XIcon className="size-3.5" />
+          </span>
+        ) : null}
+      </SelectTrigger>
       <SelectContent
         className={cn(
           "w-(--anchor-width)",

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

@@ -36,6 +36,9 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
   footer?: React.ReactNode
   items?: AppSidebarNavItem[]
   collapsed?: boolean
+  width?: React.CSSProperties["width"]
+  collapsedWidth?: React.CSSProperties["width"]
+  mobileWidth?: React.CSSProperties["width"]
   collapsedRail?: React.ReactNode
   railItems?: AppSidebarNavItem[]
   footerAccount?: AppSidebarFooterAccount
@@ -63,6 +66,23 @@ export type AppSidebarProps = React.ComponentProps<"aside"> & {
 }
 
 const DEFAULT_APP_SIDEBAR_BREAKPOINT = 1024
+const DEFAULT_SIDEBAR_WIDTH = "18rem"
+const DEFAULT_COLLAPSED_SIDEBAR_WIDTH = "4.75rem"
+const DEFAULT_MOBILE_SIDEBAR_WIDTH = "min(88vw, 22rem)"
+
+function getSidebarInteractiveClassName({
+  active,
+  disabled,
+}: {
+  active?: boolean
+  disabled?: boolean
+}) {
+  return cn(
+    "border-[color:transparent] text-foreground/80 hover:border-[color:var(--aui-divider)] hover:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_4%)] hover:text-foreground focus-visible:border-[color:var(--aui-control-border-strong,var(--border))] focus-visible:bg-[color:color-mix(in_oklch,var(--card),var(--primary)_6%)] focus-visible:text-foreground focus-visible:shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_86%)]",
+    active && "border-[color:color-mix(in_oklch,var(--primary),transparent_76%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_91%)] text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]",
+    disabled && "hover:border-transparent hover:bg-transparent hover:text-foreground/80"
+  )
+}
 
 function hasVisibleSidebarChildren(item: AppSidebarNavItem) {
   return item.items?.some((child) => !child.hidden) ?? false
@@ -101,6 +121,7 @@ function SidebarLeafItem({
     "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"
     ),
   }
@@ -257,6 +278,7 @@ function SidebarTree({
             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"
             )}
           >
@@ -312,6 +334,7 @@ function SidebarActionButton({
       data-disabled={item.disabled || undefined}
       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"
       )}
       disabled={item.disabled}
@@ -350,6 +373,7 @@ function SidebarFooterAccount({
       data-slot="app-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({}),
         collapsed ? "justify-center px-2 py-2.5" : "px-3 py-2.5"
       )}
       onClick={() => {
@@ -397,10 +421,13 @@ function SidebarFooterAccount({
 
 function SidebarSurface({
   className,
+  style,
   header,
   footer,
   items = [],
   collapsed = false,
+  width = DEFAULT_SIDEBAR_WIDTH,
+  collapsedWidth = DEFAULT_COLLAPSED_SIDEBAR_WIDTH,
   collapsedRail,
   railItems = [],
   footerAccount,
@@ -438,6 +465,11 @@ function SidebarSurface({
       data-collapsed={collapsed || undefined}
       data-mobile={mobile || undefined}
       className={cn("flex h-full min-h-0 flex-col overflow-hidden", className)}
+      style={{
+        width: collapsed ? collapsedWidth : width,
+        minWidth: collapsed ? collapsedWidth : width,
+        ...style,
+      }}
       {...props}
     >
       {(header || showMobileHeader) && (
@@ -565,6 +597,9 @@ function AppSidebar({
   footer,
   items = [],
   collapsed = false,
+  width = DEFAULT_SIDEBAR_WIDTH,
+  collapsedWidth = DEFAULT_COLLAPSED_SIDEBAR_WIDTH,
+  mobileWidth = DEFAULT_MOBILE_SIDEBAR_WIDTH,
   collapsedRail,
   railItems = [],
   footerAccount,
@@ -634,6 +669,8 @@ function AppSidebar({
     footer,
     items,
     collapsed,
+    width,
+    collapsedWidth,
     collapsedRail,
     railItems,
     footerAccount,
@@ -703,11 +740,15 @@ function AppSidebar({
           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",
+            "fixed inset-y-0 left-0 z-50 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
           )}
+          style={{
+            width: mobileWidth,
+            minWidth: mobileWidth,
+          }}
         />
       </div>
     </>

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

@@ -18,6 +18,7 @@ export type BreadcrumbsProps = React.ComponentProps<"nav"> & {
   maxItems?: number
   collapseLabel?: React.ReactNode
   separator?: React.ReactNode
+  wrap?: boolean
   renderLink?: (props: React.ComponentProps<"a"> & { item: BreadcrumbItem; [key: `data-${string}`]: string | boolean | undefined }) => React.ReactNode
 }
 
@@ -44,6 +45,7 @@ function Breadcrumbs({
   maxItems,
   collapseLabel = "…",
   separator = <ChevronRightIcon className="size-3.5" />,
+  wrap = false,
   renderLink,
   ...props
 }: BreadcrumbsProps) {
@@ -54,11 +56,15 @@ function Breadcrumbs({
 
   return (
     <nav
-      data-slot="breadcrumbs"
-      aria-label="Breadcrumb"
-      className={cn("flex min-w-0 items-center gap-1 text-sm text-muted-foreground", className)}
-      {...props}
-    >
+      data-slot="breadcrumbs"
+      aria-label="Breadcrumb"
+      className={cn(
+        "flex min-w-0 items-center gap-1 overflow-x-auto text-sm text-muted-foreground",
+        wrap ? "flex-wrap" : "whitespace-nowrap",
+        className
+      )}
+      {...props}
+    >
       {resolvedItems.map((item, index) => {
         const isCollapsed = item.key === "__collapsed__"
         const isLast = index === resolvedItems.length - 1
@@ -76,7 +82,7 @@ function Breadcrumbs({
                 item,
                 href: item.href,
                 "data-slot": "breadcrumbs-link",
-                className: "truncate transition-colors hover:text-foreground",
+                className: "truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground",
                 onClick: () => item.onSelect?.(),
                 children: (
                   <span className="inline-flex min-w-0 items-center gap-1.5">
@@ -88,7 +94,7 @@ function Breadcrumbs({
                 <a
                   href={item.href}
                   data-slot="breadcrumbs-link"
-                  className="truncate transition-colors hover:text-foreground"
+                  className="truncate rounded-[var(--radius-sm)] px-1 py-0.5 transition-colors hover:bg-accent/55 hover:text-foreground"
                   onClick={() => item.onSelect?.()}
                 >
                   <span className="inline-flex min-w-0 items-center gap-1.5">
@@ -101,7 +107,10 @@ function Breadcrumbs({
               <span
                 data-slot="breadcrumbs-current"
                 aria-current={isCurrent ? (item.currentLabel ?? "page") : undefined}
-                className={cn("inline-flex min-w-0 items-center gap-1.5 truncate", isCurrent && "font-medium text-foreground")}
+                className={cn(
+                  "inline-flex min-w-0 items-center gap-1.5 truncate rounded-[var(--radius-sm)] px-1 py-0.5",
+                  isCurrent && "bg-accent/45 font-medium text-foreground"
+                )}
               >
                 {item.icon ? <span className="shrink-0">{item.icon}</span> : null}
                 <span className="truncate">{item.label}</span>

package/packages/cli/vendor/src/components/layout/stat-card.tsx

@@ -17,16 +17,23 @@ export type StatCardTrend = {
   label?: React.ReactNode
 }
 
-export type StatCardProps = React.ComponentProps<typeof Card> & {
+export type StatCardProps = React.ComponentProps<typeof Card> & {
   title?: React.ReactNode
   value?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
-  action?: React.ReactNode
-  trend?: StatCardTrend
-  footer?: React.ReactNode
-  helperText?: React.ReactNode
-  loading?: boolean
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  trend?: StatCardTrend
+  footer?: React.ReactNode
+  helperText?: React.ReactNode
+  comparisonItems?: Array<{
+    label: React.ReactNode
+    value: React.ReactNode
+    change?: React.ReactNode
+    trend?: StatCardTrend["tone"] | "neutral"
+  }>
+  comparisonColumns?: 2 | 3 | 4
+  loading?: boolean
   valuePrefix?: React.ReactNode
   valueSuffix?: React.ReactNode
   contentClassName?: string
@@ -59,11 +66,13 @@ function StatCard({
   value,
   description,
   icon,
-  action,
-  trend,
-  footer,
-  helperText,
-  loading = false,
+  action,
+  trend,
+  footer,
+  helperText,
+  comparisonItems,
+  comparisonColumns = 2,
+  loading = false,
   valuePrefix,
   valueSuffix,
   contentClassName,
@@ -99,22 +108,53 @@ function StatCard({
             </div>
           </CardHeader>
 
-          {(description || trend || helperText || footer) && (
-            <CardContent className={cn("space-y-2", contentClassName)}>
-              {(description || trend) && (
-                <div className="flex flex-wrap items-center gap-2 text-sm">
+          {(description || trend || helperText || footer || comparisonItems?.length) && (
+            <CardContent className={cn("space-y-2", contentClassName)}>
+              {(description || trend) && (
+                <div className="flex flex-wrap items-center gap-2 text-sm">
                   {trend && (
                     <Badge variant="ghost" tone={trend.tone === "muted" || trend.tone === "default" ? "neutral" : trend.tone} size="sm" className={cn("font-medium", trendClassName[trend.tone ?? "default"])}>
                       {trend.value}
                     </Badge>
                   )}
                   {trend?.label ? <span className="text-muted-foreground">{trend.label}</span> : null}
-                  {description && <span className="text-muted-foreground">{description}</span>}
-                </div>
-              )}
-              {helperText ? <p className="text-xs leading-5 text-muted-foreground">{helperText}</p> : null}
-              {footer}
-            </CardContent>
+                  {description && <span className="text-muted-foreground">{description}</span>}
+                </div>
+              )}
+              {comparisonItems?.length ? (
+                <div
+                  data-slot="stat-card-comparison"
+                  className={cn(
+                    "grid gap-3 pt-1",
+                    comparisonColumns === 2 && "grid-cols-2",
+                    comparisonColumns === 3 && "grid-cols-3",
+                    comparisonColumns === 4 && "grid-cols-2 sm:grid-cols-4"
+                  )}
+                >
+                  {comparisonItems.map((item, index) => (
+                    <div key={index} className="min-w-0 space-y-1">
+                      <p className="truncate text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                        {item.label}
+                      </p>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-base font-semibold text-foreground">{item.value}</span>
+                        {item.change ? (
+                          <Badge
+                            variant="ghost"
+                            tone={item.trend === "neutral" ? "neutral" : item.trend === "default" ? "neutral" : item.trend}
+                            size="sm"
+                          >
+                            {item.change}
+                          </Badge>
+                        ) : null}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+              {helperText ? <p className="text-xs leading-5 text-muted-foreground">{helperText}</p> : null}
+              {footer}
+            </CardContent>
           )}
         </>
       )}

package/packages/cli/vendor/src/components/modern/calendar-scheduler.tsx

@@ -10,10 +10,11 @@ export type CalendarSchedulerEvent = {
   tone?: "default" | "success" | "warning" | "danger"
 }
 
-export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
-  events: CalendarSchedulerEvent[]
-  days?: string[]
-}
+export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
+  events: CalendarSchedulerEvent[]
+  days?: string[]
+  empty?: React.ReactNode
+}
 
 const toneClassName = {
   default: "border-border bg-muted",
@@ -22,24 +23,33 @@ const toneClassName = {
   danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
 }
 
-function CalendarScheduler({ events, days, className, ...props }: CalendarSchedulerProps) {
-  const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
-
-  return (
-    <div data-slot="calendar-scheduler" className={cn("grid gap-3", className)} {...props}>
-      {visibleDays.map((day) => (
-        <section key={day} className="rounded-xl border bg-card p-3">
-          <div className="mb-2 text-sm font-semibold">{day}</div>
-          <div className="grid gap-2">
-            {events.filter((event) => event.date === day).map((event) => (
-              <div key={event.id} className={cn("rounded-md border px-3 py-2 text-sm", toneClassName[event.tone ?? "default"])}>
-                <div className="font-medium">{event.title}</div>
-                {event.time && <div className="text-xs opacity-70">{event.time}</div>}
-              </div>
-            ))}
-          </div>
-        </section>
-      ))}
+function CalendarScheduler({ events, days, empty = "No events scheduled.", className, ...props }: CalendarSchedulerProps) {
+  const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
+
+  return (
+    <div data-slot="calendar-scheduler" className={cn("grid gap-3", className)} {...props}>
+      {visibleDays.map((day) => (
+        <section key={day} className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]">
+          <div className="mb-3 flex items-center justify-between gap-3">
+            <div className="text-sm font-semibold text-foreground">{day}</div>
+            <div className="text-xs text-muted-foreground">{events.filter((event) => event.date === day).length} items</div>
+          </div>
+          <div className="grid gap-2">
+            {events.filter((event) => event.date === day).length === 0 ? (
+              <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">
+                {empty}
+              </div>
+            ) : (
+              events.filter((event) => event.date === day).map((event) => (
+                <div key={event.id} className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-sm shadow-sm", toneClassName[event.tone ?? "default"])}>
+                  <div className="font-medium">{event.title}</div>
+                  {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
+                </div>
+              ))
+            )}
+          </div>
+        </section>
+      ))}
     </div>
   )
 }