@basementstudio/shader-lab 0.1.0

package/src/components/ui/color-picker/index.tsx

@@ -0,0 +1,358 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react"
+import { createPortal } from "react-dom"
+import { cn } from "@/lib/cn"
+import { GlassPanel } from "@/components/ui/glass-panel"
+
+type HsvColor = {
+  h: number
+  s: number
+  v: number
+}
+
+type PopupPosition = {
+  left: number
+  top: number
+}
+
+type ColorPickerProps = {
+  className?: string
+  onValueChange: (value: string) => void
+  value: string
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+function normalizeHex(value: string): string | null {
+  const normalized = value.trim().replace(/^#/, "")
+
+  if (/^[\da-fA-F]{3}$/.test(normalized)) {
+    const expanded = normalized
+      .split("")
+      .map((entry) => `${entry}${entry}`)
+      .join("")
+
+    return `#${expanded.toUpperCase()}`
+  }
+
+  if (/^[\da-fA-F]{6}$/.test(normalized)) {
+    return `#${normalized.toUpperCase()}`
+  }
+
+  return null
+}
+
+function hexToRgb(value: string): { b: number; g: number; r: number } {
+  const hex = normalizeHex(value) ?? "#FFFFFF"
+  return {
+    b: Number.parseInt(hex.slice(5, 7), 16),
+    g: Number.parseInt(hex.slice(3, 5), 16),
+    r: Number.parseInt(hex.slice(1, 3), 16),
+  }
+}
+
+function rgbToHex(red: number, green: number, blue: number): string {
+  return `#${[red, green, blue]
+    .map((value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0"))
+    .join("")
+    .toUpperCase()}`
+}
+
+function rgbToHsv(red: number, green: number, blue: number): HsvColor {
+  const r = red / 255
+  const g = green / 255
+  const b = blue / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const delta = max - min
+  let h = 0
+
+  if (delta !== 0) {
+    if (max === r) {
+      h = ((g - b) / delta) % 6
+    } else if (max === g) {
+      h = (b - r) / delta + 2
+    } else {
+      h = (r - g) / delta + 4
+    }
+  }
+
+  return {
+    h: ((h * 60) + 360) % 360,
+    s: max === 0 ? 0 : delta / max,
+    v: max,
+  }
+}
+
+function hsvToRgb(hue: number, saturation: number, value: number) {
+  const chroma = value * saturation
+  const huePrime = (((hue % 360) + 360) % 360) / 60
+  const x = chroma * (1 - Math.abs((huePrime % 2) - 1))
+  let red = 0
+  let green = 0
+  let blue = 0
+
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma
+    green = x
+  } else if (huePrime < 2) {
+    red = x
+    green = chroma
+  } else if (huePrime < 3) {
+    green = chroma
+    blue = x
+  } else if (huePrime < 4) {
+    green = x
+    blue = chroma
+  } else if (huePrime < 5) {
+    red = x
+    blue = chroma
+  } else {
+    red = chroma
+    blue = x
+  }
+
+  const match = value - chroma
+
+  return {
+    b: (blue + match) * 255,
+    g: (green + match) * 255,
+    r: (red + match) * 255,
+  }
+}
+
+function colorFromHsv(color: HsvColor): string {
+  const rgb = hsvToRgb(color.h, color.s, color.v)
+  return rgbToHex(rgb.r, rgb.g, rgb.b)
+}
+
+function hueToHex(hue: number): string {
+  const rgb = hsvToRgb(hue, 1, 1)
+  return rgbToHex(rgb.r, rgb.g, rgb.b)
+}
+
+export function ColorPicker({ className, onValueChange, value }: ColorPickerProps) {
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const surfaceRef = useRef<HTMLDivElement | null>(null)
+  const hueRef = useRef<HTMLDivElement | null>(null)
+  const [isOpen, setIsOpen] = useState(false)
+  const [inputValue, setInputValue] = useState(normalizeHex(value) ?? "#FFFFFF")
+  const [popupPosition, setPopupPosition] = useState<PopupPosition>({ left: 0, top: 0 })
+  const [color, setColor] = useState(() => {
+    const rgb = hexToRgb(value)
+    return rgbToHsv(rgb.r, rgb.g, rgb.b)
+  })
+
+  useEffect(() => {
+    const hex = normalizeHex(value) ?? "#FFFFFF"
+    const rgb = hexToRgb(hex)
+    setInputValue(hex)
+    setColor(rgbToHsv(rgb.r, rgb.g, rgb.b))
+  }, [value])
+
+  useEffect(() => {
+    if (!isOpen) {
+      return
+    }
+
+    const updatePosition = () => {
+      const trigger = triggerRef.current
+      if (!trigger) {
+        return
+      }
+
+      const rect = trigger.getBoundingClientRect()
+      setPopupPosition({
+        left: rect.right - 208,
+        top: rect.bottom + 8,
+      })
+    }
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const trigger = triggerRef.current
+      const surface = surfaceRef.current
+      const hue = hueRef.current
+      const target = event.target as Node | null
+
+      if (
+        trigger?.contains(target) ||
+        surface?.contains(target) ||
+        hue?.contains(target) ||
+        (target instanceof HTMLElement && target.closest("[data-color-picker-popup]"))
+      ) {
+        return
+      }
+
+      setIsOpen(false)
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false)
+      }
+    }
+
+    updatePosition()
+    window.addEventListener("resize", updatePosition)
+    window.addEventListener("scroll", updatePosition, true)
+    window.addEventListener("pointerdown", handlePointerDown)
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("resize", updatePosition)
+      window.removeEventListener("scroll", updatePosition, true)
+      window.removeEventListener("pointerdown", handlePointerDown)
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [isOpen])
+
+  const hueColor = useMemo(() => hueToHex(color.h), [color.h])
+
+  const commitColor = (nextColor: HsvColor) => {
+    const nextHex = colorFromHsv(nextColor)
+    setColor(nextColor)
+    setInputValue(nextHex)
+    onValueChange(nextHex)
+  }
+
+  const updateSurface = (clientX: number, clientY: number) => {
+    const surface = surfaceRef.current
+    if (!surface) {
+      return
+    }
+
+    const rect = surface.getBoundingClientRect()
+    const saturation = clamp((clientX - rect.left) / rect.width, 0, 1)
+    const valueLevel = 1 - clamp((clientY - rect.top) / rect.height, 0, 1)
+    commitColor({ h: color.h, s: saturation, v: valueLevel })
+  }
+
+  const updateHue = (clientX: number) => {
+    const hueElement = hueRef.current
+    if (!hueElement) {
+      return
+    }
+
+    const rect = hueElement.getBoundingClientRect()
+    const hue = clamp((clientX - rect.left) / rect.width, 0, 1) * 360
+    commitColor({ h: hue, s: color.s, v: color.v })
+  }
+
+  const handleSurfacePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId)
+    updateSurface(event.clientX, event.clientY)
+  }
+
+  const handleSurfacePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.buttons !== 1) {
+      return
+    }
+
+    updateSurface(event.clientX, event.clientY)
+  }
+
+  const handleHuePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId)
+    updateHue(event.clientX)
+  }
+
+  const handleHuePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.buttons !== 1) {
+      return
+    }
+
+    updateHue(event.clientX)
+  }
+
+  const popupStyle = {
+    left: `${popupPosition.left}px`,
+    position: "fixed",
+    top: `${popupPosition.top}px`,
+    zIndex: 80,
+  } as CSSProperties
+
+  return (
+    <div className={cn("w-[132px]", className)}>
+      <button
+        className="grid min-h-8 w-full grid-cols-[24px_minmax(0,1fr)] items-center gap-2 rounded-[var(--ds-radius-control)] border border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-control)] px-2 pt-1 pr-2 pb-1 pl-1 text-[var(--ds-color-text-secondary)] transition-[background-color,border-color,transform] duration-160 ease-[var(--ease-out-cubic)] hover:bg-white/8 hover:border-[var(--ds-border-hover)] focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-border-active)] data-[open]:bg-white/8 data-[open]:border-[var(--ds-border-active)]"
+        data-open={isOpen ? "" : undefined}
+        onClick={() => setIsOpen((current) => !current)}
+        ref={triggerRef}
+        type="button"
+      >
+        <span
+          className="h-6 w-6 rounded-[var(--ds-radius-thumb)] border border-white/8 shadow-[inset_0_0_0_1px_rgb(0_0_0_/_0.12)]"
+          style={{ backgroundColor: inputValue }}
+        />
+        <span className="overflow-hidden text-ellipsis whitespace-nowrap text-left font-[var(--ds-font-mono)] text-[11px] leading-[14px] uppercase">
+          {inputValue}
+        </span>
+      </button>
+
+      {isOpen
+        ? createPortal(
+            <div data-color-picker-popup="" style={popupStyle}>
+              <GlassPanel className="flex w-[208px] flex-col gap-3 p-3" variant="panel">
+                <div
+                  className="relative h-[132px] w-full cursor-crosshair overflow-hidden rounded-[10px] select-none"
+                  onPointerDown={handleSurfacePointerDown}
+                  onPointerMove={handleSurfacePointerMove}
+                  ref={surfaceRef}
+                  style={{ backgroundColor: hueColor }}
+                >
+                  <div className="absolute inset-0 bg-[linear-gradient(90deg,#fff,rgb(255_255_255_/_0%))]" />
+                  <div className="absolute inset-0 bg-[linear-gradient(0deg,#000,rgb(0_0_0_/_0%))]" />
+                  <div
+                    className="absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white/95 shadow-[0_0_0_1px_rgb(0_0_0_/_0.35),0_2px_6px_rgb(0_0_0_/_0.3)]"
+                    style={{
+                      left: `${color.s * 100}%`,
+                      top: `${(1 - color.v) * 100}%`,
+                    }}
+                  />
+                </div>
+
+                <div
+                  className="relative h-3 w-full cursor-ew-resize rounded-full select-none bg-[linear-gradient(90deg,#ff0000_0%,#ffff00_16.66%,#00ff00_33.33%,#00ffff_50%,#0000ff_66.66%,#ff00ff_83.33%,#ff0000_100%)]"
+                  onPointerDown={handleHuePointerDown}
+                  onPointerMove={handleHuePointerMove}
+                  ref={hueRef}
+                >
+                  <div
+                    className="absolute top-1/2 h-4 w-[10px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/96 shadow-[0_0_0_1px_rgb(0_0_0_/_0.28),0_1px_4px_rgb(0_0_0_/_0.3)]"
+                    style={{ left: `${(color.h / 360) * 100}%` }}
+                  />
+                </div>
+
+                <div className="grid grid-cols-[1fr_auto] items-center gap-2">
+                  <input
+                    className="min-h-[30px] w-full rounded-[var(--ds-radius-control)] border border-[var(--ds-border-divider)] bg-white/4 px-[10px] font-[var(--ds-font-mono)] text-[11px] leading-[14px] text-[var(--ds-color-text-secondary)] uppercase outline-none focus:border-[var(--ds-border-active)]"
+                    onChange={(event) => {
+                      const nextValue = event.target.value.toUpperCase()
+                      setInputValue(nextValue)
+                      const nextHex = normalizeHex(nextValue)
+                      if (!nextHex) {
+                        return
+                      }
+                      const rgb = hexToRgb(nextHex)
+                      setColor(rgbToHsv(rgb.r, rgb.g, rgb.b))
+                      onValueChange(nextHex)
+                    }}
+                    spellCheck={false}
+                    type="text"
+                    value={inputValue}
+                  />
+                  <span className="text-right font-[var(--ds-font-mono)] text-[10px] leading-3 text-[var(--ds-color-text-muted)] uppercase">
+                    HEX
+                  </span>
+                </div>
+              </GlassPanel>
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  )
+}

package/src/components/ui/glass-panel/index.tsx

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { HTMLAttributes, ReactNode } from "react"
+import { cn } from "@/lib/cn"
+
+const glassPanelVariants = cva(
+  "border border-[var(--ds-border-panel)] text-[var(--ds-color-text-primary)] backdrop-blur-[24px] transition-[border-color,background-color,box-shadow] duration-160 ease-[var(--ease-out-cubic)]",
+  {
+  variants: {
+    variant: {
+      panel:
+        "overflow-clip rounded-[var(--ds-radius-panel)] bg-[var(--ds-color-glass-panel)] shadow-[var(--ds-shadow-panel-dark)]",
+      pill:
+        "inline-flex min-h-9 items-center gap-[var(--ds-space-2)] rounded-[var(--ds-radius-bar)] bg-[var(--ds-color-glass-pill)] px-[var(--ds-space-3)] shadow-[var(--ds-shadow-pill-dark)]",
+    },
+    interactive: {
+      true: "hover:border-[var(--ds-border-hover)]",
+    },
+  },
+  defaultVariants: {
+    variant: "panel",
+  },
+})
+
+interface GlassPanelProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof glassPanelVariants> {
+  children?: ReactNode
+}
+
+export function GlassPanel({
+  children,
+  className,
+  interactive,
+  variant,
+  ...props
+}: GlassPanelProps) {
+  return (
+    <div
+      className={cn(glassPanelVariants({ variant, interactive }), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/ui/icon-button/index.tsx

@@ -0,0 +1,46 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ButtonHTMLAttributes, ReactNode } from "react"
+import { cn } from "@/lib/cn"
+
+const iconButtonVariants = cva(
+  "inline-flex h-7 w-7 shrink-0 origin-center items-center justify-center rounded-[var(--ds-radius-icon)] border-0 bg-transparent text-[var(--ds-color-text-tertiary)] transition-[background-color,box-shadow,color,transform] duration-160 ease-[var(--ease-out-cubic)] will-change-transform [&_svg]:h-3.5 [&_svg]:w-3.5 hover:not-disabled:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_0.04)] active:not-disabled:scale-[0.96]",
+  {
+  variants: {
+    variant: {
+      ghost:
+        "bg-transparent text-[var(--ds-color-text-tertiary)] hover:bg-transparent hover:text-[var(--ds-color-text-primary)] hover:shadow-none",
+      default:
+        "bg-[var(--ds-color-surface-subtle)] text-[var(--ds-color-text-tertiary)] hover:bg-white/8 hover:text-[var(--ds-color-text-secondary)]",
+      hover:
+        "bg-[var(--ds-color-surface-active)] text-[var(--ds-color-text-secondary)]",
+      active: "bg-white/12 text-white/70",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+type CommonIconButtonProps = {
+  children?: ReactNode
+} & VariantProps<typeof iconButtonVariants>
+
+type IconButtonProps = CommonIconButtonProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">
+
+export function IconButton({
+  children,
+  className,
+  variant,
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      className={cn(iconButtonVariants({ variant }), className)}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/ui/select/index.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import { Select as BaseSelect } from "@base-ui/react/select"
+import type { ReactNode } from "react"
+import { cn } from "@/lib/cn"
+
+export interface SelectOption {
+  disabled?: boolean
+  label: ReactNode
+  value: string
+}
+
+type SelectProps = Omit<
+  BaseSelect.Root.Props<string>,
+  "children" | "className" | "items"
+> & {
+  className?: string
+  iconClassName?: string
+  label?: ReactNode
+  options: readonly SelectOption[]
+  placeholder?: ReactNode
+  popupClassName?: string
+  triggerAriaLabel?: string
+  triggerClassName?: string
+  triggerVariant?: "default" | "icon"
+  valueClassName?: string
+}
+
+function ChevronIcon() {
+  return (
+    <svg aria-hidden="true" fill="none" viewBox="0 0 10 10">
+      <path
+        d="M3 4L5 6L7 4"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.2"
+      />
+    </svg>
+  )
+}
+
+export function Select({
+  className,
+  iconClassName,
+  label,
+  options,
+  placeholder = "Select",
+  popupClassName,
+  triggerAriaLabel,
+  triggerClassName,
+  triggerVariant = "default",
+  valueClassName,
+  ...props
+}: SelectProps) {
+  const isIconTrigger = triggerVariant === "icon"
+
+  return (
+    <BaseSelect.Root
+      items={options.map(({ label: itemLabel, value }) => ({
+        label: itemLabel,
+        value,
+      }))}
+      modal={false}
+      {...props}
+    >
+      <div className={cn("flex w-fit flex-col gap-1", className)}>
+        {label ? (
+          <BaseSelect.Label className="font-[var(--ds-font-mono)] text-[10px] leading-3 text-[var(--ds-color-text-muted)]">
+            {label}
+          </BaseSelect.Label>
+        ) : null}
+
+        <BaseSelect.Trigger
+          aria-label={triggerAriaLabel}
+          className={cn(
+            isIconTrigger
+              ? "group inline-flex h-7 w-7 min-w-0 shrink-0 items-center justify-center rounded-[var(--ds-radius-icon)] border-0 bg-transparent p-0 text-[var(--ds-color-text-tertiary)] transition-[background-color,box-shadow,color,transform] duration-160 ease-[var(--ease-out-cubic)] will-change-transform hover:not-data-disabled:shadow-[inset_0_0_0_1px_rgb(255_255_255_/_0.04)] active:not-data-disabled:scale-[0.96] data-[popup-open]:bg-white/12 data-[popup-open]:text-white/70 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-border-active)]"
+              : "group inline-flex min-h-8 w-fit min-w-0 items-center justify-between gap-[10px] rounded-[var(--ds-radius-icon)] border border-[var(--ds-border-divider)] bg-[var(--ds-color-surface-control)] px-[10px] py-[6px] text-[var(--ds-color-text-secondary)] transition-[background-color,border-color,transform] duration-160 ease-[var(--ease-out-cubic)] hover:not-data-disabled:bg-white/8 hover:not-data-disabled:border-[var(--ds-border-hover)] active:not-data-disabled:scale-[0.98] data-[popup-open]:bg-white/8 data-[popup-open]:border-[var(--ds-border-hover)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-border-active)]",
+            triggerClassName
+          )}
+        >
+          <BaseSelect.Value
+            className={cn(
+              isIconTrigger
+                ? "inline-flex items-center justify-center leading-none text-inherit"
+                : "min-w-0 flex-1 font-[var(--ds-font-mono)] text-[11px] leading-[14px] text-inherit data-[placeholder]:text-[var(--ds-color-text-secondary)]",
+              valueClassName
+            )}
+            placeholder={placeholder}
+          />
+          <BaseSelect.Icon
+            className={cn(
+              isIconTrigger
+                ? "hidden"
+                : "inline-flex shrink-0 text-[var(--ds-color-text-tertiary)] transition-[color,transform] duration-160 ease-[var(--ease-out-cubic)] group-data-[popup-open]:rotate-180 group-data-[popup-open]:text-[var(--ds-color-text-secondary)] [&_svg]:h-[10px] [&_svg]:w-[10px]",
+              iconClassName
+            )}
+          >
+            <ChevronIcon />
+          </BaseSelect.Icon>
+        </BaseSelect.Trigger>
+      </div>
+
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner
+          alignItemWithTrigger={false}
+          className="z-50 outline-none"
+          sideOffset={8}
+        >
+          <BaseSelect.Popup
+            className={cn(
+              "min-w-[var(--anchor-width)] overflow-hidden rounded-[var(--ds-radius-control)] border border-[var(--ds-border-panel)] bg-[rgb(18_18_22_/_0.72)] shadow-[var(--ds-shadow-panel-dark)] backdrop-blur-[24px]",
+              popupClassName
+            )}
+          >
+            <BaseSelect.List className="flex flex-col gap-0.5 p-1">
+              {options.map((option) => (
+                <BaseSelect.Item
+                  className="cursor-pointer rounded-[var(--ds-radius-icon)] px-[10px] py-[6px] text-[var(--ds-color-text-secondary)] outline-none transition-[background-color,color] duration-140 ease-[var(--ease-out-cubic)] data-[highlighted]:bg-[var(--ds-color-surface-active)] data-[selected]:bg-[var(--ds-color-surface-active)] data-[highlighted]:text-[var(--ds-color-text-primary)] data-[selected]:text-[var(--ds-color-text-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:text-[var(--ds-color-text-disabled)]"
+                  disabled={option.disabled}
+                  key={option.value}
+                  value={option.value}
+                >
+                  <BaseSelect.ItemText className="block font-[var(--ds-font-mono)] text-[11px] leading-[14px]">
+                    {option.label}
+                  </BaseSelect.ItemText>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  )
+}