@efolusi/meridian 1.5.0

package/display/Accordion.d.ts

@@ -0,0 +1,15 @@
+export interface AccordionItem {
+  id: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+}
+export interface AccordionProps {
+  items: AccordionItem[];
+  /** Allow several items open at once @default false */
+  multiple?: boolean;
+  /** Ids open initially */
+  defaultOpen?: string[];
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Accordion(props: AccordionProps): React.JSX.Element;

package/display/Accordion.js

@@ -0,0 +1,52 @@
+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-acc{display:flex;flex-direction:column}
+.ef-acc__item{border-bottom:1px solid var(--border-default)}
+.ef-acc__item:first-child{border-top:1px solid var(--border-default)}
+.ef-acc__head{display:flex;align-items:center;gap:10px;width:100%;padding:14px 2px;border:none;background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-acc__head:hover{color:var(--brand-700)}
+.ef-acc__head:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
+.ef-acc__chev{margin-left:auto;color:var(--text-muted);display:inline-flex;transition:transform var(--dur-med) var(--ease-out)}
+.ef-acc__item--open .ef-acc__chev{transform:rotate(180deg)}
+.ef-acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
+.ef-acc__item--open .ef-acc__body{grid-template-rows:1fr}
+.ef-acc__inner{overflow:hidden}
+.ef-acc__content{padding:0 2px 16px;font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:640px}
+`;
+export function Accordion({
+  items,
+  multiple,
+  defaultOpen,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-acc', CSS);
+  const [open, setOpen] = React.useState(defaultOpen || []);
+  const toggle = id => setOpen(o => o.includes(id) ? o.filter(x => x !== id) : multiple ? [...o, id] : [id]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-acc${className ? ' ' + className : ''}`,
+    style: style
+  }), items.map(it => /*#__PURE__*/React.createElement("div", {
+    key: it.id,
+    className: `ef-acc__item${open.includes(it.id) ? ' ef-acc__item--open' : ''}`
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "ef-acc__head",
+    "aria-expanded": open.includes(it.id),
+    onClick: () => toggle(it.id)
+  }, it.title, /*#__PURE__*/React.createElement("span", {
+    className: "ef-acc__chev"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 16
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "ef-acc__body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-acc__inner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-acc__content"
+  }, it.content))))));
+}

package/display/AspectRatio.d.ts

@@ -0,0 +1,8 @@
+export interface AspectRatioProps {
+  /** width / height @default 16/9 */
+  ratio?: number;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function AspectRatio(props: AspectRatioProps): React.JSX.Element;

package/display/AspectRatio.js

@@ -0,0 +1,24 @@
+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';
+export function AspectRatio({
+  ratio = 16 / 9,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: className,
+    style: {
+      position: 'relative',
+      width: '100%',
+      aspectRatio: String(ratio),
+      ...style
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      inset: 0
+    }
+  }, children));
+}

package/display/Avatar.d.ts

