@gunjo/ui 0.0.1-alpha.0

package/src/components/molecules/Table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Table = React.forwardRef<
+    HTMLTableElement,
+    React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+    <div className="relative flex flex-col w-[400px] w-full overflow-auto rounded-md rounded-lg border bg-card">
+        <table
+            ref={ref}
+            className={cn("w-full caption-bottom text-sm", className)}
+            {...props}
+        />
+    </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody
+        ref={ref}
+        className={cn("[&_tr:last-child]:border-0", className)}
+        {...props}
+    />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn(
+            "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+            className
+        )}
+        {...props}
+    />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+    HTMLTableRowElement,
+    React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+    <tr
+        ref={ref}
+        className={cn(
+            "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+            className
+        )}
+        {...props}
+    />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            "h-10 px-3 py-3 text-left align-middle text-xs font-semibold text-muted-foreground [&:has([role=checkbox])]:pr-0",
+            className
+        )}
+        {...props}
+    />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn("px-3 py-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
+        {...props}
+    />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption
+        ref={ref}
+        className={cn("mt-4 text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+    Table,
+    TableHeader,
+    TableBody,
+    TableFooter,
+    TableHead,
+    TableRow,
+    TableCell,
+    TableCaption,
+}

package/src/components/molecules/Tabs.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "../../lib/utils"
+
+const Tabs = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Root
+        ref={ref}
+        className={cn("flex flex-col w-[400px] max-w-full rounded-lg border", className)}
+        {...props}
+    />
+))
+Tabs.displayName = TabsPrimitive.Root.displayName
+
+const TabsList = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+        ref={ref}
+        className={cn(
+            "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+            className
+        )}
+        {...props}
+    />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            "inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+            className
+        )}
+        {...props}
+    />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+        ref={ref}
+        className={cn(
+            "mt-2 p-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            className
+        )}
+        {...props}
+    />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/molecules/Toast.tsx

