4c: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"] 4d: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"] 4e:T359e,"use client" import * as React from "react" import { Minus, Plus, Maximize2, RefreshCw, Shrink } from "lucide-react" import { cva } from "class-variance-authority" import type { VariantProps } from "class-variance-authority" import type { HTMLAttributes, ReactNode } from "react" import { cn } from "@/lib/utils" import { UI_I18N, type UILocale } from "@/lib/ui-i18n" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { Skeleton } from "@/components/ui/skeleton" import { Separator } from "@/components/ui/separator" // ── Types ────────────────────────────────────────────────────────────────── export type DashboxSize = "sm" | "md" | "lg" export type DashboxBodyPadding = "none" | "sm" | "md" | "lg" export type DashboxStatus = "live" | "warning" | "error" | "idle" export type DashboxLocale = UILocale /** Read-only toolbar state passed to `children` when used as a render function. */ export interface DashboxRenderState { maximized: boolean minimized: boolean } export interface DashboxProps extends VariantProps, Omit, "children"> { title?: string description?: string /** * Body content. Pass a function to react to the toolbar's maximize/minimize * state (e.g. growing a chart to fill the fullscreen viewport). */ children?: ReactNode | ((state: DashboxRenderState) => ReactNode) toolbar?: ReactNode /** @default 'md' */ bodyPadding?: DashboxBodyPadding loading?: boolean status?: DashboxStatus locale?: DashboxLocale /** Override status label per instance (e.g. from API data) */ statusLabels?: Partial> onRefresh?: () => void /** @default true */ showMaximize?: boolean /** @default true */ showMinimize?: boolean /** @default true */ showToolbar?: boolean /** @default true */ showHeader?: boolean } // ── Variants ─────────────────────────────────────────────────────────────── export const dashboxVariants = cva( [ "flex w-full flex-col", "bg-card text-card-foreground", "rounded-xl border border-border", "overflow-hidden shadow-sm transition-all duration-300", ], { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, }, defaultVariants: { size: "md" }, } ) export const dashboxHeaderVariants = cva([ "flex items-start justify-between gap-3 px-4 py-3", "shrink-0 bg-card", ]) export const dashboxTitleVariants = cva( "leading-tight font-semibold text-foreground", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, }, defaultVariants: { size: "md" }, } ) export const dashboxDescriptionVariants = cva("text-muted-foreground", { variants: { size: { sm: "mt-0.5 text-xs", md: "mt-0.5 text-sm", lg: "mt-1 text-base", }, }, defaultVariants: { size: "md" }, }) export const dashboxToolbarVariants = cva( "ml-auto flex shrink-0 items-center gap-0.5" ) export const dashboxToolbarButtonVariants = cva([ "flex size-7 items-center justify-center rounded-md", "text-muted-foreground", "hover:bg-accent hover:text-accent-foreground", "cursor-pointer transition-colors duration-150", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none", ]) export const dashboxBodyVariants = cva("min-h-0 flex-1 overflow-auto", { variants: { padding: { none: "p-0", sm: "p-2", md: "p-4", lg: "p-6", }, }, defaultVariants: { padding: "md" }, }) export const dashboxStatusBadgeVariants = cva( "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", { variants: { status: { live: "border-success/20 bg-success/10 text-success", warning: "border-warning/20 bg-warning/10 text-warning", error: "border-destructive/20 bg-destructive/10 text-destructive", idle: "border-transparent bg-muted text-muted-foreground", }, }, defaultVariants: { status: "idle" }, } ) const titleSkeletonH: Record = { sm: "h-3", md: "h-3.5", lg: "h-4", } // ── Private subcomponents ────────────────────────────────────────────────── const STATUS_DOT: Record = { live: "bg-success motion-safe:animate-pulse", warning: "bg-warning", error: "bg-destructive", idle: "bg-muted-foreground/40", } function DashboxStatusBadge({ status, label, locale = "en-US", statusLabels, }: { status?: DashboxStatus label?: string locale?: DashboxLocale statusLabels?: Partial> }) { if (!status || status === "idle") return null const labels = { ...UI_I18N[locale].dashbox.status, ...statusLabels } return ( {label ?? labels[status] ?? status} ) } function ToolbarButton({ label, onClick, children, className, }: { label: string onClick?: () => void children: React.ReactNode className?: string }) { return (

{label}

) } // ── Dashbox ──────────────────────────────────────────────────────────────── export const Dashbox = React.forwardRef( ( { title, description, children, toolbar, size = "md", bodyPadding = "md", loading = false, status, locale = "en-US", statusLabels, onRefresh, showToolbar = true, showHeader = true, showMaximize = true, showMinimize = true, className, ...props }, ref ) => { const [minimized, setMinimized] = React.useState(false) const [maximized, setMaximized] = React.useState(false) const [refreshing, setRefreshing] = React.useState(false) const tl = UI_I18N[locale].dashbox.toolbar const handleRefresh = React.useCallback(async () => { setRefreshing(true) await onRefresh?.() setTimeout(() => setRefreshing(false), 600) }, [onRefresh]) React.useEffect(() => { if (!maximized) return const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setMaximized(false) } window.addEventListener("keydown", onKey) const prev = document.body.style.overflow document.body.style.overflow = "hidden" return () => { window.removeEventListener("keydown", onKey) document.body.style.overflow = prev } }, [maximized]) return (

{showHeader && (

{loading ? ( ) : ( title && ( {title} ) )} {!loading && status && ( )}

{loading ? ( ) : ( description && ( {description} ) )}

{showToolbar && (

{loading ? ( <> {toolbar != null && ( )} {onRefresh && } {showMinimize && ( )} {showMaximize && ( )} ) : ( <> {toolbar} {onRefresh && ( )} {showMinimize && !maximized && (minimized ? ( setMinimized(false)} > ) : ( setMinimized(true)} > ))} {showMaximize && !minimized && (maximized ? ( setMaximized(false)} > ) : ( setMaximized(true)} > ))} )}

)}

)} {showHeader && } {!minimized && (

{loading ? (

) : typeof children === "function" ? ( children({ maximized, minimized }) ) : ( children )}

)}

) } ) Dashbox.displayName = "Dashbox" 4b:["$","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","lucide-react",{"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"}]]}]}],["$","li","class-variance-authority",{"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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@lema-ds","registryDependencies":["tooltip","skeleton","ui-i18n"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ds/dashbox.tsx","content":"$4e","type":"registry:ui","target":"components/ui/ds-dashbox.tsx"}],"className":"h-[70svh] min-h-80"}]]}]