@stridge/noctis 1.0.0-beta.0

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

@@ -0,0 +1,51 @@
+import { InputAdornmentSide, InputAdornmentVariant, InputSize } from "./input.types.js";
+
+//#region src/components/input/input.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Input.*.props()` returns. */
+type InputPartProps = {
+  /** The slot value the matching `input.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;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Input.Root.props(...)` — the shell's size + validity, stamped on the slot the CSS keys metrics off. */
+interface InputRootPropsArgs extends BasePropsArgs {
+  /** Field height/padding/text scale. @default "md" */
+  size?: InputSize;
+  /** Shell-only override: force the invalid border via `data-invalid` (the default path reads the control). */
+  invalid?: boolean;
+  /** Shell-only override: force the disabled affordance via `data-disabled` (the default path reads the control). */
+  disabled?: boolean;
+}
+/** Argument to `Input.Adornment.props(...)` — which edge the adornment sits on and how it paints. */
+interface InputAdornmentPropsArgs extends BasePropsArgs {
+  /** Which edge the adornment sits on — leading (`start`) or trailing (`end`). @default "start" */
+  side?: InputAdornmentSide;
+  /** How the adornment paints — `quiet` (default) or a bordered `segment` cell. @default "quiet" */
+  variant?: InputAdornmentVariant;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own; look flows from the root. */
+type InputControlPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-size` and the `data-invalid`/`data-disabled` shell overrides. */
+declare function rootProps({
+  size,
+  invalid,
+  disabled,
+  className
+}?: InputRootPropsArgs): InputPartProps;
+/** Control prop bag: just the slot anchor (the editable input; metrics flow from the root). */
+declare function controlProps({
+  className
+}?: InputControlPropsArgs): InputPartProps;
+/** Adornment prop bag: slot anchor plus the `data-side` edge and the `data-variant` paint. */
+declare function adornmentProps({
+  side,
+  variant,
+  className
+}?: InputAdornmentPropsArgs): InputPartProps;
+//#endregion
+export { InputAdornmentPropsArgs, InputPartProps, InputRootPropsArgs, adornmentProps, controlProps, rootProps };

package/dist/components/input/input.props.js

@@ -0,0 +1,50 @@
+import { INPUT_SLOTS } from "./input.slots.js";
+//#region src/components/input/input.props.ts
+/**
+* The D12 unified variant contract for Input — each compound part exposes a `props(...)` builder
+* returning a **spreadable props object** of the form `{ "data-slot": "noctis-input-<part>",
+* ...dataAttrs }`, derived from the part's size/state inputs. Under the single-`data-slot` anchor model
+* `input.css` keys every rule off the slot the bag carries, so spreading a part's `props()` onto a
+* *foreign* element styles it as that part:
+*
+*     <div {...Input.Root.props({ size: "lg", invalid: true })}>
+*       <input {...Input.Control.props()} />
+*       <button {...Input.Action.props({ side: "end" })} />
+*     </div>
+*     // → <div data-slot="noctis-input" data-size="lg" data-invalid="">…
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. Inputs are typed from the public `InputSize` /
+* `InputAdornmentSide` / `InputAdornmentVariant`. The same size→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
+};
+/** Root prop bag: `data-slot` plus the `data-size` and the `data-invalid`/`data-disabled` shell overrides. */
+function rootProps({ size = "md", invalid, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": INPUT_SLOTS.root,
+		"data-size": size,
+		"data-invalid": flag(invalid),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Control prop bag: just the slot anchor (the editable input; metrics flow from the root). */
+function controlProps({ className } = {}) {
+	return withClassName({ "data-slot": INPUT_SLOTS.control }, className);
+}
+/** Adornment prop bag: slot anchor plus the `data-side` edge and the `data-variant` paint. */
+function adornmentProps({ side = "start", variant = "quiet", className } = {}) {
+	return withClassName({
+		"data-slot": INPUT_SLOTS.adornment,
+		"data-side": side,
+		"data-variant": variant
+	}, className);
+}
+//#endregion
+export { adornmentProps, controlProps, rootProps };

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

@@ -0,0 +1,35 @@
+//#region src/components/input/input.slots.d.ts
+/**
+ * The data attributes the {@link Input} (and the Base UI input it renders) expose for styling and
+ * testing. Each member's value is the attribute name and its JSDoc is the description; the docs API
+ * reference reads this enum directly, so the documented attributes can't drift from the component.
+ *
+ * The shell's look is keyed off the root `data-slot="noctis-input"` plus `data-size`. State flows
+ * from the editable control: the shell reads the control's Base-UI/Field `data-invalid`,
+ * `data-disabled`, `data-readonly`, `data-filled`, and `data-dirty` through `:has()`, so there is one
+ * source of truth. The matching `data-invalid`/`data-disabled` on the root stay as additive
+ * shell-only override escape hatches. Focus is calm and ring-less: it shifts the border to the focus
+ * role (itself the accent focus-ring colour) so the indicator stays visible without a surrounding ring.
+ */
+declare enum InputDataAttributes {
+  /** The rendered element of a given part (root shell, control, or adornment). */
+  slot = "data-slot",
+  /** The size scale — `sm` | `md` | `lg`; the generated layer keys the per-size internals off it. */
+  size = "data-size",
+  /** Which edge an adornment sits on — `start` (leading) | `end` (trailing). */
+  side = "data-side",
+  /** How an adornment paints — `quiet` (default) | `segment` (a bordered cell flush to the field edge). */
+  variant = "data-variant",
+  /** Present when the field is in an invalid state — set by Base UI/Field on the control, or by the root override. */
+  invalid = "data-invalid",
+  /** Present when the field is disabled — set by Base UI on the control, or by the root override. */
+  disabled = "data-disabled",
+  /** Present when the field is read-only — set by Base UI on the control; the shell mutes the border and skips the focus fill. */
+  readonly = "data-readonly",
+  /** Present (on the control) when the field holds a value — gates the clear action's visibility. */
+  filled = "data-filled",
+  /** Present (on the control) when the value has changed from its initial — swaps the ⌘K chip to Esc. */
+  dirty = "data-dirty"
+}
+//#endregion
+export { InputDataAttributes };

package/dist/components/input/input.slots.js

@@ -0,0 +1,46 @@
+//#region src/components/input/input.slots.ts
+/**
+* The slot vocabulary every `Input` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix; SLOTS.md
+* still generates from the token-graph declarations.
+*/
+const INPUT_SLOTS = {
+	root: "noctis-input",
+	control: "noctis-input-control",
+	adornment: "noctis-input-adornment"
+};
+/**
+* The data attributes the {@link Input} (and the Base UI input it renders) expose for styling and
+* testing. Each member's value is the attribute name and its JSDoc is the description; the docs API
+* reference reads this enum directly, so the documented attributes can't drift from the component.
+*
+* The shell's look is keyed off the root `data-slot="noctis-input"` plus `data-size`. State flows
+* from the editable control: the shell reads the control's Base-UI/Field `data-invalid`,
+* `data-disabled`, `data-readonly`, `data-filled`, and `data-dirty` through `:has()`, so there is one
+* source of truth. The matching `data-invalid`/`data-disabled` on the root stay as additive
+* shell-only override escape hatches. Focus is calm and ring-less: it shifts the border to the focus
+* role (itself the accent focus-ring colour) so the indicator stays visible without a surrounding ring.
+*/
+let InputDataAttributes = /* @__PURE__ */ function(InputDataAttributes) {
+	/** The rendered element of a given part (root shell, control, or adornment). */
+	InputDataAttributes["slot"] = "data-slot";
+	/** The size scale — `sm` | `md` | `lg`; the generated layer keys the per-size internals off it. */
+	InputDataAttributes["size"] = "data-size";
+	/** Which edge an adornment sits on — `start` (leading) | `end` (trailing). */
+	InputDataAttributes["side"] = "data-side";
+	/** How an adornment paints — `quiet` (default) | `segment` (a bordered cell flush to the field edge). */
+	InputDataAttributes["variant"] = "data-variant";
+	/** Present when the field is in an invalid state — set by Base UI/Field on the control, or by the root override. */
+	InputDataAttributes["invalid"] = "data-invalid";
+	/** Present when the field is disabled — set by Base UI on the control, or by the root override. */
+	InputDataAttributes["disabled"] = "data-disabled";
+	/** Present when the field is read-only — set by Base UI on the control; the shell mutes the border and skips the focus fill. */
+	InputDataAttributes["readonly"] = "data-readonly";
+	/** Present (on the control) when the field holds a value — gates the clear action's visibility. */
+	InputDataAttributes["filled"] = "data-filled";
+	/** Present (on the control) when the value has changed from its initial — swaps the ⌘K chip to Esc. */
+	InputDataAttributes["dirty"] = "data-dirty";
+	return InputDataAttributes;
+}({});
+//#endregion
+export { INPUT_SLOTS, InputDataAttributes };

package/dist/components/input/input.types.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/input/input.types.d.ts
+/** Field height/padding/text scale — `md` or `lg`. */
+type InputSize = "md" | "lg";
+/** Which edge an adornment or action sits on — leading (`start`) or trailing (`end`). */
+type InputAdornmentSide = "start" | "end";
+/**
+ * How an adornment paints — a quiet, transparent flank (`quiet`, the default) or a bordered cell
+ * flush to the field edge (`segment`), for prefix/suffix addon groups like `https://` ▸ field ▸ `.com`.
+ */
+type InputAdornmentVariant = "quiet" | "segment";
+//#endregion
+export { InputAdornmentSide, InputAdornmentVariant, InputSize };

package/dist/components/kbd/glyphs.js

@@ -0,0 +1,45 @@
+import { KBD_SLOTS } from "./kbd.slots.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/kbd/glyphs.tsx
+/**
+* The glyph paths, all on a 24×24 grid with their content kept inside roughly the 3–21 box. That inset
+* (≈0.75 of the viewBox) lands the visible mark near the mono font's cap height at the `1em` render
+* size below, so a glyph sits level with the letters beside it. One uniform stroke weight keeps every
+* key the same visual heft.
+*/
+const PATHS = {
+	command: /* @__PURE__ */ jsx("path", { d: "M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z" }),
+	shift: /* @__PURE__ */ jsx("path", { d: "M12 4 4.5 11.5H8.5V18.5H15.5V11.5H19.5Z" }),
+	option: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M4 7h6l8 10h2" }), /* @__PURE__ */ jsx("path", { d: "M14 7h6" })] }),
+	enter: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M9 10 4 15l5 5" }), /* @__PURE__ */ jsx("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })] }),
+	up: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }),
+	down: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" }),
+	left: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }),
+	right: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }),
+	backspace: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M9 5 3 12l6 7h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z" }), /* @__PURE__ */ jsx("path", { d: "M17 9 11 15M11 9l6 6" })] }),
+	tab: /* @__PURE__ */ jsx("path", { d: "M3 12h11M10 8l4 4-4 4M19 6v12" })
+};
+/**
+* A single keyboard glyph, sized in `em` so it tracks the chip's font size (and through it the global
+* `--noctis-seed-font-scale`). Always `aria-hidden` — the spoken key name is rendered visually-hidden beside it by
+* {@link Kbd}. The `data-slot="noctis-kbd-glyph"` anchor carries its `display: inline-block` from
+* `kbd.css`; the `data-kbd-glyph` attribute names the glyph for styling and tests.
+*/
+function KbdGlyph({ name }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": KBD_SLOTS.glyph,
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		"data-kbd-glyph": name,
+		children: PATHS[name]
+	});
+}
+//#endregion
+export { KbdGlyph };

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

