@efolusi/meridian 1.5.0

package/code/Exception.d.ts

@@ -0,0 +1,25 @@
+export interface ExceptionFrame {
+  /** Function name */
+  fn: string;
+  /** e.g. 'api/users.ts:32:11' */
+  loc: string;
+  active?: boolean;
+  /** Dimmed framework frame */
+  internal?: boolean;
+}
+export interface ExceptionSourceLine {
+  no: number;
+  text: string;
+  active?: boolean;
+}
+export interface ExceptionProps {
+  /** e.g. 'TypeError' */
+  type?: string;
+  message: React.ReactNode;
+  frames?: ExceptionFrame[];
+  source?: { title: string; lines: ExceptionSourceLine[] };
+  defaultOpen?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Exception(props: ExceptionProps): React.JSX.Element;

package/code/Exception.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";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-exception{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);font-family:var(--font-sans);overflow:hidden}
+.ef-exception__head{display:flex;align-items:flex-start;gap:10px;padding:11px 14px}
+.ef-exception__type{flex:none;margin-top:1px;padding:2px 7px;border-radius:var(--radius-sm);background:var(--danger-100);color:var(--danger-600);font-family:var(--font-mono);font-size:11px;font-weight:var(--weight-semibold)}
+.ef-exception__msg{flex:1;min-width:0;font-size:13.5px;line-height:1.5;color:var(--text-primary)}
+.ef-exception__toggle{flex:none;display:inline-flex;align-items:center;gap:4px;border:none;background:none;cursor:pointer;padding:3px 7px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:12px;color:var(--text-muted);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
+.ef-exception__toggle:hover{color:var(--text-primary);background:var(--surface-subtle)}
+.ef-exception__toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-exception__chev{display:inline-flex;transition:transform var(--dur-fast) var(--ease-out)}
+.ef-exception--open .ef-exception__chev{transform:rotate(90deg)}
+.ef-exception__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-med) var(--ease-out)}
+.ef-exception--open .ef-exception__body{grid-template-rows:1fr}
+.ef-exception__clip{overflow:hidden;min-height:0}
+.ef-exception__frames{margin:0 14px 12px;padding:0;list-style:none;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-subtle);overflow:hidden;font-family:var(--font-mono);font-size:11.5px;line-height:1.5}
+.ef-exception__frame{display:flex;align-items:baseline;gap:10px;padding:5px 11px;border-left:2px solid transparent}
+.ef-exception__frame--active{border-left-color:var(--danger-600);background:var(--danger-100)}
+.ef-exception__frame--internal{opacity:.5}
+.ef-exception__fn{flex:none;color:var(--text-primary)}
+.ef-exception__loc{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
+.ef-exception__src{margin:0 14px 12px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-subtle);overflow:hidden}
+.ef-exception__srchead{display:flex;align-items:center;gap:8px;padding:6px 11px;border-bottom:1px solid var(--border-default);font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+.ef-exception__code{margin:0;padding:8px 0;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--text-secondary);overflow-x:auto}
+.ef-exception__ln{display:flex;padding:0 11px;border-left:2px solid transparent;white-space:pre}
+.ef-exception__ln--active{border-left-color:var(--danger-600);background:var(--danger-100);color:var(--danger-600)}
+.ef-exception__no{flex:none;width:34px;color:var(--text-muted);user-select:none}
+`;
+export function Exception({
+  type = 'Error',
+  message,
+  frames = [],
+  source,
+  defaultOpen = false,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-exception', CSS);
+  const [open, setOpen] = React.useState(!!defaultOpen);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-exception${open ? ' ef-exception--open' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-exception__head"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-exception__type"
+  }, type), /*#__PURE__*/React.createElement("span", {
+    className: "ef-exception__msg"
+  }, message), frames.length || source ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-exception__toggle",
+    "aria-expanded": open,
+    onClick: () => setOpen(!open)
+  }, frames.length ? frames.length + ' frames' : 'Source', /*#__PURE__*/React.createElement("span", {
+    className: "ef-exception__chev"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 12
+  }))) : null), /*#__PURE__*/React.createElement("div", {
+    className: "ef-exception__body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-exception__clip"
+  }, frames.length ? /*#__PURE__*/React.createElement("ol", {
+    className: "ef-exception__frames"
+  }, frames.map((f, i) => /*#__PURE__*/React.createElement("li", {
+    key: i,
+    className: `ef-exception__frame${f.active ? ' ef-exception__frame--active' : ''}${f.internal ? ' ef-exception__frame--internal' : ''}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-exception__fn"
+  }, f.fn), /*#__PURE__*/React.createElement("span", {
+    className: "ef-exception__loc"
+  }, f.loc)))) : null, source ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-exception__src"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-exception__srchead"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "file-text",
+    size: 12
+  }), source.title), /*#__PURE__*/React.createElement("pre", {
+    className: "ef-exception__code"
+  }, (source.lines || []).map((l, i) => /*#__PURE__*/React.createElement("span", {
+    key: i,
+    className: `ef-exception__ln${l.active ? ' ef-exception__ln--active' : ''}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-exception__no"
+  }, l.no), l.text, '\n')))) : null)));
+}

package/code/Terminal.d.ts

@@ -0,0 +1,20 @@
+export interface TerminalLine {
+  text: string;
+  /** cmd gets a $ prompt; ok/err/info are tinted */
+  type?: 'cmd' | 'out' | 'ok' | 'err' | 'info';
+  /** Muted timestamp prefix */
+  time?: string;
+}
+export interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Header label, e.g. "deploy@efolusi-prod" */
+  host?: string;
+  /** Strings or line objects */
+  lines?: Array<string | TerminalLine>;
+  /** Blinking caret after the last line */
+  live?: boolean;
+  /** @default 260 */
+  maxHeight?: number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Terminal(props: TerminalProps): React.JSX.Element;

package/code/Terminal.js

@@ -0,0 +1,58 @@
+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-term{background:var(--surface-code);border:1px solid var(--border-code);border-radius:var(--radius-md);overflow:hidden}
+.ef-term__head{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid rgba(250,249,246,.1)}
+.ef-term__host{font-family:var(--font-mono);font-size:11px;color:rgba(250,249,246,.55)}
+.ef-term__dot{width:7px;height:7px;border-radius:var(--radius-full);background:#7FD08D}
+.ef-term__body{padding:12px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;overflow-x:auto}
+.ef-term__line{white-space:pre-wrap;color:rgba(250,249,246,.82)}
+.ef-term__line--cmd{color:#F8F4E6}
+.ef-term__line--cmd::before{content:'$ ';color:var(--caramel-500)}
+.ef-term__line--ok{color:#7FD08D}
+.ef-term__line--err{color:#F49B93}
+.ef-term__line--info{color:rgba(250,249,246,.55)}
+.ef-term__time{color:rgba(250,249,246,.35);margin-right:10px}
+@keyframes ef-term-caret{0%,100%{opacity:1}50%{opacity:0}}
+.ef-term__caret{display:inline-block;width:7px;height:13px;background:#F8F4E6;vertical-align:-2px;animation:ef-term-caret 1s steps(1) infinite}
+`;
+export function Terminal({
+  host,
+  lines = [],
+  live,
+  maxHeight = 260,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-term', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-term${className ? ' ' + className : ''}`,
+    style: style
+  }), host ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-term__head"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-term__dot"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-term__host"
+  }, host)) : null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-term__body",
+    style: {
+      maxHeight,
+      overflowY: 'auto'
+    }
+  }, lines.map((l, i) => {
+    const item = typeof l === 'string' ? {
+      text: l
+    } : l;
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: `ef-term__line${item.type ? ' ef-term__line--' + item.type : ''}`
+    }, item.time ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-term__time"
+    }, item.time) : null, item.text);
+  }), live ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-term__caret"
+  }) : null));
+}

