@monkey-mini-app/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,138 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./src/components/accordion.tsx"
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./src/components/alert-dialog.tsx"
+export { Alert, AlertTitle, AlertDescription, AlertAction } from "./src/components/alert.tsx"
+export { AspectRatio } from "./src/components/aspect-ratio.tsx"
+export { Attachment, AttachmentGroup, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentActions, AttachmentAction, AttachmentTrigger } from "./src/components/attachment.tsx"
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge } from "./src/components/avatar.tsx"
+export { Badge, badgeVariants } from "./src/components/badge.tsx"
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "./src/components/breadcrumb.tsx"
+export { BubbleGroup, Bubble, BubbleContent, BubbleReactions } from "./src/components/bubble.tsx"
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from "./src/components/button-group.tsx"
+export { Button, buttonVariants } from "./src/components/button.tsx"
+export { Calendar, CalendarDayButton } from "./src/components/calendar.tsx"
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "./src/components/card.tsx"
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle } from "./src/components/chart.tsx"
+export { Checkbox } from "./src/components/checkbox.tsx"
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./src/components/collapsible.tsx"
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./src/components/combobox.tsx"
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "./src/components/command.tsx"
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup } from "./src/components/context-menu.tsx"
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./src/components/dialog.tsx"
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from "./src/components/drawer.tsx"
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from "./src/components/dropdown-menu.tsx"
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from "./src/components/empty.tsx"
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle } from "./src/components/field.tsx"
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "./src/components/hover-card.tsx"
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea } from "./src/components/input-group.tsx"
+export { Input } from "./src/components/input.tsx"
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter } from "./src/components/item.tsx"
+export { Kbd, KbdGroup } from "./src/components/kbd.tsx"
+export { Label } from "./src/components/label.tsx"
+export { Marker, MarkerIcon, MarkerContent, markerVariants } from "./src/components/marker.tsx"
+export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent } from "./src/components/menubar.tsx"
+export { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "./src/components/message-scroller.tsx"
+export { MessageGroup, Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader } from "./src/components/message.tsx"
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./src/components/native-select.tsx"
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner } from "./src/components/navigation-menu.tsx"
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./src/components/pagination.tsx"
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./src/components/popover.tsx"
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue } from "./src/components/progress.tsx"
+export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle } from "./src/components/questionnaire.tsx"
+export { RadioGroup, RadioGroupItem } from "./src/components/radio-group.tsx"
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./src/components/resizable.tsx"
+export { ScrollArea, ScrollBar } from "./src/components/scroll-area.tsx"
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./src/components/select.tsx"
+export { Separator } from "./src/components/separator.tsx"
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from "./src/components/sheet.tsx"
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from "./src/components/sidebar.tsx"
+export { Skeleton } from "./src/components/skeleton.tsx"
+export { Slider } from "./src/components/slider.tsx"
+export { Spinner } from "./src/components/spinner.tsx"
+export { Switch } from "./src/components/switch.tsx"
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./src/components/table.tsx"
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from "./src/components/tabs.tsx"
+export { Textarea } from "./src/components/textarea.tsx"
+export { Toaster, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, createToastManager, toast, useToastManager } from "./src/components/toast.tsx"
+export { ToggleGroup, ToggleGroupItem } from "./src/components/toggle-group.tsx"
+export { Toggle, toggleVariants } from "./src/components/toggle.tsx"
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./src/components/tooltip.tsx"
+export { Autocomplete } from "./src/composites/autocomplete.tsx"
+export { Cascader } from "./src/composites/cascader.tsx"
+export { ColorPicker } from "./src/composites/color-picker.tsx"
+export { ConfirmDialog } from "./src/composites/confirm-dialog.tsx"
+export { Copyable } from "./src/composites/copyable.tsx"
+export { CurrencyInput } from "./src/composites/currency-input.tsx"
+export { DateChrome } from "./src/composites/date-chrome.tsx"
+export { DatePicker } from "./src/composites/date-picker.tsx"
+export { DateRangePicker } from "./src/composites/date-range-picker.tsx"
+export { DateTimePicker } from "./src/composites/date-time-picker.tsx"
+export { DateTimeRangePicker } from "./src/composites/date-time-range-picker.tsx"
+export { parseDuration, formatDuration, DurationInput } from "./src/composites/duration-input.tsx"
+export { MiniCalendar } from "./src/composites/mini-calendar.tsx"
+export { NumberField } from "./src/composites/number-field.tsx"
+export { PasswordField } from "./src/composites/password-field.tsx"
+export { PhoneInput } from "./src/composites/phone-input.tsx"
+export { Rating } from "./src/composites/rating.tsx"
+export { RelativeDatePicker } from "./src/composites/relative-date-picker.tsx"
+export { SearchInput } from "./src/composites/search-input.tsx"
+export { SliderRange } from "./src/composites/slider-range.tsx"
+export { TagInput } from "./src/composites/tag-input.tsx"
+export { TimeWheel, TimePicker } from "./src/composites/time-picker.tsx"
+export { TimeRangePicker } from "./src/composites/time-range-picker.tsx"
+export { listTimezones, TimezoneSelect } from "./src/composites/timezone-select.tsx"
+export { Transfer } from "./src/composites/transfer.tsx"
+export { UserPicker } from "./src/composites/user-picker.tsx"
+export { CodeBlock } from "./src/products/code-block.tsx"
+export { CodeEditor } from "./src/products/code-editor.tsx"
+export { DataGrid } from "./src/products/data-grid.tsx"
+export { DiffViewer } from "./src/products/diff-viewer.tsx"
+export { EventCalendar } from "./src/products/event-calendar.tsx"
+export { exportCsv } from "./src/products/export-csv.ts"
+export { FileDropzone } from "./src/products/file-dropzone.tsx"
+export { Gantt } from "./src/products/gantt.tsx"
+export { parseInline, parseJiraWiki } from "./src/products/jira-wiki-parse.ts"
+export { JiraWiki } from "./src/products/jira-wiki.tsx"
+export { JqlInput } from "./src/products/jql-input.tsx"
+export { jqlLanguage, jqlCompletion, defaultJqlFields, defaultJqlFunctions } from "./src/products/jql-language.ts"
+export { JsonViewer } from "./src/products/json-viewer.tsx"
+export { KanbanIssuePanel } from "./src/products/kanban-issue-panel.tsx"
+export { Kanban } from "./src/products/kanban.tsx"
+export { LogViewer } from "./src/products/log-viewer.tsx"
+export { MarkdownEditor } from "./src/products/markdown-editor.tsx"
+export { Markdown } from "./src/products/markdown.tsx"
+export { RichTextEditor } from "./src/products/rich-text-editor.tsx"
+export { SortableList } from "./src/products/sortable-list.tsx"
+export { Stepper } from "./src/products/stepper.tsx"
+export { Timeline } from "./src/products/timeline.tsx"
+export { TreeView } from "./src/products/tree-view.tsx"
+export { ActivityFeed } from "./src/blocks/activity-feed.tsx"
+export { AppShell } from "./src/blocks/app-shell.tsx"
+export { AttachmentGallery } from "./src/blocks/attachment-gallery.tsx"
+export { StackedBarChart } from "./src/blocks/bar-chart.tsx"
+export { CommentThread } from "./src/blocks/comment-thread.tsx"
+export { DescriptionList } from "./src/blocks/description-list.tsx"
+export { DetailPanel } from "./src/blocks/detail-panel.tsx"
+export { DonutChart } from "./src/blocks/donut-chart.tsx"
+export { EnvBadge } from "./src/blocks/env-badge.tsx"
+export { FileTree } from "./src/blocks/file-tree.tsx"
+export { FilterBar } from "./src/blocks/filter-bar.tsx"
+export { Gauge } from "./src/blocks/gauge.tsx"
+export { NotificationCenter } from "./src/blocks/notification-center.tsx"
+export { PageHeader } from "./src/blocks/page-header.tsx"
+export { ProgressRing } from "./src/blocks/progress-ring.tsx"
+export { RadarChart } from "./src/blocks/radar-chart.tsx"
+export { RequestInspector } from "./src/blocks/request-inspector.tsx"
+export { RunTimeline } from "./src/blocks/run-timeline.tsx"
+export { Scrollspy } from "./src/blocks/scrollspy.tsx"
+export { SeverityChip } from "./src/blocks/severity-chip.tsx"
+export { Sparkline } from "./src/blocks/sparkline.tsx"
+export { StatCard } from "./src/blocks/stat-card.tsx"
+export { statusTone, StatusBadge } from "./src/blocks/status-badge.tsx"
+export { Terminal } from "./src/blocks/terminal.tsx"
+export { TestStepList } from "./src/blocks/test-step-list.tsx"
+export { TrendCard } from "./src/blocks/trend-card.tsx"
+export { cn } from "./src/lib/utils.ts"
+export { Icon } from "./src/lib/icons.tsx"
+export { IlluServerStatus, IlluAccessDenied, IlluPageNotFound, IlluSearch, IlluDataProcessing, IlluBugFixing, IlluEmpty, IlluNoData, IlluLoading, IlluCodeReview } from "./src/lib/illustrations.tsx"
+export { UiProvider, useUiI18n, useUiMessages, useUiLocale, useDateLocale, useLabels, en, zh, dictionaries } from "./src/i18n/context.tsx"
+export { useIsMobile } from "./src/hooks/use-mobile.ts"

