@efolusi/meridian 1.5.0

package/code/Console.js

@@ -0,0 +1,124 @@
+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-console{position:relative;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-console__head{display:flex;align-items:center;gap:8px;padding:8px 13px;border-bottom:1px solid var(--border-default);background:var(--surface-subtle);font-size:12px;color:var(--text-secondary)}
+.ef-console__scroll{overflow-y:auto;font-family:var(--font-mono);font-size:12px;line-height:1.6}
+.ef-console__row{display:flex;align-items:flex-start;gap:9px;padding:6px 13px;border-top:1px solid var(--border-default);color:var(--text-secondary)}
+.ef-console__row:first-child{border-top:none}
+.ef-console__glyph{display:inline-flex;flex:none;width:14px;margin-top:2px;color:var(--text-muted)}
+.ef-console__row--warn .ef-console__glyph,.ef-console__row--warn .ef-console__msg{color:var(--warning-600)}
+.ef-console__row--error .ef-console__glyph,.ef-console__row--error .ef-console__msg{color:var(--danger-600)}
+.ef-console__row--debug .ef-console__glyph{color:var(--text-link)}
+.ef-console__time{flex:none;color:var(--text-muted);font-variant-numeric:tabular-nums}
+.ef-console__msg{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
+.ef-console__src{flex:none;margin-left:auto;color:var(--text-muted);font-size:11px}
+.ef-console__stackbtn{display:inline-flex;align-items:center;gap:5px;border:none;background:none;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
+.ef-console__stackbtn:hover{color:var(--text-primary)}
+.ef-console__stackchev{display:inline-flex;margin-top:2px;color:var(--text-muted);transition:transform var(--dur-fast) var(--ease-out)}
+.ef-console__stackchev--open{transform:rotate(90deg)}
+.ef-console__stack{margin:4px 0 0;padding-left:19px;white-space:pre-wrap;color:var(--text-muted);font-size:11.5px}
+.ef-console__jump{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border-strong);border-radius:var(--radius-full);background:var(--surface-card);box-shadow:var(--shadow-md,0 2px 8px rgba(0,0,0,.08));cursor:pointer;font-family:var(--font-sans);font-size:12px;font-weight:var(--weight-semibold);color:var(--text-primary)}
+`;
+const GLYPH = {
+  info: 'info',
+  warn: 'triangle-alert',
+  error: 'circle-alert',
+  debug: 'bug'
+};
+function Row({
+  e
+}) {
+  const [open, setOpen] = React.useState(false);
+  const lvl = e.level || 'log';
+  return /*#__PURE__*/React.createElement("div", {
+    className: `ef-console__row${lvl !== 'log' ? ' ef-console__row--' + lvl : ''}`
+  }, e.time ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-console__time"
+  }, e.time) : null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-console__glyph"
+  }, GLYPH[lvl] ? /*#__PURE__*/React.createElement(Icon, {
+    name: GLYPH[lvl],
+    size: 12
+  }) : null), /*#__PURE__*/React.createElement("span", {
+    className: "ef-console__msg"
+  }, e.stack ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-console__stackbtn",
+    "aria-expanded": open,
+    onClick: () => setOpen(!open)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `ef-console__stackchev${open ? ' ef-console__stackchev--open' : ''}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 11
+  })), /*#__PURE__*/React.createElement("span", null, e.text)) : e.text, e.stack && open ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-console__stack"
+  }, e.stack) : null), e.source ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-console__src"
+  }, e.source) : null);
+}
+export function Console({
+  title = 'Console',
+  entries = [],
+  height = 240,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-console', CSS);
+  const viewport = React.useRef(null);
+  const wasBottom = React.useRef(true);
+  const [atBottom, setAtBottom] = React.useState(true);
+  const recompute = () => {
+    const v = viewport.current;
+    if (!v) return;
+    const b = v.scrollHeight - v.scrollTop - v.clientHeight < 24;
+    wasBottom.current = b;
+    setAtBottom(b);
+  };
+  React.useEffect(() => {
+    const v = viewport.current;
+    if (v && wasBottom.current) v.scrollTop = v.scrollHeight;
+    recompute();
+  }, [entries.length]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-console${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-console__head"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "terminal",
+    size: 13
+  }), title, /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto',
+      color: 'var(--text-muted)'
+    }
+  }, entries.length, " entries")), /*#__PURE__*/React.createElement("div", {
+    ref: viewport,
+    className: "ef-console__scroll",
+    style: {
+      height
+    },
+    onScroll: recompute
+  }, entries.map((e, i) => /*#__PURE__*/React.createElement(Row, {
+    key: i,
+    e: e
+  }))), !atBottom ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-console__jump",
+    onClick: () => {
+      const v = viewport.current;
+      if (v) v.scrollTo({
+        top: v.scrollHeight,
+        behavior: 'smooth'
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 12
+  }), "Latest") : null);
+}

