@efolusi/meridian 1.5.0

package/README.md

@@ -0,0 +1,12 @@
+# @efolusi/meridian
+
+The npm build of [Meridian](https://meridian.efolusi.com). Import the stylesheet once, then components as you need them.
+
+```js
+import '@efolusi/meridian/styles.css';
+import { Button, FormField, Input } from '@efolusi/meridian';
+// or per component, for the smallest graph:
+import { Button } from '@efolusi/meridian/forms/Button.js';
+```
+
+`react` and `react-dom` are peer dependencies. Full docs, live demos and the zero-build CDN path: https://meridian.efolusi.com

package/ai/AgentRun.d.ts

@@ -0,0 +1,20 @@
+export interface AgentRunStep {
+  id?: string;
+  title: React.ReactNode;
+  /** Supporting line — text or nodes */
+  detail?: React.ReactNode;
+  /** Collapsible panel (ToolCall, Diff…) behind a "Show detail" toggle */
+  children?: React.ReactNode;
+  /** Open the panel initially */
+  defaultOpen?: boolean;
+  /** @default 'pending' */
+  status?: 'done' | 'active' | 'pending' | 'error';
+  /** Mono timestamp on the right */
+  time?: string;
+}
+export interface AgentRunProps {
+  steps: AgentRunStep[];
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function AgentRun(props: AgentRunProps): React.JSX.Element;

package/ai/AgentRun.js

@@ -0,0 +1,100 @@
+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-agentrun{display:flex;flex-direction:column}
+.ef-agentrun__step{display:flex;gap:12px;position:relative}
+.ef-agentrun__rail{display:flex;flex-direction:column;align-items:center;flex:none;width:22px}
+.ef-agentrun__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--radius-full);border:1px solid var(--border-strong);background:var(--surface-card);color:var(--text-muted);flex:none}
+.ef-agentrun__step--done .ef-agentrun__dot{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
+.ef-agentrun__step--active .ef-agentrun__dot{border-color:var(--accent);color:var(--accent)}
+.ef-agentrun__step--error .ef-agentrun__dot{background:var(--danger-100);border-color:var(--danger-600);color:var(--danger-600)}
+.ef-agentrun__spin{display:inline-flex;animation:ef-agentrun-spin .9s linear infinite}
+@keyframes ef-agentrun-spin{to{transform:rotate(360deg)}}
+.ef-agentrun__line{width:1px;flex:1;background:var(--border-default);margin:3px 0}
+.ef-agentrun__step--done .ef-agentrun__line{background:var(--accent-subtle-border)}
+.ef-agentrun__content{flex:1;min-width:0;padding:1px 0 18px}
+.ef-agentrun__step:last-child .ef-agentrun__content{padding-bottom:2px}
+.ef-agentrun__title{display:flex;align-items:baseline;gap:8px;font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
+.ef-agentrun__step--pending .ef-agentrun__title{color:var(--text-muted);font-weight:500}
+.ef-agentrun__time{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex:none}
+.ef-agentrun__detail{font-size:13px;line-height:1.55;color:var(--text-secondary);margin-top:3px}
+.ef-agentrun__toggle{display:inline-flex;align-items:center;gap:5px;border:none;background:none;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:12px;font-weight:500;color:var(--text-muted);margin-top:4px}
+.ef-agentrun__toggle:hover{color:var(--text-primary)}
+.ef-agentrun__toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-agentrun__toggle .ef-agentrun__tchev{display:inline-flex;transition:transform var(--dur-med) var(--ease-out)}
+.ef-agentrun__toggle--open .ef-agentrun__tchev{transform:rotate(180deg)}
+.ef-agentrun__panel{margin-top:8px;display:flex;flex-direction:column;gap:8px}
+`;
+export function AgentRun({
+  steps = [],
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-agentrun', CSS);
+  const [openIds, setOpenIds] = React.useState(() => new Set(steps.filter(s => s.defaultOpen).map((s, idx) => s.id || idx)));
+  const flip = key => setOpenIds(prev => {
+    const n = new Set(prev);
+    if (n.has(key)) n.delete(key);else n.add(key);
+    return n;
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-agentrun${className ? ' ' + className : ''}`,
+    style: style,
+    role: "list"
+  }), steps.map((s, i) => {
+    const st = s.status || 'pending';
+    return /*#__PURE__*/React.createElement("div", {
+      key: s.id || i,
+      role: "listitem",
+      className: `ef-agentrun__step ef-agentrun__step--${st}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ef-agentrun__rail"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ef-agentrun__dot"
+    }, st === 'done' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      size: 12
+    }) : st === 'active' ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-agentrun__spin"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "loader-circle",
+      size: 12
+    })) : st === 'error' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "x",
+      size: 12
+    }) : /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: 5,
+        height: 5,
+        borderRadius: 99,
+        background: 'currentColor',
+        display: 'inline-block'
+      }
+    })), i < steps.length - 1 ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-agentrun__line"
+    }) : null), /*#__PURE__*/React.createElement("div", {
+      className: "ef-agentrun__content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ef-agentrun__title"
+    }, s.title, s.time ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-agentrun__time"
+    }, s.time) : null), s.detail ? /*#__PURE__*/React.createElement("div", {
+      className: "ef-agentrun__detail"
+    }, s.detail) : null, s.children ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: `ef-agentrun__toggle${openIds.has(s.id || i) ? ' ef-agentrun__toggle--open' : ''}`,
+      "aria-expanded": openIds.has(s.id || i),
+      onClick: () => flip(s.id || i)
+    }, openIds.has(s.id || i) ? 'Hide detail' : 'Show detail', /*#__PURE__*/React.createElement("span", {
+      className: "ef-agentrun__tchev"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "chevron-down",
+      size: 12
+    }))), openIds.has(s.id || i) ? /*#__PURE__*/React.createElement("div", {
+      className: "ef-agentrun__panel"
+    }, s.children) : null) : null));
+  }));
+}

package/ai/ChatMessage.d.ts

@@ -0,0 +1,19 @@
+export interface ChatMessageProps {
+  /** @default 'assistant' */
+  role?: 'user' | 'assistant' | 'system';
+  /** Display name @default You / Agent / System */
+  name?: string;
+  time?: string;
+  /** Blinking caret while generating */
+  streaming?: boolean;
+  /** false hides the hover action row; a node replaces it wholesale */
+  actions?: boolean | React.ReactNode;
+  /** Copy button; omit and the button is not rendered */
+  onCopy?: (e: React.MouseEvent) => void;
+  /** Retry button; omit and the button is not rendered */
+  onRetry?: (e: React.MouseEvent) => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function ChatMessage(props: ChatMessageProps): React.JSX.Element;

package/ai/ChatMessage.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 { Icon } from "../icons/Icon.js";
+import { Avatar } from "../display/Avatar.js";
+import { IconButton } from "../forms/IconButton.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-msg{display:flex;gap:12px;max-width:720px}
+.ef-msg__avatar{flex:none;margin-top:2px}
+.ef-msg__bot{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-contrast);flex:none;margin-top:2px}
+.ef-msg__meta{display:flex;align-items:baseline;gap:8px}
+.ef-msg__name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-msg__time{font-size:var(--text-xs);color:var(--text-muted)}
+.ef-msg__body{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-primary);margin-top:4px}
+.ef-msg--user .ef-msg__body{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 14px}
+.ef-msg__actions{display:flex;gap:2px;margin-top:6px;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
+.ef-msg:hover .ef-msg__actions{opacity:1}
+@keyframes ef-caret{0%,100%{opacity:1}50%{opacity:0}}
+.ef-msg__caret{display:inline-block;width:7px;height:15px;background:var(--accent);margin-left:3px;vertical-align:-2px;animation:ef-caret 1s steps(1) infinite}
+`;
+export function ChatMessage({
+  role = 'assistant',
+  name,
+  time,
+  streaming,
+  actions,
+  onCopy,
+  onRetry,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-msg', CSS);
+  const who = name || (role === 'user' ? 'You' : role === 'system' ? 'System' : 'Agent');
+  // Only render an action a caller can actually handle: a button with nowhere to
+  // go is worse than no button. `actions` may be a node to replace the row wholesale.
+  const builtIn = onCopy || onRetry ? /*#__PURE__*/React.createElement(React.Fragment, null, onCopy ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "copy",
+    label: "Copy",
+    size: "sm",
+    onClick: onCopy
+  }) : null, onRetry ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "refresh-cw",
+    label: "Retry",
+    size: "sm",
+    onClick: onRetry
+  }) : null) : null;
+  const actionRow = actions === false ? null : actions != null && actions !== true ? actions : builtIn;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-msg ef-msg--${role}${className ? ' ' + className : ''}`,
+    style: style
+  }), role === 'assistant' || role === 'system' ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-msg__bot"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "bot",
+    size: 15
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ef-msg__avatar"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    name: who,
+    size: 28
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-msg__meta"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-msg__name"
+  }, who), time ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-msg__time"
+  }, time) : null), /*#__PURE__*/React.createElement("div", {
+    className: "ef-msg__body"
+  }, children, streaming ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-msg__caret"
+  }) : null), actionRow && role === 'assistant' && !streaming ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-msg__actions"
+  }, actionRow) : null));
+}

package/ai/Citation.d.ts

@@ -0,0 +1,23 @@
+export interface CitationSource { title: string; url?: string; domain?: string; description?: string; }
+export interface CitationProps {
+  /** Superscript number */
+  index: number;
+  href?: string;
+  /** Tooltip + aria label */
+  title?: string;
+  /** Hover preview card(s) with pager when 2+ */
+  sources?: CitationSource[];
+  onClick?: (e: React.MouseEvent) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export interface Source { index?: number; title: string; url?: string; domain?: string; }
+export interface SourceListProps {
+  sources: Source[];
+  /** @default 'Sources' */
+  title?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Citation(props: CitationProps): React.JSX.Element;
+export declare function SourceList(props: SourceListProps): React.JSX.Element;

package/ai/Citation.js

@@ -0,0 +1,146 @@
+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-citation{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin:0 1px;vertical-align:super;border-radius:var(--radius-sm);border:1px solid var(--accent-subtle-border);background:var(--accent-subtle);color:var(--brand-700);font-family:var(--font-mono);font-size:10px;font-weight:600;text-decoration:none;cursor:pointer;line-height:1}
+.ef-citation:hover{border-color:var(--brand-700)}
+.ef-citation:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-citation__wrap{position:relative;display:inline}
+.ef-citation__pop{position:absolute;bottom:calc(100% + 8px);left:0;width:280px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:12px;z-index:var(--z-popover);animation:ef-citation-in var(--dur-fast) var(--ease-out);cursor:default;text-align:left}
+@keyframes ef-citation-in{from{opacity:0;transform:translateY(3px)}}
+.ef-citation__pop-name{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+.ef-citation__pop-title{font-size:13.5px;font-weight:600;color:var(--text-primary);line-height:1.4;margin-top:5px}
+.ef-citation__pop-desc{font-size:12.5px;line-height:1.55;color:var(--text-secondary);margin-top:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.ef-citation__pop-nav{display:flex;align-items:center;gap:4px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border-default)}
+.ef-citation__pop-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:none;cursor:pointer;color:var(--text-secondary)}
+.ef-citation__pop-btn:hover{color:var(--text-primary);background:var(--surface-subtle)}
+.ef-citation__pop-count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+.ef-sources{display:flex;flex-direction:column;border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
+.ef-sources__head{padding:9px 13px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-subtle);border-bottom:1px solid var(--border-default)}
+.ef-sources__item{display:flex;align-items:center;gap:10px;padding:9px 13px;text-decoration:none;border-bottom:1px solid var(--border-default);transition:background var(--dur-fast) var(--ease-out)}
+.ef-sources__item:last-child{border-bottom:none}
+.ef-sources__item:hover{background:var(--surface-subtle)}
+.ef-sources__item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-sources__num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-sm);background:var(--accent-subtle);color:var(--brand-700);font-family:var(--font-mono);font-size:10.5px;font-weight:600}
+.ef-sources__title{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ef-sources__domain{flex:none;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted)}
+.ef-sources__ext{flex:none;display:inline-flex;color:var(--text-muted)}
+`;
+export function Citation({
+  index,
+  href,
+  title,
+  sources,
+  onClick,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-citation', CSS);
+  const [open, setOpen] = React.useState(false);
+  const [i, setI] = React.useState(0);
+  const t = React.useRef(null);
+  const list = sources && sources.length ? sources : null;
+  const enter = () => {
+    if (!list) return;
+    clearTimeout(t.current);
+    t.current = setTimeout(() => setOpen(true), 200);
+  };
+  const leave = () => {
+    clearTimeout(t.current);
+    t.current = setTimeout(() => setOpen(false), 180);
+  };
+  React.useEffect(() => () => clearTimeout(t.current), []);
+  const chip = /*#__PURE__*/React.createElement("a", {
+    href: href || list && list[0] && list[0].url || '#',
+    title: title,
+    onClick: onClick,
+    target: href ? '_blank' : undefined,
+    rel: href ? 'noopener' : undefined,
+    className: `ef-citation${className ? ' ' + className : ''}`,
+    style: list ? null : style,
+    "aria-label": title ? 'Source ' + index + ': ' + title : 'Source ' + index
+  }, index);
+  if (!list) return chip;
+  const cur = list[Math.abs(i) % list.length];
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: "ef-citation__wrap",
+    style: style,
+    onMouseEnter: enter,
+    onMouseLeave: leave
+  }), chip, open ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-citation__pop",
+    role: "dialog"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-citation__pop-name"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "globe",
+    size: 11
+  }), cur.domain || 'source'), /*#__PURE__*/React.createElement("span", {
+    className: "ef-citation__pop-title",
+    style: {
+      display: 'block'
+    }
+  }, cur.title), cur.description ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-citation__pop-desc",
+    style: {
+      display: 'block'
+    }
+  }, cur.description) : null, list.length > 1 ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-citation__pop-nav",
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": "Previous source",
+    className: "ef-citation__pop-btn",
+    onClick: () => setI((i - 1 + list.length) % list.length)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-left",
+    size: 12
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": "Next source",
+    className: "ef-citation__pop-btn",
+    onClick: () => setI((i + 1) % list.length)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 12
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-citation__pop-count"
+  }, Math.abs(i) % list.length + 1, "/", list.length)) : null) : null);
+}
+export function SourceList({
+  sources = [],
+  title = 'Sources',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-citation', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-sources${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-sources__head"
+  }, title), sources.map((s, i) => /*#__PURE__*/React.createElement("a", {
+    key: s.index || i,
+    className: "ef-sources__item",
+    href: s.url || '#',
+    target: s.url ? '_blank' : undefined,
+    rel: s.url ? 'noopener' : undefined
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-sources__num"
+  }, s.index || i + 1), /*#__PURE__*/React.createElement("span", {
+    className: "ef-sources__title"
+  }, s.title), s.domain ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-sources__domain"
+  }, s.domain) : null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-sources__ext"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "external-link",
+    size: 12
+  })))));
+}

