RandomButton() — ui Function Reference

Architecture documentation for the RandomButton() function in random-button.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem calls 1

Entity Profile

DesignEngine→ PreviewSystem→ RandomButton() — ui Function Reference

Dependency Diagram

graph TD
  a4a7ff2a_43e0_a2d9_baca_1a493d84067c["RandomButton()"]
  931e1cb0_2628_a62b_0d12_e2b8414505dc["random-button.tsx"]
  a4a7ff2a_43e0_a2d9_baca_1a493d84067c -->|defined in| 931e1cb0_2628_a62b_0d12_e2b8414505dc
  2d85bc09_dae1_7e84_3bfe_d78a5477aa6d["randomItem()"]
  a4a7ff2a_43e0_a2d9_baca_1a493d84067c -->|calls| 2d85bc09_dae1_7e84_3bfe_d78a5477aa6d
  style a4a7ff2a_43e0_a2d9_baca_1a493d84067c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/random-button.tsx lines 39–145

export function RandomButton() {
  const { locks } = useLocks()
  const [params, setParams] = useDesignSystemSearchParams()

  const handleRandomize = React.useCallback(() => {
    // Use current value if locked, otherwise randomize.
    const baseColor = locks.has("baseColor")
      ? params.baseColor
      : randomItem(BASE_COLORS).name
    const selectedStyle = locks.has("style")
      ? params.style
      : randomItem(STYLES).name

    // Build context for bias application.
    const context: RandomizeContext = {
      style: selectedStyle,
      baseColor,
    }

    const availableThemes = getThemesForBaseColor(baseColor)
    const availableFonts = applyBias(FONTS, context, RANDOMIZE_BIASES.fonts)
    const availableRadii = applyBias(RADII, context, RANDOMIZE_BIASES.radius)

    const selectedTheme = locks.has("theme")
      ? params.theme
      : randomItem(availableThemes).name
    const selectedFont = locks.has("font")
      ? params.font
      : randomItem(availableFonts).value
    const selectedRadius = locks.has("radius")
      ? params.radius
      : randomItem(availableRadii).name
    const selectedIconLibrary = locks.has("iconLibrary")
      ? params.iconLibrary
      : randomItem(Object.values(iconLibraries)).name
    const selectedMenuAccent = locks.has("menuAccent")
      ? params.menuAccent
      : randomItem(MENU_ACCENTS).value
    const selectedMenuColor = locks.has("menuColor")
      ? params.menuColor
      : randomItem(MENU_COLORS).value

    // Update context with selected values for potential future biases.
    context.theme = selectedTheme
    context.font = selectedFont
    context.radius = selectedRadius

    setParams({
      style: selectedStyle,
      baseColor,
      theme: selectedTheme,
      iconLibrary: selectedIconLibrary,
      font: selectedFont,
      menuAccent: selectedMenuAccent,
      menuColor: selectedMenuColor,
      radius: selectedRadius,
    })
  }, [setParams, locks, params])

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if ((e.key === "r" || e.key === "R") && !e.metaKey && !e.ctrlKey) {
        if (
          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
          e.target instanceof HTMLInputElement ||
          e.target instanceof HTMLTextAreaElement ||
          e.target instanceof HTMLSelectElement
        ) {
          return
        }

        e.preventDefault()
        handleRandomize()
      }
    }

    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [handleRandomize])

  return (