package/code/CopyField.d.ts

@@ -0,0 +1,10 @@
+export interface CopyFieldProps extends React.HTMLAttributes<HTMLSpanElement> {
+  label?: string;
+  /** The copyable value (mono) */
+  value: string;
+  /** Mask with dots + reveal toggle */
+  secret?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function CopyField(props: CopyFieldProps): React.JSX.Element;

package/code/CopyField.js

@@ -0,0 +1,54 @@
+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-copyfield{display:flex;flex-direction:column;gap:6px}
+.ef-copyfield__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-copyfield__box{display:flex;align-items:center;gap:8px;height:var(--control-h-md);padding:0 4px 0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-sunken)}
+.ef-copyfield__value{flex:1;font-family:var(--font-mono);font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all}
+`;
+export function CopyField({
+  label,
+  value,
+  secret,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-copyfield', CSS);
+  const [show, setShow] = React.useState(!secret);
+  const [copied, setCopied] = React.useState(false);
+  const copy = () => {
+    if (navigator.clipboard) navigator.clipboard.writeText(value).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1600);
+  };
+  const shown = show ? value : '•'.repeat(Math.min(24, String(value).length));
+  const box = /*#__PURE__*/React.createElement("span", {
+    className: "ef-copyfield__box"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-copyfield__value"
+  }, shown), secret ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: show ? 'eye-off' : 'eye',
+    label: show ? 'Hide' : 'Reveal',
+    size: "sm",
+    onClick: () => setShow(s => !s)
+  }) : null, /*#__PURE__*/React.createElement(IconButton, {
+    icon: copied ? 'check' : 'copy',
+    label: "Copy",
+    size: "sm",
+    onClick: copy
+  }));
+  if (!label) return /*#__PURE__*/React.cloneElement(box, {
+    className: 'ef-copyfield__box' + (className ? ' ' + className : ''),
+    style
+  });
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: `ef-copyfield${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-copyfield__label"
+  }, label), box);
+}

package/code/Diff.d.ts

