@refraction-ui/astro 0.20.1 → 0.21.0

package/dist/astro-button/Button.stories.ts

@@ -16,3 +16,7 @@ export const Default = {
     disabled: false
   }
 }
+
+export const NamedIcon = {
+  args: { size: 'icon', variant: 'ghost', 'aria-label': 'Dictate', default: '<svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16"><path d="M12 2v16" stroke="currentColor" /></svg>' },
+}

package/dist/astro-button/index.ts

@@ -1 +1,8 @@
-export {}
+export { default as Button } from './Button.astro'
+// Shared classes let native triggers use button styling without nested buttons.
+export {
+  buttonVariants,
+  buttonTokens,
+  type ButtonVariant,
+  type ButtonSize,
+} from '../button/index.ts'

package/dist/astro-composer/Composer.astro

@@ -37,8 +37,10 @@ const hasContent = Astro.slots.has('default')
     <div class={cn(composerFieldClass, 'min-h-[3rem] whitespace-pre-wrap break-words')}>
       {hasContent ? <slot /> : <span class="text-muted-foreground">{placeholder}</span>}
     </div>
-    <div class="flex items-center px-2 pb-2">
+    <div class="flex items-center gap-0.5 px-2 pb-2">
+      <slot name="leading" />
       <div class="flex-1" />
+      <slot name="trailing" />
       <button
         type="button"
         aria-label={sendLabel}

package/dist/astro-composer/Composer.stories.ts

@@ -0,0 +1,6 @@
+import ToolbarExample from '../../astro-meta/__tests__/compositions/composer.astro'
+
+const meta = { title: 'Chat & AI/Composer', component: ToolbarExample }
+export default meta
+
+export const IconToolbar = {}

package/dist/astro-composer/InteractiveComposer.astro

@@ -0,0 +1,57 @@
+---
+import { composerFieldClass, composerSurfaceVariants, composerTrayClass } from '../composer/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  defaultValue?: string
+  placeholder?: string
+  label?: string
+  messageLabel?: string
+  sendLabel?: string
+  removeLabel?: string
+  pasteFailedNotice?: string
+  trimmedNotice?: string
+  disabled?: boolean
+  readOnly?: boolean
+  busy?: boolean
+  maxLength?: number
+  maxAttachments?: number
+  maxAttachmentSizeBytes?: number
+  /** Opt-in keyboard submission; false preserves Enter for newlines on mobile. */
+  submitOnEnter?: boolean
+}
+const {
+  defaultValue = '', placeholder = 'Send a message…', label = 'Message composer',
+  messageLabel = 'Message', sendLabel = 'Send', removeLabel = 'Remove attachment',
+  pasteFailedNotice = 'Could not paste images. Try attaching the file instead.',
+  trimmedNotice = 'Pasted text was trimmed to fit the length limit',
+  disabled = false, readOnly = false, busy = false, submitOnEnter = false,
+  maxLength, maxAttachments, maxAttachmentSizeBytes, class: className, ...rest
+} = Astro.props
+---
+<refraction-interactive-composer
+  role="form" aria-label={label} class={cn('block relative', className)}
+  disabled={disabled || undefined} read-only={readOnly || undefined} busy={busy || undefined}
+  submit-on-enter={submitOnEnter || undefined} max-length={maxLength}
+  max-attachments={maxAttachments} max-image-bytes={maxAttachmentSizeBytes}
+  data-remove-label={removeLabel} data-paste-failed-notice={pasteFailedNotice}
+  data-trimmed-notice={trimmedNotice} {...rest}
+>
+  <div class={composerSurfaceVariants({ disabled: disabled ? 'true' : 'false' })}>
+    <div data-notice role="status" aria-live="polite" class="px-3 text-xs text-muted-foreground"></div>
+    <div data-tray class={composerTrayClass}></div>
+    <textarea aria-label={messageLabel} placeholder={placeholder} disabled={disabled} readonly={readOnly}
+      rows="3" class={cn(composerFieldClass, 'block w-full resize-y')}>{defaultValue}</textarea>
+    <div class="flex items-center justify-between gap-2 px-3 pb-3">
+      <div class="flex min-w-0 items-center gap-0.5"><slot name="leading" /></div>
+      <div class="flex items-center gap-2">
+        <slot name="trailing" />
+        <button data-send type="button" disabled class="rounded-full bg-primary px-4 py-2 text-primary-foreground">{sendLabel}</button>
+      </div>
+    </div>
+  </div>
+</refraction-interactive-composer>
+<script>
+  import { registerRefractionInteractiveComposer } from './interactive-composer.js'
+  registerRefractionInteractiveComposer()
+</script>

