@efolusi/meridian 1.5.0

package/ai/Task.js

@@ -0,0 +1,49 @@
+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-task{display:flex;flex-direction:column;font-family:var(--font-sans);font-size:13.5px}
+.ef-task__row{display:inline-flex;align-items:flex-start;gap:9px;padding:3px 8px;align-self:flex-start;color:var(--text-secondary);border-radius:var(--radius-sm)}
+.ef-task__icon{display:inline-flex;width:16px;height:20px;align-items:center;justify-content:center;color:var(--text-muted);flex:none}
+.ef-task__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
+.ef-task__label{color:var(--text-primary)}
+.ef-task__detail{color:var(--text-muted)}
+.ef-task__detail code{font-family:var(--font-mono);font-size:12px;background:var(--surface-sunken);border-radius:4px;padding:1px 5px;color:var(--text-secondary)}
+.ef-task__rail{width:1px;height:13px;margin-left:16px;background:var(--border-default);flex:none}
+.ef-task--streaming .ef-task__row:last-of-type{animation:ef-task-pulse 1.2s var(--ease-out) infinite}
+@keyframes ef-task-pulse{0%,100%{opacity:1}50%{opacity:.45}}
+`;
+export function Task({
+  items = [],
+  streaming,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-task', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-task${streaming ? ' ef-task--streaming' : ''}${className ? ' ' + className : ''}`,
+    style: style,
+    role: "list"
+  }), items.map((it, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-task__row",
+    role: "listitem"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-task__icon"
+  }, it.icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: it.icon,
+    size: 14
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ef-task__dot"
+  })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-task__label"
+  }, it.label), it.detail ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-task__detail"
+  }, " ", it.detail) : null)), i < items.length - 1 ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-task__rail",
+    "aria-hidden": "true"
+  }) : null)));
+}

package/ai/Todo.d.ts

@@ -0,0 +1,13 @@
+export interface TodoItem {
+  label: React.ReactNode;
+  /** 'pending' | 'progress' | 'done' */
+  status?: 'pending' | 'progress' | 'done';
+}
+export interface TodoProps {
+  title?: string;
+  items: TodoItem[];
+  defaultOpen?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Todo(props: TodoProps): React.JSX.Element;

package/ai/Todo.js

@@ -0,0 +1,87 @@
+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-todo{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);font-family:var(--font-sans)}
+.ef-todo__head{display:flex;align-items:center;gap:9px;width:100%;padding:10px 14px;border:none;background:none;cursor:pointer;text-align:left;font-family:inherit}
+.ef-todo__head:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-md)}
+.ef-todo__glyph{display:inline-flex;color:var(--text-muted)}
+.ef-todo__title{flex:1;min-width:0;font-size:13.5px;font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-todo__count{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
+.ef-todo__chev{display:inline-flex;color:var(--text-muted);transition:transform var(--dur-med) var(--ease-out)}
+.ef-todo--open .ef-todo__chev{transform:rotate(180deg)}
+.ef-todo__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-med) var(--ease-out)}
+.ef-todo--open .ef-todo__body{grid-template-rows:1fr}
+.ef-todo__clip{overflow:hidden;min-height:0}
+.ef-todo__list{list-style:none;margin:0;padding:0 6px 6px}
+.ef-todo__item{display:flex;align-items:flex-start;gap:10px;padding:6px 8px;font-size:13.5px;border-radius:var(--radius-sm)}
+.ef-todo__mark{position:relative;flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
+.ef-todo__item--progress .ef-todo__mark{border-color:transparent;color:var(--text-primary)}
+.ef-todo__item--done .ef-todo__mark{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
+.ef-todo__spin{display:inline-flex;animation:ef-todo-spin 1s linear infinite}
+@keyframes ef-todo-spin{to{transform:rotate(360deg)}}
+.ef-todo__text{min-width:0;color:var(--text-primary);line-height:1.55;transition:color var(--dur-fast) var(--ease-out)}
+.ef-todo__item--done .ef-todo__text{color:var(--text-muted);text-decoration:line-through}
+`;
+export function Todo({
+  title = 'Tasks',
+  items = [],
+  defaultOpen = true,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-todo', CSS);
+  const [open, setOpen] = React.useState(!!defaultOpen);
+  const done = items.filter(i => i.status === 'done').length;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-todo${open ? ' ef-todo--open' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-todo__head",
+    "aria-expanded": open,
+    onClick: () => setOpen(!open)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-todo__glyph"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "list-todo",
+    size: 15
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-todo__title"
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: "ef-todo__count"
+  }, done, "/", items.length), /*#__PURE__*/React.createElement("span", {
+    className: "ef-todo__chev"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 14
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "ef-todo__body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-todo__clip"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "ef-todo__list"
+  }, items.map((it, i) => {
+    const st = it.status || 'pending';
+    return /*#__PURE__*/React.createElement("li", {
+      key: i,
+      className: `ef-todo__item ef-todo__item--${st}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ef-todo__mark",
+      "aria-hidden": "true"
+    }, st === 'progress' ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-todo__spin"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "loader-circle",
+      size: 15
+    })) : null, st === 'done' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      size: 10,
+      strokeWidth: 3
+    }) : null), /*#__PURE__*/React.createElement("span", {
+      className: "ef-todo__text"
+    }, it.label));
+  })))));
+}

package/ai/ToolCall.d.ts

@@ -0,0 +1,30 @@
+export interface ToolCallProps {
+  /** Tool name, mono */
+  name: string;
+  /** @default 'running' */
+  status?: 'pending' | 'approval' | 'running' | 'success' | 'error';
+  /** Input args — object renders a key/value grid, string renders raw */
+  args?: object | string;
+  /** Result body (also accepts children) */
+  result?: React.ReactNode;
+  /** Error message shown in the body */
+  error?: React.ReactNode;
+  /** Pulses the last arg row while args stream in */
+  streaming?: boolean;
+  /** Approve action — rendered when status is 'approval' */
+  onApprove?: () => void;
+  /** Reject action — rendered when status is 'approval' */
+  onReject?: () => void;
+  /** @default 'Approve' */
+  approveLabel?: string;
+  /** @default 'Reject' */
+  rejectLabel?: string;
+  /** Lucide icon @default 'wrench' */
+  icon?: string;
+  /** Body visibility; errors and approvals open by default */
+  defaultOpen?: boolean;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function ToolCall(props: ToolCallProps): React.JSX.Element;

package/ai/ToolCall.js

@@ -0,0 +1,147 @@
+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-toolcall{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
+.ef-toolcall--approval{border-color:var(--accent-subtle-border);box-shadow:0 0 0 2px var(--accent-subtle)}
+.ef-toolcall--running{border-color:var(--accent-subtle-border)}
+.ef-toolcall--error{border-color:var(--danger-300,var(--danger-600))}
+.ef-toolcall__head{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border:none;background:none;cursor:pointer;text-align:left;font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary)}
+.ef-toolcall__head:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-toolcall--pending .ef-toolcall__head{animation:ef-toolcall-pulse 1.4s var(--ease-out) infinite}
+@keyframes ef-toolcall-pulse{0%,100%{opacity:1}50%{opacity:.55}}
+.ef-toolcall__icon{display:inline-flex;color:var(--text-muted)}
+.ef-toolcall__verb{color:var(--text-muted);font-family:var(--font-sans);font-size:12.5px}
+.ef-toolcall__state{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12px;font-weight:500;flex:none}
+.ef-toolcall__state--pending{color:var(--text-muted)}
+.ef-toolcall__state--approval{color:var(--brand-700)}
+.ef-toolcall__state--running{color:var(--text-secondary)}
+.ef-toolcall__state--success{color:var(--success-600,var(--text-secondary))}
+.ef-toolcall__state--error{color:var(--danger-600)}
+.ef-toolcall__spin{display:inline-flex;animation:ef-toolcall-spin .9s linear infinite}
+@keyframes ef-toolcall-spin{to{transform:rotate(360deg)}}
+.ef-toolcall__chev{display:inline-flex;color:var(--text-muted);transition:transform var(--dur-med) var(--ease-out)}
+.ef-toolcall--open .ef-toolcall__chev{transform:rotate(180deg)}
+.ef-toolcall__body{border-top:1px solid var(--border-default);padding:12px;display:flex;flex-direction:column;gap:10px}
+.ef-toolcall__sec{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
+.ef-toolcall__grid{border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-sunken);overflow:hidden;font-family:var(--font-mono);font-size:12px}
+.ef-toolcall__row{display:grid;grid-template-columns:max-content 1fr;gap:12px;padding:6px 10px;border-top:1px solid var(--border-default)}
+.ef-toolcall__row:first-child{border-top:none}
+.ef-toolcall__key{color:var(--text-muted)}
+.ef-toolcall__val{min-width:0;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word}
+.ef-toolcall--streaming .ef-toolcall__row:last-child .ef-toolcall__val{animation:ef-toolcall-pulse 1.2s var(--ease-out) infinite}
+.ef-toolcall__args{margin:0;padding:10px 12px;background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;max-height:256px;overflow:auto}
+.ef-toolcall__result{font-size:13.5px;line-height:1.6;color:var(--text-secondary)}
+.ef-toolcall__error{padding:10px 12px;border-radius:var(--radius-sm);background:var(--danger-100,#F8ECEA);color:var(--danger-600);font-size:13px;line-height:1.55}
+.ef-toolcall__actions{display:flex;justify-content:flex-end;gap:8px;padding-top:2px}
+.ef-toolcall__btn{height:28px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-card);cursor:pointer;font-family:var(--font-sans);font-size:12.5px;font-weight:600;color:var(--text-primary);transition:background var(--dur-fast) var(--ease-out)}
+.ef-toolcall__btn:hover{background:var(--surface-subtle)}
+.ef-toolcall__btn--accept{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
+.ef-toolcall__btn--accept:hover{background:var(--accent-hover)}
+.ef-toolcall__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+`;
+const STATES = {
+  pending: 'Queued',
+  approval: 'Needs approval',
+  running: 'Running',
+  success: 'Done',
+  error: 'Failed'
+};
+export function ToolCall({
+  name,
+  status = 'running',
+  args,
+  result,
+  error,
+  icon = 'wrench',
+  defaultOpen,
+  streaming,
+  onApprove,
+  onReject,
+  approveLabel = 'Approve',
+  rejectLabel = 'Reject',
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-toolcall', CSS);
+  const [open, setOpen] = React.useState(defaultOpen !== undefined ? !!defaultOpen : status === 'error' || status === 'approval');
+  const body = children || result;
+  const entries = args != null && typeof args === 'object' && !Array.isArray(args) ? Object.entries(args) : null;
+  const argText = args == null || entries ? null : typeof args === 'string' ? args : JSON.stringify(args, null, 2);
+  const fmt = v => v == null ? 'null' : typeof v === 'string' ? v : typeof v === 'object' ? JSON.stringify(v, null, 2) : String(v);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-toolcall ef-toolcall--${status}${open ? ' ef-toolcall--open' : ''}${streaming ? ' ef-toolcall--streaming' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-toolcall__head",
+    "aria-expanded": open,
+    onClick: () => setOpen(!open)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-toolcall__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-toolcall__verb"
+  }, "tool"), name, /*#__PURE__*/React.createElement("span", {
+    className: `ef-toolcall__state ef-toolcall__state--${status}`
+  }, status === 'running' ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-toolcall__spin"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "loader-circle",
+    size: 13
+  })) : status === 'approval' ? /*#__PURE__*/React.createElement(Icon, {
+    name: "shield-check",
+    size: 13
+  }) : status === 'pending' ? /*#__PURE__*/React.createElement(Icon, {
+    name: "clock",
+    size: 13
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    name: status === 'success' ? 'circle-check' : 'circle-alert',
+    size: 13
+  }), STATES[status]), /*#__PURE__*/React.createElement("span", {
+    className: "ef-toolcall__chev"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 14
+  }))), open ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__body"
+  }, entries && entries.length ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__sec"
+  }, "Input"), /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__grid"
+  }, entries.map(([k, v]) => /*#__PURE__*/React.createElement("div", {
+    key: k,
+    className: "ef-toolcall__row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-toolcall__key"
+  }, k), /*#__PURE__*/React.createElement("span", {
+    className: "ef-toolcall__val"
+  }, fmt(v)))))) : argText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__sec"
+  }, "Input"), /*#__PURE__*/React.createElement("pre", {
+    className: "ef-toolcall__args"
+  }, argText)) : null, error ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__sec"
+  }, "Error"), /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__error"
+  }, error)) : null, body ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__sec"
+  }, "Result"), /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__result"
+  }, body)) : null, status === 'approval' && (onApprove || onReject) ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-toolcall__actions"
+  }, onReject ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-toolcall__btn",
+    onClick: onReject
+  }, rejectLabel) : null, onApprove ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-toolcall__btn ef-toolcall__btn--accept",
+    onClick: onApprove
+  }, approveLabel) : null) : null) : null);
+}

package/ai/Transcript.d.ts

@@ -0,0 +1,27 @@
+export interface TranscriptWord {
+  /** Start time of the word in seconds */
+  t: number;
+  w: string;
+}
+export interface TranscriptItem {
+  start: number;
+  end?: number;
+  speaker?: string;
+  text?: React.ReactNode;
+  /** Word-level timings for karaoke highlight */
+  words?: TranscriptWord[];
+  /** Italic live-caption styling */
+  interim?: boolean;
+}
+export interface TranscriptProps {
+  title?: string;
+  items: TranscriptItem[];
+  /** Drive from Player onTimeChange */
+  currentTime?: number;
+  onJump?: (seconds: number) => void;
+  height?: number;
+  defaultAutoScroll?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Transcript(props: TranscriptProps): React.JSX.Element;

package/ai/Transcript.js

@@ -0,0 +1,96 @@
+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 { formatTime } from "./Player.js";
+const CSS = `
+.ef-transcript{display:flex;flex-direction:column;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden;font-family:var(--font-sans)}
+.ef-transcript__head{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border-default)}
+.ef-transcript__title{flex:1;min-width:0;font-size:13.5px;font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-transcript__auto{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-default);background:none;cursor:pointer;padding:3px 10px;border-radius:var(--radius-full);font-family:var(--font-sans);font-size:11.5px;color:var(--text-muted);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
+.ef-transcript__auto--on{color:var(--text-primary);border-color:var(--border-strong)}
+.ef-transcript__auto:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-transcript__scroll{overflow-y:auto;padding:5px}
+.ef-transcript__item{display:flex;gap:12px;padding:8px 10px;border-radius:var(--radius-sm);transition:background var(--dur-fast) var(--ease-out)}
+.ef-transcript__item--active{background:var(--surface-sunken)}
+.ef-transcript__time{flex:none;border:none;background:none;padding:0;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;line-height:1.9;transition:color var(--dur-fast) var(--ease-out)}
+.ef-transcript__time:hover{color:var(--text-primary)}
+.ef-transcript__time:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:3px}
+.ef-transcript__item--active .ef-transcript__time{color:var(--text-link)}
+.ef-transcript__speaker{flex:none;width:64px;font-size:12px;font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.8}
+.ef-transcript__text{flex:1;min-width:0;font-size:13.5px;line-height:1.65;color:var(--text-muted)}
+.ef-transcript__item--active .ef-transcript__text{color:var(--text-secondary)}
+.ef-transcript__word{transition:color .1s linear}
+.ef-transcript__word--played{color:var(--text-primary)}
+.ef-transcript__text--interim{font-style:italic;color:var(--text-muted)}
+`;
+export function Transcript({
+  title = 'Transcript',
+  items = [],
+  currentTime = 0,
+  onJump,
+  height = 280,
+  defaultAutoScroll = true,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-transcript', CSS);
+  const [auto, setAuto] = React.useState(!!defaultAutoScroll);
+  const viewport = React.useRef(null);
+  const rowRefs = React.useRef([]);
+  let active = -1;
+  for (let i = 0; i < items.length; i++) {
+    const end = items[i].end != null ? items[i].end : items[i + 1] ? items[i + 1].start : Infinity;
+    if (currentTime >= items[i].start && currentTime < end) {
+      active = i;
+      break;
+    }
+  }
+  React.useEffect(() => {
+    if (!auto || active < 0) return;
+    const v = viewport.current,
+      row = rowRefs.current[active];
+    if (!v || !row) return;
+    const target = row.offsetTop - v.clientHeight / 2 + row.offsetHeight / 2;
+    v.scrollTo({
+      top: Math.max(0, target),
+      behavior: 'smooth'
+    });
+  }, [active, auto]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-transcript${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-transcript__head"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-transcript__title"
+  }, title), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `ef-transcript__auto${auto ? ' ef-transcript__auto--on' : ''}`,
+    "aria-pressed": auto,
+    onClick: () => setAuto(!auto)
+  }, "Auto-scroll")), /*#__PURE__*/React.createElement("div", {
+    ref: viewport,
+    className: "ef-transcript__scroll",
+    style: {
+      height
+    }
+  }, items.map((it, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    ref: el => {
+      rowRefs.current[i] = el;
+    },
+    className: `ef-transcript__item${i === active ? ' ef-transcript__item--active' : ''}`
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-transcript__time",
+    onClick: () => onJump && onJump(it.start)
+  }, formatTime(it.start)), it.speaker ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-transcript__speaker"
+  }, it.speaker) : null, /*#__PURE__*/React.createElement("span", {
+    className: `ef-transcript__text${it.interim ? ' ef-transcript__text--interim' : ''}`
+  }, it.words ? it.words.map((w, k) => /*#__PURE__*/React.createElement("span", {
+    key: k,
+    className: `ef-transcript__word${currentTime >= w.t ? ' ef-transcript__word--played' : ''}`
+  }, w.w, ' ')) : it.text)))));
+}

package/ai/UsageMeter.d.ts

@@ -0,0 +1,21 @@
+export interface UsageMeterProps extends React.HTMLAttributes<HTMLDivElement> {
+  used: number;
+  limit: number;
+  /** @default 'Usage' */
+  label?: string;
+  /** Appended to figures, e.g. 'tokens' */
+  unit?: string;
+  /** Mono figure bottom-right, e.g. '$4.82' */
+  cost?: string;
+  /** Muted note bottom-left */
+  hint?: string;
+  /** Warning tone threshold (0-1) @default 0.8 */
+  warnAt?: number;
+  /** Count the figure and bar up on mount/change */
+  animated?: boolean;
+  /** Figure formatter @default toLocaleString */
+  format?: (v: number) => string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function UsageMeter(props: UsageMeterProps): React.JSX.Element;

package/ai/UsageMeter.js

@@ -0,0 +1,81 @@
+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";
+const CSS = `
+.ef-usage{display:flex;flex-direction:column;gap:7px}
+.ef-usage__row{display:flex;align-items:baseline;gap:8px}
+.ef-usage__label{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
+.ef-usage__figures{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
+.ef-usage__track{height:6px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
+.ef-usage__fill{height:100%;border-radius:var(--radius-full);background:var(--accent);transition:width var(--dur-med) var(--ease-out)}
+.ef-usage--warn .ef-usage__fill{background:var(--warning-600)}
+.ef-usage--over .ef-usage__fill{background:var(--danger-600)}
+.ef-usage__foot{display:flex;gap:8px;font-size:12px;color:var(--text-muted)}
+.ef-usage__cost{margin-left:auto;font-family:var(--font-mono)}
+`;
+export function UsageMeter({
+  used = 0,
+  limit = 100,
+  label = 'Usage',
+  unit = '',
+  cost,
+  hint,
+  warnAt = 0.8,
+  animated,
+  format,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-usage', CSS);
+  const [shown, setShown] = React.useState(animated ? 0 : used);
+  React.useEffect(() => {
+    if (!animated) {
+      setShown(used);
+      return;
+    }
+    let raf,
+      start = null;
+    const from = shown,
+      to = used;
+    const tick = now => {
+      if (start === null) start = now;
+      const t = Math.min(1, (now - start) / 500);
+      setShown(from + (to - from) * (1 - Math.pow(1 - t, 3)));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [used, animated]);
+  const ratio = limit > 0 ? used / limit : 0;
+  const fmt = format || (v => Math.round(v).toLocaleString());
+  const tone = ratio >= 1 ? ' ef-usage--over' : ratio >= warnAt ? ' ef-usage--warn' : '';
+  const shownRatio = limit > 0 ? shown / limit : 0;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-usage${tone}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-usage__row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-usage__label"
+  }, label), /*#__PURE__*/React.createElement("span", {
+    className: "ef-usage__figures"
+  }, fmt(shown), " / ", fmt(limit), unit ? ' ' + unit : '')), /*#__PURE__*/React.createElement("div", {
+    className: "ef-usage__track",
+    role: "progressbar",
+    "aria-valuenow": Math.round(ratio * 100),
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-label": label
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-usage__fill",
+    style: {
+      width: Math.min(100, (animated ? shownRatio : ratio) * 100) + '%',
+      display: 'block'
+    }
+  })), hint || cost ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-usage__foot"
+  }, hint ? /*#__PURE__*/React.createElement("span", null, hint) : null, cost ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-usage__cost"
+  }, cost) : null) : null);
+}

package/ai/WebPreview.d.ts

@@ -0,0 +1,19 @@
+export interface WebPreviewLog {
+  /** 'log' | 'info' | 'warn' | 'error' */
+  level?: 'log' | 'info' | 'warn' | 'error';
+  text: React.ReactNode;
+}
+export interface WebPreviewProps {
+  url?: string;
+  /** Stage height in px. Default 340 */
+  height?: number;
+  /** Console entries; error count badges the toggle */
+  logs?: WebPreviewLog[];
+  defaultConsoleOpen?: boolean;
+  /** Rendered instead of an iframe (mock content) */
+  children?: React.ReactNode;
+  onUrlChange?: (url: string) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function WebPreview(props: WebPreviewProps): React.JSX.Element;