@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chrome.tsx

@@ -0,0 +1,264 @@
+"use client";
+/** Shared nav, footer, and module card. Brand + links are passed in so both
+ *  marketing apps reuse the same chrome. */
+import { useRef, type AnchorHTMLAttributes, type ReactNode } from "react";
+import { m, useScroll, useTransform } from "motion/react";
+import type { VariantProps } from "class-variance-authority";
+import { Emblem } from "./emblems";
+import { StackRow } from "./StackLogo";
+import { type ModuleNode } from "../data/modules";
+import { useMotionSafe } from "../motion/primitives";
+import { buttonVariants } from "../ui/button";
+import { cn } from "../lib/utils";
+
+export interface NavLink { label: string; href: string; external?: boolean; cta?: boolean; }
+
+/** A labelled set of destinations — a dropdown menu on <NavShell/>'s wide bar,
+ *  a labelled section of links in its narrow sheet. A group is a *sibling* type
+ *  rather than an optional `items?` on NavLink because a group trigger has no
+ *  destination of its own: making `href` optional to model that would widen it
+ *  to `string | undefined` for every existing consumer and reader (the
+ *  `key={l.href + l.label}` in this file included). A separate interface keeps
+ *  `href` required where it belongs and makes "link or group" a real
+ *  discriminated choice. */
+export interface NavGroup { label: string; items: NavLink[]; }
+
+/** One top-bar entry. `NavLink[]` stays assignable to `NavItem[]`, so every
+ *  consumer that passes a flat link array today keeps compiling untouched. */
+export type NavItem = NavLink | NavGroup;
+
+/** Discriminates the NavItem union on the one field only a group carries. */
+export function isNavGroup(item: NavItem): item is NavGroup {
+  return "items" in item;
+}
+
+/** The kit's vocabulary for a CTA's dress, taken straight from buttonVariants
+ *  so there is exactly one button treatment in the canon — a CTA link is the
+ *  same dress as the Button it pairs with, never a parallel class family. */
+type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
+
+/** Absolute or protocol-relative href — never a same-page route. */
+const isExternalHref = (href: string) => /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
+
+/** Whether `href` names the page the visitor is currently on. Owned here so
+ *  every site marks `aria-current` by the same rule: an exact pathname match
+ *  only — never an external link, and never a same-page anchor (`/#pipeline`,
+ *  `#section`) since several of those share one pathname and would all light
+ *  up. Trailing slashes are equivalent (`/docs` ≡ `/docs/`, the static-export
+ *  shape). */
+export function hrefIsCurrent(href: string, currentPath?: string): boolean {
+  if (!currentPath || isExternalHref(href) || href.includes("#")) return false;
+  const path = href.split("?")[0] ?? href;
+  const norm = (p: string): string => {
+    if (p.length <= 1) return p;
+    let end = p.length;
+    while (end > 0 && p.charCodeAt(end - 1) === 47) end -= 1;
+    return p.slice(0, end);
+  };
+  return norm(path) === norm(currentPath);
+}
+
+/** Skip-to-content — visually hidden until keyboard focus, then pinned to the
+ *  top-left. Token utilities (the pre-canon app copy is what this replaces);
+ *  the consumer owns the target's `id` and focusability. */
+export function SkipLink({
+  href = "#main",
+  children = "Skip to content",
+  className,
+}: {
+  href?: string;
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <a
+      href={href}
+      className={cn(
+        "fixed top-2 left-2 z-[300] -translate-y-[200%] rounded-none bg-[var(--accent)] px-[0.9rem] py-2 font-mono text-[0.72rem] text-[var(--on-accent)] no-underline focus-visible:translate-y-0",
+        className,
+      )}
+    >
+      {children}
+    </a>
+  );
+}
+
+export interface CtaLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  href: string;
+  /** buttonVariants variant — the single CTA dress vocabulary. */
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** External destination: opens a new tab with the matching rel. */
+  external?: boolean;
+  /** Optional leading glyph, rendered before the label. */
+  icon?: ReactNode;
+}
+
+/** A CTA link dressed with the kit's button treatment. The kit shipped a
+ *  `<Button>` (a real button) but no link equivalent, so every site hand-rolled
+ *  `buttonVariants(...)` at the call site (or invented a `.dc-nav-cta` /
+ *  `.dq-cta` class). This is that one treatment, named. */
+export function CtaLink({
+  href,
+  children,
+  variant = "default",
+  size = "sm",
+  external,
+  icon,
+  className,
+  ...rest
+}: CtaLinkProps) {
+  return (
+    <a
+      href={href}
+      className={cn(buttonVariants({ variant, size }), className)}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </a>
+  );
+}
+
+export interface IconLinkProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "aria-label"> {
+  href: string;
+  /** The accessible name — required, because the child is a bare glyph. */
+  label: string;
+  external?: boolean;
+}
+
+/** Icon-only link (the nav tail's GitHub glyph, a mark-only CTA). The kit's
+ *  ghost icon-button dress, with the `aria-label` the bare svg needs made
+ *  mandatory rather than left to each call site. */
+export function IconLink({ href, label, external, className, children, ...rest }: IconLinkProps) {
+  return (
+    <a
+      href={href}
+      aria-label={label}
+      className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }), className)}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+export function Footer({
+  links,
+  meta,
+  profiles,
+}: {
+  links: NavLink[];
+  meta: string;
+  /** Quiet company-profile row (typically <SocialRow/>). Optional so existing
+   *  call sites stay a utility-link strip; socials are a dedicated primitive,
+   *  not a fake Connect column. */
+  profiles?: ReactNode;
+}) {
+  return (
+    <footer className="footer">
+      <div className="wrap footer-inner">
+        <nav className="footer-links" aria-label="Footer">
+          {links.map((l) => (
+            <a key={l.href + l.label} href={l.href} target={l.external ? "_blank" : undefined}
+              rel={l.external ? "noopener noreferrer" : undefined}>{l.label}</a>
+          ))}
+        </nav>
+        {profiles}
+        <p className="footer-meta">{meta}</p>
+      </div>
+    </footer>
+  );
+}
+
+/** The page's last word (canon §08): the module's name at giant scale,
+ *  1px hairline outline by default — plus an opt-in scroll-scrubbed glow
+ *  sweep. The outline rise/fill is scroll-scrubbed with zero JS via CSS
+ *  `animation-timeline: view()` (@supports-gated in site.css); under
+ *  reduced motion or without support the name simply stands. The suffix
+ *  wears var(--accent), so each app's livery (or the umbrella's ink)
+ *  dresses it automatically. aria-hidden: punctuation, not content.
+ *
+ *  `sweep` (default false — the outline-only ruling stands for every
+ *  existing consumer) adds the reference footer's personality moment: an
+ *  accent glow passing left→right across the wordmark, scrubbed by the
+ *  colophon's own scroll progress (same offsets/transform as
+ *  reference/components/footer-reference.tsx). A duplicate overlay span
+ *  carries the gradient clipped to its glyphs; reduced motion (and no-JS)
+ *  park the band off-screen so no glow travels. Requires a MotionProvider
+ *  in the consuming app.
+ *
+ *  The rise/fill only works because `.colophon` clips with `overflow-x: clip`
+ *  rather than `overflow: hidden` (site.css): `hidden` made the colophon its
+ *  own child's nearest scrollport, so `.colo-word`'s `view()` timeline
+ *  resolved against a box that never scrolls, saturated, and the whole
+ *  scroll-scrub silently no-opped (the mark sat fully risen at every scroll
+ *  position). Do not "simplify" that back to `overflow: hidden`. */
+export function Colophon({
+  name,
+  suffix,
+  sweep = false,
+}: {
+  name: string;
+  suffix?: string;
+  sweep?: boolean;
+}) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  // useMotionSafe(), not raw useReducedMotion() -- see WordReveal.tsx's fix
+  // comment (#2244) for the full hydration-mismatch mechanism this avoids.
+  const reduced = !useMotionSafe();
+  // 0 = the colophon's top enters the viewport bottom; 1 = scrolled to its
+  // end. The band travels off-left → off-right across the middle of that
+  // range, so the highlight crosses the wordmark once as you scroll into it.
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start end", "end end"],
+  });
+  const sweepPos = useTransform(scrollYProgress, [0.38, 0.96], [120, -20]);
+  const backgroundPosition = useTransform(sweepPos, (v) => `${v}% 0`);
+
+  return (
+    <div className="colophon" aria-hidden="true" ref={ref}>
+      <span className="colo-word">
+        {name}
+        {suffix ? <b>{suffix}</b> : null}
+        {sweep ? (
+          <m.span
+            className="colo-sweep"
+            style={reduced ? undefined : { backgroundPosition }}
+          >
+            {name}
+            {suffix}
+          </m.span>
+        ) : null}
+      </span>
+    </div>
+  );
+}
+
+export function ModuleCard({
+  m,
+  hrefForModule = (id: string) => `/modules/${id}`,
+}: {
+  m: ModuleNode;
+  /** Host-owned module URL. Defaults to the `/modules/[id]` host contract. */
+  hrefForModule?: (id: string) => string;
+}) {
+  return (
+    <a className={`mod-card t-${m.tier}`} href={hrefForModule(m.id)}>
+      <div className="mod-card-top">
+        <Emblem id={m.emblem} size={26} />
+        <span className={`dg-tier t-${m.tier}`}>{m.tier}</span>
+      </div>
+      <h3>{m.name}</h3>
+      <p className="role">{m.role}</p>
+      <StackRow items={m.stack.slice(0, 4)} className="stack-row compact" />
+    </a>
+  );
+}

