@efolusi/meridian 1.5.0

package/display/ListItem.js

@@ -0,0 +1,61 @@
+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 { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-listitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);text-align:left;width:100%;border:none;background:none;font-family:var(--font-sans);color:var(--text-primary)}
+button.ef-listitem,a.ef-listitem{cursor:pointer;transition:background var(--dur-fast) var(--ease-out);text-decoration:none}
+button.ef-listitem:hover,a.ef-listitem:hover{background:var(--surface-sunken)}
+button.ef-listitem:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-listitem__media{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--text-secondary)}
+.ef-listitem__title{font-size:var(--text-md);font-weight:var(--weight-medium);line-height:1.35}
+.ef-listitem__desc{font-size:var(--text-sm);color:var(--text-muted);line-height:1.4;margin-top:1px}
+.ef-listitem__trailing{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;color:var(--text-muted)}
+`;
+export function ListItem({
+  icon,
+  media,
+  title,
+  description,
+  trailing,
+  chevron,
+  onClick,
+  href,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-listitem', CSS);
+  const Tag = href ? 'a' : onClick ? 'button' : 'div';
+  return /*#__PURE__*/React.createElement(Tag, _extends({}, rest, {
+    href: href,
+    onClick: onClick,
+    className: `ef-listitem${className ? ' ' + className : ''}`,
+    style: style
+  }), media ? media : icon ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-listitem__media"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 16
+  })) : null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      minWidth: 0,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-listitem__title",
+    style: {
+      display: 'block'
+    }
+  }, title), description ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-listitem__desc",
+    style: {
+      display: 'block'
+    }
+  }, description) : null), /*#__PURE__*/React.createElement("span", {
+    className: "ef-listitem__trailing"
+  }, trailing, chevron ? /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 15
+  }) : null));
+}

package/display/Resizable.d.ts

@@ -0,0 +1,16 @@
+export interface ResizableProps {
+  /** @default 'horizontal' */
+  direction?: 'horizontal' | 'vertical';
+  /** First pane share, 0-1 @default 0.5 */
+  defaultRatio?: number;
+  /** @default 0.15 */
+  min?: number;
+  /** @default 0.85 */
+  max?: number;
+  onRatioChange?: (ratio: number) => void;
+  /** Exactly two panes */
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Resizable(props: ResizableProps): React.JSX.Element;

package/display/Resizable.js

@@ -0,0 +1,90 @@
+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-resizable{display:flex;width:100%;height:100%;min-height:0;min-width:0}
+.ef-resizable--vertical{flex-direction:column}
+.ef-resizable__pane{min-width:0;min-height:0;overflow:auto}
+.ef-resizable__handle{flex:none;position:relative;background:transparent;border:none;padding:0;cursor:col-resize;touch-action:none}
+.ef-resizable--horizontal>.ef-resizable__handle{width:9px}
+.ef-resizable--vertical>.ef-resizable__handle{height:9px;cursor:row-resize}
+.ef-resizable__handle::after{content:'';position:absolute;background:var(--border-default);transition:background var(--dur-fast) var(--ease-out)}
+.ef-resizable--horizontal>.ef-resizable__handle::after{left:4px;top:0;bottom:0;width:1px}
+.ef-resizable--vertical>.ef-resizable__handle::after{top:4px;left:0;right:0;height:1px}
+.ef-resizable__handle:hover::after,.ef-resizable__handle--drag::after{background:var(--accent)}
+.ef-resizable__handle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+`;
+export function Resizable({
+  direction = 'horizontal',
+  defaultRatio = 0.5,
+  min = 0.15,
+  max = 0.85,
+  onRatioChange,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-resizable', CSS);
+  const [ratio, setRatio] = React.useState(defaultRatio);
+  const [drag, setDrag] = React.useState(false);
+  const ref = React.useRef(null);
+  const clamp = v => Math.min(max, Math.max(min, v));
+  const apply = v => {
+    const r = clamp(v);
+    setRatio(r);
+    if (onRatioChange) onRatioChange(r);
+  };
+  const down = e => {
+    e.preventDefault();
+    setDrag(true);
+    const move = ev => {
+      const rect = ref.current.getBoundingClientRect();
+      apply(direction === 'horizontal' ? (ev.clientX - rect.left) / rect.width : (ev.clientY - rect.top) / rect.height);
+    };
+    const up = () => {
+      setDrag(false);
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+  const key = e => {
+    const d = {
+      ArrowLeft: -0.02,
+      ArrowRight: 0.02,
+      ArrowUp: -0.02,
+      ArrowDown: 0.02
+    }[e.key];
+    if (d === undefined) return;
+    e.preventDefault();
+    apply(ratio + d);
+  };
+  const kids = React.Children.toArray(children);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    ref: ref,
+    className: `ef-resizable ef-resizable--${direction}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-resizable__pane",
+    style: {
+      flexBasis: ratio * 100 + '%',
+      flexGrow: 0,
+      flexShrink: 0
+    }
+  }, kids[0]), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    role: "separator",
+    "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal',
+    "aria-label": "Resize panes",
+    className: `ef-resizable__handle${drag ? ' ef-resizable__handle--drag' : ''}`,
+    onPointerDown: down,
+    onKeyDown: key
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-resizable__pane",
+    style: {
+      flex: 1
+    }
+  }, kids[1]));
+}

package/display/ScrollArea.d.ts

@@ -0,0 +1,8 @@
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Scroll past this height */
+  maxHeight?: number | string;
+  /** Fixed height */
+  height?: number | string;
+  children?: React.ReactNode;
+}
+export declare function ScrollArea(props: ScrollAreaProps): React.JSX.Element;

package/display/ScrollArea.js

@@ -0,0 +1,28 @@
+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-scrollarea{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
+.ef-scrollarea::-webkit-scrollbar{width:9px;height:9px}
+.ef-scrollarea::-webkit-scrollbar-track{background:transparent}
+.ef-scrollarea::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full);border:2px solid transparent;background-clip:content-box}
+.ef-scrollarea::-webkit-scrollbar-thumb:hover{background:var(--text-muted);border:2px solid transparent;background-clip:content-box}
+`;
+export function ScrollArea({
+  maxHeight,
+  height,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-scrollarea', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: `ef-scrollarea${className ? ' ' + className : ''}`,
+    style: {
+      maxHeight,
+      height,
+      ...style
+    }
+  }, rest), children);
+}

package/display/Tag.d.ts

@@ -0,0 +1,9 @@
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Lucide icon name, leading */
+  icon?: string;
+  /** Shows a remove ✕ button */
+  onRemove?: (e: React.MouseEvent) => void;
+  onClick?: (e: React.MouseEvent) => void;
+  children?: React.ReactNode;
+}
+export declare function Tag(props: TagProps): React.JSX.Element;

package/display/Tag.js

@@ -0,0 +1,41 @@
+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 { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border-strong);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:nowrap;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
+.ef-tag--interactive{cursor:pointer}
+.ef-tag--interactive:hover{background:var(--surface-sunken);border-color:var(--sand-400)}
+.ef-tag__x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-right:-4px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;padding:0;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.ef-tag__x:hover{background:var(--sand-200);color:var(--text-primary)}
+.ef-tag__x:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+`;
+export function Tag({
+  icon,
+  onRemove,
+  onClick,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-tag', CSS);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: `ef-tag${onClick ? ' ef-tag--interactive' : ''}${className ? ' ' + className : ''}`,
+    onClick: onClick,
+    style: style
+  }, rest), icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 13
+  }) : null, children, onRemove ? /*#__PURE__*/React.createElement("button", {
+    className: "ef-tag__x",
+    "aria-label": "Remove",
+    onClick: e => {
+      e.stopPropagation();
+      onRemove(e);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "x",
+    size: 12
+  })) : null);
+}

package/display/Toolbar.d.ts

@@ -0,0 +1,22 @@
+export interface ToolbarItem {
+  id: string;
+  /** Lucide icon */
+  icon?: string;
+  label?: React.ReactNode;
+  /** Tooltip text */
+  tip?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+export interface ToolbarProps {
+  /** Items; 'separator' inserts a divider */
+  items: Array<ToolbarItem | 'separator'>;
+  /** Active id or ids (toggle styling) */
+  value?: string | string[];
+  onChange?: (id: string) => void;
+  /** aria-label */
+  label?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Toolbar(props: ToolbarProps): React.JSX.Element;

package/display/Toolbar.js

@@ -0,0 +1,55 @@
+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 { Tooltip } from "../feedback/Tooltip.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-toolbar{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md)}
+.ef-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;min-width:28px;padding:0 7px;border:none;border-radius:6px;background:none;cursor:pointer;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.ef-toolbar__btn:hover:not(:disabled){background:var(--surface-sunken);color:var(--text-primary)}
+.ef-toolbar__btn--active{background:var(--accent);color:var(--accent-contrast)}
+.ef-toolbar__btn--active:hover:not(:disabled){background:var(--accent-hover);color:var(--accent-contrast)}
+.ef-toolbar__btn:disabled{opacity:.4;cursor:not-allowed}
+.ef-toolbar__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-toolbar__sep{width:1px;height:18px;background:var(--border-default);margin:0 4px}
+`;
+export function Toolbar({
+  items,
+  value,
+  onChange,
+  label,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-toolbar', CSS);
+  const active = Array.isArray(value) ? value : value != null ? [value] : [];
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "toolbar",
+    "aria-label": label,
+    className: `ef-toolbar${className ? ' ' + className : ''}`,
+    style: style
+  }), items.map((it, i) => {
+    if (it === 'separator') return /*#__PURE__*/React.createElement("span", {
+      key: 's' + i,
+      className: "ef-toolbar__sep"
+    });
+    const btn = /*#__PURE__*/React.createElement("button", {
+      key: it.id,
+      disabled: it.disabled,
+      "aria-pressed": active.includes(it.id) || undefined,
+      className: `ef-toolbar__btn${active.includes(it.id) ? ' ef-toolbar__btn--active' : ''}`,
+      onClick: () => {
+        if (onChange) onChange(it.id);
+        if (it.onClick) it.onClick();
+      }
+    }, it.icon ? /*#__PURE__*/React.createElement(Icon, {
+      name: it.icon,
+      size: 15
+    }) : null, it.label || null);
+    return it.tip ? /*#__PURE__*/React.createElement(Tooltip, {
+      key: it.id,
+      label: it.tip
+    }, btn) : btn;
+  }));
+}

