@efolusi/meridian 1.5.0

package/forms/Toggle.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 "./Button.js";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;min-width:32px;padding:0 10px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
+.ef-toggle:hover:not(:disabled):not(.ef-toggle--on){background:var(--surface-sunken);color:var(--text-primary)}
+.ef-toggle--on{background:var(--accent-subtle);color:var(--brand-700)}
+.ef-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-toggle:disabled{opacity:.45;cursor:not-allowed}
+.ef-toggle--sm{height:26px;min-width:26px;padding:0 7px;font-size:12.5px}
+.ef-toggle-group{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card)}
+`;
+const GroupCtx = /*#__PURE__*/React.createContext(null);
+export function Toggle({
+  pressed,
+  defaultPressed,
+  onPressedChange,
+  value,
+  icon,
+  size = 'md',
+  disabled,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-toggle', CSS);
+  const ctx = React.useContext(GroupCtx);
+  const [un, setUn] = React.useState(!!defaultPressed);
+  const isOn = ctx ? ctx.isOn(value) : pressed !== undefined ? pressed : un;
+  const press = () => {
+    if (ctx) {
+      ctx.toggle(value);
+      return;
+    }
+    if (pressed === undefined) setUn(!isOn);
+    if (onPressedChange) onPressedChange(!isOn);
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    "aria-pressed": isOn,
+    disabled: disabled,
+    onClick: press,
+    style: style,
+    className: `ef-toggle ef-toggle--${size}${isOn ? ' ef-toggle--on' : ''}${className ? ' ' + className : ''}`
+  }, rest), icon ? /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: size === 'sm' ? 14 : 16
+  }) : null, children);
+}
+export function ToggleGroup({
+  type = 'single',
+  value,
+  defaultValue,
+  onChange,
+  children,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-toggle', CSS);
+  const [un, setUn] = React.useState(defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : null);
+  const cur = value !== undefined ? value : un;
+  const isOn = v => type === 'multiple' ? (cur || []).includes(v) : cur === v;
+  const toggle = v => {
+    let next;
+    if (type === 'multiple') {
+      const c = cur || [];
+      next = c.includes(v) ? c.filter(x => x !== v) : [...c, v];
+    } else next = cur === v ? null : v;
+    if (value === undefined) setUn(next);
+    if (onChange) onChange(next);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "group",
+    className: `ef-toggle-group${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement(GroupCtx.Provider, {
+    value: {
+      isOn,
+      toggle
+    }
+  }, children));
+}

package/icons/Icon.d.ts

@@ -0,0 +1,13 @@
+export interface IconProps {
+  /** Lucide icon name matching a file in assets/icons/, e.g. "arrow-right" */
+  name: string;
+  /** Square size in px @default 16 */
+  size?: number;
+  /** Stroke width @default 1.5 */
+  strokeWidth?: number;
+  /** Accessible label; omit for decorative icons */
+  title?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+export declare function Icon(props: IconProps): React.JSX.Element;

package/icons/Icon.js

@@ -0,0 +1,54 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+const _cache = {};
+function base() {
+  if (window.__efBase !== undefined) return window.__efBase;
+  const s = [...document.querySelectorAll('script')].find(el => el.src && el.src.includes('_ds_bundle.js'));
+  window.__efBase = s ? s.src.slice(0, s.src.indexOf('_ds_bundle.js')) : '';
+  return window.__efBase;
+}
+export function Icon({
+  name,
+  size = 16,
+  strokeWidth = 1.5,
+  title,
+  className,
+  style,
+  ...rest
+}) {
+  const [svg, setSvg] = React.useState(_cache[name] || null);
+  React.useEffect(() => {
+    if (_cache[name]) {
+      setSvg(_cache[name]);
+      return;
+    }
+    let live = true;
+    fetch(base() + 'assets/icons/' + name + '.svg').then(r => r.ok ? r.text() : Promise.reject(new Error('icon ' + name))).then(t => {
+      _cache[name] = t;
+      if (live) setSvg(t);
+    }).catch(() => {
+      if (live) setSvg('');
+    });
+    return () => {
+      live = false;
+    };
+  }, [name]);
+  const html = svg ? svg.replace('width="24"', 'width="' + size + '"').replace('height="24"', 'height="' + size + '"').replace('stroke-width="2"', 'stroke-width="' + strokeWidth + '"') : '';
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    "aria-hidden": title ? undefined : true,
+    "aria-label": title,
+    role: title ? 'img' : undefined,
+    className: className,
+    style: {
+      display: 'inline-flex',
+      flex: 'none',
+      width: size,
+      height: size,
+      color: 'inherit',
+      ...style
+    },
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  }));
+}