package/data/BarChart.d.ts

@@ -0,0 +1,14 @@
+export interface BarChartProps {
+  /** Numbers, or { value, label } for hover titles */
+  data: Array<number | { value: number; label?: string }>;
+  /** @default 140 */
+  height?: number;
+  /** Ink-fill the last N bars */
+  highlightLast?: number;
+  /** X-axis labels, spread edge to edge */
+  labels?: string[];
+  formatValue?: (v: number) => string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function BarChart(props: BarChartProps): React.JSX.Element;

package/data/BarChart.js

@@ -0,0 +1,44 @@
+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-bars{display:flex;align-items:flex-end;gap:3px;width:100%}
+.ef-bars__bar{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:var(--sand-200);transition:background var(--dur-fast) var(--ease-out)}
+.ef-bars__bar--hi{background:var(--accent)}
+.ef-bars__bar:hover{background:var(--brand-700)}
+.ef-bars__labels{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}
+`;
+export function BarChart({
+  data = [],
+  height = 140,
+  highlightLast = 0,
+  labels,
+  formatValue,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-bars', CSS);
+  const vals = data.map(d => typeof d === 'number' ? d : d.value);
+  const max = Math.max(...vals, 1);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: className,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-bars",
+    style: {
+      height
+    }
+  }, vals.map((v, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    className: `ef-bars__bar${i >= vals.length - highlightLast ? ' ef-bars__bar--hi' : ''}`,
+    style: {
+      height: Math.max(2, v / max * 100) + '%'
+    },
+    title: (data[i] && data[i].label ? data[i].label + ' · ' : '') + (formatValue ? formatValue(v) : v.toLocaleString())
+  }))), labels && labels.length ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-bars__labels"
+  }, labels.map((l, i) => /*#__PURE__*/React.createElement("span", {
+    key: i
+  }, l))) : null);
+}

package/data/DonutChart.d.ts

@@ -0,0 +1,17 @@
+export interface DonutSlice { label: string; value: number; /** Defaults to brand palette */ color?: string; }
+export interface DonutChartProps {
+  data: DonutSlice[];
+  /** Px @default 140 */
+  size?: number;
+  /** Ring thickness (viewBox units) @default 16 */
+  thickness?: number;
+  /** Center caption */
+  centerLabel?: React.ReactNode;
+  /** Center figure */
+  centerValue?: React.ReactNode;
+  /** Hover value formatter */
+  format?: (value: number) => string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function DonutChart(props: DonutChartProps): React.JSX.Element;

package/data/DonutChart.js

@@ -0,0 +1,114 @@
+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-donut{display:flex;align-items:center;gap:20px}
+.ef-donut__legend{display:flex;flex-direction:column;gap:8px}
+.ef-donut__item{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--text-secondary);border:none;background:none;padding:0;cursor:default;font-family:var(--font-sans);text-align:left}
+.ef-donut__swatch{width:9px;height:9px;border-radius:2px;flex:none}
+.ef-donut__val{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-primary);padding-left:14px}
+`;
+const PALETTE = ['var(--brand-950)', 'var(--brand-500)', 'var(--brand-200)', 'var(--sand-400)', 'var(--sand-200)'];
+export function DonutChart({
+  data,
+  size = 140,
+  thickness = 16,
+  centerLabel,
+  centerValue,
+  format,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-donut', CSS);
+  const [hov, setHov] = React.useState(null);
+  const total = data.reduce((s, d) => s + d.value, 0) || 1;
+  const R = 50 - thickness / 100 * 50;
+  const C = 2 * Math.PI * R;
+  let acc = 0;
+  const segs = data.map((d, i) => {
+    const frac = d.value / total;
+    const seg = {
+      ...d,
+      i,
+      dash: `${Math.max(frac * C - 1.5, 0.5)} ${C}`,
+      offset: -acc * C,
+      color: d.color || PALETTE[i % PALETTE.length]
+    };
+    acc += frac;
+    return seg;
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-donut${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      width: size,
+      height: size,
+      flex: 'none'
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 100 100",
+    width: size,
+    height: size,
+    style: {
+      transform: 'rotate(-90deg)'
+    }
+  }, segs.map(s => /*#__PURE__*/React.createElement("circle", {
+    key: s.i,
+    cx: "50",
+    cy: "50",
+    r: R,
+    fill: "none",
+    stroke: s.color,
+    strokeWidth: thickness * (hov === s.i ? 1.15 : 1),
+    strokeDasharray: s.dash,
+    strokeDashoffset: s.offset,
+    style: {
+      transition: 'stroke-width 120ms var(--ease-out)'
+    },
+    onMouseEnter: () => setHov(s.i),
+    onMouseLeave: () => setHov(null)
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-mono)',
+      fontSize: Math.round(size * 0.16),
+      fontWeight: 600,
+      color: 'var(--text-primary)'
+    }
+  }, hov != null ? format ? format(segs[hov].value) : segs[hov].value.toLocaleString() : centerValue), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: 'var(--text-muted)'
+    }
+  }, hov != null ? segs[hov].label : centerLabel))), /*#__PURE__*/React.createElement("div", {
+    className: "ef-donut__legend"
+  }, segs.map(s => /*#__PURE__*/React.createElement("span", {
+    key: s.i,
+    className: "ef-donut__item",
+    onMouseEnter: () => setHov(s.i),
+    onMouseLeave: () => setHov(null),
+    style: {
+      opacity: hov == null || hov === s.i ? 1 : .45,
+      transition: 'opacity 120ms var(--ease-out)'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-donut__swatch",
+    style: {
+      background: s.color
+    }
+  }), s.label, /*#__PURE__*/React.createElement("span", {
+    className: "ef-donut__val"
+  }, Math.round(s.value / total * 100), "%")))));
+}