package/display/TreeList.d.ts

@@ -0,0 +1,20 @@
+export interface TreeNode {
+  id: string;
+  label: React.ReactNode;
+  /** Lucide icon */
+  icon?: string;
+  /** Right-aligned mono count */
+  count?: number;
+  children?: TreeNode[];
+}
+export interface TreeListProps {
+  nodes: TreeNode[];
+  /** Controlled selected id */
+  value?: string;
+  onSelect?: (id: string, node: TreeNode) => void;
+  /** Branch ids open initially (default: all top-level) */
+  defaultOpen?: string[];
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function TreeList(props: TreeListProps): React.JSX.Element;

package/display/TreeList.js

@@ -0,0 +1,101 @@
+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 { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-tree{display:flex;flex-direction:column;gap:1px;font-size:var(--text-sm)}
+.ef-tree__row{display:flex;align-items:center;gap:7px;height:30px;padding:0 8px;border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-secondary);width:100%;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.ef-tree__row:hover{background:var(--surface-sunken);color:var(--text-primary)}
+.ef-tree__row--sel{background:var(--accent-subtle);color:var(--brand-700);font-weight:var(--weight-semibold)}
+.ef-tree__row--sel:hover{background:var(--accent-subtle);color:var(--brand-700)}
+.ef-tree__row:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-tree__chev{display:inline-flex;color:var(--text-muted);transition:transform var(--dur-fast) var(--ease-out);flex:none}
+.ef-tree__chev--open{transform:rotate(90deg)}
+.ef-tree__icon{display:inline-flex;flex:none;color:var(--text-muted)}
+.ef-tree__row--sel .ef-tree__icon{color:inherit}
+.ef-tree__count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+`;
+function Node({
+  node,
+  depth,
+  open,
+  sel,
+  toggle,
+  select
+}) {
+  const kids = node.children || [];
+  const isOpen = open.includes(node.id);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: `ef-tree__row${sel === node.id ? ' ef-tree__row--sel' : ''}`,
+    style: {
+      paddingLeft: 8 + depth * 18
+    },
+    onClick: () => {
+      if (kids.length) toggle(node.id);
+      select(node.id, node);
+    }
+  }, kids.length ? /*#__PURE__*/React.createElement("span", {
+    className: `ef-tree__chev${isOpen ? ' ef-tree__chev--open' : ''}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 13
+  })) : /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 13,
+      flex: 'none'
+    }
+  }), node.icon ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-tree__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: node.icon,
+    size: 15
+  })) : null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, node.label), node.count != null ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-tree__count"
+  }, node.count) : null), isOpen && kids.map(k => /*#__PURE__*/React.createElement(Node, {
+    key: k.id,
+    node: k,
+    depth: depth + 1,
+    open: open,
+    sel: sel,
+    toggle: toggle,
+    select: select
+  })));
+}
+export function TreeList({
+  nodes,
+  value,
+  onSelect,
+  defaultOpen,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-tree', CSS);
+  const [open, setOpen] = React.useState(defaultOpen || nodes.filter(n => n.children).map(n => n.id));
+  const [innerSel, setInnerSel] = React.useState(null);
+  const sel = value != null ? value : innerSel;
+  const toggle = id => setOpen(o => o.includes(id) ? o.filter(x => x !== id) : [...o, id]);
+  const select = (id, node) => {
+    if (value == null) setInnerSel(id);
+    if (onSelect) onSelect(id, node);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "tree",
+    className: `ef-tree${className ? ' ' + className : ''}`,
+    style: style
+  }), nodes.map(n => /*#__PURE__*/React.createElement(Node, {
+    key: n.id,
+    node: n,
+    depth: 0,
+    open: open,
+    sel: sel,
+    toggle: toggle,
+    select: select
+  })));
+}