package/index.d.ts

@@ -0,0 +1,106 @@
+export * from './ai/AgentRun.js';
+export * from './ai/ChatMessage.js';
+export * from './ai/Citation.js';
+export * from './ai/Confirmation.js';
+export * from './ai/Conversation.js';
+export * from './ai/DocumentCard.js';
+export * from './ai/FeedbackBar.js';
+export * from './ai/GeneratedImage.js';
+export * from './ai/ModelSelector.js';
+export * from './ai/Player.js';
+export * from './ai/PromptComposer.js';
+export * from './ai/PromptSteps.js';
+export * from './ai/Reasoning.js';
+export * from './ai/RichComposer.js';
+export * from './ai/Sandbox.js';
+export * from './ai/SelectionQuote.js';
+export * from './ai/SourceCard.js';
+export * from './ai/Suggestions.js';
+export * from './ai/Task.js';
+export * from './ai/Todo.js';
+export * from './ai/ToolCall.js';
+export * from './ai/Transcript.js';
+export * from './ai/UsageMeter.js';
+export * from './ai/WebPreview.js';
+export * from './code/CodeBlock.js';
+export * from './code/Console.js';
+export * from './code/CopyField.js';
+export * from './code/Diff.js';
+export * from './code/EnvList.js';
+export * from './code/Exception.js';
+export * from './code/Terminal.js';
+export * from './data/BarChart.js';
+export * from './data/DonutChart.js';
+export * from './data/EmptyState.js';
+export * from './data/KeyValueList.js';
+export * from './data/LineChart.js';
+export * from './data/Skeleton.js';
+export * from './data/Sparkline.js';
+export * from './data/Stat.js';
+export * from './data/StatusDot.js';
+export * from './data/Table.js';
+export * from './dates/Calendar.js';
+export * from './dates/DatePicker.js';
+export * from './display/Accordion.js';
+export * from './display/AspectRatio.js';
+export * from './display/Avatar.js';
+export * from './display/Badge.js';
+export * from './display/Card.js';
+export * from './display/Carousel.js';
+export * from './display/Collapsible.js';
+export * from './display/Divider.js';
+export * from './display/Kbd.js';
+export * from './display/Link.js';
+export * from './display/ListItem.js';
+export * from './display/Resizable.js';
+export * from './display/ScrollArea.js';
+export * from './display/Tag.js';
+export * from './display/Toolbar.js';
+export * from './display/TreeList.js';
+export * from './feedback/Alert.js';
+export * from './feedback/Banner.js';
+export * from './feedback/ConfirmDialog.js';
+export * from './feedback/Dialog.js';
+export * from './feedback/Loader.js';
+export * from './feedback/Progress.js';
+export * from './feedback/Spinner.js';
+export * from './feedback/Toast.js';
+export * from './feedback/Tooltip.js';
+export * from './files/FileDrop.js';
+export * from './files/FileTile.js';
+export * from './files/FileTypeIcon.js';
+export * from './finance/PaymentCard.js';
+export * from './forms/Button.js';
+export * from './forms/ButtonGroup.js';
+export * from './forms/ButtonTile.js';
+export * from './forms/Checkbox.js';
+export * from './forms/Combobox.js';
+export * from './forms/DigitEntry.js';
+export * from './forms/FormField.js';
+export * from './forms/IconButton.js';
+export * from './forms/Input.js';
+export * from './forms/InputGroup.js';
+export * from './forms/Label.js';
+export * from './forms/Radio.js';
+export * from './forms/Select.js';
+export * from './forms/Slider.js';
+export * from './forms/Switch.js';
+export * from './forms/Textarea.js';
+export * from './forms/Toggle.js';
+export * from './icons/Icon.js';
+export * from './navigation/Breadcrumbs.js';
+export * from './navigation/Menubar.js';
+export * from './navigation/PageControl.js';
+export * from './navigation/Pagination.js';
+export * from './navigation/SegmentedControl.js';
+export * from './navigation/SideNav.js';
+export * from './navigation/Steps.js';
+export * from './navigation/Tabs.js';
+export * from './navigation/TopNav.js';
+export * from './overlay/CommandPalette.js';
+export * from './overlay/ContextMenu.js';
+export * from './overlay/Drawer.js';
+export * from './overlay/HoverCard.js';
+export * from './overlay/Menu.js';
+export * from './overlay/Popover.js';
+export * from './overlay/Portal.js';