@@ -0,0 +1 @@
+import { Kbd } from "./kbd.js";

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,61 @@
+import { chordProps, glyphProps, keyProps, rootProps } from "./kbd.props.js";
+import * as _$react from "react";
+
+//#region src/components/kbd/kbd.d.ts
+/**
+ * A keyboard hint. Every key is its own small cap — a raised, physical key cap on the dedicated `kbd`
+ * shade with a rim and depth shadow — so a chord like `Mod+C` reads as two distinct keys, never a
+ * run-on word. Keys
+ * within a chord sit nearly flush while sequence chords are spaced apart and joined by a
+ * visually-hidden connector ("G then D"), so grouping is legible at a glance. Each cap shows its
+ * glyph or text `aria-hidden` beside a visually-hidden spoken name, so screen readers hear
+ * "Command K" while sighted users see the compact symbols. The markup is the nested-`<kbd>` pattern
+ * (a `<kbd>` of `<kbd>`s, each inner one a real key), and all sizing is `em`-relative so the hint
+ * sits proportionally inside any text and scales with the global `--noctis-seed-font-scale`.
+ *
+ * @see {@link Kbd.Props}
+ */
+declare function KbdComponent({
+  keys,
+  thenLabel,
+  className
+}: Kbd.Props): _$react.JSX.Element;
+/**
+ * A keyboard hint, with per-part D12 `props()` escape hatches attached as namespaced statics. `Kbd` is
+ * the component value; `Kbd.root`/`Kbd.chord`/`Kbd.key`/`Kbd.glyph` each expose a `.props()` builder
+ * returning a spreadable `{ "data-slot": "noctis-kbd-<part>" }` bag for hand-authored markup. Docgen
+ * reads the part descriptions through this `Object.assign`.
+ */
+declare const Kbd: typeof KbdComponent & {
+  /** The hint root. `Kbd.root.props()` → its spreadable slot-anchor prop bag. */root: {
+    props: typeof rootProps;
+  }; /** One chord of nearly-flush keys. `Kbd.chord.props()` → its spreadable prop bag. */
+  chord: {
+    props: typeof chordProps;
+  }; /** One square key cap. `Kbd.key.props()` → its spreadable prop bag. */
+  key: {
+    props: typeof keyProps;
+  }; /** A drawn key glyph. `Kbd.glyph.props()` → its spreadable prop bag. */
+  glyph: {
+    props: typeof glyphProps;
+  };
+};
+/**
+ * Prop types for `Kbd`. Types-only — it emits no runtime code and merges with the `Kbd` function
+ * above, so `Kbd` is the component value while `Kbd.Props` is its prop type.
+ */
+declare namespace Kbd {
+  type Props = {
+    /**
+     * The keybinding to render. Whitespace separates chords in a *sequence* (`"G D"` → press G then D);
+     * `+` joins keys pressed *together* in one chord (`"Mod+K"`). Key ids are case-insensitive and map
+     * to a glyph + spoken name (`Mod`→⌘/Ctrl "Command"/"Control", `Enter`→↵, `ArrowUp`→↑, …); anything
+     * else renders as written.
+     */
+    keys: string; /** The connector announced (visually-hidden) between sequence chords. Defaults to `then`. */
+    thenLabel?: string; /** Merged onto the rendered root's class list. */
+    className?: string;
+  };
+}
+//#endregion
+export { Kbd };