@@ -0,0 +1,26 @@
+export interface DiffLine {
+  /** @default 'ctx' */
+  type?: 'add' | 'del' | 'ctx';
+  text: string;
+}
+export interface DiffProps {
+  /** Header: file path etc. Shows +/− counts */
+  title?: React.ReactNode;
+/** Pre-computed rows. Omit and pass `from`/`to` instead. */
+  lines?: DiffLine[];
+  /** Original text; diffed against `to` when `lines` is omitted */
+  from?: string;
+  /** Changed text */
+  to?: string;
+  /** Multi-file diff; each file is diffed and collapsible */
+  files?: Array<{ name: string; from?: string; to?: string; lines?: DiffLine[]; defaultOpen?: boolean }>;
+  /** Highlight changed words inside a changed line @default true */
+  wordLevel?: boolean;
+  /** Unchanged lines kept around each hunk @default 3 */
+  contextLines?: number;
+  /** Scroll past this height */
+  maxHeight?: number | string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Diff(props: DiffProps): React.JSX.Element;

package/code/Diff.js

@@ -0,0 +1,358 @@
+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-diff{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden;font-family:var(--font-mono);font-size:12.5px;line-height:1.7}
+.ef-diff__head{display:flex;align-items:center;gap:10px;padding:8px 13px;background:var(--surface-subtle);border-bottom:1px solid var(--border-default);font-size:12px;color:var(--text-secondary);font-family:var(--font-sans)}
+.ef-diff__counts{margin-left:auto;display:inline-flex;gap:8px;font-size:11.5px;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
+.ef-diff__plus{color:var(--success-600,#3D6B4A)}
+.ef-diff__minus{color:var(--danger-600)}
+.ef-diff__scroll{overflow:auto}
+.ef-diff__line{display:flex;white-space:pre}
+.ef-diff__no{flex:none;width:38px;padding:0 8px;text-align:right;color:var(--text-muted);font-size:11px;user-select:none;background:var(--surface-subtle);border-right:1px solid var(--border-default)}
+.ef-diff__sign{flex:none;width:20px;text-align:center;user-select:none;color:var(--text-muted)}
+.ef-diff__text{flex:1;padding-right:14px;color:var(--text-secondary)}
+.ef-diff__line--add{background:var(--success-100,#EAF3EC)}
+.ef-diff__line--add .ef-diff__sign,.ef-diff__line--add .ef-diff__text{color:var(--success-600,#3D6B4A)}
+.ef-diff__line--del{background:var(--danger-100,#F8ECEA)}
+.ef-diff__line--del .ef-diff__sign,.ef-diff__line--del .ef-diff__text{color:var(--danger-600)}
+.ef-diff__word--add{background:var(--success-300,#BFDCC6);border-radius:3px}
+.ef-diff__word--del{background:var(--danger-300);border-radius:3px}
+.ef-diff__skip{display:flex;align-items:center;gap:10px;padding:2px 0;color:var(--text-muted);font-size:11px;user-select:none}
+.ef-diff__skipno{flex:none;width:76px;text-align:center;background:var(--surface-subtle);border-right:1px solid var(--border-default)}
+.ef-diff__file{border-top:1px solid var(--border-default)}
+.ef-diff__file:first-child{border-top:none}
+.ef-diff__filehead{display:flex;align-items:center;gap:9px;width:100%;padding:8px 13px;border:none;background:var(--surface-subtle);cursor:pointer;text-align:left;font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}
+.ef-diff__filehead:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-diff__filechev{display:inline-flex;color:var(--text-muted);transition:transform var(--dur-fast) var(--ease-out)}
+.ef-diff__filechev--open{transform:rotate(90deg)}
+`;
+function lcsOps(a, b) {
+  const m = a.length,
+    n = b.length;
+  if (m * n > 400000) {
+    const ops = [];
+    a.forEach(v => ops.push(['del', v]));
+    b.forEach(v => ops.push(['add', v]));
+    return ops;
+  }
+  const w = n + 1,
+    dp = new Uint16Array((m + 1) * w);
+  for (let i = m - 1; i >= 0; i--) for (let j = n - 1; j >= 0; j--) dp[i * w + j] = a[i] === b[j] ? dp[(i + 1) * w + j + 1] + 1 : Math.max(dp[(i + 1) * w + j], dp[i * w + j + 1]);
+  const ops = [];
+  let i = 0,
+    j = 0;
+  while (i < m && j < n) {
+    if (a[i] === b[j]) {
+      ops.push(['ctx', a[i]]);
+      i++;
+      j++;
+    } else if (dp[(i + 1) * w + j] >= dp[i * w + j + 1]) {
+      ops.push(['del', a[i]]);
+      i++;
+    } else {
+      ops.push(['add', b[j]]);
+      j++;
+    }
+  }
+  while (i < m) {
+    ops.push(['del', a[i]]);
+    i++;
+  }
+  while (j < n) {
+    ops.push(['add', b[j]]);
+    j++;
+  }
+  return ops;
+}
+function wordSegs(del, add) {
+  const ta = del.split(/(\s+)/).filter(s => s !== ''),
+    tb = add.split(/(\s+)/).filter(s => s !== '');
+  const ops = lcsOps(ta, tb),
+    d = [],
+    a = [];
+  for (const [t, v] of ops) {
+    if (t === 'ctx') {
+      d.push({
+        v
+      });
+      a.push({
+        v
+      });
+    } else if (t === 'del') d.push({
+      v,
+      m: 1
+    });else a.push({
+      v,
+      m: 1
+    });
+  }
+  return {
+    d,
+    a
+  };
+}
+function splitLines(s) {
+  const arr = String(s).split('\n');
+  if (arr[arr.length - 1] === '') arr.pop();
+  return arr;
+}
+export function computeDiff(from, to, {
+  wordLevel = true,
+  contextLines = 3
+} = {}) {
+  const ops = lcsOps(splitLines(from), splitLines(to));
+  const rows = [];
+  let oldNo = 0,
+    newNo = 0,
+    adds = 0,
+    dels = 0;
+  for (let i = 0; i < ops.length; i++) {
+    const [t, text] = ops[i];
+    if (t === 'ctx') {
+      oldNo++;
+      newNo++;
+      rows.push({
+        type: 'ctx',
+        text,
+        oldNo,
+        newNo
+      });
+      continue;
+    }
+    if (t === 'del') {
+      const delRun = [];
+      while (i < ops.length && ops[i][0] === 'del') {
+        delRun.push(ops[i][1]);
+        i++;
+      }
+      const addRun = [];
+      while (i < ops.length && ops[i][0] === 'add') {
+        addRun.push(ops[i][1]);
+        i++;
+      }
+      i--;
+      const max = Math.max(delRun.length, addRun.length);
+      for (let k = 0; k < max; k++) {
+        const dl = delRun[k],
+          al = addRun[k];
+        const pair = wordLevel && dl !== undefined && al !== undefined ? wordSegs(dl, al) : null;
+        if (dl !== undefined) {
+          oldNo++;
+          dels++;
+          rows.push({
+            type: 'del',
+            text: dl,
+            oldNo,
+            segs: pair && pair.d
+          });
+        }
+        if (al !== undefined) {
+          newNo++;
+          adds++;
+          rows.push({
+            type: 'add',
+            text: al,
+            newNo,
+            segs: pair && pair.a
+          });
+        }
+      }
+      continue;
+    }
+    newNo++;
+    adds++;
+    rows.push({
+      type: 'add',
+      text,
+      newNo
+    });
+  }
+  if (contextLines != null) {
+    const out = [];
+    let run = [];
+    const flush = (leading, trailing) => {
+      const keepStart = leading ? 0 : contextLines;
+      const keepEnd = trailing ? 0 : contextLines;
+      const skip = run.length - keepStart - keepEnd;
+      if (skip > (leading || trailing ? 0 : 1)) {
+        for (let k = 0; k < keepStart; k++) out.push(run[k]);
+        out.push({
+          type: 'skip',
+          count: skip
+        });
+        for (let k = run.length - keepEnd; k < run.length; k++) out.push(run[k]);
+      } else run.forEach(r => out.push(r));
+      run = [];
+    };
+    let seenChange = false;
+    rows.forEach((r, idx) => {
+      if (r.type === 'ctx') {
+        run.push(r);
+        if (idx === rows.length - 1) flush(!seenChange, true);
+      } else {
+        if (run.length) flush(!seenChange, false);
+        seenChange = true;
+        out.push(r);
+      }
+    });
+    if (run.length) flush(!seenChange, true);
+    return {
+      rows: out,
+      adds,
+      dels
+    };
+  }
+  return {
+    rows,
+    adds,
+    dels
+  };
+}
+function Rows({
+  rows
+}) {
+  return rows.map((l, i) => {
+    if (l.type === 'skip') return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: "ef-diff__skip"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ef-diff__skipno"
+    }, "\u22EF"), /*#__PURE__*/React.createElement("span", null, l.count, " unchanged lines"));
+    const t = l.type || 'ctx';
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: `ef-diff__line${t !== 'ctx' ? ' ef-diff__line--' + t : ''}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ef-diff__no"
+    }, t === 'add' ? '' : l.oldNo), /*#__PURE__*/React.createElement("span", {
+      className: "ef-diff__no"
+    }, t === 'del' ? '' : l.newNo), /*#__PURE__*/React.createElement("span", {
+      className: "ef-diff__sign"
+    }, t === 'add' ? '+' : t === 'del' ? '−' : ''), /*#__PURE__*/React.createElement("span", {
+      className: "ef-diff__text"
+    }, l.segs ? l.segs.map((s, k) => s.m ? /*#__PURE__*/React.createElement("span", {
+      key: k,
+      className: `ef-diff__word--${t}`
+    }, s.v) : s.v) : l.text));
+  });
+}
+function Counts({
+  adds,
+  dels
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ef-diff__counts"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-diff__plus"
+  }, "+", adds), /*#__PURE__*/React.createElement("span", {
+    className: "ef-diff__minus"
+  }, "\u2212", dels));
+}
+function DiffFile({
+  file,
+  wordLevel,
+  contextLines
+}) {
+  const [open, setOpen] = React.useState(file.defaultOpen !== false);
+  const r = React.useMemo(() => file.lines ? legacy(file.lines) : computeDiff(file.from || '', file.to || '', {
+    wordLevel,
+    contextLines
+  }), [file, wordLevel, contextLines]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ef-diff__file"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-diff__filehead",
+    "aria-expanded": open,
+    onClick: () => setOpen(!open)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `ef-diff__filechev${open ? ' ef-diff__filechev--open' : ''}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 12
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, file.name), /*#__PURE__*/React.createElement(Counts, {
+    adds: r.adds,
+    dels: r.dels
+  })), open ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-diff__scroll"
+  }, /*#__PURE__*/React.createElement(Rows, {
+    rows: r.rows
+  })) : null);
+}
+function legacy(lines) {
+  let oldNo = 0,
+    newNo = 0,
+    adds = 0,
+    dels = 0;
+  const rows = lines.map(l => {
+    const t = l.type || 'ctx';
+    if (t !== 'add') oldNo++;
+    if (t !== 'del') newNo++;
+    if (t === 'add') adds++;
+    if (t === 'del') dels++;
+    return {
+      type: t,
+      text: l.text,
+      oldNo,
+      newNo
+    };
+  });
+  return {
+    rows,
+    adds,
+    dels
+  };
+}
+export function Diff({
+  title,
+  lines,
+  from,
+  to,
+  files,
+  wordLevel = true,
+  contextLines = 3,
+  maxHeight,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-diff', CSS);
+  const single = React.useMemo(() => {
+    if (files) return null;
+    if (lines) return legacy(lines);
+    return computeDiff(from || '', to || '', {
+      wordLevel,
+      contextLines: from !== undefined ? contextLines : null
+    });
+  }, [lines, from, to, files, wordLevel, contextLines]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-diff${className ? ' ' + className : ''}`,
+    style: style
+  }), title && single ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-diff__head"
+  }, title, /*#__PURE__*/React.createElement(Counts, {
+    adds: single.adds,
+    dels: single.dels
+  })) : null, files ? files.map((f, i) => /*#__PURE__*/React.createElement(DiffFile, {
+    key: f.name || i,
+    file: f,
+    wordLevel: wordLevel,
+    contextLines: contextLines
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: "ef-diff__scroll",
+    style: maxHeight ? {
+      maxHeight
+    } : null
+  }, /*#__PURE__*/React.createElement(Rows, {
+    rows: single.rows
+  })));
+}

package/code/EnvList.d.ts

@@ -0,0 +1,14 @@
+export interface EnvVar {
+  name: string;
+  value: string;
+  /** Masked until revealed */
+  secret?: boolean;
+}
+export interface EnvListProps {
+  title?: string;
+  vars: EnvVar[];
+  defaultVisible?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function EnvList(props: EnvListProps): React.JSX.Element;

package/code/EnvList.js

@@ -0,0 +1,89 @@
+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-env{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);font-family:var(--font-sans)}
+.ef-env__head{display:flex;align-items:center;gap:9px;padding:10px 14px}
+.ef-env__glyph{display:inline-flex;color:var(--text-muted)}
+.ef-env__title{flex:1;min-width:0;font-size:13.5px;font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-env__btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:none;cursor:pointer;color:var(--text-muted);border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
+.ef-env__btn:hover{color:var(--text-primary);background:var(--surface-subtle)}
+.ef-env__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-env__btn--done{color:var(--success-600)}
+.ef-env__list{padding:0 6px 6px}
+.ef-env__row{display:flex;align-items:center;gap:12px;padding:5px 8px;border-radius:var(--radius-sm)}
+.ef-env__row:hover{background:var(--surface-subtle)}
+.ef-env__name{flex:none;font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}
+.ef-env__val{flex:1;min-width:0;margin-left:auto;text-align:right;font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ef-env__row .ef-env__btn{opacity:0;width:24px;height:24px}
+.ef-env__row:hover .ef-env__btn,.ef-env__row .ef-env__btn:focus-visible,.ef-env__row .ef-env__btn--done{opacity:1}
+`;
+const MASK = '••••••••';
+function Row({
+  v,
+  visible
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const masked = v.secret && !visible;
+  const copy = () => {
+    if (navigator.clipboard) navigator.clipboard.writeText(v.value).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ef-env__row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-env__name"
+  }, v.name), /*#__PURE__*/React.createElement("span", {
+    className: "ef-env__val"
+  }, masked ? MASK : v.value), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `ef-env__btn${copied ? ' ef-env__btn--done' : ''}`,
+    "aria-label": 'Copy ' + v.name,
+    onClick: copy
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: copied ? 'check' : 'copy',
+    size: 13
+  })));
+}
+export function EnvList({
+  title = 'Environment',
+  vars = [],
+  defaultVisible = false,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-env', CSS);
+  const [visible, setVisible] = React.useState(!!defaultVisible);
+  const hasSecrets = vars.some(v => v.secret);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-env${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-env__head"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-env__glyph"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "key",
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "ef-env__title"
+  }, title), hasSecrets ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-env__btn",
+    "aria-label": visible ? 'Hide secrets' : 'Reveal secrets',
+    "aria-pressed": visible,
+    onClick: () => setVisible(!visible)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: visible ? 'eye-off' : 'eye',
+    size: 14
+  })) : null), /*#__PURE__*/React.createElement("div", {
+    className: "ef-env__list"
+  }, vars.map((v, i) => /*#__PURE__*/React.createElement(Row, {
+    key: i,
+    v: v,
+    visible: visible
+  }))));
+}