@squadbase/vantage 0.7.1-dev1.9d223a2 → 0.7.1-dev1.bb6bd72

package/registry/ui/delta.tsx

@@ -193,7 +193,7 @@ const deltaVariants = cva(
   {
     variants: {
       variant: {
-        badge: "h-5 rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
+        badge: "h-5 rounded-md px-2 py-0.5 text-xs font-medium [&>svg]:size-3",
         inline: "text-sm [&>svg]:size-3.5",
       },
       sentiment: {
@@ -203,9 +203,9 @@ const deltaVariants = cva(
       },
     },
     compoundVariants: [
-      { variant: "badge", sentiment: "positive", className: "border-positive/20 bg-positive-subtle dark:border-positive/25" },
-      { variant: "badge", sentiment: "negative", className: "border-negative/20 bg-negative-subtle dark:border-negative/25" },
-      { variant: "badge", sentiment: "neutral", className: "border-neutral/20 bg-neutral-subtle dark:border-neutral/25" },
+      { variant: "badge", sentiment: "positive", className: "bg-positive-subtle" },
+      { variant: "badge", sentiment: "negative", className: "bg-negative-subtle" },
+      { variant: "badge", sentiment: "neutral", className: "bg-neutral-subtle" },
     ],
     defaultVariants: {
       variant: "badge",
@@ -287,6 +287,8 @@ export function deltaAriaLabel(
   return t.change(label, change === "points" ? amount.replace(/pt$/, t.points) : amount, direction === "up")
 }
 
+const SENTIMENT_TEXT = { positive: "text-positive", negative: "text-negative", neutral: "text-neutral" } as const
+
 export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
   (
     {
@@ -330,18 +332,41 @@ export const Delta = forwardRef<HTMLSpanElement, DeltaProps>(
         data-sentiment={result.sentiment}
         aria-label={deltaAriaLabel(result, locale, display, format, changeDigits)}
         className={cn(
-          deltaVariants({ variant, sentiment: result.sentiment }),
+          variant === "badge"
+            ? "inline-flex w-fit shrink-0 items-center gap-1.5 font-medium whitespace-nowrap tabular-nums"
+            : deltaVariants({ variant, sentiment: result.sentiment }),
+          // The chip carries the colour of the change; the root repeats it for the "—" case and for `className` consumers.
+          variant === "badge" && SENTIMENT_TEXT[result.sentiment],
           !comparable && "text-muted-foreground",
           className,
         )}
         {...props}
       >
-        {comparable && <Icon aria-hidden="true" />}
-        <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
-        {showLabel && (
-          <span aria-hidden="true" className="font-normal text-muted-foreground">
-            {result.label}
-          </span>
+        {variant === "badge" ? (
+          <>
+            <span
+              data-slot="delta-chip"
+              className={cn(deltaVariants({ variant, sentiment: result.sentiment }), !comparable && "text-muted-foreground")}
+            >
+              {comparable && <Icon aria-hidden="true" />}
+              <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
+            </span>
+            {showLabel && (
+              <span aria-hidden="true" className="text-xs font-normal text-muted-foreground">
+                {result.label}
+              </span>
+            )}
+          </>
+        ) : (
+          <>
+            {comparable && <Icon aria-hidden="true" />}
+            <span aria-hidden="true">{text ?? DELTA_NOT_COMPARABLE}</span>
+            {showLabel && (
+              <span aria-hidden="true" className="font-normal text-muted-foreground">
+                {result.label}
+              </span>
+            )}
+          </>
         )}
       </span>
     )

package/registry/ui/donut-chart.tsx

@@ -176,10 +176,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
- */
-const ChartFrameContext = createContext(false)
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
+ */
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -403,6 +418,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -2278,6 +2295,10 @@ function legendLines(items: readonly string[], plotWidth?: number, reserve = 0):
 
 /** Width (px) kept free at the legend's right for the PNG action buttons (two 32px buttons + gaps). */
 const ACTIONS_RESERVE = 80
+/** Bars stay slim on wide cards (px); stacked segments round all corners and are parted by a hairline of the surface colour (px). */
+const BAR_MAX_WIDTH = 40
+const BAR_RADIUS = 3
+const STACK_GAP = 1.5
 
 /** Room (px) one time label (`2026年1月`) needs, gap included. */
 const TIME_LABEL_WIDTH = 80
@@ -2491,6 +2512,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const compared = cartesianSeriesValues(data, [categories[compIdx]!], "default")[0]!
     return categories.map((_, i) => (i === compIdx ? compared : main[mainIdx.indexOf(i)]!))
   })()
+  // Any negative bar: the part lays out the diverging view itself (a solid zero line, category labels kept at the axis end).
+  const diverging = kind === "bar" && values.some((s) => s.some((v) => typeof v === "number" && v < 0))
   const comparisonColor = guideColor ? withAlpha(guideColor, COMPARISON_OPACITY) : undefined
 
   /* -- x labels: the actual rows, then the forecast rows that extend them */
@@ -2700,15 +2723,17 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     const seriesData = pad(values[c]!)
     if (kind === "bar") {
       const rounded = horizontalBars ? [0, 4, 4, 0] : [4, 4, 0, 0]
-      // Stacked: only the topmost segment is rounded.
-      const radius = stacked && c !== categories.length - 1 ? 0 : rounded
+      // Stacked: every segment is rounded, with a hairline of the surface colour between segments (the gap).
+      const radius = stacked ? BAR_RADIUS : rounded
+      const gapStyle = stacked && labelBackground ? { borderColor: labelBackground, borderWidth: STACK_GAP } : {}
       return {
         id: SERIES_ID_PREFIX + category,
         type: "bar" as const,
         name: category,
         stack: stacked ? "total" : undefined,
         barCategoryGap,
-        itemStyle: { color, borderRadius: radius },
+        barMaxWidth: BAR_MAX_WIDTH,
+        itemStyle: { color, borderRadius: radius, ...gapStyle },
         markPoint: markPointFor(c, solid),
         markLine: undefined,
         data: seriesData.map((value, i) => {
@@ -3004,6 +3029,14 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       },
     })
   }
+  if (diverging) {
+    markLines.push({
+      name: "zero",
+      [horizontalBars ? "xAxis" : "yAxis"]: 0,
+      lineStyle: { type: "solid", width: 1, color: guideColor },
+      label: { show: false },
+    })
+  }
   if (forecast) {
     const forecastSpan =
       plotWidth && labels.length > 1
@@ -3149,6 +3182,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     show: horizontalBars ? showYAxis : showXAxis,
     boundaryGap: kind === "bar",
     inverse: horizontalBars,
+    // Diverging: the axis stays at the plot's edge (not at 0, where labels would hit the negative bars); the zero line is a mark line.
+    axisLine: diverging ? { show: false, onZero: false } : undefined,
     axisTick: { show: false },
     axisLabel: {
       hideOverlap: true,
@@ -3251,7 +3286,7 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
       // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
       ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
         ? { left: 0, right: 0 }
-        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
+        : { left: 0, right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",

package/registry/ui/echart.tsx

@@ -40,6 +40,7 @@
  * import { ScatterChart } from "echarts/charts"
  * use([ScatterChart])
  */
+import type { FocusEvent, KeyboardEvent } from "react"
 import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
 import { init, use } from "echarts/core"
 import { BarChart, CustomChart, LineChart, PieChart } from "echarts/charts"
@@ -193,6 +194,80 @@ function useLocale(locale?: string | null): string {
   return locale || page
 }
 
+/* ---------- inlined from @squadbase/squadkit registry/lib/chart-keyboard.ts (internal to @squadbase/vantage) ---------- */
+
+interface ChartPoint {
+  /** Index in the option's `series` (what `dispatchAction` takes as `seriesIndex`). */
+  series: number
+  index: number
+}
+
+interface ChartKeyboardSeries {
+  /** Index in the option's `series`. */
+  series: number
+  count: number
+}
+
+type Loose = Record<string, unknown>
+
+const asList = (v: unknown): Loose[] => (Array.isArray(v) ? (v as Loose[]) : v && typeof v === "object" ? [v as Loose] : [])
+
+/** The line / bar / pie series that have data, in option order. */
+function chartKeyboardSeries(option: EChartsOption): ChartKeyboardSeries[] {
+  const out: ChartKeyboardSeries[] = []
+  asList(option.series).forEach((s, series) => {
+    if ((s.type === "line" || s.type === "bar" || s.type === "pie") && Array.isArray(s.data) && s.data.length > 0) {
+      out.push({ series, count: s.data.length })
+    }
+  })
+  return out
+}
+
+/**
+ * Where `key` takes the cursor from `from` (`null` = nothing selected yet → the first point).
+ * Left / Right walk the data index (no wrap), Up / Down switch series (only with more than one),
+ * Home / End jump to the first / last index. `null` when the key does nothing.
+ */
+function moveChartPoint(from: ChartPoint | null, key: string, series: ChartKeyboardSeries[]): ChartPoint | null {
+  if (series.length === 0) return null
+  const pos = (n: number, index: number): ChartPoint => ({ series: series[n]!.series, index: Math.min(index, series[n]!.count - 1) })
+  if (!from) return pos(0, 0)
+  const n = Math.max(0, series.findIndex((s) => s.series === from.series))
+  const last = series[n]!.count - 1
+  switch (key) {
+    case "ArrowRight": return from.index >= last ? null : pos(n, from.index + 1)
+    case "ArrowLeft": return from.index <= 0 ? null : pos(n, from.index - 1)
+    case "Home": return pos(n, 0)
+    case "End": return pos(n, last)
+    case "ArrowDown": return n + 1 < series.length ? pos(n + 1, from.index) : null
+    case "ArrowUp": return n > 0 ? pos(n - 1, from.index) : null
+    default: return null
+  }
+}
+
+/** "series, category, value" for a point, the value written the way the tooltip writes it (`tooltip.valueFormatter`). */
+function describeChartPoint(option: EChartsOption, point: ChartPoint): string {
+  const s = asList(option.series)[point.series]
+  if (!s) return ""
+  const item = (s.data as unknown[])[point.index]
+  const obj = item && typeof item === "object" && !Array.isArray(item) ? (item as Loose) : null
+  const raw = obj ? obj.value : item
+  const value = Array.isArray(raw) ? raw[raw.length - 1] : raw
+  const axisName = (axis: unknown): string | undefined => {
+    const a = asList(axis)[0]
+    if (!a || a.type !== "category" || !Array.isArray(a.data)) return undefined
+    const c = a.data[point.index]
+    return String(c && typeof c === "object" ? ((c as Loose).value ?? "") : c)
+  }
+  const category =
+    s.type === "pie"
+      ? (obj?.name as string | undefined)
+      : (axisName(option.xAxis) ?? axisName(option.yAxis) ?? (Array.isArray(raw) ? String(raw[0]) : obj?.name as string | undefined))
+  const fmt = asList(option.tooltip)[0]?.valueFormatter
+  const shown = value == null ? "" : typeof fmt === "function" ? String((fmt as (v: unknown) => unknown)(value)) : String(value)
+  return [s.name, category, shown].filter((p) => p != null && p !== "").join(", ")
+}
+
 /* ---------- inlined from @squadbase/squadkit registry/lib/chart-theme.ts (internal to @squadbase/vantage) ---------- */
 
 /**
@@ -206,10 +281,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -433,6 +523,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -1127,6 +1219,63 @@ export const EChart = forwardRef<HTMLDivElement, EChartProps>(function EChart(
   // 高さの解決: height prop を渡した場合はインライン style が勝つ。未指定なら
   // h-[400px] をデフォルトで当て、className の高さクラスに後勝ちさせる。
   const inFrame = useContext(ChartFrameContext)
+  const claimImage = inFrame && inFrame.image ? inFrame.claim : undefined
+  // In a ChartFrame the canvas takes over the frame's role="img" so the action buttons stay outside it.
+  useEffect(() => claimImage?.(), [claimImage])
+  // Keyboard reading: the canvas takes focus, arrows walk the points, the tooltip is the mouse one.
+  const keyboardSeries = useMemo(() => chartKeyboardSeries(option), [option])
+  const keyboard = keyboardSeries.length > 0 && !loading
+  const cursorRef = useRef<ChartPoint | null>(null)
+  const [announcement, setAnnouncement] = useState("")
+  const hideCursor = useCallback(() => {
+    const at = cursorRef.current
+    if (!at || !instance || instance.isDisposed()) return
+    instance.dispatchAction({ type: "downplay", seriesIndex: at.series, dataIndex: at.index })
+    instance.dispatchAction({ type: "hideTip" })
+  }, [instance])
+  const showCursor = useCallback(
+    (to: ChartPoint) => {
+      if (!instance || instance.isDisposed()) return
+      hideCursor()
+      cursorRef.current = to
+      instance.dispatchAction({ type: "highlight", seriesIndex: to.series, dataIndex: to.index })
+      instance.dispatchAction({ type: "showTip", seriesIndex: to.series, dataIndex: to.index })
+      setAnnouncement(describeChartPoint(option, to))
+    },
+    [instance, option, hideCursor],
+  )
+  const handleFocus = useCallback(
+    (e: FocusEvent<HTMLDivElement>) => {
+      // A mouse click focuses too, but only keyboard focus starts the reading (the mouse has its own tooltip).
+      let visible = true
+      try { visible = e.currentTarget.matches(":focus-visible") } catch { /* no :focus-visible support */ }
+      if (visible) showCursor(cursorRef.current ?? moveChartPoint(null, "", keyboardSeries)!)
+    },
+    [showCursor, keyboardSeries],
+  )
+  const handleBlur = useCallback(() => {
+    hideCursor()
+    setAnnouncement("")
+  }, [hideCursor])
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.altKey || e.ctrlKey || e.metaKey) return
+      if (e.key === "Escape") {
+        hideCursor()
+        return
+      }
+      if (!["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) return
+      const to = moveChartPoint(cursorRef.current, e.key, keyboardSeries)
+      // Up / Down with one series do nothing, so the page keeps scrolling.
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        if (!to) return
+      }
+      e.preventDefault()
+      if (to) showCursor(to)
+    },
+    [hideCursor, showCursor, keyboardSeries],
+  )
+
   const styleHeight =
     height == null ? undefined : typeof height === "number" ? `${height}px` : height
 
@@ -1137,14 +1286,25 @@ export const EChart = forwardRef<HTMLDivElement, EChartProps>(function EChart(
       className={cn("group relative w-full", height == null && "h-[400px]", className)}
       style={styleHeight != null ? { height: styleHeight } : undefined}
     >
-      {/* `role="img"` wraps the canvas only, so the action buttons stay reachable. Inside a ChartFrame the plot area is the one image. */}
+      {/* `role="img"` wraps the canvas only, so the action buttons stay reachable. Inside a ChartFrame the canvas takes the frame's name and description (no role in a group frame). */}
       <div
         ref={containerRef}
         data-slot="echart-canvas"
-        className="h-full w-full"
-        role={inFrame ? undefined : "img"}
-        aria-label={inFrame ? undefined : (ariaLabel ?? t.chart)}
+        className={cn("h-full w-full", keyboard && "rounded-lg outline-none focus-visible:ring-3 focus-visible:ring-ring/50")}
+        tabIndex={keyboard ? 0 : undefined}
+        onFocus={keyboard ? handleFocus : undefined}
+        onBlur={keyboard ? handleBlur : undefined}
+        onKeyDown={keyboard ? handleKeyDown : undefined}
+        role={inFrame && !inFrame.claimed ? undefined : "img"}
+        aria-label={inFrame ? (inFrame.claimed ? inFrame.ariaLabel : undefined) : (ariaLabel ?? t.chart)}
+        aria-labelledby={inFrame && inFrame.claimed ? inFrame.ariaLabelledBy : undefined}
+        aria-describedby={inFrame && inFrame.claimed ? inFrame.ariaDescribedBy : undefined}
       />
+      {keyboard && (
+        <div data-slot="echart-live" className="sr-only" aria-live="polite" aria-atomic="true">
+          {announcement}
+        </div>
+      )}
       {actions && (
         <div
           data-slot="echart-actions"

package/registry/ui/file-dropzone.tsx

@@ -0,0 +1,143 @@
+// Copied by `vantage add ui file-dropzone`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/file-dropzone.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { UploadIcon, XIcon } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+
+type FileDropzoneProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  /** Comma-separated types, same syntax as `<input accept>` (e.g. ".csv,.xlsx" or "text/*"). */
+  accept?: string
+  /** Largest allowed file size in bytes. */
+  maxSize?: number
+  multiple?: boolean
+  disabled?: boolean
+  onFilesChange?: (files: File[]) => void
+}
+
+function matchesAccept(file: File, accept?: string) {
+  if (!accept) return true
+  const name = file.name.toLowerCase()
+  return accept.split(",").some((raw) => {
+    const t = raw.trim().toLowerCase()
+    if (!t) return false
+    if (t.startsWith(".")) return name.endsWith(t)
+    if (t.endsWith("/*")) return file.type.toLowerCase().startsWith(t.slice(0, -1))
+    return file.type.toLowerCase() === t
+  })
+}
+
+function formatSize(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+/** Drag & drop or click to pick files. Wrong type / too large files are rejected with a message and never reach `onFilesChange`. */
+function FileDropzone({
+  accept,
+  maxSize,
+  multiple = false,
+  disabled = false,
+  onFilesChange,
+  className,
+  ...props
+}: FileDropzoneProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [files, setFiles] = React.useState<File[]>([])
+  const [error, setError] = React.useState<string | null>(null)
+  const [dragOver, setDragOver] = React.useState(false)
+
+  const commit = (next: File[]) => {
+    setFiles(next)
+    onFilesChange?.(next)
+  }
+
+  const accepting = (incoming: File[]) => {
+    const list = multiple ? incoming : incoming.slice(0, 1)
+    const badType = list.find((f) => !matchesAccept(f, accept))
+    if (badType) return setError(`${badType.name}: this file type isn't accepted${accept ? ` (${accept})` : ""}.`)
+    const tooBig = maxSize === undefined ? undefined : list.find((f) => f.size > maxSize)
+    if (tooBig) return setError(`${tooBig.name}: larger than ${formatSize(maxSize!)}.`)
+    setError(null)
+    commit(multiple ? [...files, ...list] : list)
+  }
+
+  return (
+    <div data-slot="file-dropzone" className={cn("flex flex-col gap-2", className)} {...props}>
+      <button
+        type="button"
+        disabled={disabled}
+        data-state={error ? "error" : dragOver ? "drag-over" : "idle"}
+        onClick={() => inputRef.current?.click()}
+        onDragOver={(e) => {
+          e.preventDefault()
+          if (!disabled) setDragOver(true)
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={(e) => {
+          e.preventDefault()
+          setDragOver(false)
+          if (!disabled) accepting(Array.from(e.dataTransfer.files))
+        }}
+        className={cn(
+          "flex flex-col items-center gap-1 rounded-lg border border-dashed border-border bg-card px-6 py-8 text-sm text-muted-foreground outline-none transition-colors hover:bg-muted focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+          "data-[state=drag-over]:border-primary data-[state=drag-over]:bg-muted data-[state=error]:border-destructive"
+        )}
+      >
+        <UploadIcon className="size-5" aria-hidden />
+        <span className="font-medium text-foreground">Drop {multiple ? "files" : "a file"} here, or click to browse</span>
+        {(accept || maxSize !== undefined) && (
+          <span className="text-xs">
+            {[accept, maxSize !== undefined && `up to ${formatSize(maxSize)}`].filter(Boolean).join(" · ")}
+          </span>
+        )}
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        hidden
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        data-slot="file-dropzone-input"
+        onChange={(e) => {
+          accepting(Array.from(e.target.files ?? []))
+          e.target.value = ""
+        }}
+      />
+      {error && (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      )}
+      {files.length > 0 && (
+        <ul className="flex flex-col gap-1 text-sm">
+          {files.map((f, i) => (
+            <li key={`${f.name}-${i}`} className="flex items-center justify-between gap-2 rounded-md bg-muted px-2 py-1">
+              <span className="truncate">{f.name}</span>
+              <span className="flex items-center gap-1 text-xs text-muted-foreground tabular-nums">
+                {formatSize(f.size)}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-6"
+                  aria-label={`Remove ${f.name}`}
+                  onClick={() => commit(files.filter((_, j) => j !== i))}
+                >
+                  <XIcon />
+                </Button>
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export { FileDropzone, type FileDropzoneProps }

package/registry/ui/filter-bar.tsx

@@ -17,12 +17,21 @@ import {
   type HTMLAttributes,
   type ReactNode,
 } from "react"
-import { ChevronDown, X } from "lucide-react"
+import { ChevronDown, Plus, X } from "lucide-react"
 
 import { cn } from "@squadbase/vantage/ui"
 import { Badge } from "@squadbase/vantage/ui"
 import { Button } from "@squadbase/vantage/ui"
 import { Checkbox } from "@squadbase/vantage/ui"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@squadbase/vantage/ui"
 import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@squadbase/vantage/ui"
 import type { FilterConfig, FilterOption, FilterValues } from "@squadbase/vantage/components"
@@ -177,6 +186,7 @@ const FilterBarContext = createContext<FilterBarContextValue | null>(null)
 const TEXT = {
   ja: {
     filters: "フィルター",
+    addFilter: "フィルターを追加",
     selected: (count: number) => ` (${count}件選択中)`,
     remove: (filter: string, option: string) => `${filter}: ${option} を削除`,
     clear: "クリア",
@@ -184,6 +194,7 @@ const TEXT = {
   },
   en: {
     filters: "Filters",
+    addFilter: "Add filter",
     selected: (count: number) => ` (${count} selected)`,
     remove: (filter: string, option: string) => `Remove ${filter}: ${option}`,
     clear: "Clear",
@@ -357,6 +368,68 @@ export function FilterBarMultiSelect({
 }
 FilterBarMultiSelect.displayName = "FilterBarMultiSelect"
 
+/* ------------------------------------------------------------ add filter */
+
+export interface FilterBarAddFilterProps {
+  /** Conditions offered in the menu. Only `select` / `multi-select` entries with options are listed. */
+  filters: FilterConfig[]
+  className?: string
+}
+
+/** A menu that lists the conditions; each opens a submenu of values to check. Checked values show as chips. */
+export function FilterBarAddFilter({ filters, className }: FilterBarAddFilterProps) {
+  const { value, onChange } = useFilterBar()
+  const t = useText()
+
+  const toggle = (filter: FilterConfig, option: string) => {
+    if (filter.type === "multi-select") {
+      const current = (value[filter.key] as string[] | undefined) ?? []
+      const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option]
+      onChange({ ...value, [filter.key]: next.length > 0 ? next : undefined })
+    } else {
+      onChange({ ...value, [filter.key]: value[filter.key] === option ? undefined : option })
+    }
+  }
+  const isChecked = (filter: FilterConfig, option: string) => {
+    const v = value[filter.key]
+    return Array.isArray(v) ? v.includes(option) : v === option
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<Button variant="outline" size="sm" className={cn("h-8 gap-1", className)} />}
+        data-slot="filter-bar-add-filter"
+      >
+        <Plus className="size-3.5" aria-hidden="true" />
+        {t.addFilter}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-48">
+        {filters
+          .filter((f) => (f.type === "select" || f.type === "multi-select") && f.options?.length)
+          .map((filter) => (
+            <DropdownMenuSub key={filter.key}>
+              <DropdownMenuSubTrigger>{filter.label}</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                {filter.options?.map((option) => (
+                  <DropdownMenuCheckboxItem
+                    key={option.value}
+                    checked={isChecked(filter, option.value)}
+                    disabled={option.disabled}
+                    onCheckedChange={() => toggle(filter, option.value)}
+                  >
+                    {option.label}
+                  </DropdownMenuCheckboxItem>
+                ))}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+FilterBarAddFilter.displayName = "FilterBarAddFilter"
+
 /* ---------------------------------------------------------- active chips */
 
 export interface FilterBarActiveChipsProps {