package/dist/components/kbd/kbd.js

@@ -0,0 +1,233 @@
+"use client";
+import { VisuallyHidden } from "../../core/visually-hidden/visually-hidden.js";
+import { KBD_SLOTS } from "./kbd.slots.js";
+import { KbdGlyph } from "./glyphs.js";
+import { chordProps, glyphProps, keyProps, rootProps } from "./kbd.props.js";
+import { useIsApplePlatform } from "./use-apple-platform.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/kbd/kbd.tsx
+/**
+* Key id → token. Modifier and navigation keys resolve to a drawn {@link KbdGlyph} (`aria-hidden`) with
+* a visually-hidden spoken name, so "⌘" is announced as "Command" rather than read as a meaningless
+* symbol. `Mod` is platform-aware (⌘ on Apple, Ctrl elsewhere); `cmd`/`command`/`meta` stay literal ⌘
+* and `ctrl`/`control` stay literal Ctrl, so authors can pin a specific modifier when they need to.
+*/
+const KEY_MAP = {
+	mod: {
+		kind: "mod",
+		label: "Mod"
+	},
+	cmd: {
+		kind: "glyph",
+		glyph: "command",
+		label: "Command"
+	},
+	command: {
+		kind: "glyph",
+		glyph: "command",
+		label: "Command"
+	},
+	meta: {
+		kind: "glyph",
+		glyph: "command",
+		label: "Command"
+	},
+	ctrl: {
+		kind: "text",
+		text: "Ctrl",
+		label: "Control"
+	},
+	control: {
+		kind: "text",
+		text: "Ctrl",
+		label: "Control"
+	},
+	shift: {
+		kind: "glyph",
+		glyph: "shift",
+		label: "Shift"
+	},
+	alt: {
+		kind: "glyph",
+		glyph: "option",
+		label: "Alt"
+	},
+	option: {
+		kind: "glyph",
+		glyph: "option",
+		label: "Option"
+	},
+	enter: {
+		kind: "glyph",
+		glyph: "enter",
+		label: "Enter"
+	},
+	return: {
+		kind: "glyph",
+		glyph: "enter",
+		label: "Enter"
+	},
+	esc: {
+		kind: "text",
+		text: "Esc",
+		label: "Escape"
+	},
+	escape: {
+		kind: "text",
+		text: "Esc",
+		label: "Escape"
+	},
+	up: {
+		kind: "glyph",
+		glyph: "up",
+		label: "Up arrow"
+	},
+	arrowup: {
+		kind: "glyph",
+		glyph: "up",
+		label: "Up arrow"
+	},
+	down: {
+		kind: "glyph",
+		glyph: "down",
+		label: "Down arrow"
+	},
+	arrowdown: {
+		kind: "glyph",
+		glyph: "down",
+		label: "Down arrow"
+	},
+	left: {
+		kind: "glyph",
+		glyph: "left",
+		label: "Left arrow"
+	},
+	arrowleft: {
+		kind: "glyph",
+		glyph: "left",
+		label: "Left arrow"
+	},
+	right: {
+		kind: "glyph",
+		glyph: "right",
+		label: "Right arrow"
+	},
+	arrowright: {
+		kind: "glyph",
+		glyph: "right",
+		label: "Right arrow"
+	},
+	backspace: {
+		kind: "glyph",
+		glyph: "backspace",
+		label: "Backspace"
+	},
+	delete: {
+		kind: "glyph",
+		glyph: "backspace",
+		label: "Delete"
+	},
+	tab: {
+		kind: "glyph",
+		glyph: "tab",
+		label: "Tab"
+	},
+	space: {
+		kind: "text",
+		text: "Space",
+		label: "Space"
+	}
+};
+function resolveKey(raw) {
+	const key = raw.trim();
+	const mapped = KEY_MAP[key.toLowerCase()];
+	if (mapped) return mapped;
+	if (key.length === 1) return {
+		kind: "text",
+		text: key.toUpperCase(),
+		label: key.toLowerCase()
+	};
+	return {
+		kind: "text",
+		text: key,
+		label: key
+	};
+}
+/** A stable key for a chord, derived from its tokens. */
+function chordKey(chord) {
+	return chord.map((token) => token.kind === "glyph" ? token.glyph : token.kind === "mod" ? "mod" : token.text).join("+");
+}
+/**
+* One key as its own cap: a physical key cap on the dedicated `kbd` shade — a `kbd-border` rim over a
+* layered depth shadow (top sheen, bottom lip, floor shadow) — holding the key's glyph or text
+* (`aria-hidden`) plus the spoken name for screen readers. Every metric is em-relative so the cap and
+* its depth track its own font size (and the global `--noctis-seed-font-scale`); a rem-based scale
+* wouldn't follow. The metrics flow through the `--_kbd-key-*` slot internals (read by `kbd.css`),
+* whose values the generated component layer resolves through the public `--noctis-kbd-key-*` override
+* tokens.
+*/
+function KeyCap({ token, isApple }) {
+	const resolved = token.kind === "mod" ? isApple ? {
+		kind: "glyph",
+		glyph: "command",
+		label: "Command"
+	} : {
+		kind: "text",
+		text: "Ctrl",
+		label: "Control"
+	} : token;
+	return /* @__PURE__ */ jsxs("kbd", {
+		"data-slot": KBD_SLOTS.key,
+		children: [resolved.kind === "glyph" ? /* @__PURE__ */ jsx(KbdGlyph, { name: resolved.glyph }) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: resolved.text
+		}), /* @__PURE__ */ jsx(VisuallyHidden, { children: resolved.label })]
+	});
+}
+/**
+* A keyboard hint. Every key is its own small cap — a raised, physical key cap on the dedicated `kbd`
+* shade with a rim and depth shadow — so a chord like `Mod+C` reads as two distinct keys, never a
+* run-on word. Keys
+* within a chord sit nearly flush while sequence chords are spaced apart and joined by a
+* visually-hidden connector ("G then D"), so grouping is legible at a glance. Each cap shows its
+* glyph or text `aria-hidden` beside a visually-hidden spoken name, so screen readers hear
+* "Command K" while sighted users see the compact symbols. The markup is the nested-`<kbd>` pattern
+* (a `<kbd>` of `<kbd>`s, each inner one a real key), and all sizing is `em`-relative so the hint
+* sits proportionally inside any text and scales with the global `--noctis-seed-font-scale`.
+*
+* @see {@link Kbd.Props}
+*/
+function KbdComponent({ keys, thenLabel = "then", className }) {
+	const isApple = useIsApplePlatform();
+	const chords = keys.trim().split(/\s+/).filter(Boolean).map((chord) => chord.split("+").filter(Boolean).map(resolveKey));
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": KBD_SLOTS.root,
+		className,
+		children: chords.map((chord, chordIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [chordIndex > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: ` ${thenLabel} ` }), /* @__PURE__ */ jsx("span", {
+			"data-slot": KBD_SLOTS.chord,
+			children: chord.map((token, keyIndex) => /* @__PURE__ */ jsx(KeyCap, {
+				token,
+				isApple
+			}, `${chordKey([token])}-${keyIndex}`))
+		})] }, `${chordKey(chord)}-${chordIndex}`))
+	});
+}
+/**
+* A keyboard hint, with per-part D12 `props()` escape hatches attached as namespaced statics. `Kbd` is
+* the component value; `Kbd.root`/`Kbd.chord`/`Kbd.key`/`Kbd.glyph` each expose a `.props()` builder
+* returning a spreadable `{ "data-slot": "noctis-kbd-<part>" }` bag for hand-authored markup. Docgen
+* reads the part descriptions through this `Object.assign`.
+*/
+const Kbd = Object.assign(KbdComponent, {
+	/** The hint root. `Kbd.root.props()` → its spreadable slot-anchor prop bag. */
+	root: { props: rootProps },
+	/** One chord of nearly-flush keys. `Kbd.chord.props()` → its spreadable prop bag. */
+	chord: { props: chordProps },
+	/** One square key cap. `Kbd.key.props()` → its spreadable prop bag. */
+	key: { props: keyProps },
+	/** A drawn key glyph. `Kbd.glyph.props()` → its spreadable prop bag. */
+	glyph: { props: glyphProps }
+});
+//#endregion
+export { Kbd };

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

