@efolusi/meridian 1.5.0

package/ai/Player.js

@@ -0,0 +1,201 @@
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-player{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);font-family:var(--font-sans)}
+.ef-player__top{display:flex;align-items:center;gap:10px}
+.ef-player__title{flex:1;min-width:0;font-size:13.5px;font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ef-player__meta{font-size:12px;color:var(--text-muted)}
+.ef-player__wave{position:relative;display:flex;align-items:center;justify-content:space-between;height:44px;cursor:pointer;touch-action:none}
+.ef-player__bar{flex:none;width:2.5px;border-radius:var(--radius-full);background:var(--sand-300,#D9D2C3);transition:background .2s var(--ease-out)}
+.ef-player__bar--played{background:var(--accent)}
+.ef-player__bar--loading{animation:ef-player-load 1.2s ease-in-out infinite}
+@keyframes ef-player-load{0%,100%{transform:scaleY(.3);opacity:.5}50%{transform:scaleY(1);opacity:1}}
+.ef-player__row{display:flex;align-items:center;gap:6px}
+.ef-player__btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-full);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
+.ef-player__btn:hover{color:var(--text-primary);background:var(--surface-subtle)}
+.ef-player__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-player__play{width:38px;height:38px;background:var(--accent);color:var(--accent-contrast)}
+.ef-player__play:hover{background:var(--accent-hover);color:var(--accent-contrast)}
+.ef-player__time{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
+`;
+export function formatTime(s, hint) {
+  const t = Math.max(0, Math.floor(s || 0));
+  const h = Math.floor(t / 3600),
+    m = Math.floor(t % 3600 / 60),
+    sec = t % 60;
+  if ((hint || t) >= 3600) return h + ':' + String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
+  return m + ':' + String(sec).padStart(2, '0');
+}
+function pseudoPeaks(seedStr, n) {
+  const s = seedStr || 'ef';
+  let seed = 0;
+  for (let i = 0; i < s.length; i++) seed = (seed * 31 + s.charCodeAt(i)) % 9973;
+  const out = [];
+  for (let i = 0; i < n; i++) {
+    const v = Math.abs(Math.sin(seed + i * 0.83) * 0.6 + Math.sin(seed * 2 + i * 0.31) * 0.4);
+    out.push(0.18 + 0.82 * Math.min(1, v));
+  }
+  return out;
+}
+export const Player = /*#__PURE__*/React.forwardRef(function Player({
+  src,
+  title,
+  meta,
+  peaks,
+  samples = 72,
+  onTimeChange,
+  style,
+  className
+}, ref) {
+  injectEfCss('ef-css-player', CSS);
+  const audio = React.useRef(null);
+  const wave = React.useRef(null);
+  const [playing, setPlaying] = React.useState(false);
+  const [t, setT] = React.useState(0);
+  const [dur, setDur] = React.useState(0);
+  const [muted, setMuted] = React.useState(false);
+  const bars = React.useMemo(() => peaks || pseudoPeaks(src, samples), [peaks, src, samples]);
+  const write = next => {
+    setT(next);
+    if (onTimeChange) onTimeChange(next);
+  };
+  React.useEffect(() => {
+    const a = audio.current;
+    if (!a) return;
+    const onT = () => write(a.currentTime);
+    const onD = () => setDur(isFinite(a.duration) ? a.duration : 0);
+    const onP = () => setPlaying(true),
+      onPa = () => setPlaying(false);
+    a.addEventListener('timeupdate', onT);
+    a.addEventListener('durationchange', onD);
+    a.addEventListener('loadedmetadata', onD);
+    a.addEventListener('play', onP);
+    a.addEventListener('pause', onPa);
+    a.addEventListener('ended', onPa);
+    return () => {
+      a.removeEventListener('timeupdate', onT);
+      a.removeEventListener('durationchange', onD);
+      a.removeEventListener('loadedmetadata', onD);
+      a.removeEventListener('play', onP);
+      a.removeEventListener('pause', onPa);
+      a.removeEventListener('ended', onPa);
+    };
+  }, [src]);
+  React.useEffect(() => {
+    if (!playing) return;
+    let raf;
+    const tick = () => {
+      if (audio.current) write(audio.current.currentTime);
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [playing]);
+  const jumpTo = s => {
+    const a = audio.current;
+    const v = Math.max(0, Math.min(s, dur || s));
+    write(v);
+    if (a) a.currentTime = v;
+  };
+  const toggle = () => {
+    const a = audio.current;
+    if (!a) return;
+    if (a.paused) a.play().catch(() => {});else a.pause();
+  };
+  React.useImperativeHandle(ref, () => ({
+    jumpTo,
+    play: () => audio.current && audio.current.play(),
+    pause: () => audio.current && audio.current.pause()
+  }), [dur]);
+  const seekFromPointer = e => {
+    const el = wave.current;
+    if (!el || !dur) return;
+    const r = el.getBoundingClientRect();
+    jumpTo(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * dur);
+  };
+  const onPointerDown = e => {
+    seekFromPointer(e);
+    const el = e.currentTarget;
+    el.setPointerCapture(e.pointerId);
+    const move = ev => seekFromPointer(ev);
+    const up = () => {
+      el.removeEventListener('pointermove', move);
+      el.removeEventListener('pointerup', up);
+    };
+    el.addEventListener('pointermove', move);
+    el.addEventListener('pointerup', up);
+  };
+  const ratio = dur > 0 ? Math.min(t / dur, 1) : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `ef-player${className ? ' ' + className : ''}`,
+    style: style
+  }, src ? /*#__PURE__*/React.createElement("audio", {
+    ref: audio,
+    src: src,
+    preload: "metadata",
+    muted: muted
+  }) : null, title || meta ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-player__top"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-player__title"
+  }, title), meta ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-player__meta"
+  }, meta) : null) : null, /*#__PURE__*/React.createElement("div", {
+    ref: wave,
+    className: "ef-player__wave",
+    role: "slider",
+    "aria-label": "Seek",
+    "aria-valuemin": 0,
+    "aria-valuemax": Math.round(dur),
+    "aria-valuenow": Math.round(t),
+    onPointerDown: onPointerDown
+  }, bars.map((p, i) => /*#__PURE__*/React.createElement("span", {
+    key: i,
+    className: `ef-player__bar${!dur && playing ? ' ef-player__bar--loading' : (i + 0.5) / bars.length <= ratio ? ' ef-player__bar--played' : ''}`,
+    style: {
+      height: Math.max(8, p * 100) + '%',
+      animationDelay: !dur ? i * 30 + 'ms' : undefined
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "ef-player__row"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-player__btn",
+    "aria-label": "Back 10 seconds",
+    onClick: () => jumpTo(t - 10)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "skip-back",
+    size: 14
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-player__btn ef-player__play",
+    "aria-label": playing ? 'Pause' : 'Play',
+    onClick: toggle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: playing ? 'pause' : 'play',
+    size: 15
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-player__btn",
+    "aria-label": "Forward 10 seconds",
+    onClick: () => jumpTo(t + 10)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "skip-forward",
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-player__time"
+  }, formatTime(t, dur), " / ", formatTime(dur)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-player__btn",
+    style: {
+      marginLeft: 'auto'
+    },
+    "aria-label": muted ? 'Unmute' : 'Mute',
+    "aria-pressed": muted,
+    onClick: () => setMuted(!muted)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: muted ? 'volume-x' : 'volume-2',
+    size: 14
+  }))));
+});

package/ai/PromptComposer.d.ts

@@ -0,0 +1,28 @@
+export interface PromptComposerProps {
+  /** Controlled text */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (text: string, e: React.ChangeEvent) => void;
+  /** Enter sends (Shift+Enter = newline) */
+  onSend?: (text: string) => void;
+  /** Attach button; omit and the button is not rendered */
+  onAttach?: (e: React.MouseEvent) => void;
+  /** Voice-input button; omit and the button is not rendered */
+  onVoice?: (e: React.MouseEvent) => void;
+  /** Swaps send for a stop button while a response streams */
+  busy?: boolean;
+  /** Called by the stop button when `busy` */
+  onStop?: (e: React.MouseEvent) => void;
+  /** @default 'Ask the agent anything…' */
+  placeholder?: string;
+  /** @default 2 */
+  rows?: number;
+  disabled?: boolean;
+  /** FileTile chips shown above the input */
+  attachments?: React.ReactNode;
+  /** Muted hint left of the send button */
+  hint?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare const PromptComposer: React.ForwardRefExoticComponent<PromptComposerProps & React.RefAttributes<HTMLDivElement>>;

package/ai/PromptComposer.js

@@ -0,0 +1,111 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { IconButton } from "../forms/IconButton.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-composer{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-lg);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
+.ef-composer:focus-within{border-color:var(--accent);box-shadow:var(--focus-ring)}
+.ef-composer__input{border:none;background:none;resize:none;padding:14px 16px 6px;font-family:var(--font-sans);font-size:var(--text-md);line-height:1.5;color:var(--text-primary);outline:none;min-height:24px}
+.ef-composer__input::placeholder{color:var(--text-muted)}
+.ef-composer__bar{display:flex;align-items:center;gap:2px;padding:6px 8px 8px}
+.ef-composer__send{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:auto;border:none;border-radius:var(--radius-md);background:var(--accent);color:var(--accent-contrast);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
+.ef-composer__send:hover:not(:disabled){background:var(--accent-hover)}
+.ef-composer__send:active:not(:disabled){transform:scale(.95)}
+.ef-composer__send:disabled{background:var(--sand-200);color:var(--sand-400);cursor:not-allowed}
+.ef-composer__send:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-composer__hint{font-size:var(--text-xs);color:var(--text-muted);padding:0 4px}
+`;
+export const PromptComposer = /*#__PURE__*/React.forwardRef(function PromptComposer({
+  value,
+  defaultValue,
+  onChange,
+  onSend,
+  onAttach,
+  onVoice,
+  busy,
+  onStop,
+  placeholder = 'Ask the agent anything…',
+  rows = 2,
+  disabled,
+  attachments,
+  hint,
+  style,
+  className,
+  ...rest
+}, ref) {
+  injectEfCss('ef-css-composer', CSS);
+  const [inner, setInner] = React.useState(defaultValue || '');
+  const v = value != null ? value : inner;
+  const set = (t, e) => {
+    if (value == null) setInner(t);
+    if (onChange) onChange(t, e);
+  };
+  const send = () => {
+    if (v.trim() && onSend && !disabled) {
+      onSend(v);
+      if (value == null) setInner('');
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, rest, {
+    className: `ef-composer${className ? ' ' + className : ''}`,
+    style: style
+  }), attachments ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 6,
+      flexWrap: 'wrap',
+      padding: '10px 12px 0'
+    }
+  }, attachments) : null, /*#__PURE__*/React.createElement("textarea", {
+    className: "ef-composer__input",
+    rows: rows,
+    placeholder: placeholder,
+    value: v,
+    disabled: disabled,
+    onChange: e => set(e.target.value, e),
+    onKeyDown: e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        send();
+      }
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-composer__bar"
+  }, onAttach ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "paperclip",
+    label: "Attach files",
+    size: "sm",
+    onClick: onAttach
+  }) : null, onVoice ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "mic",
+    label: "Voice input",
+    size: "sm",
+    onClick: onVoice
+  }) : null, hint ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-composer__hint"
+  }, hint) : null, busy ? /*#__PURE__*/React.createElement("button", {
+    className: "ef-composer__send",
+    "aria-label": "Stop generating",
+    onClick: onStop,
+    disabled: !onStop
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "square",
+    size: 13,
+    strokeWidth: 2.5
+  })) : /*#__PURE__*/React.createElement("button", {
+    className: "ef-composer__send",
+    "aria-label": "Send",
+    disabled: disabled || !v.trim(),
+    onClick: send
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow-up-right",
+    size: 16,
+    strokeWidth: 2,
+    style: {
+      transform: 'rotate(-45deg)'
+    }
+  }))));
+});

