@efolusi/meridian 1.5.0

package/navigation/Pagination.js

@@ -0,0 +1,68 @@
+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-pager{display:flex;align-items:center;gap:4px}
+.ef-pager__btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-secondary);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.ef-pager__btn:hover:not(:disabled):not(.ef-pager__btn--active){background:var(--surface-sunken);color:var(--text-primary)}
+.ef-pager__btn--active{background:var(--accent);color:var(--text-inverse);font-weight:var(--weight-semibold)}
+.ef-pager__btn:disabled{opacity:.4;cursor:not-allowed}
+.ef-pager__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-pager__gap{min-width:28px;text-align:center;color:var(--text-muted);font-size:var(--text-sm)}
+`;
+function range(page, count) {
+  if (count <= 7) return Array.from({
+    length: count
+  }, (_, i) => i + 1);
+  const set = new Set([1, count, page - 1, page, page + 1]);
+  const out = [];
+  for (let i = 1; i <= count; i++) {
+    if (set.has(i)) {
+      out.push(i);
+    } else if (out[out.length - 1] !== '…') out.push('…');
+  }
+  return out;
+}
+export function Pagination({
+  page,
+  pageCount,
+  onChange,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-pager', CSS);
+  const go = p => {
+    if (p >= 1 && p <= pageCount && onChange) onChange(p);
+  };
+  return /*#__PURE__*/React.createElement("nav", _extends({}, rest, {
+    "aria-label": "Pagination",
+    className: `ef-pager${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("button", {
+    className: "ef-pager__btn",
+    "aria-label": "Previous page",
+    disabled: page <= 1,
+    onClick: () => go(page - 1)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-left",
+    size: 15
+  })), range(page, pageCount).map((p, i) => p === '…' ? /*#__PURE__*/React.createElement("span", {
+    key: 'g' + i,
+    className: "ef-pager__gap"
+  }, "\u2026") : /*#__PURE__*/React.createElement("button", {
+    key: p,
+    className: `ef-pager__btn${p === page ? ' ef-pager__btn--active' : ''}`,
+    "aria-current": p === page ? 'page' : undefined,
+    onClick: () => go(p)
+  }, p)), /*#__PURE__*/React.createElement("button", {
+    className: "ef-pager__btn",
+    "aria-label": "Next page",
+    disabled: page >= pageCount,
+    onClick: () => go(page + 1)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-right",
+    size: 15
+  })));
+}

package/navigation/SegmentedControl.d.ts