package/index.js

@@ -0,0 +1,106 @@
+export { AgentRun } from './ai/AgentRun.js';
+export { ChatMessage } from './ai/ChatMessage.js';
+export { Citation, SourceList } from './ai/Citation.js';
+export { Confirmation } from './ai/Confirmation.js';
+export { Conversation } from './ai/Conversation.js';
+export { DocumentCard } from './ai/DocumentCard.js';
+export { FeedbackBar } from './ai/FeedbackBar.js';
+export { GeneratedImage } from './ai/GeneratedImage.js';
+export { ModelSelector } from './ai/ModelSelector.js';
+export { Player } from './ai/Player.js';
+export { PromptComposer } from './ai/PromptComposer.js';
+export { PromptSteps } from './ai/PromptSteps.js';
+export { Reasoning } from './ai/Reasoning.js';
+export { RichComposer } from './ai/RichComposer.js';
+export { Sandbox } from './ai/Sandbox.js';
+export { SelectionQuote } from './ai/SelectionQuote.js';
+export { SourceCard } from './ai/SourceCard.js';
+export { Suggestions } from './ai/Suggestions.js';
+export { Task } from './ai/Task.js';
+export { Todo } from './ai/Todo.js';
+export { ToolCall } from './ai/ToolCall.js';
+export { Transcript } from './ai/Transcript.js';
+export { UsageMeter } from './ai/UsageMeter.js';
+export { WebPreview } from './ai/WebPreview.js';
+export { CodeBlock } from './code/CodeBlock.js';
+export { Console } from './code/Console.js';
+export { CopyField } from './code/CopyField.js';
+export { Diff } from './code/Diff.js';
+export { EnvList } from './code/EnvList.js';
+export { Exception } from './code/Exception.js';
+export { Terminal } from './code/Terminal.js';
+export { BarChart } from './data/BarChart.js';
+export { DonutChart } from './data/DonutChart.js';
+export { EmptyState } from './data/EmptyState.js';
+export { KeyValueList } from './data/KeyValueList.js';
+export { LineChart } from './data/LineChart.js';
+export { Skeleton } from './data/Skeleton.js';
+export { Sparkline } from './data/Sparkline.js';
+export { Stat } from './data/Stat.js';
+export { StatusDot } from './data/StatusDot.js';
+export { Table } from './data/Table.js';
+export { Calendar } from './dates/Calendar.js';
+export { DatePicker } from './dates/DatePicker.js';
+export { Accordion } from './display/Accordion.js';
+export { AspectRatio } from './display/AspectRatio.js';
+export { Avatar, AvatarGroup } from './display/Avatar.js';
+export { Badge } from './display/Badge.js';
+export { Card } from './display/Card.js';
+export { Carousel } from './display/Carousel.js';
+export { Collapsible } from './display/Collapsible.js';
+export { Divider } from './display/Divider.js';
+export { Kbd } from './display/Kbd.js';
+export { Link } from './display/Link.js';
+export { ListItem } from './display/ListItem.js';
+export { Resizable } from './display/Resizable.js';
+export { ScrollArea } from './display/ScrollArea.js';
+export { Tag } from './display/Tag.js';
+export { Toolbar } from './display/Toolbar.js';
+export { TreeList } from './display/TreeList.js';
+export { Alert } from './feedback/Alert.js';
+export { Banner } from './feedback/Banner.js';
+export { ConfirmDialog } from './feedback/ConfirmDialog.js';
+export { Dialog } from './feedback/Dialog.js';
+export { Loader } from './feedback/Loader.js';
+export { Progress } from './feedback/Progress.js';
+export { Spinner } from './feedback/Spinner.js';
+export { Toast, ToastStack, Toaster } from './feedback/Toast.js';
+export { Tooltip } from './feedback/Tooltip.js';
+export { FileDrop } from './files/FileDrop.js';
+export { FileTile } from './files/FileTile.js';
+export { FileTypeIcon } from './files/FileTypeIcon.js';
+export { PaymentCard } from './finance/PaymentCard.js';
+export { Button } from './forms/Button.js';
+export { ButtonGroup } from './forms/ButtonGroup.js';
+export { ButtonTile, ButtonTileGroup } from './forms/ButtonTile.js';
+export { Checkbox } from './forms/Checkbox.js';
+export { Combobox } from './forms/Combobox.js';
+export { DigitEntry } from './forms/DigitEntry.js';
+export { FormField } from './forms/FormField.js';
+export { IconButton } from './forms/IconButton.js';
+export { Input } from './forms/Input.js';
+export { InputGroup } from './forms/InputGroup.js';
+export { Label } from './forms/Label.js';
+export { Radio } from './forms/Radio.js';
+export { Select } from './forms/Select.js';
+export { Slider } from './forms/Slider.js';
+export { Switch } from './forms/Switch.js';
+export { Textarea } from './forms/Textarea.js';
+export { Toggle, ToggleGroup } from './forms/Toggle.js';
+export { Icon } from './icons/Icon.js';
+export { Breadcrumbs } from './navigation/Breadcrumbs.js';
+export { Menubar } from './navigation/Menubar.js';
+export { PageControl } from './navigation/PageControl.js';
+export { Pagination } from './navigation/Pagination.js';
+export { SegmentedControl } from './navigation/SegmentedControl.js';
+export { SideNav } from './navigation/SideNav.js';
+export { Steps } from './navigation/Steps.js';
+export { Tabs } from './navigation/Tabs.js';
+export { TopNav } from './navigation/TopNav.js';
+export { CommandPalette } from './overlay/CommandPalette.js';
+export { ContextMenu } from './overlay/ContextMenu.js';
+export { Drawer } from './overlay/Drawer.js';
+export { HoverCard } from './overlay/HoverCard.js';
+export { Menu } from './overlay/Menu.js';
+export { Popover } from './overlay/Popover.js';
+export { Portal } from './overlay/Portal.js';

