{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "url-input",
  "type": "registry:ui",
  "title": "URL Input",
  "description": "iOS 26 liquid-glass URL input with live favicon preview, protocol hint, and globe fallback icon.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/url-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion } from \"motion/react\";\n\n/* ── sound ── */\nlet _a: AudioContext, _b: AudioBuffer;\nconst tick = () => {\n  if (typeof window === \"undefined\") return;\n  if (!_a) {\n    _a = new AudioContext();\n    _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate);\n    const d = _b.getChannelData(0);\n    for (let i = 0; i < d.length; i++)\n      d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4;\n  }\n  const s = _a.createBufferSource();\n  s.buffer = _b;\n  const g = _a.createGain();\n  g.gain.value = 0.08;\n  s.connect(g).connect(_a.destination);\n  s.start();\n};\n\n/* ── theme ── */\nconst CSS = `\n.ul{\n  --ul-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));\n  --ul-border:rgba(0,0,0,0.06);\n  --ul-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8);\n  --ul-dim:rgba(0,0,0,0.42);\n  --ul-mid:rgba(0,0,0,0.55);\n  --ul-hi:rgba(0,0,0,0.88);\n  --ul-focus:rgba(0,0,0,0.12);\n  --ul-icon-bg:rgba(0,0,0,0.04);\n  --ul-icon-border:rgba(0,0,0,0.06)\n}\n.dark .ul,[data-theme=\"dark\"] .ul{\n  --ul-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));\n  --ul-border:rgba(255,255,255,0.07);\n  --ul-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);\n  --ul-dim:rgba(255,255,255,0.28);\n  --ul-mid:rgba(255,255,255,0.5);\n  --ul-hi:rgba(255,255,255,0.88);\n  --ul-focus:rgba(255,255,255,0.12);\n  --ul-icon-bg:rgba(255,255,255,0.04);\n  --ul-icon-border:rgba(255,255,255,0.06)\n}`;\n\n/* ── types ── */\ninterface UrlInputProps {\n  label?: string;\n  placeholder?: string;\n  defaultValue?: string;\n  hint?: string;\n  onChange?: (url: string) => void;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\n/* ── component ── */\nexport default function UrlInput({\n  label = \"Website URL\",\n  placeholder = \"example.com\",\n  defaultValue = \"\",\n  hint,\n  onChange,\n  sound = true,\n  style,\n}: UrlInputProps) {\n  const [url, setUrl] = React.useState(defaultValue);\n  const [favicon, setFavicon] = React.useState<string | null>(null);\n  const [faviconOk, setFaviconOk] = React.useState(false);\n  const [focused, setFocused] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    if (!url) {\n      setFavicon(null);\n      setFaviconOk(false);\n      return;\n    }\n    try {\n      const parsed = new URL(url.startsWith(\"http\") ? url : `https://${url}`);\n      setFavicon(`${parsed.origin}/favicon.ico`);\n      setFaviconOk(false);\n    } catch {\n      setFavicon(null);\n      setFaviconOk(false);\n    }\n  }, [url]);\n\n  const handleFocus = () => {\n    setFocused(true);\n    if (sound) tick();\n  };\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.div\n        className=\"ul\"\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}\n        style={{\n          display: \"inline-flex\",\n          flexDirection: \"column\",\n          gap: 6,\n          ...style,\n        }}\n      >\n        {label && (\n          <span\n            style={{\n              fontSize: 11,\n              fontWeight: 500,\n              letterSpacing: \"0.06em\",\n              textTransform: \"uppercase\" as const,\n              color: \"var(--ul-dim)\",\n              userSelect: \"none\" as const,\n              paddingLeft: 4,\n            }}\n          >\n            {label}\n          </span>\n        )}\n\n        {/* glass field */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 12,\n            padding: \"0 14px\",\n            borderRadius: 12,\n            background: \"var(--ul-glass)\",\n            border: `1px solid ${focused ? \"var(--ul-focus)\" : \"var(--ul-border)\"}`,\n            boxShadow: \"var(--ul-shadow)\",\n            backdropFilter: \"blur(24px)\",\n            WebkitBackdropFilter: \"blur(24px)\",\n            transition: \"border-color 0.2s\",\n            cursor: \"text\",\n          }}\n          onClick={() => inputRef.current?.focus()}\n        >\n          {/* favicon / globe */}\n          <div\n            style={{\n              width: 26,\n              height: 26,\n              borderRadius: 6,\n              background: \"var(--ul-icon-bg)\",\n              border: \"1px solid var(--ul-icon-border)\",\n              overflow: \"hidden\",\n              flexShrink: 0,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n            }}\n          >\n            {favicon ? (\n              <img\n                src={favicon}\n                alt=\"\"\n                width={18}\n                height={18}\n                style={{\n                  width: 18,\n                  height: 18,\n                  borderRadius: 3,\n                  opacity: faviconOk ? 1 : 0,\n                  transition: \"opacity 0.3s\",\n                }}\n                onLoad={() => setFaviconOk(true)}\n                onError={() => {\n                  setFavicon(null);\n                  setFaviconOk(false);\n                }}\n              />\n            ) : null}\n            {(!favicon || !faviconOk) && (\n              <svg\n                width={14}\n                height={14}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"var(--ul-dim)\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <circle cx=\"8\" cy=\"8\" r=\"6\" />\n                <path d=\"M2 8h12\" />\n                <path d=\"M8 2c2 2 3 4 3 6s-1 4-3 6\" />\n                <path d=\"M8 2c-2 2-3 4-3 6s1 4 3 6\" />\n              </svg>\n            )}\n          </div>\n\n          {/* protocol hint */}\n          <span\n            style={{\n              fontSize: 13,\n              color: \"var(--ul-dim)\",\n              userSelect: \"none\" as const,\n              flexShrink: 0,\n            }}\n          >\n            https://\n          </span>\n\n          {/* input */}\n          <input\n            ref={inputRef}\n            type=\"text\"\n            value={url}\n            onChange={(e) => {\n              setUrl(e.target.value);\n              onChange?.(e.target.value);\n            }}\n            onFocus={handleFocus}\n            onBlur={() => setFocused(false)}\n            placeholder={placeholder}\n            style={{\n              flex: 1,\n              height: 48,\n              background: \"transparent\",\n              border: \"none\",\n              outline: \"none\",\n              fontSize: 14,\n              color: \"var(--ul-hi)\",\n              minWidth: 0,\n            }}\n          />\n        </div>\n\n        {hint && (\n          <span\n            style={{\n              fontSize: 11,\n              color: \"var(--ul-dim)\",\n              paddingLeft: 4,\n            }}\n          >\n            {hint}\n          </span>\n        )}\n      </motion.div>\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/url-input.tsx"
    }
  ]
}