{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "realmorphism-kit",
  "type": "registry:block",
  "title": "Realmorphism Kit",
  "description": "Full kit showroom with knobs, compact roller, text roller, and showroom figlet wheel.",
  "author": "LT Lo TeknowledG",
  "registryDependencies": [
    "http://localhost:3050/registry/realmorphism.json",
    "http://localhost:3050/registry/realmorphism-base.json",
    "http://localhost:3050/registry/realmorphism-rolling-pickers.json"
  ],
  "dependencies": [
    "@radix-ui/react-checkbox",
    "@radix-ui/react-label",
    "@radix-ui/react-switch",
    "@radix-ui/react-slot",
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "checkbox.tsx",
      "target": "components/realmorphism/ui/checkbox.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"realmorphism-action grid size-9 place-content-center disabled:cursor-not-allowed\",\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"grid place-content-center text-current\">\n      <Check className=\"size-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\n"
    },
    {
      "type": "registry:component",
      "path": "input.tsx",
      "target": "components/realmorphism/ui/input.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"realmorphism-field flex h-9 w-full px-3 py-1 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed md:text-sm\",\n          \"placeholder:text-[var(--realmorphism-ink-on-face)]/55 focus-visible:outline-none\",\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n"
    },
    {
      "type": "registry:component",
      "path": "label.tsx",
      "target": "components/realmorphism/ui/label.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst labelVariants = cva(\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n);\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n"
    },
    {
      "type": "registry:component",
      "path": "switch.tsx",
      "target": "components/realmorphism/ui/switch.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"realmorphism-action inline-flex h-8 w-14 shrink-0 cursor-pointer items-center px-1 disabled:cursor-not-allowed\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block size-5 rounded-[calc(var(--radius)-2px)] border border-[var(--realmorphism-face-border)] bg-[var(--realmorphism-host-raised)] shadow-[var(--realmorphism-shadow-rest)] transition-transform data-[state=checked]:translate-x-6 data-[state=checked]:shadow-none data-[state=unchecked]:translate-x-0\",\n      )}\n    />\n  </SwitchPrimitives.Root>\n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n"
    },
    {
      "type": "registry:component",
      "path": "toggle.tsx",
      "target": "components/realmorphism/ui/toggle.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleBase =\n  \"relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border text-sm font-medium outline-none disabled:pointer-events-none disabled:cursor-not-allowed before:pointer-events-auto before:absolute before:-inset-1 before:content-[''] before:bg-transparent [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\";\n\nconst toggleVariants = cva(toggleBase, {\n  variants: {\n    variant: {\n      default:\n        \"border-border bg-card text-card-foreground shadow-[2px_2px_0_1px_var(--button-wall)] transition-[color,box-shadow,transform] hover:-translate-x-[2px] hover:-translate-y-[2px] hover:shadow-[4px_4px_0_1px_var(--button-wall)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\",\n      outline:\n        \"border-border bg-background text-foreground shadow-[2px_2px_0_1px_var(--button-wall)] transition-[color,box-shadow,transform] hover:-translate-x-[2px] hover:-translate-y-[2px] hover:shadow-[4px_4px_0_1px_var(--button-wall)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\",\n      secondary:\n        \"border-border bg-secondary text-secondary-foreground shadow-[2px_2px_0_1px_var(--button-wall)] transition-[color,box-shadow,transform] hover:-translate-x-[2px] hover:-translate-y-[2px] hover:shadow-[4px_4px_0_1px_var(--button-wall)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\",\n      realmorphism:\n        \"realmorphism-control font-mono tracking-[0.06em] transition-[transform,box-shadow,color,background-color,border-color] duration-150 ease-out\",\n    },\n    size: {\n      default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n      sm: \"h-8 gap-1.5 px-3 has-[>svg]:px-2.5\",\n      lg: \"h-10 px-6 has-[>svg]:px-4\",\n      operational: \"px-5 py-3\",\n      icon: \"size-9\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nexport interface ToggleProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\">,\n    VariantProps<typeof toggleVariants> {\n  pressed?: boolean;\n  defaultPressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n}\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  pressed,\n  defaultPressed = false,\n  onPressedChange,\n  onClick,\n  type = \"button\",\n  ...props\n}: ToggleProps) {\n  const [uncontrolledPressed, setUncontrolledPressed] = React.useState(defaultPressed);\n  const isControlled = typeof pressed === \"boolean\";\n  const isPressed = isControlled ? pressed : uncontrolledPressed;\n\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const nextPressed = !isPressed;\n\n    if (!isControlled) {\n      setUncontrolledPressed(nextPressed);\n    }\n\n    onPressedChange?.(nextPressed);\n  };\n\n  return (\n    <button\n      data-slot=\"toggle\"\n      type={type}\n      aria-pressed={isPressed}\n      data-state={isPressed ? \"on\" : \"off\"}\n      className={cn(toggleVariants({ variant, size, className }))}\n      onClick={handleClick}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants };\n"
    },
    {
      "type": "registry:component",
      "path": "knob.tsx",
      "target": "components/realmorphism/ui/knob.tsx",
      "content": "\"use client\";\n\n/*\n * Copyright (c) 2026 by Dan (https://codepen.io/toomanyrequests/pen/BazyEEo)\n * Licensed under the MIT License.\n */\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype KnobMode = \"power\" | \"balance\" | \"tuner\";\ntype KnobSize = \"sm\" | \"md\" | \"lg\";\n\ntype KnobProps = {\n  label: string;\n  unit?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  wheelMultiplier?: number;\n  dragMultiplier?: number;\n  value?: number;\n  defaultValue?: number;\n  onValueChange?: (value: number) => void;\n  mode?: KnobMode;\n  size?: KnobSize;\n  theme?: \"light\" | \"dark\";\n  className?: string;\n  disabled?: boolean;\n  active?: boolean;\n  defaultActive?: boolean;\n  onActiveChange?: (active: boolean) => void;\n  clickTogglesActive?: boolean;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction decimalPlaces(value: number) {\n  const text = String(value);\n  if (!text.includes(\".\")) {\n    return 0;\n  }\n\n  return text.split(\".\")[1]?.length ?? 0;\n}\n\nfunction roundToStep(value: number, step: number, min: number) {\n  const precision = Math.max(decimalPlaces(step), decimalPlaces(min));\n  const next = Math.round((value - min) / step) * step + min;\n  return Number(next.toFixed(precision));\n}\n\nfunction knobSizeClass(size: KnobSize) {\n  switch (size) {\n    case \"sm\":\n      return \"w-16\";\n    case \"lg\":\n      return \"w-24\";\n    case \"md\":\n    default:\n      return \"w-20\";\n  }\n}\n\nexport function Knob({\n  label,\n  unit,\n  min = 0,\n  max = 100,\n  step = 1,\n  wheelMultiplier = 1,\n  dragMultiplier = 1,\n  value,\n  defaultValue = min,\n  onValueChange,\n  mode = \"power\",\n  size = \"md\",\n  theme = \"dark\",\n  className,\n  disabled = false,\n  active,\n  defaultActive = true,\n  onActiveChange,\n  clickTogglesActive,\n}: KnobProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const hostRef = React.useRef<HTMLFieldSetElement>(null);\n  const knobRef = React.useRef<HTMLDivElement>(null);\n  const dragPointerIdRef = React.useRef<number | null>(null);\n  const lastPointerXRef = React.useRef<number | null>(null);\n  const lastPointerYRef = React.useRef<number | null>(null);\n  const dragAccumulatorRef = React.useRef(0);\n  const didDragRef = React.useRef(false);\n  const activeAtPointerDownRef = React.useRef(defaultActive);\n  const inputId = React.useId();\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n  const [isDragging, setIsDragging] = React.useState(false);\n  const [isHovered, setIsHovered] = React.useState(false);\n  const isControlled = typeof value === \"number\";\n  const currentValue = isControlled ? value : uncontrolledValue;\n  const isActiveControlled = typeof active === \"boolean\";\n  const [uncontrolledActive, setUncontrolledActive] = React.useState(defaultActive);\n  const currentActive = isActiveControlled ? active : uncontrolledActive;\n  const safeMin = Math.min(min, max);\n  const safeMax = Math.max(min, max);\n  const safeStep = step > 0 ? step : 1;\n  const normalizedValue = clamp(currentValue, safeMin, safeMax);\n  const span = Math.abs(safeMin) + Math.abs(safeMax) || 1;\n  const rawPercent = (normalizedValue / span) * 100;\n  const isBalance = mode === \"balance\";\n  const isTuner = mode === \"tuner\";\n  const isCenteredMode = isBalance || isTuner;\n  const isLight = theme === \"light\";\n  const balanceExtent = Math.max(Math.abs(safeMin), Math.abs(safeMax)) || 1;\n  const balancePercent = clamp(Math.abs(normalizedValue) / balanceExtent, 0, 1);\n  const hasBalanceHighlight = balancePercent > 0;\n  const valueSweep = clamp((normalizedValue - safeMin) / (safeMax - safeMin || 1), 0, 1);\n  const wheelStep = safeStep * 1.5 * Math.max(wheelMultiplier, 0.1);\n  const formattedValue = isBalance\n    ? normalizedValue === 0\n      ? \"0\"\n      : `+${Math.abs(normalizedValue)}`\n    : isTuner\n      ? normalizedValue === 0\n        ? \"0\"\n        : normalizedValue > 0\n          ? `+${Math.abs(normalizedValue)}`\n          : `${normalizedValue}`\n      : `${normalizedValue}`;\n  const formattedUnit = isBalance\n    ? normalizedValue < 0\n      ? \"left\"\n      : normalizedValue > 0\n        ? \"right\"\n        : \"center\"\n    : (unit ?? \"level\");\n  const rotation = isCenteredMode ? rawPercent * 2.64 : rawPercent * 2.64 - 132;\n  const powerOffset = `${184 - 184 * valueSweep}`;\n  const balanceDash = `${balancePercent * 100} 100`;\n  const tickCount = isTuner ? 12 : isBalance ? 10 : 8;\n  const tickMarks = Array.from({ length: tickCount }, (_, index) => index);\n  const allowsActiveToggle = clickTogglesActive ?? mode === \"power\";\n  const isPressed = isDragging;\n  const ringStroke = currentActive ? \"#ff00ff\" : isLight ? \"#8f8c87\" : \"#55595C\";\n  const ringOpacity = currentActive ? 1 : 0.28;\n\n  const normalizedValueRef = React.useRef(normalizedValue);\n  React.useEffect(() => {\n    normalizedValueRef.current = normalizedValue;\n  }, [normalizedValue]);\n\n  React.useEffect(() => {\n    activeAtPointerDownRef.current = currentActive;\n  }, [currentActive]);\n\n  const setValue = React.useCallback(\n    (nextValue: number) => {\n      const clampedValue = clamp(roundToStep(nextValue, safeStep, safeMin), safeMin, safeMax);\n\n      if (!isControlled) {\n        setUncontrolledValue(clampedValue);\n      }\n\n      onValueChange?.(clampedValue);\n    },\n    [isControlled, onValueChange, safeMax, safeMin, safeStep],\n  );\n\n  const setActive = React.useCallback(\n    (nextActive: boolean) => {\n      if (!isActiveControlled) {\n        setUncontrolledActive(nextActive);\n      }\n      onActiveChange?.(nextActive);\n    },\n    [isActiveControlled, onActiveChange],\n  );\n\n  React.useEffect(() => {\n    if (!isDragging || disabled) {\n      return;\n    }\n\n    const handlePointerMove = (event: PointerEvent) => {\n      if (dragPointerIdRef.current !== event.pointerId) {\n        return;\n      }\n\n      if (lastPointerXRef.current === null || lastPointerYRef.current === null) {\n        lastPointerXRef.current = event.clientX;\n        lastPointerYRef.current = event.clientY;\n        return;\n      }\n\n      const deltaX = event.clientX - lastPointerXRef.current;\n      const deltaY = event.clientY - lastPointerYRef.current;\n      const delta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : -deltaY;\n      lastPointerXRef.current = event.clientX;\n      lastPointerYRef.current = event.clientY;\n\n      if (delta === 0) {\n        return;\n      }\n\n      didDragRef.current = true;\n      event.preventDefault();\n      const dragPixelsPerStep = (isTuner ? 6 : 8) / Math.max(dragMultiplier, 0.1);\n      dragAccumulatorRef.current += delta / dragPixelsPerStep;\n\n      const wholeSteps = Math.trunc(dragAccumulatorRef.current);\n      if (wholeSteps === 0) {\n        return;\n      }\n\n      dragAccumulatorRef.current -= wholeSteps;\n      setValue(normalizedValueRef.current + wholeSteps * safeStep);\n    };\n\n    const handlePointerUp = (event: PointerEvent) => {\n      if (dragPointerIdRef.current !== event.pointerId) {\n        return;\n      }\n\n      if (knobRef.current?.hasPointerCapture(event.pointerId)) {\n        knobRef.current.releasePointerCapture(event.pointerId);\n      }\n\n      dragPointerIdRef.current = null;\n      lastPointerXRef.current = null;\n      lastPointerYRef.current = null;\n      dragAccumulatorRef.current = 0;\n      const shouldToggleActive = allowsActiveToggle && !disabled && !didDragRef.current;\n      didDragRef.current = false;\n      setIsDragging(false);\n      inputRef.current?.select();\n\n      if (shouldToggleActive) {\n        setActive(!activeAtPointerDownRef.current);\n      }\n    };\n\n    const handlePointerCancel = (event: PointerEvent) => {\n      if (dragPointerIdRef.current !== event.pointerId) {\n        return;\n      }\n\n      if (knobRef.current?.hasPointerCapture(event.pointerId)) {\n        knobRef.current.releasePointerCapture(event.pointerId);\n      }\n\n      dragPointerIdRef.current = null;\n      lastPointerXRef.current = null;\n      lastPointerYRef.current = null;\n      dragAccumulatorRef.current = 0;\n      didDragRef.current = false;\n      setIsDragging(false);\n    };\n\n    window.addEventListener(\"pointermove\", handlePointerMove, { capture: true });\n    window.addEventListener(\"pointerup\", handlePointerUp, { capture: true });\n    window.addEventListener(\"pointercancel\", handlePointerCancel, { capture: true });\n\n    return () => {\n      window.removeEventListener(\"pointermove\", handlePointerMove, { capture: true });\n      window.removeEventListener(\"pointerup\", handlePointerUp, { capture: true });\n      window.removeEventListener(\"pointercancel\", handlePointerCancel, { capture: true });\n    };\n  }, [allowsActiveToggle, disabled, dragMultiplier, isDragging, safeStep, setActive, setValue]);\n\n  React.useEffect(() => {\n    const host = hostRef.current;\n    if (!host || disabled) {\n      return;\n    }\n\n    const handleWheel = (event: WheelEvent) => {\n      event.preventDefault();\n      event.stopPropagation();\n      const dominantDelta =\n        Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;\n      if (dominantDelta === 0) {\n        return;\n      }\n      if (dominantDelta < 0) {\n        setValue(normalizedValueRef.current - wheelStep);\n      } else {\n        setValue(normalizedValueRef.current + wheelStep);\n      }\n    };\n\n    host.addEventListener(\"wheel\", handleWheel, { passive: false });\n    return () => host.removeEventListener(\"wheel\", handleWheel);\n  }, [disabled, setValue, wheelStep]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const nextValue =\n      event.currentTarget.value === \"\" ? safeMin : Number(event.currentTarget.value);\n    if (Number.isFinite(nextValue)) {\n      setValue(nextValue);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n      case \"+\":\n        event.preventDefault();\n        setValue(normalizedValue + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n      case \"-\":\n        event.preventDefault();\n        setValue(normalizedValue - safeStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(isBalance ? 0 : safeMin);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(safeMax);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    event.preventDefault();\n    activeAtPointerDownRef.current = currentActive;\n    dragPointerIdRef.current = event.pointerId;\n    lastPointerXRef.current = event.clientX;\n    lastPointerYRef.current = event.clientY;\n    dragAccumulatorRef.current = 0;\n    didDragRef.current = false;\n    knobRef.current?.setPointerCapture(event.pointerId);\n    setIsDragging(true);\n    inputRef.current?.focus({ preventScroll: true });\n  };\n\n  const defaultReset = isCenteredMode ? 0 : defaultValue;\n\n  const handleDoubleClick = () => {\n    if (disabled) {\n      return;\n    }\n\n    setValue(defaultReset);\n  };\n\n  return (\n    <fieldset\n      ref={hostRef}\n      className={cn(\n        \"group relative inline-flex flex-col items-center gap-2 border-0 p-0 text-center font-mono text-sm\",\n        knobSizeClass(size),\n        className,\n      )}\n    >\n      <div\n        ref={knobRef}\n        className={cn(\n          \"relative mx-auto aspect-square w-full select-none rounded-full touch-none overflow-hidden transition-transform duration-150\",\n          isPressed\n            ? \"translate-y-[4px] scale-[0.95]\"\n            : isHovered\n              ? \"scale-[1.01]\"\n              : \"scale-100\",\n          isLight\n            ? \"shadow-[inset_0_1px_0_rgba(255,255,255,0.55),inset_0_-10px_18px_rgba(0,0,0,0.12)]\"\n            : \"shadow-[inset_0_1px_0_rgba(255,255,255,0.08),inset_0_-14px_22px_rgba(0,0,0,0.52)]\",\n          isPressed\n            ? isLight\n              ? \"shadow-[inset_0_3px_10px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.32),0_3px_8px_rgba(0,0,0,0.16)]\"\n              : \"shadow-[inset_0_4px_12px_rgba(0,0,0,0.48),inset_0_1px_0_rgba(255,255,255,0.06),0_4px_10px_rgba(0,0,0,0.38)]\"\n            : \"\",\n        )}\n        style={{\n          backgroundImage: isLight\n            ? \"radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95) 0%, rgba(247,243,235,0.98) 30%, rgba(226,220,211,1) 62%, rgba(200,193,184,1) 100%)\"\n            : \"radial-gradient(circle at 30% 28%, rgba(82,85,88,0.98) 0%, rgba(44,45,47,1) 34%, rgba(28,30,32,1) 70%, rgba(18,19,21,1) 100%)\",\n        }}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onPointerDown={handlePointerDown}\n        onDoubleClick={handleDoubleClick}\n        role={allowsActiveToggle ? \"button\" : undefined}\n        tabIndex={allowsActiveToggle ? 0 : undefined}\n        aria-pressed={allowsActiveToggle ? currentActive : undefined}\n        aria-label={\n          allowsActiveToggle ? `${label} power ${currentActive ? \"on\" : \"off\"}` : undefined\n        }\n        onKeyDown={(event) => {\n          if (!allowsActiveToggle || disabled) {\n            return;\n          }\n\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            setActive(!currentActive);\n          }\n        }}\n      >\n        <div\n          className={cn(\n            \"absolute inset-[6%] rounded-full border\",\n            isHovered\n              ? isLight\n                ? \"border-white/65\"\n                : \"border-white/20\"\n              : isLight\n                ? \"border-white/45\"\n                : \"border-white/10\",\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute inset-[12%] rounded-full\",\n            isLight\n              ? \"bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.18),transparent_42%)]\"\n              : \"bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.08),transparent_42%)]\",\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute inset-[14%] rounded-full\",\n            isLight ? \"bg-[#e8e1d7]\" : \"bg-[#2c2d2f]\",\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute inset-[22%] rounded-full opacity-10\",\n            isLight ? \"bg-[#ffffff]\" : \"bg-[#e4e8ea]\",\n          )}\n        />\n\n        <svg\n          className=\"pointer-events-none absolute inset-0 z-[5] h-full w-full\"\n          viewBox=\"0 0 100 100\"\n          preserveAspectRatio=\"xMidYMid meet\"\n          aria-hidden=\"true\"\n        >\n          <g opacity={isLight ? 0.32 : 0.55}>\n            {tickMarks.map((mark) => {\n              const angle = -132 + (264 / (tickCount - 1)) * mark;\n              return (\n                <line\n                  key={mark}\n                  x1=\"50\"\n                  y1=\"12\"\n                  x2=\"50\"\n                  y2={mark % 3 === 0 ? \"20\" : \"17\"}\n                  stroke={isLight ? \"#645f59\" : \"#dcdcdc\"}\n                  strokeWidth={mark % 3 === 0 ? \"1.7\" : \"1\"}\n                  strokeLinecap=\"round\"\n                  transform={`rotate(${angle} 50 50)`}\n                />\n              );\n            })}\n          </g>\n          <path\n            d=\"M20,76 A 40 40 0 1 1 80 76\"\n            fill=\"none\"\n            stroke={isLight ? \"#8f8c87\" : \"#55595C\"}\n            strokeWidth=\"5\"\n          />\n          {isBalance ? (\n            hasBalanceHighlight ? (\n              <path\n                d={\n                  normalizedValue >= 0 ? \"M50,10 A 40 40 0 0 1 80 76\" : \"M50,10 A 40 40 0 0 0 20 76\"\n                }\n                pathLength={100}\n                fill=\"none\"\n                stroke={ringStroke}\n                strokeWidth=\"5\"\n                strokeLinecap=\"round\"\n                strokeDasharray={balanceDash}\n                strokeOpacity={ringOpacity}\n              />\n            ) : null\n          ) : (\n            <path\n              d=\"M20,76 A 40 40 0 1 1 80 76\"\n              fill=\"none\"\n              stroke={ringStroke}\n              strokeWidth=\"5\"\n              strokeLinecap=\"round\"\n              strokeDasharray=\"184 184\"\n              strokeDashoffset={powerOffset}\n              strokeOpacity={ringOpacity}\n            />\n          )}\n        </svg>\n\n        <div\n          className=\"pointer-events-none absolute inset-[18%] z-10\"\n          style={{ transform: `rotate(${rotation}deg)` }}\n        >\n          <div\n            className={cn(\n              \"absolute bottom-1/2 left-1/2 h-[52%] w-[4px] -translate-x-1/2 rounded-full shadow-[0_0_6px_rgba(0,0,0,0.25)]\",\n              isLight ? \"bg-[#4f4a45]\" : \"bg-[#f4f4f4]\",\n            )}\n          />\n          <div\n            className={cn(\n              \"absolute bottom-1/2 left-1/2 h-[58%] w-[1px] -translate-x-1/2 rounded-full\",\n              isLight ? \"bg-white/75\" : \"bg-white/30\",\n            )}\n          />\n        </div>\n        <div\n          className={cn(\n            \"pointer-events-none absolute left-1/2 top-1/2 z-20 h-[12%] w-[12%] -translate-x-1/2 -translate-y-1/2 rounded-full border shadow-[inset_0_1px_0_rgba(255,255,255,0.35),0_2px_6px_rgba(0,0,0,0.25)] transition-transform duration-150\",\n            currentActive\n              ? isLight\n                ? \"border-[#8f8c87] bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.95),#ddd4ca_70%,#c4bbb0_100%)]\"\n                : \"border-[#181b1c] bg-[radial-gradient(circle_at_35%_35%,rgba(79,83,86,1),#3a3d40_70%,#232629_100%)]\"\n              : isLight\n                ? \"border-[#b3aca3] bg-[radial-gradient(circle_at_35%_35%,rgba(255,255,255,0.78),#cfc7bc_70%,#b8aea3_100%)]\"\n                : \"border-[#2a2d30] bg-[radial-gradient(circle_at_35%_35%,rgba(56,60,63,1),#2a2d30_70%,#17191b_100%)]\",\n          )}\n        />\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 z-[15] rounded-full border\",\n            isLight ? \"border-[#8f8c87]\" : \"border-[#181b1c]\",\n          )}\n        />\n      </div>\n\n      <div\n        className={cn(\n          \"mt-2 grid min-h-[1rem] w-full grid-cols-[4ch_6ch] items-baseline justify-center gap-2 tabular-nums\",\n          isLight ? \"text-[#37332f]\" : \"text-[#e4e8ea]\",\n        )}\n      >\n        <span className=\"inline-block text-right text-[0.95rem] leading-none\">\n          {formattedValue}\n        </span>\n        <span\n          className={cn(\n            \"inline-block text-left text-[0.65rem] uppercase tracking-[0.18em]\",\n            isLight ? \"text-[#787169]\" : \"text-[#888]\",\n          )}\n        >\n          {formattedUnit}\n        </span>\n      </div>\n\n      <input\n        ref={inputRef}\n        id={inputId}\n        type=\"number\"\n        value={normalizedValue}\n        min={safeMin}\n        max={safeMax}\n        step={safeStep}\n        disabled={disabled}\n        aria-label={label}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        className=\"sr-only\"\n      />\n\n      <label\n        className={cn(\n          \"relative block w-full select-none pt-1\",\n          isLight ? \"text-[#35312c]\" : \"text-[#e4e8ea]\",\n        )}\n        htmlFor={inputId}\n      >\n        <span className=\"block text-[0.9rem] leading-none\">{label}</span>\n      </label>\n    </fieldset>\n  );\n}\n"
    },
    {
      "type": "registry:component",
      "path": "kit-knobs-section.tsx",
      "target": "components/realmorphism/kit/kit-knobs-section.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Knob } from \"@/components/realmorphism/ui/knob\";\n\nexport function KitKnobsSection() {\n  const [power, setPower] = React.useState(42);\n  const [tone, setTone] = React.useState(24);\n  const [balance, setBalance] = React.useState(0);\n  const [trim, setTrim] = React.useState(7);\n\n  return (\n    <section className=\"realmorphism-panel p-5\">\n      <div className=\"mb-6 flex flex-wrap items-end justify-between gap-4\">\n        <div>\n          <h2 className=\"text-xl font-semibold\">Rotary Surface</h2>\n          <p className=\"mt-1 max-w-2xl text-sm leading-6 text-[#9eada7]\">\n            Wheel for precise increments, drag for a quick sweep, press the dial face to toggle power,\n            double-click to snap back to default.\n          </p>\n        </div>\n        <span className=\"font-mono text-xs text-[#7dffb4]\">wheel-first tuning</span>\n      </div>\n      <div className=\"grid justify-items-center gap-8 sm:grid-cols-2 xl:grid-cols-4\">\n        <Knob\n          label=\"Power\"\n          value={power}\n          onValueChange={setPower}\n          min={0}\n          max={100}\n          step={1}\n          mode=\"power\"\n          theme=\"dark\"\n        />\n        <Knob\n          label=\"Tone\"\n          value={tone}\n          onValueChange={setTone}\n          min={0}\n          max={100}\n          step={1}\n          mode=\"power\"\n          theme=\"dark\"\n        />\n        <Knob\n          label=\"Balance\"\n          value={balance}\n          onValueChange={setBalance}\n          min={-12}\n          max={12}\n          step={1}\n          wheelMultiplier={0.5}\n          dragMultiplier={0.75}\n          mode=\"balance\"\n          theme=\"dark\"\n        />\n        <Knob\n          label=\"Trim\"\n          value={trim}\n          onValueChange={setTrim}\n          min={0}\n          max={10}\n          step={0.1}\n          mode=\"power\"\n          size=\"sm\"\n          theme=\"dark\"\n        />\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "type": "registry:component",
      "path": "kit-compact-rolling-picker-section.tsx",
      "target": "components/realmorphism/kit/kit-compact-rolling-picker-section.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { DocTypeRollingPicker } from \"../doc-type-rolling-picker\";\nimport { DOC_TYPE_ENTRIES, type DocTypeValue } from \"@/lib/realmorphism/doc-type-icon\";\n\nexport function KitCompactRollingPickerSection() {\n  const [docType, setDocType] = React.useState<DocTypeValue>(\"markdown\");\n  const activeLabel = DOC_TYPE_ENTRIES.find((entry) => entry.value === docType)?.label ?? docType;\n\n  return (\n    <section className=\"realmorphism-panel p-5\">\n      <div className=\"mb-6 flex flex-wrap items-end justify-between gap-4\">\n        <div>\n          <h2 className=\"text-xl font-semibold\">Rolling Picker</h2>\n          <p className=\"mt-1 max-w-2xl text-sm leading-6 text-[#9eada7]\">\n            Compact toolbar variant of the same control: one visible row in the bar, neighbors on while\n            you spin, icon when settled. Document types below are demo data only.\n          </p>\n        </div>\n        <span className=\"font-mono text-xs text-[#7dffb4]\">control · compact</span>\n      </div>\n\n      <div className=\"grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,16rem)] lg:items-center\">\n        <div className=\"realmorphism-kit-toolbar flex flex-wrap items-center gap-1.5 px-3 py-2\">\n          <span className=\"mr-2 font-mono text-[10px] uppercase tracking-[0.12em] text-[#6f7a75]\">\n            Operator toolbar\n          </span>\n          <span className=\"mx-0.5 h-4 w-px shrink-0 bg-[#2a3530]\" aria-hidden />\n          <DocTypeRollingPicker value={docType} onChange={setDocType} />\n        </div>\n\n        <div className=\"realmorphism-panel space-y-1 p-4\">\n          <div className=\"font-mono text-[10px] uppercase tracking-[0.14em] text-[#6f7a75]\">\n            Selected\n          </div>\n          <div className=\"font-mono text-sm text-[#e8efeb]\">{activeLabel}</div>\n          <div className=\"font-mono text-xs text-[#7dffb4]\">{docType}</div>\n        </div>\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "type": "registry:component",
      "path": "kit-text-rolling-picker-section.tsx",
      "target": "components/realmorphism/kit/kit-text-rolling-picker-section.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { TextRollingPicker } from \"../text-rolling-picker\";\nimport {\n  DEMO_TEXT_CATALOG,\n  type DemoTextCatalogEntry,\n} from \"@/lib/realmorphism/demo-text-catalog\";\n\nexport type KitTextRollingPickerSectionProps = {\n  catalog?: DemoTextCatalogEntry[];\n};\n\nexport function KitTextRollingPickerSection({\n  catalog = DEMO_TEXT_CATALOG,\n}: KitTextRollingPickerSectionProps) {\n  const [artId, setArtId] = React.useState(catalog[0]?.id ?? \"\");\n  const active =\n    (artId ? catalog.find((entry) => entry.id === artId) : undefined) ?? catalog[0] ?? null;\n  const currentIndex = active ? catalog.findIndex((entry) => entry.id === active.id) : -1;\n\n  React.useEffect(() => {\n    if (!catalog.length) return;\n    if (catalog.some((entry) => entry.id === artId)) return;\n    setArtId(catalog[0]?.id ?? \"\");\n  }, [artId, catalog]);\n\n  return (\n    <section className=\"realmorphism-panel p-5\">\n      <div className=\"mb-6 flex flex-wrap items-end justify-between gap-4\">\n        <div>\n          <h2 className=\"text-xl font-semibold\">Text Roller</h2>\n          <p className=\"mt-1 max-w-2xl text-sm leading-6 text-[#9eada7]\">\n            Compact variant with title text in the toolbar roller. Spin to browse; the ASCII line lands\n            in the detail panel when you stop—not in the wheel itself.\n          </p>\n        </div>\n        <span className=\"font-mono text-xs text-[#7dffb4]\">control · text</span>\n      </div>\n\n      <div className=\"grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,16rem)] lg:items-start\">\n        <div className=\"space-y-3\">\n          <div className=\"realmorphism-kit-toolbar flex min-h-7 min-w-0 flex-nowrap items-center gap-1.5 overflow-hidden overscroll-contain px-3 py-2\">\n            <span className=\"shrink-0 font-mono text-[10px] uppercase tracking-[0.12em] text-[#6f7a75]\">\n              1-line toolbar\n            </span>\n            <span className=\"mx-0.5 h-4 w-px shrink-0 bg-[#2a3530]\" aria-hidden />\n            <div className=\"flex h-7 min-w-0 flex-1\" data-oneline-art-picker>\n              <TextRollingPicker value={artId} onChange={setArtId} catalog={catalog} />\n            </div>\n          </div>\n\n          <div className=\"space-y-2\">\n            <span className=\"font-mono text-[10px] uppercase tracking-[0.12em] text-[#6f7a75]\">\n              Detail panel (example: 1-line ascii)\n            </span>\n            <div className=\"realmorphism-panel flex min-h-[5rem] max-h-[5rem] flex-col justify-center overflow-hidden p-4\">\n              {active ? (\n                <pre className=\"overflow-hidden font-mono text-[10px] leading-none whitespace-pre text-[#7dffb4]\">\n                  {active.content}\n                </pre>\n              ) : (\n                <div className=\"font-mono text-xs text-[#6f7a75]\">No catalog entries</div>\n              )}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"realmorphism-panel space-y-1 p-4\">\n          <div className=\"font-mono text-[10px] uppercase tracking-[0.14em] text-[#6f7a75]\">\n            Selected\n          </div>\n          {active ? (\n            <>\n              <div className=\"font-mono text-sm text-[#e8efeb]\">{active.title}</div>\n              <div className=\"font-mono text-xs text-[#7dffb4]\">{active.id}</div>\n              {catalog.length > 1 && currentIndex >= 0 ? (\n                <div className=\"font-mono text-xs text-[#6f7a75]\">\n                  {currentIndex + 1} / {catalog.length}\n                </div>\n              ) : null}\n            </>\n          ) : (\n            <div className=\"font-mono text-xs text-[#6f7a75]\">…</div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "type": "registry:component",
      "path": "kit-showroom-figlet-section.tsx",
      "target": "components/realmorphism/kit/kit-showroom-figlet-section.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  DEFAULT_DEMO_FIGLET_FONT,\n  DEMO_FIGLET_FONTS,\n  resolveDemoFigletValue,\n} from \"@/lib/realmorphism/demo-figlet-catalog\";\nimport {\n  ShowroomFontPicker,\n  type ShowroomFontWheelPreviewRender,\n} from \"../showroom-font-picker\";\nimport { ShowroomFontPreviewPanel } from \"../showroom-font-preview-panel\";\n\nexport type KitShowroomFigletSectionProps = {\n  fonts?: readonly string[];\n  defaultFont?: string;\n  previewText?: string;\n  renderWheelPreview?: ShowroomFontWheelPreviewRender;\n  renderDetailPreview?: (font: string, previewText: string) => React.ReactNode;\n};\n\nexport function KitShowroomFigletSection({\n  fonts = DEMO_FIGLET_FONTS,\n  defaultFont = DEFAULT_DEMO_FIGLET_FONT,\n  previewText = \"ECHO\",\n  renderWheelPreview,\n  renderDetailPreview,\n}: KitShowroomFigletSectionProps) {\n  const [font, setFont] = React.useState(defaultFont);\n  const resolved = resolveDemoFigletValue(font, fonts);\n  const currentIndex = fonts.findIndex((name) => name.toLowerCase() === resolved.toLowerCase());\n\n  React.useEffect(() => {\n    if (resolved === font) return;\n    setFont(resolved);\n  }, [resolved, font]);\n\n  return (\n    <section className=\"realmorphism-panel p-5\">\n      <div className=\"mb-6 flex flex-wrap items-end justify-between gap-4\">\n        <div>\n          <h2 className=\"text-xl font-semibold\">Rolling Picker</h2>\n          <p className=\"mt-1 max-w-2xl text-sm leading-6 text-[#9eada7]\">\n            Showroom variant for long lists: a square wheel with a mirrored band, momentum scroll, and\n            a selection row that can show rich preview plus label. Off-band rows stay text-only so the\n            layout does not jump when you stop.\n          </p>\n        </div>\n        <span className=\"font-mono text-xs text-[#7dffb4]\">control · showroom</span>\n      </div>\n\n      <div className=\"flex min-w-0 flex-col gap-6 xl:flex-row xl:items-start\">\n        <div className=\"flex w-full min-w-0 shrink-0 flex-col items-center gap-3 xl:w-auto\">\n          <div\n            data-kit-showroom-wheel\n            className=\"realmorphism-kit-toolbar flex w-fit max-w-full justify-center\"\n          >\n            <ShowroomFontPicker\n              variant=\"showroom\"\n              value={font}\n              onChange={setFont}\n              fonts={fonts}\n              renderWheelPreview={renderWheelPreview}\n            />\n          </div>\n\n          <div className=\"realmorphism-panel w-full max-w-[10.5rem] space-y-1 p-3\">\n            <div className=\"font-mono text-[10px] uppercase tracking-[0.14em] text-[#6f7a75]\">\n              Selected\n            </div>\n            <div className=\"font-mono text-sm text-[#e8efeb]\">{resolved}</div>\n            {fonts.length > 1 && currentIndex >= 0 ? (\n              <div className=\"font-mono text-xs text-[#6f7a75]\">\n                {currentIndex + 1} / {fonts.length}\n              </div>\n            ) : null}\n          </div>\n        </div>\n\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          <span className=\"font-mono text-[10px] uppercase tracking-[0.12em] text-[#6f7a75]\">\n            Detail panel (example: figlet)\n          </span>\n          {renderDetailPreview ? (\n            renderDetailPreview(resolved, previewText)\n          ) : (\n            <ShowroomFontPreviewPanel font={resolved} text={previewText} />\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "type": "registry:component",
      "path": "kit-showroom.tsx",
      "target": "components/realmorphism/kit/kit-showroom.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Checkbox } from \"@/components/realmorphism/ui/checkbox\";\nimport { Input } from \"@/components/realmorphism/ui/input\";\nimport { Label } from \"@/components/realmorphism/ui/label\";\nimport { Switch } from \"@/components/realmorphism/ui/switch\";\nimport { Toggle } from \"@/components/realmorphism/ui/toggle\";\nimport { KitCompactRollingPickerSection } from \"./kit-compact-rolling-picker-section\";\nimport { KitKnobsSection } from \"./kit-knobs-section\";\nimport {\n  KitShowroomFigletSection,\n  type KitShowroomFigletSectionProps,\n} from \"./kit-showroom-figlet-section\";\nimport {\n  KitTextRollingPickerSection,\n  type KitTextRollingPickerSectionProps,\n} from \"./kit-text-rolling-picker-section\";\nimport type { DemoTextCatalogEntry } from \"@/lib/realmorphism/demo-text-catalog\";\n\nexport type KitInstallCommand = {\n  label: string;\n  command: string;\n};\n\nconst REGISTRY_ITEMS = [\n  {\n    name: \"realmorphism\",\n    type: \"registry:theme\",\n    summary: \"Tokens, color planes, radius, hard wall shadow, and motion CSS.\",\n  },\n  {\n    name: \"realmorphism-base\",\n    type: \"registry:block\",\n    summary: \"Turnkey shadcn wrappers for tactile controls and layout primitives.\",\n  },\n  {\n    name: \"realmorphism-rolling-pickers\",\n    type: \"registry:block\",\n    summary: \"Compact, text, and showroom Y-axis rolling pickers (optional add-on).\",\n  },\n  {\n    name: \"realmorphism-kit\",\n    type: \"registry:block\",\n    summary: \"Full KitShowroom with knobs and all three picker sections.\",\n  },\n  {\n    name: \"realmorphism-site\",\n    type: \"registry:block\",\n    summary: \"Portable /registry page backed by KitShowroom.\",\n  },\n  {\n    name: \"realmorphism (package)\",\n    type: \"npm package\",\n    summary: \"pnpm add realmorphism — same pickers + kit via import (Echo monorepo uses file:../realmorphism).\",\n  },\n] as const;\n\nconst SWATCHES = [\n  [\"Host\", \"#060708\"],\n  [\"Raised\", \"#0e1011\"],\n  [\"Face\", \"#171c19\"],\n  [\"Wall\", \"#2a6b56\"],\n  [\"Hover\", \"#3a9174\"],\n  [\"Amber\", \"#8a6530\"],\n  [\"Signal\", \"#7dffb4\"],\n  [\"Ink\", \"#e8efeb\"],\n] as const;\n\nfunction defaultInstallCommands(origin: string): KitInstallCommand[] {\n  return [\n    { label: \"Theme\", command: `npx shadcn@latest add ${origin}/registry/realmorphism.json` },\n    {\n      label: \"Base controls\",\n      command: `npx shadcn@latest add ${origin}/registry/realmorphism-base.json`,\n    },\n    {\n      label: \"Rolling pickers\",\n      command: `npx shadcn@latest add ${origin}/registry/realmorphism-rolling-pickers.json`,\n    },\n    {\n      label: \"Kit showroom\",\n      command: `npx shadcn@latest add ${origin}/registry/realmorphism-kit.json`,\n    },\n    {\n      label: \"Package (monorepo / npm)\",\n      command: \"pnpm add realmorphism\",\n    },\n  ];\n}\n\nexport type KitShowroomProps = {\n  variant?: \"page\" | \"embedded\";\n  badgeLabel?: string;\n  installCommands?: KitInstallCommand[];\n  showFormControls?: boolean;\n  textCatalog?: DemoTextCatalogEntry[];\n  figlet?: KitShowroomFigletSectionProps;\n};\n\nexport function KitShowroom({\n  variant = \"page\",\n  badgeLabel = \"Realmorphism Registry\",\n  installCommands,\n  showFormControls = false,\n  textCatalog,\n  figlet,\n}: KitShowroomProps) {\n  const isEmbedded = variant === \"embedded\";\n  const [toggleSelected, setToggleSelected] = React.useState(true);\n  const [opsAlert, setOpsAlert] = React.useState(true);\n  const [opsAck, setOpsAck] = React.useState(false);\n  const [opsLatch, setOpsLatch] = React.useState(true);\n\n  const [installOrigin, setInstallOrigin] = React.useState(\"https://your-origin.example\");\n  React.useEffect(() => {\n    setInstallOrigin(`${window.location.origin}`.replace(/\\/$/, \"\"));\n  }, []);\n\n  const commands = installCommands ?? defaultInstallCommands(installOrigin);\n\n  return (\n    <main\n      data-registry-showroom\n      data-deck-mode=\"realmorphism\"\n      className={\n        isEmbedded\n          ? \"theme-realmorphism min-h-0 min-w-0 overflow-x-hidden bg-[#060708] px-3 py-4 text-[#e8efeb] sm:px-4\"\n          : \"theme-realmorphism h-screen overflow-y-auto overflow-x-hidden bg-[#060708] px-4 py-6 text-[#e8efeb] sm:px-6 lg:px-10\"\n      }\n    >\n      <div data-morphism=\"realmorphism\" className=\"mx-auto flex min-w-0 max-w-6xl flex-col gap-8\">\n        <header className=\"grid gap-6 border-b border-[#2a3530] pb-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-end\">\n          <div className=\"space-y-5\">\n            <div className=\"realmorphism-panel inline-flex px-3 py-1 font-mono text-xs uppercase tracking-[0.18em] text-[#7dffb4]\">\n              {badgeLabel}\n            </div>\n            <div className=\"space-y-3\">\n              <h1 className=\"max-w-3xl text-4xl font-semibold tracking-normal text-[#e8efeb] sm:text-6xl\">\n                Realmorphism\n              </h1>\n              <p className=\"max-w-2xl text-base leading-7 text-[#9eada7]\">\n                A blocky tactile shadcn theme for operational interfaces. The colors define the\n                planes; the motion tells the operator an action is available.\n              </p>\n            </div>\n          </div>\n          <div className=\"realmorphism-panel grid gap-3 p-4\">\n            <div className=\"font-mono text-xs uppercase tracking-[0.16em] text-[#9eada7]\">\n              Install\n            </div>\n            {commands.map((item) => (\n              <div key={item.label} className=\"space-y-1\">\n                <div className=\"font-mono text-xs text-[#7dffb4]\">{item.label}</div>\n                <pre className=\"realmorphism-field overflow-x-auto p-3 font-mono text-xs text-[#e8efeb]\">\n                  {item.command}\n                </pre>\n              </div>\n            ))}\n          </div>\n        </header>\n\n        <section className=\"grid gap-4 md:grid-cols-4\">\n          {SWATCHES.map(([label, color]) => (\n            <div key={label} className=\"realmorphism-panel p-3\">\n              <div className=\"mb-3 h-16 border border-[#2a3530]\" style={{ background: color }} />\n              <div className=\"font-mono text-sm text-[#e8efeb]\">{label}</div>\n              <div className=\"font-mono text-xs text-[#6f7a75]\">{color}</div>\n            </div>\n          ))}\n        </section>\n\n        <section className=\"grid gap-6 lg:grid-cols-[0.9fr_1.1fr]\">\n          <div className=\"realmorphism-panel p-5\">\n            <div className=\"mb-5 flex items-center justify-between gap-4\">\n              <div>\n                <h2 className=\"text-xl font-semibold\">Action Surface</h2>\n                <p className=\"mt-1 text-sm text-[#9eada7]\">Hover and press the controls.</p>\n              </div>\n              <span className=\"font-mono text-xs text-[#7dffb4]\">motion = affordance</span>\n            </div>\n            <div className=\"flex flex-wrap gap-4\">\n              <button type=\"button\" className=\"realmorphism-control border px-5 py-3 font-mono text-sm\">\n                Commit\n              </button>\n              <button\n                type=\"button\"\n                aria-pressed={toggleSelected}\n                className=\"realmorphism-control border px-5 py-3 font-mono text-sm\"\n                onClick={() => setToggleSelected((pressed) => !pressed)}\n              >\n                <span className=\"inline-grid text-center\">\n                  <span className=\"invisible col-start-1 row-start-1\" aria-hidden>\n                    Unselected\n                  </span>\n                  <span className=\"col-start-1 row-start-1\">\n                    {toggleSelected ? \"Selected\" : \"Unselected\"}\n                  </span>\n                </span>\n              </button>\n              {showFormControls ? (\n                <Toggle\n                  variant=\"realmorphism\"\n                  size=\"operational\"\n                  pressed={opsLatch}\n                  onPressedChange={setOpsLatch}\n                >\n                  Toggle {opsLatch ? \"ON\" : \"OFF\"}\n                </Toggle>\n              ) : null}\n              <button\n                type=\"button\"\n                className=\"realmorphism-control is-amber border px-5 py-3 font-mono text-sm\"\n              >\n                Caution\n              </button>\n              <button\n                type=\"button\"\n                className=\"realmorphism-control is-critical border px-5 py-3 font-mono text-sm\"\n              >\n                Danger\n              </button>\n              <button\n                type=\"button\"\n                className=\"realmorphism-control border px-4 py-3 font-mono text-sm\"\n                disabled\n              >\n                Disabled\n              </button>\n            </div>\n\n            {showFormControls ? (\n              <div className=\"mt-8 space-y-4 border-t border-[#2a3530] pt-6\">\n                <div className=\"font-mono text-xs uppercase tracking-[0.16em] text-[#9eada7]\">\n                  Form controls\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"ops-unit\" className=\"text-[#9eada7]\">\n                    Unit callback\n                  </Label>\n                  <Input id=\"ops-unit\" placeholder=\"4B // water through ceiling\" />\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <Switch id=\"ops-alert\" checked={opsAlert} onCheckedChange={setOpsAlert} />\n                  <Label htmlFor=\"ops-alert\" className=\"text-[#9eada7]\">\n                    Emergency alert lane\n                  </Label>\n                </div>\n                <div className=\"flex items-center gap-3\">\n                  <Checkbox\n                    id=\"ops-ack\"\n                    checked={opsAck}\n                    onCheckedChange={(value) => setOpsAck(value === true)}\n                  />\n                  <Label htmlFor=\"ops-ack\" className=\"text-[#9eada7]\">\n                    Acknowledge draft ticket\n                  </Label>\n                </div>\n              </div>\n            ) : null}\n          </div>\n\n          <div className=\"grid gap-3\">\n            {REGISTRY_ITEMS.map((item) => (\n              <article key={item.name} className=\"realmorphism-panel grid gap-2 p-4\">\n                <div className=\"flex flex-wrap items-center justify-between gap-3\">\n                  <div className=\"font-mono text-lg text-[#e8efeb]\">{item.name}</div>\n                  <div className=\"font-mono text-xs uppercase tracking-[0.14em] text-[#7dffb4]\">\n                    {item.type}\n                  </div>\n                </div>\n                <p className=\"text-sm leading-6 text-[#9eada7]\">{item.summary}</p>\n              </article>\n            ))}\n          </div>\n        </section>\n\n        <KitKnobsSection />\n        <KitCompactRollingPickerSection />\n        <KitTextRollingPickerSection catalog={textCatalog} />\n        <KitShowroomFigletSection {...figlet} />\n\n        <section className=\"realmorphism-panel p-5\">\n          <h2 className=\"mb-3 text-xl font-semibold\">Community Upload Notes</h2>\n          <p className=\"max-w-3xl text-sm leading-6 text-[#9eada7]\">\n            Tweakcn can carry the Realmorphism colors and tokens. The shadcn registry carries the\n            installable part: theme JSON, wrappers, and this showroom page. Publish the colors on\n            tweakcn, then point builders to this registry when they need the full motion layer.\n          </p>\n        </section>\n      </div>\n    </main>\n  );\n}\n\nexport type { KitTextRollingPickerSectionProps, KitShowroomFigletSectionProps };\n"
    },
    {
      "type": "registry:lib",
      "path": "index.ts",
      "target": "components/realmorphism/index.ts",
      "content": "export { DocTypeRollingPicker } from \"./doc-type-rolling-picker\";\nexport { TextRollingPicker } from \"./text-rolling-picker\";\nexport {\n  ShowroomFontPicker,\n  type ShowroomFontWheelPreviewRender,\n} from \"./showroom-font-picker\";\nexport { ShowroomFontPreviewSlide } from \"./showroom-font-preview-slide\";\nexport { ShowroomFontPreviewPanel } from \"./showroom-font-preview-panel\";\nexport {\n  RollingPicker,\n  type RollingPickerItem,\n  type RollingPickerProps,\n} from \"./ui/rolling-picker\";\nexport { KitShowroom, type KitShowroomProps, type KitInstallCommand } from \"./kit/kit-showroom\";\nexport { KitCompactRollingPickerSection } from \"./kit/kit-compact-rolling-picker-section\";\nexport {\n  KitTextRollingPickerSection,\n  type KitTextRollingPickerSectionProps,\n} from \"./kit/kit-text-rolling-picker-section\";\nexport {\n  KitShowroomFigletSection,\n  type KitShowroomFigletSectionProps,\n} from \"./kit/kit-showroom-figlet-section\";\nexport { KitKnobsSection } from \"./kit/kit-knobs-section\";\nexport {\n  catalogToRollingItems,\n  resolveCatalogPickerValue,\n  rollingPickerLayoutForMode,\n  type CatalogToRollingItemsOptions,\n  type RollingPickerRowMode,\n} from \"@/lib/realmorphism/catalog-to-rolling-items\";\nexport {\n  DEMO_TEXT_CATALOG,\n  resolveDemoTextValue,\n  type DemoTextCatalogEntry,\n} from \"@/lib/realmorphism/demo-text-catalog\";\nexport {\n  DEMO_FIGLET_FONTS,\n  DEFAULT_DEMO_FIGLET_FONT,\n  resolveDemoFigletValue,\n} from \"@/lib/realmorphism/demo-figlet-catalog\";\n"
    }
  ],
  "meta": {
    "installNote": "Requires realmorphism theme, base wrappers, and rolling pickers registry items.",
    "components": [
      "KitShowroom"
    ]
  }
}