package/dist/manifest.json

@@ -0,0 +1,11 @@
+{
+  "builtAt": "2026-08-30T11:02:56.451Z",
+  "entry": "index.js",
+  "flatExports": 138,
+  "componentFiles": 141,
+  "srcFiles": 144,
+  "css": {
+    "bytes": 215063
+  },
+  "bytes": 814789
+}

package/dist/src/blocks/activity-feed.tsx

@@ -0,0 +1,9 @@
+import { Timeline, type TimelineItem } from "@monkey-mini-app/ui/products/timeline"
+
+export function ActivityFeed({ items }: { items: TimelineItem[] }) {
+  return (
+    <div data-testid="activity-feed">
+      <Timeline items={items} />
+    </div>
+  )
+}

package/dist/src/blocks/app-shell.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react"
+
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+/**
+ * App frame: optional sidebar + header + main.
+ * @when Root layout for a mini-app page
+ * @example
+ * <AppShell sidebar={<nav />} header={<PageHeader title="Home" />}>
+ *   {children}
+ * </AppShell>
+ */
+export function AppShell({
+  sidebar,
+  header,
+  children,
+  className,
+}: {
+  sidebar?: ReactNode
+  header?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("flex min-h-svh w-full", className)} data-testid="app-shell">
+      {sidebar ? (
+        <aside className="w-56 shrink-0 border-r bg-sidebar p-3">{sidebar}</aside>
+      ) : null}
+      <div className="flex min-w-0 flex-1 flex-col">
+        {header ? (
+          <header className="border-b px-4 py-3">{header}</header>
+        ) : null}
+        <main className="flex-1 p-4">{children}</main>
+      </div>
+    </div>
+  )
+}