package/src/components/command-palette/CommandPalette.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { useBodyScrollLock } from "../../lib/useBodyScrollLock";
+
+/**
+ * CommandPalette — the ⌘K command bar shell promoted from the design
+ * reference (chrome/command-palette). The shell owns the chrome and the
+ * interaction contract: overlay/backdrop, a document.body portal, the search
+ * input row, the grouped listbox, the keyboard loop (↑/↓/Home/End/↵/esc,
+ * focus held on the input) and the listbox ARIA wiring — `role="listbox"`
+ * with `role="option"` children and `aria-activedescendant` on the listbox
+ * (the pattern the dashboard's palette was fixed to; preserved here).
+ *
+ * The CONSUMER owns everything data- and router-shaped: the `open` flag (and
+ * whatever global shortcut toggles it — the shell binds no ⌘K), the grouped
+ * item list — recomputed per keystroke when `groups` is a function of the
+ * query — and per-item `onSelect` callbacks (router.push, theme toggles, …).
+ * No router, data fetching, or filtering policy lives here.
+ *
+ * Query state is internal and resets on every open, synchronously on the
+ * opening render, so a reopen never flashes the previous query. Enter or
+ * click selects the active item: palette-level `onSelect(item)` fires, then
+ * `item.onSelect()`, then `onClose()` unless `closeOnSelect={false}`.
+ *
+ * Wiring (in the consuming app's globals.css):
+ *   @import "@digithings-ai/ui/styles/command-palette.css";
+ *   @source "<path-to>/packages/ui/src/components/command-palette";
+ * Overlay stacking: the overlay's z-index reads var(--cp-z, 40) — set --cp-z
+ * at the call site when the app's chrome stacks higher than the reference's.
+ *
+ * Two dresses (styles/command-palette.css):
+ * - dress="reference" (default): the design-reference dress — mono rows,
+ *   surface-mix panel, token scrim.
+ * - dress="glass": the dashboard's shipped ⌘K look, translated
+ *   exactly — black/75 blurred scrim, term-bg panel (32rem, 12px radius),
+ *   sans rows with accent-ring active state.
+ */
+export type CommandPaletteItem = {
+  /** Stable identity — React key; option DOM ids are index-derived. */
+  id: string;
+  label: ReactNode;
+  /** Optional muted second line under the label (the dashboard "hint"). */
+  description?: ReactNode;
+  /** Fired when the row is chosen (Enter or click) — router.push lives here. */
+  onSelect?: () => void;
+  /** Optional right-edge keycap hint — "B", "⌘K". */
+  kbd?: string;
+  /** Livery scope class for the row (`accent-<livery>`) — colors the dot. */
+  livery?: string;
+  /** Show the leading livery dot (reference grammar). */
+  dot?: boolean;
+  /** Leading icon node — wins over `dot` when both are set. */
+  icon?: ReactNode;
+};
+
+export type CommandPaletteGroup = {
+  id?: string;
+  /** Optional group heading; unlabeled groups render without `role="group"`. */
+  label?: ReactNode;
+  items: CommandPaletteItem[];
+};
+
+export type CommandPaletteProps = {
+  /** Controlled visibility — the consumer owns the flag and its shortcut. */
+  open: boolean;
+  /** Fired by esc, the scrim, and (by default) after a selection. */
+  onClose: () => void;
+  /**
+   * The grouped item list. Pass a function to recompute it per keystroke —
+   * it receives the shell's current query verbatim (filtering policy is
+   * entirely the consumer's).
+   */
+  groups: CommandPaletteGroup[] | ((query: string) => CommandPaletteGroup[]);
+  /** Palette-level selection hook, fired before the item's own onSelect. */
+  onSelect?: (item: CommandPaletteItem) => void;
+  /** Close the palette after a selection (default true). */
+  closeOnSelect?: boolean;
+  placeholder?: string;
+  /**
+   * Footer key-hint legend: `true` renders the standard ↑↓ / ↵ / esc legend,
+   * a node renders custom content inside `.cp-foot`, absent renders nothing.
+   */
+  footer?: ReactNode | boolean;
+  /** Trailing input-row slot — defaults to an `esc` keycap. */
+  inputTrailing?: ReactNode;
+  /** Leading input-row slot — defaults to the built-in magnifier glyph. */
+  inputLeading?: ReactNode;
+  /**
+   * Input `type` attribute (default "text"). dashboard ships type="search"
+   * (native search-cancel affordance in WebKit/Chromium).
+   */
+  inputType?: string;
+  /** Empty-results content; the function form receives the current query. */
+  emptyMessage?: ReactNode | ((query: string) => ReactNode);
+  /** Dialog aria-label (default "Command palette"). */
+  ariaLabel?: string;
+  /** Listbox aria-label (default "Commands"). */
+  listLabel?: string;
+  /** Input aria-label (default "Search commands"). */
+  inputAriaLabel?: string;
+  /** Extra class on the panel. */
+  className?: string;
+  /** Render into a document.body portal (default) or in place. */
+  portal?: boolean;
+  /** Visual dress — "reference" (default) or dashboard's "glass". */
+  dress?: "reference" | "glass";
+};
+
+const defaultEmpty = (query: string): ReactNode =>
+  query ? <>No matches for “{query}”.</> : "No matches.";
+
+// Focus-trap boundary query — deliberately generic, not "just the input":
+// consumers can pass interactive inputLeading/inputTrailing content (dashboard
+// ships a real Close button there), so the trap must cycle the dialog's
+// actual focusable set rather than assume the input is the only one.
+const FOCUSABLE_SELECTOR =
+  'a[href]:not([tabindex^="-"]), button:not([disabled]):not([tabindex^="-"]), input:not([disabled]):not([tabindex^="-"]), select:not([disabled]):not([tabindex^="-"]), textarea:not([disabled]):not([tabindex^="-"]), [tabindex]:not([tabindex^="-"])';
+
+export function CommandPalette({
+  open,
+  onClose,
+  groups,
+  onSelect,
+  closeOnSelect = true,
+  placeholder = "Type a command or search…",
+  footer,
+  inputTrailing,
+  inputLeading,
+  inputType = "text",
+  emptyMessage,
+  ariaLabel = "Command palette",
+  listLabel = "Commands",
+  inputAriaLabel = "Search commands",
+  className,
+  portal = true,
+  dress = "reference",
+}: CommandPaletteProps) {
+  const baseId = useId();
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const [mounted, setMounted] = useState(false);
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  // Reset synchronously on the opening render — a reopen never flashes the
+  // previous query (React's adjust-state-during-render pattern).
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    if (open) {
+      setQuery("");
+      setActive(0);
+    }
+  }
+
+  useEffect(() => setMounted(true), []);
+
+  // Lock body scroll while the dialog is open — reference-counted (see
+  // useBodyScrollLock) so this coordinates safely with any other overlay
+  // (e.g. NavShell's own menu) that may be locked at the same time,
+  // regardless of open/close order.
+  useBodyScrollLock(open);
+
+  const resolvedGroups = typeof groups === "function" ? groups(query) : groups;
+  const flat = resolvedGroups.flatMap((g) => g.items);
+  const count = flat.length;
+  const activeIndex = count === 0 ? -1 : Math.min(active, count - 1);
+
+  const select = (item: CommandPaletteItem) => {
+    onSelect?.(item);
+    item.onSelect?.();
+    if (closeOnSelect) onClose();
+  };
+
+  // Refs keep one keydown listener per open, not one per keystroke.
+  const flatRef = useRef(flat);
+  const activeRef = useRef(activeIndex);
+  const selectRef = useRef(select);
+  const onCloseRef = useRef(onClose);
+  useLayoutEffect(() => {
+    flatRef.current = flat;
+    activeRef.current = activeIndex;
+    selectRef.current = select;
+    onCloseRef.current = onClose;
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+      if (e.key === "Tab") {
+        // Focus trap: only intercept at the dialog's boundary — wrap
+        // Tab past the last focusable back to the first, and Shift+Tab
+        // before the first back to the last — rather than pinning focus to
+        // the input unconditionally, since a consumer's inputLeading/
+        // inputTrailing slot can carry its own focusable content (dashboard's
+        // production palette ships a real Close button there).
+        const panel = panelRef.current;
+        if (!panel) return;
+        const focusables = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+        if (focusables.length === 0) return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const activeEl = document.activeElement;
+        if (e.shiftKey) {
+          if (activeEl === first || !panel.contains(activeEl)) {
+            e.preventDefault();
+            last.focus();
+          }
+        } else {
+          if (activeEl === last || !panel.contains(activeEl)) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+        return;
+      }
+      const len = flatRef.current.length;
+      if (len === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((i) => Math.min(i + 1, len - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActive(len - 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const idx = Math.min(Math.max(0, activeRef.current), len - 1);
+        const item = flatRef.current[idx];
+        if (item) selectRef.current(item);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  // Keep the active row in view as the keyboard walks the list.
+  useLayoutEffect(() => {
+    if (!open || activeIndex < 0 || !listRef.current) return;
+    listRef.current
+      .querySelector(`[data-cp-index="${activeIndex}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [open, activeIndex, query]);
+
+  if (!open) return null;
+
+  const empty =
+    typeof emptyMessage === "function"
+      ? emptyMessage(query)
+      : emptyMessage ?? defaultEmpty(query);
+
+  let flatIndex = -1;
+  const palette = (
+    <div
+      className={`cp-overlay${dress === "glass" ? " cp-overlay--glass" : ""}`}
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
+    >
+      <div className="cp-scrim" onClick={onClose} aria-hidden="true" />
+      <div ref={panelRef} className={`cp-panel${className ? ` ${className}` : ""}`}>
+        <div className="cp-input-row">
+          {inputLeading !== undefined ? (
+            inputLeading
+          ) : (
+            <span className="cp-search-glyph" aria-hidden="true">
+              <svg
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6"
+              >
+                <circle cx="11" cy="11" r="7" />
+                <path d="M20 20l-3.5-3.5" strokeLinecap="round" />
+              </svg>
+            </span>
+          )}
+          <input
+            className="cp-input"
+            type={inputType}
+            placeholder={placeholder}
+            value={query}
+            autoFocus
+            autoComplete="off"
+            spellCheck={false}
+            aria-label={inputAriaLabel}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActive(0);
+            }}
+          />
+          {inputTrailing !== undefined ? inputTrailing : <kbd className="cp-kbd">esc</kbd>}
+        </div>
+
+        <div
+          ref={listRef}
+          className="cp-results"
+          role="listbox"
+          aria-label={listLabel}
+          aria-activedescendant={activeIndex >= 0 ? `${baseId}-opt-${activeIndex}` : undefined}
+        >
+          {count === 0 ? (
+            <p className="cp-empty" role="presentation">
+              {empty}
+            </p>
+          ) : (
+            resolvedGroups.map((g, gi) => {
+              if (g.items.length === 0) return null;
+              const labelId = g.label != null ? `${baseId}-grp-${gi}` : undefined;
+              const rows = g.items.map((item) => {
+                flatIndex += 1;
+                const idx = flatIndex;
+                const on = idx === activeIndex;
+                return (
+                  <div
+                    key={item.id}
+                    id={`${baseId}-opt-${idx}`}
+                    role="option"
+                    aria-selected={on}
+                    data-cp-index={idx}
+                    className={`cp-row${on ? " on" : ""}${item.livery ? ` accent-${item.livery}` : ""}`}
+                    onClick={() => select(item)}
+                    onMouseEnter={() => setActive(idx)}
+                  >
+                    {item.icon ? (
+                      <span className="cp-icon" aria-hidden="true">
+                        {item.icon}
+                      </span>
+                    ) : item.dot ? (
+                      <span className="cp-dot" aria-hidden="true" />
+                    ) : null}
+                    <span className="cp-label">
+                      {item.label}
+                      {item.description != null ? (
+                        <span className="cp-desc">{item.description}</span>
+                      ) : null}
+                    </span>
+                    {item.kbd ? <kbd className="cp-kbd cp-row-key">{item.kbd}</kbd> : null}
+                  </div>
+                );
+              });
+              return g.label != null ? (
+                <div key={g.id ?? gi} className="cp-group" role="group" aria-labelledby={labelId}>
+                  <p className="cp-group-label" id={labelId} role="presentation">
+                    {g.label}
+                  </p>
+                  {rows}
+                </div>
+              ) : (
+                <div key={g.id ?? gi} className="cp-group" role="presentation">
+                  {rows}
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {footer === true ? (
+          <div className="cp-foot" aria-hidden="true">
+            <span>
+              <kbd className="cp-kbd">↑</kbd>
+              <kbd className="cp-kbd">↓</kbd> navigate
+            </span>
+            <span>
+              <kbd className="cp-kbd">↵</kbd> open
+            </span>
+            <span>
+              <kbd className="cp-kbd">esc</kbd> close
+            </span>
+          </div>
+        ) : footer ? (
+          <div className="cp-foot" aria-hidden="true">
+            {footer}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+
+  if (!portal) return palette;
+  if (!mounted) return null;
+  return createPortal(palette, document.body);
+}

package/src/components/command-palette/index.ts

@@ -0,0 +1,6 @@
+export {
+  CommandPalette,
+  type CommandPaletteProps,
+  type CommandPaletteGroup,
+  type CommandPaletteItem,
+} from "./CommandPalette";