@databricks/appkit-ui 0.58.0 → 0.59.0

package/dist/react/index.d.ts

@@ -1,7 +1,10 @@
 import { GenieAttachmentResponse, GenieMessageResponse, GenieStatementResponse, GenieStreamEvent } from "../shared/src/genie.js";
+import { MetricFilter, MetricFilterOperatorName, MetricOrderBy, MetricOrderDirection, MetricPredicate } from "../shared/src/metric-filter.js";
+import { MetricViewColumnDisplay } from "../shared/src/metric-metadata.js";
 import { DATE_FIELD_PATTERNS, METADATA_DATE_PATTERNS, NAME_FIELD_PATTERNS } from "../js/constants.js";
-import { AnalyticsFormat, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, MetricRegistry, PluginRegistry, QueryRegistry, ServingAlias, ServingEndpointRegistry, TypedArrowTable, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, WarehouseState, WarehouseStatus } from "./hooks/types.js";
-import { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, ChartUITokens, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
+import { formatLabel } from "../js/format/index.js";
+import { AnalyticsFormat, GrainsForSelectedTimeDims, InferDimensionKeys, InferMeasureKeys, InferMetricRow, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, InferTimeDimensionKeys, InferTimeGrains, MetricKey, MetricRegistry, PickMetricRow, PluginRegistry, QueryRegistry, ServingAlias, ServingEndpointRegistry, TypedArrowTable, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseMetricViewOptions, UseMetricViewResult, WarehouseState, WarehouseStatus } from "./hooks/types.js";
+import { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartClickDatum, ChartColorPalette, ChartData, ChartType, ChartUITokens, ChartValueFormatter, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
 import { AreaChart } from "./charts/area/index.js";
 import { BarChart } from "./charts/bar/index.js";
 import { HeatmapChart } from "./charts/heatmap/index.js";
@@ -17,8 +20,8 @@ import { ChartWrapper, ChartWrapperProps } from "./charts/wrapper.js";
 import { NormalizedHeatmapData, normalizeChartData, normalizeHeatmapData } from "./charts/normalize.js";
 import { CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./charts/constants.js";
 import { useAllThemeColors, useChartUITokens, useThemeColors } from "./charts/theme.js";
-import { createTimeSeriesData, formatLabel, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
-import { CartesianContext, HeatmapContext, OptionBuilderContext, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
+import { createTimeSeriesData, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
+import { CartesianContext, HeatmapContext, OptionBuilderContext, applySelectionEmphasis, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
 import "./charts/index.js";
 import { formatFileSize } from "./lib/format.js";
 import { DirectoryEntry, FileBrowserLabels, FilePreview } from "./file-browser/types.js";
@@ -42,6 +45,7 @@ import { AggregatedResourceStatus, ResourceSeverity, ResourceStatus, ResourceSta
 import { ResourceKindRenderer, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusToasterOptions, useResourceStatusToaster } from "./resource-status-indicator.js";
 import { AgentChatEvent, UseAgentChatOptions, UseAgentChatResult, useAgentChat } from "./hooks/use-agent-chat.js";
 import { useAnalyticsQuery } from "./hooks/use-analytics-query.js";
+import { useMetricView } from "./hooks/use-metric-view.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { usePluginClientConfig } from "./hooks/use-plugin-config.js";
 import { UseServingInvokeOptions, UseServingInvokeResult, useServingInvoke } from "./hooks/use-serving-invoke.js";
@@ -107,4 +111,4 @@ import "./ui/index.js";
 import { Variant, VariantProps } from "./ui-variants/variant.js";
 import { Variants, VariantsProps } from "./ui-variants/variants.js";
 import "./ui-variants/index.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChatEvent, AggregatedResourceStatus, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnalyticsFormat, AreaChart, AreaChartProps, AreaChartSpecificProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BarChartProps, BarChartSpecificProps, BaseChart, BaseChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CartesianContext, ChartBaseProps, ChartColorPalette, ChartData, ChartInference, ChartType, ChartUITokens, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataFormat, DataProps, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryEntry, DirectoryList, DirectoryListProps, DonutChart, DonutChartProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LineChartProps, LineChartSpecificProps, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricRegistry, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, Variant, VariantProps, Variants, VariantsProps, WarehouseState, WarehouseStatus, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChatEvent, AggregatedResourceStatus, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnalyticsFormat, AreaChart, AreaChartProps, AreaChartSpecificProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BarChartProps, BarChartSpecificProps, BaseChart, BaseChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CartesianContext, ChartBaseProps, ChartClickDatum, ChartColorPalette, ChartData, ChartInference, ChartType, ChartUITokens, ChartValueFormatter, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataFormat, DataProps, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryEntry, DirectoryList, DirectoryListProps, DonutChart, DonutChartProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, GrainsForSelectedTimeDims, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferDimensionKeys, InferMeasureKeys, InferMetricRow, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, InferTimeDimensionKeys, InferTimeGrains, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LineChartProps, LineChartSpecificProps, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricFilter, MetricFilterOperatorName, MetricKey, MetricOrderBy, MetricOrderDirection, MetricPredicate, MetricRegistry, MetricViewColumnDisplay, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PickMetricRow, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseMetricViewOptions, UseMetricViewResult, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, Variant, VariantProps, Variants, VariantsProps, WarehouseState, WarehouseStatus, applySelectionEmphasis, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, useMetricView, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };

package/dist/react/index.js

@@ -1,9 +1,10 @@
 import { DATE_FIELD_PATTERNS, METADATA_DATE_PATTERNS, NAME_FIELD_PATTERNS } from "../js/constants.js";
+import { formatLabel } from "../js/format/index.js";
 import { CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./charts/constants.js";
 import { isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
-import { createTimeSeriesData, formatLabel, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
+import { createTimeSeriesData, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
 import { normalizeChartData, normalizeHeatmapData } from "./charts/normalize.js";
-import { buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
+import { applySelectionEmphasis, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
 import { useAllThemeColors, useChartUITokens, useThemeColors } from "./charts/theme.js";
 import { BaseChart } from "./charts/base.js";
 import { ResourceStatusProvider, useResourceStatus, useResourceStatusPublisher } from "./hooks/use-resource-status.js";
@@ -48,6 +49,7 @@ import { GenieChat } from "./genie/genie-chat.js";
 import { Toaster } from "./ui/sonner.js";
 import { ResourceStatusIndicator, useResourceStatusToaster } from "./resource-status-indicator.js";
 import { useAgentChat } from "./hooks/use-agent-chat.js";
+import { useMetricView } from "./hooks/use-metric-view.js";
 import { useIsMobile } from "./hooks/use-mobile.js";
 import { usePluginClientConfig } from "./hooks/use-plugin-config.js";
 import { useServingInvoke } from "./hooks/use-serving-invoke.js";
@@ -97,4 +99,4 @@ import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
 import { Variant } from "./ui-variants/variant.js";
 import { Variants } from "./ui-variants/variants.js";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Variant, Variants, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Variant, Variants, applySelectionEmphasis, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, useMetricView, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };

package/dist/react/lib/format.js

@@ -1,3 +1,5 @@
+import { formatLabel } from "../../js/format/index.js";
+
 //#region src/react/lib/format.ts
 /**
 * Formats numeric values based on field name context
@@ -32,7 +34,7 @@ function formatChartValue(value, fieldName) {
 * formatFieldLabel("revenue") // "Revenue"
 */
 function formatFieldLabel(field) {
-	return field.replace(/[^a-zA-Z0-9_-]/g, "").replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()).trim();
+	return formatLabel(field.replace(/[^a-zA-Z0-9_-]/g, ""));
 }
 /**
 * Formats byte values into human-readable file sizes

package/dist/react/lib/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","names":[],"sources":["../../../src/react/lib/format.ts"],"sourcesContent":["/**\n * Formats numeric values based on field name context\n * @param value - The numeric value to format\n * @param fieldName - The field name to determine formatting\n * @returns Formatted string representation\n * @example\n * formatChartValue(1234.56, \"cost\") // \"$1,234.56\"\n * formatChartValue(5000, \"users\") // \"5.0k\"\n * formatChartValue(42.7, \"percentage\") // \"42.7\"\n */\nexport function formatChartValue(value: number, fieldName: string): string {\n  if (\n    fieldName.toLowerCase().includes(\"cost\") ||\n    fieldName.toLowerCase().includes(\"price\") ||\n    fieldName.toLowerCase().includes(\"spend\") ||\n    fieldName.toLowerCase().includes(\"revenue\") ||\n    fieldName.toLowerCase().includes(\"usd\")\n  ) {\n    return new Intl.NumberFormat(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(value);\n  }\n\n  if (value >= 1000) {\n    return new Intl.NumberFormat(\"en-US\", {\n      notation: \"compact\",\n      maximumFractionDigits: 1,\n    }).format(value);\n  }\n\n  return value.toLocaleString(\"en-US\", {\n    maximumFractionDigits: 2,\n  });\n}\n\n/**\n * Converts field names to human-readable labels\n * @param field - Field name in camelCase or snake_case\n * @returns Formatted label with proper capitalization\n * @example\n * formatFieldLabel(\"totalCost\") // \"Total Cost\"\n * formatFieldLabel(\"user_name\") // \"User Name\"\n * formatFieldLabel(\"revenue\") // \"Revenue\"\n */\nexport function formatFieldLabel(field: string): string {\n  const safe = field.replace(/[^a-zA-Z0-9_-]/g, \"\");\n  return safe\n    .replace(/([A-Z])/g, \" $1\")\n    .replace(/_/g, \" \")\n    .replace(/\\b\\w/g, (l) => l.toUpperCase())\n    .trim();\n}\n\n/**\n * Formats byte values into human-readable file sizes\n * @param bytes - The file size in bytes\n * @returns Formatted string (e.g., \"1.5 KB\", \"3.2 MB\")\n * @example\n * formatFileSize(512) // \"512 B\"\n * formatFileSize(1536) // \"1.5 KB\"\n * formatFileSize(2621440) // \"2.5 MB\"\n */\nexport function formatFileSize(bytes: number | undefined): string {\n  if (bytes === undefined || bytes === null) return \"Unknown\";\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  if (bytes < 1024 * 1024 * 1024)\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n}\n\n/** Regex for validating field names */\nexport const SAFE_KEY_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]*$/;\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,iBAAiB,OAAe,WAA2B;AACzE,KACE,UAAU,aAAa,CAAC,SAAS,OAAO,IACxC,UAAU,aAAa,CAAC,SAAS,QAAQ,IACzC,UAAU,aAAa,CAAC,SAAS,QAAQ,IACzC,UAAU,aAAa,CAAC,SAAS,UAAU,IAC3C,UAAU,aAAa,CAAC,SAAS,MAAM,CAEvC,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,OAAO;EACP,UAAU;EACV,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,MAAM;AAGlB,KAAI,SAAS,IACX,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU;EACV,uBAAuB;EACxB,CAAC,CAAC,OAAO,MAAM;AAGlB,QAAO,MAAM,eAAe,SAAS,EACnC,uBAAuB,GACxB,CAAC;;;;;;;;;;;AAYJ,SAAgB,iBAAiB,OAAuB;AAEtD,QADa,MAAM,QAAQ,mBAAmB,GAAG,CAE9C,QAAQ,YAAY,MAAM,CAC1B,QAAQ,MAAM,IAAI,CAClB,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,CACxC,MAAM;;;;;;;;;;;AAYX,SAAgB,eAAe,OAAmC;AAChE,KAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAClD,KAAI,QAAQ,KAAM,QAAO,GAAG,MAAM;AAClC,KAAI,QAAQ,OAAO,KAAM,QAAO,IAAI,QAAQ,MAAM,QAAQ,EAAE,CAAC;AAC7D,KAAI,QAAQ,OAAO,OAAO,KACxB,QAAO,IAAI,SAAS,OAAO,OAAO,QAAQ,EAAE,CAAC;AAC/C,QAAO,IAAI,SAAS,OAAO,OAAO,OAAO,QAAQ,EAAE,CAAC;;;AAItD,MAAa,iBAAiB"}
+{"version":3,"file":"format.js","names":[],"sources":["../../../src/react/lib/format.ts"],"sourcesContent":["import { formatLabel } from \"../../js/format\";\n\n/**\n * Formats numeric values based on field name context\n * @param value - The numeric value to format\n * @param fieldName - The field name to determine formatting\n * @returns Formatted string representation\n * @example\n * formatChartValue(1234.56, \"cost\") // \"$1,234.56\"\n * formatChartValue(5000, \"users\") // \"5.0k\"\n * formatChartValue(42.7, \"percentage\") // \"42.7\"\n */\nexport function formatChartValue(value: number, fieldName: string): string {\n  if (\n    fieldName.toLowerCase().includes(\"cost\") ||\n    fieldName.toLowerCase().includes(\"price\") ||\n    fieldName.toLowerCase().includes(\"spend\") ||\n    fieldName.toLowerCase().includes(\"revenue\") ||\n    fieldName.toLowerCase().includes(\"usd\")\n  ) {\n    return new Intl.NumberFormat(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(value);\n  }\n\n  if (value >= 1000) {\n    return new Intl.NumberFormat(\"en-US\", {\n      notation: \"compact\",\n      maximumFractionDigits: 1,\n    }).format(value);\n  }\n\n  return value.toLocaleString(\"en-US\", {\n    maximumFractionDigits: 2,\n  });\n}\n\n/**\n * Converts field names to human-readable labels\n * @param field - Field name in camelCase or snake_case\n * @returns Formatted label with proper capitalization\n * @example\n * formatFieldLabel(\"totalCost\") // \"Total Cost\"\n * formatFieldLabel(\"user_name\") // \"User Name\"\n * formatFieldLabel(\"revenue\") // \"Revenue\"\n */\nexport function formatFieldLabel(field: string): string {\n  // Strip anything outside the identifier charset before humanizing. Table\n  // callers pass a raw `column.id` / `defaultFilterColumn` that has not been\n  // through `SAFE_KEY_REGEX`, so the label must not echo arbitrary input.\n  return formatLabel(field.replace(/[^a-zA-Z0-9_-]/g, \"\"));\n}\n\n/**\n * Formats byte values into human-readable file sizes\n * @param bytes - The file size in bytes\n * @returns Formatted string (e.g., \"1.5 KB\", \"3.2 MB\")\n * @example\n * formatFileSize(512) // \"512 B\"\n * formatFileSize(1536) // \"1.5 KB\"\n * formatFileSize(2621440) // \"2.5 MB\"\n */\nexport function formatFileSize(bytes: number | undefined): string {\n  if (bytes === undefined || bytes === null) return \"Unknown\";\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  if (bytes < 1024 * 1024 * 1024)\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n}\n\n/** Regex for validating field names */\nexport const SAFE_KEY_REGEX = /^[a-zA-Z_][a-zA-Z0-9_]*$/;\n"],"mappings":";;;;;;;;;;;;;AAYA,SAAgB,iBAAiB,OAAe,WAA2B;AACzE,KACE,UAAU,aAAa,CAAC,SAAS,OAAO,IACxC,UAAU,aAAa,CAAC,SAAS,QAAQ,IACzC,UAAU,aAAa,CAAC,SAAS,QAAQ,IACzC,UAAU,aAAa,CAAC,SAAS,UAAU,IAC3C,UAAU,aAAa,CAAC,SAAS,MAAM,CAEvC,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,OAAO;EACP,UAAU;EACV,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,MAAM;AAGlB,KAAI,SAAS,IACX,QAAO,IAAI,KAAK,aAAa,SAAS;EACpC,UAAU;EACV,uBAAuB;EACxB,CAAC,CAAC,OAAO,MAAM;AAGlB,QAAO,MAAM,eAAe,SAAS,EACnC,uBAAuB,GACxB,CAAC;;;;;;;;;;;AAYJ,SAAgB,iBAAiB,OAAuB;AAItD,QAAO,YAAY,MAAM,QAAQ,mBAAmB,GAAG,CAAC;;;;;;;;;;;AAY1D,SAAgB,eAAe,OAAmC;AAChE,KAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAClD,KAAI,QAAQ,KAAM,QAAO,GAAG,MAAM;AAClC,KAAI,QAAQ,OAAO,KAAM,QAAO,IAAI,QAAQ,MAAM,QAAQ,EAAE,CAAC;AAC7D,KAAI,QAAQ,OAAO,OAAO,KACxB,QAAO,IAAI,SAAS,OAAO,OAAO,QAAQ,EAAE,CAAC;AAC/C,QAAO,IAAI,SAAS,OAAO,OAAO,OAAO,QAAQ,EAAE,CAAC;;;AAItD,MAAa,iBAAiB"}

package/dist/shared/src/index.d.ts

@@ -3,6 +3,8 @@ import { PluginClientConfigs, PluginEndpointMap, PluginEndpoints } from "./plugi
 import "./cache.js";
 import "./execute.js";
 import { GenieAttachmentResponse, GenieMessageResponse, GenieStatementResponse, GenieStreamEvent } from "./genie.js";
+import { MetricFilter, MetricFilterOperatorName, MetricOrderBy, MetricOrderDirection, MetricPredicate } from "./metric-filter.js";
+import { MetricViewColumnDisplay } from "./metric-metadata.js";
 import { SQLBinaryMarker, SQLBooleanMarker, SQLDateMarker, SQLNumberMarker, SQLStringMarker, SQLTimestampMarker, SQLTypeMarker } from "./sql/types.js";
 import { isSQLTypeMarker, sql } from "./sql/helpers.js";
 import "./sse/analytics.js";

package/dist/shared/src/metric-filter.d.ts

@@ -0,0 +1,36 @@
+//#region ../shared/src/metric-filter.d.ts
+type MetricFilterOperatorName = "equals" | "notEquals" | "gt" | "gte" | "lt" | "lte" | "contains" | "notContains" | "in" | "notIn" | "set" | "notSet";
+interface MetricPredicate {
+  member: string;
+  operator: MetricFilterOperatorName;
+  values?: ReadonlyArray<string | number>;
+}
+type MetricOrderDirection = "ASC" | "DESC";
+/**
+ * `field` must be one of the request's own `measures` or `dimensions` — a
+ * measure is ordered by its SELECT **alias**, because `ORDER BY MEASURE(...)` is
+ * rejected by Spark (`METRIC_VIEW_INVALID_MEASURE_FUNCTION_INPUT`). `direction`
+ * is a closed vocabulary so nothing free-form reaches the SQL string; omitting
+ * it means `ASC` (the SQL default).
+ *
+ * The default `MetricOrderBy` (equivalent to `MetricOrderBy<string>`) is the
+ * broad wire/server form. When extracting a reusable `orderBy` array for
+ * `useMetricView`, parameterize it with the selected field literals so the hook
+ * can verify that every ordering field was selected.
+ */
+interface MetricOrderBy<Field extends string = string> {
+  field: Field;
+  direction?: MetricOrderDirection;
+}
+/**
+ * Recursive filter expression for the metric-view request body: a leaf
+ * {@link MetricPredicate} or an `{ and: [...] }` / `{ or: [...] }` group.
+ */
+type MetricFilter = MetricPredicate | {
+  and: ReadonlyArray<MetricFilter>;
+} | {
+  or: ReadonlyArray<MetricFilter>;
+};
+//#endregion
+export { MetricFilter, MetricFilterOperatorName, MetricOrderBy, MetricOrderDirection, MetricPredicate };
+//# sourceMappingURL=metric-filter.d.ts.map

package/dist/shared/src/metric-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-filter.d.ts","names":[],"sources":["../../../../shared/src/metric-filter.ts"],"mappings":";KAAY,wBAAA;AAAA,UAcK,eAAA;EACf,MAAA;EACA,QAAA,EAAU,wBAAA;EACV,MAAA,GAAS,aAAA;AAAA;AAAA,KAGC,oBAAA;;;;;;;;;;;AAAZ;;UAciB,aAAA;EACf,KAAA,EAAO,KAAA;EACP,SAAA,GAAY,oBAAA;AAAA;;;;;KAOF,YAAA,GACR,eAAA;EACE,GAAA,EAAK,aAAA,CAAc,YAAA;AAAA;EACnB,EAAA,EAAI,aAAA,CAAc,YAAA;AAAA"}

package/dist/shared/src/metric-metadata.d.ts

@@ -0,0 +1,15 @@
+//#region ../shared/src/metric-metadata.d.ts
+/**
+ * Per-column display metadata for a UC Metric View column, sourced from the
+ * YAML 1.1 `display_name`/`format` attributes plus the SQL type. Loose enough
+ * that an `as const` generated literal assigns to it.
+ */
+interface MetricViewColumnDisplay {
+  type: string;
+  display_name?: string;
+  format?: string;
+  description?: string;
+}
+//#endregion
+export { MetricViewColumnDisplay };
+//# sourceMappingURL=metric-metadata.d.ts.map

package/dist/shared/src/metric-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-metadata.d.ts","names":[],"sources":["../../../../shared/src/metric-metadata.ts"],"mappings":";;AAKA;;;;UAAiB,uBAAA;EACf,IAAA;EACA,YAAA;EACA,MAAA;EACA,WAAA;AAAA"}

package/docs/development/type-generation.md

@@ -6,7 +6,7 @@ AppKit can automatically generate TypeScript types for your SQL queries, providi
 
 Generate type-safe TypeScript declarations for query keys, parameters, and result rows.
 
-All generated files live in `shared/appkit-types/`, one per concern: `analytics.d.ts` (SQL query types), `serving.d.ts` (model-serving endpoint types), and `metric-views.ts` — a real source file rather than a `.d.ts` because it also carries a runtime `metricViewsMetadata` constant alongside the augmentation. A single command (and the Vite plugin) produces them all in one pass; see [Metric-view types](#metric-view-types). The files use [`declare module`](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to augment existing interfaces, so the types apply globally — you never need to import them. TypeScript auto-discovers them through `"include": ["shared/appkit-types"]` in your tsconfig.
+All generated files live in `shared/appkit-types/`, one per concern: `analytics.d.ts` (SQL query types), `serving.d.ts` (model-serving endpoint types), and `metric-views.d.ts` (metric-view types). A single command (and the Vite plugin) produces them all in one pass; see [Metric-view types](#metric-view-types). The files use [`declare module`](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to augment existing interfaces, so the types apply globally — you never need to import them. TypeScript auto-discovers them through `"include": ["shared/appkit-types"]` in your tsconfig.
 
 ## Vite plugin: `appKitTypesPlugin`[​](#vite-plugin-appkittypesplugin "Direct link to vite-plugin-appkittypesplugin")
 
@@ -86,7 +86,7 @@ npx @databricks/appkit generate-types --wait
 
 #### CI resilience: committed types as fallback[​](#ci-resilience-committed-types-as-fallback "Direct link to CI resilience: committed types as fallback")
 
-In blocking mode (`--wait`), the generator attempts to fetch real types from your warehouse, but delegates to **committed type files** (`shared/appkit-types/analytics.d.ts` and, when Metric Views are configured, `shared/appkit-types/metric-views.ts`) as the fallback when the warehouse is unreachable. These generated files should be part of your repository. On a fresh CI checkout, every build attempts to DESCRIBE against the warehouse; the committed types are used only when that cannot complete.
+In blocking mode (`--wait`), the generator attempts to fetch real types from your warehouse, but delegates to **committed type files** (`shared/appkit-types/analytics.d.ts` and, when Metric Views are configured, `shared/appkit-types/metric-views.d.ts`) as the fallback when the warehouse is unreachable. These generated files should be part of your repository. On a fresh CI checkout, every build attempts to DESCRIBE against the warehouse; the committed types are used only when that cannot complete.
 
 The generator **never overwrites committed types with degraded (`result: unknown`) types** — it writes real types, or it does not write at all.
 
@@ -97,17 +97,18 @@ A **two-bucket failure taxonomy** determines whether the build crashes or falls
 
 The loud warning is a single greppable stderr line naming the coarse cause (auth blocked / warehouse unreachable / warehouse unavailable) and the warehouse ID, so CI logs surface that the build fell back to committed types.
 
-For a Metric Views app, `metric-views.ts` must already exist before an environmental failure can fall back successfully. Unlike a declaration-only artifact, this file also exports the runtime `metricViewsMetadata` value consumed by the server, so `analytics.d.ts` alone cannot satisfy the gate.
+For a Metric Views app, `metric-views.d.ts` must already exist before an environmental failure can fall back successfully — `analytics.d.ts` alone cannot satisfy the gate.
 
 The app template wires this up for you: `postinstall` and `predev` run the non-blocking default, while `prebuild` runs `--wait`.
 
 ## Metric-view types[​](#metric-view-types "Direct link to Metric-view types")
 
-`generate-types` (and the Vite plugin) emit metric-view types **additively** — there is no separate command. When a `config/metric-views/definitions.json` file is present, the same run that generates your query types also DESCRIBEs each declared [UC Metric View](./docs/plugins/analytics.md) and writes `metric-views.ts` into `shared/appkit-types/`:
+`generate-types` (and the Vite plugin) emit metric-view types **additively** — there is no separate command. When a `config/metric-views/definitions.json` file is present, the same run that generates your query types also DESCRIBEs each declared [UC Metric View](./docs/plugins/analytics.md) and writes two artifacts:
 
-* `metric-views.ts` — augments the `MetricRegistry` interface so `useMetricView('<key>', …)` is autocompleted and type-checked. Each view's measures, dimensions, and their semantic metadata (SQL type, display name, format, time grains) are encoded at the type level. The same file also exports a runtime `metricViewsMetadata` constant carrying that metadata as a value — inject it via `analytics({ metricViewsMetadata })` so the [metric route](./docs/plugins/analytics.md#metric-views) can attach per-column display metadata to its response payload.
+* `shared/appkit-types/metric-views.d.ts` — augments the `MetricRegistry` interface so `useMetricView('<key>', …)` is autocompleted and type-checked. Each view's measures, dimensions, and their semantic metadata (SQL type, display name, format, time grains) are encoded at the type level. Selected row keys use the actual JSON\_ARRAY wire value type (`string | null`); the SQL type remains available in metadata for deliberate parsing/formatting.
+* `config/metric-views/metadata.generated.json` — the runtime half of the same pass, carrying that per-column metadata as a value beside your hand-authored `definitions.json`. The [metric route](./docs/plugins/analytics.md#metric-views) discovers it automatically and attaches the requested columns' metadata to its response payload, so no plugin wiring is needed. Commit it with your generated types; it is generated, so do not hand-edit it.
 
-If `config/metric-views/definitions.json` is absent the metric path stays dormant (nothing is emitted). When present it follows the **same** warehouse-readiness contract as query types: in the default non-blocking run a view that can't be described yet — a cold warehouse, or a bad/unreachable source — is written with permissive types and a warning, while under `--wait` metric views obey the [two-bucket taxonomy](#ci-resilience-committed-types-as-fallback) (environmental failures gate to committed `metric-views.ts` + warn; deterministic failures like malformed definitions crash the build). A malformed `definitions.json` (invalid JSON, or a source that isn't a three-part UC FQN) fails fast in every mode.
+If `config/metric-views/definitions.json` is absent the metric path stays dormant (nothing is emitted). When present it follows the **same** warehouse-readiness contract as query types: in the default non-blocking run a view that can't be described yet — a cold warehouse, or a bad/unreachable source — is written with permissive types and a warning, while under `--wait` metric views obey the [two-bucket taxonomy](#ci-resilience-committed-types-as-fallback) (environmental failures gate to committed `metric-views.d.ts` + warn; deterministic failures like malformed definitions crash the build). A malformed `definitions.json` (invalid JSON, or a source that isn't a three-part UC FQN) fails fast in every mode.
 
 `definitions.json` is keyed by metric key; each entry names the three-part UC FQN of the view and, optionally, the executor it runs as (`app_service_principal`, the default, or `user`):