package/dist/src/blocks/attachment-gallery.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import {
+  Attachment,
+  AttachmentContent,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+} from "@monkey-mini-app/ui/components/attachment"
+
+export type GalleryFile = { name: string; url?: string }
+
+export function AttachmentGallery({ files }: { files: GalleryFile[] }) {
+  return (
+    <AttachmentGroup data-testid="attachment-gallery">
+      {files.map((file) => (
+        <Attachment key={file.name}>
+          {file.url ? (
+            <AttachmentMedia>
+              <img src={file.url} alt={file.name} className="size-10 object-cover" />
+            </AttachmentMedia>
+          ) : null}
+          <AttachmentContent>
+            <AttachmentTitle>{file.name}</AttachmentTitle>
+          </AttachmentContent>
+        </Attachment>
+      ))}
+    </AttachmentGroup>
+  )
+}

package/dist/src/blocks/bar-chart.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { Bar, BarChart as ReBar, CartesianGrid, XAxis } from "recharts"
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@monkey-mini-app/ui/components/chart"
+
+export function StackedBarChart({
+  data,
+  config,
+  keys,
+}: {
+  data: Record<string, string | number>[]
+  config: ChartConfig
+  keys: string[]
+}) {
+  return (
+    <ChartContainer config={config} className="h-56 w-full" data-testid="bar-chart">
+      <ReBar accessibilityLayer data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey="label" tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {keys.map((key) => (
+          <Bar key={key} dataKey={key} stackId="a" fill={`var(--color-${key})`} />
+        ))}
+      </ReBar>
+    </ChartContainer>
+  )
+}

package/dist/src/blocks/comment-thread.tsx