package/feedback/Alert.d.ts

@@ -0,0 +1,14 @@
+export interface AlertProps {
+  /** @default 'info' */
+  tone?: 'info' | 'success' | 'warning' | 'danger';
+  /** Override the tone icon (Lucide name) */
+  icon?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Right-aligned slot (button/link) */
+  action?: React.ReactNode;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Alert(props: AlertProps): React.JSX.Element;

package/feedback/Alert.js

@@ -0,0 +1,56 @@
+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 { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-card)}
+.ef-alert__icon{display:inline-flex;margin-top:1px;flex:none}
+.ef-alert--info .ef-alert__icon{color:var(--brand-700)}
+.ef-alert--success .ef-alert__icon{color:var(--success-600)}
+.ef-alert--warning .ef-alert__icon{color:var(--warning-600)}
+.ef-alert--danger .ef-alert__icon{color:var(--danger-600)}
+.ef-alert--danger{border-color:var(--danger-300)}
+.ef-alert__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);line-height:1.4}
+.ef-alert__desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;margin-top:2px}
+.ef-alert__action{margin-left:auto;flex:none}
+`;
+const ICONS = {
+  info: 'info',
+  success: 'circle-check',
+  warning: 'triangle-alert',
+  danger: 'circle-alert'
+};
+export function Alert({
+  tone = 'info',
+  icon,
+  title,
+  description,
+  action,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-alert', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "status",
+    className: `ef-alert ef-alert--${tone}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-alert__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon || ICONS[tone],
+    size: 16
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, title ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-alert__title"
+  }, title) : null, description ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-alert__desc"
+  }, description) : null, children), action ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-alert__action"
+  }, action) : null);
+}