@@ -0,0 +1,17 @@
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Full name — initials + deterministic tone derive from it */
+  name?: string;
+  /** Image URL; falls back to initials */
+  src?: string;
+  /** Px @default 32 */
+  size?: number;
+}
+export declare function Avatar(props: AvatarProps): React.JSX.Element;
+
+export interface AvatarGroupProps {
+  /** Avatar elements; overlap with white keylines */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function AvatarGroup(props: AvatarGroupProps): React.JSX.Element;

package/display/Avatar.js

@@ -0,0 +1,52 @@
+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-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--radius-full);background:var(--peach-200);color:var(--cocoa-700);font-weight:var(--weight-semibold);overflow:hidden;user-select:none}
+.ef-avatar img{width:100%;height:100%;object-fit:cover}
+.ef-avatar-group{display:inline-flex}
+.ef-avatar-group .ef-avatar{border:2px solid var(--surface-card)}
+.ef-avatar-group .ef-avatar+.ef-avatar{margin-left:-8px}
+`;
+const TONES = [['var(--peach-200)', 'var(--cocoa-700)'], ['var(--brand-100)', 'var(--brand-800)'], ['var(--sand-200)', 'var(--sand-800)'], ['var(--cream-50)', 'var(--caramel-500)'], ['var(--success-100)', 'var(--success-600)']];
+export function Avatar({
+  name = '',
+  src,
+  size = 32,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-avatar', CSS);
+  const initials = name.trim().split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase();
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = h * 31 + name.charCodeAt(i) >>> 0;
+  const [bg, fg] = TONES[h % TONES.length];
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: `ef-avatar${className ? ' ' + className : ''}`,
+    title: name || undefined,
+    style: {
+      width: size,
+      height: size,
+      fontSize: Math.round(size * 0.38),
+      background: src ? 'var(--sand-100)' : bg,
+      color: fg,
+      ...style
+    }
+  }, rest), src ? /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: name
+  }) : initials || '•');
+}
+export function AvatarGroup({
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-avatar', CSS);
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: `ef-avatar-group${className ? ' ' + className : ''}`,
+    style: style
+  }), children);
+}

package/display/Badge.d.ts

@@ -0,0 +1,10 @@
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** @default 'neutral' */
+  tone?: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'brand';
+  /** @default 'sm' */
+  size?: 'sm' | 'md';
+  /** Leading status dot */
+  dot?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Badge(props: BadgeProps): React.JSX.Element;

package/display/Badge.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-badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1;white-space:nowrap}
+.ef-badge--md{height:24px;padding:0 10px;font-size:var(--text-sm)}
+.ef-badge__dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor}
+.ef-badge--neutral{background:var(--surface-sunken);color:var(--sand-700)}
+.ef-badge--accent{background:var(--accent-subtle);color:var(--brand-700)}
+.ef-badge--success{background:var(--success-100);color:var(--success-600)}
+.ef-badge--warning{background:var(--warning-100);color:var(--warning-600)}
+.ef-badge--danger{background:var(--danger-100);color:var(--danger-600)}
+.ef-badge--brand{background:var(--cream-50);color:var(--cocoa-700)}
+[data-theme="dark"] .ef-badge--neutral{background:var(--surface-sunken);color:var(--text-secondary)}
+[data-theme="dark"] .ef-badge--accent{color:var(--brand-300)}
+[data-theme="dark"] .ef-badge--brand{background:#2A2119;color:var(--brand-300)}
+`;
+export function Badge({
+  tone = 'neutral',
+  size = 'sm',
+  dot,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-badge', CSS);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: `ef-badge ef-badge--${tone}${size === 'md' ? ' ef-badge--md' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }, rest), dot ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-badge__dot"
+  }) : null, children);
+}

package/display/Card.d.ts

@@ -0,0 +1,17 @@
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Header title (header renders only if title or actions set) */
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  /** Right-aligned header slot (buttons etc.) */
+  actions?: React.ReactNode;
+  /** Footer slot on a sunken strip */
+  footer?: React.ReactNode;
+  /** Body padding in px @default 20 */
+  padding?: number;
+  /** Slightly stronger shadow */
+  elevated?: boolean;
+  /** Hover lift + pointer */
+  interactive?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Card(props: CardProps): React.JSX.Element;

package/display/Card.js

@@ -0,0 +1,51 @@
+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-card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md)}
+.ef-card--elevated{box-shadow:var(--shadow-sm)}
+.ef-card--interactive{cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
+.ef-card--interactive:hover{border-color:var(--sand-400)}
+.ef-card--interactive:active{background:var(--surface-subtle)}
+.ef-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border-default)}
+.ef-card__title{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:0;color:var(--text-primary)}
+.ef-card__subtitle{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}
+.ef-card__footer{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--border-default);background:var(--surface-subtle);border-radius:0 0 var(--radius-md) var(--radius-md)}
+`;
+export function Card({
+  title,
+  subtitle,
+  actions,
+  footer,
+  padding = 20,
+  elevated,
+  interactive,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-card', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: `ef-card${elevated ? ' ef-card--elevated' : ''}${interactive ? ' ef-card--interactive' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }, rest), title || actions ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-card__header"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ef-card__title"
+  }, title), subtitle ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-card__subtitle"
+  }, subtitle) : null), actions ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      flex: 'none'
+    }
+  }, actions) : null) : null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding
+    }
+  }, children), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-card__footer"
+  }, footer) : null);
+}

package/display/Carousel.d.ts

