@sableui/react 0.6.2 → 0.7.1

package/dist/components/command-menu/command-menu.meta.js

@@ -0,0 +1,279 @@
+// src/components/command-menu/command-menu.meta.ts
+var commandMenuMeta = {
+  name: "CommandMenu",
+  summary: "A command palette (Cmd+K) built on our Dialog: a top-aligned wide surface with a search input and a scrollable, JS-filtered list of grouped commands. CommandMenuPanel renders the same palette in place, on a card in the page.",
+  keywords: [
+    "command",
+    "command menu",
+    "palette",
+    "launcher",
+    "cmd k",
+    "search",
+    "quick action",
+    "spotlight",
+    "navigation",
+    "search trigger",
+    "header search",
+    "keyboard shortcut",
+    "inline command menu",
+    "embedded palette",
+    "settings search"
+  ],
+  usage: {
+    description: "Use CommandMenu for global or contextual keyboard-driven actions: navigation, creation, quick settings, or searchable commands. It should feel curated and fast; use Select, Menu, or Combobox for ordinary inline choices.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Open the palette from a header search with CommandMenuTrigger: a button wearing SearchInput's field shell, with the \u2318K / Ctrl K hint and the page-wide shortcut built in. A palette with no visible trigger still takes useCommandMenuShortcut rather than a hand-written keydown listener."
+      },
+      {
+        guidance: "dont",
+        description: "Hand-style a <button> to look like a search field, or put a SearchInput in the header that opens a dialog when focused. The first drifts from the field it imitates; the second is a text box you cannot type in. A header search that opens the palette is CommandMenuTrigger."
+      },
+      {
+        guidance: "do",
+        description: "Group items by task area, such as Navigation, Create, or Settings, so users can scan before typing."
+      },
+      {
+        guidance: "do",
+        description: "Keep command labels action-oriented and unique enough to search."
+      },
+      {
+        guidance: "do",
+        description: "Provide useful bootstrap items so the menu is valuable before the user types."
+      },
+      {
+        guidance: "dont",
+        description: "Use CommandMenu as a replacement for every dropdown. Simple choices belong in Select, Menu, or Tabs."
+      },
+      {
+        guidance: "do",
+        description: "Pass a filter when the palette searches more than one source. Ranking (exact prefix over substring over subsequence) is the caller's to own, and the returned order is kept verbatim \u2014 including group order, which follows each group's first surviving row."
+      },
+      {
+        guidance: "do",
+        description: "List a command the user cannot currently run as disabled with the reason in hint, rather than filtering it away. A palette that hides what you cannot do teaches you nothing about why."
+      },
+      {
+        guidance: "do",
+        description: "Resize the list with listClassName rather than reaching past className into the palette's DOM. className is the dialog surface; listClassName is the Scroller that actually scrolls."
+      },
+      {
+        guidance: "do",
+        description: "Use CommandMenuPanel when the palette lives in the page: a sidebar launcher, a settings search, a demo. It takes the same items, filter, query and children, and keeps the same keyboard model; it is a static card, so it does not trap focus or take it on mount, and Esc clears the query instead of closing anything."
+      },
+      {
+        guidance: "dont",
+        description: "Hand-build a palette mock from a search glyph, a row of buttons and a highlight. That is CommandMenuPanel, and the hand-built one has no combobox, no filtering and no keyboard model."
+      },
+      {
+        guidance: "dont",
+        description: "Dump every app route and action into one uncurated list. Keep the palette opinionated."
+      },
+      {
+        guidance: "dont",
+        description: "Rebuild the combobox over Dialog to get consumer-owned ranking. query/onQueryChange and filter are that seam; the keyboard model, activedescendant wiring, and result-count live region come with them."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Trigger",
+        required: false,
+        description: "CommandMenuTrigger \u2014 the search-field-shaped button in a header that opens the palette on click or on \u2318K / Ctrl+K. It sits outside CommandMenu; wire its onOpen to the palette's open state."
+      },
+      {
+        name: "Dialog surface",
+        required: true,
+        description: "The modal shell that traps focus and positions the launcher. CommandMenuPanel replaces it with a static card in the page (border, card fill, no shadow)."
+      },
+      {
+        name: "Search input",
+        required: true,
+        description: "The combobox input that filters commands while focus remains in the field."
+      },
+      {
+        name: "Groups",
+        required: false,
+        description: "Labelled command sections that keep results scannable."
+      },
+      {
+        name: "Items",
+        required: true,
+        description: "Keyboard-selectable command rows that run onSelect and close the palette."
+      }
+    ]
+  },
+  related: {
+    components: ["Dialog", "SearchInput", "Kbd", "Menu", "Select", "Combobox"],
+    patterns: ["DashboardPage", "ListDetailPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "scope",
+      type: "ReactNode",
+      description: 'A scope chip in the header, between the search glyph and the input \u2014 "In: Backdrop". A scope belongs beside the field rather than in its value: put it in the value and the user deletes prose to widen their search, and your filter parses it back out. Pair with inputProps.onKeyDown handling Backspace on an empty query, or the only way out of a scope is the mouse.'
+    },
+    {
+      name: "inputProps",
+      type: "Omit<ComponentProps<'input'>, 'role' | 'value' | 'onChange' | aria-*>",
+      description: "Extra props for the search input. `onKeyDown` runs BEFORE the palette's own handling and opts out of a key by calling preventDefault() \u2014 which is what makes a scope chip Backspace-dismissable. Running first is deliberate: Backspace happens not to be a key the palette claims today, so a plain passthrough would work until the palette grows a 'Backspace clears the query' affordance, at which point the consumer's behaviour breaks silently. The combobox wiring (role, aria relationships, controlled value) is not overridable; aria-label and className compose."
+    },
+    {
+      name: "open",
+      type: "boolean",
+      description: "Controlled open state of the palette."
+    },
+    {
+      name: "onOpenChange",
+      type: "(open: boolean) => void",
+      description: "Called on open/close (select, Esc, outside click)."
+    },
+    {
+      name: "items",
+      type: "CommandItem[]",
+      description: "Data-driven commands ({ group, label, onSelect, id?, icon?, detail?, hint?, disabled? }). Ignored when children are provided. id is optional identity: filter is handed these same objects, so it is how a caller that ranks over its own richer model maps the array back onto it \u2014 and it becomes the row's DOM id (namespaced to the palette) and React key, so two rows may share a label."
+    },
+    {
+      name: "query",
+      type: "string",
+      description: "Controlled query. Leave undefined to let the palette own it; either way it resets on close (a controlled caller gets onQueryChange(''))."
+    },
+    {
+      name: "onQueryChange",
+      type: "(query: string) => void",
+      description: "Called on every query change. Required to control query, optional otherwise."
+    },
+    {
+      name: "filter",
+      type: "((items: CommandItem[], query: string) => CommandItem[]) | null",
+      default: "case-insensitive substring match on label",
+      description: "Replaces or disables the built-in match. A function ranks and filters items itself and its order is kept verbatim; null renders items exactly as given. Either also stops declarative CommandMenuItem children self-filtering. The query arrives raw \u2014 trimming and case are policy, and this is the prop that hands policy over."
+    },
+    {
+      name: "listClassName",
+      type: "string",
+      description: `Classes for the scrolling list. className lands on the dialog surface, so this is the seam for the list's own height cap \u2014 listClassName="max-h-[60vh]". The list is a Scroller, so the cap lands on the element that scrolls and the edge fades come free.`
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      default: '"Type a command or search\u2026"',
+      description: "Placeholder for the search input."
+    },
+    {
+      name: "emptyMessage",
+      type: "string",
+      default: '"No results found."',
+      description: "Copy shown when the query matches nothing."
+    },
+    {
+      name: "title",
+      type: "string",
+      default: '"Command menu"',
+      description: "Accessible name for the palette dialog (visually hidden)."
+    },
+    {
+      name: "description",
+      type: "string",
+      default: '"Search for a command and press Enter to run it."',
+      description: "Accessible description for the palette dialog (visually hidden)."
+    },
+    {
+      name: "finalFocus",
+      type: "RefObject<HTMLElement> | ((closeType) => HTMLElement | false) | false",
+      description: "Where focus goes when the palette closes. The Dialog default returns it to the trigger \u2014 the CommandMenuTrigger, when there is one. A palette opened by the keystroke alone has none, so pass a resolver to restore whatever had focus, or false to restore nothing."
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "Declarative commands via CommandMenuGroup / CommandMenuItem. Takes precedence over items."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "CommandMenuTrigger",
+      type: '{ onOpen?: () => void; placeholder?: string; shortcut?: string | false; size?: "sm" | "md"; disabled?: boolean }',
+      description: `The search field in a header that is really a button. Wears SearchInput's shell (border-input, card surface, leading magnifier, muted placeholder) on the control ladder, with a trailing Kbd: \u2318K on macOS, Ctrl K elsewhere. onOpen runs on click and on the shortcut, which it listens for page-wide (useCommandMenuShortcut). shortcut is the key (default "k"); false drops both the hint and the listener. size is sm in a header beside small buttons, md (default) beside Input and SearchInput. It sits outside CommandMenu, so the Dialog returns focus to it on close.`
+    },
+    {
+      name: "useCommandMenuShortcut",
+      type: "(onShortcut: (event: KeyboardEvent) => void, key?: string | false) => void",
+      description: `The page-wide \u2318K / Ctrl+K listener CommandMenuTrigger installs, for a palette with no visible trigger. Ignored while focus is in a text field, textarea, select or contenteditable (Ctrl+K belongs to the field there) except the palette's own input, so the callback may toggle. It calls preventDefault() on a match and skips an event already prevented, so two listeners on one page fire once. key defaults to "k"; false turns it off. Removed on unmount.`
+    },
+    {
+      name: "CommandMenuPanel",
+      type: "{ items?: CommandItem[]; query?: string; onQueryChange?: (query: string) => void; filter?: CommandFilter; listClassName?: string; placeholder?: string; emptyMessage?: string; title?: string; scope?: ReactNode; inputProps?: ComponentProps<'input'>; className?: string; children?: ReactNode }",
+      description: "The palette rendered in place: the same search header, filtered and grouped listbox, keyboard model and result-count live region, on a static card (border-border, bg-card, no shadow) instead of in a Dialog. Takes every CommandMenu prop except open, onOpenChange, finalFocus and description; className lands on the card, title names the listbox. Focus is not trapped and the input does not take focus on mount (inputProps.autoFocus opts in). Esc clears the query, and passes through once it is empty, so a Popover around the panel still closes. A chosen row runs its onSelect and the panel stays as it was. The page-wide shortcut does not fire from its input."
+    },
+    {
+      name: "CommandMenuGroup",
+      type: "{ label: string; children }",
+      description: "A labelled group of command rows."
+    },
+    {
+      name: "CommandMenuItem",
+      type: "{ onSelect?: () => void; icon?: string; detail?: ReactNode; hint?: ReactNode; disabled?: boolean; id?: string; children }",
+      description: "A selectable row. Self-filters by its text (unless the root was given a filter), runs onSelect, then closes the palette. detail is secondary text after the label; hint is the end-aligned trailing slot \u2014 a shortcut, a count, or a disabled row's reason. A disabled row stays listed, stays announced, and stays reachable by arrow key so its reason can be read, but is inert to Enter and to a click."
+    }
+  ],
+  tokensUsed: [
+    "card",
+    "card-foreground",
+    "border",
+    "foreground",
+    "muted-foreground",
+    "accent",
+    "accent-foreground"
+  ],
+  a11y: [
+    "CommandMenuTrigger is a real <button> named by its visible placeholder, with aria-haspopup=dialog and aria-keyshortcuts (Meta+K on macOS, Control+K elsewhere). Its Kbd hint is aria-hidden, so the shortcut is announced once rather than read as part of the name.",
+    "The shortcut never fires from inside a text field, textarea, select or contenteditable (Ctrl+K is delete-to-end-of-line in macOS text views), except the palette's own input.",
+    "CommandMenuPanel is the same combobox and listbox in the page, with no dialog: it does not trap or steal focus, and Esc clears a non-empty query (stopping there) instead of dismissing. With an empty query Esc is left alone for whatever contains the panel.",
+    "Built on Base UI Dialog, so focus trap, scroll lock, and Esc/outside dismissal come for free; the dialog carries a visually-hidden title + description so it is announced.",
+    "Follows the ARIA combobox pattern: the search input is role=combobox (aria-autocomplete=list) that owns the role=listbox popup via aria-controls.",
+    "ArrowDown/ArrowUp/Home/End and PageUp/PageDown move a virtual aria-activedescendant highlight while focus stays in the input; Enter runs the highlighted command. Arrow keys wrap; page jumps clamp.",
+    "Groups expose role=group labelled by their heading; items are role=option and never enter the tab order.",
+    "A polite role=status live region announces the result count as the query narrows, so the size of the list is available without reading it.",
+    "A disabled row carries aria-disabled and is skipped when seeding the highlight, but stays in the arrow-key walk so its reason can be reached and read.",
+    "The component keeps ownership of aria-activedescendant even when a caller claims a key through inputProps.onKeyDown. Skipping a move is coherent (they took responsibility for that key), but nothing may leave the active id naming a row that is not painted as active \u2014 so the opt-out returns before any highlight change rather than after it.",
+    "Exactly one row is ever painted as active: the pointer takes the highlight over (moving onto a row makes it the aria-activedescendant) rather than adding a hover fill of its own, so what looks highlighted is always what Enter will run."
+  ],
+  examples: [
+    {
+      label: "Data-driven",
+      code: "<CommandMenu open={open} onOpenChange={setOpen} items={[{ group: 'Navigation', label: 'Go to feed', icon: 'home', onSelect: () => {} }, { group: 'Actions', label: 'New post', onSelect: () => {} }]} />"
+    },
+    {
+      label: "Declarative",
+      code: "<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label='Navigation'><CommandMenuItem icon='home' onSelect={() => {}}>Go to feed</CommandMenuItem></CommandMenuGroup></CommandMenu>"
+    },
+    {
+      label: "Grouped launcher",
+      code: '<CommandMenu open={open} onOpenChange={setOpen}><CommandMenuGroup label="Create"><CommandMenuItem icon="plus" onSelect={() => createPost()}>New post</CommandMenuItem><CommandMenuItem icon="sparkles" onSelect={() => createEdition()}>New edition</CommandMenuItem></CommandMenuGroup><CommandMenuGroup label="Navigation"><CommandMenuItem icon="home" onSelect={() => navigate("/")}>Home</CommandMenuItem><CommandMenuItem icon="gear" onSelect={() => navigate("/settings")}>Settings</CommandMenuItem></CommandMenuGroup></CommandMenu>'
+    },
+    {
+      label: "Consumer-owned ranking",
+      code: "<CommandMenu open={open} onOpenChange={setOpen} query={query} onQueryChange={setQuery} filter={(items, q) => rank(items, q)} items={items} />"
+    },
+    {
+      label: "Listed but unavailable",
+      code: "<CommandMenu open={open} onOpenChange={setOpen} items={[{ group: 'Layers', label: 'Align left', disabled: true, hint: 'Select another layer to align to', onSelect: () => {} }]} />"
+    },
+    {
+      label: "Inline panel",
+      code: `<CommandMenuPanel className="w-80" items={[{ group: 'Create', label: 'New project', icon: 'plus', hint: <Kbd>N</Kbd>, onSelect: () => {} }, { group: 'Settings', label: 'Open settings', icon: 'gear', onSelect: () => {} }]} />`
+    },
+    {
+      label: "Header search trigger",
+      code: '<CommandMenuTrigger size="sm" placeholder="Search docs" onOpen={() => setOpen(true)} className="w-56" />\n<CommandMenu open={open} onOpenChange={setOpen} items={items} />'
+    },
+    {
+      label: "Keyboard shortcut with no visible trigger",
+      code: "useCommandMenuShortcut(() => setOpen((value) => !value))\n<CommandMenu open={open} onOpenChange={setOpen} items={items} />"
+    }
+  ]
+};
+export {
+  commandMenuMeta
+};

