@stridge/noctis 1.0.0-beta.0

package/dist/components/combobox/combobox.props.d.ts

@@ -0,0 +1,85 @@
+//#region src/components/combobox/combobox.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Combobox.*.props()` returns. */
+type ComboboxPartProps = {
+  /** The slot value the matching `combobox.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** The control sizes the input offers; the input's metrics re-point off the stamped `data-size`. */
+type ComboboxSize = "md" | "lg";
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Combobox.Input.props(...)` — the control size the field's metrics key off. */
+interface ComboboxInputPropsArgs extends BasePropsArgs {
+  /** Control height and type. @default "md" */
+  size?: ComboboxSize;
+  /** Whether the field is invalid (drives the danger border via `data-invalid`). */
+  invalid?: boolean;
+}
+/** Argument to `Combobox.ChipsInput.props(...)` — the multi-select field shell's invalid state. */
+interface ComboboxChipsInputPropsArgs extends BasePropsArgs {
+  /** Whether the field is invalid (drives the danger border via `data-invalid`). */
+  invalid?: boolean;
+}
+/** Argument to `Combobox.Item.props(...)` — the per-row selection/highlight state the CSS keys off. */
+interface ComboboxItemPropsArgs extends BasePropsArgs {
+  /** Whether this option is the selected value (drives the leading check via `data-selected`). */
+  selected?: boolean;
+  /** Whether the pointer/keyboard is over this row (drives the highlight via `data-highlighted`). */
+  highlighted?: boolean;
+  /** Whether this row is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own. */
+type ComboboxStatelessPropsArgs = BasePropsArgs;
+/** Input prop bag: slot anchor plus the `data-size` the field's metrics re-point off and the invalid state. */
+declare function inputProps({
+  size,
+  invalid,
+  className
+}?: ComboboxInputPropsArgs): ComboboxPartProps;
+/** Chips-input prop bag: the multi-select field shell's slot anchor plus its invalid state. */
+declare function chipsInputProps({
+  invalid,
+  className
+}?: ComboboxChipsInputPropsArgs): ComboboxPartProps;
+/** Status prop bag: just the slot anchor (the async live-region message). */
+declare function statusProps({
+  className
+}?: ComboboxStatelessPropsArgs): ComboboxPartProps;
+/** Icon prop bag: just the slot anchor (the leading decorative field icon). */
+declare function iconProps({
+  className
+}?: ComboboxStatelessPropsArgs): ComboboxPartProps;
+/** Separator prop bag: just the slot anchor (the divider between option groups). */
+declare function separatorProps({
+  className
+}?: ComboboxStatelessPropsArgs): ComboboxPartProps;
+/** List prop bag: just the slot anchor. */
+declare function listProps({
+  className
+}?: ComboboxStatelessPropsArgs): ComboboxPartProps;
+/** Item prop bag: slot anchor plus the `data-selected`/`data-highlighted`/`data-disabled` state. */
+declare function itemProps({
+  selected,
+  highlighted,
+  disabled,
+  className
+}?: ComboboxItemPropsArgs): ComboboxPartProps;
+/** Empty prop bag: just the slot anchor (the centred no-results message). */
+declare function emptyProps({
+  className
+}?: ComboboxStatelessPropsArgs): ComboboxPartProps;
+/** Group-label prop bag: just the slot anchor. */
+declare function groupLabelProps({
+  className
+}?: ComboboxStatelessPropsArgs): ComboboxPartProps;
+/** Chip prop bag: just the slot anchor (a multi-select selected-value pill). */
+declare function chipProps({
+  className
+}?: ComboboxStatelessPropsArgs): ComboboxPartProps;
+//#endregion
+export { ComboboxSize, chipProps, chipsInputProps, emptyProps, groupLabelProps, iconProps, inputProps, itemProps, listProps, separatorProps, statusProps };

package/dist/components/combobox/combobox.props.js

@@ -0,0 +1,79 @@
+import { COMBOBOX_SLOTS } from "./combobox.slots.js";
+//#region src/components/combobox/combobox.props.ts
+/**
+* The D12 unified variant contract for Combobox — a per-part set of `props(...)` builders that each
+* return a **spreadable props object** of the form `{ "data-slot": "noctis-combobox-<part>",
+* ...dataAttrs }`, derived from the part's variant/state inputs.
+*
+* Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `combobox.css` keys every rule off it — so spreading a part's `props()` onto a *foreign* element
+* styles it as that part:
+*
+*     <li {...Combobox.Item.props({ selected: true, highlighted: true })}>Banana</li>
+*     // → <li data-slot="noctis-combobox-item" data-selected="" data-highlighted="">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same variant→data-attribute→values mapping is
+* emitted as data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React
+* / agent consumers can hand-write the markup from the docs.
+*/
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Input prop bag: slot anchor plus the `data-size` the field's metrics re-point off and the invalid state. */
+function inputProps({ size = "md", invalid, className } = {}) {
+	return withClassName({
+		"data-slot": COMBOBOX_SLOTS.input,
+		"data-size": size,
+		"data-invalid": flag(invalid)
+	}, className);
+}
+/** Chips-input prop bag: the multi-select field shell's slot anchor plus its invalid state. */
+function chipsInputProps({ invalid, className } = {}) {
+	return withClassName({
+		"data-slot": COMBOBOX_SLOTS.chipsInput,
+		"data-invalid": flag(invalid)
+	}, className);
+}
+/** Status prop bag: just the slot anchor (the async live-region message). */
+function statusProps({ className } = {}) {
+	return withClassName({ "data-slot": COMBOBOX_SLOTS.status }, className);
+}
+/** Icon prop bag: just the slot anchor (the leading decorative field icon). */
+function iconProps({ className } = {}) {
+	return withClassName({ "data-slot": COMBOBOX_SLOTS.icon }, className);
+}
+/** Separator prop bag: just the slot anchor (the divider between option groups). */
+function separatorProps({ className } = {}) {
+	return withClassName({ "data-slot": COMBOBOX_SLOTS.separator }, className);
+}
+/** List prop bag: just the slot anchor. */
+function listProps({ className } = {}) {
+	return withClassName({ "data-slot": COMBOBOX_SLOTS.list }, className);
+}
+/** Item prop bag: slot anchor plus the `data-selected`/`data-highlighted`/`data-disabled` state. */
+function itemProps({ selected, highlighted, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": COMBOBOX_SLOTS.item,
+		"data-selected": flag(selected),
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Empty prop bag: just the slot anchor (the centred no-results message). */
+function emptyProps({ className } = {}) {
+	return withClassName({ "data-slot": COMBOBOX_SLOTS.empty }, className);
+}
+/** Group-label prop bag: just the slot anchor. */
+function groupLabelProps({ className } = {}) {
+	return withClassName({ "data-slot": COMBOBOX_SLOTS.groupLabel }, className);
+}
+/** Chip prop bag: just the slot anchor (a multi-select selected-value pill). */
+function chipProps({ className } = {}) {
+	return withClassName({ "data-slot": COMBOBOX_SLOTS.chip }, className);
+}
+//#endregion
+export { chipProps, chipsInputProps, emptyProps, groupLabelProps, iconProps, inputProps, itemProps, listProps, separatorProps, statusProps };

package/dist/components/combobox/combobox.slots.d.ts

@@ -0,0 +1,28 @@
+//#region src/components/combobox/combobox.slots.d.ts
+/**
+ * The `data-*` hooks `Combobox` stamps on its parts, for host-side styling and tests. Slot values
+ * mark each rendered element; the state attributes are emitted by Base UI's Combobox — pair a slot
+ * with a state to target, say, an option row only while it is highlighted.
+ */
+declare enum ComboboxDataAttributes {
+  /** The element's slot — the styling/testing anchor. */
+  slot = "data-slot",
+  /** The control size the input stamps (`sm`/`md`/`lg`); the component layer re-points its metrics off it. */
+  size = "data-size",
+  /** Present on the input (and trigger) while the popup is open. */
+  popupOpen = "data-popup-open",
+  /** Present on the option row the pointer or keyboard is currently over. */
+  highlighted = "data-highlighted",
+  /** Present on a selected option row (and its indicator). */
+  selected = "data-selected",
+  /** Present on a disabled option row. */
+  disabled = "data-disabled",
+  /** Present on the input when its corresponding items list is empty. */
+  listEmpty = "data-list-empty",
+  /** Present on the input/chips-input when the field is invalid (set explicitly or by a `Field`). */
+  invalid = "data-invalid",
+  /** Present on a `Clear` kept mounted while the field holds a value (drives the fade). */
+  visible = "data-visible"
+}
+//#endregion
+export { ComboboxDataAttributes };

package/dist/components/combobox/combobox.slots.js

@@ -0,0 +1,63 @@
+//#region src/components/combobox/combobox.slots.ts
+/**
+* The slot vocabulary every `Combobox` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, prefixed `noctis-combobox-{part}` (the precompiled `combobox.css`
+* keys every rule off these anchors); SLOTS.md still generates from the token-graph declarations.
+*
+* `inputGroup`, `trigger`, `icon`, `spinner`, `clear`, `positioner`, `content`, `status`, `group`,
+* `chipsInput`, `chips`, `chipRemove`, `separator`, and `itemMatch` are styling-only anchors (the
+* field shell, the open/clear/loading affordances, the popup wrapper, the async status region, the
+* multi-select chip controls, the group divider, and the match highlight) — they carry no token
+* mints, so they live here but not in the token-graph anatomy.
+*/
+const COMBOBOX_SLOTS = {
+	input: "noctis-combobox-input",
+	inputGroup: "noctis-combobox-input-group",
+	chipsInput: "noctis-combobox-chips-input",
+	trigger: "noctis-combobox-trigger",
+	icon: "noctis-combobox-icon",
+	spinner: "noctis-combobox-spinner",
+	clear: "noctis-combobox-clear",
+	positioner: "noctis-combobox-positioner",
+	content: "noctis-combobox-content",
+	status: "noctis-combobox-status",
+	list: "noctis-combobox-list",
+	item: "noctis-combobox-item",
+	itemIndicator: "noctis-combobox-item-indicator",
+	itemMatch: "noctis-combobox-item-match",
+	empty: "noctis-combobox-empty",
+	group: "noctis-combobox-group",
+	groupLabel: "noctis-combobox-group-label",
+	separator: "noctis-combobox-separator",
+	chips: "noctis-combobox-chips",
+	chip: "noctis-combobox-chip",
+	chipRemove: "noctis-combobox-chip-remove"
+};
+/**
+* The `data-*` hooks `Combobox` stamps on its parts, for host-side styling and tests. Slot values
+* mark each rendered element; the state attributes are emitted by Base UI's Combobox — pair a slot
+* with a state to target, say, an option row only while it is highlighted.
+*/
+let ComboboxDataAttributes = /* @__PURE__ */ function(ComboboxDataAttributes) {
+	/** The element's slot — the styling/testing anchor. */
+	ComboboxDataAttributes["slot"] = "data-slot";
+	/** The control size the input stamps (`sm`/`md`/`lg`); the component layer re-points its metrics off it. */
+	ComboboxDataAttributes["size"] = "data-size";
+	/** Present on the input (and trigger) while the popup is open. */
+	ComboboxDataAttributes["popupOpen"] = "data-popup-open";
+	/** Present on the option row the pointer or keyboard is currently over. */
+	ComboboxDataAttributes["highlighted"] = "data-highlighted";
+	/** Present on a selected option row (and its indicator). */
+	ComboboxDataAttributes["selected"] = "data-selected";
+	/** Present on a disabled option row. */
+	ComboboxDataAttributes["disabled"] = "data-disabled";
+	/** Present on the input when its corresponding items list is empty. */
+	ComboboxDataAttributes["listEmpty"] = "data-list-empty";
+	/** Present on the input/chips-input when the field is invalid (set explicitly or by a `Field`). */
+	ComboboxDataAttributes["invalid"] = "data-invalid";
+	/** Present on a `Clear` kept mounted while the field holds a value (drives the fade). */
+	ComboboxDataAttributes["visible"] = "data-visible";
+	return ComboboxDataAttributes;
+}({});
+//#endregion
+export { COMBOBOX_SLOTS, ComboboxDataAttributes };

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,2 @@
+import { Combobox } from "./combobox.js";
+import { ComboboxDataAttributes } from "./combobox.slots.js";

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,254 @@
+import { checkboxItemProps, groupLabelProps, groupProps, itemProps, linkItemProps, radioGroupProps, radioItemProps, separatorProps, shortcutProps, submenuTriggerProps } from "../menu/menu.props.js";
+import { context_menu_d_exports } from "../../primitives/context-menu.js";
+import { Menu } from "../menu/menu.js";
+import { ContextMenuPartProps, contentProps, triggerProps } from "./context-menu.props.js";
+import { ReactElement } from "react";
+
+//#region src/components/context-menu/context-menu.d.ts
+/**
+ * Owns the open state and shares it with the trigger and content. Wraps Base UI's ContextMenu, which is
+ * **always modal** — while open, page scroll is locked and outside content is inert. Unlike `Menu` there
+ * is no non-modal variant: Base UI deliberately ignores `modal` on a context menu (its `parent.type` is
+ * always `"context-menu"`, so `MenuRoot` discards `modalProp` and warns). Opens at the pointer on
+ * right-click; the menu replaces the browser's native context menu inside the trigger area.
+ *
+ * The scroll lock reserves the scrollbar gutter (`scrollbar-gutter: stable` on `<html>`) as it hides the
+ * bar, so content does not shift. If the disappearing bar still bothers you, reserve the gutter app-wide
+ * (`html { scrollbar-gutter: stable both-edges; }`) and the page looks identical with the menu open.
+ *
+ * Useful passthrough knobs on `ContextMenu.Root.Props` (all forwarded to Base UI):
+ * - `disabled` — suppress the menu on a region so the browser's native menu shows instead.
+ * - `onOpenChangeComplete` — fires after the open/close transition settles.
+ * - `closeParentOnEsc` — when nested, also close the parent menu on `Escape` (default `false`).
+ */
+declare function ContextMenuRoot(props: ContextMenu.Root.Props): ReactElement;
+/**
+ * Owns a nested submenu's open state. Renders no element — wrap a `SubmenuTrigger` and a `Content`.
+ *
+ * Wraps `BaseContextMenu.SubmenuRoot`, which is the *same underlying primitive* as `BaseMenu.SubmenuRoot`
+ * — Base UI's `context-menu` entrypoint only authors its own `Root`/`Trigger` and re-exports every other
+ * part (SubmenuRoot included) straight from `menu`. Sourcing it from the context-menu namespace keeps the
+ * coupling explicit so it can't silently break if the two ever diverge.
+ */
+declare function ContextMenuSubmenuRoot(props: ContextMenu.SubmenuRoot.Props): ReactElement;
+/**
+ * The area that opens the menu on right-click (or long-press on touch). Renders a `<div>` by default;
+ * compose any element through `render` (e.g. a card or a region) — the whole area captures the
+ * contextmenu gesture and suppresses the browser's native menu.
+ *
+ * Focusable by default (`tabIndex={0}`) so a keyboard-only user can reach it and open the menu with
+ * **Shift+F10 / the Menu key** — a context menu must never be the sole entry point to an action, and an
+ * unfocusable trigger would make it exactly that. Pass `tabIndex={-1}` to drop it out of the tab order,
+ * or `tabIndex={undefined}` to clear the default entirely and defer to a focusable `render` element
+ * (a `Button`, a link) whose own focus behaviour then stands.
+ *
+ * `context-menu.css` gives the slot a `:focus-visible` ring and a stable state seam: Base UI stamps
+ * `data-pressed` while a touch long-press registers (painted with a neutral instant tint) and
+ * `data-popup-open` while the menu is open (an off-by-default "armed" hook a host can opt into). The
+ * trigger still ships visually neutral — no border or background — so apps style it however they like.
+ */
+declare function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenu.Trigger.Props): ReactElement;
+/**
+ * The floating menu surface — portaled, elevated, and animated — holding the items, groups, and
+ * separators. Opens at the pointer position, flipping to stay on screen, and caps at the available
+ * viewport height, scrolling its list while keeping the keyboard highlight in view.
+ */
+declare function ContextMenuContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  className,
+  style,
+  children,
+  ...props
+}: ContextMenu.Content.Props): ReactElement;
+/**
+ * A right-click (context) menu: a `Trigger` area opens a floating list of actions at the pointer.
+ * Built on Base UI's ContextMenu for keyboard navigation (arrows, Home/End, typeahead), focus
+ * management, and `Escape`/outside-click dismissal — it suppresses the browser's native menu inside
+ * the trigger area and replaces it with the elevated Noctis surface.
+ *
+ * Compose from parts: `ContextMenu.Root` owns the open state, `ContextMenu.Trigger` is the area that
+ * captures the right-click, and `ContextMenu.Content` holds the rows. The row family is shared with
+ * `Menu` — `Item`s, `CheckboxItem`s, `RadioGroup`/`RadioItem`s, `Group`s with a `GroupLabel`,
+ * `Separator`s, nested `SubmenuRoot`/`SubmenuTrigger`, and trailing `Shortcut` hints — so a context
+ * menu reads identically to a dropdown menu. Noctis menus are flush against their anchor — there is no
+ * arrow/caret part.
+ *
+ * Styling is precompiled in `context-menu.css` (the popup) and `menu.css` (the shared rows), keyed off
+ * each part's prefixed `data-slot`. The own parts also carry the D12 `props()` escape hatch via
+ * `Object.assign` (e.g. `ContextMenu.Trigger.props()`), returning a spreadable
+ * `{ "data-slot": "noctis-context-menu-<part>", ...dataAttrs }` bag for a foreign element a
+ * `<ContextMenu.*>` can't wrap.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `ContextMenu` namespace — e.g. `ContextMenu.Item.Props`.
+ */
+declare const ContextMenu: {
+  Root: typeof ContextMenuRoot;
+  Trigger: typeof ContextMenuTrigger & {
+    props: typeof triggerProps;
+  };
+  Content: typeof ContextMenuContent & {
+    props: typeof contentProps;
+  };
+  Group: (({
+    className,
+    ...props
+  }: Menu.Group.Props) => ReactElement) & {
+    props: typeof groupProps;
+  };
+  GroupLabel: (({
+    className,
+    ...props
+  }: Menu.GroupLabel.Props) => ReactElement) & {
+    props: typeof groupLabelProps;
+  };
+  Item: (({
+    icon,
+    inset,
+    tone,
+    className,
+    children,
+    ...props
+  }: Menu.Item.Props) => ReactElement) & {
+    props: typeof itemProps;
+  };
+  LinkItem: (({
+    icon,
+    inset,
+    tone,
+    closeOnClick,
+    className,
+    children,
+    ...props
+  }: Menu.LinkItem.Props) => ReactElement) & {
+    props: typeof linkItemProps;
+  };
+  CheckboxItem: (({
+    className,
+    children,
+    ...props
+  }: Menu.CheckboxItem.Props) => ReactElement) & {
+    props: typeof checkboxItemProps;
+  };
+  RadioGroup: (({
+    className,
+    ...props
+  }: Menu.RadioGroup.Props) => ReactElement) & {
+    props: typeof radioGroupProps;
+  };
+  RadioItem: (({
+    className,
+    children,
+    ...props
+  }: Menu.RadioItem.Props) => ReactElement) & {
+    props: typeof radioItemProps;
+  };
+  SubmenuRoot: typeof ContextMenuSubmenuRoot;
+  SubmenuTrigger: (({
+    icon,
+    inset,
+    openOnHover,
+    delay,
+    closeDelay,
+    className,
+    children,
+    ...props
+  }: Menu.SubmenuTrigger.Props) => ReactElement) & {
+    props: typeof submenuTriggerProps;
+  };
+  Shortcut: (({
+    keys,
+    className,
+    children
+  }: Menu.Shortcut.Props) => ReactElement) & {
+    props: typeof shortcutProps;
+  };
+  Separator: (({
+    className,
+    ...props
+  }: Menu.Separator.Props) => ReactElement) & {
+    props: typeof separatorProps;
+  };
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only —
+ * it emits no runtime code and merges with the `ContextMenu` object above, so `ContextMenu.Item` is
+ * the component value while `ContextMenu.Item.Props` is its prop type. The shared row parts re-expose
+ * `Menu`'s types so the two overlays stay one contract.
+ */
+declare namespace ContextMenu {
+  /** The spreadable data-attribute prop bag every own `ContextMenu.*.props()` returns (D12). */
+  type PartProps = ContextMenuPartProps;
+  namespace Root {
+    type Props = context_menu_d_exports.ContextMenu.Root.Props;
+    type State = context_menu_d_exports.ContextMenu.Root.State;
+  }
+  namespace Trigger {
+    type Props = context_menu_d_exports.ContextMenu.Trigger.Props;
+    type State = context_menu_d_exports.ContextMenu.Trigger.State;
+  }
+  namespace Content {
+    type Props = context_menu_d_exports.ContextMenu.Popup.Props & {
+      /**
+       * Which side of the pointer anchor to open on, before collision flipping keeps it on screen.
+       * Inside a `SubmenuRoot` the default becomes `"inline-end"` — beside the trigger row.
+       * @default "bottom"
+       */
+      side?: context_menu_d_exports.ContextMenu.Positioner.Props["side"];
+      /**
+       * Alignment along that side.
+       * @default "start"
+       */
+      align?: context_menu_d_exports.ContextMenu.Positioner.Props["align"]; /** Gap from the anchor, in px. */
+      sideOffset?: number; /** Shift along the alignment axis, in px. */
+      alignOffset?: number;
+      /**
+       * Minimum space kept from the viewport edge when avoiding collisions, in px.
+       * @default 8
+       */
+      collisionPadding?: context_menu_d_exports.ContextMenu.Positioner.Props["collisionPadding"];
+    };
+  }
+  namespace Group {
+    type Props = Menu.Group.Props;
+  }
+  namespace GroupLabel {
+    type Props = Menu.GroupLabel.Props;
+  }
+  namespace Item {
+    type Props = Menu.Item.Props;
+  }
+  namespace LinkItem {
+    type Props = Menu.LinkItem.Props;
+  }
+  namespace CheckboxItem {
+    type Props = Menu.CheckboxItem.Props;
+  }
+  namespace RadioGroup {
+    type Props = Menu.RadioGroup.Props;
+  }
+  namespace RadioItem {
+    type Props = Menu.RadioItem.Props;
+  }
+  namespace SubmenuRoot {
+    type Props = Menu.SubmenuRoot.Props;
+  }
+  namespace SubmenuTrigger {
+    type Props = Menu.SubmenuTrigger.Props;
+  }
+  namespace Shortcut {
+    type Props = Menu.Shortcut.Props;
+  }
+  namespace Separator {
+    type Props = Menu.Separator.Props;
+  }
+}
+//#endregion
+export { ContextMenu };

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

@@ -0,0 +1,150 @@
+"use client";
+import { Surface } from "../surface/surface.js";
+import { context_menu_exports } from "../../primitives/context-menu.js";
+import { Menu } from "../menu/menu.js";
+import { CONTEXT_MENU_SLOTS } from "./context-menu.slots.js";
+import { contentProps, triggerProps } from "./context-menu.props.js";
+import { createContext, useContext } from "react";
+import clsx$1 from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/context-menu/context-menu.tsx
+/**
+* Marks the subtree of a `ContextMenu.SubmenuRoot`, so a nested `Content` switches to submenu
+* positioning defaults (`side="inline-end"`, flush and row-aligned to its trigger) without the caller
+* wiring it — mirroring the dropdown `Menu`'s submenu behaviour.
+*/
+const SubmenuLevelContext = createContext(false);
+/**
+* Owns the open state and shares it with the trigger and content. Wraps Base UI's ContextMenu, which is
+* **always modal** — while open, page scroll is locked and outside content is inert. Unlike `Menu` there
+* is no non-modal variant: Base UI deliberately ignores `modal` on a context menu (its `parent.type` is
+* always `"context-menu"`, so `MenuRoot` discards `modalProp` and warns). Opens at the pointer on
+* right-click; the menu replaces the browser's native context menu inside the trigger area.
+*
+* The scroll lock reserves the scrollbar gutter (`scrollbar-gutter: stable` on `<html>`) as it hides the
+* bar, so content does not shift. If the disappearing bar still bothers you, reserve the gutter app-wide
+* (`html { scrollbar-gutter: stable both-edges; }`) and the page looks identical with the menu open.
+*
+* Useful passthrough knobs on `ContextMenu.Root.Props` (all forwarded to Base UI):
+* - `disabled` — suppress the menu on a region so the browser's native menu shows instead.
+* - `onOpenChangeComplete` — fires after the open/close transition settles.
+* - `closeParentOnEsc` — when nested, also close the parent menu on `Escape` (default `false`).
+*/
+function ContextMenuRoot(props) {
+	return /* @__PURE__ */ jsx(context_menu_exports.ContextMenu.Root, { ...props });
+}
+/**
+* Owns a nested submenu's open state. Renders no element — wrap a `SubmenuTrigger` and a `Content`.
+*
+* Wraps `BaseContextMenu.SubmenuRoot`, which is the *same underlying primitive* as `BaseMenu.SubmenuRoot`
+* — Base UI's `context-menu` entrypoint only authors its own `Root`/`Trigger` and re-exports every other
+* part (SubmenuRoot included) straight from `menu`. Sourcing it from the context-menu namespace keeps the
+* coupling explicit so it can't silently break if the two ever diverge.
+*/
+function ContextMenuSubmenuRoot(props) {
+	return /* @__PURE__ */ jsx(SubmenuLevelContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx(context_menu_exports.ContextMenu.SubmenuRoot, { ...props })
+	});
+}
+/**
+* The area that opens the menu on right-click (or long-press on touch). Renders a `<div>` by default;
+* compose any element through `render` (e.g. a card or a region) — the whole area captures the
+* contextmenu gesture and suppresses the browser's native menu.
+*
+* Focusable by default (`tabIndex={0}`) so a keyboard-only user can reach it and open the menu with
+* **Shift+F10 / the Menu key** — a context menu must never be the sole entry point to an action, and an
+* unfocusable trigger would make it exactly that. Pass `tabIndex={-1}` to drop it out of the tab order,
+* or `tabIndex={undefined}` to clear the default entirely and defer to a focusable `render` element
+* (a `Button`, a link) whose own focus behaviour then stands.
+*
+* `context-menu.css` gives the slot a `:focus-visible` ring and a stable state seam: Base UI stamps
+* `data-pressed` while a touch long-press registers (painted with a neutral instant tint) and
+* `data-popup-open` while the menu is open (an off-by-default "armed" hook a host can opt into). The
+* trigger still ships visually neutral — no border or background — so apps style it however they like.
+*/
+function ContextMenuTrigger({ className, ...props }) {
+	const tabIndex = "tabIndex" in props ? props.tabIndex : 0;
+	return /* @__PURE__ */ jsx(context_menu_exports.ContextMenu.Trigger, {
+		"data-slot": CONTEXT_MENU_SLOTS.trigger,
+		tabIndex,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* The floating menu surface — portaled, elevated, and animated — holding the items, groups, and
+* separators. Opens at the pointer position, flipping to stay on screen, and caps at the available
+* viewport height, scrolling its list while keeping the keyboard highlight in view.
+*/
+function ContextMenuContent({ side, align = "start", sideOffset, alignOffset, collisionPadding = 8, className, style, children, ...props }) {
+	const inSubmenu = useContext(SubmenuLevelContext);
+	return /* @__PURE__ */ jsx(context_menu_exports.ContextMenu.Portal, { children: /* @__PURE__ */ jsx(context_menu_exports.ContextMenu.Positioner, {
+		side: side ?? (inSubmenu ? "inline-end" : "bottom"),
+		align,
+		sideOffset: sideOffset ?? (inSubmenu ? 0 : void 0),
+		alignOffset: alignOffset ?? (inSubmenu ? -4 : void 0),
+		collisionPadding,
+		"data-slot": CONTEXT_MENU_SLOTS.positioner,
+		children: /* @__PURE__ */ jsx(context_menu_exports.ContextMenu.Popup, {
+			"data-slot": CONTEXT_MENU_SLOTS.content,
+			render: /* @__PURE__ */ jsx(Surface, {
+				elevation: "menu",
+				bordered: true,
+				shadow: "popover"
+			}),
+			style: {
+				transformOrigin: "var(--transform-origin)",
+				maxHeight: "var(--available-height)",
+				...style
+			},
+			className: clsx$1(className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": CONTEXT_MENU_SLOTS.viewport,
+				"data-custom-scrollbar": true,
+				children
+			})
+		})
+	}) });
+}
+/**
+* A right-click (context) menu: a `Trigger` area opens a floating list of actions at the pointer.
+* Built on Base UI's ContextMenu for keyboard navigation (arrows, Home/End, typeahead), focus
+* management, and `Escape`/outside-click dismissal — it suppresses the browser's native menu inside
+* the trigger area and replaces it with the elevated Noctis surface.
+*
+* Compose from parts: `ContextMenu.Root` owns the open state, `ContextMenu.Trigger` is the area that
+* captures the right-click, and `ContextMenu.Content` holds the rows. The row family is shared with
+* `Menu` — `Item`s, `CheckboxItem`s, `RadioGroup`/`RadioItem`s, `Group`s with a `GroupLabel`,
+* `Separator`s, nested `SubmenuRoot`/`SubmenuTrigger`, and trailing `Shortcut` hints — so a context
+* menu reads identically to a dropdown menu. Noctis menus are flush against their anchor — there is no
+* arrow/caret part.
+*
+* Styling is precompiled in `context-menu.css` (the popup) and `menu.css` (the shared rows), keyed off
+* each part's prefixed `data-slot`. The own parts also carry the D12 `props()` escape hatch via
+* `Object.assign` (e.g. `ContextMenu.Trigger.props()`), returning a spreadable
+* `{ "data-slot": "noctis-context-menu-<part>", ...dataAttrs }` bag for a foreign element a
+* `<ContextMenu.*>` can't wrap.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `ContextMenu` namespace — e.g. `ContextMenu.Item.Props`.
+*/
+const ContextMenu = {
+	Root: ContextMenuRoot,
+	Trigger: Object.assign(ContextMenuTrigger, { props: triggerProps }),
+	Content: Object.assign(ContextMenuContent, { props: contentProps }),
+	Group: Menu.Group,
+	GroupLabel: Menu.GroupLabel,
+	Item: Menu.Item,
+	LinkItem: Menu.LinkItem,
+	CheckboxItem: Menu.CheckboxItem,
+	RadioGroup: Menu.RadioGroup,
+	RadioItem: Menu.RadioItem,
+	SubmenuRoot: ContextMenuSubmenuRoot,
+	SubmenuTrigger: Menu.SubmenuTrigger,
+	Shortcut: Menu.Shortcut,
+	Separator: Menu.Separator
+};
+//#endregion
+export { ContextMenu };