@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -1,358 +0,0 @@
-"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

@@ -1,45 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,136 +0,0 @@
-"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>
-  )
-}