@@ -0,0 +1,30 @@
+//#region src/components/kbd/kbd.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Kbd.*.props()` returns. */
+type KbdPartProps = {
+  /** The slot value the matching `kbd.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;
+};
+/** Argument to a `Kbd.*.props(...)` helper — no variants/state of its own, just an optional class. */
+interface KbdPartPropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Root prop bag: the slot anchor for the hint row. */
+declare function rootProps({
+  className
+}?: KbdPartPropsArgs): KbdPartProps;
+/** Chord prop bag: the slot anchor for one chord of nearly-flush keys. */
+declare function chordProps({
+  className
+}?: KbdPartPropsArgs): KbdPartProps;
+/** Key prop bag: the slot anchor for one square key cap. */
+declare function keyProps({
+  className
+}?: KbdPartPropsArgs): KbdPartProps;
+/** Glyph prop bag: the slot anchor for a drawn key glyph. */
+declare function glyphProps({
+  className
+}?: KbdPartPropsArgs): KbdPartProps;
+//#endregion
+export { chordProps, glyphProps, keyProps, rootProps };

package/dist/components/kbd/kbd.props.js

@@ -0,0 +1,39 @@
+import { KBD_SLOTS } from "./kbd.slots.js";
+//#region src/components/kbd/kbd.props.ts
+/**
+* The D12 unified part contract for Kbd — the data-attribute-native generalization of the old
+* `kbd*` class-string helpers.
+*
+* Each part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-kbd-<part>", ...dataAttrs }`. Under the single-`data-slot` anchor model
+* (D4 final) the `data-slot` is the only styling hook needed — `kbd.css` keys every rule off it — so
+* spreading a part's `props()` onto a *foreign* element styles it as that part:
+*
+*     <kbd {...Kbd.Key.props()}>K</kbd>
+*     // → <kbd data-slot="noctis-kbd-key">
+*
+* Kbd has no variant/state axes — every part is a plain slot anchor — so each helper accepts only an
+* optional `className` passthrough, forwarded verbatim (styling is attribute-driven).
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: the slot anchor for the hint row. */
+function rootProps({ className } = {}) {
+	return withClassName({ "data-slot": KBD_SLOTS.root }, className);
+}
+/** Chord prop bag: the slot anchor for one chord of nearly-flush keys. */
+function chordProps({ className } = {}) {
+	return withClassName({ "data-slot": KBD_SLOTS.chord }, className);
+}
+/** Key prop bag: the slot anchor for one square key cap. */
+function keyProps({ className } = {}) {
+	return withClassName({ "data-slot": KBD_SLOTS.key }, className);
+}
+/** Glyph prop bag: the slot anchor for a drawn key glyph. */
+function glyphProps({ className } = {}) {
+	return withClassName({ "data-slot": KBD_SLOTS.glyph }, className);
+}
+//#endregion
+export { chordProps, glyphProps, keyProps, rootProps };

package/dist/components/kbd/kbd.slots.js

@@ -0,0 +1,14 @@
+//#region src/components/kbd/kbd.slots.ts
+/**
+* The slot vocabulary every `Kbd` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}-{part}`; SLOTS.md still generates from the
+* token-graph declarations.
+*/
+const KBD_SLOTS = {
+	root: "noctis-kbd",
+	chord: "noctis-kbd-chord",
+	key: "noctis-kbd-key",
+	glyph: "noctis-kbd-glyph"
+};
+//#endregion
+export { KBD_SLOTS };

package/dist/components/kbd/use-apple-platform.js

@@ -0,0 +1,25 @@
+"use client";
+import { useSyncExternalStore } from "react";
+//#region src/components/kbd/use-apple-platform.ts
+/** The platform doesn't change within a session, so there is nothing to subscribe to. */
+function subscribe() {
+	return () => {};
+}
+function getSnapshot() {
+	const nav = navigator;
+	const platform = nav.userAgentData?.platform || nav.platform || "";
+	return /mac|iphone|ipad|ipod/i.test(platform);
+}
+/**
+* The server can't know the platform, so it assumes Apple — the modifier renders as `⌘` on first
+* paint, matching the symbol set, and corrects to `Ctrl` after hydration on non-Apple platforms.
+*/
+function getServerSnapshot() {
+	return true;
+}
+/** Whether the current device is an Apple platform (macOS / iOS / iPadOS). Drives the `Mod` glyph. */
+function useIsApplePlatform() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+//#endregion
+export { useIsApplePlatform };

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

@@ -0,0 +1,2 @@
+import { Menu } from "./menu.js";
+import { MenuDataAttributes } from "./menu.slots.js";