@refraction-ui/astro 0.3.1 → 0.4.2

package/dist/astro-tabs/Tabs.astro

@@ -0,0 +1,96 @@
+---
+import { createTabs } from '@refraction-ui/tabs'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  defaultValue?: string
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const { defaultValue = '', orientation = 'horizontal', class: className, ...props } = Astro.props
+const api = createTabs({ value: defaultValue, orientation })
+---
+
+<div
+  data-orientation={orientation}
+  data-rfr-tabs
+  data-rfr-tabs-value={defaultValue}
+  data-rfr-tabs-id-prefix={api.idPrefix}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-tabs]').forEach((root) => {
+    const idPrefix = root.getAttribute('data-rfr-tabs-id-prefix') || ''
+
+    function selectTab(value: string) {
+      root.setAttribute('data-rfr-tabs-value', value)
+
+      // Update all triggers
+      root.querySelectorAll<HTMLButtonElement>('[data-rfr-tab-value]').forEach((trigger) => {
+        const triggerValue = trigger.getAttribute('data-rfr-tab-value') || ''
+        const isSelected = triggerValue === value
+        trigger.setAttribute('aria-selected', String(isSelected))
+        trigger.setAttribute('data-state', isSelected ? 'active' : 'inactive')
+        trigger.setAttribute('tabindex', isSelected ? '0' : '-1')
+      })
+
+      // Update all panels
+      root.querySelectorAll<HTMLElement>('[data-rfr-tab-panel]').forEach((panel) => {
+        const panelValue = panel.getAttribute('data-rfr-tab-panel') || ''
+        const isSelected = panelValue === value
+        panel.setAttribute('data-state', isSelected ? 'active' : 'inactive')
+        panel.hidden = !isSelected
+      })
+
+      root.dispatchEvent(new CustomEvent('change', { detail: { value } }))
+    }
+
+    // Handle trigger clicks
+    root.addEventListener('click', (e) => {
+      const trigger = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-tab-value]')
+      if (!trigger || trigger.disabled) return
+      const value = trigger.getAttribute('data-rfr-tab-value') || ''
+      selectTab(value)
+      trigger.focus()
+    })
+
+    // Keyboard navigation within the tablist
+    root.addEventListener('keydown', (e) => {
+      const trigger = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-tab-value]')
+      if (!trigger) return
+
+      const orientation = root.getAttribute('data-orientation') || 'horizontal'
+      const triggers = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-rfr-tab-value]')).filter((t) => !t.disabled)
+      const currentIndex = triggers.indexOf(trigger)
+      if (currentIndex === -1) return
+
+      let nextIndex = -1
+      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+
+      if (e.key === nextKey) {
+        e.preventDefault()
+        nextIndex = (currentIndex + 1) % triggers.length
+      } else if (e.key === prevKey) {
+        e.preventDefault()
+        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length
+      } else if (e.key === 'Home') {
+        e.preventDefault()
+        nextIndex = 0
+      } else if (e.key === 'End') {
+        e.preventDefault()
+        nextIndex = triggers.length - 1
+      }
+
+      if (nextIndex >= 0) {
+        const nextTrigger = triggers[nextIndex]
+        const nextValue = nextTrigger.getAttribute('data-rfr-tab-value') || ''
+        selectTab(nextValue)
+        nextTrigger.focus()
+      }
+    })
+  })
+</script>

package/dist/astro-tabs/TabsContent.astro

@@ -0,0 +1,20 @@
+---
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: string
+  isActive?: boolean
+}
+
+const { value, isActive = false, class: className, ...props } = Astro.props
+---
+
+<div
+  role="tabpanel"
+  tabindex={0}
+  data-state={isActive ? 'active' : 'inactive'}
+  data-rfr-tab-panel={value}
+  hidden={!isActive}
+  class={className}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-tabs/TabsList.astro