package/feedback/Banner.d.ts

@@ -0,0 +1,15 @@
+export interface BannerProps {
+  /** @default 'neutral' */
+  tone?: 'neutral' | 'brand' | 'warning' | 'danger';
+  /** Lucide icon name */
+  icon?: string;
+  /** Underlined action label */
+  action?: string;
+  onAction?: () => void;
+  /** Shows a dismiss ✕ */
+  onDismiss?: () => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Banner(props: BannerProps): React.JSX.Element;

package/feedback/Banner.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 { Icon } from "../icons/Icon.js";
+import { IconButton } from "../forms/IconButton.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-banner{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:var(--text-sm);border-bottom:1px solid var(--border-default)}
+.ef-banner--neutral{background:var(--surface-sunken);color:var(--text-primary)}
+.ef-banner--brand{background:var(--cream-50);color:var(--cocoa-700)}
+.ef-banner--warning{background:var(--warning-100);color:var(--warning-600);border-color:var(--warning-300)}
+.ef-banner--danger{background:var(--danger-100);color:var(--danger-600);border-color:var(--danger-300)}
+.ef-banner__icon{display:inline-flex;flex:none}
+.ef-banner__text{flex:1;min-width:0}
+.ef-banner__text strong{font-weight:var(--weight-semibold)}
+.ef-banner__action{flex:none;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:inherit;text-decoration:underline;text-underline-offset:3px;background:none;border:none;cursor:pointer;font-family:var(--font-sans);padding:0}
+`;
+export function Banner({
+  tone = 'neutral',
+  icon,
+  action,
+  onAction,
+  onDismiss,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-banner', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "status",
+    className: `ef-banner ef-banner--${tone}${className ? ' ' + className : ''}`,
+    style: style
+  }), icon ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-banner__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 15
+  })) : null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-banner__text"
+  }, children), action ? /*#__PURE__*/React.createElement("button", {
+    className: "ef-banner__action",
+    onClick: onAction
+  }, action) : null, onDismiss ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "x",
+    label: "Dismiss",
+    size: "sm",
+    onClick: onDismiss
+  }) : null);
+}

package/feedback/ConfirmDialog.d.ts

@@ -0,0 +1,18 @@
+export interface ConfirmDialogProps {
+  open: boolean;
+  onClose?: () => void;
+  /** Called on confirm (dialog closes itself after) */
+  onConfirm?: () => void;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** @default 'Delete' */
+  confirmLabel?: string;
+  /** @default 'Cancel' */
+  cancelLabel?: string;
+  /** 'danger' (red confirm) or 'primary' @default 'danger' */
+  tone?: 'danger' | 'primary';
+  /** Require typing this string to enable confirm */
+  typeToConfirm?: string;
+  children?: React.ReactNode;
+}
+export declare function ConfirmDialog(props: ConfirmDialogProps): React.JSX.Element;

package/feedback/ConfirmDialog.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 { Dialog } from "./Dialog.js";
+import { Button } from "../forms/Button.js";
+import { Input } from "../forms/Input.js";
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = 'Delete',
+  cancelLabel = 'Cancel',
+  tone = 'danger',
+  typeToConfirm,
+  children,
+  ...rest
+}) {
+  const [typed, setTyped] = React.useState('');
+  React.useEffect(() => {
+    if (!open) setTyped('');
+  }, [open]);
+  const blocked = typeToConfirm ? typed !== typeToConfirm : false;
+  return /*#__PURE__*/React.createElement(Dialog, _extends({}, rest, {
+    open: open,
+    onClose: onClose,
+    title: title,
+    description: description,
+    footer: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      variant: "ghost",
+      onClick: onClose
+    }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
+      variant: tone === 'danger' ? 'danger' : 'primary',
+      disabled: blocked,
+      onClick: () => {
+        if (onConfirm) onConfirm();
+        if (onClose) onClose();
+      }
+    }, confirmLabel))
+  }), children, typeToConfirm ? /*#__PURE__*/React.createElement(Input, {
+    label: `Type “${typeToConfirm}” to confirm`,
+    value: typed,
+    onChange: e => setTyped(e.target.value),
+    placeholder: typeToConfirm,
+    style: children ? {
+      marginTop: 14
+    } : undefined
+  }) : null);
+}