@inferencesh/ui 0.0.0-stage → 0.1.1

package/src/components/tree-view.tsx

@@ -0,0 +1,499 @@
+'use client'
+
+import { cn } from "cn"
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+import { cva } from 'class-variance-authority'
+import { ChevronRight } from 'lucide-react'
+import React from 'react'
+
+const treeVariants = cva(
+    'group cursor-pointer hover:before:opacity-100 before:absolute before:rounded-lg before:left-0 px-4 before:w-full before:opacity-0 before:bg-accent/70 before:h-[2rem] before:-z-10'
+)
+
+const selectedTreeVariants = cva(
+    'before:opacity-100 before:bg-accent/70 text-accent-foreground'
+)
+
+const dragOverVariants = cva(
+    'before:opacity-100 before:bg-primary/20 text-primary-foreground'
+)
+
+type TreeIcon = React.ComponentType<{ className?: string }>
+
+interface TreeDataItem {
+    id: string
+    name: string
+    icon?: TreeIcon
+    selectedIcon?: TreeIcon
+    openIcon?: TreeIcon
+    children?: TreeDataItem[]
+    actions?: React.ReactNode
+    onClick?: () => void
+    draggable?: boolean
+    droppable?: boolean
+    disabled?: boolean
+}
+
+type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
+    data: TreeDataItem[] | TreeDataItem
+    initialSelectedItemId?: string
+    onSelectChange?: (item: TreeDataItem | undefined) => void
+    expandAll?: boolean
+    defaultNodeIcon?: TreeIcon
+    defaultLeafIcon?: TreeIcon
+    onDocumentDrag?: (sourceItem: TreeDataItem, targetItem: TreeDataItem) => void
+    selectedClassName?: string
+}
+
+const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
+    (
+        {
+            data,
+            initialSelectedItemId,
+            onSelectChange,
+            expandAll,
+            defaultLeafIcon,
+            defaultNodeIcon,
+            className,
+            onDocumentDrag,
+            selectedClassName,
+            ...props
+        },
+        ref
+    ) => {
+        const [selectedItemId, setSelectedItemId] = React.useState<
+            string | undefined
+        >(initialSelectedItemId)
+
+        const [draggedItem, setDraggedItem] = React.useState<TreeDataItem | null>(null)
+
+        const handleSelectChange = React.useCallback(
+            (item: TreeDataItem | undefined) => {
+                setSelectedItemId(item?.id)
+                if (onSelectChange) {
+                    onSelectChange(item)
+                }
+            },
+            [onSelectChange]
+        )
+
+        const handleDragStart = React.useCallback((item: TreeDataItem) => {
+            setDraggedItem(item)
+        }, [])
+
+        const handleDrop = React.useCallback((targetItem: TreeDataItem) => {
+            if (draggedItem && onDocumentDrag && draggedItem.id !== targetItem.id) {
+                onDocumentDrag(draggedItem, targetItem)
+            }
+            setDraggedItem(null)
+        }, [draggedItem, onDocumentDrag])
+
+        const expandedItemIds = React.useMemo(() => {
+            if (!initialSelectedItemId) {
+                return [] as string[]
+            }
+
+            const ids: string[] = []
+
+            function walkTreeItems(
+                items: TreeDataItem[] | TreeDataItem,
+                targetId: string
+            ) {
+                if (items instanceof Array) {
+                    for (let i = 0; i < items.length; i++) {
+                        ids.push(items[i]!.id)
+                        if (walkTreeItems(items[i]!, targetId) && !expandAll) {
+                            return true
+                        }
+                        if (!expandAll) ids.pop()
+                    }
+                } else if (!expandAll && items.id === targetId) {
+                    return true
+                } else if (items.children) {
+                    return walkTreeItems(items.children, targetId)
+                }
+            }
+
+            walkTreeItems(data, initialSelectedItemId)
+            return ids
+        }, [data, expandAll, initialSelectedItemId])
+
+        return (
+            <div className={cn('overflow-hidden relative', className)}>
+                <TreeItem
+                    data={data}
+                    ref={ref}
+                    selectedItemId={selectedItemId}
+                    handleSelectChange={handleSelectChange}
+                    expandedItemIds={expandedItemIds}
+                    defaultLeafIcon={defaultLeafIcon}
+                    defaultNodeIcon={defaultNodeIcon}
+                    handleDragStart={handleDragStart}
+                    handleDrop={handleDrop}
+                    draggedItem={draggedItem}
+                    selectedClassName={selectedClassName}
+                    {...props}
+                />
+            </div>
+        )
+    }
+)
+TreeView.displayName = 'TreeView'
+
+type TreeItemProps = TreeProps & {
+    selectedItemId?: string
+    handleSelectChange: (item: TreeDataItem | undefined) => void
+    expandedItemIds: string[]
+    defaultNodeIcon?: TreeIcon
+    defaultLeafIcon?: TreeIcon
+    handleDragStart?: (item: TreeDataItem) => void
+    handleDrop?: (item: TreeDataItem) => void
+    draggedItem: TreeDataItem | null
+    selectedClassName?: string
+}
+
+const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
+    (
+        {
+            className,
+            data,
+            selectedItemId,
+            handleSelectChange,
+            expandedItemIds,
+            defaultNodeIcon,
+            defaultLeafIcon,
+            handleDragStart,
+            handleDrop,
+            draggedItem,
+            selectedClassName,
+            ...props
+        },
+        ref
+    ) => {
+        if (!(data instanceof Array)) {
+            data = [data]
+        }
+        return (
+            <div ref={ref} role="tree" className={className} {...props}>
+                <ul>
+                    {data.map((item) => (
+                        <li key={item.id}>
+                            {item.children ? (
+                                <TreeNode
+                                    item={item}
+                                    selectedItemId={selectedItemId}
+                                    expandedItemIds={expandedItemIds}
+                                    handleSelectChange={handleSelectChange}
+                                    defaultNodeIcon={defaultNodeIcon}
+                                    defaultLeafIcon={defaultLeafIcon}
+                                    handleDragStart={handleDragStart}
+                                    handleDrop={handleDrop}
+                                    draggedItem={draggedItem}
+                                    selectedClassName={selectedClassName}
+                                />
+                            ) : (
+                                <TreeLeaf
+                                    item={item}
+                                    selectedItemId={selectedItemId}
+                                    handleSelectChange={handleSelectChange}
+                                    defaultLeafIcon={defaultLeafIcon}
+                                    handleDragStart={handleDragStart}
+                                    handleDrop={handleDrop}
+                                    draggedItem={draggedItem}
+                                    selectedClassName={selectedClassName}
+                                />
+                            )}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        )
+    }
+)
+TreeItem.displayName = 'TreeItem'
+
+const TreeNode = ({
+    item,
+    handleSelectChange,
+    expandedItemIds,
+    selectedItemId,
+    defaultNodeIcon,
+    defaultLeafIcon,
+    handleDragStart,
+    handleDrop,
+    draggedItem,
+    selectedClassName,
+}: {
+    item: TreeDataItem
+    handleSelectChange: (item: TreeDataItem | undefined) => void
+    expandedItemIds: string[]
+    selectedItemId?: string
+    defaultNodeIcon?: TreeIcon
+    defaultLeafIcon?: TreeIcon
+    handleDragStart?: (item: TreeDataItem) => void
+    handleDrop?: (item: TreeDataItem) => void
+    draggedItem: TreeDataItem | null
+    selectedClassName?: string
+}) => {
+    const [value, setValue] = React.useState<string[]>(
+        expandedItemIds.includes(item.id) ? [item.id] : []
+    )
+    const [isDragOver, setIsDragOver] = React.useState(false)
+
+    const onDragStart = (e: React.DragEvent) => {
+        if (!item.draggable) {
+            e.preventDefault()
+            return
+        }
+        e.dataTransfer.setData('text/plain', item.id)
+        handleDragStart?.(item)
+    }
+
+    const onDragOver = (e: React.DragEvent) => {
+        if (item.droppable !== false && draggedItem && draggedItem.id !== item.id) {
+            e.preventDefault()
+            setIsDragOver(true)
+        }
+    }
+
+    const onDragLeave = () => {
+        setIsDragOver(false)
+    }
+
+    const onDrop = (e: React.DragEvent) => {
+        e.preventDefault()
+        setIsDragOver(false)
+        handleDrop?.(item)
+    }
+
+    return (
+        <AccordionPrimitive.Root
+            multiple
+            value={value}
+            onValueChange={(s) => setValue(s as string[])}
+        >
+            <AccordionPrimitive.Item value={item.id}>
+                <TreeAccordionTrigger
+                    className={cn(
+                        treeVariants(),
+                        selectedItemId === item.id && (selectedClassName || selectedTreeVariants()),
+                        isDragOver && dragOverVariants()
+                    )}
+                    onClick={() => {
+                        handleSelectChange(item)
+                        item.onClick?.()
+                    }}
+                    draggable={!!item.draggable}
+                    onDragStart={onDragStart}
+                    onDragOver={onDragOver}
+                    onDragLeave={onDragLeave}
+                    onDrop={onDrop}
+                >
+                    <TreeIconRenderer
+                        item={item}
+                        isSelected={selectedItemId === item.id}
+                        isOpen={value.includes(item.id)}
+                        default={defaultNodeIcon}
+                    />
+                    <span className="text-sm truncate">{item.name}</span>
+                    <TreeActions isSelected={selectedItemId === item.id}>
+                        {item.actions}
+                    </TreeActions>
+                </TreeAccordionTrigger>
+                <TreeAccordionContent className="ml-5 border-l border-border">
+                    <TreeItem
+                        data={item.children ? item.children : item}
+                        selectedItemId={selectedItemId}
+                        handleSelectChange={handleSelectChange}
+                        expandedItemIds={expandedItemIds}
+                        defaultLeafIcon={defaultLeafIcon}
+                        defaultNodeIcon={defaultNodeIcon}
+                        handleDragStart={handleDragStart}
+                        handleDrop={handleDrop}
+                        draggedItem={draggedItem}
+                        selectedClassName={selectedClassName}
+                    />
+                </TreeAccordionContent>
+            </AccordionPrimitive.Item>
+        </AccordionPrimitive.Root>
+    )
+}
+
+const TreeLeaf = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & {
+        item: TreeDataItem
+        selectedItemId?: string
+        handleSelectChange: (item: TreeDataItem | undefined) => void
+        defaultLeafIcon?: TreeIcon
+        handleDragStart?: (item: TreeDataItem) => void
+        handleDrop?: (item: TreeDataItem) => void
+        draggedItem: TreeDataItem | null
+        selectedClassName?: string
+    }
+>(
+    (
+        {
+            className,
+            item,
+            selectedItemId,
+            handleSelectChange,
+            defaultLeafIcon,
+            handleDragStart,
+            handleDrop,
+            draggedItem,
+            selectedClassName,
+            ...props
+        },
+        ref
+    ) => {
+        const [isDragOver, setIsDragOver] = React.useState(false)
+
+        const onDragStart = (e: React.DragEvent) => {
+            if (!item.draggable || item.disabled) {
+                e.preventDefault()
+                return
+            }
+            e.dataTransfer.setData('text/plain', item.id)
+            handleDragStart?.(item)
+        }
+
+        const onDragOver = (e: React.DragEvent) => {
+            if (item.droppable !== false && !item.disabled && draggedItem && draggedItem.id !== item.id) {
+                e.preventDefault()
+                setIsDragOver(true)
+            }
+        }
+
+        const onDragLeave = () => {
+            setIsDragOver(false)
+        }
+
+        const onDrop = (e: React.DragEvent) => {
+            if (item.disabled) return
+            e.preventDefault()
+            setIsDragOver(false)
+            handleDrop?.(item)
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    'flex text-left items-center py-2 cursor-pointer before:right-1',
+                    treeVariants(),
+                    className,
+                    selectedItemId === item.id && (selectedClassName || selectedTreeVariants()),
+                    isDragOver && dragOverVariants(),
+                    item.disabled && 'opacity-50 cursor-not-allowed pointer-events-none'
+                )}
+                onClick={() => {
+                    if (item.disabled) return
+                    handleSelectChange(item)
+                    item.onClick?.()
+                }}
+                draggable={!!item.draggable && !item.disabled}
+                onDragStart={onDragStart}
+                onDragOver={onDragOver}
+                onDragLeave={onDragLeave}
+                onDrop={onDrop}
+                {...props}
+            >
+                <TreeIconRenderer
+                    item={item}
+                    isSelected={selectedItemId === item.id}
+                    default={defaultLeafIcon}
+                />
+                <span className="flex-grow text-sm truncate break-all whitespace-pre-wrap">{item.name}</span>
+                <TreeActions isSelected={selectedItemId === item.id && !item.disabled}>
+                    {item.actions}
+                </TreeActions>
+            </div>
+        )
+    }
+)
+TreeLeaf.displayName = 'TreeLeaf'
+
+const TreeAccordionTrigger = React.forwardRef<
+    HTMLElement,
+    AccordionPrimitive.Trigger.Props & React.HTMLAttributes<HTMLElement>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header>
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                'flex flex-1 w-full items-center py-2 transition-all [&[data-panel-open]>svg:first-of-type]:rotate-90',
+                className
+            )}
+            {...props}
+        >
+            <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200 text-accent-foreground/50 mr-1" />
+            {children}
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+))
+TreeAccordionTrigger.displayName = 'TreeAccordionTrigger'
+
+const TreeAccordionContent = React.forwardRef<
+    HTMLDivElement,
+    AccordionPrimitive.Panel.Props
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Panel
+        ref={ref}
+        className={cn(
+            'overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up',
+            className
+        )}
+        {...props}
+    >
+        <div className="pb-1 pt-0"><span>{children}</span></div>
+    </AccordionPrimitive.Panel>
+))
+TreeAccordionContent.displayName = 'TreeAccordionContent'
+
+const TreeIconRenderer = ({
+    item,
+    isOpen,
+    isSelected,
+    default: defaultIcon
+}: {
+    item: TreeDataItem
+    isOpen?: boolean
+    isSelected?: boolean
+    default?: TreeIcon
+}) => {
+    let Icon = defaultIcon
+    if (isSelected && item.selectedIcon) {
+        Icon = item.selectedIcon
+    } else if (isOpen && item.openIcon) {
+        Icon = item.openIcon
+    } else if (item.icon) {
+        Icon = item.icon
+    }
+    return Icon ? (
+        <Icon className="h-4 w-4 shrink-0 mr-2" />
+    ) : (
+        <></>
+    )
+}
+
+const TreeActions = ({
+    children,
+    isSelected
+}: {
+    children: React.ReactNode
+    isSelected: boolean
+}) => {
+    return (
+        <div
+            className={cn(
+                isSelected ? 'block' : 'hidden',
+                'absolute right-3 group-hover:block'
+            )}
+        >
+            {children}
+        </div>
+    )
+}
+
+export { TreeView, type TreeDataItem }

package/src/components/unglow-loader.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface UnglowLoaderProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  /** Custom color (CSS value like "hsl(var(--muted-foreground) / 0.2)") */
+  monoColor?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Static logo without animation or glow.
+ * Optionally pass monoColor for custom monochrome color.
+ */
+const UnglowLoader = ({ width = 240, height = 240, className, monoColor, strokeWidth }: UnglowLoaderProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={false}
+      colored={monoColor ? false : true}
+      monoColor={monoColor}
+      withGlow={false}
+    />
+  );
+};
+
+export default UnglowLoader;