@@ -0,0 +1,16 @@
+---
+import { tabsListVariants } from '@refraction-ui/tabs'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  role="tablist"
+  class={cn(tabsListVariants(), className)}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-tabs/TabsTrigger.astro

@@ -0,0 +1,24 @@
+---
+import { tabsTriggerVariants } from '@refraction-ui/tabs'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: string
+  isActive?: boolean
+}
+
+const { value, isActive = false, class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  role="tab"
+  aria-selected={isActive}
+  tabindex={isActive ? 0 : -1}
+  data-state={isActive ? 'active' : 'inactive'}
+  data-rfr-tab-value={value}
+  class={cn(tabsTriggerVariants(), className)}
+  {...props}
+>
+  <slot />
+</button>

package/dist/astro-tabs/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-textarea/Textarea.astro

@@ -0,0 +1,51 @@
+---
+import {
+  createTextarea,
+  textareaVariants,
+} from '@refraction-ui/textarea'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  size?: 'sm' | 'default' | 'lg'
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  rows?: number
+  maxRows?: number
+  'aria-invalid'?: boolean
+}
+
+const {
+  size,
+  class: className,
+  disabled,
+  readonly,
+  required,
+  rows,
+  maxRows,
+  'aria-invalid': ariaInvalid,
+  ...props
+} = Astro.props
+
+const api = createTextarea({
+  disabled,
+  readOnly: readonly,
+  required,
+  rows,
+  maxRows,
+  'aria-invalid': ariaInvalid === true ? true : undefined,
+})
+
+const classes = cn(textareaVariants({ size }), className)
+---
+
+<textarea
+  class={classes}
+  disabled={disabled}
+  readonly={readonly}
+  required={required}
+  rows={rows}
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+><slot /></textarea>

package/dist/astro-textarea/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-theme/ThemeScript.astro

@@ -0,0 +1,13 @@
+---
+import { getThemeScript } from '@refraction-ui/theme'
+
+interface Props {
+  storageKey?: string
+  attribute?: 'class' | 'data-theme'
+}
+
+const { storageKey = 'rfr-theme', attribute = 'class' } = Astro.props
+const scriptContent = getThemeScript(storageKey, attribute)
+---
+
+<script set:html={scriptContent} />

package/dist/astro-theme/ThemeToggle.astro

