@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/components/inline-sidebar.tsx

@@ -0,0 +1,351 @@
+"use client"
+
+import React, { useState } from 'react'
+import { cn } from "cn"
+import { ChevronDown, ChevronRight, Menu } from 'lucide-react'
+
+export interface InlineSidebarItem<T extends string = string> {
+  id: T
+  label: string
+  icon?: React.ComponentType<{ className?: string }>
+  children?: InlineSidebarItem<T>[]
+  onClick?: () => void
+}
+
+interface InlineSidebarProps<T extends string = string> {
+  items: InlineSidebarItem<T>[]
+  activeItem?: T
+  onItemChange?: (item: T) => void
+  className?: string
+  /** Show items as a tree with collapsible groups */
+  tree?: boolean
+  /** Show items with section headers (non-collapsible, always visible) */
+  sections?: boolean
+  /** Default expanded item IDs (for tree mode) */
+  defaultExpanded?: T[]
+}
+
+export function InlineSidebar<T extends string = string>({
+  items,
+  activeItem,
+  onItemChange,
+  className,
+  tree = false,
+  sections = false,
+  defaultExpanded = [],
+}: InlineSidebarProps<T>) {
+  const [expanded, setExpanded] = useState<Set<T>>(new Set(defaultExpanded))
+
+  const toggleExpanded = (id: T) => {
+    setExpanded(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  const renderItem = (item: InlineSidebarItem<T>, depth: number = 0) => {
+    const Icon = item.icon
+    const isActive = activeItem === item.id
+    const hasChildren = item.children && item.children.length > 0
+    const isExpanded = expanded.has(item.id)
+
+    const handleClick = () => {
+      if (hasChildren && tree) {
+        toggleExpanded(item.id)
+      }
+      if (item.onClick) {
+        item.onClick()
+      } else if (onItemChange && !hasChildren) {
+        onItemChange(item.id)
+      }
+    }
+
+    return (
+      <div key={item.id}>
+        <button
+          type="button"
+          onClick={handleClick}
+          className={cn(
+            "w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap cursor-pointer",
+            isActive && !hasChildren
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:text-foreground hover:bg-muted",
+            depth > 0,
+          )}
+          style={{ paddingLeft: `${12 + depth * 12}px` }}
+        >
+
+          {Icon && <Icon className="h-4 w-4 shrink-0" />}
+          <span className="truncate">{item.label}</span>
+          {hasChildren && tree && (
+            <ChevronRight className={cn(
+              "h-3.5 w-3.5 shrink-0 transition-transform",
+              isExpanded && "rotate-90"
+            )} />
+          )}
+        </button>
+
+        {hasChildren && tree && isExpanded && (
+          <div className="mt-0.5">
+            {item.children!.map(child => renderItem(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Sections mode - always visible section headers with children
+  if (sections) {
+    const renderSectionItem = (item: InlineSidebarItem<T>) => {
+      const Icon = item.icon
+      const isActive = activeItem === item.id
+      return (
+        <button
+          type="button"
+          key={item.id}
+          onClick={() => {
+            if (item.onClick) {
+              item.onClick()
+            } else if (onItemChange) {
+              onItemChange(item.id)
+            }
+          }}
+          className={cn(
+            "w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap cursor-pointer",
+            isActive
+              ? "bg-primary text-primary-foreground"
+              : "text-muted-foreground hover:text-foreground hover:bg-muted"
+          )}
+        >
+          {Icon && <Icon className="h-4 w-4 shrink-0" />}
+          <span className="truncate">{item.label}</span>
+        </button>
+      )
+    }
+
+    return (
+      <nav className={cn("flex flex-col gap-4", className)}>
+        {items.map((item) => {
+          const hasChildren = item.children && item.children.length > 0
+          if (hasChildren) {
+            return (
+              <div key={item.id} className="flex flex-col gap-1">
+                <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
+                  {item.label}
+                </div>
+                <div className="flex flex-col gap-0.5">
+                  {item.children!.map(child => renderSectionItem(child))}
+                </div>
+              </div>
+            )
+          }
+          return renderSectionItem(item)
+        })}
+      </nav>
+    )
+  }
+
+  // Flat mode (original behavior)
+  if (!tree) {
+    return (
+      <nav className={cn("flex flex-col gap-2 overflow-x-auto pb-2 lg:pb-0", className)}>
+        {items.map((item) => {
+          const Icon = item.icon
+          const isActive = activeItem === item.id
+          return (
+            <button
+              type="button"
+              key={item.id}
+              onClick={() => {
+                if (item.onClick) {
+                  item.onClick()
+                } else if (onItemChange) {
+                  onItemChange(item.id)
+                }
+              }}
+              className={cn(
+                "flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap cursor-pointer",
+                isActive
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
+              )}
+            >
+              {Icon && <Icon className="h-4 w-4" />}
+              {item.label}
+            </button>
+          )
+        })}
+      </nav>
+    )
+  }
+
+  // Tree mode
+  return (
+    <nav className={cn("flex flex-col gap-0.5", className)}>
+      {items.map(item => renderItem(item, 0))}
+    </nav>
+  )
+}
+
+// ============================================================================
+// Compound Components (shadcn Card style - each renders independently)
+// ============================================================================
+
+interface InlineSidebarLayoutProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function InlineSidebarLayout({ children, className }: InlineSidebarLayoutProps) {
+  return (
+    <div
+      data-slot="inline-sidebar-layout"
+      className={cn("relative lg:grid lg:grid-cols-[auto_1fr_auto]", className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface InlineSidebarLayoutLeftProps {
+  children?: React.ReactNode
+  className?: string
+  /** Width class for the sidebar (e.g. 'lg:w-52') */
+  width?: string
+  /** Show border separator */
+  bordered?: boolean
+  /**
+   * Class name for the sticky container.
+   */
+  stickyClassName?: string
+}
+
+function InlineSidebarLayoutLeft({
+  children,
+  className,
+  width = 'lg:w-52',
+  bordered,
+  stickyClassName
+}: InlineSidebarLayoutLeftProps) {
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  return (
+    <aside
+      data-slot="inline-sidebar-left"
+      className={cn(
+        "shrink-0",
+        width,
+      )}
+    >
+      {/* Mobile: accordion toggle + collapsible content */}
+      <div className="lg:hidden border-b border-border">
+        <button
+          onClick={() => setMobileOpen(!mobileOpen)}
+          className="cursor-pointer w-full flex items-center gap-2 px-4 py-3 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          aria-expanded={mobileOpen}
+        >
+          <Menu className="h-4 w-4" />
+          <ChevronDown className={cn(
+            "h-3.5 w-3.5 ml-auto transition-transform duration-200",
+            mobileOpen && "rotate-180"
+          )} />
+        </button>
+        <div className={cn(
+          "overflow-hidden transition-all duration-200 ease-out",
+          mobileOpen ? "max-h-[70vh] overflow-y-auto" : "max-h-0",
+        )}>
+          <div className="px-4 pb-4">
+            {children}
+          </div>
+        </div>
+      </div>
+
+      {/* Desktop: sticky sidebar */}
+      <div className={cn(
+        "hidden lg:block lg:sticky lg:top-0 overflow-y-auto p-4",
+        bordered && "border-r border-border",
+        stickyClassName || "lg:h-screen",
+        className,
+      )}>
+        {children}
+      </div>
+    </aside>
+  )
+}
+
+interface InlineSidebarLayoutContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+function InlineSidebarLayoutContent({ children, className }: InlineSidebarLayoutContentProps) {
+  return (
+    <main
+      data-slot="inline-sidebar-content"
+      className={cn("min-w-0 px-0 lg:px-4 py-4 lg:px-8 select-text", className)}
+    >
+      {children}
+    </main>
+  )
+}
+
+interface InlineSidebarLayoutRightProps {
+  children?: React.ReactNode
+  className?: string
+  /** Width class for the sidebar (e.g. 'lg:w-52') */
+  width?: string
+  /** Show border separator */
+  bordered?: boolean
+  /**
+   * Class name for the sticky container.
+   */
+  stickyClassName?: string
+}
+
+function InlineSidebarLayoutRight({
+  children,
+  className,
+  width = 'lg:w-52',
+  bordered,
+  stickyClassName
+}: InlineSidebarLayoutRightProps) {
+  if (!children) {
+    return null
+  }
+
+  return (
+    <aside
+      data-slot="inline-sidebar-right"
+      className={cn(
+        // No select-none here: this is a generic content slot, not chrome. It
+        // cannot know what it holds — a table of contents is fine to unselect,
+        // a chat panel is not, and the slot has no way to tell them apart.
+        // Children that want unselectable text should say so themselves.
+        "hidden lg:block shrink-0",
+        width,
+        className
+      )}
+    >
+      <div className={cn(
+        "lg:sticky lg:top-0 overflow-y-auto bg-background p-4",
+        bordered && "border-l border-border",
+        stickyClassName || "lg:h-screen"
+      )}>
+        {children}
+      </div>
+    </aside>
+  )
+}
+
+export {
+  InlineSidebarLayout,
+  InlineSidebarLayoutLeft,
+  InlineSidebarLayoutContent,
+  InlineSidebarLayoutRight,
+}
+

package/src/components/input-color.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { Button } from "../shadcn/button";
+import { Input } from "../shadcn/input";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "../shadcn/popover";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "../shadcn/select";
+import { PipetteIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { HexColorPicker } from "react-colorful";
+
+interface ColorValues {
+  hex: string;
+  rgb: { r: number; g: number; b: number };
+  hsl: { h: number; s: number; l: number };
+}
+
+interface InputColorProps {
+  onColorChange?: (color: string) => void;
+}
+
+export default function InputColor({ onColorChange }: InputColorProps) {
+  const [colorFormat, setColorFormat] = useState("HEX");
+  const [color, setColor] = useState("#FF0000");
+  const [colorValues, setColorValues] = useState<ColorValues>({
+    hex: "#FF0000",
+    rgb: { r: 255, g: 0, b: 0 },
+    hsl: { h: 0, s: 100, l: 50 },
+  });
+
+  // Conversion utilities
+  const hexToRgb = (hex: string) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: Number.parseInt(result[1], 16),
+          g: Number.parseInt(result[2], 16),
+          b: Number.parseInt(result[3], 16),
+        }
+      : { r: 0, g: 0, b: 0 };
+  };
+
+  const rgbToHex = (r: number, g: number, b: number) => {
+    return (
+      "#" +
+      [r, g, b]
+        .map((x) => {
+          const hex = x.toString(16);
+          return hex.length === 1 ? "0" + hex : hex;
+        })
+        .join("")
+        .toUpperCase()
+    );
+  };
+
+  const rgbToHsl = (r: number, g: number, b: number) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0,
+      s = 0;
+    const l = (max + min) / 2;
+
+    if (max === min) {
+      h = s = 0;
+    } else {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+      h /= 6;
+    }
+
+    return {
+      h: Math.round(h * 360),
+      s: Math.round(s * 100),
+      l: Math.round(l * 100),
+    };
+  };
+
+  const hslToRgb = (h: number, s: number, l: number) => {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    let r, g, b;
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1 / 3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1 / 3);
+    }
+
+    return {
+      r: Math.round(r * 255),
+      g: Math.round(g * 255),
+      b: Math.round(b * 255),
+    };
+  };
+
+  // Update all color formats when color changes
+  const updateColorValues = (newColor: string) => {
+    const rgb = hexToRgb(newColor);
+    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+
+    setColorValues({
+      hex: newColor.toUpperCase(),
+      rgb,
+      hsl,
+    });
+  };
+
+  // Handle color picker change
+  const handleColorChange = (newColor: string) => {
+    setColor(newColor);
+    updateColorValues(newColor);
+    onColorChange?.(newColor);
+  };
+
+  // Handle HEX input change
+  const handleHexChange = (value: string) => {
+    // Ensure it starts with # and convert to uppercase
+    let formattedValue = value.toUpperCase();
+    if (!formattedValue.startsWith("#")) {
+      formattedValue = "#" + formattedValue;
+    }
+
+    // Limit to 7 characters (#XXXXXX)
+    if (formattedValue.length > 7) {
+      formattedValue = formattedValue.slice(0, 7);
+    }
+
+    // Validate hex format
+    const hexRegex = /^#[0-9A-F]{6}$/;
+    if (hexRegex.test(formattedValue)) {
+      setColor(formattedValue);
+      updateColorValues(formattedValue);
+      onColorChange?.(formattedValue);
+    } else if (formattedValue.length <= 7) {
+      // Update display but don't convert until valid
+      setColorValues((prev) => ({ ...prev, hex: formattedValue }));
+    }
+  };
+
+  // Handle RGB input change
+  const handleRgbChange = (component: "r" | "g" | "b", value: string) => {
+    const numValue = Number.parseInt(value) || 0;
+    const clampedValue = Math.max(0, Math.min(255, numValue));
+
+    const newRgb = { ...colorValues.rgb, [component]: clampedValue };
+    const hex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+    const hsl = rgbToHsl(newRgb.r, newRgb.g, newRgb.b);
+
+    setColor(hex);
+    setColorValues({ hex, rgb: newRgb, hsl });
+    onColorChange?.(hex);
+  };
+
+  // Handle HSL input change
+  const handleHslChange = (component: "h" | "s" | "l", value: string) => {
+    const numValue = Number.parseInt(value) || 0;
+    let clampedValue;
+
+    if (component === "h") {
+      clampedValue = Math.max(0, Math.min(360, numValue));
+    } else {
+      clampedValue = Math.max(0, Math.min(100, numValue));
+    }
+
+    const newHsl = { ...colorValues.hsl, [component]: clampedValue };
+    const rgb = hslToRgb(newHsl.h, newHsl.s, newHsl.l);
+    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+
+    setColor(hex);
+    setColorValues({ hex, rgb, hsl: newHsl });
+    onColorChange?.(hex);
+  };
+
+  // Handle popover close
+  const handlePopoverChange = (open: boolean) => {
+    if (!open) {
+      setColorFormat("HEX");
+    }
+  };
+
+  // Check if EyeDropper API is available
+  const isEyeDropperAvailable = () => {
+    return typeof window !== "undefined" && "EyeDropper" in window;
+  };
+
+  // Handle eyedropper click
+  const handleEyeDropper = async () => {
+    if (!isEyeDropperAvailable()) {
+      alert("Eyedropper is not supported in your browser");
+      return;
+    }
+
+    try {
+      // @ts-expect-error - TypeScript doesn't have types for EyeDropper yet
+      const eyeDropper = new window.EyeDropper();
+      const result = await eyeDropper.open();
+      const pickedColor = result.sRGBHex;
+      setColor(pickedColor);
+      updateColorValues(pickedColor);
+    } catch (error) {
+      // console.error(error);
+    }
+  };
+
+  // Initialize color values on mount
+  useEffect(() => {
+    updateColorValues(color);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Popover onOpenChange={handlePopoverChange}>
+      <PopoverTrigger render={<Button className="h-full w-full color-picker-button" size="icon" style={{ backgroundColor: color }} />} />
+
+      <PopoverContent className="w-auto p-3" align="start">
+        <div className="color-picker space-y-3">
+          <div className="relative">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute -top-1.5 -left-1 z-10 flex items-center gap-1 h-7 w-7 bg-transparent hover:bg-transparent"
+              onClick={handleEyeDropper}
+              disabled={!isEyeDropperAvailable()}
+            >
+              <PipetteIcon className="h-3 w-3" />
+            </Button>
+            <HexColorPicker
+              className="!w-[236px] !aspect-square !h-[236px]"
+              color={color}
+              onChange={handleColorChange}
+            />
+          </div>
+          <div className="flex gap-2">
+            <Select value={colorFormat} onValueChange={(v) => v && setColorFormat(v)}>
+              <SelectTrigger className="!w-[4.5rem] !text-sm !h-7 px-2 py-1">
+                <SelectValue placeholder="Color" />
+              </SelectTrigger>
+              <SelectContent className="min-w-20">
+                <SelectItem value="HEX" className="text-sm">
+                  hex
+                </SelectItem>
+                <SelectItem value="RGB" className="text-sm">
+                  rgb
+                </SelectItem>
+                <SelectItem value="HSL" className="text-sm">
+                  hsl
+                </SelectItem>
+              </SelectContent>
+            </Select>
+
+            {colorFormat === "HEX" ? (
+              <Input
+                className="h-7 text-sm w-[156px]"
+                value={colorValues.hex}
+                onChange={(e) => handleHexChange(e.target.value)}
+                placeholder="#FF0000"
+                maxLength={7}
+              />
+            ) : colorFormat === "RGB" ? (
+              <div className="flex items-center">
+                <Input
+                  className="rounded-r-none h-7 w-[52px] text-center text-sm"
+                  value={colorValues.rgb.r}
+                  onChange={(e) => handleRgbChange("r", e.target.value)}
+                  placeholder="255"
+                  maxLength={3}
+                />
+                <Input
+                  className="rounded-none h-7 w-[52px] text-center border-x-0 text-sm"
+                  value={colorValues.rgb.g}
+                  onChange={(e) => handleRgbChange("g", e.target.value)}
+                  placeholder="255"
+                  maxLength={3}
+                />
+                <Input
+                  className="rounded-l-none h-7 w-[52px] text-center text-sm"
+                  value={colorValues.rgb.b}
+                  onChange={(e) => handleRgbChange("b", e.target.value)}
+                  placeholder="255"
+                  maxLength={3}
+                />
+              </div>
+            ) : (
+              <div className="flex items-center">
+                <Input
+                  className="rounded-r-none h-7 w-13 text-center text-sm"
+                  value={colorValues.hsl.h}
+                  onChange={(e) => handleHslChange("h", e.target.value)}
+                  placeholder="360"
+                  maxLength={3}
+                />
+                <Input
+                  className="rounded-none h-7 w-13 text-center border-x-0 text-sm"
+                  value={colorValues.hsl.s}
+                  onChange={(e) => handleHslChange("s", e.target.value)}
+                  placeholder="100"
+                  maxLength={3}
+                />
+                <Input
+                  className="rounded-l-none h-7 w-13 text-center text-sm"
+                  value={colorValues.hsl.l}
+                  onChange={(e) => handleHslChange("l", e.target.value)}
+                  placeholder="100"
+                  maxLength={3}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}