package/navigation/Breadcrumbs.d.ts

@@ -0,0 +1,12 @@
+export interface BreadcrumbItem {
+  label: React.ReactNode;
+  href?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}
+export interface BreadcrumbsProps {
+  /** Last item renders as the current page */
+  items: BreadcrumbItem[];
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Breadcrumbs(props: BreadcrumbsProps): React.JSX.Element;

package/navigation/Breadcrumbs.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-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.ef-crumbs__link{font-size:var(--text-sm);color:var(--text-muted);text-decoration:none;padding:2px 4px;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out)}
+a.ef-crumbs__link:hover{color:var(--text-primary);text-decoration:none}
+.ef-crumbs__link--current{color:var(--text-primary);font-weight:var(--weight-medium)}
+.ef-crumbs__sep{color:var(--sand-400);display:inline-flex}
+`;
+export function Breadcrumbs({
+  items,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-crumbs', CSS);
+  return /*#__PURE__*/React.createElement("nav", _extends({}, rest, {
+    "aria-label": "Breadcrumb",
+    className: `ef-crumbs${className ? ' ' + className : ''}`,
+    style: style
+  }), items.map((it, i) => {
+    const last = i === items.length - 1;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: i
+    }, last ? /*#__PURE__*/React.createElement("span", {
+      className: "ef-crumbs__link ef-crumbs__link--current",
+      "aria-current": "page"
+    }, it.label) : /*#__PURE__*/React.createElement("a", {
+      className: "ef-crumbs__link",
+      href: it.href || '#',
+      onClick: it.onClick
+    }, it.label), !last && /*#__PURE__*/React.createElement("span", {
+      className: "ef-crumbs__sep"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "chevron-right",
+      size: 13
+    })));
+  }));
+}

package/navigation/Menubar.d.ts

@@ -0,0 +1,10 @@
+export interface MenubarItem { id: string; label: React.ReactNode; /** Lucide icon name */ icon?: string; kbd?: string; danger?: boolean; disabled?: boolean; onClick?: () => void; }
+export interface MenubarMenu { label: string; items: Array<MenubarItem | 'separator'>; }
+export interface MenubarProps {
+  menus: MenubarMenu[];
+  /** Fires with the picked item id */
+  onSelect?: (id: string) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Menubar(props: MenubarProps): React.JSX.Element;

package/navigation/Menubar.js

@@ -0,0 +1,173 @@
+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-menubar{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card)}
+.ef-menubar__wrap{position:relative}
+.ef-menubar__btn{height:28px;padding:0 10px;border:none;border-radius:calc(var(--radius-sm) - 1px);background:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;color:var(--text-primary);transition:background var(--dur-fast) var(--ease-out)}
+.ef-menubar__btn:hover,.ef-menubar__btn--on{background:var(--surface-sunken)}
+.ef-menubar__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-menubar__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:4px;z-index:var(--z-dropdown);animation:ef-menubar-in var(--dur-fast) var(--ease-out)}
+@keyframes ef-menubar-in{from{opacity:0;transform:translateY(-3px)}}
+.ef-menubar__item{display:flex;align-items:center;gap:9px;width:100%;height:32px;padding:0 10px;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-primary);transition:background var(--dur-fast) var(--ease-out)}
+.ef-menubar__item:hover:not(:disabled){background:var(--surface-sunken)}
+.ef-menubar__item:disabled{opacity:.4;cursor:not-allowed}
+.ef-menubar__item--danger{color:var(--danger-600)}
+.ef-menubar__item__icon{color:var(--text-muted);display:inline-flex}
+.ef-menubar__item--danger .ef-menubar__item__icon{color:var(--danger-600)}
+.ef-menubar__sep{height:1px;background:var(--border-default);margin:4px 6px}
+.ef-menubar__kbd{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
+`;
+export function Menubar({
+  menus,
+  onSelect,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-menubar', CSS);
+  const [open, setOpen] = React.useState(null);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (open === null) return;
+    const away = e => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(null);
+    };
+    const key = e => {
+      if (e.key === 'Escape') setOpen(null);
+    };
+    document.addEventListener('mousedown', away);
+    document.addEventListener('keydown', key);
+    return () => {
+      document.removeEventListener('mousedown', away);
+      document.removeEventListener('keydown', key);
+    };
+  }, [open]);
+  const kbdOpen = React.useRef(false);
+  React.useEffect(() => {
+    if (open === null || !kbdOpen.current) return;
+    const panel = ref.current && ref.current.querySelector('.ef-menubar__panel');
+    const first = panel && panel.querySelector('[role="menuitem"]:not(:disabled)');
+    if (first) first.focus();
+    kbdOpen.current = false;
+  }, [open]);
+  const btns = () => ref.current ? Array.from(ref.current.querySelectorAll('.ef-menubar__btn')) : [];
+  const focusBtn = i => {
+    const b = btns();
+    const t = b[(i + b.length) % b.length];
+    if (t) t.focus();
+  };
+  const panelItems = () => {
+    const p = ref.current && ref.current.querySelector('.ef-menubar__panel');
+    return p ? Array.from(p.querySelectorAll('[role="menuitem"]:not(:disabled)')) : [];
+  };
+  const focusItem = which => {
+    const nodes = panelItems();
+    if (!nodes.length) return;
+    const i = nodes.indexOf(document.activeElement);
+    const n = which === 'first' ? 0 : which === 'last' ? nodes.length - 1 : (i + which + nodes.length) % nodes.length;
+    nodes[n].focus();
+  };
+  const typeahead = e => {
+    const nodes = panelItems(),
+      cur = nodes.indexOf(document.activeElement),
+      ch = e.key.toLowerCase();
+    for (let k = 1; k <= nodes.length; k++) {
+      const n = nodes[(cur + k) % nodes.length];
+      if ((n.textContent || '').trim().toLowerCase().startsWith(ch)) {
+        e.preventDefault();
+        n.focus();
+        break;
+      }
+    }
+  };
+  const onBtnKey = (e, i) => {
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      if (open !== null) {
+        kbdOpen.current = true;
+        setOpen((i + 1) % menus.length);
+      }
+      focusBtn(i + 1);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      if (open !== null) {
+        kbdOpen.current = true;
+        setOpen((i - 1 + menus.length) % menus.length);
+      }
+      focusBtn(i - 1);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      kbdOpen.current = true;
+      setOpen(i);
+    }
+  };
+  const onPanelKey = (e, i) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      focusItem(1);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      focusItem(-1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      focusItem('first');
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      focusItem('last');
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      kbdOpen.current = true;
+      setOpen((i + 1) % menus.length);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      kbdOpen.current = true;
+      setOpen((i - 1 + menus.length) % menus.length);
+    } else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) typeahead(e);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    ref: ref,
+    role: "menubar",
+    className: `ef-menubar${className ? ' ' + className : ''}`,
+    style: style
+  }), menus.map((m, i) => /*#__PURE__*/React.createElement("span", {
+    key: m.label,
+    className: "ef-menubar__wrap"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "aria-haspopup": "menu",
+    "aria-expanded": open === i,
+    className: `ef-menubar__btn${open === i ? ' ef-menubar__btn--on' : ''}`,
+    onKeyDown: e => onBtnKey(e, i),
+    onClick: () => setOpen(open === i ? null : i),
+    onMouseEnter: () => {
+      if (open !== null) setOpen(i);
+    }
+  }, m.label), open === i ? /*#__PURE__*/React.createElement("div", {
+    role: "menu",
+    className: "ef-menubar__panel",
+    onKeyDown: e => onPanelKey(e, i)
+  }, m.items.map((it, j) => it === 'separator' ? /*#__PURE__*/React.createElement("div", {
+    key: 's' + j,
+    className: "ef-menubar__sep"
+  }) : /*#__PURE__*/React.createElement("button", {
+    key: it.id,
+    type: "button",
+    role: "menuitem",
+    disabled: it.disabled,
+    className: `ef-menubar__item${it.danger ? ' ef-menubar__item--danger' : ''}`,
+    onClick: () => {
+      setOpen(null);
+      if (onSelect) onSelect(it.id);
+      if (it.onClick) it.onClick();
+    }
+  }, it.icon ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-menubar__item__icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: it.icon,
+    size: 15
+  })) : null, it.label, it.kbd ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-menubar__kbd"
+  }, it.kbd) : null))) : null)));
+}