@@ -0,0 +1,17 @@
+export interface SegmentOption {
+  id: string;
+  label: React.ReactNode;
+  /** Lucide icon name */
+  icon?: string;
+  disabled?: boolean;
+}
+export interface SegmentedControlProps {
+  /** Options as strings or objects */
+  options: Array<string | SegmentOption>;
+  /** Active option id (controlled) */
+  value: string;
+  onChange?: (id: string) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function SegmentedControl(props: SegmentedControlProps): React.JSX.Element;

package/navigation/SegmentedControl.js

@@ -0,0 +1,42 @@
+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-seg{display:inline-flex;gap:2px;padding:2px;background:var(--surface-sunken);border-radius:var(--radius-md)}
+.ef-seg__opt{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:1px solid transparent;border-radius:6px;background:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.ef-seg__opt:hover:not(.ef-seg__opt--active){color:var(--text-primary)}
+.ef-seg__opt--active{background:var(--surface-card);border-color:var(--border-strong);color:var(--text-primary);font-weight:var(--weight-semibold)}
+.ef-seg__opt:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-seg__opt:disabled{opacity:.4;cursor:not-allowed}
+`;
+export function SegmentedControl({
+  options,
+  value,
+  onChange,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-seg', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "group",
+    className: `ef-seg${className ? ' ' + className : ''}`,
+    style: style
+  }), options.map(o => {
+    const opt = typeof o === 'string' ? {
+      id: o,
+      label: o
+    } : o;
+    return /*#__PURE__*/React.createElement("button", {
+      key: opt.id,
+      className: `ef-seg__opt${value === opt.id ? ' ef-seg__opt--active' : ''}`,
+      "aria-pressed": value === opt.id,
+      disabled: opt.disabled,
+      onClick: () => onChange && onChange(opt.id)
+    }, opt.icon ? /*#__PURE__*/React.createElement(Icon, {
+      name: opt.icon,
+      size: 14
+    }) : null, opt.label);
+  }));
+}

package/navigation/SideNav.d.ts

@@ -0,0 +1,18 @@
+export interface SideNavItem { id: string; label: React.ReactNode; icon: string; badge?: React.ReactNode; }
+export interface SideNavGroup { /** Uppercase group heading (omit for main nav) */ label?: string; items: SideNavItem[]; }
+export interface SideNavProps {
+  /** @default 'Efolusi' */
+  brand?: string;
+  /** Badge next to brand (e.g. 'Console') */
+  brandBadge?: React.ReactNode;
+  logoSrc?: string;
+  groups: SideNavGroup[];
+  /** Active item id */
+  value: string;
+  onChange?: (id: string) => void;
+  /** Pinned bottom slot (account card…) */
+  footer?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function SideNav(props: SideNavProps): React.JSX.Element;

package/navigation/SideNav.js

@@ -0,0 +1,87 @@
+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 { Badge } from "../display/Badge.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-sidenav{display:flex;flex-direction:column;width:240px;flex:none;background:var(--surface-subtle);border-right:1px solid var(--border-default);min-height:100%}
+.ef-sidenav__brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px}
+.ef-sidenav__group{font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);padding:14px 22px 6px}
+.ef-sidenav__item{display:flex;align-items:center;gap:10px;width:calc(100% - 24px);margin:0 12px;height:34px;padding:0 10px;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-md);font-weight:500;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.ef-sidenav__item:hover{background:var(--surface-sunken);color:var(--text-primary)}
+.ef-sidenav__item--on{background:var(--border-default);color:var(--text-primary);font-weight:600}
+.ef-sidenav__item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-sidenav__foot{margin-top:auto;padding:12px}
+`;
+export function SideNav({
+  brand = 'Efolusi',
+  brandBadge,
+  logoSrc,
+  groups,
+  value,
+  onChange,
+  footer,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-sidenav', CSS);
+  return /*#__PURE__*/React.createElement("aside", _extends({}, rest, {
+    className: `ef-sidenav${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-sidenav__brand"
+  }, logoSrc ? /*#__PURE__*/React.createElement("img", {
+    src: logoSrc,
+    alt: "",
+    style: {
+      width: 30,
+      height: 30
+    }
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--font-display)',
+      fontWeight: 680,
+      letterSpacing: '-0.02em',
+      fontSize: 19
+    }
+  }, brand), brandBadge ? /*#__PURE__*/React.createElement(Badge, {
+    tone: "brand",
+    style: {
+      marginLeft: 'auto'
+    }
+  }, brandBadge) : null), groups.map((g, gi) => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: gi
+  }, g.label ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-sidenav__group"
+  }, g.label) : null, /*#__PURE__*/React.createElement("nav", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 2
+    }
+  }, g.items.map(it => /*#__PURE__*/React.createElement("button", {
+    key: it.id,
+    className: `ef-sidenav__item${value === it.id ? ' ef-sidenav__item--on' : ''}`,
+    onClick: () => onChange && onChange(it.id)
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      color: 'inherit'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: it.icon,
+    size: 17
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, it.label), it.badge != null ? /*#__PURE__*/React.createElement(Badge, {
+    tone: value === it.id ? 'accent' : 'neutral'
+  }, it.badge) : null))))), footer ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-sidenav__foot"
+  }, footer) : null);
+}

package/navigation/Steps.d.ts

@@ -0,0 +1,15 @@
+export interface StepItem {
+  id?: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+}
+export interface StepsProps {
+  items: StepItem[];
+  /** Index of the active step; earlier = done @default 0 */
+  current?: number;
+  /** @default 'vertical' */
+  orientation?: 'vertical' | 'horizontal';
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Steps(props: StepsProps): React.JSX.Element;

package/navigation/Steps.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-steps{display:flex;flex-direction:column;gap:0}
+.ef-steps__item{display:flex;gap:12px}
+.ef-steps__rail{display:flex;flex-direction:column;align-items:center;flex:none}
+.ef-steps__marker{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);border:1.5px solid var(--sand-300);background:var(--surface-card);color:var(--text-muted);font-size:11px;font-weight:var(--weight-semibold);font-family:var(--font-mono);flex:none;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
+.ef-steps__item--done .ef-steps__marker{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
+.ef-steps__item--active .ef-steps__marker{border-color:var(--accent);color:var(--text-primary)}
+.ef-steps__line{width:1.5px;flex:1;min-height:16px;background:var(--sand-200);margin:3px 0}
+.ef-steps__item--done .ef-steps__line{background:var(--accent)}
+.ef-steps__content{padding-bottom:20px;min-width:0}
+.ef-steps__item:last-child .ef-steps__content{padding-bottom:0}
+.ef-steps__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-muted);line-height:24px}
+.ef-steps__item--active .ef-steps__title,.ef-steps__item--done .ef-steps__title{color:var(--text-primary)}
+.ef-steps__desc{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px;line-height:1.5}
+.ef-steps--h{flex-direction:row;gap:8px}
+.ef-steps--h .ef-steps__item{flex:1;flex-direction:column;gap:8px}
+.ef-steps--h .ef-steps__rail{flex-direction:row;width:100%}
+.ef-steps--h .ef-steps__line{width:auto;flex:1;height:1.5px;min-height:0;margin:0 6px;align-self:center}
+.ef-steps--h .ef-steps__item:last-child .ef-steps__line{display:none}
+.ef-steps--h .ef-steps__content{padding-bottom:0}
+`;
+export function Steps({
+  items,
+  current = 0,
+  orientation = 'vertical',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-steps', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-steps${orientation === 'horizontal' ? ' ef-steps--h' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), items.map((it, i) => {
+    const state = i < current ? 'done' : i === current ? 'active' : 'todo';
+    return /*#__PURE__*/React.createElement("div", {
+      key: it.id || i,
+      className: `ef-steps__item ef-steps__item--${state}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ef-steps__rail"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ef-steps__marker"
+    }, state === 'done' ? /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      size: 13,
+      strokeWidth: 2.5
+    }) : i + 1), (orientation === 'horizontal' || i < items.length - 1) && /*#__PURE__*/React.createElement("span", {
+      className: "ef-steps__line"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "ef-steps__content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ef-steps__title"
+    }, it.title), it.description ? /*#__PURE__*/React.createElement("div", {
+      className: "ef-steps__desc"
+    }, it.description) : null));
+  }));
+}

package/navigation/Tabs.d.ts

@@ -0,0 +1,17 @@
+export interface TabItem {
+  id: string;
+  label: React.ReactNode;
+  /** Lucide icon name */
+  icon?: string;
+  /** Count pill */
+  count?: number;
+}
+export interface TabsProps {
+  items: TabItem[];
+  /** Active item id (controlled) */
+  value: string;
+  onChange?: (id: string) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

package/navigation/Tabs.js

@@ -0,0 +1,76 @@
+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, mergeRefs } from "../forms/Button.js";
+const CSS = `
+.ef-tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--border-default)}
+.ef-tabs__tab{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-medium);cursor:pointer;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
+.ef-tabs__tab:hover{color:var(--text-primary);background:var(--surface-sunken)}
+.ef-tabs__tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-tabs__tab--active{color:var(--text-primary);font-weight:var(--weight-semibold)}
+.ef-tabs__ink{position:absolute;bottom:-1px;height:2px;background:var(--accent);border-radius:2px;transition:left var(--dur-med) var(--ease-spring),width var(--dur-med) var(--ease-spring)}
+.ef-tabs__count{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-muted)}
+.ef-tabs__tab--active .ef-tabs__count{color:var(--text-primary)}
+`;
+export const Tabs = /*#__PURE__*/React.forwardRef(function Tabs({
+  items,
+  value,
+  onChange,
+  style,
+  className,
+  ...rest
+}, fRef) {
+  injectEfCss('ef-css-tabs', CSS);
+  const ref = React.useRef(null);
+  const [ink, setInk] = React.useState({
+    left: 0,
+    width: 0
+  });
+  React.useLayoutEffect(() => {
+    const el = ref.current && ref.current.querySelector('[data-active="true"]');
+    if (el) setInk({
+      left: el.offsetLeft,
+      width: el.offsetWidth
+    });
+  }, [value, items]);
+  const onKey = e => {
+    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;
+    e.preventDefault();
+    const ids = items.map(i => i.id);
+    const cur = ids.indexOf(value);
+    let next = cur;
+    if (e.key === 'ArrowLeft') next = (cur - 1 + ids.length) % ids.length;
+    if (e.key === 'ArrowRight') next = (cur + 1) % ids.length;
+    if (e.key === 'Home') next = 0;
+    if (e.key === 'End') next = ids.length - 1;
+    if (onChange) onChange(ids[next]);
+    const btns = ref.current ? ref.current.querySelectorAll('[role="tab"]') : [];
+    if (btns[next]) btns[next].focus();
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    ref: mergeRefs(fRef, ref),
+    role: "tablist",
+    onKeyDown: onKey,
+    className: `ef-tabs${className ? ' ' + className : ''}`,
+    style: style
+  }), items.map(it => /*#__PURE__*/React.createElement("button", {
+    key: it.id,
+    role: "tab",
+    "aria-selected": value === it.id,
+    tabIndex: value === it.id ? 0 : -1,
+    "data-active": value === it.id ? 'true' : 'false',
+    className: `ef-tabs__tab${value === it.id ? ' ef-tabs__tab--active' : ''}`,
+    onClick: () => onChange && onChange(it.id)
+  }, it.icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: it.icon,
+    size: 16
+  }) : null, it.label, it.count != null ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-tabs__count"
+  }, it.count) : null)), /*#__PURE__*/React.createElement("span", {
+    className: "ef-tabs__ink",
+    style: {
+      left: ink.left,
+      width: ink.width
+    }
+  }));
+});

package/navigation/TopNav.d.ts

@@ -0,0 +1,10 @@
+export interface TopNavProps {
+  title?: React.ReactNode;
+  /** Slot before the title (back button, breadcrumbs) */
+  leading?: React.ReactNode;
+  /** Right-aligned actions (search, bell, avatar) */
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function TopNav(props: TopNavProps): React.JSX.Element;

package/navigation/TopNav.js

@@ -0,0 +1,26 @@
+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-topnav{display:flex;align-items:center;gap:12px;height:60px;padding:0 24px;border-bottom:1px solid var(--border-default);background:color-mix(in srgb,var(--surface-page) 85%,transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
+.ef-topnav__title{font-size:18px;font-weight:700;font-family:var(--font-display);letter-spacing:-0.02em;color:var(--text-primary);margin:0}
+.ef-topnav__spacer{margin-left:auto}
+`;
+export function TopNav({
+  title,
+  leading,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-topnav', CSS);
+  return /*#__PURE__*/React.createElement("header", _extends({}, rest, {
+    className: `ef-topnav${className ? ' ' + className : ''}`,
+    style: style
+  }), leading, title ? /*#__PURE__*/React.createElement("h1", {
+    className: "ef-topnav__title"
+  }, title) : null, /*#__PURE__*/React.createElement("span", {
+    className: "ef-topnav__spacer"
+  }), children);
+}

package/overlay/CommandPalette.d.ts

@@ -0,0 +1,21 @@
+export interface CommandItem {
+  id: string;
+  label: string;
+  /** Lucide icon name */
+  icon?: string;
+  /** Right-aligned hint, e.g. a shortcut or product name */
+  hint?: string;
+}
+export interface CommandGroup {
+  group: string;
+  items: CommandItem[];
+}
+export interface CommandPaletteProps {
+  open: boolean;
+  onClose?: () => void;
+  groups: CommandGroup[];
+  onSelect?: (id: string) => void;
+  /** @default 'Type a command or search…' */
+  placeholder?: string;
+}
+export declare function CommandPalette(props: CommandPaletteProps): React.JSX.Element;

package/overlay/CommandPalette.js

@@ -0,0 +1,164 @@
+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 { Kbd } from "../display/Kbd.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-cmdk__overlay{position:fixed;inset:0;background:var(--overlay-scrim);display:flex;justify-content:center;align-items:flex-start;padding:100px 24px 24px;z-index:var(--z-modal);animation:ef-cmdk-fade var(--dur-fast) var(--ease-out)}
+@keyframes ef-cmdk-fade{from{opacity:0}}
+.ef-cmdk{width:100%;max-width:560px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);overflow:hidden;animation:ef-cmdk-in var(--dur-med) var(--ease-out)}
+@keyframes ef-cmdk-in{from{opacity:0;transform:translateY(-6px)}}
+.ef-cmdk__inputrow{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-default)}
+.ef-cmdk__input{flex:1;border:none;outline:none;background:none;font-family:var(--font-sans);font-size:var(--text-lg);color:var(--text-primary)}
+.ef-cmdk__input::placeholder{color:var(--text-muted)}
+.ef-cmdk__list{max-height:320px;overflow-y:auto;padding:6px}
+.ef-cmdk__group{font-size:10px;font-weight:var(--weight-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);padding:10px 10px 4px}
+.ef-cmdk__item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;border-radius:var(--radius-sm);background:none;cursor:pointer;text-align:left;font-family:var(--font-sans);font-size:var(--text-md);color:var(--text-primary)}
+.ef-cmdk__item--active{background:var(--surface-sunken)}
+.ef-cmdk__item__icon{color:var(--text-muted);display:inline-flex}
+.ef-cmdk__item__hint{margin-left:auto;font-size:var(--text-xs);color:var(--text-muted)}
+.ef-cmdk__empty{padding:32px;text-align:center;color:var(--text-muted);font-size:var(--text-sm)}
+.ef-cmdk__foot{display:flex;align-items:center;gap:14px;padding:9px 14px;border-top:1px solid var(--border-default);background:var(--surface-subtle);font-size:var(--text-xs);color:var(--text-muted)}
+.ef-cmdk__foot span{display:inline-flex;align-items:center;gap:5px}
+`;
+export function CommandPalette({
+  open,
+  onClose,
+  groups,
+  onSelect,
+  placeholder = 'Type a command or search…',
+  ...rest
+}) {
+  injectEfCss('ef-css-cmdk', CSS);
+  const [q, setQ] = React.useState('');
+  const [idx, setIdx] = React.useState(0);
+  const listId = React.useId();
+  const prevFocus = React.useRef(null);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    setQ('');
+    setIdx(0);
+    prevFocus.current = document.activeElement;
+    if (inputRef.current) inputRef.current.focus();
+    return () => {
+      if (prevFocus.current && prevFocus.current.focus) prevFocus.current.focus();
+    };
+  }, [open]);
+  const flat = [];
+  const shown = (groups || []).map(g => {
+    const items = g.items.filter(it => !q || (it.label + ' ' + (it.hint || '')).toLowerCase().includes(q.toLowerCase()));
+    items.forEach(it => flat.push(it));
+    return {
+      ...g,
+      items
+    };
+  }).filter(g => g.items.length);
+  React.useEffect(() => {
+    setIdx(0);
+  }, [q]);
+  const flatRef = React.useRef(flat);
+  flatRef.current = flat;
+  const idxRef = React.useRef(idx);
+  idxRef.current = idx;
+  React.useEffect(() => {
+    if (!open) return;
+    const key = e => {
+      if (e.key === 'Escape') onClose && onClose();
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setIdx(i => Math.min(i + 1, flatRef.current.length - 1));
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setIdx(i => Math.max(i - 1, 0));
+      }
+      if (e.key === 'Enter') {
+        const it = flatRef.current[idxRef.current];
+        if (it) {
+          onSelect && onSelect(it.id);
+          onClose && onClose();
+        }
+      }
+    };
+    document.addEventListener('keydown', key);
+    return () => document.removeEventListener('keydown', key);
+  }, [open, onClose, onSelect]);
+  React.useEffect(() => {
+    if (!open) return;
+    const el = document.getElementById(listId + '-opt-' + idx);
+    if (el && el.scrollIntoView) el.scrollIntoView({
+      block: 'nearest'
+    });
+  }, [open, idx, listId]);
+  if (!open) return null;
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: "ef-cmdk__overlay",
+    onMouseDown: e => {
+      if (e.target === e.currentTarget && onClose) onClose();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-cmdk",
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": "Command palette"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-cmdk__inputrow"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "search",
+    size: 17,
+    style: {
+      color: 'var(--text-muted)'
+    }
+  }), /*#__PURE__*/React.createElement("input", {
+    className: "ef-cmdk__input",
+    ref: inputRef,
+    placeholder: placeholder,
+    value: q,
+    onChange: e => setQ(e.target.value),
+    role: "combobox",
+    "aria-expanded": "true",
+    "aria-controls": listId,
+    "aria-autocomplete": "list",
+    "aria-label": placeholder,
+    "aria-activedescendant": flat.length ? `${listId}-opt-${idx}` : undefined
+  }), /*#__PURE__*/React.createElement(Kbd, null, "Esc")), /*#__PURE__*/React.createElement("div", {
+    className: "ef-cmdk__list",
+    role: "listbox",
+    id: listId
+  }, shown.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "ef-cmdk__empty"
+  }, "Nothing matches \"", q, "\" \u2014 try a product or action name."), shown.map(g => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: g.group
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-cmdk__group"
+  }, g.group), g.items.map(it => {
+    const fi = flat.indexOf(it);
+    const active = fi === idx;
+    return /*#__PURE__*/React.createElement("button", {
+      key: it.id,
+      role: "option",
+      id: `${listId}-opt-${fi}`,
+      "aria-selected": active,
+      className: `ef-cmdk__item${active ? ' ef-cmdk__item--active' : ''}`,
+      onMouseEnter: () => setIdx(fi),
+      onClick: () => {
+        onSelect && onSelect(it.id);
+        onClose && onClose();
+      }
+    }, it.icon ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-cmdk__item__icon"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: it.icon,
+      size: 16
+    })) : null, it.label, it.hint ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-cmdk__item__hint"
+    }, it.hint) : null);
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "ef-cmdk__foot"
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Kbd, null, "\u2191"), /*#__PURE__*/React.createElement(Kbd, null, "\u2193"), " navigate"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Kbd, null, "\u21B5"), " run"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: 'auto'
+    }
+  }, /*#__PURE__*/React.createElement(Kbd, null, "\u2318"), /*#__PURE__*/React.createElement(Kbd, null, "K"), " anywhere"))));
+}

package/overlay/ContextMenu.d.ts

@@ -0,0 +1,11 @@
+export interface ContextMenuItem { id: string; label: React.ReactNode; /** Lucide icon name */ icon?: string; kbd?: string; danger?: boolean; disabled?: boolean; onClick?: () => void; }
+export interface ContextMenuProps {
+  /** Right-click target */
+  children: React.ReactNode;
+  items: Array<ContextMenuItem | 'separator'>;
+  /** Fires with the picked item id */
+  onSelect?: (id: string) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function ContextMenu(props: ContextMenuProps): React.JSX.Element;