@luxfi/ui 7.4.15 → 8.1.0

package/src/chrome.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { Box, css, sx } from '@hanzo/ui'
 import {
   Building2,
   Check,
@@ -61,13 +62,13 @@ export function initials(label: string): string {
 
 const Monogram = ({ label, logo }: { label: string; logo?: string }) => (
   logo ?
-    <img src={ logo } alt="" className="h-5 w-5 shrink-0 rounded object-contain"/> :
-    <span
+    <Box tag="img" src={ logo } alt="" className="h-5 w-5 shrink-0 rounded object-contain"/> :
+    <Box tag="span"
       aria-hidden="true"
       className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-[rgba(127,127,127,0.22)] text-[10px] font-bold"
     >
       { initials(label) }
-    </span>
+    </Box>
 );
 
 export interface SwitcherProps {
@@ -105,9 +106,9 @@ const Row = ({ item, onDone, menu }: { item: ChromeItem; onDone: () => void; men
   const body = (
     <>
       { item.icon }
-      <span className="flex-1 truncate">{ item.label }</span>
-      { item.hint ? <span className="text-xs opacity-60">{ item.hint }</span> : null }
-      { item.selected ? <Check aria-hidden="true" className="h-4 w-4 shrink-0"/> : null }
+      <Box tag="span" className="flex-1 truncate">{ item.label }</Box>
+      { item.hint ? <Box tag="span" className="text-xs opacity-60">{ item.hint }</Box> : null }
+      { item.selected ? <Check aria-hidden="true" style={css('h-4 w-4 shrink-0')}/> : null }
     </>
   );
   const className = cn(
@@ -164,22 +165,22 @@ export const Switcher = ({
 
   const rows: ReadonlyArray<ChromeItem> =
     status === 'anonymous' && onSignIn ?
-      [ { id: 'sign-in', label: signInLabel, icon: <User aria-hidden="true" className="h-4 w-4"/>, onSelect: onSignIn } ] :
+      [ { id: 'sign-in', label: signInLabel, icon: <User aria-hidden="true" style={css('h-4 w-4')}/>, onSelect: onSignIn } ] :
       status === 'ready' ? items : [];
 
   // ONE panel body, rendered by both presentations.
   const panel = (menu: boolean) => (
     <>
-      <div className="px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55">{ title }</div>
+      <Box className="px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wide opacity-55">{ title }</Box>
       { message ?
-        <div data-testid="chrome-message" className="px-2 py-2 text-sm opacity-70">{ message }</div> :
+        <Box data-testid="chrome-message" className="px-2 py-2 text-sm opacity-70">{ message }</Box> :
         null }
       { rows.map((item) => <Row key={ item.id } item={ item } onDone={ close } menu={ menu }/>) }
       { footer.length > 0 ?
         <>
           { menu ?
-            <MenuSeparator className="my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]"/> :
-            <div className="my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]"/> }
+            <MenuSeparator {...sx('my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]')}/> :
+            <Box className="my-1 h-px bg-[var(--color-border-divider,rgba(127,127,127,0.25))]"/> }
           { footer.map((item) => <Row key={ item.id } item={ item } onDone={ close } menu={ menu }/>) }
         </> :
         null }
@@ -187,7 +188,7 @@ export const Switcher = ({
   );
 
   const trigger = (
-    <button
+    <Box tag="button"
       type="button"
       data-testid={ testId }
       aria-label={ title }
@@ -199,9 +200,9 @@ export const Switcher = ({
       ) }
     >
       { icon }
-      <span className="truncate">{ label }</span>
-      <ChevronsUpDown aria-hidden="true" className="h-3.5 w-3.5 shrink-0 opacity-60"/>
-    </button>
+      <Box tag="span" className="truncate">{ label }</Box>
+      <ChevronsUpDown aria-hidden="true" style={css('h-3.5 w-3.5 shrink-0 opacity-60')}/>
+    </Box>
   );
 
   // Phone: the same rows in a gui Sheet — drag, momentum, snap-to-dismiss.
@@ -270,7 +271,7 @@ export const ProjectSwitcher = (): React.ReactElement | null => {
       testId="project-switcher"
       title="Project"
       label={ id.project?.displayName || id.project?.name || 'Project' }
-      icon={ <Folder aria-hidden="true" className="h-4 w-4 opacity-70"/> }
+      icon={ <Folder aria-hidden="true" style={css('h-4 w-4 opacity-70')}/> }
       status={ id.status }
       error={ id.error }
       empty="No projects in this organization."
@@ -278,7 +279,7 @@ export const ProjectSwitcher = (): React.ReactElement | null => {
       items={ id.projects.map((p) => ({
         id: p.name,
         label: p.displayName || p.name,
-        icon: <Folder aria-hidden="true" className="h-4 w-4 opacity-70"/>,
+        icon: <Folder aria-hidden="true" style={css('h-4 w-4 opacity-70')}/>,
         selected: p.name === id.project?.name,
         onSelect: () => id.setProject(p.name),
       })) }
@@ -303,17 +304,17 @@ export const UserMenu = ({ items = [] }: UserMenuProps): React.ReactElement => {
       label={ id.status === 'ready' ? who : 'Sign in' }
       icon={ id.status === 'ready' ?
         <Monogram label={ who } logo={ id.account?.avatar }/> :
-        <User aria-hidden="true" className="h-4 w-4 opacity-70"/> }
+        <User aria-hidden="true" style={css('h-4 w-4 opacity-70')}/> }
       status={ id.status }
       error={ id.error }
       onSignIn={ id.signIn }
       signInLabel={ `Sign in with ${ id.whiteLabel.iamDomain }` }
       items={ [
-        { id: 'account', label: id.account?.email || who, icon: <User aria-hidden="true" className="h-4 w-4 opacity-70"/> },
+        { id: 'account', label: id.account?.email || who, icon: <User aria-hidden="true" style={css('h-4 w-4 opacity-70')}/> },
         ...items,
       ] }
       footer={ id.status === 'ready' ?
-        [ { id: 'sign-out', label: 'Sign out', danger: true, icon: <LogOut aria-hidden="true" className="h-4 w-4"/>, onSelect: id.signOut } ] :
+        [ { id: 'sign-out', label: 'Sign out', danger: true, icon: <LogOut aria-hidden="true" style={css('h-4 w-4')}/>, onSelect: id.signOut } ] :
         [] }
     />
   );
@@ -333,10 +334,10 @@ export const SettingsMenu = ({ items = [], href = '/settings' }: SettingsMenuPro
     align="end"
     title="Settings"
     label="Settings"
-    icon={ <Settings aria-hidden="true" className="h-4 w-4 opacity-70"/> }
+    icon={ <Settings aria-hidden="true" style={css('h-4 w-4 opacity-70')}/> }
     items={ items }
     empty="No settings on this surface."
-    footer={ [ { id: 'all-settings', label: 'All settings', href, icon: <Settings aria-hidden="true" className="h-4 w-4 opacity-70"/> } ] }
+    footer={ [ { id: 'all-settings', label: 'All settings', href, icon: <Settings aria-hidden="true" style={css('h-4 w-4 opacity-70')}/> } ] }
   />
 );
 
@@ -386,27 +387,27 @@ export const AppNav = ({
   const [ menu, setMenu ] = React.useState(false);
 
   return (
-    <header
+    <Box tag="header"
       data-testid="app-nav"
       className="sticky top-0 z-50 border-b border-[var(--color-border-divider,rgba(127,127,127,0.25))] bg-[var(--color-bg-body,inherit)]"
     >
-      <div className="mx-auto flex h-14 max-w-7xl items-center gap-2 px-4">
+      <Box className="mx-auto flex h-14 max-w-7xl items-center gap-2 px-4">
         { narrow && links.length > 0 ? (
           <DrawerRoot open={ menu } onOpenChange={ (d) => setMenu(d.open) } placement="bottom" size="md">
-            <button
+            <Box tag="button"
               type="button"
               aria-label="Menu"
               data-testid="nav-menu"
               className="rounded-md p-2 hover:bg-[rgba(127,127,127,0.14)]"
               onClick={ () => setMenu(true) }
             >
-              <Menu aria-hidden="true" className="h-5 w-5"/>
-            </button>
+              <Menu aria-hidden="true" style={css('h-5 w-5')}/>
+            </Box>
             <DrawerContent data-testid="nav-menu-panel">
               <DrawerHeader><DrawerTitle>Menu</DrawerTitle></DrawerHeader>
               <DrawerBody>
                 { links.map((l) => (
-                  <a
+                  <Box tag="a"
                     key={ l.href }
                     href={ l.href }
                     onClick={ () => setMenu(false) }
@@ -414,24 +415,24 @@ export const AppNav = ({
                     className="block rounded-md px-2 py-2.5 text-sm hover:bg-[rgba(127,127,127,0.14)]"
                   >
                     { l.label }
-                  </a>
+                  </Box>
                 )) }
               </DrawerBody>
             </DrawerContent>
           </DrawerRoot>
         ) : null }
 
-        <a href={ home } className="flex items-center gap-2 font-semibold tracking-tight">
-          { brand ?? <><Building2 aria-hidden="true" className="h-4 w-4 opacity-70"/>{ id.whiteLabel.name }</> }
-        </a>
+        <Box tag="a" href={ home } className="flex items-center gap-2 font-semibold tracking-tight">
+          { brand ?? <><Building2 aria-hidden="true" style={css('h-4 w-4 opacity-70')}/>{ id.whiteLabel.name }</> }
+        </Box>
 
         { org ? <OrgSwitcher/> : null }
         { project ? <ProjectSwitcher/> : null }
 
         { !narrow && links.length > 0 ? (
-          <nav className="flex items-center gap-1">
+          <Box tag="nav" className="flex items-center gap-1">
             { links.map((l) => (
-              <a
+              <Box tag="a"
                 key={ l.href }
                 href={ l.href }
                 aria-current={ l.active ? 'page' : undefined }
@@ -443,17 +444,17 @@ export const AppNav = ({
                 ) }
               >
                 { l.label }
-              </a>
+              </Box>
             )) }
-          </nav>
+          </Box>
         ) : null }
 
-        <div className="flex flex-1 items-center justify-end gap-1">
+        <Box className="flex flex-1 items-center justify-end gap-1">
           { children }
           { settings ? <SettingsMenu items={ settings }/> : null }
           <UserMenu items={ userItems }/>
-        </div>
-      </div>
-    </header>
+        </Box>
+      </Box>
+    </Box>
   );
 };

package/src/code-block.tsx

@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import { Box, VariantProps, css, sx, variants } from '@hanzo/ui'
+import { Check, Copy, FileText } from "lucide-react"
+import { codeToHtml } from "shiki"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Skeleton } from "./skeleton"
+
+const codeBlockVariants = variants(
+  "relative overflow-hidden rounded-lg border bg-muted/50",
+  {
+    variants: {
+      theme: {
+        dark: "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+        light: "bg-[var(--color-bg-body)] border-[var(--color-border-divider)]",
+        github: "bg-white border-[var(--color-border-divider)]",
+        "github-dark": "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+        "vs-dark": "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+        monokai: "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+        dracula: "bg-[var(--color-bg-primary)] border-[var(--color-link-primary)]/30",
+        nord: "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+      },
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      theme: "dark",
+      size: "default",
+    },
+  }
+)
+
+export interface CodeBlockProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof codeBlockVariants> {
+  code: string
+  language?: string
+  filename?: string
+  showLineNumbers?: boolean
+  highlightLines?: number[]
+  showCopyButton?: boolean
+  maxHeight?: string
+  diff?: {
+    added?: number[]
+    removed?: number[]
+  }
+}
+
+interface CodeLineProps {
+  line: string
+  lineNumber: number
+  showLineNumbers: boolean
+  isHighlighted?: boolean
+  isDiffAdded?: boolean
+  isDiffRemoved?: boolean
+}
+
+const CodeLine = React.memo(
+  ({
+    line,
+    lineNumber,
+    showLineNumbers,
+    isHighlighted = false,
+    isDiffAdded = false,
+    isDiffRemoved = false,
+  }: CodeLineProps) => {
+    return (
+      <Box
+        className={cn(
+          "group relative flex min-h-[1.5rem] items-center px-4 py-0.5",
+          isHighlighted && "bg-[var(--color-link-primary)]/10 border-l-2 border-l-blue-500",
+          isDiffAdded && "bg-[var(--lux-state-success)]/10 border-l-2 border-l-green-500",
+          isDiffRemoved && "bg-[var(--lux-state-error)]/10 border-l-2 border-l-red-500"
+        )}
+      >
+        {showLineNumbers && (
+          <Box tag="span" className="mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground">
+            {lineNumber}
+          </Box>
+        )}
+        {(isDiffAdded || isDiffRemoved) && (
+          <Box tag="span" className="mr-2 select-none text-xs">
+            {isDiffAdded ? "+" : isDiffRemoved ? "-" : " "}
+          </Box>
+        )}
+        <Box
+          className="flex-1 overflow-x-auto"
+          dangerouslySetInnerHTML={{ __html: line }}
+        />
+      </Box>
+    )
+  }
+)
+
+CodeLine.displayName = "CodeLine"
+
+const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
+  (
+    {
+      className,
+      theme,
+      size,
+      code,
+      language = "text",
+      filename,
+      showLineNumbers = true,
+      highlightLines = [],
+      showCopyButton = true,
+      maxHeight = "400px",
+      diff,
+      ...props
+    },
+    ref
+  ) => {
+    const [highlightedCode, setHighlightedCode] = React.useState<string>("")
+    const [copied, setCopied] = React.useState(false)
+    const [isLoading, setIsLoading] = React.useState(true)
+
+    const themeMap = {
+      dark: "github-dark",
+      light: "github-light",
+      github: "github-light",
+      "github-dark": "github-dark",
+      "vs-dark": "dark-plus",
+      monokai: "monokai",
+      dracula: "dracula",
+      nord: "nord",
+    }
+
+    React.useEffect(() => {
+      const highlightCode = async () => {
+        setIsLoading(true)
+        try {
+          const highlighted = await codeToHtml(code, {
+            lang: language,
+            theme: themeMap[theme || "dark"],
+            transformers: [
+              {
+                code(node) {
+                  // Remove the outer pre and code tags since we'll handle structure ourselves
+                  const codeElement = node.children.find(
+                    (child) =>
+                      child.type === "element" && child.tagName === "code"
+                  )
+                  if (
+                    codeElement &&
+                    "children" in codeElement &&
+                    codeElement.children
+                  ) {
+                    node.children = codeElement.children
+                  }
+                },
+              },
+            ],
+          })
+
+          // Extract just the inner HTML content
+          const tempDiv = document.createElement("div")
+          tempDiv.innerHTML = highlighted
+          const codeElement = tempDiv.querySelector("code")
+          setHighlightedCode(codeElement?.innerHTML || highlighted)
+        } catch (error) {
+          console.error("Failed to highlight code:", error)
+          setHighlightedCode(code)
+        } finally {
+          setIsLoading(false)
+        }
+      }
+
+      highlightCode()
+    }, [code, language, theme])
+
+    const copyToClipboard = React.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(code)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } catch (error) {
+        console.error("Failed to copy code:", error)
+      }
+    }, [code])
+
+    const lines = highlightedCode.split("\n")
+
+    return (
+      <Box
+        ref={ref as never}
+        data-testid="code-block"
+        className={cn(codeBlockVariants({ theme, size, className }))}
+        {...props}
+      >
+        {/* Header */}
+        {(filename || language || showCopyButton) && (
+          <Box className="flex items-center justify-between border-b px-4 py-2">
+            <Box className="flex items-center gap-2">
+              {filename && (
+                <Box className="flex items-center gap-1.5">
+                  <FileText style={css('h-3.5 w-3.5 text-muted-foreground')} />
+                  <Box tag="span" className="text-sm font-medium">{filename}</Box>
+                </Box>
+              )}
+              {language && (
+                <Badge colorPalette="gray" {...sx('text-xs')}>
+                  {language}
+                </Badge>
+              )}
+            </Box>
+            {showCopyButton && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={copyToClipboard}
+                {...sx('h-8 w-8 p-0')}
+              >
+                {copied ? (
+                  <Check style={css('h-3.5 w-3.5 text-[var(--lux-state-success)]')} />
+                ) : (
+                  <Copy style={css('h-3.5 w-3.5')} />
+                )}
+                <Box tag="span" className="sr-only">
+                  {copied ? "Copied" : "Copy code"}
+                </Box>
+              </Button>
+            )}
+          </Box>
+        )}
+
+        {/* Code Content */}
+        <Box className="overflow-auto" style={{ maxHeight }}>
+          {isLoading ? (
+            <Box className="p-4 space-y-2">
+              {Array.from({ length: 10 }).map((_, i) => (
+                <Box key={i} className="flex items-center gap-4">
+                  {showLineNumbers && (
+                    <Skeleton data-testid="skeleton" {...sx('h-4 w-8')} />
+                  )}
+                  <Skeleton data-testid="skeleton" {...sx('h-4 flex-1')} />
+                </Box>
+              ))}
+            </Box>
+          ) : (
+            <Box className="font-mono">
+              {lines.map((line, index) => {
+                const lineNumber = index + 1
+                const isHighlighted = highlightLines.includes(lineNumber)
+                const isDiffAdded = diff?.added?.includes(lineNumber)
+                const isDiffRemoved = diff?.removed?.includes(lineNumber)
+
+                return (
+                  <CodeLine
+                    key={index}
+                    line={line}
+                    lineNumber={lineNumber}
+                    showLineNumbers={showLineNumbers}
+                    isHighlighted={isHighlighted}
+                    isDiffAdded={isDiffAdded}
+                    isDiffRemoved={isDiffRemoved}
+                  />
+                )
+              })}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    )
+  }
+)
+
+CodeBlock.displayName = "CodeBlock"
+
+export { CodeBlock, codeBlockVariants }