@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/components/pastel-gradient.tsx

@@ -0,0 +1,25 @@
+import type { CSSProperties } from "react";
+
+// FNV-1a, so the same seed always paints the same cover.
+function hash(seed: string) {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return h >>> 0;
+}
+
+// A soft two-hue gradient picked from `seed` (e.g. a resource id): pale in
+// light mode, deep and muted in dark mode.
+export function PastelGradient({ seed, className = "" }: { seed: string; className?: string }) {
+  const h = hash(seed);
+  const a = h % 360;
+  const b = (a + 40 + ((h >>> 9) % 80)) % 360;
+  const angle = 90 + ((h >>> 17) % 180);
+  const style = {
+    "--pg-light": `linear-gradient(${angle}deg, hsl(${a} 75% 88%), hsl(${b} 70% 80%))`,
+    "--pg-dark": `linear-gradient(${angle}deg, hsl(${a} 30% 24%), hsl(${b} 35% 16%))`,
+  } as CSSProperties;
+  return <div aria-hidden style={style} className={`bg-(image:--pg-light) dark:bg-(image:--pg-dark) ${className}`} />;
+}

package/src/components/pixel-symmetry.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useRef } from "react";
+
+const PALETTES: Record<string, [number, number, number][]> = {
+  brand: [
+    [255, 86, 157],  // pink
+    [84, 21, 255],   // purple
+    [255, 241, 76],  // yellow
+    [0, 208, 138],   // green
+    [240, 138, 255], // lavender
+    [28, 174, 255],  // blue
+    [227, 255, 0],   // lime
+  ],
+  cool: [
+    [84, 21, 255],
+    [28, 174, 255],
+    [0, 208, 138],
+    [240, 138, 255],
+    [227, 255, 0],
+  ],
+  warm: [
+    [255, 86, 157],
+    [255, 241, 76],
+    [255, 153, 0],
+    [255, 51, 51],
+    [240, 138, 255],
+  ],
+};
+
+export function PixelSymmetry({
+  pixelSize = 8,
+  palette = "brand",
+  symmetry = "quad",
+  density = 0.35,
+  className = "",
+}: {
+  pixelSize?: number;
+  palette?: "brand" | "cool" | "warm";
+  symmetry?: "horizontal" | "vertical" | "quad";
+  density?: number;
+  className?: string;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const drawn = useRef(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || drawn.current) return;
+
+    const parent = canvas.parentElement;
+    if (!parent) return;
+    const w = parent.offsetWidth;
+    const h = parent.offsetHeight;
+    if (w === 0 || h === 0) return;
+
+    drawn.current = true;
+    canvas.width = w;
+    canvas.height = h;
+
+    const ctx = canvas.getContext("2d")!;
+    const colors = PALETTES[palette] || PALETTES.brand;
+
+    const fullCols = Math.ceil(w / pixelSize);
+    const fullRows = Math.ceil(h / pixelSize);
+    const srcCols = symmetry === "vertical" || symmetry === "quad" ? Math.ceil(fullCols / 2) : fullCols;
+    const srcRows = symmetry === "horizontal" || symmetry === "quad" ? Math.ceil(fullRows / 2) : fullRows;
+
+    const random = Math.random;
+    const pick = (arr: [number, number, number][]) => arr[(random() * arr.length) | 0];
+
+    const grid: ([number, number, number] | null)[] = new Array(srcCols * srcRows).fill(null);
+    const idx = (x: number, y: number) => y * srcCols + x;
+
+    const bright = (rgb: [number, number, number], f: number): [number, number, number] => [
+      Math.min(255, (rgb[0] * f) | 0),
+      Math.min(255, (rgb[1] * f) | 0),
+      Math.min(255, (rgb[2] * f) | 0),
+    ];
+
+    // pass 1: clusters
+    const clusterCount = (srcCols * srcRows * density * 0.15) | 0;
+    for (let i = 0; i < clusterCount; i++) {
+      const cx = (random() * srcCols) | 0;
+      const cy = (random() * srcRows) | 0;
+      const color = pick(colors);
+      const radius = 1 + ((random() * 3) | 0);
+
+      for (let dy = -radius; dy <= radius; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+          const nx = cx + dx;
+          const ny = cy + dy;
+          if (nx < 0 || nx >= srcCols || ny < 0 || ny >= srcRows) continue;
+          const dist = Math.abs(dx) + Math.abs(dy);
+          if (random() < density * (1 - dist / (radius * 2 + 1))) {
+            grid[idx(nx, ny)] = bright(color, 0.5 + random() * 0.5);
+          }
+        }
+      }
+    }
+
+    // pass 2: scatter
+    for (let i = 0; i < grid.length; i++) {
+      if (!grid[i] && random() < density * 0.12) {
+        grid[i] = bright(pick(colors), 0.3 + random() * 0.4);
+      }
+    }
+
+    // pass 3: structural bars
+    const barCount = 1 + ((random() * 3) | 0);
+    for (let b = 0; b < barCount; b++) {
+      const horiz = random() > 0.5;
+      const color = pick(colors);
+      const pos = (random() * (horiz ? srcRows : srcCols)) | 0;
+      const len = 3 + ((random() * 6) | 0);
+      const start = (random() * (horiz ? srcCols : srcRows)) | 0;
+      for (let i = 0; i < len; i++) {
+        const x = horiz ? start + i : pos;
+        const y = horiz ? pos : start + i;
+        if (x >= 0 && x < srcCols && y >= 0 && y < srcRows) {
+          grid[idx(x, y)] = bright(color, 0.6 + random() * 0.4);
+        }
+      }
+    }
+
+    // draw
+    ctx.fillStyle = "hsl(0 0% 5.9%)";
+    ctx.fillRect(0, 0, w, h);
+
+    for (let y = 0; y < srcRows; y++) {
+      for (let x = 0; x < srcCols; x++) {
+        const c = grid[idx(x, y)];
+        if (!c) continue;
+        ctx.fillStyle = `rgb(${c[0]},${c[1]},${c[2]})`;
+        const px = x * pixelSize;
+        const py = y * pixelSize;
+        ctx.fillRect(px, py, pixelSize, pixelSize);
+        if (symmetry === "vertical" || symmetry === "quad") ctx.fillRect((fullCols - 1 - x) * pixelSize, py, pixelSize, pixelSize);
+        if (symmetry === "horizontal" || symmetry === "quad") ctx.fillRect(px, (fullRows - 1 - y) * pixelSize, pixelSize, pixelSize);
+        if (symmetry === "quad") ctx.fillRect((fullCols - 1 - x) * pixelSize, (fullRows - 1 - y) * pixelSize, pixelSize, pixelSize);
+      }
+    }
+  }, [pixelSize, palette, symmetry, density]);
+
+  return (
+    <div className={className} style={{ position: "relative" }}>
+      <canvas
+        ref={canvasRef}
+        style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
+      />
+    </div>
+  );
+}

