@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-composer.js

@@ -0,0 +1,2036 @@
+import {
+  detectEmojiShortcode,
+  detectTriggerInText
+} from "./chunk-BOLFYVI6.js";
+import {
+  searchEmojis
+} from "./chunk-533MCMSU.js";
+import {
+  cn,
+  cva,
+  generateId,
+  prefersReducedMotion
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-composer/dist/index.js
+import * as React2 from "react";
+
+// ../composer/dist/index.js
+function toMessageAttachment(attachment) {
+  return {
+    id: attachment.id,
+    name: attachment.name,
+    url: attachment.previewUrl ?? "",
+    type: attachment.mimeType ?? attachment.kind,
+    size: attachment.sizeBytes
+  };
+}
+var cachedSegmenter;
+function getSegmenter() {
+  if (cachedSegmenter === void 0) {
+    const IntlAny = typeof Intl !== "undefined" ? Intl : void 0;
+    const Segmenter = IntlAny?.Segmenter;
+    cachedSegmenter = Segmenter ? new Segmenter(void 0, { granularity: "grapheme" }) : null;
+  }
+  return cachedSegmenter;
+}
+function isHighSurrogate(code) {
+  return code >= 55296 && code <= 56319;
+}
+function isLowSurrogate(code) {
+  return code >= 56320 && code <= 57343;
+}
+function graphemeLength(text) {
+  if (text === "") return 0;
+  const segmenter = getSegmenter();
+  if (segmenter) {
+    let count2 = 0;
+    for (const _ of segmenter.segment(text)) count2++;
+    return count2;
+  }
+  let count = 0;
+  for (const _ of text) count++;
+  return count;
+}
+function clampGraphemes(text, max) {
+  if (max <= 0) return "";
+  const segmenter = getSegmenter();
+  if (segmenter) {
+    let count2 = 0;
+    let endIndex = text.length;
+    for (const part of segmenter.segment(text)) {
+      count2++;
+      if (count2 > max) {
+        endIndex = part.index;
+        break;
+      }
+    }
+    return text.slice(0, endIndex);
+  }
+  let count = 0;
+  let i = 0;
+  while (i < text.length && count < max) {
+    const code = text.charCodeAt(i);
+    i += isHighSurrogate(code) && i + 1 < text.length && isLowSurrogate(text.charCodeAt(i + 1)) ? 2 : 1;
+    count++;
+  }
+  return text.slice(0, i);
+}
+function payloadFor(raw) {
+  return raw.trim();
+}
+function canSend({ text, attachments = [], disabled = false, readOnly = false, busy = false }) {
+  if (disabled || readOnly || busy) return false;
+  return payloadFor(text).length > 0 || attachments.length > 0;
+}
+function shouldSubmitOnEnter({
+  shiftPressed,
+  isComposing
+}) {
+  return !shiftPressed && !isComposing;
+}
+var COUNTER_VISIBLE_FRACTION = 0.2;
+function computeCounter(text, maxLength) {
+  if (maxLength === void 0) {
+    return { visible: false, remaining: null, overLimit: false };
+  }
+  const remaining = maxLength - graphemeLength(text);
+  return {
+    visible: remaining <= maxLength * COUNTER_VISIBLE_FRACTION,
+    remaining,
+    overLimit: remaining <= 0
+  };
+}
+var DEFAULT_MAX_QUERY_LENGTH = 40;
+var DEFAULT_MAX_VISIBLE_RESULTS = 6;
+var SCAN_UNITS_PER_GRAPHEME = 16;
+function resolveTriggerConfig(trigger) {
+  const symbol = trigger.symbol;
+  return {
+    id: trigger.id,
+    symbol,
+    scope: trigger.scope ?? "anywhere",
+    queryPattern: trigger.queryPattern ?? null,
+    maxQueryLength: trigger.maxQueryLength ?? DEFAULT_MAX_QUERY_LENGTH,
+    closeOnSpace: trigger.closeOnSpace ?? true,
+    allowMidWord: trigger.allowMidWord ?? false,
+    extraBoundaryChars: trigger.extraBoundaryChars ?? [],
+    debounceMs: trigger.debounceMs ?? 0,
+    maxVisibleResults: trigger.maxVisibleResults ?? DEFAULT_MAX_VISIBLE_RESULTS,
+    wrapNavigation: trigger.wrapNavigation ?? true,
+    toDisplay: trigger.toDisplay ?? ((candidate) => `${symbol}${candidate.display}`),
+    resolve: trigger.resolve
+  };
+}
+function scanWindowFor(trigger) {
+  return trigger.maxQueryLength * SCAN_UNITS_PER_GRAPHEME + trigger.symbol.length;
+}
+function isWhitespace(ch) {
+  return /\s/.test(ch);
+}
+function boundaryOk(text, symbolStart, trigger) {
+  if (trigger.allowMidWord) return true;
+  if (symbolStart === 0) return true;
+  const prev = text[symbolStart - 1];
+  return isWhitespace(prev) || trigger.extraBoundaryChars.includes(prev);
+}
+function scopeOk(text, symbolStart, scope) {
+  if (scope === "anywhere") return true;
+  if (scope === "startOfMessage") return symbolStart === 0;
+  return symbolStart === 0 || text[symbolStart - 1] === "\n";
+}
+function findCandidate(text, caret, trigger) {
+  const window2 = scanWindowFor(trigger);
+  const isSimple = trigger.symbol.length === 1 && trigger.scope === "anywhere" && trigger.closeOnSpace && !trigger.allowMidWord && trigger.extraBoundaryChars.length === 0;
+  if (isSimple) {
+    const sliceStart2 = Math.max(0, caret - window2 - 1);
+    const slice = text.slice(sliceStart2, caret);
+    const hit = detectTriggerInText(slice, slice.length, trigger.symbol);
+    if (!hit) return null;
+    return { symbolStart: sliceStart2 + hit.start, query: hit.query };
+  }
+  const sliceStart = Math.max(0, caret - window2);
+  const rel = text.slice(sliceStart, caret).lastIndexOf(trigger.symbol);
+  if (rel === -1) return null;
+  const symbolStart = sliceStart + rel;
+  if (symbolStart + trigger.symbol.length > caret) return null;
+  return { symbolStart, query: text.slice(symbolStart + trigger.symbol.length, caret) };
+}
+function validateCandidate(text, caret, trigger, candidate, dismissed, tokenRanges) {
+  const { symbolStart, query } = candidate;
+  if (!boundaryOk(text, symbolStart, trigger)) return null;
+  if (!scopeOk(text, symbolStart, trigger.scope)) return null;
+  for (const range of tokenRanges) {
+    if (symbolStart >= range.start && symbolStart < range.end) return null;
+  }
+  if (dismissed.some((d) => d.triggerId === trigger.id && d.symbolStart === symbolStart)) return null;
+  if (trigger.closeOnSpace && /\s/.test(query)) return null;
+  if (!trigger.closeOnSpace && query.includes("\n")) return null;
+  if (graphemeLength(query) > trigger.maxQueryLength) return null;
+  if (trigger.queryPattern && !trigger.queryPattern.test(query)) return null;
+  return { trigger, symbolStart, caret, query };
+}
+function detectActiveTrigger({
+  text,
+  caret,
+  triggers,
+  isComposing = false,
+  dismissed = [],
+  tokenRanges = []
+}) {
+  if (isComposing) return null;
+  let best = null;
+  for (const trigger of triggers) {
+    const candidate = findCandidate(text, caret, trigger);
+    if (!candidate) continue;
+    const match = validateCandidate(text, caret, trigger, candidate, dismissed, tokenRanges);
+    if (!match) continue;
+    if (!best || match.symbolStart > best.symbolStart || match.symbolStart === best.symbolStart && match.trigger.symbol.length > best.trigger.symbol.length) {
+      best = match;
+    }
+  }
+  return best;
+}
+var LOADING_DELAY_MS = 120;
+var DISMISS_GRACE_MS = 120;
+var CIRCUIT_BREAKER_THRESHOLD = 2;
+var CLOSED_SUGGESTION_STATE = {
+  isOpen: false,
+  items: [],
+  visibleItems: [],
+  activeIndex: 0,
+  loading: false,
+  error: null,
+  requestToken: 0
+};
+function createSuggestionController({ emit }) {
+  let state = CLOSED_SUGGESTION_STATE;
+  let match = null;
+  let requestCounter = 0;
+  let debounceTimer = null;
+  let loadingTimer = null;
+  let dismissTimer = null;
+  const consecutiveFailures = /* @__PURE__ */ new Map();
+  const tripped = /* @__PURE__ */ new Set();
+  function clearTimer(timer) {
+    if (timer !== null) clearTimeout(timer);
+    return null;
+  }
+  function setState(patch) {
+    state = { ...state, ...patch };
+  }
+  function sameOccurrence(a, b) {
+    return a !== null && b !== null && a.trigger.id === b.trigger.id && a.symbolStart === b.symbolStart;
+  }
+  function closeInternal() {
+    debounceTimer = clearTimer(debounceTimer);
+    loadingTimer = clearTimer(loadingTimer);
+    requestCounter++;
+    match = null;
+    state = CLOSED_SUGGESTION_STATE;
+  }
+  function applyResults(forMatch, items) {
+    loadingTimer = clearTimer(loadingTimer);
+    consecutiveFailures.set(forMatch.trigger.id, 0);
+    setState({
+      isOpen: true,
+      items,
+      visibleItems: items.slice(0, forMatch.trigger.maxVisibleResults),
+      activeIndex: 0,
+      loading: false,
+      error: null
+    });
+  }
+  function applyFailure(forMatch, error) {
+    loadingTimer = clearTimer(loadingTimer);
+    const triggerId = forMatch.trigger.id;
+    const failures = (consecutiveFailures.get(triggerId) ?? 0) + 1;
+    consecutiveFailures.set(triggerId, failures);
+    if (failures >= CIRCUIT_BREAKER_THRESHOLD) {
+      tripped.add(triggerId);
+      closeInternal();
+      return;
+    }
+    setState({
+      isOpen: true,
+      items: [],
+      visibleItems: [],
+      loading: false,
+      error: error instanceof Error ? error.message : "Failed to load suggestions"
+    });
+  }
+  function dispatch(forMatch, notifySync) {
+    const token = ++requestCounter;
+    setState({ requestToken: token });
+    let result;
+    try {
+      result = forMatch.trigger.resolve(forMatch.query);
+    } catch (error) {
+      applyFailure(forMatch, error);
+      if (notifySync) emit();
+      return;
+    }
+    if (Array.isArray(result)) {
+      applyResults(forMatch, result);
+      if (notifySync) emit();
+      return;
+    }
+    loadingTimer = clearTimer(loadingTimer);
+    loadingTimer = setTimeout(() => {
+      if (token !== requestCounter) return;
+      setState({ isOpen: true, loading: true });
+      emit();
+    }, LOADING_DELAY_MS);
+    result.then(
+      (items) => {
+        if (token !== requestCounter || !sameOccurrence(match, forMatch)) return;
+        applyResults(forMatch, items);
+        emit();
+      },
+      (error) => {
+        if (token !== requestCounter || !sameOccurrence(match, forMatch)) return;
+        applyFailure(forMatch, error);
+        emit();
+      }
+    );
+  }
+  function schedule(forMatch) {
+    debounceTimer = clearTimer(debounceTimer);
+    if (forMatch.trigger.debounceMs <= 0) {
+      dispatch(forMatch, false);
+      return;
+    }
+    debounceTimer = setTimeout(() => {
+      debounceTimer = null;
+      if (sameOccurrence(match, forMatch) && match?.query === forMatch.query) {
+        dispatch(forMatch, true);
+      }
+    }, forMatch.trigger.debounceMs);
+  }
+  return {
+    get state() {
+      return state;
+    },
+    sync(next) {
+      if (next === null) {
+        if (match !== null || state.isOpen) closeInternal();
+        return;
+      }
+      if (tripped.has(next.trigger.id)) {
+        if (match !== null || state.isOpen) closeInternal();
+        return;
+      }
+      const isSame = sameOccurrence(match, next);
+      const queryChanged = !isSame || match?.query !== next.query;
+      match = next;
+      if (!isSame) {
+        state = { ...CLOSED_SUGGESTION_STATE, isOpen: true, requestToken: state.requestToken };
+      }
+      if (queryChanged) schedule(next);
+    },
+    moveNext() {
+      const count = state.items.length;
+      if (!state.isOpen || count === 0) return;
+      const wrap = match?.trigger.wrapNavigation ?? true;
+      const next = wrap ? (state.activeIndex + 1) % count : Math.min(state.activeIndex + 1, count - 1);
+      setState({ activeIndex: next });
+    },
+    movePrevious() {
+      const count = state.items.length;
+      if (!state.isOpen || count === 0) return;
+      const wrap = match?.trigger.wrapNavigation ?? true;
+      const previous = wrap ? (state.activeIndex - 1 + count) % count : Math.max(state.activeIndex - 1, 0);
+      setState({ activeIndex: previous });
+    },
+    setActiveIndex(index) {
+      if (!state.isOpen || state.items.length === 0) return;
+      setState({ activeIndex: Math.max(0, Math.min(index, state.items.length - 1)) });
+    },
+    retry() {
+      if (match === null) return;
+      if (tripped.has(match.trigger.id)) return;
+      setState({ error: null });
+      dispatch(match, false);
+    },
+    dismissDeferred(onClosed) {
+      dismissTimer = clearTimer(dismissTimer);
+      dismissTimer = setTimeout(() => {
+        dismissTimer = null;
+        closeInternal();
+        onClosed();
+      }, DISMISS_GRACE_MS);
+    },
+    cancelDeferredDismiss() {
+      dismissTimer = clearTimer(dismissTimer);
+    },
+    close() {
+      dismissTimer = clearTimer(dismissTimer);
+      closeInternal();
+    },
+    isTripped(triggerId) {
+      return tripped.has(triggerId);
+    },
+    destroy() {
+      debounceTimer = clearTimer(debounceTimer);
+      loadingTimer = clearTimer(loadingTimer);
+      dismissTimer = clearTimer(dismissTimer);
+      match = null;
+      state = CLOSED_SUGGESTION_STATE;
+    }
+  };
+}
+function diffEdit(oldText, newText) {
+  if (oldText === newText) return null;
+  const minLen = Math.min(oldText.length, newText.length);
+  let prefix = 0;
+  while (prefix < minLen && oldText[prefix] === newText[prefix]) prefix++;
+  let suffix = 0;
+  while (suffix < minLen - prefix && oldText[oldText.length - 1 - suffix] === newText[newText.length - 1 - suffix]) {
+    suffix++;
+  }
+  return { start: prefix, oldEnd: oldText.length - suffix, newEnd: newText.length - suffix };
+}
+function nearestBoundary(offset, token) {
+  return offset - token.start <= token.end - offset ? token.start : token.end;
+}
+function applyValueEdit({
+  oldValue,
+  newValue,
+  tokens,
+  newSelection,
+  maxLength
+}) {
+  const noChange = {
+    value: oldValue,
+    tokens: [...tokens],
+    selection: newSelection,
+    rejected: false,
+    trimmed: false,
+    removedTokens: [],
+    edit: null
+  };
+  const diff = diffEdit(oldValue, newValue);
+  if (!diff) return noChange;
+  const insertedRaw = newValue.slice(diff.start, diff.newEnd);
+  if (diff.oldEnd === diff.start) {
+    const host = tokens.find((t) => t.start < diff.start && diff.start < t.end);
+    if (host) {
+      const caret2 = nearestBoundary(diff.start, host);
+      return { ...noChange, rejected: true, selection: { start: caret2, end: caret2 } };
+    }
+  }
+  let expStart = diff.start;
+  let expOldEnd = diff.oldEnd;
+  const removedTokens = [];
+  for (const token of tokens) {
+    const overlaps = token.start < expOldEnd && token.end > expStart;
+    if (!overlaps) continue;
+    removedTokens.push(token);
+    expStart = Math.min(expStart, token.start);
+    expOldEnd = Math.max(expOldEnd, token.end);
+  }
+  let inserted = insertedRaw;
+  let trimmed = false;
+  if (maxLength !== void 0 && inserted.length > 0) {
+    const baseLength = graphemeLength(oldValue.slice(0, expStart)) + graphemeLength(oldValue.slice(expOldEnd));
+    const budget = Math.max(0, maxLength - baseLength);
+    if (graphemeLength(inserted) > budget) {
+      inserted = clampGraphemes(inserted, budget);
+      trimmed = true;
+    }
+  }
+  const value = oldValue.slice(0, expStart) + inserted + oldValue.slice(expOldEnd);
+  const delta = expStart + inserted.length - expOldEnd;
+  const nextTokens = tokens.filter((t) => !removedTokens.includes(t)).map((t) => t.start >= expOldEnd ? { ...t, start: t.start + delta, end: t.end + delta } : t);
+  const appliedMatchesRaw = expStart === diff.start && expOldEnd === diff.oldEnd && !trimmed;
+  const caret = expStart + inserted.length;
+  const selection = appliedMatchesRaw ? newSelection : { start: caret, end: caret };
+  return {
+    value,
+    tokens: nextTokens,
+    selection: clampSelectionToValue(selection, value),
+    rejected: false,
+    trimmed,
+    removedTokens,
+    edit: { start: expStart, oldEnd: expOldEnd, newEnd: expStart + inserted.length }
+  };
+}
+function clampSelectionToValue(selection, value) {
+  const clamp = (n) => Math.max(0, Math.min(n, value.length));
+  return { start: clamp(selection.start), end: clamp(selection.end) };
+}
+function snapSelectionToTokens(tokens, selection, previous) {
+  const inside = (offset) => tokens.find((t) => t.start < offset && offset < t.end);
+  if (selection.start === selection.end) {
+    const host = inside(selection.start);
+    if (!host) return selection;
+    let caret;
+    if (previous && previous.start === previous.end && previous.start !== selection.start) {
+      caret = selection.start > previous.start ? host.end : host.start;
+    } else {
+      caret = nearestBoundary(selection.start, host);
+    }
+    return { start: caret, end: caret };
+  }
+  const startHost = inside(selection.start);
+  const endHost = inside(selection.end);
+  return {
+    start: startHost ? startHost.start : selection.start,
+    end: endHost ? endHost.end : selection.end
+  };
+}
+function expandRangeOverTokens(tokens, range) {
+  let { start, end } = range;
+  for (const token of tokens) {
+    if (token.start < end && token.end > start) {
+      start = Math.min(start, token.start);
+      end = Math.max(end, token.end);
+    }
+  }
+  return { start, end };
+}
+function commitTokenAt({ value, tokens, start, end, token }) {
+  const display = token.display;
+  const nextValue = value.slice(0, start) + display + value.slice(end);
+  const delta = display.length - (end - start);
+  const placed = { ...token, start, end: start + display.length };
+  const shifted = tokens.map(
+    (t) => t.start >= end ? { ...t, start: t.start + delta, end: t.end + delta } : t
+  );
+  const nextTokens = [...shifted, placed].sort((a, b) => a.start - b.start);
+  const caret = placed.end;
+  return { value: nextValue, tokens: nextTokens, selection: { start: caret, end: caret } };
+}
+function serializeTokens(value, tokens) {
+  const resolved = tokens.map((t) => ({
+    type: t.triggerId,
+    id: t.id,
+    display: t.display,
+    start: t.start,
+    end: t.end
+  }));
+  return { plainText: value, tokens: resolved };
+}
+function detectTypedEmoji(value, caret) {
+  const hit = detectEmojiShortcode(value.slice(0, caret));
+  if (!hit) return null;
+  return { shortcode: hit.shortcode, unicode: hit.unicode, start: caret - hit.shortcode.length };
+}
+var DEFAULT_DRAFT_DEBOUNCE_MS = 400;
+var DEFAULT_TYPING_SIGNAL_INTERVAL_MS = 3e3;
+function validateDraft(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const draft = raw;
+  if (typeof draft.value !== "string") return null;
+  if (!Array.isArray(draft.tokens)) return null;
+  if (!Array.isArray(draft.attachmentIds)) return null;
+  for (const token of draft.tokens) {
+    if (typeof token !== "object" || token === null || typeof token.start !== "number" || typeof token.end !== "number" || typeof token.display !== "string" || // The one invariant that matters: ranges must project the display.
+    draft.value.substring(token.start, token.end) !== token.display) {
+      return null;
+    }
+  }
+  return {
+    value: draft.value,
+    tokens: draft.tokens,
+    attachmentIds: draft.attachmentIds,
+    updatedAt: typeof draft.updatedAt === "number" ? draft.updatedAt : 0
+  };
+}
+function createComposer(config = {}) {
+  const now = config.now ?? (() => Date.now());
+  const generateId$1 = config.generateId ?? generateId;
+  const onEvent = config.onEvent ?? (() => void 0);
+  const triggers = (config.triggers ?? []).map(resolveTriggerConfig);
+  const draftDebounceMs = config.draftDebounceMs ?? DEFAULT_DRAFT_DEBOUNCE_MS;
+  const typingSignalIntervalMs = config.typingSignalIntervalMs ?? DEFAULT_TYPING_SIGNAL_INTERVAL_MS;
+  const emojiTrigger = triggers.find((t) => t.symbol === ":") ?? null;
+  let value = config.initialValue ?? "";
+  let tokens = [...config.initialTokens ?? []];
+  let selection = { start: value.length, end: value.length };
+  let isComposing = false;
+  let isBusy = false;
+  let disabled = false;
+  let readOnly = false;
+  let error = null;
+  let attachments = [];
+  let mode = "compose";
+  let editingMessageId;
+  let preEditSnapshot = null;
+  let activeMatch = null;
+  let dismissed = [];
+  let clipShadow = null;
+  let lastTypingAt = Number.NEGATIVE_INFINITY;
+  let draftTimer = null;
+  let destroyed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  if (config.draftStore && config.draftKey) {
+    try {
+      const draft = validateDraft(config.draftStore.read(config.draftKey));
+      if (draft) {
+        value = draft.value;
+        tokens = draft.tokens;
+        selection = { start: value.length, end: value.length };
+      }
+    } catch {
+    }
+  }
+  const suggestions = createSuggestionController({ emit: () => emit() });
+  function toActiveTriggerState(match) {
+    if (!match) return null;
+    return {
+      triggerId: match.trigger.id,
+      symbol: match.trigger.symbol,
+      symbolStart: match.symbolStart,
+      caret: match.caret,
+      query: match.query
+    };
+  }
+  function buildState() {
+    const counter = computeCounter(value, config.maxLength);
+    const overBudget = counter.remaining !== null && counter.remaining < 0;
+    return {
+      value,
+      selection,
+      isComposing,
+      isBusy,
+      disabled,
+      readOnly,
+      isEmpty: payloadFor(value).length === 0 && attachments.length === 0,
+      canSend: canSend({ text: value, attachments, disabled, readOnly, busy: isBusy }) && !overBudget,
+      error,
+      attachments: [...attachments],
+      tokens: [...tokens],
+      activeTrigger: toActiveTriggerState(activeMatch),
+      suggestion: destroyed ? CLOSED_SUGGESTION_STATE : suggestions.state,
+      counter,
+      mode,
+      editingMessageId
+    };
+  }
+  function emit() {
+    if (destroyed) return;
+    const snapshot = buildState();
+    for (const listener of listeners) listener(snapshot);
+  }
+  function shiftDismissedForEdit(editStart, editOldEnd, delta) {
+    dismissed = dismissed.map((d) => d.symbolStart >= editOldEnd ? { ...d, symbolStart: d.symbolStart + delta } : d).filter((d) => {
+      if (d.symbolStart >= editStart && d.symbolStart < editOldEnd) return false;
+      const trigger = triggers.find((t) => t.id === d.triggerId);
+      return trigger !== void 0 && value.startsWith(trigger.symbol, d.symbolStart);
+    });
+  }
+  function recomputeTriggers() {
+    const collapsed = selection.start === selection.end;
+    activeMatch = collapsed && !isComposing && !disabled && !readOnly ? detectActiveTrigger({
+      text: value,
+      caret: selection.start,
+      triggers,
+      isComposing,
+      dismissed,
+      tokenRanges: tokens
+    }) : null;
+    suggestions.sync(activeMatch);
+  }
+  function fireTypingSignal() {
+    const at = now();
+    if (at - lastTypingAt >= typingSignalIntervalMs) {
+      lastTypingAt = at;
+      onEvent({ type: "typing" });
+    }
+  }
+  function scheduleDraftWrite() {
+    if (!config.draftStore || !config.draftKey) return;
+    if (draftTimer !== null) clearTimeout(draftTimer);
+    draftTimer = setTimeout(() => {
+      draftTimer = null;
+      if (isComposing || destroyed) return;
+      config.draftStore?.write(config.draftKey, {
+        value,
+        tokens: [...tokens],
+        attachmentIds: attachments.map((a) => a.id),
+        updatedAt: now()
+      });
+    }, draftDebounceMs);
+  }
+  function cancelDraftWrite() {
+    if (draftTimer !== null) {
+      clearTimeout(draftTimer);
+      draftTimer = null;
+    }
+  }
+  function clearPersistedDraft() {
+    cancelDraftWrite();
+    if (config.draftStore && config.draftKey) config.draftStore.clear(config.draftKey);
+  }
+  function maybeCommitTypedEmoji() {
+    if (!emojiTrigger || selection.start !== selection.end) return;
+    const caretBefore = selection.start;
+    const hit = detectTypedEmoji(value, caretBefore);
+    if (!hit) return;
+    if (tokens.some((t) => t.start < caretBefore && hit.start < t.end)) return;
+    const token = {
+      triggerId: emojiTrigger.id,
+      symbol: emojiTrigger.symbol,
+      id: hit.shortcode,
+      label: hit.shortcode.slice(1, -1),
+      display: hit.unicode
+    };
+    const committed = commitTokenAt({
+      value,
+      tokens,
+      start: hit.start,
+      end: caretBefore,
+      token
+    });
+    const delta = committed.value.length - value.length;
+    value = committed.value;
+    tokens = committed.tokens;
+    selection = committed.selection;
+    shiftDismissedForEdit(hit.start, caretBefore, delta);
+  }
+  function mutateValue(newText, newSelection, opts = {}) {
+    const previousSelection = selection;
+    if (isComposing) {
+      const result2 = applyValueEdit({ oldValue: value, newValue: newText, tokens, newSelection });
+      value = result2.value;
+      tokens = result2.tokens;
+      selection = result2.selection;
+      emit();
+      return { applied: true, editStart: result2.edit?.start ?? newSelection.start };
+    }
+    const result = applyValueEdit({
+      oldValue: value,
+      newValue: newText,
+      tokens,
+      newSelection,
+      maxLength: config.maxLength
+    });
+    if (result.rejected) {
+      onEvent({ type: "edit-rejected", reason: "inside-token" });
+      selection = result.selection;
+      recomputeTriggers();
+      emit();
+      return { applied: false, editStart: 0 };
+    }
+    if (result.trimmed && opts.trimEventOnClamp !== false) {
+      onEvent({ type: "paste-trimmed" });
+    }
+    const editStart = result.edit?.start ?? newSelection.start;
+    value = result.value;
+    tokens = result.tokens;
+    selection = snapSelectionToTokens(tokens, result.selection, previousSelection);
+    if (result.edit) {
+      shiftDismissedForEdit(
+        result.edit.start,
+        result.edit.oldEnd,
+        result.edit.newEnd - result.edit.oldEnd
+      );
+    }
+    maybeCommitTypedEmoji();
+    recomputeTriggers();
+    if (!opts.programmatic) fireTypingSignal();
+    scheduleDraftWrite();
+    emit();
+    return { applied: true, editStart };
+  }
+  function buildSubmissionTokens() {
+    const plainText = payloadFor(value);
+    const leading = value.length - value.trimStart().length;
+    const serialized = serializeTokens(value, tokens);
+    return {
+      plainText,
+      tokens: serialized.tokens.map((t) => ({ ...t, start: t.start - leading, end: t.end - leading }))
+    };
+  }
+  function commitSuggestion(index) {
+    const match = activeMatch;
+    const menu = suggestions.state;
+    if (!match || !menu.isOpen) return false;
+    const item = menu.items[index ?? menu.activeIndex];
+    if (!item) return false;
+    const display = match.trigger.toDisplay(item);
+    if (config.maxLength !== void 0) {
+      const replacedSpan = value.slice(match.symbolStart, match.caret);
+      const nextLength = graphemeLength(value) - graphemeLength(replacedSpan) + graphemeLength(display);
+      if (nextLength > config.maxLength) {
+        onEvent({ type: "insert-rejected", reason: "max-length" });
+        emit();
+        return false;
+      }
+    }
+    const token = {
+      triggerId: match.trigger.id,
+      symbol: match.trigger.symbol,
+      id: item.id,
+      label: item.display,
+      display,
+      metadata: item.metadata
+    };
+    const committed = commitTokenAt({
+      value,
+      tokens,
+      start: match.symbolStart,
+      end: match.caret,
+      token
+    });
+    const delta = committed.value.length - value.length;
+    value = committed.value;
+    tokens = committed.tokens;
+    selection = committed.selection;
+    shiftDismissedForEdit(match.symbolStart, match.caret, delta);
+    suggestions.cancelDeferredDismiss();
+    activeMatch = null;
+    suggestions.sync(null);
+    scheduleDraftWrite();
+    emit();
+    return true;
+  }
+  function performSubmit() {
+    const counter = computeCounter(value, config.maxLength);
+    const overBudget = counter.remaining !== null && counter.remaining < 0;
+    if (!canSend({ text: value, attachments, disabled, readOnly, busy: isBusy }) || overBudget) {
+      return null;
+    }
+    const { plainText, tokens: submissionTokens } = buildSubmissionTokens();
+    if (config.validator) {
+      const verdict = config.validator(plainText, submissionTokens);
+      if (!verdict.isValid) {
+        error = verdict.reason ?? "Message failed validation";
+        emit();
+        return null;
+      }
+    }
+    const submission = {
+      plainText,
+      tokens: submissionTokens,
+      attachments: [...attachments],
+      replyToMessageId: config.replyToMessageId,
+      ...mode === "edit" ? { editingMessageId } : {}
+    };
+    value = "";
+    tokens = [];
+    attachments = [];
+    selection = { start: 0, end: 0 };
+    error = null;
+    activeMatch = null;
+    dismissed = [];
+    clipShadow = null;
+    mode = "compose";
+    editingMessageId = void 0;
+    preEditSnapshot = null;
+    suggestions.close();
+    clearPersistedDraft();
+    emit();
+    return submission;
+  }
+  const api = {
+    getState() {
+      return buildState();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    setValue(text, sel, opts) {
+      if (destroyed || disabled) return;
+      if (readOnly) {
+        if (text === value && sel) api.setSelection(sel);
+        return;
+      }
+      const nextSelection = sel ?? { start: text.length, end: text.length };
+      mutateValue(text, nextSelection, { programmatic: opts?.programmatic });
+    },
+    setSelection(sel) {
+      if (destroyed || disabled) return;
+      const previous = selection;
+      selection = snapSelectionToTokens(tokens, {
+        start: Math.max(0, Math.min(sel.start, value.length)),
+        end: Math.max(0, Math.min(sel.end, value.length))
+      }, previous);
+      recomputeTriggers();
+      emit();
+    },
+    insertTextAtCursor(text) {
+      if (destroyed) return;
+      if (disabled) {
+        onEvent({ type: "insert-rejected", reason: "disabled" });
+        return;
+      }
+      if (readOnly) {
+        onEvent({ type: "insert-rejected", reason: "read-only" });
+        return;
+      }
+      if (isComposing) {
+        onEvent({ type: "insert-rejected", reason: "composing" });
+        return;
+      }
+      if (config.maxLength !== void 0) {
+        const range = expandRangeOverTokens(tokens, selection);
+        const base = graphemeLength(value.slice(0, range.start)) + graphemeLength(value.slice(range.end));
+        if (base + graphemeLength(text) > config.maxLength) {
+          onEvent({ type: "insert-rejected", reason: "max-length" });
+          return;
+        }
+      }
+      const nextText = value.slice(0, selection.start) + text + value.slice(selection.end);
+      const caret = selection.start + text.length;
+      mutateValue(nextText, { start: caret, end: caret });
+    },
+    setComposing(composing) {
+      if (destroyed || isComposing === composing) return;
+      isComposing = composing;
+      if (!composing) {
+        if (config.maxLength !== void 0 && graphemeLength(value) > config.maxLength) {
+          value = clampGraphemes(value, config.maxLength);
+          tokens = tokens.filter((t) => t.end <= value.length);
+          selection = {
+            start: Math.min(selection.start, value.length),
+            end: Math.min(selection.end, value.length)
+          };
+        }
+        maybeCommitTypedEmoji();
+        recomputeTriggers();
+        scheduleDraftWrite();
+      } else {
+        activeMatch = null;
+        suggestions.sync(null);
+      }
+      emit();
+    },
+    applyEnter({ shiftPressed }) {
+      if (destroyed || disabled || readOnly) return "noop";
+      const menu = suggestions.state;
+      if (menu.isOpen && !isComposing) {
+        if (menu.items.length > 0) {
+          return commitSuggestion() ? "committed-suggestion" : "noop";
+        }
+        return "noop";
+      }
+      if (!shouldSubmitOnEnter({ shiftPressed, isComposing })) {
+        return isComposing ? "noop" : "newline";
+      }
+      return performSubmit() ? "submitted" : "noop";
+    },
+    moveSuggestionNext() {
+      suggestions.moveNext();
+      emit();
+    },
+    moveSuggestionPrevious() {
+      suggestions.movePrevious();
+      emit();
+    },
+    setSuggestionActiveIndex(index) {
+      suggestions.setActiveIndex(index);
+      emit();
+    },
+    applySuggestion(index) {
+      commitSuggestion(index);
+    },
+    dismissSuggestion() {
+      if (activeMatch) {
+        dismissed.push({ triggerId: activeMatch.trigger.id, symbolStart: activeMatch.symbolStart });
+        activeMatch = null;
+      }
+      suggestions.close();
+      emit();
+    },
+    dismissSuggestionDeferred() {
+      suggestions.dismissDeferred(() => {
+        activeMatch = null;
+        emit();
+      });
+    },
+    retrySuggestions() {
+      suggestions.retry();
+      emit();
+    },
+    addAttachment(draft) {
+      if (destroyed) return null;
+      if (config.maxAttachments !== void 0 && attachments.length >= config.maxAttachments) {
+        onEvent({ type: "attachment-rejected", reason: "max-attachments", name: draft.name });
+        return null;
+      }
+      if (config.maxAttachmentSizeBytes !== void 0 && draft.sizeBytes !== void 0 && draft.sizeBytes > config.maxAttachmentSizeBytes) {
+        onEvent({ type: "attachment-rejected", reason: "max-size", name: draft.name });
+        return null;
+      }
+      if (config.acceptAttachment) {
+        const verdict = config.acceptAttachment(draft);
+        if (verdict !== true) {
+          onEvent({
+            type: "attachment-rejected",
+            reason: "not-accepted",
+            name: draft.name,
+            ...typeof verdict === "string" ? { detail: verdict } : {}
+          });
+          return null;
+        }
+      }
+      const id = draft.id ?? generateId$1("rfr-attachment");
+      attachments = [...attachments, { ...draft, id, status: draft.status ?? "pending" }];
+      scheduleDraftWrite();
+      emit();
+      return id;
+    },
+    updateAttachment(id, patch) {
+      if (destroyed) return;
+      attachments = attachments.map((a) => a.id === id ? { ...a, ...patch, id } : a);
+      emit();
+    },
+    removeAttachment(id) {
+      if (destroyed) return;
+      attachments = attachments.filter((a) => a.id !== id);
+      scheduleDraftWrite();
+      emit();
+    },
+    setBusy(busy) {
+      if (destroyed || isBusy === busy) return;
+      isBusy = busy;
+      emit();
+    },
+    setError(nextError) {
+      if (destroyed) return;
+      error = nextError;
+      emit();
+    },
+    setDisabled(nextDisabled) {
+      if (destroyed || disabled === nextDisabled) return;
+      disabled = nextDisabled;
+      if (disabled) {
+        activeMatch = null;
+        suggestions.close();
+      }
+      emit();
+    },
+    setReadOnly(nextReadOnly) {
+      if (destroyed || readOnly === nextReadOnly) return;
+      readOnly = nextReadOnly;
+      if (readOnly) {
+        activeMatch = null;
+        suggestions.close();
+      }
+      emit();
+    },
+    beginEdit({ value: editValue, tokens: editTokens, messageId }) {
+      if (destroyed || disabled) return;
+      preEditSnapshot = { value, tokens: [...tokens], selection, attachments: [...attachments] };
+      mode = "edit";
+      editingMessageId = messageId;
+      value = editValue;
+      tokens = [...editTokens ?? []];
+      selection = { start: value.length, end: value.length };
+      activeMatch = null;
+      dismissed = [];
+      suggestions.close();
+      emit();
+    },
+    cancelEdit() {
+      if (destroyed || mode !== "edit") return;
+      const snapshot = preEditSnapshot;
+      mode = "compose";
+      editingMessageId = void 0;
+      preEditSnapshot = null;
+      if (snapshot) {
+        value = snapshot.value;
+        tokens = snapshot.tokens;
+        selection = snapshot.selection;
+        attachments = snapshot.attachments;
+      }
+      activeMatch = null;
+      suggestions.close();
+      emit();
+    },
+    copySelection() {
+      return value.slice(selection.start, selection.end);
+    },
+    cutSelection() {
+      if (destroyed || disabled || readOnly) return "";
+      if (selection.start === selection.end) return "";
+      const range = expandRangeOverTokens(tokens, selection);
+      const text = value.slice(range.start, range.end);
+      clipShadow = {
+        text,
+        tokens: tokens.filter((t) => t.start >= range.start && t.end <= range.end).map((t) => ({ ...t, start: t.start - range.start, end: t.end - range.start }))
+      };
+      const nextText = value.slice(0, range.start) + value.slice(range.end);
+      mutateValue(nextText, { start: range.start, end: range.start });
+      return text;
+    },
+    pasteText(text) {
+      if (destroyed || disabled || readOnly) return;
+      const shadow = clipShadow;
+      const range = expandRangeOverTokens(tokens, selection);
+      const nextText = value.slice(0, range.start) + text + value.slice(range.end);
+      const caret = range.start + text.length;
+      const before = value;
+      mutateValue(nextText, { start: caret, end: caret }, { trimEventOnClamp: true });
+      if (shadow && text === shadow.text && value === before.slice(0, range.start) + text + before.slice(range.end)) {
+        const restored = shadow.tokens.map((t) => ({
+          ...t,
+          start: t.start + range.start,
+          end: t.end + range.start
+        }));
+        tokens = [...tokens, ...restored].sort((a, b) => a.start - b.start);
+        emit();
+      }
+    },
+    submit() {
+      if (destroyed) return null;
+      return performSubmit();
+    },
+    reset() {
+      if (destroyed) return;
+      cancelDraftWrite();
+      suggestions.close();
+      value = config.initialValue ?? "";
+      tokens = [...config.initialTokens ?? []];
+      selection = { start: value.length, end: value.length };
+      isComposing = false;
+      isBusy = false;
+      error = null;
+      attachments = [];
+      mode = "compose";
+      editingMessageId = void 0;
+      preEditSnapshot = null;
+      activeMatch = null;
+      dismissed = [];
+      clipShadow = null;
+      lastTypingAt = Number.NEGATIVE_INFINITY;
+      recomputeTriggers();
+      emit();
+    },
+    serialize() {
+      return serializeTokens(value, tokens);
+    },
+    destroy() {
+      if (destroyed) return;
+      cancelDraftWrite();
+      suggestions.destroy();
+      listeners.clear();
+      destroyed = true;
+    }
+  };
+  return api;
+}
+var composerSurfaceVariants = cva({
+  base: [
+    "overflow-hidden rounded-2xl border shadow-sm",
+    "transition-[box-shadow,border-color,background-color] duration-150 ease-out",
+    "focus-within:ring-1 focus-within:ring-ring focus-within:shadow-md",
+    "motion-reduce:transition-none"
+  ].join(" "),
+  variants: {
+    surface: {
+      outlined: "border-border bg-background focus-within:border-ring",
+      filled: "border-border/50 bg-muted/50 focus-within:border-ring/70 focus-within:bg-background"
+    },
+    disabled: {
+      true: "pointer-events-none opacity-60",
+      false: ""
+    },
+    error: {
+      true: "border-destructive/50",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    surface: "outlined",
+    disabled: "false",
+    error: "false"
+  }
+});
+var composerFieldClass = "block w-full resize-none bg-transparent px-3.5 py-3 text-sm placeholder:text-muted-foreground focus:outline-none";
+var composerTrayClass = "flex flex-wrap gap-2 px-3 pt-3";
+var composerAttachmentChipVariants = cva({
+  base: [
+    "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs",
+    "origin-left transition-all duration-150 ease-out motion-reduce:transition-none"
+  ].join(" "),
+  variants: {
+    status: {
+      pending: "opacity-70",
+      uploading: "opacity-70",
+      ready: "",
+      error: "text-destructive"
+    },
+    exiting: {
+      true: "scale-90 opacity-0 motion-reduce:scale-100",
+      false: "motion-safe:animate-fade-in-scale"
+    }
+  },
+  defaultVariants: {
+    status: "pending",
+    exiting: "false"
+  }
+});
+var composerTokenPillClass = "rounded bg-accent/40 px-0.5 text-accent-foreground";
+var composerMenuClass = "z-20 w-72 overflow-hidden rounded-xl border border-border bg-popover shadow-lg origin-bottom motion-safe:animate-fade-in-scale";
+var composerAccessoryPanelClass = "border-t border-border motion-safe:animate-fade-in";
+var composerAccessoryToggleVariants = cva({
+  base: "flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  variants: {
+    active: {
+      true: "bg-accent text-foreground",
+      false: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    active: "false"
+  }
+});
+var composerMenuItemVariants = cva({
+  base: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm",
+  variants: {
+    active: {
+      true: "bg-accent",
+      false: "hover:bg-accent/50"
+    }
+  },
+  defaultVariants: {
+    active: "false"
+  }
+});
+var composerCounterVariants = cva({
+  base: "text-xs tabular-nums",
+  variants: {
+    overLimit: {
+      true: "font-medium text-destructive",
+      false: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    overLimit: "false"
+  }
+});
+var composerPrimaryActionVariants = cva({
+  base: "flex h-9 w-9 items-center justify-center rounded-full transition-all duration-150 ease-out active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 motion-safe:animate-scale-in",
+  variants: {
+    enabled: {
+      true: "bg-primary text-primary-foreground hover:opacity-90",
+      false: "bg-muted text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    enabled: "false"
+  }
+});
+function createEmojiTrigger(options = {}) {
+  const { id = "emoji", symbol = ":", maxResults = 8, minQueryLength = 1 } = options;
+  return {
+    id,
+    symbol,
+    // The committed token is the glyph itself, not `:name:`.
+    toDisplay: (candidate) => candidate.metadata?.emoji ?? candidate.display,
+    resolve: (query) => {
+      if (query.length < minQueryLength) return [];
+      return searchEmojis(query, maxResults).map((entry) => ({
+        id: `${entry.shortcode}`,
+        display: `${entry.emoji} :${entry.shortcode}:`,
+        subtitle: entry.name,
+        metadata: { emoji: entry.emoji, shortcode: entry.shortcode }
+      }));
+    }
+  };
+}
+
+// ../react-composer/dist/index.js
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function useComposer(config = {}, init) {
+  const configRef = React2.useRef(config);
+  const initRef = React2.useRef(init);
+  const coreRef = React2.useRef(null);
+  const getCore = React2.useCallback(() => {
+    if (coreRef.current === null) {
+      const api = createComposer(configRef.current);
+      initRef.current?.(api);
+      coreRef.current = { api, snapshot: api.getState() };
+    }
+    return coreRef.current;
+  }, []);
+  const subscribe = React2.useCallback(
+    (onStoreChange) => {
+      const core = getCore();
+      return core.api.subscribe((next) => {
+        core.snapshot = next;
+        onStoreChange();
+      });
+    },
+    [getCore]
+  );
+  const getSnapshot = React2.useCallback(() => getCore().snapshot, [getCore]);
+  const state = React2.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  React2.useEffect(
+    () => () => {
+      coreRef.current?.api.destroy();
+      coreRef.current = null;
+    },
+    []
+  );
+  return { state, api: getCore().api };
+}
+var FIELD_LINE_HEIGHT = 1.5;
+var FIELD_VERTICAL_PADDING_REM = 1.5;
+var TRIMMED_NOTICE_HIDE_MS = 4e3;
+var CHIP_EXIT_MS = 150;
+function fieldHeightFor(lines) {
+  return `calc(${lines * FIELD_LINE_HEIGHT}em + ${FIELD_VERTICAL_PADDING_REM}rem)`;
+}
+var DEFAULT_COMPOSER_STRINGS = {
+  composerLabel: "Message composer",
+  messageLabel: "Message",
+  sendLabel: "Send",
+  stopLabel: "Stop",
+  attachLabel: "Attach a file",
+  removeAttachmentLabel: (name) => `Remove attachment ${name}`,
+  suggestionsLabel: "Suggestions",
+  noMatchesLabel: (query) => `No matches for "${query}"`,
+  loadingLabel: "Loading suggestions\u2026",
+  retryLabel: "Retry",
+  trimmedNotice: "Pasted text was trimmed to fit the length limit",
+  counterLabel: (remaining) => `${remaining} characters remaining`,
+  editingLabel: "Editing message",
+  cancelEditLabel: "Cancel edit",
+  accessoryPanelLabel: "Emoji and stickers",
+  resultsAnnouncement: (count) => `${count} suggestions available`
+};
+function useLatestRef(value) {
+  const ref = React2.useRef(value);
+  ref.current = value;
+  return ref;
+}
+function kindFromMime(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  return "file";
+}
+function segmentValue(value, tokens) {
+  const segments = [];
+  let cursor = 0;
+  for (const token of tokens) {
+    if (token.start > cursor) {
+      segments.push({ key: `p${cursor}`, text: value.slice(cursor, token.start), isToken: false });
+    }
+    segments.push({ key: `t${token.start}`, text: value.slice(token.start, token.end), isToken: true });
+    cursor = token.end;
+  }
+  if (cursor < value.length) {
+    segments.push({ key: `p${cursor}`, text: value.slice(cursor), isToken: false });
+  }
+  return segments;
+}
+var iconSvgProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  width: 16,
+  height: 16,
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+function IconArrowUp() {
+  return /* @__PURE__ */ jsxs("svg", { ...iconSvgProps, children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 19V5" }),
+    /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7" })
+  ] });
+}
+function IconStop() {
+  return /* @__PURE__ */ jsx("svg", { ...iconSvgProps, children: /* @__PURE__ */ jsx("rect", { x: 7, y: 7, width: 10, height: 10, rx: 1.5 }) });
+}
+function IconSmiley() {
+  return /* @__PURE__ */ jsxs("svg", { ...iconSvgProps, children: [
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 9 }),
+    /* @__PURE__ */ jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 9h.01M15 9h.01" })
+  ] });
+}
+var RefractionComposer = React2.forwardRef(
+  function RefractionComposer2({
+    value: valueProp,
+    defaultValue,
+    onChange,
+    placeholder,
+    disabledPlaceholder,
+    minLines = 1,
+    maxLines = 6,
+    maxLength,
+    maxAttachments,
+    disabled = false,
+    readOnly = false,
+    busy = false,
+    onStop,
+    surface = "outlined",
+    accessoryPanel,
+    accessoryPanelOpen,
+    defaultAccessoryPanelOpen = false,
+    onAccessoryPanelToggle,
+    autoFocus,
+    dir,
+    triggers,
+    submitOnEnter,
+    strings: stringsProp,
+    leading,
+    trailing,
+    primaryAction,
+    renderSuggestion,
+    initialAttachments,
+    draftStore,
+    draftKey,
+    validator,
+    replyToMessageId,
+    onSubmit,
+    onEditLastRequested,
+    onEditCancel,
+    onTypingActivity,
+    onAttachmentAdd,
+    onAttachmentRejected,
+    onEvent,
+    apiRef,
+    id,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const strings = React2.useMemo(
+      () => ({ ...DEFAULT_COMPOSER_STRINGS, ...stringsProp }),
+      [stringsProp]
+    );
+    const onSubmitRef = useLatestRef(onSubmit);
+    const onChangeRef = useLatestRef(onChange);
+    const onStopRef = useLatestRef(onStop);
+    const onEventRef = useLatestRef(onEvent);
+    const onTypingActivityRef = useLatestRef(onTypingActivity);
+    const onAttachmentAddRef = useLatestRef(onAttachmentAdd);
+    const onAttachmentRejectedRef = useLatestRef(onAttachmentRejected);
+    const onEditLastRequestedRef = useLatestRef(onEditLastRequested);
+    const onEditCancelRef = useLatestRef(onEditCancel);
+    const onAccessoryPanelToggleRef = useLatestRef(onAccessoryPanelToggle);
+    const [trimmedNoticeVisible, setTrimmedNoticeVisible] = React2.useState(false);
+    const trimmedTimerRef = React2.useRef(null);
+    const [panelOpenInternal, setPanelOpenInternal] = React2.useState(defaultAccessoryPanelOpen);
+    const panelControlled = accessoryPanelOpen !== void 0;
+    const panelOpen = panelControlled ? accessoryPanelOpen : panelOpenInternal;
+    const togglePanel = React2.useCallback(() => {
+      const next = !(panelControlled ? accessoryPanelOpen : panelOpenInternal);
+      if (!panelControlled) setPanelOpenInternal(next);
+      onAccessoryPanelToggleRef.current?.(next);
+    }, [panelControlled, accessoryPanelOpen, panelOpenInternal, onAccessoryPanelToggleRef]);
+    const [exitingAttachments, setExitingAttachments] = React2.useState(
+      () => /* @__PURE__ */ new Set()
+    );
+    const exitTimersRef = React2.useRef(/* @__PURE__ */ new Map());
+    const configRef = React2.useRef(null);
+    if (configRef.current === null) {
+      configRef.current = {
+        initialValue: valueProp ?? defaultValue ?? "",
+        minLines,
+        maxLines,
+        triggers,
+        onEvent: (event) => {
+          if (event.type === "typing") onTypingActivityRef.current?.();
+          if (event.type === "attachment-rejected") onAttachmentRejectedRef.current?.(event);
+          if (event.type === "paste-trimmed") {
+            setTrimmedNoticeVisible(true);
+            if (trimmedTimerRef.current !== null) clearTimeout(trimmedTimerRef.current);
+            trimmedTimerRef.current = setTimeout(() => {
+              trimmedTimerRef.current = null;
+              setTrimmedNoticeVisible(false);
+            }, TRIMMED_NOTICE_HIDE_MS);
+          }
+          onEventRef.current?.(event);
+        }
+      };
+    }
+    configRef.current.maxLength = maxLength;
+    configRef.current.maxAttachments = maxAttachments;
+    configRef.current.validator = validator;
+    configRef.current.replyToMessageId = replyToMessageId;
+    configRef.current.draftStore = draftStore;
+    configRef.current.draftKey = draftKey;
+    const { state, api } = useComposer(configRef.current, (core) => {
+      for (const draft of initialAttachments ?? []) core.addAttachment(draft);
+      if (disabled) core.setDisabled(true);
+      if (readOnly) core.setReadOnly(true);
+      if (busy) core.setBusy(true);
+    });
+    React2.useEffect(() => {
+      const exitTimers = exitTimersRef.current;
+      return () => {
+        if (trimmedTimerRef.current !== null) clearTimeout(trimmedTimerRef.current);
+        for (const timer of exitTimers.values()) clearTimeout(timer);
+        exitTimers.clear();
+      };
+    }, []);
+    const textareaRef = React2.useRef(null);
+    const highlightRef = React2.useRef(null);
+    const rootRef = React2.useRef(null);
+    const mergedTextareaRef = React2.useCallback(
+      (node) => {
+        textareaRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    const idBase = React2.useRef(id ?? generateId("composer")).current;
+    const listId = `${idBase}-listbox`;
+    const optionId = (index) => `${idBase}-option-${index}`;
+    React2.useEffect(() => {
+      if (!apiRef) return;
+      if (typeof apiRef === "function") {
+        apiRef(api);
+        return () => {
+          apiRef(null);
+        };
+      }
+      const mutableRef = apiRef;
+      mutableRef.current = api;
+      return () => {
+        mutableRef.current = null;
+      };
+    }, [apiRef, api]);
+    React2.useEffect(() => {
+      api.setDisabled(disabled);
+    }, [api, disabled]);
+    React2.useEffect(() => {
+      api.setReadOnly(readOnly);
+    }, [api, readOnly]);
+    React2.useEffect(() => {
+      api.setBusy(busy);
+    }, [api, busy]);
+    React2.useEffect(() => {
+      if (valueProp === void 0) return;
+      const current = api.getState();
+      if (current.disabled || current.readOnly || current.value === valueProp) return;
+      api.setValue(
+        valueProp,
+        { start: valueProp.length, end: valueProp.length },
+        { programmatic: true }
+      );
+    }, [api, valueProp, state.value]);
+    const withValueChange = React2.useCallback(
+      (mutate) => {
+        const before = api.getState().value;
+        const result = mutate();
+        const after = api.getState().value;
+        if (after !== before) onChangeRef.current?.(after);
+        return result;
+      },
+      [api, onChangeRef]
+    );
+    const [coarsePointer, setCoarsePointer] = React2.useState(false);
+    React2.useEffect(() => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+      const query = window.matchMedia("(pointer: coarse)");
+      const update = () => setCoarsePointer(query.matches);
+      update();
+      query.addEventListener?.("change", update);
+      return () => query.removeEventListener?.("change", update);
+    }, []);
+    const submitEnabled = submitOnEnter ?? !coarsePointer;
+    React2.useEffect(() => {
+      const el = textareaRef.current;
+      if (!el) return;
+      if (el.value !== state.value) el.value = state.value;
+      if (document.activeElement === el && (el.selectionStart !== state.selection.start || el.selectionEnd !== state.selection.end)) {
+        el.setSelectionRange(state.selection.start, state.selection.end);
+      }
+    }, [state.value, state.selection.start, state.selection.end]);
+    const readSelection = (el) => ({
+      start: el.selectionStart ?? el.value.length,
+      end: el.selectionEnd ?? el.value.length
+    });
+    const handleChange = (event) => {
+      const el = event.currentTarget;
+      withValueChange(() => api.setValue(el.value, readSelection(el)));
+    };
+    const handleSelect = (event) => {
+      const el = event.currentTarget;
+      const next = readSelection(el);
+      const current = api.getState().selection;
+      if (next.start !== current.start || next.end !== current.end) {
+        api.setSelection(next);
+      }
+    };
+    const submitNow = React2.useCallback(() => {
+      const submission = withValueChange(() => api.submit());
+      if (submission) onSubmitRef.current?.(submission);
+      return submission !== null;
+    }, [api, onSubmitRef, withValueChange]);
+    const handleKeyDown = (event) => {
+      const snapshot = api.getState();
+      const menuOpen2 = snapshot.suggestion.isOpen && !snapshot.isComposing;
+      const hasMenuItems = snapshot.suggestion.items.length > 0;
+      if (menuOpen2) {
+        if (event.key === "ArrowDown" && hasMenuItems) {
+          event.preventDefault();
+          api.moveSuggestionNext();
+          return;
+        }
+        if (event.key === "ArrowUp" && hasMenuItems) {
+          event.preventDefault();
+          api.moveSuggestionPrevious();
+          return;
+        }
+        if (event.key === "Tab" && hasMenuItems) {
+          event.preventDefault();
+          withValueChange(() => api.applySuggestion());
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          api.dismissSuggestion();
+          return;
+        }
+      }
+      if (event.key === "Escape" && !menuOpen2 && snapshot.mode === "edit") {
+        event.preventDefault();
+        withValueChange(() => api.cancelEdit());
+        onEditCancelRef.current?.();
+        return;
+      }
+      if (event.key === "ArrowUp" && !menuOpen2 && !snapshot.isComposing && snapshot.value === "" && onEditLastRequestedRef.current) {
+        event.preventDefault();
+        onEditLastRequestedRef.current();
+        return;
+      }
+      if (event.key === "Enter") {
+        if (menuOpen2) {
+          event.preventDefault();
+          withValueChange(() => api.applyEnter({ shiftPressed: event.shiftKey }));
+          return;
+        }
+        if (snapshot.isComposing) return;
+        if (event.shiftKey || !submitEnabled) return;
+        event.preventDefault();
+        if (snapshot.disabled || snapshot.readOnly) return;
+        submitNow();
+      }
+    };
+    const handleCompositionStart = () => api.setComposing(true);
+    const handleCompositionEnd = () => withValueChange(() => api.setComposing(false));
+    const handleCopy = (event) => {
+      const text = api.copySelection();
+      if (text === "") return;
+      event.preventDefault();
+      event.clipboardData.setData("text/plain", text);
+    };
+    const handleCut = (event) => {
+      event.preventDefault();
+      const text = withValueChange(() => api.cutSelection());
+      if (text !== "") event.clipboardData.setData("text/plain", text);
+    };
+    const addFiles = React2.useCallback(
+      (files) => {
+        for (const file of Array.from(files)) {
+          const previewUrl = typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : void 0;
+          const attachmentId = api.addAttachment({
+            kind: kindFromMime(file.type),
+            name: file.name,
+            mimeType: file.type || void 0,
+            sizeBytes: file.size,
+            previewUrl
+          });
+          if (attachmentId === null) {
+            if (previewUrl !== void 0) URL.revokeObjectURL(previewUrl);
+            continue;
+          }
+          const added = api.getState().attachments.find((a) => a.id === attachmentId);
+          if (added) onAttachmentAddRef.current?.(added);
+        }
+      },
+      [api, onAttachmentAddRef]
+    );
+    const releasePreview = (previewUrl) => {
+      if (previewUrl !== void 0 && typeof URL !== "undefined" && typeof URL.revokeObjectURL === "function") {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+    const removeAttachment = React2.useCallback(
+      (id2, previewUrl) => {
+        const finish = () => {
+          api.removeAttachment(id2);
+          releasePreview(previewUrl);
+          exitTimersRef.current.delete(id2);
+          setExitingAttachments((prev) => {
+            if (!prev.has(id2)) return prev;
+            const next = new Set(prev);
+            next.delete(id2);
+            return next;
+          });
+        };
+        if (prefersReducedMotion() || exitTimersRef.current.has(id2)) {
+          if (!exitTimersRef.current.has(id2)) finish();
+          return;
+        }
+        setExitingAttachments((prev) => new Set(prev).add(id2));
+        exitTimersRef.current.set(id2, setTimeout(finish, CHIP_EXIT_MS));
+      },
+      [api]
+    );
+    const handlePaste = (event) => {
+      const files = event.clipboardData?.files;
+      if (files && files.length > 0) {
+        event.preventDefault();
+        addFiles(files);
+        return;
+      }
+      event.preventDefault();
+      withValueChange(() => api.pasteText(event.clipboardData?.getData("text/plain") ?? ""));
+    };
+    const [dragActive, setDragActive] = React2.useState(false);
+    const dragHasPayload = (event) => {
+      const types = event.dataTransfer ? Array.from(event.dataTransfer.types ?? []) : [];
+      return types.includes("Files") || types.includes("text/plain");
+    };
+    const handleDragOver = (event) => {
+      if (!dragHasPayload(event)) return;
+      event.preventDefault();
+      setDragActive(true);
+    };
+    const handleDragLeave = () => setDragActive(false);
+    const handleDrop = (event) => {
+      event.preventDefault();
+      setDragActive(false);
+      const transfer = event.dataTransfer;
+      if (!transfer) return;
+      if (transfer.files && transfer.files.length > 0) {
+        addFiles(transfer.files);
+        return;
+      }
+      const text = transfer.getData("text/plain");
+      if (text) withValueChange(() => api.pasteText(text));
+    };
+    const handleBlur = () => api.dismissSuggestionDeferred();
+    const handleScroll = (event) => {
+      if (highlightRef.current) {
+        highlightRef.current.scrollTop = event.currentTarget.scrollTop;
+      }
+    };
+    const hasTriggers = (triggers?.length ?? 0) > 0;
+    const menuOpen = state.suggestion.isOpen;
+    const visibleItems = state.suggestion.visibleItems;
+    const activeIndex = state.suggestion.activeIndex;
+    const [menuSide, setMenuSide] = React2.useState("above");
+    const [menuMaxHeight, setMenuMaxHeight] = React2.useState(void 0);
+    React2.useLayoutEffect(() => {
+      if (!menuOpen) return;
+      const measure = () => {
+        const el = rootRef.current;
+        if (el === null) return;
+        const rect = el.getBoundingClientRect();
+        const spaceAbove = rect.top;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const side = spaceAbove >= spaceBelow ? "above" : "below";
+        setMenuSide(side);
+        setMenuMaxHeight(Math.max(96, (side === "above" ? spaceAbove : spaceBelow) - 16));
+      };
+      measure();
+      window.addEventListener("resize", measure);
+      window.addEventListener("scroll", measure, true);
+      return () => {
+        window.removeEventListener("resize", measure);
+        window.removeEventListener("scroll", measure, true);
+      };
+    }, [menuOpen]);
+    const hasText = state.value.trim().length > 0;
+    const effectivePlaceholder = state.disabled && disabledPlaceholder !== void 0 ? disabledPlaceholder : placeholder;
+    const segments = React2.useMemo(
+      () => segmentValue(state.value, state.tokens),
+      [state.value, state.tokens]
+    );
+    const primaryContext = {
+      hasText,
+      canSend: state.canSend,
+      busy: state.isBusy
+    };
+    const defaultPrimaryAction = state.isBusy ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": strings.stopLabel,
+        className: composerPrimaryActionVariants({ enabled: "true" }),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => onStopRef.current?.(),
+        children: /* @__PURE__ */ jsx(IconStop, {})
+      },
+      "stop"
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": strings.sendLabel,
+        disabled: !state.canSend,
+        className: composerPrimaryActionVariants({ enabled: state.canSend ? "true" : "false" }),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: submitNow,
+        children: /* @__PURE__ */ jsx(IconArrowUp, {})
+      },
+      "send"
+    );
+    const menuBody = () => {
+      if (state.suggestion.loading) {
+        return /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: strings.loadingLabel });
+      }
+      if (state.suggestion.error !== null) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-sm text-destructive", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: state.suggestion.error }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "font-medium underline",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => api.retrySuggestions(),
+              children: strings.retryLabel
+            }
+          )
+        ] });
+      }
+      if (visibleItems.length === 0) {
+        return /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: strings.noMatchesLabel(state.activeTrigger?.query ?? "") });
+      }
+      return visibleItems.map((candidate, index) => {
+        const active = index === activeIndex;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            id: optionId(index),
+            "aria-selected": active,
+            className: composerMenuItemVariants({ active: active ? "true" : "false" }),
+            onMouseEnter: () => api.setSuggestionActiveIndex(index),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => withValueChange(() => api.applySuggestion(index)),
+            children: renderSuggestion ? renderSuggestion(candidate, { active, index }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: candidate.display }),
+              candidate.subtitle !== void 0 && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: candidate.subtitle })
+            ] })
+          },
+          candidate.id
+        );
+      });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: rootRef,
+        id: idBase,
+        dir,
+        role: "form",
+        "aria-label": strings.composerLabel,
+        className: cn("relative", className),
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [
+          menuOpen && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listId,
+              role: "listbox",
+              "aria-label": strings.suggestionsLabel,
+              className: cn(
+                composerMenuClass,
+                "absolute start-0",
+                menuSide === "above" ? "bottom-full mb-2" : "top-full mt-2 origin-top"
+              ),
+              style: menuMaxHeight !== void 0 ? { maxHeight: menuMaxHeight, overflowY: "auto" } : void 0,
+              children: menuBody()
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-dragover": dragActive ? "" : void 0,
+              className: cn(
+                composerSurfaceVariants({
+                  surface,
+                  disabled: state.disabled ? "true" : "false",
+                  error: state.error !== null ? "true" : "false"
+                }),
+                dragActive && "border-primary/60 shadow-md"
+              ),
+              children: [
+                state.error !== null && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    role: "alert",
+                    className: "flex items-center gap-2 border-b border-border bg-destructive/5 px-3 py-2 text-xs text-destructive",
+                    children: /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: state.error })
+                  }
+                ),
+                state.mode === "edit" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: strings.editingLabel }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "font-medium underline",
+                      onClick: () => {
+                        withValueChange(() => api.cancelEdit());
+                        onEditCancelRef.current?.();
+                      },
+                      children: strings.cancelEditLabel
+                    }
+                  )
+                ] }),
+                trimmedNoticeVisible && /* @__PURE__ */ jsx("div", { role: "status", className: "px-3 pt-2 text-xs text-muted-foreground", children: strings.trimmedNotice }),
+                state.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: composerTrayClass, children: state.attachments.map((attachment) => /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: composerAttachmentChipVariants({
+                      status: attachment.status,
+                      exiting: exitingAttachments.has(attachment.id) ? "true" : "false"
+                    }),
+                    children: [
+                      attachment.name,
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": strings.removeAttachmentLabel(attachment.name),
+                          className: "text-muted-foreground hover:text-destructive",
+                          onClick: () => removeAttachment(attachment.id, attachment.previewUrl),
+                          children: "\u2715"
+                        }
+                      )
+                    ]
+                  },
+                  attachment.id
+                )) }),
+                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ref: highlightRef,
+                      "aria-hidden": "true",
+                      className: cn(
+                        composerFieldClass,
+                        "pointer-events-none overflow-hidden whitespace-pre-wrap break-words text-transparent"
+                      ),
+                      style: {
+                        lineHeight: FIELD_LINE_HEIGHT,
+                        minHeight: fieldHeightFor(minLines),
+                        maxHeight: fieldHeightFor(maxLines)
+                      },
+                      children: [
+                        segments.map(
+                          (segment) => segment.isToken ? /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "data-token": "",
+                              className: cn(composerTokenPillClass, "px-0 text-transparent"),
+                              children: /* @__PURE__ */ jsx("bdi", { children: segment.text })
+                            },
+                            segment.key
+                          ) : /* @__PURE__ */ jsx("span", { children: segment.text }, segment.key)
+                        ),
+                        "\u200B"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      ref: mergedTextareaRef,
+                      id: `${idBase}-input`,
+                      rows: minLines,
+                      value: state.value,
+                      placeholder: effectivePlaceholder,
+                      disabled: state.disabled,
+                      readOnly: state.readOnly,
+                      autoFocus,
+                      "aria-multiline": "true",
+                      "aria-label": strings.messageLabel,
+                      ...hasTriggers ? {
+                        "aria-autocomplete": "list",
+                        "aria-expanded": menuOpen,
+                        "aria-controls": listId,
+                        "aria-activedescendant": menuOpen && visibleItems.length > 0 ? optionId(activeIndex) : void 0
+                      } : {},
+                      className: cn(
+                        composerFieldClass,
+                        "absolute inset-0 h-full overflow-y-auto focus-visible:outline-none"
+                      ),
+                      style: { lineHeight: FIELD_LINE_HEIGHT, maxHeight: fieldHeightFor(maxLines) },
+                      onChange: handleChange,
+                      onSelect: handleSelect,
+                      onKeyDown: handleKeyDown,
+                      onCompositionStart: handleCompositionStart,
+                      onCompositionEnd: handleCompositionEnd,
+                      onCopy: handleCopy,
+                      onCut: handleCut,
+                      onPaste: handlePaste,
+                      onBlur: handleBlur,
+                      onScroll: handleScroll
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 px-2 pb-2", children: [
+                  accessoryPanel !== void 0 && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": strings.accessoryPanelLabel,
+                      "aria-expanded": panelOpen,
+                      "aria-controls": `${idBase}-accessory`,
+                      className: composerAccessoryToggleVariants({ active: panelOpen ? "true" : "false" }),
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: togglePanel,
+                      children: /* @__PURE__ */ jsx(IconSmiley, {})
+                    }
+                  ),
+                  leading,
+                  /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                  state.counter.visible && state.counter.remaining !== null && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-live": state.counter.overLimit ? "polite" : void 0,
+                      className: cn(
+                        composerCounterVariants({
+                          overLimit: state.counter.overLimit ? "true" : "false"
+                        }),
+                        "me-2"
+                      ),
+                      children: strings.counterLabel(state.counter.remaining)
+                    }
+                  ),
+                  trailing,
+                  primaryAction ? primaryAction(primaryContext) : defaultPrimaryAction
+                ] }),
+                accessoryPanel !== void 0 && panelOpen && /* @__PURE__ */ jsx("div", { id: `${idBase}-accessory`, className: composerAccessoryPanelClass, children: accessoryPanel })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "sr-only", children: menuOpen && !state.suggestion.loading && state.suggestion.error === null ? visibleItems.length === 0 ? strings.noMatchesLabel(state.activeTrigger?.query ?? "") : strings.resultsAnnouncement(visibleItems.length) : "" })
+        ]
+      }
+    );
+  }
+);
+export {
+  DEFAULT_COMPOSER_STRINGS,
+  RefractionComposer,
+  composerAccessoryPanelClass,
+  composerAccessoryToggleVariants,
+  composerAttachmentChipVariants,
+  composerCounterVariants,
+  composerFieldClass,
+  composerMenuClass,
+  composerMenuItemVariants,
+  composerPrimaryActionVariants,
+  composerSurfaceVariants,
+  composerTokenPillClass,
+  composerTrayClass,
+  createComposer,
+  createEmojiTrigger,
+  toMessageAttachment,
+  useComposer
+};
+//# sourceMappingURL=react-composer.js.map