package/dist/astro-composer/InteractiveComposer.stories.ts

@@ -0,0 +1,8 @@
+import Component from './InteractiveComposer.astro'
+import ToolbarComposition from '../../astro-meta/__tests__/compositions/interactive-composer-toolbar.astro'
+const meta = { title: 'Astro/Composer/Interactive', component: Component }
+export default meta
+export const Clipboard = { args: { defaultValue: 'Local fixture draft', placeholder: 'Paste text and PNG/JPEG images…' } }
+export const ReadOnly = { args: { defaultValue: 'Selectable draft', readOnly: true } }
+export const Disabled = { args: { disabled: true } }
+export const Toolbar = { render: () => ToolbarComposition }

package/dist/astro-composer/index.ts

@@ -1 +1,3 @@
-export {}
+export { default as RefractionInteractiveComposer } from './InteractiveComposer.astro'
+export type { RefractionComposerImagePasteDetail, RefractionInteractiveComposerElement } from './interactive-composer.js'
+export { default as Composer } from './Composer.astro'

package/dist/astro-composer/interactive-composer.ts

@@ -0,0 +1,137 @@
+import { composerClipboardImages, createComposer, pasteComposerField } from '../composer/index.ts'
+import type { ComposerAPI, ComposerState, ComposerSubmission } from '../composer/index.ts'
+
+export interface RefractionComposerImagePasteDetail {
+  images: File[]
+  /** Host stages/uploads via this same core; bytes never enter serialized drafts. */
+  api: ComposerAPI
+}
+
+export interface RefractionInteractiveComposerElement extends HTMLElement {
+  readonly api: ComposerAPI | undefined
+}
+
+/** Install once; custom-element lifecycle also supports Astro view transitions. */
+export function registerRefractionInteractiveComposer(): void {
+  if (customElements.get('refraction-interactive-composer')) return
+  customElements.define('refraction-interactive-composer', class extends HTMLElement {
+    api?: ComposerAPI
+    private controller?: AbortController
+    private unsubscribe?: () => void
+    private pasting = false
+
+    connectedCallback(): void {
+      if (this.api) return
+      const field = this.querySelector('textarea')!
+      const send = this.querySelector<HTMLButtonElement>('[data-send]')!
+      const tray = this.querySelector<HTMLElement>('[data-tray]')!
+      const notice = this.querySelector<HTMLElement>('[data-notice]')!
+      const emit = (name: string, detail: unknown) => this.dispatchEvent(new CustomEvent(`refraction:${name}`, { bubbles: true, detail }))
+      const number = (name: string) => this.hasAttribute(name) ? Number(this.getAttribute(name)) : undefined
+      const api = createComposer({
+        initialValue: field.value,
+        maxLength: number('max-length'),
+        maxAttachments: number('max-attachments'),
+        maxAttachmentSizeBytes: number('max-image-bytes'),
+        onEvent: event => {
+          if (event.type === 'paste-trimmed') notice.textContent = this.dataset.trimmedNotice ?? ''
+          emit('composer-event', event)
+        },
+      })
+      this.api = api
+      const controller = new AbortController()
+      this.controller = controller
+      const options = { signal: controller.signal }
+      const render = (state: ComposerState) => {
+        if (!this.pasting && field.value !== state.value) field.value = state.value
+        field.disabled = state.disabled
+        field.readOnly = state.readOnly
+        send.disabled = !state.canSend
+        send.setAttribute('aria-busy', String(state.isBusy))
+        tray.replaceChildren()
+        for (const attachment of state.attachments) {
+          const chip = document.createElement('span')
+          chip.className = 'inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm'
+          const label = document.createElement('span')
+          label.textContent = `${attachment.name} · ${attachment.status}`
+          chip.append(label)
+          const remove = document.createElement('button')
+          remove.type = 'button'
+          remove.textContent = '×'
+          remove.setAttribute('aria-label', `${this.dataset.removeLabel} ${attachment.name}`)
+          remove.disabled = state.disabled || state.readOnly || state.isBusy
+          remove.dataset.attachmentId = attachment.id
+          chip.append(remove)
+          tray.append(chip)
+        }
+      }
+      tray.addEventListener('click', event => {
+        const button = (event.target as Element).closest<HTMLButtonElement>('[data-attachment-id]')
+        if (!button || button.disabled) return
+        const attachment = api.getState().attachments.find(item => item.id === button.dataset.attachmentId)
+        if (!attachment) return
+        api.removeAttachment(attachment.id)
+        emit('attachment-remove', attachment)
+      }, options)
+      const selection = () => api.setSelection({ start: field.selectionStart, end: field.selectionEnd })
+      this.unsubscribe = api.subscribe(render)
+      field.addEventListener('input', () => {
+        if (!this.pasting) api.setValue(field.value, { start: field.selectionStart, end: field.selectionEnd })
+      }, options)
+      field.addEventListener('select', () => { if (!this.pasting) selection() }, options)
+      field.addEventListener('compositionstart', () => api.setComposing(true), options)
+      field.addEventListener('compositionend', () => api.setComposing(false), options)
+      field.addEventListener('paste', event => {
+        event.preventDefault()
+        const state = api.getState()
+        if (state.disabled || state.readOnly || state.isComposing) return
+        notice.textContent = ''
+        let images: File[]
+        let text: string
+        try {
+          images = composerClipboardImages(Array.from(event.clipboardData?.files ?? []), number('max-image-bytes'))
+          text = event.clipboardData?.getData('text/plain') ?? ''
+        } catch (error) {
+          notice.textContent = this.dataset.pasteFailedNotice ?? ''
+          emit('paste-error', { error })
+          return
+        }
+        this.pasting = true
+        try {
+          pasteComposerField(api, field, text, inserted => typeof document.execCommand === 'function' && document.execCommand('insertText', false, inserted))
+        } finally {
+          this.pasting = false
+        }
+        if (images.length > 0) emit('images-pasted', { images, api } satisfies RefractionComposerImagePasteDetail)
+      }, options)
+      const submit = () => {
+        const submission = api.submit()
+        if (submission) emit('submit', submission satisfies ComposerSubmission)
+      }
+      send.addEventListener('click', submit, options)
+      field.addEventListener('keydown', event => {
+        if (event.key === 'Enter' && !event.shiftKey && !event.isComposing && this.hasAttribute('submit-on-enter')) {
+          event.preventDefault()
+          submit()
+        }
+      }, options)
+      this.syncFlags()
+      render(api.getState())
+      emit('composer-ready', { api })
+    }
+
+    static get observedAttributes(): string[] { return ['disabled', 'read-only', 'busy'] }
+    attributeChangedCallback(): void { this.syncFlags() }
+    private syncFlags(): void {
+      this.api?.setDisabled(this.hasAttribute('disabled'))
+      this.api?.setReadOnly(this.hasAttribute('read-only'))
+      this.api?.setBusy(this.hasAttribute('busy'))
+    }
+    disconnectedCallback(): void {
+      this.controller?.abort()
+      this.unsubscribe?.()
+      this.api?.destroy()
+      this.api = undefined
+    }
+  })
+}