package/src/components/progress.tsx

@@ -0,0 +1,28 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+import { cn } from "cn"
+
+import { ProgressIndicator, ProgressTrack } from "../shadcn/progress"
+
+export { ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "../shadcn/progress"
+
+// The shadcn progress, with a class for its track and its indicator. The
+// shadcn one renders both itself with no way in, so the meters that colour
+// the bar by value (engines) compose the parts here instead.
+// ui/shadcn/progress.tsx stays as the CLI writes it.
+export function Progress({
+  className,
+  trackClassName,
+  indicatorClassName,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props & { trackClassName?: string; indicatorClassName?: string }) {
+  return (
+    <ProgressPrimitive.Root value={value} data-slot="progress" className={cn("flex flex-wrap gap-3", className)} {...props}>
+      {children}
+      <ProgressTrack className={trackClassName}>
+        <ProgressIndicator className={indicatorClassName} />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}

package/src/components/scroll-more.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { useRef, useState, useEffect, useCallback, type ReactNode } from 'react'
+import { cn } from '../utils'
+import { ChevronDown, ChevronsUpDown } from 'lucide-react'
+
+interface ScrollMoreProps {
+  children: ReactNode
+  className?: string
+  /** 'fade' for gradient edges, 'badge' for a clickable pill, 'both' for both (default: 'both') */
+  indicator?: 'fade' | 'badge' | 'both'
+  /** fade height in pixels (default: 32) */
+  fadeHeight?: number
+  /** badge label (default: 'scroll for more') */
+  badgeLabel?: string
+  /** when true, content is unclamped and a collapse button is shown */
+  expanded?: boolean
+  /** called to toggle expand/collapse — enables the expand button on the bottom fade */
+  onExpandToggle?: () => void
+}
+
+export function ScrollMore({
+  children,
+  className,
+  indicator = 'both',
+  fadeHeight = 32,
+  badgeLabel = 'scroll for more',
+  expanded,
+  onExpandToggle,
+}: ScrollMoreProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [canScrollUp, setCanScrollUp] = useState(false)
+  const [canScrollDown, setCanScrollDown] = useState(false)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    const check = () => {
+      setCanScrollUp(el.scrollTop > 2)
+      setCanScrollDown(el.scrollHeight - el.scrollTop - el.clientHeight > 2)
+    }
+
+    check()
+    el.addEventListener('scroll', check, { passive: true })
+
+    const ro = new ResizeObserver(check)
+    ro.observe(el)
+
+    return () => {
+      el.removeEventListener('scroll', check)
+      ro.disconnect()
+    }
+  }, [])
+
+  const scrollDown = useCallback(() => {
+    const el = ref.current
+    if (!el) return
+    el.scrollBy({ top: el.clientHeight * 0.75, behavior: 'smooth' })
+  }, [])
+
+  const showFade = indicator === 'fade' || indicator === 'both'
+  const showBadge = indicator === 'badge' || indicator === 'both'
+  const canExpand = !!onExpandToggle
+  const isOverflowing = canScrollDown || canScrollUp
+
+  return (
+    <div className="min-h-0">
+      <div className={cn('relative overflow-hidden', expanded ? undefined : className)}>
+        {showFade && !expanded && (
+          <div
+            className={cn(
+              'absolute inset-x-0 top-0 z-10 pointer-events-none transition-opacity duration-200',
+              'bg-gradient-to-b from-background to-transparent',
+              canScrollUp ? 'opacity-100' : 'opacity-0',
+            )}
+            style={{ height: fadeHeight }}
+          />
+        )}
+
+        <div ref={ref} className={cn('overflow-y-auto', expanded ? undefined : className)}>
+          {children}
+        </div>
+
+        {showFade && !expanded && (
+          <div
+            className={cn(
+              'absolute inset-x-0 bottom-0 z-10 pointer-events-none transition-opacity duration-200',
+              'bg-gradient-to-t from-background to-transparent',
+              canScrollDown ? 'opacity-100' : 'opacity-0',
+            )}
+            style={{ height: fadeHeight }}
+          />
+        )}
+
+        {showBadge && !expanded && canScrollDown && (
+          <button
+            type="button"
+            onClick={scrollDown}
+            className={cn(
+              'absolute bottom-2 left-1/2 -translate-x-1/2 z-20',
+              'flex items-center gap-1 px-2.5 py-1 rounded-full',
+              'bg-background border shadow-sm',
+              'text-xs text-muted-foreground hover:text-foreground',
+              'transition-all duration-200 animate-in fade-in-0 slide-in-from-bottom-1',
+              'cursor-pointer',
+            )}
+          >
+            <ChevronDown className="h-3 w-3" />
+            <span>{badgeLabel}</span>
+          </button>
+        )}
+      </div>
+
+      {canExpand && (isOverflowing || expanded) && (
+        <button
+          type="button"
+          onClick={onExpandToggle}
+          className={cn(
+            'w-full flex items-center justify-center gap-1 py-0.5',
+            'text-xs text-muted-foreground/60 hover:text-muted-foreground',
+            'transition-colors cursor-pointer',
+          )}
+        >
+          <ChevronsUpDown className="h-3 w-3" />
+          {expanded ? 'collapse' : 'expand'}
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/select.tsx

@@ -0,0 +1,85 @@
+import * as React from "react"
+import { cn } from "cn"
+
+import {
+  Select as SelectRoot,
+  SelectContent as SelectContentBase,
+  SelectItem,
+} from "../shadcn/select"
+
+export {
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "../shadcn/select"
+
+// The shadcn select, with what every select here wants: the closed trigger
+// shows the selected item's label, onValueChange never sees null, and the
+// list grows to its widest option. ui/shadcn/select.tsx stays as the CLI
+// writes it.
+
+type RootProps = React.ComponentProps<typeof SelectRoot>
+
+/**
+ * Base UI's Value shows the selected item's label only from `items`;
+ * without it a closed select shows the raw value (an id, "version"). The
+ * labels are read off the SelectItems in the tree unless given.
+ */
+export function Select({
+  onValueChange,
+  items,
+  children,
+  ...props
+}: Omit<RootProps, "onValueChange" | "items"> & {
+  items?: Record<string, React.ReactNode>
+  onValueChange?: (value: string) => void
+}) {
+  return (
+    <SelectRoot
+      onValueChange={onValueChange ? (v) => typeof v === "string" && onValueChange(v) : undefined}
+      items={items ?? itemLabels(children)}
+      {...props}
+    >
+      {children}
+    </SelectRoot>
+  )
+}
+
+/**
+ * The value-to-label map of the SelectItems among children, at any depth
+ * (content, groups, arrays from a map). An item rendered inside another
+ * component is not seen; its select shows the raw value, as before.
+ */
+function itemLabels(children: React.ReactNode): Record<string, React.ReactNode> | undefined {
+  const labels: Record<string, React.ReactNode> = {}
+  let found = false
+  const walk = (node: React.ReactNode) => {
+    React.Children.forEach(node, (child) => {
+      if (!React.isValidElement(child)) return
+      const props = child.props as { value?: unknown; label?: React.ReactNode; children?: React.ReactNode }
+      if (child.type === SelectItem && typeof props.value === "string") {
+        labels[props.value] = props.label ?? props.children
+        found = true
+        return
+      }
+      if (props.children != null) walk(props.children)
+    })
+  }
+  walk(children)
+  return found ? labels : undefined
+}
+
+/** The list is at least the trigger's width and grows to its widest option, within the space left. */
+export function SelectContent({ className, ...props }: React.ComponentProps<typeof SelectContentBase>) {
+  return (
+    <SelectContentBase
+      className={cn("w-max max-w-(--available-width) min-w-[max(var(--anchor-width),9rem)]", className)}
+      {...props}
+    />
+  )
+}

package/src/components/shimmering-text.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { motion, useInView, UseInViewOptions } from "motion/react"
+import React, { useMemo, useRef } from "react"
+
+import { cn } from "cn"
+
+interface ShimmeringTextProps {
+  /** Text to display with shimmer effect */
+  text: string
+  /** Animation duration in seconds */
+  duration?: number
+  /** Delay before starting animation */
+  delay?: number
+  /** Whether to repeat the animation */
+  repeat?: boolean
+  /** Pause duration between repeats in seconds */
+  repeatDelay?: number
+  /** Custom className */
+  className?: string
+  /** Whether to start animation when component enters viewport */
+  startOnView?: boolean
+  /** Whether to animate only once */
+  once?: boolean
+  /** Margin for in-view detection (rootMargin) */
+  inViewMargin?: UseInViewOptions["margin"]
+  /** Shimmer spread multiplier */
+  spread?: number
+  /** Base text color */
+  color?: string
+  /** Shimmer gradient color */
+  shimmerColor?: string
+}
+
+export function ShimmeringText({
+  text,
+  duration = 2,
+  delay = 0,
+  repeat = true,
+  repeatDelay = 0.5,
+  className,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  spread = 2,
+  color,
+  shimmerColor,
+}: ShimmeringTextProps) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const isInView = useInView(ref, { once, margin: inViewMargin })
+
+  // Calculate dynamic spread based on text length
+  const dynamicSpread = useMemo(() => {
+    return text.length * spread
+  }, [text, spread])
+
+  // Determine if we should start animation
+  const shouldAnimate = !startOnView || isInView
+
+  return (
+    <motion.span
+      ref={ref}
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--base-color:var(--muted-foreground)] [--shimmer-color:var(--foreground)]",
+        "[background-repeat:no-repeat,padding-box]",
+        "[--shimmer-bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--shimmer-color),transparent_calc(50%+var(--spread)))]",
+        "dark:[--base-color:var(--muted-foreground)] dark:[--shimmer-color:var(--foreground)]",
+        className
+      )}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          ...(color && { "--base-color": color }),
+          ...(shimmerColor && { "--shimmer-color": shimmerColor }),
+          backgroundImage: `var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color))`,
+        } as React.CSSProperties
+      }
+      initial={{
+        backgroundPosition: "100% center",
+        opacity: 0,
+      }}
+      animate={
+        shouldAnimate
+          ? {
+              backgroundPosition: "0% center",
+              opacity: 1,
+            }
+          : {}
+      }
+      transition={{
+        backgroundPosition: {
+          repeat: repeat ? Infinity : 0,
+          duration,
+          delay,
+          repeatDelay,
+          ease: "linear",
+        },
+        opacity: {
+          duration: 0.3,
+          delay,
+        },
+      }}
+    >
+      {text}
+    </motion.span>
+  )
+}