@@ -0,0 +1,16 @@
+export interface CarouselProps {
+  /** One slide per child */
+  children: React.ReactNode;
+  /** CSS width of each item @default '280px' */
+  itemWidth?: string;
+  /** Px between items @default 14 */
+  gap?: number;
+  /** Prev / next arrows @default true */
+  showControls?: boolean;
+  /** Position dots below @default true */
+  showDots?: boolean;
+  ariaLabel?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Carousel(props: CarouselProps): React.JSX.Element;

package/display/Carousel.js

@@ -0,0 +1,97 @@
+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-carousel{position:relative}
+.ef-carousel__track{display:grid;grid-auto-flow:column;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
+.ef-carousel__track::-webkit-scrollbar{display:none}
+.ef-carousel__item{scroll-snap-align:start;min-width:0}
+.ef-carousel__nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border-strong);border-radius:var(--radius-full);background:var(--surface-card);color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-sm);transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);z-index:1}
+.ef-carousel__nav:hover:not(:disabled){color:var(--text-primary)}
+.ef-carousel__nav:active:not(:disabled){transform:translateY(-50%) scale(.96)}
+.ef-carousel__nav:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-carousel__nav:disabled{opacity:.35;cursor:default}
+.ef-carousel__nav--prev{left:-14px}
+.ef-carousel__nav--next{right:-14px}
+.ef-carousel__dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
+.ef-carousel__dot{width:7px;height:7px;border-radius:var(--radius-full);border:none;padding:0;background:var(--border-strong);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
+.ef-carousel__dot--on{background:var(--accent)}
+.ef-carousel__dot:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+`;
+export function Carousel({
+  children,
+  itemWidth = '280px',
+  gap = 14,
+  showControls = true,
+  showDots = true,
+  ariaLabel = 'Carousel',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-carousel', CSS);
+  const track = React.useRef(null);
+  const [index, setIndex] = React.useState(0);
+  const count = React.Children.count(children);
+  const step = () => {
+    const el = track.current;
+    if (!el || !el.firstChild) return el ? el.clientWidth : 0;
+    return el.firstChild.getBoundingClientRect().width + gap;
+  };
+  const goTo = i => {
+    const el = track.current;
+    if (el) el.scrollTo({
+      left: i * step(),
+      behavior: 'smooth'
+    });
+  };
+  const onScroll = () => {
+    const el = track.current;
+    if (el) setIndex(Math.min(count - 1, Math.max(0, Math.round(el.scrollLeft / step()))));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "region",
+    "aria-label": ariaLabel,
+    className: `ef-carousel${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: track,
+    className: "ef-carousel__track",
+    style: {
+      gridAutoColumns: itemWidth,
+      gap
+    },
+    onScroll: onScroll
+  }, React.Children.map(children, c => /*#__PURE__*/React.createElement("div", {
+    className: "ef-carousel__item"
+  }, c))), showControls ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": "Previous",
+    disabled: index <= 0,
+    className: "ef-carousel__nav ef-carousel__nav--prev",
+    onClick: () => goTo(index - 1)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-left",
+    size: 16
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-label": "Next",
+    disabled: index >= count - 1,
+    className: "ef-carousel__nav ef-carousel__nav--next",
+    onClick: () => goTo(index + 1)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 16
+  }))) : null, showDots ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-carousel__dots"
+  }, Array.from({
+    length: count
+  }, (_, i) => /*#__PURE__*/React.createElement("button", {
+    key: i,
+    type: "button",
+    "aria-label": `Go to item ${i + 1}`,
+    className: `ef-carousel__dot${i === index ? ' ef-carousel__dot--on' : ''}`,
+    onClick: () => goTo(i)
+  }))) : null);
+}

package/display/Collapsible.d.ts