package/dist/composer/clipboard.ts

@@ -0,0 +1,28 @@
+/** Clipboard payload rules shared by browser adapters; no clipboard access. */
+export const DEFAULT_COMPOSER_IMAGE_MAX_BYTES = 100 * 1024 * 1024
+
+export interface ComposerClipboardFile {
+  readonly name: string
+  readonly type: string
+  readonly size: number
+}
+
+export class ComposerImagePasteError extends Error {
+  constructor(readonly reason: 'empty' | 'max-size', readonly fileName: string) {
+    super(`Cannot paste image ${fileName}: ${reason}`)
+    this.name = 'ComposerImagePasteError'
+  }
+}
+
+/** PNG/JPEG only. Reject the entire image batch before handing anything to a host. */
+export function composerClipboardImages<T extends ComposerClipboardFile>(
+  files: Iterable<T>,
+  maxBytes = DEFAULT_COMPOSER_IMAGE_MAX_BYTES,
+): T[] {
+  const images = Array.from(files).filter(file => file.type === 'image/png' || file.type === 'image/jpeg')
+  for (const image of images) {
+    if (image.size === 0) throw new ComposerImagePasteError('empty', image.name)
+    if (image.size > maxBytes) throw new ComposerImagePasteError('max-size', image.name)
+  }
+  return images
+}