package/navigation/PageControl.d.ts

@@ -0,0 +1,11 @@
+export interface PageControlProps {
+  count: number;
+  /** Active index, 0-based @default 0 */
+  index?: number;
+  onChange?: (index: number) => void;
+  /** aria-label prefix @default 'Page' */
+  label?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function PageControl(props: PageControlProps): React.JSX.Element;

package/navigation/PageControl.js

@@ -0,0 +1,36 @@
+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-dots{display:inline-flex;align-items:center;gap:6px}
+.ef-dots__dot{width:7px;height:7px;padding:0;border:none;border-radius:var(--radius-full);background:var(--border-strong);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),width var(--dur-med) var(--ease-out)}
+.ef-dots__dot:hover{background:var(--sand-400)}
+.ef-dots__dot--on{width:20px;background:var(--accent)}
+.ef-dots__dot:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+`;
+export function PageControl({
+  count,
+  index = 0,
+  onChange,
+  label = 'Page',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-dots', CSS);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    role: "tablist",
+    "aria-label": label,
+    className: `ef-dots${className ? ' ' + className : ''}`,
+    style: style
+  }), Array.from({
+    length: count
+  }, (_, i) => /*#__PURE__*/React.createElement("button", {
+    key: i,
+    role: "tab",
+    "aria-selected": i === index,
+    "aria-label": `${label} ${i + 1} of ${count}`,
+    className: `ef-dots__dot${i === index ? ' ef-dots__dot--on' : ''}`,
+    onClick: () => onChange && onChange(i)
+  })));
+}

package/navigation/Pagination.d.ts

@@ -0,0 +1,9 @@
+export interface PaginationProps {
+  /** Current page, 1-based */
+  page: number;
+  pageCount: number;
+  onChange?: (page: number) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Pagination(props: PaginationProps): React.JSX.Element;