@@ -0,0 +1,57 @@
+"use client"
+import React, { useEffect } from 'react';
+import { CheckCircle, XCircle, Info, X } from 'lucide-react';
+import { cn } from '../../lib/utils'; // Relative path to lib
+import type { ToastVariantKey } from "./generated/variant-keys";
+import { toastDefaultVariantKey } from "./generated/default-variant-keys";
+
+export type ToastType = ToastVariantKey;
+
+export interface ToastProps {
+    message: string;
+    type?: ToastType;
+    isVisible: boolean;
+    onClose: () => void;
+    duration?: number;
+}
+
+export function Toast({ message, type = toastDefaultVariantKey, isVisible, onClose, duration = 3000 }: ToastProps) {
+    useEffect(() => {
+        if (isVisible) {
+            const timer = setTimeout(() => {
+                onClose();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [isVisible, duration, onClose]);
+
+    if (!isVisible) return null;
+
+    const icons: Record<ToastVariantKey, React.ReactNode> = {
+        success: <CheckCircle className="text-success" size={20} />,
+        error: <XCircle className="text-destructive" size={20} />,
+        info: <Info className="text-info" size={20} />
+    };
+
+    const bgColors: Record<ToastVariantKey, string> = {
+        success: 'bg-card border-success/20 text-foreground',
+        error: 'bg-card border-destructive/20 text-foreground',
+        info: 'bg-card border-info/20 text-foreground'
+    };
+
+    return (
+        <div className={cn(
+            "fixed top-4 right-4 z-[9999] flex flex-col flex-row items-center w-[384px] max-w-sm w-full md:w-auto gap-3 px-4 py-3 rounded-xl border shadow-2xl animate-in slide-in-from-top-5 fade-in duration-300 pointer-events-auto",
+            bgColors[type]
+        )}>
+            {icons[type]}
+            <p className="text-sm font-medium">{message}</p>
+            <button
+                onClick={onClose}
+                className="ml-2 p-1 text-muted-foreground hover:text-foreground rounded-lg transition-colors"
+            >
+                <X size={14} />
+            </button>
+        </div>
+    );
+}

package/src/components/molecules/Tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+            "z-50 flex flex-col w-[168px] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className
+        )}
+        {...props}
+    />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/molecules/generated/default-variant-keys.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+import type { AccordionVariantKey, AiChatMessageVariantKey, FilterButtonVariantKey, ListVariantKey, SidebarItemVariantKey, SortButtonVariantKey, ToastVariantKey } from "./variant-keys";
+
+export const accordionDefaultVariantKey: AccordionVariantKey = "collapsed";
+export const aiChatMessageDefaultVariantKey: AiChatMessageVariantKey = "assistant";
+export const filterButtonDefaultVariantKey: FilterButtonVariantKey = "default";
+export const listDefaultVariantKey: ListVariantKey = "dot";
+export const sidebarItemDefaultVariantKey: SidebarItemVariantKey = "default";
+export const sortButtonDefaultVariantKey: SortButtonVariantKey = "none";
+export const toastDefaultVariantKey: ToastVariantKey = "success";
+
+export const moleculeDefaultVariantKeys = {
+  accordion: accordionDefaultVariantKey,
+  aiChatMessage: aiChatMessageDefaultVariantKey,
+  filterButton: filterButtonDefaultVariantKey,
+  list: listDefaultVariantKey,
+  sidebarItem: sidebarItemDefaultVariantKey,
+  sortButton: sortButtonDefaultVariantKey,
+  toast: toastDefaultVariantKey,
+} as const;

package/src/components/molecules/generated/variant-keys.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+// Generated by `npm run design:sync:components`. Do not edit manually.
+
+export const accordionVariantKeys = ["collapsed", "expanded"] as const;
+export type AccordionVariantKey = (typeof accordionVariantKeys)[number];
+
+export const aiChatMessageVariantKeys = ["assistant", "user"] as const;
+export type AiChatMessageVariantKey = (typeof aiChatMessageVariantKeys)[number];
+
+export const filterButtonVariantKeys = ["default", "popover", "selected"] as const;
+export type FilterButtonVariantKey = (typeof filterButtonVariantKeys)[number];
+
+export const listVariantKeys = ["check", "circle", "dot"] as const;
+export type ListVariantKey = (typeof listVariantKeys)[number];
+
+export const sidebarItemVariantKeys = ["active", "default"] as const;
+export type SidebarItemVariantKey = (typeof sidebarItemVariantKeys)[number];
+
+export const sortButtonVariantKeys = ["asc", "desc", "none"] as const;
+export type SortButtonVariantKey = (typeof sortButtonVariantKeys)[number];
+
+export const toastVariantKeys = ["error", "info", "success"] as const;
+export type ToastVariantKey = (typeof toastVariantKeys)[number];
+
+export const moleculeVariantKeys = {
+  accordion: accordionVariantKeys,
+  aiChatMessage: aiChatMessageVariantKeys,
+  filterButton: filterButtonVariantKeys,
+  list: listVariantKeys,
+  sidebarItem: sidebarItemVariantKeys,
+  sortButton: sortButtonVariantKeys,
+  toast: toastVariantKeys,
+} as const;

package/src/components/organisms/AppRail.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface AppRailProps extends React.HTMLAttributes<HTMLDivElement> {
+
+}
+
+const AppRail = React.forwardRef<HTMLDivElement, AppRailProps>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "w-16 h-[320px] h-full bg-foreground flex flex-col items-center py-4 px-0 gap-4 text-muted z-40 flex-shrink-0",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+AppRail.displayName = "AppRail"
+
+export { AppRail }

package/src/components/organisms/CommandPalette.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import {
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from "../molecules/Command"
+
+import { DialogProps } from "@radix-ui/react-dialog"
+
+interface ToggleAction {
+    id: string
+    label: string
+    icon?: React.ReactNode
+    shortcut?: string
+    action: () => void
+}
+
+interface CommandPaletteProps extends DialogProps {
+    groups: {
+        heading: string
+        items: ToggleAction[]
+    }[]
+    placeholder?: string
+}
+
+export function CommandPalette({ groups, placeholder = "Type a command or search...", ...props }: CommandPaletteProps) {
+    return (
+        <CommandDialog {...props}>
+            <div className="flex flex-col w-[480px] max-w-full rounded-lg border">
+                <CommandInput placeholder={placeholder} />
+                <CommandList>
+                    <CommandEmpty>No results found.</CommandEmpty>
+                    {groups.map((group) => (
+                        <React.Fragment key={group.heading}>
+                            <CommandGroup heading={group.heading}>
+                                {group.items.map((item) => (
+                                    <CommandItem key={item.id} onSelect={item.action}>
+                                        {item.icon && <span className="mr-2 h-4 w-4">{item.icon}</span>}
+                                        <span>{item.label}</span>
+                                        {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+                                    </CommandItem>
+                                ))}
+                            </CommandGroup>
+                            <CommandSeparator />
+                        </React.Fragment>
+                    ))}
+                </CommandList>
+            </div>
+        </CommandDialog>
+    )
+}

package/src/components/organisms/FileUploader.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import { Upload, X, FileText, CheckCircle, AlertCircle } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { Button } from "../atoms/Button"
+import { Progress } from "../atoms/Progress"
+
+export interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    onValueChange?: (files: File[]) => void
+    maxFiles?: number
+    maxSize?: number // in bytes
+    accept?: Record<string, string[]>
+    disabled?: boolean
+}
+
+interface FileState {
+    file: File
+    progress: number
+    status: "pending" | "uploading" | "complete" | "error"
+    error?: string
+}
+
+export const FileUploader = React.forwardRef<HTMLDivElement, FileUploaderProps>(
+    ({ className, onValueChange, maxFiles = 1, maxSize = 1024 * 1024 * 5, accept, disabled, ...props }, ref) => {
+        const [dragActive, setDragActive] = React.useState(false)
+        const [files, setFiles] = React.useState<FileState[]>([])
+        const inputRef = React.useRef<HTMLInputElement>(null)
+
+        const handleDrag = React.useCallback((e: React.DragEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+            if (e.type === "dragenter" || e.type === "dragover") {
+                setDragActive(true)
+            } else if (e.type === "dragleave") {
+                setDragActive(false)
+            }
+        }, [])
+
+        const validateFile = (file: File): string | undefined => {
+            if (file.size > maxSize) return "File too large"
+            // Simple check, in real app use proper mime matching
+            return undefined
+        }
+
+        const handleDrop = React.useCallback(
+            (e: React.DragEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+                setDragActive(false)
+
+                if (disabled) return
+
+                const droppedFiles = Array.from(e.dataTransfer.files)
+                if (droppedFiles && droppedFiles.length > 0) {
+                    const newFiles = droppedFiles.map(file => ({
+                        file,
+                        progress: 0,
+                        status: "pending" as const,
+                        error: validateFile(file)
+                    }))
+                    setFiles(prev => [...prev, ...newFiles].slice(0, maxFiles))
+                    onValueChange?.(droppedFiles)
+                }
+            },
+            [disabled, maxFiles, maxSize, onValueChange]
+        )
+
+        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+            e.preventDefault()
+            if (disabled || !e.target.files) return
+
+            const selectedFiles = Array.from(e.target.files)
+            const newFiles = selectedFiles.map(file => ({
+                file,
+                progress: 0,
+                status: "pending" as const,
+                error: validateFile(file)
+            }))
+            setFiles(prev => [...prev, ...newFiles].slice(0, maxFiles))
+            onValueChange?.(selectedFiles)
+        }
+
+        const removeFile = (index: number) => {
+            setFiles(prev => prev.filter((_, i) => i !== index))
+        }
+
+        // Simulate upload for visual effect if needed, or consumer handles it.
+        // For this UI component, we just accept the files.
+
+        return (
+            <div className={cn("grid gap-4 w-[640px] w-full", className)} ref={ref} {...props}>
+                <div
+                    className={cn(
+                        "relative flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed transition-colors",
+                        dragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:bg-muted/50",
+                        disabled && "opacity-60 cursor-not-allowed"
+                    )}
+                    onDragEnter={handleDrag}
+                    onDragLeave={handleDrag}
+                    onDragOver={handleDrag}
+                    onDrop={handleDrop}
+                >
+                    <input
+                        ref={inputRef}
+                        type="file"
+                        className="hidden"
+                        multiple={maxFiles > 1}
+                        onChange={handleChange}
+                        disabled={disabled}
+                    />
+                    <div className="flex flex-col items-center justify-center pt-5 pb-6 text-center cursor-pointer" onClick={() => inputRef.current?.click()}>
+                        <Upload className="w-8 h-8 mb-3 text-muted-foreground" />
+                        <p className="mb-1 text-sm text-foreground">
+                            <span className="font-semibold">Click to upload</span> or drag and drop
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                            Max size {Math.round(maxSize / 1024 / 1024)}MB
+                        </p>
+                    </div>
+                </div>
+
+                {files.length > 0 && (
+                    <div className="grid gap-2">
+                        {files.map((fileState, index) => (
+                            <div key={index} className="flex items-center gap-2 p-2 rounded-md border bg-background">
+                                <FileText className="h-4 w-4 text-primary" />
+                                <div className="flex-1 min-w-0 grid gap-1">
+                                    <div className="flex justify-between text-xs">
+                                        <span className="truncate font-medium">{fileState.file.name}</span>
+                                        <span className="text-muted-foreground">{(fileState.file.size / 1024).toFixed(0)}KB</span>
+                                    </div>
+                                    {/* Progress Simulation would go here */}
+                                </div>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-6 w-6"
+                                    onClick={() => removeFile(index)}
+                                >
+                                    <X className="h-4 w-4" />
+                                </Button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        )
+    }
+)
+FileUploader.displayName = "FileUploader"

package/src/components/organisms/FloatingPanel.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { cn } from '../../lib/utils';
+import { motion, HTMLMotionProps } from 'framer-motion';
+
+interface FloatingPanelProps extends HTMLMotionProps<"div"> {
+    children: React.ReactNode;
+    className?: string;
+    variant?: 'glass' | 'solid' | 'ghost';
+    title?: string;
+    contentClassName?: string;
+}
+
+export const FloatingPanel: React.FC<FloatingPanelProps> = ({
+    children,
+    className,
+    variant = 'glass',
+    title,
+    contentClassName,
+    ...props
+}) => {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.98 }}
+            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+            className={cn(
+                "w-[360px] rounded-2xl border flex flex-col overflow-hidden transition-all duration-300 hover:shadow-lg", // Reduced hover shadow intensity
+                variant === 'glass' && "bg-background/80 backdrop-blur-md border-border/70",
+                variant === 'solid' && "bg-background border-border",
+                variant === 'ghost' && "bg-transparent border-transparent shadow-none hover:shadow-none",
+                className
+            )}
+            {...props}
+        >
+            {title && (
+                <div className="px-4 py-3 border-b border-border/60 flex items-center justify-between shrink-0">
+                    <h3 className="font-semibold text-sm text-foreground">{title}</h3>
+                </div>
+            )}
+            <div className={cn("flex-1 overflow-auto", contentClassName)}>
+                {children}
+            </div>
+        </motion.div>
+    );
+};

package/src/components/organisms/InspectorPanel.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export interface InspectorPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string
+    footer?: React.ReactNode
+}
+
+export const InspectorPanel = React.forwardRef<HTMLDivElement, InspectorPanelProps>(
+    ({ className, title, children, footer, ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "flex flex-col w-[320px] h-[420px] w-full h-full bg-background border-l border-border",
+                    className
+                )}
+                {...props}
+            >
+                {title && (
+                    <div className="flex items-center h-12 px-4 border-b border-border bg-muted/30">
+                        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+                    </div>
+                )}
+                <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
+                    {children}
+                </div>
+                {footer && (
+                    <div className="p-4 border-t border-border bg-muted/30">
+                        {footer}
+                    </div>
+                )}
+            </div>
+        )
+    }
+)
+InspectorPanel.displayName = "InspectorPanel"
+
+export const InspectorSection = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { title: string }
+>(({ className, title, children, ...props }, ref) => (
+    <div ref={ref} className={cn("space-y-3", className)} {...props}>
+        <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {title}
+        </h4>
+        <div className="space-y-2">
+            {children}
+        </div>
+    </div>
+))
+InspectorSection.displayName = "InspectorSection"
+
+export const InspectorField = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & { label: string }
+>(({ className, label, children, ...props }, ref) => (
+    <div ref={ref} className={cn("grid gap-1.5", className)} {...props}>
+        <label className="text-xs font-medium text-foreground">{label}</label>
+        {children}
+    </div>
+))
+InspectorField.displayName = "InspectorField"