package/ai/Confirmation.d.ts

@@ -0,0 +1,26 @@
+export interface ConfirmationProps {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** 'danger' for destructive approvals @default 'default' */
+  tone?: 'default' | 'danger';
+  /** Controlled state */
+  state?: 'pending' | 'approved' | 'rejected';
+  /** @default 'pending' */
+  defaultState?: 'pending' | 'approved' | 'rejected';
+  onStateChange?: (state: 'pending' | 'approved' | 'rejected') => void;
+  /** Lucide icon; defaults by tone */
+  icon?: string;
+  /** @default 'Approve' */
+  approveLabel?: string;
+  /** @default 'Reject' */
+  rejectLabel?: string;
+  /** Status line after approving */
+  approvedNote?: React.ReactNode;
+  /** Status line after rejecting */
+  rejectedNote?: React.ReactNode;
+  /** Extra content (ToolCall, Diff…) */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Confirmation(props: ConfirmationProps): React.JSX.Element;

package/ai/Confirmation.js

@@ -0,0 +1,84 @@
+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-confirm{border-radius:var(--radius-md);background:var(--surface-card);border:1px solid var(--accent-subtle-border);box-shadow:0 0 0 2px var(--accent-subtle)}
+.ef-confirm--danger{border-color:var(--danger-300,var(--danger-600));box-shadow:0 0 0 2px var(--danger-100,#F8ECEA)}
+.ef-confirm--settled{border-color:var(--border-default);box-shadow:none}
+.ef-confirm__head{display:flex;align-items:center;gap:9px;padding:11px 14px 0}
+.ef-confirm__icon{display:inline-flex;color:var(--brand-700);flex:none}
+.ef-confirm--danger .ef-confirm__icon{color:var(--danger-600)}
+.ef-confirm__title{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}
+.ef-confirm__desc{padding:6px 14px 0;font-size:13.5px;line-height:1.6;color:var(--text-secondary)}
+.ef-confirm__content{padding:10px 14px 0}
+.ef-confirm__actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px}
+.ef-confirm__btn{height:30px;padding:0 13px;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-confirm__btn:hover{background:var(--surface-subtle)}
+.ef-confirm__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-confirm__btn--accept{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
+.ef-confirm__btn--accept:hover{background:var(--accent-hover)}
+.ef-confirm--danger .ef-confirm__btn--accept{background:var(--danger-600);border-color:var(--danger-600);color:var(--danger-contrast)}
+.ef-confirm__status{display:flex;align-items:center;gap:8px;padding:10px 14px 12px;font-size:13px;color:var(--text-secondary)}
+.ef-confirm__status--approved{color:var(--success-600,var(--text-secondary))}
+.ef-confirm__status--rejected{color:var(--text-muted)}
+`;
+export function Confirmation({
+  title,
+  description,
+  tone = 'default',
+  state,
+  defaultState = 'pending',
+  onStateChange,
+  icon,
+  approveLabel = 'Approve',
+  rejectLabel = 'Reject',
+  approvedNote = 'Approved — continuing.',
+  rejectedNote = 'Rejected — the agent will skip this.',
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-confirm', CSS);
+  const [un, setUn] = React.useState(defaultState);
+  const cur = state !== undefined ? state : un;
+  const set = next => {
+    if (state === undefined) setUn(next);
+    if (onStateChange) onStateChange(next);
+  };
+  const settled = cur !== 'pending';
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "group",
+    className: `ef-confirm${tone === 'danger' ? ' ef-confirm--danger' : ''}${settled ? ' ef-confirm--settled' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-confirm__head"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-confirm__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon || (tone === 'danger' ? 'triangle-alert' : 'shield-check'),
+    size: 15
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-confirm__title"
+  }, title)), description ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-confirm__desc"
+  }, description) : null, children ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-confirm__content"
+  }, children) : null, cur === 'pending' ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-confirm__actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-confirm__btn",
+    onClick: () => set('rejected')
+  }, rejectLabel), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-confirm__btn ef-confirm__btn--accept",
+    onClick: () => set('approved')
+  }, approveLabel)) : /*#__PURE__*/React.createElement("div", {
+    className: `ef-confirm__status ef-confirm__status--${cur}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: cur === 'approved' ? 'circle-check' : 'circle-alert',
+    size: 14
+  }), cur === 'approved' ? approvedNote : rejectedNote));
+}

package/ai/Conversation.d.ts

@@ -0,0 +1,15 @@
+export interface ConversationProps {
+  /** Viewport height @default 420 */
+  height?: number | string;
+  /** Keep pinned to bottom as content grows @default true */
+  autoStick?: boolean;
+  /** @default 'Jump to latest' */
+  jumpLabel?: string;
+  /** Viewport padding @default 4 */
+  padding?: number | string;
+  /** Messages, tool calls, etc. */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare const Conversation: React.ForwardRefExoticComponent<ConversationProps & React.RefAttributes<HTMLDivElement>>;

package/ai/Conversation.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";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-conversation{position:relative;overflow:hidden;display:flex;flex-direction:column}
+.ef-conversation__viewport{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}
+.ef-conversation__inner{display:flex;flex-direction:column;gap:18px}
+.ef-conversation__jump{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:var(--radius-full);border:1px solid var(--border-strong);background:var(--surface-card);box-shadow:var(--shadow-md);cursor:pointer;font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:var(--text-secondary);z-index:5;animation:ef-conversation-in var(--dur-fast) var(--ease-out)}
+.ef-conversation__jump:hover{color:var(--text-primary)}
+.ef-conversation__jump:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+@keyframes ef-conversation-in{from{opacity:0;transform:translateX(-50%) translateY(4px)}}
+`;
+export const Conversation = /*#__PURE__*/React.forwardRef(function Conversation({
+  height = 420,
+  autoStick = true,
+  jumpLabel = 'Jump to latest',
+  padding = 4,
+  children,
+  style,
+  className,
+  ...rest
+}, ref) {
+  injectEfCss('ef-css-conversation', CSS);
+  const viewport = React.useRef(null);
+  const inner = React.useRef(null);
+  const wasBottom = React.useRef(true);
+  const [atBottom, setAtBottom] = React.useState(true);
+  const recompute = () => {
+    const v = viewport.current;
+    if (!v) return;
+    const at = v.scrollHeight - v.scrollTop - v.clientHeight < 24;
+    wasBottom.current = at;
+    setAtBottom(at);
+  };
+  const toBottom = behavior => {
+    const v = viewport.current;
+    if (v) v.scrollTo({
+      top: v.scrollHeight,
+      behavior: behavior || 'smooth'
+    });
+  };
+  React.useEffect(() => {
+    const v = viewport.current;
+    if (v) v.scrollTop = v.scrollHeight;
+    recompute();
+    if (!inner.current || typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(() => {
+      if (autoStick && wasBottom.current && viewport.current) viewport.current.scrollTop = viewport.current.scrollHeight;
+      recompute();
+    });
+    ro.observe(inner.current);
+    return () => ro.disconnect();
+  }, [autoStick]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, rest, {
+    className: `ef-conversation${className ? ' ' + className : ''}`,
+    style: {
+      height,
+      ...style
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: viewport,
+    className: "ef-conversation__viewport",
+    onScroll: recompute,
+    style: {
+      padding
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: inner,
+    className: "ef-conversation__inner"
+  }, children)), !atBottom ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-conversation__jump",
+    onClick: () => toBottom()
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 13
+  }), jumpLabel) : null);
+});

package/ai/DocumentCard.d.ts

@@ -0,0 +1,17 @@
+export interface DocumentCardProps {
+  title: React.ReactNode;
+  /** Muted meta, e.g. "1,240 words" */
+  meta?: React.ReactNode;
+  /** Icon name. Default 'file-text' */
+  icon?: string;
+  /** Clipped height in px before expand. Default 200 */
+  collapsedHeight?: number;
+  defaultOpen?: boolean;
+  onCopy?: (text: string) => void;
+  /** Extra header action buttons */
+  actions?: React.ReactNode;
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function DocumentCard(props: DocumentCardProps): React.JSX.Element;