package/data/EmptyState.d.ts

@@ -0,0 +1,13 @@
+export interface EmptyStateProps {
+  /** Lucide icon name @default 'inbox' */
+  icon?: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Action slot, usually a primary Button */
+  action?: React.ReactNode;
+  /** Dashed hairline container */
+  bordered?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function EmptyState(props: EmptyStateProps): React.JSX.Element;

package/data/EmptyState.js

@@ -0,0 +1,39 @@
+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-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:4px}
+.ef-empty--bordered{border:1px dashed var(--sand-300);border-radius:var(--radius-md)}
+.ef-empty__icon{color:var(--sand-400);margin-bottom:10px}
+.ef-empty__title{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-empty__desc{font-size:var(--text-sm);color:var(--text-muted);max-width:340px;line-height:1.55}
+.ef-empty__action{margin-top:14px}
+`;
+export function EmptyState({
+  icon = 'inbox',
+  title,
+  description,
+  action,
+  bordered,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-empty', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-empty${bordered ? ' ef-empty--bordered' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-empty__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 28
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "ef-empty__title"
+  }, title), description ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-empty__desc"
+  }, description) : null, action ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-empty__action"
+  }, action) : null);
+}

package/data/KeyValueList.d.ts

@@ -0,0 +1,14 @@
+export interface KeyValueItem {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** Mono value (IPs, hashes, records) */
+  mono?: boolean;
+}
+export interface KeyValueListProps {
+  items: KeyValueItem[];
+  /** @default 160 */
+  labelWidth?: number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function KeyValueList(props: KeyValueListProps): React.JSX.Element;

package/data/KeyValueList.js

@@ -0,0 +1,34 @@
+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-kv{display:flex;flex-direction:column}
+.ef-kv__row{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--border-default)}
+.ef-kv__row:last-child{border-bottom:none}
+.ef-kv__label{width:160px;flex:none;font-size:var(--text-sm);color:var(--text-muted)}
+.ef-kv__value{flex:1;font-size:var(--text-sm);color:var(--text-primary);min-width:0;overflow-wrap:break-word}
+.ef-kv__value--mono{font-family:var(--font-mono);font-size:13px}
+`;
+export function KeyValueList({
+  items,
+  labelWidth = 160,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-kv', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-kv${className ? ' ' + className : ''}`,
+    style: style
+  }), items.map((it, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    className: "ef-kv__row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-kv__label",
+    style: {
+      width: labelWidth
+    }
+  }, it.label), /*#__PURE__*/React.createElement("span", {
+    className: `ef-kv__value${it.mono ? ' ef-kv__value--mono' : ''}`
+  }, it.value))));
+}