package/src/components/sidebar-light.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { cn } from "cn"
+
+export interface NavItem {
+  title: string
+  href: string
+  icon?: React.ComponentType<{ className?: string }>
+  items?: NavItem[]
+}
+
+interface SidebarLightProps {
+  items: NavItem[]
+  pathname: string
+  className?: string
+  /** Link component to use - defaults to <a> tag. Pass your router's Link component. */
+  LinkComponent?: React.ComponentType<{ href: string; className?: string; children: React.ReactNode }>
+}
+
+interface NavItemRendererProps {
+  item: NavItem
+  pathname: string
+  depth: number
+  LinkComponent: React.ComponentType<{ href: string; className?: string; children: React.ReactNode }>
+}
+
+function NavItemRenderer({ item, pathname, depth, LinkComponent }: NavItemRendererProps) {
+  const hasChildren = item.items && item.items.length > 0
+  const isActive = pathname === item.href
+
+  // Parent item with children (section header)
+  if (hasChildren) {
+    return (
+      <div className="space-y-1">
+        <div
+          className={cn(
+            "flex items-center gap-2 text-sm",
+            depth === 0 && "px-3 py-2 font-semibold text-foreground",
+            depth > 0 && "px-3 py-1.5 font-medium text-muted-foreground"
+          )}
+        >
+          {item.icon && <item.icon className={cn(depth === 0 ? "h-4 w-4" : "h-3.5 w-3.5")} />}
+          {item.title}
+        </div>
+        <div className={cn("ml-4 space-y-1 border-l border-border pl-2")}>
+          {item.items!.map((subItem, index) => (
+            <NavItemRenderer
+              key={subItem.href !== "#" ? subItem.href : `${subItem.title}-${index}`}
+              item={subItem}
+              pathname={pathname}
+              depth={depth + 1}
+              LinkComponent={LinkComponent}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // Leaf item (link)
+  return (
+    <LinkComponent
+      href={item.href}
+      className={cn(
+        "flex items-center gap-2 text-sm rounded-md transition-colors",
+        depth === 0 && "px-3 py-2",
+        depth > 0 && "px-3 py-1.5",
+        isActive
+          ? "bg-muted font-medium text-foreground"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+      )}
+    >
+      {item.icon && <item.icon className={cn(depth === 0 ? "h-4 w-4" : "h-3.5 w-3.5")} />}
+      {item.title}
+    </LinkComponent>
+  )
+}
+
+// Default link component (plain <a> tag)
+const DefaultLink: React.FC<{ href: string; className?: string; children: React.ReactNode }> = ({ href, className, children }) => (
+  <a href={href} className={className}>{children}</a>
+)
+
+function SidebarLight({ items, pathname, className, LinkComponent = DefaultLink }: SidebarLightProps) {
+  return (
+    <aside className={cn("w-full", className)}>
+      <nav className="space-y-1">
+        {items.map((item, index) => (
+          <NavItemRenderer
+            key={item.href !== "#" ? item.href : `${item.title}-${index}`}
+            item={item}
+            pathname={pathname}
+            depth={0}
+            LinkComponent={LinkComponent}
+          />
+        ))}
+      </nav>
+    </aside>
+  )
+}
+
+export { SidebarLight }
+export type { SidebarLightProps }

package/src/components/sonner.tsx

@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "hsl(var(--popover))",
+          "--normal-text": "hsl(var(--popover-foreground))",
+          "--normal-border": "hsl(var(--border))",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }