4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T1ad1,"use client"; import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "@/components/custom/sheet"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { TOOLTIP_DELAY } from "@/components/data-table/ui-compat"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Separator } from "@/components/ui/separator"; import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { useFilterActions } from "@/lib/store/hooks/useFilterActions"; import { useFilterState } from "@/lib/store/hooks/useFilterState"; import { cn } from "@/lib/utils"; import { ChevronDown, ChevronUp, X } from "lucide-react"; import * as React from "react"; export interface DataTableSheetDetailsProps { title?: React.ReactNode; titleClassName?: string; children?: React.ReactNode; } export function DataTableSheetDetails({ title, titleClassName, children, }: DataTableSheetDetailsProps) { const { table, rowSelection, isLoading } = useDataTable(); const { setFilters } = useFilterActions(); const isMultiSelect = !!table.options.enableMultiRowSelection; // Read the detail row ID from BYOS uuid when multi-select is enabled, // otherwise fall back to rowSelection (existing single-select behavior) const uuid = useFilterState((s) => s.uuid) as string | null | undefined; const selectedRowKey = isMultiSelect ? (uuid ?? undefined) : Object.keys(rowSelection)?.[0]; const selectedRow = React.useMemo(() => { if (isLoading && !selectedRowKey) return; return table .getRowModel() .flatRows.find((row) => row.id === selectedRowKey); }, [selectedRowKey, isLoading, table]); const index = table .getRowModel() .flatRows.findIndex((row) => row.id === selectedRow?.id); const nextId = React.useMemo( () => table.getRowModel().flatRows[index + 1]?.id, [index, isLoading, table], ); const prevId = React.useMemo( () => table.getRowModel().flatRows[index - 1]?.id, [index, isLoading, table], ); const onPrev = React.useCallback(() => { if (!prevId) return; if (isMultiSelect) { setFilters({ uuid: prevId }); } else { table.setRowSelection({ [prevId]: true }); } }, [prevId, isLoading, table, isMultiSelect, setFilters]); const onNext = React.useCallback(() => { if (!nextId) return; if (isMultiSelect) { setFilters({ uuid: nextId }); } else { table.setRowSelection({ [nextId]: true }); } }, [nextId, isLoading, table, isMultiSelect, setFilters]); React.useEffect(() => { const down = (e: KeyboardEvent) => { if (!selectedRowKey) return; // REMINDER: prevent dropdown navigation inside of sheet to change row selection const activeElement = document.activeElement; const isMenuActive = activeElement?.closest('[role="menu"]'); if (isMenuActive) return; if (e.key === "ArrowUp") { e.preventDefault(); onPrev(); } if (e.key === "ArrowDown") { e.preventDefault(); onNext(); } }; document.addEventListener("keydown", down); return () => document.removeEventListener("keydown", down); }, [selectedRowKey, onNext, onPrev]); return ( { // REMINDER: focus back to the row that was selected // We need to manually focus back due to missing Trigger component const el = selectedRowKey ? document.getElementById(selectedRowKey) : null; if (isMultiSelect) { setFilters({ uuid: null }); } else { table.resetRowSelection(); } // REMINDER: when navigating between tabs in the sheet and exit the sheet, the tab gets lost // We need a minimal delay to allow the sheet to close before focusing back to the row setTimeout(() => el?.focus(), 0); }} > e.preventDefault()} className="overflow-y-auto p-0 sm:max-w-md" hideClose >

{isLoading && !selectedRowKey ? ( ) : ( title )}

Navigate ↑

Navigate ↓

Selected row details

{children}

); } 50:T1c37,"use client"; import { DataTableCellBadge, DataTableCellBar, DataTableCellBoolean, DataTableCellCode, DataTableCellHeatmap, DataTableCellLevelIndicator, DataTableCellNumber, DataTableCellStar, DataTableCellStatusCode, DataTableCellText, DataTableCellTimestamp, } from "@/components/data-table/data-table-cell"; import type { SerializableDisplayConfig } from "@/lib/table-schema/types"; import type { DataTableFeatures } from "@/lib/table/features"; import { cn } from "@/lib/utils"; import { Table } from "@tanstack/react-table"; import * as React from "react"; import { DataTableFilterField, SheetField } from "../types"; import { DataTableSheetRowAction } from "./data-table-sheet-row-action"; import { SheetDetailsContentSkeleton } from "./data-table-sheet-skeleton"; function renderSheetValue( rawValue: unknown, display?: SerializableDisplayConfig, ): React.ReactNode { if (!display) return String(rawValue); const colorMap = display.colorMap; switch (display.type) { case "timestamp": { const hex = colorMap?.[String(rawValue)]; return rawValue instanceof Date || typeof rawValue === "string" || typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } case "number": { const hex = colorMap?.[String(rawValue)]; return typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } case "bar": { return typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } case "heatmap": { return typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } case "boolean": { const hex = colorMap?.[String(rawValue)]; return typeof rawValue === "boolean" ? ( ) : ( String(rawValue) ); } case "star": { return typeof rawValue === "boolean" ? ( ) : ( String(rawValue) ); } case "badge": { if (Array.isArray(rawValue)) { return (

{rawValue.map((item, i) => ( ))}

); } const hex = colorMap?.[String(rawValue)]; return typeof rawValue === "string" || typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } case "code": { const hex = colorMap?.[String(rawValue)]; return typeof rawValue === "string" || typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } case "status-code": { const hex = colorMap?.[String(rawValue)]; return typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } case "level-indicator": { const hex = colorMap?.[String(rawValue)]; return typeof rawValue === "string" ? ( ) : ( String(rawValue) ); } case "text": { const hex = colorMap?.[String(rawValue)]; return typeof rawValue === "string" || typeof rawValue === "number" ? ( ) : ( String(rawValue) ); } default: return String(rawValue); } } // v9 requires `TData extends RowData` (`Record | Array`). // A details sheet indexes its row by field name, so the object half of that // union is the accurate constraint here. interface DataTableSheetContentProps, TMeta> extends React.HTMLAttributes { data?: TData; table: Table; fields: SheetField[]; filterFields: DataTableFilterField[]; // totalRows: number; // filterRows: number; // totalRowsFetched: number; metadata?: TMeta & { totalRows: number; filterRows: number; totalRowsFetched: number; }; } export function DataTableSheetContent< TData extends Record, TMeta, >({ data, table, className, fields, filterFields, metadata, ...props }: DataTableSheetContentProps) { if (!data) return ; return (

{field.label}: {rendered}
{field.label}: {rendered}

); } export const MemoizedDataTableSheetContent = React.memo( DataTableSheetContent, (prev, next) => { // REMINDER: only check if data is the same, rest is useless return prev.data === next.data; }, ) as typeof DataTableSheetContent; 51:T150c,import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; import type { DataTableFeatures } from "@/lib/table/features"; import { cn } from "@/lib/utils"; import { RowData, Table } from "@tanstack/react-table"; import { endOfDay, endOfHour, startOfDay, startOfHour } from "date-fns"; import { CalendarClock, CalendarDays, CalendarSearch, ChevronLeft, ChevronRight, Copy, Equal, Search, } from "lucide-react"; import { DataTableFilterField } from "../types"; interface DataTableSheetRowActionProps< TData extends RowData, TFields extends DataTableFilterField, > extends Omit< React.ComponentPropsWithRef, "value" > { fieldValue: TFields["value"]; filterFields: TFields[]; value: string | number | boolean; table: Table; } export function DataTableSheetRowAction< TData extends RowData, TFields extends DataTableFilterField, >({ fieldValue, filterFields, value, children, className, table, onKeyDown, ...props }: DataTableSheetRowActionProps) { const { copy, isCopied } = useCopyToClipboard(); const field = filterFields.find((field) => field.value === fieldValue); const column = table.getColumn(fieldValue.toString()); if (!field || !column) return null; function renderOptions() { if (!field) return null; switch (field.type) { case "checkbox": return ( { // FIXME: const filterValue = column?.getFilterValue() as | undefined | Array; const newValue = filterValue?.includes(value) ? filterValue : [...(filterValue || []), value]; column?.setFilterValue(newValue); }} > Include ); case "input": return ( column?.setFilterValue(value)}> Include ); case "slider": return ( column?.setFilterValue([0, value])} > {/* FIXME: change icon as it is not clear */} Less or equal than column?.setFilterValue([value, 5000])} > {/* FIXME: change icon as it is not clear */} Greater or equal than column?.setFilterValue([value])}> Equal to ); case "timerange": const date = new Date(value as string | number); return ( column?.setFilterValue([date])}> Exact timestamp { const start = startOfHour(date); const end = endOfHour(date); column?.setFilterValue([start, end]); }} > Same hour { const start = startOfDay(date); const end = endOfDay(date); column?.setFilterValue([start, end]); }} > Same day ); default: return null; } } return ( { if (e.key === "ArrowDown") { // REMINDER: default behavior is to open the dropdown menu // But because we use it to navigate between rows, we need to prevent it // and only use "Enter" to select the option e.preventDefault(); } onKeyDown?.(e); }} {...props} > {children} {isCopied ? (

Value copied

) : null} {renderOptions()} copy(String(value), { timeout: 1000 })} > Copy value ); } 52:T1332,"use client"; import { cn } from "@/lib/utils"; import * as SheetPrimitive from "@radix-ui/react-dialog"; import { cva, type VariantProps } from "class-variance-authority"; import { X } from "lucide-react"; import * as React from "react"; const Sheet = SheetPrimitive.Root; const SheetTrigger = SheetPrimitive.Trigger; /** * Radix's close, plus Base UI's `render`. * * The shadcn CLI rewrites `asChild` into `render={}` when it installs * into a Base UI project. This sheet is built on Radix in both cases — it * ships with the block rather than resolving from the project's library — so * it has to accept the prop the CLI writes. */ function SheetClose({ render, children, ...props }: React.ComponentProps & { render?: React.ReactElement; }) { if (!render) { return {children}; } // `asChild` is spread rather than written as an attribute so the same CLI // codemod doesn't rewrite it here, inside the component implementing it. return ( {children === undefined ? render : React.cloneElement(render, undefined, children)} ); } const SheetPortal = SheetPrimitive.Portal; function SheetOverlay({ className, ...props }: React.ComponentProps) { return ( ); } const sheetVariants = cva( "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", { variants: { side: { top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b", bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t", left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", }, }, defaultVariants: { side: "right", }, }, ); interface SheetContentProps extends React.ComponentProps, VariantProps { hideClose?: boolean; } function SheetContent({ side = "right", className, children, hideClose, ...props }: SheetContentProps) { return ( {children} {!hideClose ? ( Close ) : null} ); } function SheetHeader({ className, ...props }: React.HTMLAttributes) { return (

); } function SheetFooter({ className, ...props }: React.HTMLAttributes) { return (

); } function SheetTitle({ className, ...props }: React.ComponentProps) { return ( ); } function SheetDescription({ className, ...props }: React.ComponentProps) { return ( ); } export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, }; 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-dialog@^1.1.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dialog","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-dialog@^1.1.4"}]]}]}],["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","date-fns@^4.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns@^4.1.0"}]]}]}],["$","li","lucide-react@^0.469.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^0.469.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@data-table-filters","registryDependencies":["https://data-table.openstatus.dev/r/data-table.json","https://data-table.openstatus.dev/r/data-table-cell.json","button","dropdown-menu","kbd","separator","skeleton","tooltip"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/components/data-table/data-table-sheet/data-table-sheet-details.tsx","content":"$4f","type":"registry:component"},{"path":"src/components/data-table/data-table-sheet/data-table-sheet-content.tsx","content":"$50","type":"registry:component"},{"path":"src/components/data-table/data-table-sheet/data-table-sheet-row-action.tsx","content":"$51","type":"registry:component"},{"path":"src/components/data-table/data-table-sheet/data-table-sheet-skeleton.tsx","content":"import { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\nimport { SheetField } from \"../types\";\n\ninterface SheetDetailsContentSkeletonProps {\n fields: SheetField[];\n}\n\nexport function SheetDetailsContentSkeleton({\n fields,\n}: SheetDetailsContentSkeletonProps) {\n return (\n

{field.label}

\n ))}\n \n );\n}\n","type":"registry:component"},{"path":"src/components/custom/sheet.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]