@@ -0,0 +1,12 @@
+export interface CollapsibleProps {
+  /** Trigger row content */
+  title: React.ReactNode;
+  defaultOpen?: boolean;
+  /** Controlled open state */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Collapsible(props: CollapsibleProps): React.JSX.Element;

package/display/Collapsible.js

@@ -0,0 +1,46 @@
+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-collapsible__trigger{display:flex;align-items:center;gap:8px;width:100%;padding:7px 0;border:none;background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-md);font-weight:600;color:var(--text-primary);border-radius:var(--radius-sm)}
+.ef-collapsible__trigger:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-collapsible__chev{display:inline-flex;color:var(--text-muted);transition:transform var(--dur-med) var(--ease-out)}
+.ef-collapsible--open .ef-collapsible__chev{transform:rotate(90deg)}
+.ef-collapsible__body{padding:2px 0 10px 24px;animation:ef-collapsible-in var(--dur-fast) var(--ease-out)}
+@keyframes ef-collapsible-in{from{opacity:0;transform:translateY(-2px)}}
+`;
+export function Collapsible({
+  title,
+  defaultOpen,
+  open,
+  onOpenChange,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-collapsible', CSS);
+  const [un, setUn] = React.useState(!!defaultOpen);
+  const isOpen = open !== undefined ? open : un;
+  const flip = () => {
+    if (open === undefined) setUn(!isOpen);
+    if (onOpenChange) onOpenChange(!isOpen);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-collapsible${isOpen ? ' ef-collapsible--open' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "ef-collapsible__trigger",
+    "aria-expanded": isOpen,
+    onClick: flip
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-collapsible__chev"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 16
+  })), title), isOpen ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-collapsible__body"
+  }, children) : null);
+}

package/display/Divider.d.ts

@@ -0,0 +1,9 @@
+export interface DividerProps {
+  /** Small uppercase label centered in the rule */
+  label?: string;
+  /** Vertical rule (stretches to container height) */
+  vertical?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Divider(props: DividerProps): React.JSX.Element;

package/display/Divider.js

@@ -0,0 +1,33 @@
+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-divider{display:flex;align-items:center;gap:12px;border:none;margin:0}
+.ef-divider__line{flex:1;height:1px;background:var(--border-default)}
+.ef-divider__label{font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
+.ef-divider--vertical{display:inline-flex;width:1px;align-self:stretch;background:var(--border-default)}
+`;
+export function Divider({
+  label,
+  vertical,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-divider', CSS);
+  if (vertical) return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: `ef-divider--vertical${className ? ' ' + className : ''}`,
+    style: style
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    role: "separator",
+    className: `ef-divider${className ? ' ' + className : ''}`,
+    style: style
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-divider__line"
+  }), label ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-divider__label"
+  }, label), /*#__PURE__*/React.createElement("span", {
+    className: "ef-divider__line"
+  })) : null);
+}

package/display/Kbd.d.ts

@@ -0,0 +1,7 @@
+export interface KbdProps {
+  /** Key label, e.g. "⌘", "K", "Esc" */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Kbd(props: KbdProps): React.JSX.Element;

package/display/Kbd.js

@@ -0,0 +1,18 @@
+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-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:19px;padding:0 5px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--surface-card);font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);line-height:1}
+`;
+export function Kbd({
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-kbd', CSS);
+  return /*#__PURE__*/React.createElement("kbd", _extends({}, rest, {
+    className: `ef-kbd${className ? ' ' + className : ''}`,
+    style: style
+  }), children);
+}

package/display/Link.d.ts

@@ -0,0 +1,12 @@
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Opens in new tab + trailing ↗ */
+  external?: boolean;
+  /** Leading Lucide icon */
+  icon?: string;
+  /** 'quiet' inherits secondary text color @default 'default' */
+  variant?: 'default' | 'quiet';
+  /** Semibold + trailing → for standalone CTAs */
+  standalone?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Link(props: LinkProps): React.JSX.Element;

package/display/Link.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-link{display:inline-flex;align-items:center;gap:4px;color:var(--text-link);text-decoration:none;font-weight:var(--weight-medium);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out)}
+.ef-link:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
+.ef-link:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-link--quiet{color:var(--text-secondary)}
+.ef-link--quiet:hover{color:var(--text-primary)}
+.ef-link--standalone{font-weight:var(--weight-semibold)}
+`;
+export function Link({
+  href = '#',
+  external,
+  icon,
+  variant = 'default',
+  standalone,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-link', CSS);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href,
+    target: external ? '_blank' : undefined,
+    rel: external ? 'noreferrer' : undefined,
+    className: `ef-link${variant === 'quiet' ? ' ef-link--quiet' : ''}${standalone ? ' ef-link--standalone' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }, rest), icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 14
+  }) : null, children, external ? /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow-up-right",
+    size: 13
+  }) : standalone ? /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow-right",
+    size: 14
+  }) : null);
+}

package/display/ListItem.d.ts

@@ -0,0 +1,19 @@
+export interface ListItemProps {
+  /** Lucide icon in a 32px sunken square */
+  icon?: string;
+  /** Custom leading node (Avatar, FileTypeIcon…) — overrides icon */
+  media?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Right-aligned slot (Badge, time, Switch…) */
+  trailing?: React.ReactNode;
+  /** Trailing chevron */
+  chevron?: boolean;
+  /** Renders as button */
+  onClick?: (e: React.MouseEvent) => void;
+  /** Renders as anchor */
+  href?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function ListItem(props: ListItemProps): React.JSX.Element;