package/dist/components/command-menu/index.js

@@ -0,0 +1,21 @@
+// src/components/command-menu/index.ts
+import {
+  CommandMenu,
+  CommandMenuGroup,
+  CommandMenuItem,
+  CommandMenuPanel
+} from "./command-menu.js";
+import {
+  CommandMenuTrigger,
+  useCommandMenuShortcut
+} from "./command-menu-trigger.js";
+import { commandMenuMeta } from "./command-menu.meta.js";
+export {
+  CommandMenu,
+  CommandMenuGroup,
+  CommandMenuItem,
+  CommandMenuPanel,
+  CommandMenuTrigger,
+  commandMenuMeta,
+  useCommandMenuShortcut
+};

package/dist/components/context-card/context-card.js

@@ -0,0 +1,62 @@
+// src/components/context-card/context-card.tsx
+import { PreviewCard as Base } from "@base-ui/react/preview-card";
+import { anchoredScroll } from "../../lib/anchored-scroll.js";
+import { cn } from "../../lib/cn.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { useAnchoredDensity } from "../../lib/density.js";
+import { jsx } from "react/jsx-runtime";
+var ContextCard = Base.Root;
+var ContextCardTrigger = Base.Trigger;
+var ContextCardPortal = withPortalThemeScope(Base.Portal);
+function ContextCardContent({
+  className,
+  children,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  ...props
+}) {
+  const anchoredDensity = useAnchoredDensity();
+  return /* @__PURE__ */ jsx(ContextCardPortal, { children: /* @__PURE__ */ jsx(Base.Positioner, { side, align, sideOffset, className: "z-(--z-overlay)", children: /* @__PURE__ */ jsx(
+    Base.Popup,
+    {
+      ...anchoredDensity,
+      className: cn(
+        "w-80 origin-(--transform-origin) rounded-md border border-border-floating bg-popover sable-surface-popover p-4 text-popover-foreground shadow-md outline-none",
+        // A preview card is a fixed width but an unbounded height. See
+        // lib/anchored-scroll (the arrow escapes the clip, as in Popover).
+        anchoredScroll,
+        "motion-pop",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function ContextCardArrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Arrow,
+    {
+      className: cn(
+        "group/arrow data-[side=bottom]:-top-1.5 data-[side=left]:-right-1.5 data-[side=right]:-left-1.5 data-[side=top]:-bottom-1.5",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "block size-2.5 rotate-45 border-border-floating bg-popover group-data-[side=top]/arrow:border-b group-data-[side=top]/arrow:border-r group-data-[side=bottom]/arrow:border-t group-data-[side=bottom]/arrow:border-l group-data-[side=left]/arrow:border-t group-data-[side=left]/arrow:border-r group-data-[side=right]/arrow:border-b group-data-[side=right]/arrow:border-l"
+        }
+      )
+    }
+  );
+}
+export {
+  ContextCard,
+  ContextCardArrow,
+  ContextCardContent,
+  ContextCardPortal,
+  ContextCardTrigger
+};

package/dist/components/context-card/context-card.meta.js

@@ -0,0 +1,106 @@
+// src/components/context-card/context-card.meta.ts
+var contextCardMeta = {
+  name: "ContextCard",
+  summary: "Hover/focus-triggered rich preview card over Base UI PreviewCard. Reveals contextual content (a profile, an edition summary) from an inline anchor; 20rem-wide surface with delayed open and collision-aware positioning.",
+  status: "stable",
+  keywords: [
+    "context card",
+    "rich tooltip",
+    "hover card",
+    "preview"
+  ],
+  usage: {
+    description: "Use ContextCard to show richer contextual content near a trigger without taking users out of flow.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for previews, summaries, or supporting context tied to a specific element."
+      },
+      {
+        guidance: "do",
+        description: "Keep the card read-only and make the trigger the action: it is a real link to the full profile or item. Keyboard users cannot reach a button inside the card, because moving focus off the trigger closes it. If the preview needs an action (Follow, Add), use a Popover instead."
+      },
+      {
+        guidance: "dont",
+        description: "Do not put critical decisions, long forms, or required workflow steps inside ContextCard."
+      },
+      {
+        guidance: "dont",
+        description: "Do not open it on click. It is a hover/focus preview; making it click-triggered gives you a Popover with no dismiss affordance and no way to reach the content it previews."
+      }
+    ],
+    anatomy: [
+      {
+        name: "ContextCardTrigger",
+        required: true,
+        description: "The element that anchors the card."
+      },
+      {
+        name: "ContextCardContent",
+        required: true,
+        description: "The contextual surface shown near the trigger."
+      },
+      {
+        name: "ContextCardArrow",
+        required: false,
+        description: "An optional arrow connecting card and trigger."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Popover",
+      "Tooltip"
+    ]
+  },
+  props: [
+    {
+      name: "ContextCard (Root)",
+      type: "Base UI PreviewCard.Root props (open, defaultOpen, onOpenChange)",
+      description: "Groups the trigger and content. Uncontrolled by default; opens on hover/focus of the trigger."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "ContextCardTrigger",
+      type: "Base UI Trigger props + render + delay | closeDelay",
+      description: "The inline anchor (renders an <a>). Use render={<a href='\u2026'/>} to compose with a link. delay defaults to 600ms, closeDelay to 300ms."
+    },
+    {
+      name: "ContextCardContent",
+      type: "Base UI Popup props + side | align | sideOffset + className",
+      description: 'Portals + positions + paints the popup; surface is a fixed 20rem-wide card. side is which side of the trigger to render against (auto-flips on collision), align the alignment along it, sideOffset the gap in px. Defaults to side="bottom", align="center", sideOffset=8.'
+    },
+    {
+      name: "ContextCardArrow",
+      type: "Base UI Arrow props + className",
+      description: "Optional pointer connecting the popup to its trigger. Place inside ContextCardContent."
+    }
+  ],
+  tokensUsed: [
+    "popover",
+    "popover-foreground",
+    "border",
+    "muted-foreground",
+    "accent"
+  ],
+  a11y: [
+    "Opens on hover and on keyboard focus of the trigger, after a short delay; dismisses on Esc, outside press, and blur.",
+    "The trigger renders an <a> by default \u2014 compose render={<a href='\u2026'/>} so it stays a real, navigable link.",
+    "Base UI wires the popup's ARIA association with the trigger; the card holds non-interactive context, not focusable controls.",
+    "Animate via data-[starting-style]/data-[ending-style] opacity attributes on the popup."
+  ],
+  examples: [
+    {
+      label: "Profile preview",
+      code: "<ContextCard><ContextCardTrigger render={<a href='/u/ada' className='text-title-sm underline-offset-2 hover:underline'>@ada</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='AL' size='lg' />} title='Ada Lovelace' subtitle='@ada' /><p className='mt-3 text-body-sm text-muted-foreground'>Minting generative editions on Solana. Permanently on Arweave.</p></ContextCardContent></ContextCard>"
+    },
+    {
+      label: "With stat row",
+      code: "<ContextCard><ContextCardTrigger render={<a href='/u/nyx' className='text-title-sm underline-offset-2 hover:underline'>@nyx</a>} /><ContextCardContent><Entity className='[--entity-px:0] [--entity-py:0]' leading={<Avatar fallback='NY' size='lg' />} title='Nyx' subtitle='@nyx' /><div className='@container mt-4 border-t border-border pt-3'><dl className='sable-list-dl sable-list-dl-2'><dt>Posts</dt><dd>128</dd><dt>Followers</dt><dd>4.2k</dd></dl></div></ContextCardContent></ContextCard>"
+    }
+  ]
+};
+export {
+  contextCardMeta
+};

package/dist/components/context-card/index.js

@@ -0,0 +1,17 @@
+// src/components/context-card/index.ts
+import {
+  ContextCard,
+  ContextCardTrigger,
+  ContextCardPortal,
+  ContextCardContent,
+  ContextCardArrow
+} from "./context-card.js";
+import { contextCardMeta } from "./context-card.meta.js";
+export {
+  ContextCard,
+  ContextCardArrow,
+  ContextCardContent,
+  ContextCardPortal,
+  ContextCardTrigger,
+  contextCardMeta
+};

package/dist/components/context-menu/context-menu.js

@@ -0,0 +1,92 @@
+// src/components/context-menu/context-menu.tsx
+import { ContextMenu as Base } from "@base-ui/react/context-menu";
+import { anchoredScroll } from "../../lib/anchored-scroll.js";
+import { cn } from "../../lib/cn.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { useAnchoredDensity, useTypeTier } from "../../lib/density.js";
+import { HighlightGlide } from "../../lib/highlight-glide.js";
+import { MENU_ITEM_DESTRUCTIVE } from "../menu/menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContextMenu = Base.Root;
+var ContextMenuPortal = withPortalThemeScope(Base.Portal);
+function ContextMenuTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Trigger, { className: cn(className), ...props });
+}
+function ContextMenuContent({
+  className,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  ...props
+}) {
+  const anchoredDensity = useAnchoredDensity();
+  return /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(Base.Positioner, { side, align, sideOffset, className: "z-(--z-overlay)", children: /* @__PURE__ */ jsxs(
+    Base.Popup,
+    {
+      ...anchoredDensity,
+      className: cn(
+        "min-w-[10rem] origin-(--transform-origin) rounded-md border border-border-floating bg-popover popup-inset text-popover-foreground shadow-md outline-none",
+        // A context menu opened near the bottom edge has very little room
+        // below the pointer; cap against it and scroll. See lib/anchored-scroll.
+        anchoredScroll,
+        "motion-pop",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(HighlightGlide, {}),
+        children
+      ]
+    }
+  ) }) });
+}
+function ContextMenuItem({ className, variant = "default", ...props }) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsx(
+    Base.Item,
+    {
+      className: cn(
+        `flex cursor-default select-none items-center gap-(--item-gap) rounded-popup-item px-(--item-px) py-1.5 ${tier.body} outline-none motion-interactive data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:shrink-0`,
+        variant === "destructive" && MENU_ITEM_DESTRUCTIVE,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Separator,
+    {
+      className: cn("popup-bleed my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function ContextMenuGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Group, { className: cn(className), ...props });
+}
+function ContextMenuGroupLabel({ className, ...props }) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsx(
+    Base.GroupLabel,
+    {
+      className: cn(
+        `select-none px-(--item-px) py-1.5 ${tier.label} text-muted-foreground`,
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuSeparator,
+  ContextMenuTrigger
+};