package/dist/composer/index.ts

@@ -7,3 +7,5 @@ export * from './tokens.ts'
 export * from './composer.ts'
 export * from './styles.ts'
 export { createEmojiTrigger, type EmojiTriggerOptions } from './emoji-trigger.js'
+export * from './clipboard.ts'
+export * from './paste-field.ts'

package/dist/composer/paste-field.ts

@@ -0,0 +1,53 @@
+import type { ComposerAPI } from './types.js'
+
+/** Structural field seam: the headless package never reads browser globals. */
+export interface ComposerPasteField {
+  value: string
+  selectionStart: number
+  selectionEnd: number
+  setSelectionRange(start: number, end: number): void
+}
+
+// Native replacement ranges must not bisect a UTF-16 surrogate pair.
+function splitsSurrogate(text: string, offset: number): boolean {
+  return /^[\uD800-\uDBFF][\uDC00-\uDFFF]$/.test(text.slice(offset - 1, offset + 1))
+}
+
+/**
+ * Apply the core's token/grapheme rules, then mirror its edit as a native undo
+ * transaction when the adapter supplies one. The adapter must defer rendering
+ * the field until this call returns. Empty image-only pastes preserve selection.
+ */
+export function pasteComposerField(
+  api: ComposerAPI,
+  field: ComposerPasteField,
+  text: string,
+  insertText?: (text: string) => boolean,
+): void {
+  api.setSelection({ start: field.selectionStart, end: field.selectionEnd })
+  if (text === '') return
+  const before = field.value
+  api.pasteText(text)
+  const after = api.getState()
+  if (after.value !== before) {
+    let start = 0
+    while (start < before.length && start < after.value.length && before[start] === after.value[start]) start++
+    if (splitsSurrogate(before, start) || splitsSurrogate(after.value, start)) start--
+    let end = before.length
+    let nextEnd = after.value.length
+    while (end > start && nextEnd > start && before[end - 1] === after.value[nextEnd - 1]) {
+      end--
+      nextEnd--
+    }
+    if (splitsSurrogate(before, end) || splitsSurrogate(after.value, nextEnd)) {
+      end++
+      nextEnd++
+    }
+    field.setSelectionRange(start, end)
+    insertText?.(after.value.slice(start, nextEnd))
+    // Non-browser tests and browsers without native insertion still retain the
+    // core's value/selection rules; native undo is verified separately.
+    if (field.value !== after.value) field.value = after.value
+  }
+  field.setSelectionRange(after.selection.start, after.selection.end)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {