{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typer",
  "title": "Typer",
  "description": "A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. Adjacent same-state chars merge into rounded bars, and it's themed entirely through CSS variables.",
  "dependencies": [],
  "registryDependencies": ["utils"],
  "files": [
    {
      "path": "registry/primitives/texts/typer/index.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ElementType,\n  type MouseEvent,\n  type Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nconst REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\n\n// Run the reveal setup before browser paints so un-hidden text is never\n// flashed; falls back to useEffect during SSR where layout effects warn.\nconst useIsomorphicLayoutEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n// ── math helpers ──\nconst clamp = (v: number, lo: number, hi: number) =>\n  Math.min(Math.max(v, lo), hi);\n\nconst roundToStep = (v: number, step: number) => Math.round(v / step) * step;\n\nconst remap = (\n  v: number,\n  inLo: number,\n  inHi: number,\n  outLo: number,\n  outHi: number\n) => ((v - inLo) * (outHi - outLo)) / (inHi - inLo) + outLo;\n\nfunction bezierEase(\n  x: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n  eps = 1e-6\n): number {\n  const bx = (t: number) =>\n    3 * (1 - t) ** 2 * t * x1 + 3 * (1 - t) * t ** 2 * x2 + t ** 3;\n  const by = (t: number) =>\n    3 * (1 - t) ** 2 * t * y1 + 3 * (1 - t) * t ** 2 * y2 + t ** 3;\n  const bxDeriv = (t: number) =>\n    3 * (1 - t) ** 2 * x1 + 6 * (1 - t) * t * (x2 - x1) + 3 * t ** 2 * (1 - x2);\n\n  let t = x;\n  for (let i = 0; i < 8; i++) {\n    const dx = bx(t) - x;\n    if (Math.abs(dx) < eps) {\n      return by(t);\n    }\n    const d = bxDeriv(t);\n    if (Math.abs(d) < 1e-6) {\n      break;\n    }\n    t -= dx / d;\n  }\n  let lo = 0;\n  let hi = 1;\n  t = x;\n  while (lo < hi) {\n    const cx = bx(t);\n    if (Math.abs(cx - x) < eps) {\n      return by(t);\n    }\n    if (cx < x) {\n      lo = t;\n    } else {\n      hi = t;\n    }\n    t = (lo + hi) / 2;\n  }\n  return by(t);\n}\n\nexport const ALL_VARIATIONS = [\n  \"charFill\",\n  \"charInverse\",\n  \"charAccent\",\n  \"charAccentInverse\",\n  \"charAccentFill\",\n  \"charBorder\",\n] as const;\n\nexport const DEFAULT_VARIATIONS = ALL_VARIATIONS;\n\nexport type TyperVariation = (typeof ALL_VARIATIONS)[number];\n\nexport type TyperType = \"initial\" | \"in\" | \"out\" | \"inout\" | \"done\";\n\ninterface TyperOptions {\n  cycleLength?: number;\n  cycles?: number;\n  delay?: number;\n  fps?: number;\n  initVisible?: boolean;\n  onComplete?: () => void;\n  variations?: TyperVariation[];\n}\n\ninterface CharNode {\n  cp: number;\n  currentClass: string;\n  el: HTMLSpanElement;\n}\n\nconst WHITESPACE_SPLIT_RE = /(\\s+)/;\nconst WHITESPACE_RE = /\\s/g;\nconst SPACE_REPLACE_RE = / /g;\n\nclass TyperEngine {\n  private readonly element: HTMLElement;\n  private source: string;\n  private length: number;\n  private readonly fps: number;\n  private readonly cycles: number;\n  private readonly cycleLength: number;\n  private frames: number;\n  private frame = 0;\n  private loop: number | null = null;\n  private readonly delay: number;\n  private delayTimer: number | null = null;\n  private charNodes: CharNode[] = [];\n  private type: TyperType = \"initial\";\n  private divisor: number;\n  private denominator: number;\n  private readonly variations: TyperVariation[];\n  private readonly initVisible: boolean;\n  private readonly onComplete?: () => void;\n\n  constructor(element: HTMLElement, opts: TyperOptions = {}) {\n    this.element = element;\n    this.source = element.textContent || \"\";\n    this.length = this.source.replace(WHITESPACE_RE, \"\").length;\n    this.fps = opts.fps ?? 20;\n    this.cycles = opts.cycles ?? 3;\n    this.cycleLength = opts.cycleLength ?? 0.5;\n    this.frames = this.length ? this.fps * (1 + this.length * 0.01) : 0;\n    this.delay = opts.delay ?? 0;\n    this.divisor = this.length > 1 ? this.length - 1 : 1;\n    this.denominator = this.frames - this.frames * this.cycleLength || 1;\n    this.onComplete = opts.onComplete;\n\n    this.variations = (opts.variations ?? [...ALL_VARIATIONS]).slice();\n    this.shuffle();\n    this.initVisible = opts.initVisible ?? false;\n\n    if (this.length) {\n      this.build();\n      if (this.initVisible) {\n        for (const n of this.charNodes) {\n          this.setClass(n, \"char\");\n        }\n        this.type = \"done\";\n        this.element.dataset.typerType = \"done\";\n      } else {\n        this.applyFrame();\n        this.element.dataset.typerType = \"initial\";\n      }\n    }\n  }\n\n  private build() {\n    this.element.replaceChildren();\n    this.charNodes = [];\n    const parts = this.source.split(WHITESPACE_SPLIT_RE);\n    let i = 0;\n    for (const part of parts) {\n      if (part.trim() === \"\") {\n        const space = document.createElement(\"span\");\n        space.className = \"space\";\n        space.textContent = part.replace(SPACE_REPLACE_RE, \"\\u00A0\");\n        this.element.appendChild(space);\n        continue;\n      }\n      const word = document.createElement(\"span\");\n      word.className = \"word\";\n      for (const ch of part.split(\"\")) {\n        const pos = i / this.divisor;\n        const cp = roundToStep(bezierEase(pos, 0, 0.75, 0.75, 0), 0.05);\n        const span = document.createElement(\"span\");\n        span.className = \"char charInit\";\n        span.textContent = ch === \" \" ? \"\\u00A0\" : ch;\n        this.charNodes.push({ el: span, cp, currentClass: \"char charInit\" });\n        i += 1;\n        word.appendChild(span);\n      }\n      this.element.appendChild(word);\n    }\n  }\n\n  in() {\n    this.setType(\"in\");\n  }\n\n  out() {\n    this.setType(\"out\");\n  }\n\n  inOut() {\n    this.setType(\"inout\");\n  }\n\n  getType(): TyperType {\n    return this.type;\n  }\n\n  reset(newSource?: string) {\n    this.stopLoop();\n    if (newSource !== undefined && newSource !== this.source) {\n      this.source = newSource;\n      this.length = this.source.replace(WHITESPACE_RE, \"\").length;\n      this.frames = this.length ? this.fps * (1 + this.length * 0.01) : 0;\n      this.divisor = this.length > 1 ? this.length - 1 : 1;\n      this.denominator = this.frames - this.frames * this.cycleLength || 1;\n      this.build();\n    }\n    this.frame = 0;\n    this.type = \"initial\";\n    this.element.dataset.typerType = \"initial\";\n    this.applyFrame();\n  }\n\n  private setType(t: TyperType) {\n    if (t === this.type && t !== \"inout\") {\n      return;\n    }\n    this.type = t;\n    this.element.dataset.typerType = t;\n    this.stopLoop();\n    this.frame = 0;\n    this.applyFrame();\n    if (t !== \"initial\" && this.charNodes.length) {\n      this.startLoop();\n    }\n  }\n\n  private startLoop() {\n    if (this.loop || this.delayTimer || !this.charNodes.length) {\n      return;\n    }\n    if (this.type === \"initial\") {\n      return;\n    }\n    this.shuffle();\n    const begin = () => {\n      this.delayTimer = null;\n      if (this.loop || this.type === \"initial\") {\n        return;\n      }\n      this.applyFrame();\n      this.loop = window.setInterval(() => this.tick(), 1000 / this.fps);\n    };\n    if (this.delay > 0) {\n      this.delayTimer = window.setTimeout(begin, this.delay * 1000);\n    } else {\n      begin();\n    }\n  }\n\n  private stopLoop() {\n    if (this.delayTimer) {\n      window.clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n    if (this.loop) {\n      window.clearInterval(this.loop);\n      this.loop = null;\n    }\n  }\n\n  private tick() {\n    const total = this.type === \"inout\" ? this.frames * 2 : this.frames;\n    this.frame += 1;\n    this.frame = clamp(this.frame, 0, total);\n    this.applyFrame();\n    if (this.frame >= total) {\n      this.stopLoop();\n      const finalType = this.type === \"out\" ? \"initial\" : \"done\";\n      this.type = finalType;\n      this.element.dataset.typerType = finalType;\n      this.onComplete?.();\n    }\n  }\n\n  private resolveClass(phase: TyperType, p: number) {\n    if (phase === \"in\") {\n      if (p <= 0) {\n        return \"char charInit\";\n      }\n      if (p >= 1) {\n        return \"char\";\n      }\n    } else {\n      if (p <= 0) {\n        return \"char\";\n      }\n      if (p >= 1) {\n        return \"char charInit\";\n      }\n    }\n    const idx = Math.round(remap(p, 0, 1, 0, this.cycles));\n    const variation =\n      this.variations[idx % this.variations.length] ?? \"charInit\";\n    return variation ? `char ${variation}` : \"char\";\n  }\n\n  private applyFrame() {\n    if (!(this.length && this.charNodes.length)) {\n      return;\n    }\n    if (this.type === \"initial\") {\n      for (const n of this.charNodes) {\n        this.setClass(n, \"char charInit\");\n      }\n      return;\n    }\n    let phase: TyperType = this.type;\n    if (this.type === \"inout\") {\n      phase = this.frame > this.frames ? \"out\" : \"in\";\n    }\n    const rawFrame =\n      this.type === \"inout\" && phase === \"out\"\n        ? this.frame - this.frames\n        : this.frame;\n    const progress = rawFrame / this.denominator;\n\n    for (const node of this.charNodes) {\n      let p = progress - node.cp;\n      p = roundToStep(p, 0.1);\n      p = clamp(p, 0, 1);\n      this.setClass(node, this.resolveClass(phase, p));\n    }\n  }\n\n  private setClass(node: CharNode, cls: string) {\n    if (cls === node.currentClass) {\n      return;\n    }\n    node.currentClass = cls;\n    node.el.className = cls;\n  }\n\n  private shuffle() {\n    this.variations.sort(() => 0.5 - Math.random());\n  }\n\n  destroy() {\n    this.stopLoop();\n    this.element.textContent = this.source;\n    this.element.removeAttribute(\"data-typer-type\");\n  }\n}\n\nclass TyperGroup {\n  private readonly typers: TyperEngine[];\n\n  constructor(\n    elements: HTMLElement[],\n    opts: Omit<TyperOptions, \"delay\"> = {},\n    stagger = 0.15\n  ) {\n    this.typers = elements.map(\n      (el, i) => new TyperEngine(el, { ...opts, delay: i * stagger })\n    );\n  }\n\n  in() {\n    for (const t of this.typers) {\n      t.in();\n    }\n  }\n\n  out() {\n    for (const t of this.typers) {\n      t.out();\n    }\n  }\n\n  inOut() {\n    for (const t of this.typers) {\n      t.inOut();\n    }\n  }\n\n  getType(): TyperType {\n    return this.typers[0]?.getType() ?? \"initial\";\n  }\n\n  reset(newLines?: string[]) {\n    for (let i = 0; i < this.typers.length; i++) {\n      this.typers[i]?.reset(newLines?.[i]);\n    }\n  }\n\n  destroy() {\n    for (const t of this.typers) {\n      t.destroy();\n    }\n  }\n}\n\nconst STYLE_ID = \"sora-typer-styles\";\n\nconst TYPER_CSS = `\n[data-typer] {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n[data-typer][data-typer-type=\"initial\"] { opacity: 0; }\n[data-typer] .word {\n  white-space: pre;\n  display: inline-block;\n}\n[data-typer] .space {\n  white-space: pre;\n  display: inline-block;\n  flex-shrink: 0;\n  width: var(--typer-space-width, 0.5em);\n}\n[data-typer] .word .char {\n  box-sizing: content-box;\n  display: inline-block;\n  color: var(--typer-fg, var(--foreground, currentColor));\n  background: transparent;\n  transition: none;\n}\n[data-typer] .word .char.charInit { color: transparent !important; }\n[data-typer] .word .char.charFill {\n  color: var(--typer-bg, var(--background, #000));\n  background: var(--typer-fg, var(--foreground, currentColor));\n  border-radius: var(--typer-radius, 5px);\n}\n[data-typer] .word .char.charFill:has(+ .charFill) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n[data-typer] .word .char.charFill + .charFill { border-radius: 0; }\n[data-typer] .word .char.charFill + .charFill:last-child,\n[data-typer] .word .char.charFill + .charFill:has(+ :not(.charFill)) {\n  border-radius: 0 var(--typer-radius, 5px) var(--typer-radius, 5px) 0;\n}\n[data-typer] .word .char.charInverse {\n  color: var(--typer-bg, var(--background, #000));\n  background: var(--typer-fg, var(--foreground, currentColor));\n}\n[data-typer] .word .char.charAccent {\n  color: var(--typer-accent-fg, var(--typer-fg, var(--foreground, currentColor)));\n  background: var(--typer-accent, var(--accent, #0044ff));\n  border-radius: var(--typer-radius, 5px);\n}\n[data-typer] .word .char.charAccent:has(+ .charAccent) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n[data-typer] .word .char.charAccent + .charAccent { border-radius: 0; }\n[data-typer] .word .char.charAccent + .charAccent:last-child,\n[data-typer] .word .char.charAccent + .charAccent:has(+ :not(.charAccent)) {\n  border-radius: 0 var(--typer-radius, 5px) var(--typer-radius, 5px) 0;\n}\n[data-typer] .word .char.charAccentInverse {\n  color: var(--typer-accent-ink, var(--typer-bg, var(--background, #000)));\n  background: var(--typer-accent, var(--accent, #0044ff));\n  border-radius: var(--typer-radius, 5px);\n}\n[data-typer] .word .char.charAccentInverse:has(+ .charAccentInverse) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n[data-typer] .word .char.charAccentInverse + .charAccentInverse { border-radius: 0; }\n[data-typer] .word .char.charAccentInverse + .charAccentInverse:last-child,\n[data-typer] .word .char.charAccentInverse + .charAccentInverse:has(+ :not(.charAccentInverse)) {\n  border-radius: 0 var(--typer-radius, 5px) var(--typer-radius, 5px) 0;\n}\n[data-typer] .word .char.charAccentFill {\n  color: var(--typer-accent, var(--accent, #0044ff));\n  background: var(--typer-accent, var(--accent, #0044ff));\n  border-radius: var(--typer-radius, 5px);\n}\n[data-typer] .word .char.charAccentFill:has(+ .charAccentFill) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n[data-typer] .word .char.charAccentFill + .charAccentFill { border-radius: 0; }\n[data-typer] .word .char.charAccentFill + .charAccentFill:last-child,\n[data-typer] .word .char.charAccentFill + .charAccentFill:has(+ :not(.charAccentFill)) {\n  border-radius: 0 var(--typer-radius, 5px) var(--typer-radius, 5px) 0;\n}\n[data-typer] .word .char.charBorder {\n  position: relative;\n  color: var(--typer-fg, var(--foreground, currentColor));\n}\n[data-typer] .word .char.charBorder::after {\n  content: \"\";\n  display: inline-block;\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--typer-border, var(--typer-fg, var(--foreground, currentColor)));\n  border-radius: var(--typer-radius, 5px);\n  box-sizing: border-box;\n}\n[data-typer] .word .char.charBorder:has(+ .charBorder)::after {\n  border-right: 1px solid transparent;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n[data-typer] .word .char.charBorder + .charBorder::after {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-radius: 0;\n}\n[data-typer] .word .char.charBorder + .charBorder:last-child::after,\n[data-typer] .word .char.charBorder + .charBorder:has(+ :not(.charBorder))::after {\n  border-left: 1px solid transparent;\n  border-right: 1px solid var(--typer-border, var(--typer-fg, var(--foreground, currentColor)));\n  border-radius: 0 var(--typer-radius, 5px) var(--typer-radius, 5px) 0;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-typer][data-typer-type=\"initial\"] { opacity: 1; }\n  [data-typer] .word .char.charInit { color: var(--typer-fg, var(--foreground, currentColor)); }\n}\n`;\n\nfunction ensureTyperStyles() {\n  if (typeof document === \"undefined\") {\n    return;\n  }\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement(\"style\");\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n  style.textContent = TYPER_CSS;\n}\n\nfunction dispatchGroupTrigger(\n  group: TyperGroup,\n  trigger: \"in\" | \"out\" | \"inout\"\n) {\n  if (trigger === \"in\") {\n    group.in();\n  } else if (trigger === \"out\") {\n    group.out();\n  } else if (trigger === \"inout\") {\n    group.inOut();\n  }\n}\n\nexport interface TyperHandle {\n  /** Gets current TyperType state. */\n  getType: () => TyperType;\n  /** Runs the reveal in phase (alias for play). */\n  in: () => void;\n  /** Runs the reveal in phase followed by the out phase. */\n  inOut: () => void;\n  /** Runs the reveal in reverse, clearing the text back out. */\n  out: () => void;\n  /** Reveals the text (in phase). Ignores startOnView gating. */\n  play: () => void;\n  /** Restarts the reveal from the beginning. */\n  replay: () => void;\n  /** Resets state with optional new text. */\n  reset: (newText?: string | string[]) => void;\n  /** Alias for in(). */\n  triggerIn: () => void;\n  /** Alias for inOut(). */\n  triggerInOut: () => void;\n  /** Alias for out(). */\n  triggerOut: () => void;\n}\n\nexport type TyperRef = TyperHandle;\n\nexport interface TyperProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"color\"> {\n  /** Accent surface color (accent pills and borders). Maps to `--typer-accent`. */\n  accent?: string;\n  /** Text color sitting on an accent fill. Maps to `--typer-accent-ink`. */\n  accentInk?: string;\n  /** Render as a different element instead of `div`. @default \"div\" */\n  as?: ElementType;\n  /** Knockout / page color inside filled pills. Maps to `--typer-bg`. @default theme `--background` */\n  bg?: string;\n  /** Color for charBorder border. Maps to `--typer-border`. @default theme `--foreground` */\n  border?: string;\n  /** Children string fallback if text prop is omitted. */\n  children?: string;\n  /** Cycle length multiplier. @default 0.5 */\n  cycleLength?: number;\n  /** How many random states each char rolls through before settling. @default 3 */\n  cycles?: number;\n  /** Delay in seconds before starting animation. @default 0 */\n  delay?: number;\n  /** Base ink color (plain letters, ink pills). Maps to `--typer-fg`. @default theme `--foreground` */\n  fg?: string;\n  /** Frames per second of the reveal loop. @default 20 */\n  fps?: number;\n  /** Initial visibility. If true, starts directly in \"done\" state. @default false */\n  initVisible?: boolean;\n  /** Callback when the reveal animation completes. */\n  onComplete?: () => void;\n  /** Corner radius of merged pills. Maps to `--typer-radius`. @default \"5px\" */\n  radius?: string;\n  /** Imperative handle exposing play / replay / in / out / inOut / reset. */\n  ref?: Ref<TyperHandle>;\n  /** Custom space width between words. Maps to `--typer-space-width`. @default \"0.5em\" */\n  spaceWidth?: string;\n  /** Seconds between consecutive lines cascading in. @default 0.15 */\n  stagger?: number;\n  /** Wait until scrolled into view before revealing. Ignored if trigger is provided. @default true */\n  startOnView?: boolean;\n  /** Text to reveal. Pass an array to render one cascading line per string. */\n  text?: string | string[];\n  /** Declarative trigger to transition \"in\", \"out\", or \"inout\". */\n  trigger?: \"in\" | \"out\" | \"inout\";\n  /** Trigger animation on mouse hover. @default false */\n  triggerOnHover?: boolean;\n  /** Trigger animation automatically on mount. @default true */\n  triggerOnMount?: boolean;\n  /** Which visual states each char rolls through. @default all six variations */\n  variations?: TyperVariation[];\n}\n\nexport function Typer({\n  accent,\n  accentInk,\n  as: Component = \"div\",\n  bg,\n  border,\n  children,\n  className,\n  cycleLength = 0.5,\n  cycles = 3,\n  delay = 0,\n  fg,\n  fps = 20,\n  initVisible = false,\n  onComplete,\n  radius,\n  ref,\n  spaceWidth,\n  stagger = 0.15,\n  startOnView = true,\n  style,\n  text: textProp,\n  trigger,\n  triggerOnHover = false,\n  triggerOnMount = true,\n  variations,\n  ...props\n}: TyperProps) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const groupRef = useRef<TyperGroup | null>(null);\n\n  const [reducedMotion, setReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") {\n      return;\n    }\n    const mql = window.matchMedia(REDUCED_MOTION_QUERY);\n    setReducedMotion(mql.matches);\n    const onChange = (e: MediaQueryListEvent) => setReducedMotion(e.matches);\n    mql.addEventListener(\"change\", onChange);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  const rawText = textProp ?? (typeof children === \"string\" ? children : \"\");\n  const lines = useMemo(\n    () => (Array.isArray(rawText) ? rawText : [rawText]),\n    [rawText]\n  );\n\n  const customStyles = useMemo(() => {\n    const s: Record<string, string> = {};\n    if (fg) {\n      s[\"--typer-fg\"] = fg;\n    }\n    if (bg) {\n      s[\"--typer-bg\"] = bg;\n    }\n    if (accent) {\n      s[\"--typer-accent\"] = accent;\n    }\n    if (accentInk) {\n      s[\"--typer-accent-ink\"] = accentInk;\n    }\n    if (border) {\n      s[\"--typer-border\"] = border;\n    }\n    if (radius) {\n      s[\"--typer-radius\"] = radius;\n    }\n    if (spaceWidth) {\n      s[\"--typer-space-width\"] = spaceWidth;\n    }\n    return { ...s, ...style } as CSSProperties;\n  }, [fg, bg, accent, accentInk, border, radius, spaceWidth, style]);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getType: () => groupRef.current?.getType() ?? \"initial\",\n      in: () => groupRef.current?.in(),\n      inOut: () => groupRef.current?.inOut(),\n      out: () => groupRef.current?.out(),\n      play: () => groupRef.current?.in(),\n      replay: () => groupRef.current?.in(),\n      reset: (newText?: string | string[]) => {\n        if (newText === undefined) {\n          groupRef.current?.reset();\n        } else {\n          const newLines = Array.isArray(newText) ? newText : [newText];\n          groupRef.current?.reset(newLines);\n        }\n      },\n      triggerIn: () => groupRef.current?.in(),\n      triggerInOut: () => groupRef.current?.inOut(),\n      triggerOut: () => groupRef.current?.out(),\n    }),\n    []\n  );\n\n  const variationsKey = variations ? variations.join(\",\") : \"\";\n  // biome-ignore lint/correctness/useExhaustiveDependencies: serialized variationsKey ensures stable array reference\n  const stableVariations = useMemo(() => variations, [variationsKey]);\n\n  const prevTriggerRef = useRef(trigger);\n\n  useIsomorphicLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root) {\n      return;\n    }\n\n    ensureTyperStyles();\n\n    const lineEls = Array.from(\n      root.querySelectorAll<HTMLElement>(\"[data-typer]\")\n    );\n    if (!lineEls.length) {\n      return;\n    }\n\n    for (const el of lineEls) {\n      el.style.removeProperty(\"opacity\");\n    }\n\n    let group: TyperGroup | null = null;\n    let observer: IntersectionObserver | null = null;\n\n    const teardown = () => {\n      observer?.disconnect();\n      observer = null;\n      group?.destroy();\n      group = null;\n      groupRef.current = null;\n    };\n\n    const setup = () => {\n      group = new TyperGroup(\n        lineEls,\n        {\n          cycleLength,\n          cycles,\n          fps,\n          initVisible: reducedMotion || initVisible,\n          onComplete,\n          variations: stableVariations,\n        },\n        stagger\n      );\n      groupRef.current = group;\n      prevTriggerRef.current = trigger;\n\n      if (reducedMotion || initVisible) {\n        return;\n      }\n\n      if (trigger) {\n        dispatchGroupTrigger(group, trigger);\n        return;\n      }\n\n      if (startOnView) {\n        observer = new IntersectionObserver(\n          (entries) => {\n            for (const entry of entries) {\n              if (entry.isIntersecting) {\n                group?.in();\n                observer?.disconnect();\n                observer = null;\n              }\n            }\n          },\n          { threshold: 0.2 }\n        );\n        observer.observe(root);\n        return;\n      }\n\n      if (triggerOnMount) {\n        group.in();\n      }\n    };\n\n    setup();\n    return teardown;\n  }, [\n    lines,\n    fps,\n    cycles,\n    cycleLength,\n    stagger,\n    startOnView,\n    triggerOnMount,\n    initVisible,\n    onComplete,\n    reducedMotion,\n    stableVariations,\n  ]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTriggerRef.current === trigger) {\n      return;\n    }\n    prevTriggerRef.current = trigger;\n    if (groupRef.current && trigger && !reducedMotion) {\n      dispatchGroupTrigger(groupRef.current, trigger);\n    }\n  }, [trigger, reducedMotion]);\n\n  const handleMouseEnter = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      props.onMouseEnter?.(e);\n      if (triggerOnHover && !reducedMotion) {\n        groupRef.current?.inOut();\n      }\n    },\n    [props.onMouseEnter, triggerOnHover, reducedMotion]\n  );\n\n  return (\n    <Component\n      className={cn(\"inline-flex flex-col\", className)}\n      onMouseEnter={handleMouseEnter}\n      ref={rootRef}\n      style={customStyles}\n      {...props}\n    >\n      {lines.map((line) => (\n        <span\n          data-typer=\"\"\n          data-typer-type={reducedMotion || initVisible ? \"done\" : \"initial\"}\n          key={line}\n          style={{\n            display: \"inline-flex\",\n            flexWrap: \"wrap\",\n            opacity: reducedMotion || initVisible ? 1 : 0,\n          }}\n        >\n          {line}\n        </span>\n      ))}\n    </Component>\n  );\n}\n\nexport default Typer;\n",
      "type": "registry:ui",
      "target": "components/sora-ui/texts/typer.tsx"
    }
  ],
  "type": "registry:ui"
}