package/ai/PromptSteps.d.ts

@@ -0,0 +1,18 @@
+export interface PromptStep {
+  /** Answer key */
+  name: string;
+  question: React.ReactNode;
+  options: string[];
+  /** true, or a placeholder string, adds an "Other" free-text row */
+  other?: boolean | string;
+}
+export interface PromptStepsProps {
+  steps: PromptStep[];
+  defaultValues?: Record<string, string>;
+  onAnswer?: (value: string, ctx: { name: string; stepIndex: number; totalSteps: number }) => void;
+  onComplete?: (answers: Record<string, string>) => void;
+  onDismiss?: () => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function PromptSteps(props: PromptStepsProps): React.JSX.Element;

package/ai/PromptSteps.js

@@ -0,0 +1,167 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-promptsteps{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);padding:5px;font-family:var(--font-sans)}
+.ef-promptsteps:focus{outline:none}
+.ef-promptsteps:focus-visible{box-shadow:var(--focus-ring)}
+.ef-promptsteps__q{padding:8px 11px 6px;font-size:13.5px;font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-promptsteps__opt{display:flex;align-items:center;gap:11px;width:100%;padding:8px 11px;border:none;background:none;cursor:pointer;text-align:left;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13.5px;color:var(--text-secondary)}
+.ef-promptsteps__opt--hi{background:var(--surface-sunken);color:var(--text-primary)}
+.ef-promptsteps__num{flex:none;width:14px;font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:12.5px}
+.ef-promptsteps__other{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--font-sans);font-size:13.5px;color:var(--text-primary);padding:0}
+.ef-promptsteps__other::placeholder{color:var(--text-muted)}
+.ef-promptsteps__foot{display:flex;align-items:center;gap:12px;padding:8px 11px 5px;font-size:12px;color:var(--text-muted)}
+.ef-promptsteps__back{display:inline-flex;align-items:center;gap:4px;border:none;background:none;cursor:pointer;padding:2px 6px;margin-left:-6px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:12px;color:var(--text-muted)}
+.ef-promptsteps__back:hover{color:var(--text-primary)}
+.ef-promptsteps__kbd{margin-left:auto;display:inline-flex;align-items:center;gap:5px}
+.ef-promptsteps__kbd kbd{padding:1px 6px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-subtle);font-family:var(--font-sans);font-size:11px;color:var(--text-secondary)}
+`;
+export function PromptSteps({
+  steps = [],
+  defaultValues = {},
+  onAnswer,
+  onComplete,
+  onDismiss,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-promptsteps', CSS);
+  const [idx, setIdx] = React.useState(0);
+  const [hi, setHi] = React.useState(0);
+  const [other, setOther] = React.useState('');
+  const [answers, setAnswers] = React.useState(defaultValues);
+  const rootRef = React.useRef(null);
+  const otherRef = React.useRef(null);
+  const step = steps[idx];
+  const opts = step ? step.options.concat(step.other ? ['__other__'] : []) : [];
+  const otherIdx = step && step.other ? opts.length - 1 : -1;
+  React.useEffect(() => {
+    if (hi === otherIdx && otherRef.current) otherRef.current.focus();else if (rootRef.current && (!document.activeElement || !rootRef.current.contains(document.activeElement) || document.activeElement === otherRef.current)) rootRef.current.focus();
+  }, [hi, idx, otherIdx]);
+  const reset = () => {
+    setIdx(0);
+    setHi(0);
+    setOther('');
+    setAnswers(defaultValues);
+  };
+  const submit = () => {
+    if (!step) return;
+    const isOther = hi === otherIdx;
+    const value = isOther ? other.trim() : opts[hi];
+    if (!value) return;
+    const next = {
+      ...answers,
+      [step.name]: value
+    };
+    setAnswers(next);
+    if (onAnswer) onAnswer(value, {
+      name: step.name,
+      stepIndex: idx,
+      totalSteps: steps.length
+    });
+    if (idx === steps.length - 1) {
+      if (onComplete) onComplete(next);
+      reset();
+    } else {
+      setIdx(idx + 1);
+      setHi(0);
+      setOther('');
+    }
+  };
+  const back = () => {
+    if (idx > 0) {
+      setIdx(idx - 1);
+      setHi(0);
+      setOther('');
+    }
+  };
+  const onKey = e => {
+    const inOther = e.target === otherRef.current;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setHi(Math.min(opts.length - 1, hi + 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setHi(Math.max(0, hi - 1));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      submit();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      reset();
+      if (onDismiss) onDismiss();
+    } else if (e.key === 'ArrowLeft' && !inOther || e.key === 'Tab' && e.shiftKey) {
+      e.preventDefault();
+      back();
+    } else if (!inOther && /^[1-9]$/.test(e.key)) {
+      const n = +e.key - 1;
+      if (n < opts.length) {
+        e.preventDefault();
+        setHi(n);
+      }
+    }
+  };
+  if (!step) return null;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    ref: rootRef,
+    tabIndex: -1,
+    className: `ef-promptsteps${className ? ' ' + className : ''}`,
+    style: style,
+    onKeyDown: onKey
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-promptsteps__q"
+  }, step.question), opts.map((o, i) => i === otherIdx ? /*#__PURE__*/React.createElement("div", {
+    key: "__other",
+    className: `ef-promptsteps__opt${hi === i ? ' ef-promptsteps__opt--hi' : ''}`,
+    style: {
+      cursor: 'text'
+    },
+    onMouseEnter: () => setHi(i),
+    onClick: () => {
+      setHi(i);
+      if (otherRef.current) otherRef.current.focus();
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-promptsteps__num"
+  }, i + 1, "."), /*#__PURE__*/React.createElement("input", {
+    ref: otherRef,
+    className: "ef-promptsteps__other",
+    type: "text",
+    value: other,
+    placeholder: typeof step.other === 'string' ? step.other : 'Type your answer',
+    onChange: e => {
+      setOther(e.target.value);
+      setHi(i);
+    },
+    onFocus: () => setHi(i)
+  })) : /*#__PURE__*/React.createElement("button", {
+    key: o,
+    type: "button",
+    className: `ef-promptsteps__opt${hi === i ? ' ef-promptsteps__opt--hi' : ''}`,
+    onMouseEnter: () => setHi(i),
+    onClick: () => {
+      setHi(i);
+      submit();
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-promptsteps__num"
+  }, i + 1, "."), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1
+    }
+  }, o))), /*#__PURE__*/React.createElement("div", {
+    className: "ef-promptsteps__foot"
+  }, idx > 0 ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-promptsteps__back",
+    onClick: back
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-left",
+    size: 12
+  }), "Back") : null, /*#__PURE__*/React.createElement("span", null, idx + 1, " of ", steps.length), /*#__PURE__*/React.createElement("span", {
+    className: "ef-promptsteps__kbd"
+  }, "select ", /*#__PURE__*/React.createElement("kbd", null, "\u2191\u2193"), " or ", /*#__PURE__*/React.createElement("kbd", null, "1\u20139"), " \xB7 confirm ", /*#__PURE__*/React.createElement("kbd", null, "\u21B5"))));
+}

package/ai/Reasoning.d.ts

@@ -0,0 +1,17 @@
+export interface ReasoningProps {
+  /** Pulsing glyph + "Thinking…" header */
+  streaming?: boolean;
+  /** Header reads "Thought for <duration>" */
+  duration?: string;
+  /** Custom header text */
+  label?: React.ReactNode;
+  defaultOpen?: boolean;
+  /** Controlled open state */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The reasoning text */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Reasoning(props: ReasoningProps): React.JSX.Element;

package/ai/Reasoning.js

@@ -0,0 +1,57 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-reasoning{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-subtle);overflow:hidden}
+.ef-reasoning__head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:none;background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary)}
+.ef-reasoning__head:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-reasoning__glyph{display:inline-flex;color:var(--text-muted)}
+.ef-reasoning--streaming .ef-reasoning__glyph{animation:ef-reasoning-pulse 1.2s var(--ease-out) infinite}
+@keyframes ef-reasoning-pulse{0%,100%{opacity:1}50%{opacity:.35}}
+.ef-reasoning__chev{margin-left:auto;display:inline-flex;color:var(--text-muted);transition:transform var(--dur-med) var(--ease-out)}
+.ef-reasoning--open .ef-reasoning__chev{transform:rotate(180deg)}
+.ef-reasoning__body{padding:2px 14px 12px;font-size:13.5px;line-height:1.65;color:var(--text-secondary);white-space:pre-wrap;border-top:1px dashed var(--border-default);padding-top:10px;margin:0 0}
+`;
+export function Reasoning({
+  streaming,
+  duration,
+  defaultOpen,
+  open,
+  onOpenChange,
+  label,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-reasoning', CSS);
+  const [un, setUn] = React.useState(!!defaultOpen);
+  const isOpen = open !== undefined ? open : un;
+  const flip = () => {
+    if (open === undefined) setUn(!isOpen);
+    if (onOpenChange) onOpenChange(!isOpen);
+  };
+  const head = label || (streaming ? 'Thinking…' : duration ? 'Thought for ' + duration : 'Reasoning');
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-reasoning${isOpen ? ' ef-reasoning--open' : ''}${streaming ? ' ef-reasoning--streaming' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-reasoning__head",
+    "aria-expanded": isOpen,
+    onClick: flip
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-reasoning__glyph"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "brain",
+    size: 14
+  })), head, /*#__PURE__*/React.createElement("span", {
+    className: "ef-reasoning__chev"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 14
+  }))), isOpen ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-reasoning__body"
+  }, children) : null);
+}

package/ai/RichComposer.d.ts

@@ -0,0 +1,25 @@
+export interface ComposerItem {
+  id: string;
+  label: string;
+  icon?: string;
+  description?: string;
+  group?: string;
+  keywords?: string[];
+}
+export interface RichComposerProps {
+  placeholder?: string;
+  /** @-mention items, inserted as atomic chips */
+  mentions?: ComposerItem[];
+  /** /-command items, executed via onCommand */
+  commands?: ComposerItem[];
+  hint?: React.ReactNode;
+  /** Left toolbar slot */
+  actions?: React.ReactNode;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onSubmit?: (value: { text: string; mentions: { id: string; label: string }[] }) => void;
+  onCommand?: (item: ComposerItem) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function RichComposer(props: RichComposerProps): React.JSX.Element;