tembro 6.0.3 → 6.1.1

package/packages/cli/vendor/src/components/data-table/public.ts

@@ -1 +1,2 @@
 export * from "./data-table"
+export * from "./data-grid"

package/packages/cli/vendor/src/components/display/index.ts

@@ -3,15 +3,13 @@ export * from "./activity-feed"
 export * from "./avatar"
 export * from "./kanban"
 export * from "./code-block"
-export * from "./data-state"
-export * from "./list"
-export * from "./progress"
-export * from "./statistic"
+export * from "./data-state"
+export * from "./list"
+export * from "./progress"
 export * from "./status-dot"
 export * from "./status-legend"
 export * from "./timeline"
 export * from "./tree-view"
-export * from "./info-card"
 export * from "./virtual-list"
 export * from "./qr-code"
 export * from "./carousel"

package/packages/cli/vendor/src/components/feedback/async-boundary.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+
+import { StateView } from "@/components/feedback/state-view"
+
+export type AsyncBoundaryProps = React.PropsWithChildren<{
+  loading?: boolean
+  error?: unknown
+  empty?: boolean
+  loadingTitle?: React.ReactNode
+  errorTitle?: React.ReactNode
+  emptyTitle?: React.ReactNode
+  onRetry?: () => void
+}>
+
+function AsyncBoundary({
+  loading,
+  error,
+  empty,
+  loadingTitle = "Loading",
+  errorTitle = "Unable to load",
+  emptyTitle = "No data",
+  onRetry,
+  children,
+}: AsyncBoundaryProps) {
+  if (loading) return <StateView status="loading" title={loadingTitle} loadingVariant="skeleton" />
+  if (error) {
+    const description = error instanceof Error ? error.message : "Try again or check the request."
+    return <StateView status="error" title={errorTitle} description={description} onRetry={onRetry} />
+  }
+  if (empty) return <StateView status="empty" title={emptyTitle} />
+  return <>{children}</>
+}
+
+export { AsyncBoundary }

package/packages/cli/vendor/src/components/feedback/index.ts

@@ -1,2 +1,3 @@
 export * from "./alert"
 export * from "./state-view"
+export * from "./async-boundary"

package/packages/cli/vendor/src/components/filters/index.ts

@@ -1,2 +1 @@
-export * from "./filter-bar"
 export * from "./saved-filter-select"

package/packages/cli/vendor/src/components/inputs/color-picker.tsx

@@ -31,6 +31,14 @@ function withAlpha(value: string, alpha: number, includeAlpha: boolean) {
   return `${opaque}${channel}`
 }
 
+function getAlphaTrackStyle(value: string): React.CSSProperties {
+  const opaque = getOpaqueColor(value)
+
+  return {
+    background: `linear-gradient(90deg, ${opaque}00 0%, ${opaque}ff 100%)`,
+  }
+}
+
 export type ColorPickerProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
   value?: string
   defaultValue?: string