@@ -0,0 +1,279 @@
+---
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** 'dropdown' shows a menu, 'segmented' shows inline buttons */
+  variant?: 'dropdown' | 'segmented'
+  /** localStorage key for theme persistence. Default: 'rfr-theme' */
+  storageKey?: string
+  /** Attribute to set on <html>. Default: 'class' */
+  attribute?: 'class' | 'data-theme'
+}
+
+const {
+  variant = 'segmented',
+  storageKey = 'rfr-theme',
+  attribute = 'class',
+  class: className,
+  ...props
+} = Astro.props
+---
+
+{variant === 'segmented' ? (
+  <div
+    data-rfr-theme-toggle
+    data-rfr-theme-variant="segmented"
+    data-rfr-theme-storage-key={storageKey}
+    data-rfr-theme-attribute={attribute}
+    class={cn('inline-flex items-center gap-1 rounded-lg border p-1', className)}
+    role="radiogroup"
+    aria-label="Theme"
+    {...props}
+  >
+    <button
+      type="button"
+      role="radio"
+      aria-checked="false"
+      aria-label="Light"
+      data-rfr-theme-mode="light"
+      class="inline-flex items-center justify-center rounded-md p-1.5 text-sm transition-colors text-muted-foreground hover:bg-muted"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="5" />
+        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      role="radio"
+      aria-checked="false"
+      aria-label="Dark"
+      data-rfr-theme-mode="dark"
+      class="inline-flex items-center justify-center rounded-md p-1.5 text-sm transition-colors text-muted-foreground hover:bg-muted"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      role="radio"
+      aria-checked="false"
+      aria-label="System"
+      data-rfr-theme-mode="system"
+      class="inline-flex items-center justify-center rounded-md p-1.5 text-sm transition-colors text-muted-foreground hover:bg-muted"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+        <line x1="8" y1="21" x2="16" y2="21" />
+        <line x1="12" y1="17" x2="12" y2="21" />
+      </svg>
+    </button>
+  </div>
+) : (
+  <div
+    data-rfr-theme-toggle
+    data-rfr-theme-variant="dropdown"
+    data-rfr-theme-storage-key={storageKey}
+    data-rfr-theme-attribute={attribute}
+    class={cn('relative', className)}
+    {...props}
+  >
+    <button
+      type="button"
+      aria-label="Toggle theme"
+      aria-expanded="false"
+      data-rfr-theme-dropdown-trigger
+      class="inline-flex items-center justify-center rounded-md p-2 text-sm transition-colors hover:bg-muted"
+    >
+      <svg data-rfr-theme-icon="sun" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="5" />
+        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+      </svg>
+      <svg data-rfr-theme-icon="moon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+      <svg data-rfr-theme-icon="monitor" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none">
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+        <line x1="8" y1="21" x2="16" y2="21" />
+        <line x1="12" y1="17" x2="12" y2="21" />
+      </svg>
+    </button>
+    <div
+      data-rfr-theme-dropdown-menu
+      class="absolute right-0 top-full mt-1 z-50 min-w-[8rem] rounded-md border bg-popover p-1 shadow-md"
+      role="menu"
+      hidden
+    >
+      <button
+        type="button"
+        role="menuitem"
+        data-rfr-theme-mode="light"
+        class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+        </svg>
+        Light
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        data-rfr-theme-mode="dark"
+        class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+        Dark
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        data-rfr-theme-mode="system"
+        class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+          <line x1="8" y1="21" x2="16" y2="21" />
+          <line x1="12" y1="17" x2="12" y2="21" />
+        </svg>
+        System
+      </button>
+    </div>
+  </div>
+)}
+
+<script>
+  function initThemeToggles() {
+    const ACTIVE_CLASS = 'bg-accent text-accent-foreground'
+    const INACTIVE_CLASS = 'text-muted-foreground hover:bg-muted'
+    const ACTIVE_MENU_CLASS = 'bg-accent'
+
+    const MODE_ICONS: Record<string, string> = {
+      light: 'sun',
+      dark: 'moon',
+      system: 'monitor',
+    }
+
+    document.querySelectorAll<HTMLElement>('[data-rfr-theme-toggle]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-theme-init')) return
+      root.setAttribute('data-rfr-theme-init', '')
+
+      const variant = root.getAttribute('data-rfr-theme-variant')
+      const storageKey = root.getAttribute('data-rfr-theme-storage-key') || 'rfr-theme'
+      const attribute = root.getAttribute('data-rfr-theme-attribute') || 'class'
+
+      function getCurrentMode(): string {
+        try {
+          return localStorage.getItem(storageKey) || 'system'
+        } catch {
+          return 'system'
+        }
+      }
+
+      function resolveTheme(mode: string): string {
+        if (mode === 'system') {
+          return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        }
+        return mode
+      }
+
+      function applyTheme(mode: string) {
+        const resolved = resolveTheme(mode)
+        const el = document.documentElement
+        if (attribute === 'class') {
+          el.classList.remove('light', 'dark')
+          el.classList.add(resolved)
+        } else {
+          el.setAttribute(attribute, resolved)
+        }
+        el.style.colorScheme = resolved
+        try {
+          localStorage.setItem(storageKey, mode)
+        } catch { /* ignore */ }
+      }
+
+      function setMode(mode: string) {
+        applyTheme(mode)
+        updateUI(mode)
+        root.dispatchEvent(new CustomEvent('rfr-theme-change', { detail: { mode, resolved: resolveTheme(mode) }, bubbles: true }))
+      }
+
+      function updateUI(mode: string) {
+        if (variant === 'segmented') {
+          root.querySelectorAll<HTMLElement>('[data-rfr-theme-mode]').forEach((btn) => {
+            const isActive = btn.getAttribute('data-rfr-theme-mode') === mode
+            btn.setAttribute('aria-checked', String(isActive))
+            // Reset classes
+            btn.className = `inline-flex items-center justify-center rounded-md p-1.5 text-sm transition-colors ${isActive ? ACTIVE_CLASS : INACTIVE_CLASS}`
+          })
+        } else {
+          // Dropdown variant
+          const trigger = root.querySelector<HTMLElement>('[data-rfr-theme-dropdown-trigger]')
+          if (trigger) {
+            const iconName = MODE_ICONS[mode] || 'monitor'
+            trigger.querySelectorAll<HTMLElement>('[data-rfr-theme-icon]').forEach((svg) => {
+              svg.style.display = svg.getAttribute('data-rfr-theme-icon') === iconName ? '' : 'none'
+            })
+          }
+          root.querySelectorAll<HTMLElement>('[data-rfr-theme-mode]').forEach((btn) => {
+            const isActive = btn.getAttribute('data-rfr-theme-mode') === mode
+            btn.className = `flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent ${isActive ? ACTIVE_MENU_CLASS : ''}`
+          })
+        }
+      }
+
+      // Handle clicks on mode buttons
+      root.querySelectorAll<HTMLElement>('[data-rfr-theme-mode]').forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const mode = btn.getAttribute('data-rfr-theme-mode')
+          if (mode) setMode(mode)
+
+          // Close dropdown if open
+          if (variant === 'dropdown') {
+            const menu = root.querySelector<HTMLElement>('[data-rfr-theme-dropdown-menu]')
+            const trigger = root.querySelector<HTMLElement>('[data-rfr-theme-dropdown-trigger]')
+            if (menu) menu.hidden = true
+            if (trigger) trigger.setAttribute('aria-expanded', 'false')
+          }
+        })
+      })
+
+      // Dropdown toggle behavior
+      if (variant === 'dropdown') {
+        const trigger = root.querySelector<HTMLElement>('[data-rfr-theme-dropdown-trigger]')
+        const menu = root.querySelector<HTMLElement>('[data-rfr-theme-dropdown-menu]')
+
+        trigger?.addEventListener('click', () => {
+          const isOpen = !menu?.hidden
+          if (menu) menu.hidden = isOpen
+          trigger.setAttribute('aria-expanded', String(!isOpen))
+        })
+
+        // Close on outside click
+        document.addEventListener('mousedown', (e) => {
+          if (!root.contains(e.target as Node) && menu && !menu.hidden) {
+            menu.hidden = true
+            trigger?.setAttribute('aria-expanded', 'false')
+          }
+        })
+      }
+
+      // Listen for system preference changes
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const mode = getCurrentMode()
+        if (mode === 'system') {
+          applyTheme('system')
+        }
+      })
+
+      // Initialize UI
+      updateUI(getCurrentMode())
+    })
+  }
+
+  initThemeToggles()
+  document.addEventListener('astro:after-swap', initThemeToggles)
+</script>

