@luxfi/ui 8.0.0 → 8.2.0

package/src/code-terminal.tsx

@@ -0,0 +1,530 @@
+"use client"
+
+import { VariantProps, type GuiElement, variants } from '@hanzo/ui'
+import * as React from "react"
+import {
+  ChevronRight,
+  Copy,
+  Download,
+  Maximize2,
+  Minimize2,
+  Minus,
+  Plus,
+  RefreshCw,
+  Settings,
+  Square,
+  Terminal,
+  X,
+} from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Box, ScrollArea, css, sx } from '@hanzo/ui'
+import { Separator } from "./separator"
+
+const codeTerminalVariants = variants(
+  "relative flex flex-col overflow-hidden rounded-lg border",
+  {
+    variants: {
+      theme: {
+        dark: "bg-black border-[var(--color-border-divider)] text-[var(--lux-state-success)]",
+        light: "bg-white border-[var(--color-border-divider)] text-[var(--color-text-primary)]",
+        matrix: "bg-black border-[var(--lux-state-success)] text-[var(--lux-state-success)]",
+        hacker: "bg-[var(--color-bg-primary)] border-[var(--lux-state-notice)] text-[var(--lux-state-notice)]",
+        retro: "bg-[var(--lux-state-notice)] border-[var(--lux-state-notice)] text-[var(--lux-state-notice)]",
+        modern: "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)] text-[var(--color-text-disabled)]",
+      },
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      theme: "dark",
+      size: "default",
+    },
+  }
+)
+
+export interface TerminalLine {
+  id: string
+  type: "input" | "output" | "error" | "system"
+  content: string
+  timestamp: number
+  command?: string
+  exitCode?: number
+}
+
+export interface CodeTerminalProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof codeTerminalVariants> {
+  title?: string
+  prompt?: string
+  maxLines?: number
+  showLineNumbers?: boolean
+  allowInput?: boolean
+  allowClear?: boolean
+  allowCopy?: boolean
+  allowDownload?: boolean
+  allowFullscreen?: boolean
+  height?: string
+  autoScroll?: boolean
+  history?: string[]
+  onCommand?: (command: string) => void | Promise<void>
+  onClear?: () => void
+  initialLines?: TerminalLine[]
+}
+
+// ANSI color codes mapping
+const ansiColors = {
+  reset: "",
+  black: "text-black",
+  red: "text-[var(--lux-state-error)]",
+  green: "text-[var(--lux-state-success)]",
+  yellow: "text-[var(--lux-state-notice)]",
+  blue: "text-[var(--color-link-primary)]",
+  magenta: "text-magenta-500",
+  cyan: "text-[var(--color-link-primary)]",
+  white: "text-white",
+  gray: "text-[var(--color-text-secondary)]",
+  brightRed: "text-[var(--lux-state-error)]",
+  brightGreen: "text-[var(--lux-state-success)]",
+  brightYellow: "text-[var(--lux-state-notice)]",
+  brightBlue: "text-[var(--color-link-primary)]",
+  brightMagenta: "text-magenta-400",
+  brightCyan: "text-[var(--color-link-primary)]",
+  brightWhite: "text-[var(--color-text-disabled)]",
+}
+
+// Parse ANSI escape sequences
+const parseAnsiContent = (content: string): React.ReactNode => {
+  const ansiRegex = /\x1b\[([0-9;]*)m/g
+  const parts: Array<{ text: string; classes: string[] }> = []
+  let lastIndex = 0
+  let currentClasses: string[] = []
+
+  let match
+  while ((match = ansiRegex.exec(content)) !== null) {
+    // Add text before this escape sequence
+    if (match.index > lastIndex) {
+      parts.push({
+        text: content.slice(lastIndex, match.index),
+        classes: [...currentClasses],
+      })
+    }
+
+    // Parse the escape sequence
+    const codes = match[1].split(";").map((code) => parseInt(code) || 0)
+    codes.forEach((code) => {
+      switch (code) {
+        case 0:
+          currentClasses = []
+          break // reset
+        case 30:
+          currentClasses.push(ansiColors.black)
+          break
+        case 31:
+          currentClasses.push(ansiColors.red)
+          break
+        case 32:
+          currentClasses.push(ansiColors.green)
+          break
+        case 33:
+          currentClasses.push(ansiColors.yellow)
+          break
+        case 34:
+          currentClasses.push(ansiColors.blue)
+          break
+        case 35:
+          currentClasses.push(ansiColors.magenta)
+          break
+        case 36:
+          currentClasses.push(ansiColors.cyan)
+          break
+        case 37:
+          currentClasses.push(ansiColors.white)
+          break
+        case 90:
+          currentClasses.push(ansiColors.gray)
+          break
+        case 91:
+          currentClasses.push(ansiColors.brightRed)
+          break
+        case 92:
+          currentClasses.push(ansiColors.brightGreen)
+          break
+        case 93:
+          currentClasses.push(ansiColors.brightYellow)
+          break
+        case 94:
+          currentClasses.push(ansiColors.brightBlue)
+          break
+        case 95:
+          currentClasses.push(ansiColors.brightMagenta)
+          break
+        case 96:
+          currentClasses.push(ansiColors.brightCyan)
+          break
+        case 97:
+          currentClasses.push(ansiColors.brightWhite)
+          break
+      }
+    })
+
+    lastIndex = match.index + match[0].length
+  }
+
+  // Add remaining text
+  if (lastIndex < content.length) {
+    parts.push({
+      text: content.slice(lastIndex),
+      classes: [...currentClasses],
+    })
+  }
+
+  return parts.map((part, index) => (
+    <Box tag="span" key={index} className={cn(part.classes)}>
+      {part.text}
+    </Box>
+  ))
+}
+
+const CodeTerminal = React.forwardRef<HTMLDivElement, CodeTerminalProps>(
+  (
+    {
+      className,
+      theme,
+      size,
+      title = "Terminal",
+      prompt = "$",
+      maxLines = 1000,
+      showLineNumbers = false,
+      allowInput = true,
+      allowClear = true,
+      allowCopy = true,
+      allowDownload = false,
+      allowFullscreen = true,
+      height = "400px",
+      autoScroll = true,
+      history = [],
+      onCommand,
+      onClear,
+      initialLines = [],
+      ...props
+    },
+    ref
+  ) => {
+    const [lines, setLines] = React.useState<TerminalLine[]>(initialLines)
+    const [input, setInput] = React.useState("")
+    const [historyIndex, setHistoryIndex] = React.useState(-1)
+    const [isFullscreen, setIsFullscreen] = React.useState(false)
+    const [commandHistory, setCommandHistory] =
+      React.useState<string[]>(history)
+
+    const scrollAreaRef = React.useRef<HTMLDivElement | null>(null)
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    // Auto-scroll to bottom
+    React.useEffect(() => {
+      if (autoScroll && scrollAreaRef.current) {
+        scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight
+      }
+    }, [lines, autoScroll])
+
+    const addLine = React.useCallback(
+      (line: Omit<TerminalLine, "id" | "timestamp">) => {
+        const newLine: TerminalLine = {
+          ...line,
+          id: `line-${Date.now()}-${Math.random()}`,
+          timestamp: Date.now(),
+        }
+
+        setLines((prev) => {
+          const updated = [...prev, newLine]
+          return updated.length > maxLines ? updated.slice(-maxLines) : updated
+        })
+      },
+      [maxLines]
+    )
+
+    const handleCommand = React.useCallback(
+      async (command: string) => {
+        if (!command.trim()) return
+
+        // Add command to history
+        setCommandHistory((prev) => [...prev, command])
+        setHistoryIndex(-1)
+
+        // Add input line
+        addLine({
+          type: "input",
+          content: `${prompt} ${command}`,
+          command,
+        })
+
+        // Handle built-in commands
+        if (command === "clear") {
+          if (onClear) {
+            onClear()
+          } else {
+            setLines([])
+          }
+          return
+        }
+
+        if (command === "history") {
+          commandHistory.forEach((cmd, index) => {
+            addLine({
+              type: "output",
+              content: `${index + 1}  ${cmd}`,
+            })
+          })
+          return
+        }
+
+        if (command.startsWith("echo ")) {
+          addLine({
+            type: "output",
+            content: command.slice(5),
+          })
+          return
+        }
+
+        // Call custom command handler
+        if (onCommand) {
+          try {
+            await onCommand(command)
+          } catch (error) {
+            addLine({
+              type: "error",
+              content: error instanceof Error ? error.message : String(error),
+              exitCode: 1,
+            })
+          }
+        } else {
+          addLine({
+            type: "error",
+            content: `Command not found: ${command}`,
+            exitCode: 127,
+          })
+        }
+      },
+      [prompt, addLine, onCommand, onClear, commandHistory]
+    )
+
+    const handleInputSubmit = (e: React.FormEvent) => {
+      e.preventDefault()
+      if (input.trim()) {
+        handleCommand(input)
+        setInput("")
+      }
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault()
+        if (historyIndex < commandHistory.length - 1) {
+          const newIndex = historyIndex + 1
+          setHistoryIndex(newIndex)
+          setInput(commandHistory[commandHistory.length - 1 - newIndex] || "")
+        }
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault()
+        if (historyIndex > 0) {
+          const newIndex = historyIndex - 1
+          setHistoryIndex(newIndex)
+          setInput(commandHistory[commandHistory.length - 1 - newIndex] || "")
+        } else if (historyIndex === 0) {
+          setHistoryIndex(-1)
+          setInput("")
+        }
+      }
+    }
+
+    const copyContent = React.useCallback(async () => {
+      const content = lines.map((line) => line.content).join("\n")
+
+      try {
+        await navigator.clipboard.writeText(content)
+      } catch (error) {
+        console.error("Failed to copy terminal content:", error)
+      }
+    }, [lines])
+
+    const downloadContent = React.useCallback(() => {
+      const content = lines
+        .map(
+          (line) =>
+            `[${new Date(line.timestamp).toISOString()}] ${line.content}`
+        )
+        .join("\n")
+
+      const blob = new Blob([content], { type: "text/plain" })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `terminal-${Date.now()}.txt`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    }, [lines])
+
+    const clearTerminal = () => {
+      if (onClear) {
+        onClear()
+      } else {
+        setLines([])
+      }
+    }
+
+    // Focus input when terminal is clicked
+    const handleTerminalClick = () => {
+      if (allowInput && inputRef.current) {
+        inputRef.current.focus()
+      }
+    }
+
+    return (
+      <Box
+        ref={ref as never}
+        className={cn(
+          codeTerminalVariants({ theme, size }),
+          isFullscreen && "fixed inset-0 z-50",
+          className
+        )}
+        style={{ height: isFullscreen ? "100vh" : height }}
+        onClick={handleTerminalClick}
+        {...props}
+      >
+        {/* Header */}
+        <Box className="flex items-center justify-between border-b px-4 py-2 bg-muted/30">
+          <Box className="flex items-center gap-2">
+            <Box className="flex gap-1">
+              <Box className="w-3 h-3 rounded-full bg-[var(--lux-state-error)]" />
+              <Box className="w-3 h-3 rounded-full bg-[var(--lux-state-notice)]" />
+              <Box className="w-3 h-3 rounded-full bg-[var(--lux-state-success)]" />
+            </Box>
+            <Terminal style={css('h-4 w-4')} />
+            <Box tag="span" className="text-sm font-medium">{title}</Box>
+            {lines.length > 0 && (
+              <Box tag="span" className="text-xs text-muted-foreground">
+                {lines.length} lines
+              </Box>
+            )}
+          </Box>
+
+          <Box className="flex items-center gap-1">
+            {allowClear && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={clearTerminal}
+                {...sx('h-8 w-8 p-0')}
+              >
+                <RefreshCw style={css('h-3.5 w-3.5')} />
+              </Button>
+            )}
+
+            {allowCopy && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={copyContent}
+                {...sx('h-8 w-8 p-0')}
+              >
+                <Copy style={css('h-3.5 w-3.5')} />
+              </Button>
+            )}
+
+            {allowDownload && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={downloadContent}
+                {...sx('h-8 w-8 p-0')}
+              >
+                <Download style={css('h-3.5 w-3.5')} />
+              </Button>
+            )}
+
+            {allowFullscreen && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setIsFullscreen(!isFullscreen)}
+                {...sx('h-8 w-8 p-0')}
+              >
+                {isFullscreen ? (
+                  <Minimize2 style={css('h-3.5 w-3.5')} />
+                ) : (
+                  <Maximize2 style={css('h-3.5 w-3.5')} />
+                )}
+              </Button>
+            )}
+          </Box>
+        </Box>
+
+        {/* Content */}
+        <Box className="flex-1 flex flex-col min-h-0">
+          <ScrollArea ref={scrollAreaRef as never} {...sx('flex-1 p-4')}>
+            <Box className="space-y-1 font-mono">
+              {lines.map((line, index) => (
+                <Box key={line.id} className="flex items-start gap-2">
+                  {showLineNumbers && (
+                    <Box tag="span" className="text-xs text-muted-foreground w-12 text-right flex-shrink-0">
+                      {index + 1}
+                    </Box>
+                  )}
+                  <Box
+                    className={cn(
+                      "flex-1 whitespace-pre-wrap break-words",
+                      line.type === "input" && "text-inherit",
+                      line.type === "output" && "text-muted-foreground",
+                      line.type === "error" && "text-[var(--lux-state-error)]",
+                      line.type === "system" && "text-[var(--color-link-primary)]"
+                    )}
+                  >
+                    {typeof line.content === "string" &&
+                    line.content.includes("\x1b[")
+                      ? parseAnsiContent(line.content)
+                      : line.content}
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </ScrollArea>
+
+          {/* Input */}
+          {allowInput && (
+            <>
+              <Separator />
+              <Box tag="form" onSubmit={handleInputSubmit} className="p-4">
+                <Box className="flex items-center gap-2 font-mono">
+                  <ChevronRight style={css('h-4 w-4 flex-shrink-0')} />
+                  <Box tag="span" className="flex-shrink-0">{prompt}</Box>
+                  <Input
+                    ref={inputRef}
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    {...sx('flex-1 border-0 bg-transparent p-0 focus-visible:ring-0 font-mono')}
+                    placeholder="Enter command..."
+                    autoComplete="off"
+                    autoFocus
+                  />
+                </Box>
+              </Box>
+            </>
+          )}
+        </Box>
+      </Box>
+    )
+  }
+)
+
+CodeTerminal.displayName = "CodeTerminal"
+
+export { CodeTerminal, codeTerminalVariants }