@@ -83,6 +91,11 @@ function ColorPicker({
       {label ? <div className="text-sm font-medium text-foreground">{label}</div> : null}
       <div className="flex min-w-0 items-center gap-2">
         <label className="relative size-10 shrink-0 overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring">
+          <span
+            aria-hidden="true"
+            className="absolute inset-0 bg-[linear-gradient(45deg,#e2e8f0_25%,transparent_25%),linear-gradient(-45deg,#e2e8f0_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#e2e8f0_75%),linear-gradient(-45deg,transparent_75%,#e2e8f0_75%)] bg-[length:10px_10px] bg-[position:0_0,0_5px,5px_-5px,-5px_0]"
+          />
+          <span aria-hidden="true" className="absolute inset-0" style={{ backgroundColor: currentValue }} />
           <span className="sr-only">{labels?.color ?? "Choose color"}</span>
           <input
             type="color"
@@ -120,7 +133,8 @@ function ColorPicker({
             value={getAlphaPercent(currentValue)}
             disabled={disabled}
             aria-label={labels?.alpha ?? "Opacity"}
-            className="w-full accent-foreground disabled:cursor-not-allowed"
+            style={getAlphaTrackStyle(currentValue)}
+            className="h-2 w-full cursor-pointer appearance-none rounded-full border border-border/70 outline-none focus-visible:ring-4 focus-visible:ring-ring/20 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow-sm"
             onChange={(event) => updateValue(withAlpha(currentValue, Number(event.target.value), true))}
           />
           <span className="w-10 text-right tabular-nums">{getAlphaPercent(currentValue)}%</span>

package/packages/cli/vendor/src/components/inputs/index.ts

@@ -1,4 +1,5 @@
 export * from "./async-select"
+export * from "./multi-select"
 export * from "./combobox"
 export * from "./otp-input"
 export * from "./rating"

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

@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+
+export type MultiSelectOption = {
+  value: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  disabled?: boolean
+}
+
+export type MultiSelectProps = React.ComponentProps<"div"> & {
+  options: MultiSelectOption[]
+  value?: string[]
+  onValueChange?: (value: string[]) => void
+  placeholder?: React.ReactNode
+  maxVisibleTags?: number
+}
+
+function MultiSelect({ options, value = [], onValueChange, placeholder = "Select options", maxVisibleTags = 3, className, ...props }: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const selected = options.filter((option) => value.includes(option.value))
+  const hiddenCount = Math.max(0, selected.length - maxVisibleTags)
+
+  const toggle = (optionValue: string) => {
+    onValueChange?.(value.includes(optionValue) ? value.filter((item) => item !== optionValue) : [...value, optionValue])
+  }
+
+  return (
+    <div data-slot="multi-select" className={cn("w-full", className)} {...props}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger render={<Button type="button" variant="outline" className="min-h-10 w-full justify-between" />}>
+          <span className="flex min-w-0 flex-1 flex-wrap gap-1">
+            {selected.length ? selected.slice(0, maxVisibleTags).map((option) => (
+              <Badge key={option.value} label={option.label} variant="secondary" />
+            )) : <span className="text-muted-foreground">{placeholder}</span>}
+            {hiddenCount ? <Badge label={`+${hiddenCount}`} variant="secondary" /> : null}
+          </span>
+          <ChevronDownIcon className="size-4 opacity-70" />
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-[var(--anchor-width)] p-1">
+          <div className="grid gap-1">
+            {options.map((option) => {
+              const checked = value.includes(option.value)
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  disabled={option.disabled}
+                  className="flex items-start gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-50"
+                  onClick={() => toggle(option.value)}
+                >
+                  <span className="mt-0.5 grid size-4 place-items-center rounded border">{checked ? <CheckIcon className="size-3" /> : null}</span>
+                  <span className="grid min-w-0 flex-1">
+                    <span className="truncate font-medium">{option.label}</span>
+                    {option.description ? <span className="truncate text-xs text-muted-foreground">{option.description}</span> : null}
+                  </span>
+                </button>
+              )
+            })}
+            {value.length ? <Button type="button" size="sm" variant="ghost" leftIcon={<XIcon className="size-3.5" />} onClick={() => onValueChange?.([])}>Clear</Button> : null}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { MultiSelect }

package/packages/cli/vendor/src/components/inputs/public.ts

@@ -1,4 +1,5 @@
 export * from "./async-select"
+export * from "./multi-select"
 export * from "./combobox"
 export * from "./otp-input"
 export * from "./rating"

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

@@ -83,7 +83,7 @@ function Slider({
         step={step}
         disabled={disabled}
         style={getSliderTrackStyle(currentValue, min, max)}
-        className="h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+        className="h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105"
         onChange={(event) => updateValue(event.currentTarget.valueAsNumber)}
         {...props}
       />
@@ -170,7 +170,7 @@ function RangeSlider({
             max={max}
             step={step}
             disabled={disabled}
-            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105"
             onChange={(event) => updateValue(0, event.currentTarget.valueAsNumber)}
             {...props}
           />
@@ -181,7 +181,7 @@ function RangeSlider({
             max={max}
             step={step}
             disabled={disabled}
-            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105"
             onChange={(event) => updateValue(1, event.currentTarget.valueAsNumber)}
             {...props}
           />

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

@@ -80,13 +80,13 @@ function TagInput({
           <Badge
             key={tag}
             variant="secondary"
-            className="h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm"
+            className="h-8 gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1.5 text-[13px] font-medium leading-none shadow-sm"
           >
-            {tag}
+            <span className="leading-none">{tag}</span>
             {!readOnly && !disabled && (
               <button
                 type="button"
-                className="grid size-5 shrink-0 place-items-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                className="inline-flex size-5 shrink-0 items-center justify-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
                 aria-label={`Remove ${tag}`}
                 onClick={(event) => {
                   stopInteractivePropagation(event)
@@ -95,7 +95,7 @@ function TagInput({
                 onMouseDown={stopInteractivePropagation}
                 onDoubleClick={stopInteractivePropagation}
               >
-                <XIcon className="size-3" strokeWidth={2} />
+                <XIcon className="size-3" strokeWidth={2.25} />
               </button>
             )}
           </Badge>

package/packages/cli/vendor/src/components/inputs/time-picker.tsx

@@ -1,22 +1,31 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type TimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
-  label?: React.ReactNode
-}
-
-export type DateTimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
-  label?: React.ReactNode
-}
+import * as React from "react"
+import { CalendarClockIcon, ClockIcon, XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type TimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
+  label?: React.ReactNode
+  clearable?: boolean
+  onClear?: () => void
+}
+
+export type DateTimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
+  label?: React.ReactNode
+  clearable?: boolean
+  onClear?: () => void
+}
 
 export type TimeRangePickerProps = React.ComponentProps<"div"> & {
   from?: string
   to?: string
   onFromChange?: (value: string) => void
-  onToChange?: (value: string) => void
-  disabled?: boolean
-}
+  onToChange?: (value: string) => void
+  disabled?: boolean
+  labels?: {
+    from?: React.ReactNode
+    to?: React.ReactNode
+  }
+}
 
 function FieldShell({ label, className, children }: { label?: React.ReactNode; className?: string; children: React.ReactNode }) {
   return (
@@ -27,29 +36,73 @@ function FieldShell({ label, className, children }: { label?: React.ReactNode; c
   )
 }
 
-function TimePicker({ label, className, ...props }: TimePickerProps) {
-  return (
-    <FieldShell label={label}>
-      <input type="time" className={cn("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", className)} {...props} />
-    </FieldShell>
-  )
-}
-
-function DateTimePicker({ label, className, ...props }: DateTimePickerProps) {
-  return (
-    <FieldShell label={label}>
-      <input type="datetime-local" className={cn("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", className)} {...props} />
-    </FieldShell>
-  )
-}
-
-function TimeRangePicker({ from, to, onFromChange, onToChange, disabled, className, ...props }: TimeRangePickerProps) {
-  return (
-    <div data-slot="time-range-picker" className={cn("grid gap-2 sm:grid-cols-2", className)} {...props}>
-      <TimePicker value={from} disabled={disabled} onChange={(event) => onFromChange?.(event.target.value)} />
-      <TimePicker value={to} disabled={disabled} onChange={(event) => onToChange?.(event.target.value)} />
-    </div>
-  )
-}
+function clearInput(event: React.MouseEvent<HTMLButtonElement>, onChange: React.ChangeEventHandler<HTMLInputElement> | undefined, onClear: (() => void) | undefined) {
+  event.preventDefault()
+  event.stopPropagation()
+  onChange?.({ target: { value: "" }, currentTarget: { value: "" } } as React.ChangeEvent<HTMLInputElement>)
+  onClear?.()
+}
+
+function TimePicker({ label, className, clearable = false, onClear, value, defaultValue, disabled, onChange, ...props }: TimePickerProps) {
+  const hasValue = value !== undefined ? String(value).length > 0 : defaultValue !== undefined && String(defaultValue).length > 0
+
+  return (
+    <FieldShell label={label}>
+      <span className="relative grid">
+        <ClockIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="time"
+          value={value}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          onChange={onChange}
+          className={cn("h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", className)}
+          {...props}
+        />
+        {clearable && hasValue && !disabled ? (
+          <button type="button" aria-label="Clear time" className="absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" onClick={(event) => clearInput(event, onChange, onClear)}>
+            <XIcon className="size-3.5" />
+          </button>
+        ) : null}
+      </span>
+    </FieldShell>
+  )
+}
+
+function DateTimePicker({ label, className, clearable = false, onClear, value, defaultValue, disabled, onChange, ...props }: DateTimePickerProps) {
+  const hasValue = value !== undefined ? String(value).length > 0 : defaultValue !== undefined && String(defaultValue).length > 0
+
+  return (
+    <FieldShell label={label}>
+      <span className="relative grid">
+        <CalendarClockIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="datetime-local"
+          value={value}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          onChange={onChange}
+          className={cn("h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", className)}
+          {...props}
+        />
+        {clearable && hasValue && !disabled ? (
+          <button type="button" aria-label="Clear date and time" className="absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" onClick={(event) => clearInput(event, onChange, onClear)}>
+            <XIcon className="size-3.5" />
+          </button>
+        ) : null}
+      </span>
+    </FieldShell>
+  )
+}
+
+function TimeRangePicker({ from, to, onFromChange, onToChange, disabled, labels, className, ...props }: TimeRangePickerProps) {
+  return (
+    <div data-slot="time-range-picker" className={cn("grid gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-end", className)} {...props}>
+      <TimePicker label={labels?.from} value={from} clearable disabled={disabled} onChange={(event) => onFromChange?.(event.target.value)} onClear={() => onFromChange?.("")} />
+      <span className="hidden h-11 items-center text-sm text-muted-foreground sm:inline-flex">to</span>
+      <TimePicker label={labels?.to} value={to} clearable disabled={disabled} onChange={(event) => onToChange?.(event.target.value)} onClear={() => onToChange?.("")} />
+    </div>
+  )
+}
 
 export { DateTimePicker, TimePicker, TimeRangePicker }

package/packages/cli/vendor/src/components/modern/file-manager.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import { FileIcon, FolderIcon, MoreHorizontalIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ScrollBox } from "@/components/ui/scroll-box"
+import { cn } from "@/lib/utils"
+
+export type FileManagerItem = {
+  id: string
+  name: string
+  type: "file" | "folder"
+  size?: React.ReactNode
+  owner?: React.ReactNode
+  status?: React.ReactNode
+}
+
+export type FileManagerProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
+  items: FileManagerItem[]
+  selectedId?: string
+  onSelect?: (item: FileManagerItem) => void
+  onOpen?: (item: FileManagerItem) => void
+  onSearchChange?: (value: string) => void
+  searchValue?: string
+  actions?: React.ReactNode
+}
+
+function FileManager({ items, selectedId, onSelect, onOpen, searchValue, onSearchChange, actions, className, ...props }: FileManagerProps) {
+  const [internalSearch, setInternalSearch] = React.useState("")
+  const query = searchValue ?? internalSearch
+  const filteredItems = items.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
+
+  return (
+    <div data-slot="file-manager" className={cn("grid min-w-0 gap-3 rounded-lg border bg-card p-3", className)} {...props}>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Input
+          kind="search"
+          placeholder="Search files..."
+          value={query}
+          onValueChange={(value) => {
+            setInternalSearch(value)
+            onSearchChange?.(value)
+          }}
+          className="max-w-sm"
+        />
+        {actions}
+      </div>
+      <ScrollBox className="max-h-[420px]">
+        <div className="grid gap-1">
+          {filteredItems.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              data-selected={selectedId === item.id || undefined}
+              className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md px-3 py-2 text-left transition hover:bg-muted/60 data-[selected=true]:bg-muted"
+              onClick={() => onSelect?.(item)}
+              onDoubleClick={() => onOpen?.(item)}
+            >
+              {item.type === "folder" ? <FolderIcon className="size-4 text-primary" /> : <FileIcon className="size-4 text-muted-foreground" />}
+              <span className="min-w-0">
+                <span className="block truncate text-sm font-medium">{item.name}</span>
+                <span className="text-xs text-muted-foreground">{item.owner ?? "Shared"} {item.size ? `- ${item.size}` : ""}</span>
+              </span>
+              <span className="flex items-center gap-2">
+                {item.status ? <Badge label={item.status} variant="soft" status="info" /> : null}
+                <Button type="button" variant="ghost" size="icon-xs" aria-label="File actions"><MoreHorizontalIcon /></Button>
+              </span>
+            </button>
+          ))}
+        </div>
+      </ScrollBox>
+    </div>
+  )
+}
+
+export { FileManager }

package/packages/cli/vendor/src/components/modern/index.ts

@@ -2,4 +2,7 @@ export * from "./calendar-scheduler"
 export * from "./dual-list-picker"
 export * from "./resizable-panel"
 export * from "./rich-text-editor"
-export * from "./image-cropper"
+export * from "./file-manager"
+export * from "./map"
+export * from "./media-player"
+export * from "./spreadsheet"

package/packages/cli/vendor/src/components/modern/map.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import { ExternalLinkIcon, LocateFixedIcon, MapPinIcon, MinusIcon, PlusIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type MapMarker = {
+  key: string
+  label: React.ReactNode
+  latitude: number
+  longitude: number
+  description?: React.ReactNode
+  tone?: "neutral" | "info" | "success" | "warning" | "danger" | "muted"
+}
+
+export type MapViewProps = React.ComponentProps<"section"> & {
+  center?: { latitude: number; longitude: number }
+  zoom?: number
+  markers?: MapMarker[]
+  title?: React.ReactNode
+  description?: React.ReactNode
+  height?: number | string
+  showMarkerList?: boolean
+  showControls?: boolean
+  iframeTitle?: string
+  mapUrl?: string
+  onMarkerSelect?: (marker: MapMarker) => void
+  selectedMarkerKey?: string
+  defaultSelectedMarkerKey?: string
+}
+
+function clampZoom(value: number) {
+  return Math.max(1, Math.min(19, value))
+}
+
+function toCoordinate(value: number) {
+  return Number.isFinite(value) ? value : 0
+}
+
+function getOpenStreetMapEmbedUrl(center: { latitude: number; longitude: number }, zoom: number, selected?: MapMarker) {
+  const lat = toCoordinate(selected?.latitude ?? center.latitude)
+  const lon = toCoordinate(selected?.longitude ?? center.longitude)
+  const delta = 0.012 * (20 - clampZoom(zoom))
+  const bbox = [lon - delta, lat - delta, lon + delta, lat + delta].map((value) => value.toFixed(6)).join("%2C")
+  return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat.toFixed(6)}%2C${lon.toFixed(6)}`
+}
+
+function getOpenStreetMapUrl(center: { latitude: number; longitude: number }, zoom: number, selected?: MapMarker) {
+  const lat = toCoordinate(selected?.latitude ?? center.latitude)
+  const lon = toCoordinate(selected?.longitude ?? center.longitude)
+  return `https://www.openstreetmap.org/?mlat=${lat.toFixed(6)}&mlon=${lon.toFixed(6)}#map=${clampZoom(zoom)}/${lat.toFixed(6)}/${lon.toFixed(6)}`
+}
+
+function MapView({
+  center = { latitude: 41.311081, longitude: 69.240562 },
+  zoom = 13,
+  markers = [],
+  title = "Map",
+  description,
+  height = 420,
+  showMarkerList = true,
+  showControls = true,
+  iframeTitle = "Interactive map",
+  mapUrl,
+  onMarkerSelect,
+  selectedMarkerKey,
+  defaultSelectedMarkerKey,
+  className,
+  ...props
+}: MapViewProps) {
+  const [internalZoom, setInternalZoom] = React.useState(clampZoom(zoom))
+  const [internalSelectedKey, setInternalSelectedKey] = React.useState(defaultSelectedMarkerKey ?? markers[0]?.key)
+  const activeKey = selectedMarkerKey ?? internalSelectedKey
+  const selectedMarker = markers.find((marker) => marker.key === activeKey)
+  const resolvedUrl = mapUrl ?? getOpenStreetMapEmbedUrl(center, internalZoom, selectedMarker)
+  const externalUrl = getOpenStreetMapUrl(center, internalZoom, selectedMarker)
+
+  React.useEffect(() => {
+    setInternalZoom(clampZoom(zoom))
+  }, [zoom])
+
+  const selectMarker = (marker: MapMarker) => {
+    if (selectedMarkerKey === undefined) setInternalSelectedKey(marker.key)
+    onMarkerSelect?.(marker)
+  }
+
+  return (
+    <section data-slot="map-view" className={cn("grid min-w-0 gap-3 rounded-lg border bg-card p-3 shadow-sm", className)} {...props}>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          {title ? <h3 className="text-base font-semibold tracking-tight">{title}</h3> : null}
+          {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+        </div>
+        {showControls ? (
+          <div className="flex items-center gap-1">
+            <Button type="button" size="icon-sm" variant="outline" iconOnly aria-label="Zoom out" onClick={() => setInternalZoom((value) => clampZoom(value - 1))}><MinusIcon /></Button>
+            <Badge variant="outline" tone="muted">{internalZoom}x</Badge>
+            <Button type="button" size="icon-sm" variant="outline" iconOnly aria-label="Zoom in" onClick={() => setInternalZoom((value) => clampZoom(value + 1))}><PlusIcon /></Button>
+            <Button type="button" size="icon-sm" variant="outline" iconOnly aria-label="Open in OpenStreetMap" onClick={() => window.open(externalUrl, "_blank", "noopener,noreferrer")}><ExternalLinkIcon /></Button>
+          </div>
+        ) : null}
+      </div>
+
+      <div className={cn("grid gap-3", showMarkerList && markers.length ? "lg:grid-cols-[minmax(0,1fr)_18rem]" : "")}>
+        <div className="relative overflow-hidden rounded-lg border bg-muted" style={{ height }}>
+          <iframe title={iframeTitle} src={resolvedUrl} className="absolute inset-0 size-full border-0" loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
+          {selectedMarker ? (
+            <div className="absolute left-3 top-3 max-w-[calc(100%-1.5rem)] rounded-lg border bg-background/95 p-3 text-sm shadow-lg backdrop-blur">
+              <div className="flex items-center gap-2 font-medium"><LocateFixedIcon className="size-4 text-primary" />{selectedMarker.label}</div>
+              {selectedMarker.description ? <p className="mt-1 text-xs text-muted-foreground">{selectedMarker.description}</p> : null}
+            </div>
+          ) : null}
+        </div>
+
+        {showMarkerList && markers.length ? (
+          <div data-slot="map-marker-list" className="grid content-start gap-2">
+            {markers.map((marker) => {
+              const selected = marker.key === activeKey
+              return (
+                <button
+                  key={marker.key}
+                  type="button"
+                  aria-pressed={selected}
+                  className="grid gap-1 rounded-lg border bg-background p-3 text-left text-sm outline-none transition hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-primary aria-pressed:bg-primary/5"
+                  onClick={() => selectMarker(marker)}
+                >
+                  <span className="flex items-center justify-between gap-2">
+                    <span className="flex min-w-0 items-center gap-2 font-medium"><MapPinIcon className="size-4 shrink-0 text-primary" /><span className="truncate">{marker.label}</span></span>
+                    <Badge size="sm" tone={marker.tone ?? "muted"} showDot>{selected ? "selected" : "marker"}</Badge>
+                  </span>
+                  {marker.description ? <span className="text-xs text-muted-foreground">{marker.description}</span> : null}
+                  <span className="text-[11px] text-muted-foreground">{marker.latitude.toFixed(4)}, {marker.longitude.toFixed(4)}</span>
+                </button>
+              )
+            })}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+export { MapView }