@@ -0,0 +1,30 @@
+import { Avatar, AvatarFallback } from "@monkey-mini-app/ui/components/avatar"
+
+export type Comment = { id: string; author: string; body: string; time?: string }
+
+export function CommentThread({ comments }: { comments: Comment[] }) {
+  return (
+    <div className="flex flex-col gap-3" data-testid="comment-thread">
+      {comments.map((comment) => (
+        <div key={comment.id} className="flex gap-2">
+          <Avatar className="size-7">
+            <AvatarFallback className="text-[10px]">
+              {comment.author.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <div className="text-sm font-medium">
+              {comment.author}
+              {comment.time ? (
+                <span className="text-muted-foreground ml-2 text-xs font-normal">
+                  {comment.time}
+                </span>
+              ) : null}
+            </div>
+            <p className="text-sm">{comment.body}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/dist/src/blocks/description-list.tsx

@@ -0,0 +1,16 @@
+export function DescriptionList({
+  items,
+}: {
+  items: { label: string; value: string }[]
+}) {
+  return (
+    <dl className="grid grid-cols-[8rem_1fr] gap-x-3 gap-y-2 text-sm" data-testid="description-list">
+      {items.map((item) => (
+        <div key={item.label} className="contents">
+          <dt className="text-muted-foreground">{item.label}</dt>
+          <dd>{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}

package/dist/src/blocks/detail-panel.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@monkey-mini-app/ui/components/sheet"
+
+/**
+ * Right-side inspector Sheet for a selected row/entity.
+ * @when Master-detail after row/card click
+ * @example
+ * <DetailPanel open={!!id} onOpenChange={() => setId(null)} title="Run #12">{body}</DetailPanel>
+ */
+export function DetailPanel({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  children?: ReactNode
+}) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent data-testid="detail-panel">
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
+        </SheetHeader>
+        <div className="px-4 pb-4">{children}</div>
+      </SheetContent>
+    </Sheet>
+  )
+}

package/dist/src/blocks/donut-chart.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { Pie, PieChart } from "recharts"
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@monkey-mini-app/ui/components/chart"
+
+export type Slice = { name: string; value: number; fill: string }
+
+export function DonutChart({
+  data,
+  config,
+  center,
+}: {
+  data: Slice[]
+  config: ChartConfig
+  center?: string
+}) {
+  return (
+    <div className="relative" data-testid="donut-chart">
+      <ChartContainer config={config} className="mx-auto aspect-square h-48">
+        <PieChart>
+          <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+          <Pie data={data} dataKey="value" nameKey="name" innerRadius={50} />
+        </PieChart>
+      </ChartContainer>
+      {center ? (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium">
+          {center}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/dist/src/blocks/env-badge.tsx

@@ -0,0 +1,23 @@
+import { Badge } from "@monkey-mini-app/ui/components/badge"
+import { cn } from "@monkey-mini-app/ui/lib/utils"
+
+const tone: Record<string, string> = {
+  prd: "bg-destructive/15 text-destructive",
+  prod: "bg-destructive/15 text-destructive",
+  stg: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  staging: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  dev: "bg-sky-500/15 text-sky-700 dark:text-sky-400",
+  local: "bg-muted text-muted-foreground",
+}
+
+export function EnvBadge({ env }: { env: string }) {
+  return (
+    <Badge
+      variant="outline"
+      data-testid="env-badge"
+      className={cn("border-transparent uppercase", tone[env.toLowerCase()] ?? tone.local)}
+    >
+      {env}
+    </Badge>
+  )
+}

package/dist/src/blocks/file-tree.tsx

@@ -0,0 +1,5 @@
+import { TreeView, type TreeNode } from "@monkey-mini-app/ui/products/tree-view"
+
+export function FileTree({ nodes }: { nodes: TreeNode[] }) {
+  return <TreeView nodes={nodes} />
+}

package/dist/src/blocks/filter-bar.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react"
+
+/**
+ * Horizontal wrap row for filters and toolbar controls.
+ * @when Above DataGrid or any filtered list
+ * @example
+ * <FilterBar>
+ *   <DateRangePicker value={range} onChange={setRange} />
+ *   <SearchInput value={q} onChange={setQ} />
+ * </FilterBar>
+ */
+export function FilterBar({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2"
+      data-testid="filter-bar"
+    >
+      {children}
+    </div>
+  )
+}

package/dist/src/blocks/gauge.tsx

@@ -0,0 +1,13 @@
+import { ProgressRing } from "@monkey-mini-app/ui/blocks/progress-ring"
+
+export function Gauge({ value, label }: { value: number; label?: string }) {
+  return (
+    <div className="flex items-center gap-2" data-testid="gauge">
+      <ProgressRing value={value} />
+      <div>
+        <div className="text-sm font-medium">{value}%</div>
+        {label ? <div className="text-muted-foreground text-xs">{label}</div> : null}
+      </div>
+    </div>
+  )
+}

package/dist/src/blocks/notification-center.tsx

@@ -0,0 +1,22 @@
+import { Item, ItemContent, ItemDescription, ItemTitle } from "@monkey-mini-app/ui/components/item"
+
+export type NotificationItem = {
+  id: string
+  title: string
+  body?: string
+}
+
+export function NotificationCenter({ items }: { items: NotificationItem[] }) {
+  return (
+    <div className="flex flex-col gap-1" data-testid="notification-center">
+      {items.map((item) => (
+        <Item key={item.id} variant="outline">
+          <ItemContent>
+            <ItemTitle>{item.title}</ItemTitle>
+            {item.body ? <ItemDescription>{item.body}</ItemDescription> : null}
+          </ItemContent>
+        </Item>
+      ))}
+    </div>
+  )
+}

package/dist/src/blocks/page-header.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react"
+
+export type PageHeaderProps = {
+  title: string
+  description?: string
+  actions?: ReactNode
+}
+
+/**
+ * Page title row with optional description and right-side actions.
+ * @when Top of a page inside AppShell main
+ * @example
+ * <PageHeader title="QA Runs" description="Last 24h" actions={<Button>New</Button>} />
+ */
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <div
+      className="flex flex-wrap items-start justify-between gap-3"
+      data-testid="page-header"
+    >
+      <div className="flex min-w-0 flex-col gap-1">
+        <h1 className="font-heading text-xl font-medium">{title}</h1>
+        {description ? (
+          <p className="text-muted-foreground text-sm">{description}</p>
+        ) : null}
+      </div>
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}

package/dist/src/blocks/progress-ring.tsx

@@ -0,0 +1,25 @@
+export function ProgressRing({ value }: { value: number }) {
+  const clamped = Math.min(100, Math.max(0, value))
+  const r = 16
+  const c = 2 * Math.PI * r
+  const offset = c - (clamped / 100) * c
+  return (
+    <svg
+      data-testid="progress-ring"
+      viewBox="0 0 40 40"
+      className="size-10 -rotate-90"
+    >
+      <circle cx="20" cy="20" r={r} className="fill-none stroke-muted" strokeWidth="4" />
+      <circle
+        cx="20"
+        cy="20"
+        r={r}
+        className="fill-none stroke-primary"
+        strokeWidth="4"
+        strokeDasharray={c}
+        strokeDashoffset={offset}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}

package/dist/src/blocks/radar-chart.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart as ReRadar } from "recharts"
+
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@monkey-mini-app/ui/components/chart"
+
+export function RadarChart({
+  data,
+  config,
+  dataKey = "value",
+}: {
+  data: { label: string; value: number }[]
+  config: ChartConfig
+  dataKey?: string
+}) {
+  return (
+    <ChartContainer config={config} className="mx-auto aspect-square h-56" data-testid="radar-chart">
+      <ReRadar data={data}>
+        <PolarGrid />
+        <PolarAngleAxis dataKey="label" />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Radar dataKey={dataKey} fill="var(--color-value)" fillOpacity={0.35} />
+      </ReRadar>
+    </ChartContainer>
+  )
+}

package/dist/src/blocks/request-inspector.tsx

@@ -0,0 +1,34 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@monkey-mini-app/ui/components/tabs"
+import { CodeBlock } from "@monkey-mini-app/ui/products/code-block"
+
+export function RequestInspector({
+  method,
+  url,
+  request,
+  response,
+}: {
+  method: string
+  url: string
+  request?: string
+  response?: string
+}) {
+  return (
+    <div data-testid="request-inspector" className="flex flex-col gap-2">
+      <div className="font-mono text-sm">
+        <span className="font-medium">{method}</span> {url}
+      </div>
+      <Tabs defaultValue="response">
+        <TabsList>
+          <TabsTrigger value="request">Request</TabsTrigger>
+          <TabsTrigger value="response">Response</TabsTrigger>
+        </TabsList>
+        <TabsContent value="request">
+          <CodeBlock code={request ?? ""} language="json" />
+        </TabsContent>
+        <TabsContent value="response">
+          <CodeBlock code={response ?? ""} language="json" />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/dist/src/blocks/run-timeline.tsx

@@ -0,0 +1,5 @@
+import { Timeline, type TimelineItem } from "@monkey-mini-app/ui/products/timeline"
+
+export function RunTimeline({ items }: { items: TimelineItem[] }) {
+  return <Timeline items={items} />
+}