package/src/collaboration-navigation-bar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import { Users } from "lucide-react"
+
+import { cn } from "./utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@hanzo/ui"
+
+export interface CollaborationNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  title?: string
+  collaborators?: Array<{ name: string; avatar?: string }>
+}
+
+const CollaborationNavigationBar = React.forwardRef<
+  HTMLElement,
+  CollaborationNavigationBarProps
+>(({ className, title, collaborators = [], ...props }, ref) => {
+  return (
+    <Box tag="nav" ref={ref} className={cn("border-b", className)} {...props}>
+      <Box className="container flex h-16 items-center justify-between">
+        <Box tag="h2" className="text-lg font-semibold">{title}</Box>
+        <Box className="flex items-center gap-3">
+          <Users style={css('h-5 w-5 text-muted-foreground')} />
+          <Box className="flex -space-x-2">
+            {collaborators.slice(0, 3).map((user, i) => (
+              <Avatar key={i} {...sx('border-2 border-background')}>
+                <AvatarImage src={user.avatar} />
+                <AvatarFallback>{user.name[0]}</AvatarFallback>
+              </Avatar>
+            ))}
+            {collaborators.length > 3 && (
+              <Avatar {...sx('border-2 border-background')}>
+                <AvatarFallback>+{collaborators.length - 3}</AvatarFallback>
+              </Avatar>
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+})
+CollaborationNavigationBar.displayName = "CollaborationNavigationBar"
+
+export { CollaborationNavigationBar }

package/src/collapsible.tsx

@@ -1,4 +1,5 @@
 import { Collapsible, YStack } from '@hanzo/gui';
+import { css, sx } from '@hanzo/ui'
 import React from 'react';
 
 import type { LinkProps } from './link';
@@ -65,7 +66,7 @@ export const CollapsibleDetails = (props: CollapsibleDetailsProps) => {
   return (
     <Collapsible open={ isExpanded } onOpenChange={ setIsExpanded }>
       <Link
-        className="text-sm underline decoration-dashed w-fit"
+        {...sx('text-sm underline decoration-dashed w-fit')} style={css('text-sm underline decoration-dashed w-fit')}
         aria-expanded={ isExpanded }
         onClick={ handleClick }
         loading={ loading }
@@ -116,7 +117,7 @@ export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
       { items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
       { items.length > cutLength && (
         <Link
-          className="text-sm underline decoration-dashed w-fit min-w-0"
+          {...sx('text-sm underline decoration-dashed w-fit min-w-0')} style={css('text-sm underline decoration-dashed w-fit min-w-0')}
           aria-expanded={ isExpanded }
           onClick={ handleToggle }
           { ...triggerProps }

package/src/color-picker.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { Box, sx } from '@hanzo/ui'
+import { HexColorInput, HexColorPicker } from "react-colorful"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@hanzo/ui"
+
+interface ColorPickerProps {
+  value?: string
+  onChange?: (color: string) => void
+  className?: string
+  disabled?: boolean
+}
+
+const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
+  ({ value = "#3b82f6", onChange, className, disabled = false }, ref) => {
+    const [color, setColor] = React.useState(value)
+
+    const handleChange = (newColor: string) => {
+      setColor(newColor)
+      onChange?.(newColor)
+    }
+
+    return (
+      <Box ref={ref} className={cn("flex items-center gap-2", className)}>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              {...sx('w-[220px] justify-start text-left font-normal')}
+              disabled={disabled}
+            >
+              <Box className="flex w-full items-center gap-2">
+                <Box
+                  className="h-4 w-4 rounded border"
+                  style={{ backgroundColor: color }}
+                />
+                <Box tag="span" className="flex-1 truncate">{color}</Box>
+              </Box>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent {...sx('w-auto p-3')}>
+            <Box className="space-y-3">
+              <HexColorPicker color={color} onChange={handleChange} />
+              <Input
+                value={color}
+                onChange={(e) => handleChange(e.target.value)}
+                placeholder="#000000"
+                {...sx('font-mono text-sm')}
+              />
+            </Box>
+          </PopoverContent>
+        </Popover>
+      </Box>
+    )
+  }
+)
+ColorPicker.displayName = "ColorPicker"
+
+export { ColorPicker }