package/dist/astro-theme/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/astro-thread-view/ThreadView.astro

@@ -0,0 +1,159 @@
+---
+import {
+  createThreadView,
+  threadContainerStyles,
+  threadMessageStyles,
+  threadAvatarStyles,
+  threadContentStyles,
+  threadAuthorStyles,
+  threadTimestampStyles,
+  threadBodyStyles,
+  threadReactionsStyles,
+  threadReplyIndicatorStyles,
+  threadActionsStyles,
+  threadAttachmentStyles,
+  threadEditedStyles,
+  type MessageData,
+} from '@refraction-ui/thread-view'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  messages: MessageData[]
+  currentUserId?: string
+}
+
+const {
+  messages,
+  currentUserId,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createThreadView({ messages, currentUserId })
+---
+
+<div
+  role={api.ariaProps.role}
+  aria-label={api.ariaProps['aria-label'] as string}
+  aria-live={api.ariaProps['aria-live'] as any}
+  id={api.ids.thread}
+  class={cn(threadContainerStyles, className)}
+  data-rfr-thread-view
+  {...props}
+>
+  {messages.map((message) => {
+    const msgAriaProps = api.getMessageAriaProps(message)
+    const replyAriaProps = api.getReplyButtonAriaProps(message.id)
+    return (
+      <div
+        class={threadMessageStyles}
+        role={msgAriaProps.role as string}
+        aria-label={msgAriaProps['aria-label'] as string}
+        data-rfr-thread-message
+        data-message-id={message.id}
+      >
+        {/* Avatar */}
+        <div class={threadAvatarStyles}>
+          {message.author.avatarUrl ? (
+            <img
+              src={message.author.avatarUrl}
+              alt={message.author.name}
+              class="h-full w-full object-cover"
+            />
+          ) : (
+            message.author.name.charAt(0).toUpperCase()
+          )}
+        </div>
+
+        {/* Content */}
+        <div class={threadContentStyles}>
+          <div class="flex items-baseline">
+            <span class={threadAuthorStyles}>{message.author.name}</span>
+            <span class={threadTimestampStyles}>
+              {api.formatTimestamp(message.timestamp)}
+            </span>
+            {message.edited && (
+              <span class={threadEditedStyles}>(edited)</span>
+            )}
+          </div>
+
+          <div class={threadBodyStyles}>{message.content}</div>
+
+          {/* Reactions */}
+          {message.reactions && message.reactions.length > 0 && (
+            <div class={threadReactionsStyles}>
+              {message.reactions.map((reaction, i) => (
+                <button
+                  type="button"
+                  class={cn(
+                    'inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs cursor-pointer',
+                    reaction.userReacted ? 'border-primary bg-primary/10' : 'border-border',
+                  )}
+                  data-rfr-thread-reaction
+                  data-message-id={message.id}
+                  data-emoji={reaction.emoji}
+                >
+                  {reaction.emoji} {reaction.count}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Reply indicator */}
+          {message.replies && message.replies.length > 0 && (
+            <div class={threadReplyIndicatorStyles}>
+              {message.replies.length} {message.replies.length === 1 ? 'reply' : 'replies'}
+            </div>
+          )}
+
+          {/* Attachments */}
+          {message.attachments && message.attachments.map((attachment) => (
+            <div class={threadAttachmentStyles}>
+              <span>&#x1F4CE;</span>
+              <span class="truncate">{attachment.name}</span>
+            </div>
+          ))}
+
+          {/* Actions (reply button) */}
+          <div class={threadActionsStyles}>
+            <button
+              type="button"
+              class="text-xs text-muted-foreground hover:text-foreground cursor-pointer"
+              role={replyAriaProps.role as string}
+              aria-label={replyAriaProps['aria-label'] as string}
+              data-rfr-thread-reply
+              data-message-id={message.id}
+            >
+              Reply
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  })}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-rfr-thread-view]').forEach((root) => {
+    // Handle reaction clicks
+    root.addEventListener('click', (e) => {
+      const reactionBtn = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-thread-reaction]')
+      if (reactionBtn) {
+        const messageId = reactionBtn.getAttribute('data-message-id') || ''
+        const emoji = reactionBtn.getAttribute('data-emoji') || ''
+        root.dispatchEvent(
+          new CustomEvent('react', { detail: { messageId, emoji }, bubbles: true }),
+        )
+        return
+      }
+
+      const replyBtn = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-thread-reply]')
+      if (replyBtn) {
+        const messageId = replyBtn.getAttribute('data-message-id') || ''
+        root.dispatchEvent(
+          new CustomEvent('reply', { detail: { messageId }, bubbles: true }),
+        )
+      }
+    })
+  })
+</script>

package/dist/astro-thread-view/index.ts

@@ -0,0 +1 @@
+export {}