package/data/LineChart.d.ts

@@ -0,0 +1,15 @@
+export interface LinePoint { label?: string; value: number; }
+export interface LineChartProps {
+  data: LinePoint[];
+  /** Px @default 150 */
+  height?: number;
+  /** Soft fill under the line @default true */
+  showArea?: boolean;
+  /** Dot on every point @default false */
+  showDots?: boolean;
+  /** Tooltip value formatter */
+  format?: (value: number) => string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function LineChart(props: LineChartProps): React.JSX.Element;

package/data/LineChart.js

@@ -0,0 +1,85 @@
+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-linechart{position:relative}
+.ef-linechart__tip{position:absolute;transform:translate(-50%,-130%);background:var(--surface-inverse);color:var(--text-inverse);font-size:11px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5}
+`;
+export function LineChart({
+  data,
+  height = 150,
+  showArea = true,
+  showDots = false,
+  format,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-linechart', CSS);
+  const [hov, setHov] = React.useState(null);
+  const ref = React.useRef(null);
+  const W = 600,
+    H = height,
+    PAD = 6;
+  const vals = data.map(d => d.value);
+  const max = Math.max(...vals),
+    min = Math.min(...vals);
+  const span = max - min || 1;
+  const x = i => PAD + i / (data.length - 1) * (W - PAD * 2);
+  const y = v => H - PAD - (v - min) / span * (H - PAD * 2);
+  const path = data.map((d, i) => (i ? 'L' : 'M') + x(i).toFixed(1) + ',' + y(d.value).toFixed(1)).join(' ');
+  const area = path + ` L${x(data.length - 1).toFixed(1)},${H - PAD} L${x(0).toFixed(1)},${H - PAD} Z`;
+  const move = e => {
+    const r = ref.current.getBoundingClientRect();
+    const i = Math.round((e.clientX - r.left) / r.width * (data.length - 1));
+    setHov(Math.max(0, Math.min(data.length - 1, i)));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    ref: ref,
+    className: `ef-linechart${className ? ' ' + className : ''}`,
+    style: style,
+    onMouseMove: move,
+    onMouseLeave: () => setHov(null)
+  }), /*#__PURE__*/React.createElement("svg", {
+    viewBox: `0 0 ${W} ${H}`,
+    width: "100%",
+    height: H,
+    preserveAspectRatio: "none",
+    style: {
+      display: 'block'
+    }
+  }, showArea && /*#__PURE__*/React.createElement("path", {
+    d: area,
+    fill: "var(--accent)",
+    opacity: ".07"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: path,
+    fill: "none",
+    stroke: "var(--accent)",
+    strokeWidth: "1.5",
+    vectorEffect: "non-scaling-stroke"
+  }), (showDots ? data.map((_, i) => i) : hov != null ? [hov] : []).map(i => /*#__PURE__*/React.createElement("circle", {
+    key: i,
+    cx: x(i),
+    cy: y(data[i].value),
+    r: "3",
+    fill: "var(--surface-card)",
+    stroke: "var(--accent)",
+    strokeWidth: "1.5",
+    vectorEffect: "non-scaling-stroke"
+  })), hov != null && /*#__PURE__*/React.createElement("line", {
+    x1: x(hov),
+    x2: x(hov),
+    y1: PAD,
+    y2: H - PAD,
+    stroke: "var(--border-strong)",
+    strokeDasharray: "3 3",
+    vectorEffect: "non-scaling-stroke"
+  })), hov != null && /*#__PURE__*/React.createElement("div", {
+    className: "ef-linechart__tip",
+    style: {
+      left: x(hov) / W * 100 + '%',
+      top: y(data[hov].value) / H * 100 + '%'
+    }
+  }, data[hov].label, data[hov].label ? ' · ' : '', format ? format(data[hov].value) : data[hov].value.toLocaleString()));
+}

package/data/Skeleton.d.ts

@@ -0,0 +1,11 @@
+export interface SkeletonProps {
+  /** @default 'text' */
+  variant?: 'text' | 'rect' | 'circle';
+  width?: number | string;
+  height?: number | string;
+  /** Stacked text lines (last one 60% wide) @default 1 */
+  lines?: number;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Skeleton(props: SkeletonProps): React.JSX.Element;

package/data/Skeleton.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";
+const CSS = `
+@keyframes ef-skel{0%,100%{opacity:1}50%{opacity:.45}}
+.ef-skel{display:block;background:var(--border-default);border-radius:var(--radius-sm);animation:ef-skel 1.4s var(--ease-in-out) infinite}
+.ef-skel--circle{border-radius:var(--radius-full)}
+`;
+export function Skeleton({
+  variant = 'text',
+  width,
+  height,
+  lines = 1,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-skel', CSS);
+  const h = height != null ? height : variant === 'text' ? 12 : variant === 'circle' ? width || 32 : 64;
+  const w = width != null ? width : variant === 'circle' ? h : '100%';
+  if (variant === 'text' && lines > 1) {
+    return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+        ...style
+      },
+      className: className
+    }), Array.from({
+      length: lines
+    }, (_, i) => /*#__PURE__*/React.createElement("span", {
+      key: i,
+      className: "ef-skel",
+      style: {
+        width: i === lines - 1 ? '60%' : w,
+        height: h
+      }
+    })));
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: `ef-skel${variant === 'circle' ? ' ef-skel--circle' : ''}${className ? ' ' + className : ''}`,
+    style: {
+      width: w,
+      height: h,
+      ...style
+    }
+  });
+}