@stridge/noctis 1.0.0-beta.0

package/dist/tailwind/cn.d.ts

@@ -0,0 +1,33 @@
+import { ClassValue } from "clsx";
+
+//#region src/tailwind/cn.d.ts
+/**
+ * The design system's named font-size scale (mirrors `--text-*` in design-tokens' `tokens.css`).
+ * tailwind-merge needs it spelled out because these names are custom: without it `text-mini` reads
+ * as a color, so `cn("text-mini", "text-foreground")` would drop the size. Shared with {@link tv}
+ * so variant maps merge font sizes the same way.
+ *
+ * Keep in sync with the `--text-*` sizes in `@stridge/noctis-design-tokens` `tokens.css`.
+ */
+declare const FONT_SIZE_CLASS_GROUP: {
+  readonly "font-size": readonly [{
+    readonly text: readonly ["micro", "mini", "small", "regular", "large", "title-1", "title-2", "title-3"];
+  }];
+};
+/** tailwind-merge configuration taught the named font-size and radius roles; shared by {@link cn} and {@link tv}. */
+declare const TW_MERGE_CONFIG: {
+  readonly extend: {
+    readonly classGroups: {
+      readonly rounded: readonly [{
+        readonly rounded: readonly ["control"];
+      }];
+      readonly "font-size": readonly [{
+        readonly text: readonly ["micro", "mini", "small", "regular", "large", "title-1", "title-2", "title-3"];
+      }];
+    };
+  };
+};
+/** Tailwind-aware class merge (`clsx` + `tailwind-merge`) so later classes override earlier ones. */
+declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export { FONT_SIZE_CLASS_GROUP, TW_MERGE_CONFIG, cn };

package/dist/tailwind/cn.js

@@ -0,0 +1,42 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/tailwind/cn.ts
+/**
+* The design system's named font-size scale (mirrors `--text-*` in design-tokens' `tokens.css`).
+* tailwind-merge needs it spelled out because these names are custom: without it `text-mini` reads
+* as a color, so `cn("text-mini", "text-foreground")` would drop the size. Shared with {@link tv}
+* so variant maps merge font sizes the same way.
+*
+* Keep in sync with the `--text-*` sizes in `@stridge/noctis-design-tokens` `tokens.css`.
+*/
+const FONT_SIZE_CLASS_GROUP = { "font-size": [{ text: [
+	"micro",
+	"mini",
+	"small",
+	"regular",
+	"large",
+	"title-1",
+	"title-2",
+	"title-3"
+] }] };
+/**
+* The named radius role `rounded-control` (mirrors `--radius-control`) — the knob-following, uncapped
+* corner used by buttons, chips, and swatches. tailwind-merge must be told it is a border-radius, or it
+* treats the custom name as unknown and won't dedupe it: `cn("rounded-sm", "rounded-control")` would
+* keep *both*, and the capped `rounded-sm` wins the cascade — so an override never reaches the knob.
+*
+* Keep in sync with `--radius-control` in `@stridge/noctis-design-tokens` `tokens.css`.
+*/
+const RADIUS_CLASS_GROUP = { rounded: [{ rounded: ["control"] }] };
+/** tailwind-merge configuration taught the named font-size and radius roles; shared by {@link cn} and {@link tv}. */
+const TW_MERGE_CONFIG = { extend: { classGroups: {
+	...FONT_SIZE_CLASS_GROUP,
+	...RADIUS_CLASS_GROUP
+} } };
+const twMerge = extendTailwindMerge(TW_MERGE_CONFIG);
+/** Tailwind-aware class merge (`clsx` + `tailwind-merge`) so later classes override earlier ones. */
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { FONT_SIZE_CLASS_GROUP, TW_MERGE_CONFIG, cn };

package/dist/tailwind/index.d.ts

@@ -0,0 +1,3 @@
+import { FONT_SIZE_CLASS_GROUP, TW_MERGE_CONFIG, cn } from "./cn.js";
+import { tv } from "./tv.js";
+export { FONT_SIZE_CLASS_GROUP, TW_MERGE_CONFIG, cn, tv };

package/dist/tailwind/index.js

@@ -0,0 +1,3 @@
+import { FONT_SIZE_CLASS_GROUP, TW_MERGE_CONFIG, cn } from "./cn.js";
+import { tv } from "./tv.js";
+export { FONT_SIZE_CLASS_GROUP, TW_MERGE_CONFIG, cn, tv };

package/dist/tailwind/tv.d.ts

@@ -0,0 +1,20 @@
+import * as _$tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+
+//#region src/tailwind/tv.d.ts
+/**
+ * The variant utility for primitives — `tailwind-variants` configured with the same font-size-aware
+ * `tailwind-merge` rules as {@link cn}, so a variant that sets `text-small` and a consumer override
+ * resolve correctly. Use it for typed size/tone/variant/state maps driven by semantic tokens.
+ */
+declare const tv: _$tailwind_variants0.TV;
+/** Types-only namespace merged onto the {@link tv} value — `tv.VariantProps<typeof recipe>` derives a recipe's variant prop map. */
+declare namespace tv {
+  /**
+   * The variant prop map a `tv` recipe accepts — the source for a component's `Variant`/`Size` unions.
+   * @public — part of the `@stridge/noctis/tailwind` adapter surface for consumers authoring recipes.
+   */
+  type VariantProps<Recipe extends (...args: never[]) => unknown> = VariantProps<Recipe>;
+}
+//#endregion
+export { tv };

package/dist/tailwind/tv.js

@@ -0,0 +1,11 @@
+import { TW_MERGE_CONFIG } from "./cn.js";
+import { createTV } from "tailwind-variants";
+//#region src/tailwind/tv.ts
+/**
+* The variant utility for primitives — `tailwind-variants` configured with the same font-size-aware
+* `tailwind-merge` rules as {@link cn}, so a variant that sets `text-small` and a consumer override
+* resolve correctly. Use it for typed size/tone/variant/state maps driven by semantic tokens.
+*/
+const tv = createTV({ twMergeConfig: TW_MERGE_CONFIG });
+//#endregion
+export { tv };

package/dist/tailwind.css

@@ -0,0 +1,485 @@
+/* The opt-in Tailwind adapter stylesheet — the `@theme` reset, the `@theme inline` bridge, and the
+ * `@utility` rules that mint Noctis's semantic utilities (`bg-background`, `border-field`, …).
+ *
+ * Import only when authoring with Tailwind v4, after `@import "tailwindcss"` and alongside the
+ * framework-neutral `@stridge/noctis/styles.css` (which carries the canonical token declarations every
+ * utility here resolves against). Consumers who do not use Tailwind import none of this. */
+/**
+ * The Noctis Tailwind adapter: the `@theme` reset, the `@theme inline` bridge, and the `@utility`
+ * rules that mint Noctis's semantic utilities (`bg-background`, `border-field`, …).
+ *
+ * Opt-in — import only when authoring with Tailwind v4, after `@import "tailwindcss"` and alongside
+ * the framework-neutral `tokens.css` (which carries the canonical `--noctis-*` declarations every alias
+ * here resolves against). Consumers who do not use Tailwind depend on none of this.
+ *
+ * Generated by `pnpm tokens:gen` — edit the graph in `src/graph/`, not this file.
+ */
+
+/* ── Tailwind default-theme reset + literal breakpoints ─────────────────────────────────
+ * Reset-and-own: every Tailwind default namespace Noctis owns is dropped to `initial` so
+ * only the minted `@theme inline` keys below exist — `bg-red-500`, `p-17`, `shadow-2xl`,
+ * `blur-3xl` are not even available, and the build is the detection mechanism for unsanctioned
+ * usage. `--spacing: initial` kills the bare multiplier behind every numeric spacing utility.
+ * `--border-width-*`/`--opacity-*` have no v4 defaults — their resets are forward hygiene
+ * against future/plugin keys (the numeric utilities themselves are static bare-value handlers;
+ * the minted keys below shadow them). Static utilities with no theme lookup (`leading-none`,
+ * `shadow-none`, `animate-none`, `border-0`) survive every reset by construction.
+ * Breakpoints are the one family that cannot bridge through `var()` (media query preludes
+ * reject it), so each bare key carries the literal value its canonical `--noctis-breakpoint-*`
+ * twin declares — duplicated from the same graph node at generation time.
+ */
+@theme {
+    --color-*: initial;
+    --spacing: initial;
+    --shadow-*: initial;
+    --inset-shadow-*: initial;
+    --drop-shadow-*: initial;
+    --text-shadow-*: initial;
+    --blur-*: initial;
+    --leading-*: initial;
+    --animate-*: initial;
+    --container-*: initial;
+    --perspective-*: initial;
+    --aspect-*: initial;
+    --border-width-*: initial;
+    --opacity-*: initial;
+
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+}
+
+/* ── Tailwind bridge (the only color source) ────────────────────────────────────────────
+ * `inline` makes each utility reference the canonical variable directly
+ * (`bg-surface` → `background-color: var(--noctis-color-surface)`) instead of through a generated
+ * indirection, so live runtime updates to the canonical layer (and the engine primitives behind
+ * it) re-theme the app with no rebuild. The bare keys here exist only at build time — runtime
+ * overrides must target the `--noctis-*` canonicals, never these aliases.
+ */
+@theme inline {
+    /* Color bridge — one `--color-*` key per bridged semantic role, aliasing its canonical
+     * `--noctis-color-*` twin. Roles whose fill and border are different values (selected, field,
+     * checkbox, kbd, tooltip, …) are dedicated `@utility` rules below instead. */
+    --color-background: var(--noctis-color-background);
+    --color-hover: var(--noctis-color-hover);
+    --color-surface: var(--noctis-color-surface);
+    --color-surface-hover: var(--noctis-color-surface-hover);
+    --color-surface-raised: var(--noctis-color-surface-raised);
+    --color-sunken: var(--noctis-color-sunken);
+    --color-selected-hover: var(--noctis-color-selected-hover);
+    --color-focus: var(--noctis-color-focus);
+    --color-overlay: var(--noctis-color-overlay);
+    --color-header: var(--noctis-color-header);
+    --color-sidebar-item: var(--noctis-color-sidebar-item);
+    --color-sidebar-item-active: var(--noctis-color-sidebar-item-active);
+    --color-code: var(--noctis-color-code);
+    --color-data-grid-header: var(--noctis-color-data-grid-header);
+    --color-data-grid-row-hover: var(--noctis-color-data-grid-row-hover);
+    --color-data-grid-row-hover-strong: var(--noctis-color-data-grid-row-hover-strong);
+    --color-foreground: var(--noctis-color-foreground);
+    --color-secondary: var(--noctis-color-secondary);
+    --color-muted: var(--noctis-color-muted);
+    --color-subtle: var(--noctis-color-subtle);
+    --color-placeholder: var(--noctis-color-placeholder);
+    --color-link: var(--noctis-color-link);
+    --color-code-foreground: var(--noctis-color-code-foreground);
+    --color-kbd-foreground: var(--noctis-color-kbd-foreground);
+    --color-menu-shortcut: var(--noctis-color-menu-shortcut);
+    --color-faint: var(--noctis-color-border-faint);
+    --color-border: var(--noctis-color-border);
+    --color-strong: var(--noctis-color-border-strong);
+    --color-divider: var(--noctis-color-divider);
+    --color-ring: var(--noctis-color-ring);
+    --color-primary: var(--noctis-color-primary);
+    --color-primary-foreground: var(--noctis-color-primary-foreground);
+    --color-primary-hover: var(--noctis-color-primary-hover);
+    --color-primary-active: var(--noctis-color-primary-active);
+    --color-accent: var(--noctis-color-accent);
+    --color-accent-foreground: var(--noctis-color-accent-foreground);
+    --color-accent-hover: var(--noctis-color-accent-hover);
+    --color-accent-active: var(--noctis-color-accent-active);
+    --color-accent-muted: var(--noctis-color-accent-muted);
+    --color-control: var(--noctis-color-control);
+    --color-control-foreground: var(--noctis-color-control-foreground);
+    --color-control-hover: var(--noctis-color-control-hover);
+    --color-control-selected: var(--noctis-color-control-selected);
+    --color-control-selected-hover: var(--noctis-color-control-selected-hover);
+    --color-control-ghost: var(--noctis-color-control-ghost);
+    --color-control-ghost-hover: var(--noctis-color-control-ghost-hover);
+    --color-control-ghost-selected: var(--noctis-color-control-ghost-selected);
+    --color-control-ghost-selected-hover: var(--noctis-color-control-ghost-selected-hover);
+    --color-toggle-track-off: var(--noctis-color-toggle-track-off);
+    --color-toggle-track-off-hover: var(--noctis-color-toggle-track-off-hover);
+    --color-toggle-track-on: var(--noctis-color-toggle-track-on);
+    --color-toggle-track-on-hover: var(--noctis-color-toggle-track-on-hover);
+    --color-toggle-track-on-disabled: var(--noctis-color-toggle-track-on-disabled);
+    --color-toggle-thumb: var(--noctis-color-toggle-thumb);
+    --color-checkbox-checked: var(--noctis-color-checkbox-checked);
+    --color-checkbox-check: var(--noctis-color-checkbox-check);
+    --color-radio-checked: var(--noctis-color-radio-checked);
+    --color-scrollbar-thumb: var(--noctis-color-scrollbar-thumb);
+    --color-scrollbar-track: var(--noctis-color-scrollbar-track);
+    --color-selection: var(--noctis-color-selection);
+    --color-chart-positive: var(--noctis-color-chart-positive);
+    --color-chart-negative: var(--noctis-color-chart-negative);
+    --color-chart-neutral: var(--noctis-color-chart-neutral);
+    --color-chart-axis: var(--noctis-color-chart-axis);
+    --color-chart-track: var(--noctis-color-chart-track);
+    --color-chart-tooltip: var(--noctis-color-chart-tooltip);
+    --color-danger: var(--noctis-color-danger);
+    --color-danger-foreground: var(--noctis-color-danger-foreground);
+    --color-danger-muted: var(--noctis-color-danger-muted);
+    --color-danger-muted-foreground: var(--noctis-color-danger-muted-foreground);
+    --color-danger-hover: var(--noctis-color-danger-hover);
+    --color-danger-faint: var(--noctis-color-danger-faint);
+    --color-success: var(--noctis-color-success);
+    --color-success-foreground: var(--noctis-color-success-foreground);
+    --color-success-muted: var(--noctis-color-success-muted);
+    --color-success-muted-foreground: var(--noctis-color-success-muted-foreground);
+    --color-success-hover: var(--noctis-color-success-hover);
+    --color-success-faint: var(--noctis-color-success-faint);
+    --color-warning: var(--noctis-color-warning);
+    --color-warning-foreground: var(--noctis-color-warning-foreground);
+    --color-warning-muted: var(--noctis-color-warning-muted);
+    --color-warning-muted-foreground: var(--noctis-color-warning-muted-foreground);
+    --color-warning-hover: var(--noctis-color-warning-hover);
+    --color-warning-faint: var(--noctis-color-warning-faint);
+    --color-info: var(--noctis-color-info);
+    --color-info-foreground: var(--noctis-color-info-foreground);
+    --color-info-muted: var(--noctis-color-info-muted);
+    --color-info-muted-foreground: var(--noctis-color-info-muted-foreground);
+    --color-info-hover: var(--noctis-color-info-hover);
+    --color-info-faint: var(--noctis-color-info-faint);
+    --color-presence-online: var(--noctis-color-presence-online);
+    --color-presence-busy: var(--noctis-color-presence-busy);
+    --color-presence-focus: var(--noctis-color-presence-focus);
+    --color-presence-away: var(--noctis-color-presence-away);
+    --color-presence-offline: var(--noctis-color-presence-offline);
+    --color-disabled: var(--noctis-color-text-disabled);
+    --color-well: var(--noctis-color-well);
+    --color-chart-1: var(--noctis-color-chart-1);
+    --color-chart-2: var(--noctis-color-chart-2);
+    --color-chart-3: var(--noctis-color-chart-3);
+    --color-chart-4: var(--noctis-color-chart-4);
+    --color-chart-5: var(--noctis-color-chart-5);
+    --color-chart-6: var(--noctis-color-chart-6);
+    --color-chart-7: var(--noctis-color-chart-7);
+    --color-chart-8: var(--noctis-color-chart-8);
+    --color-avatar-1: var(--noctis-color-avatar-1);
+    --color-avatar-2: var(--noctis-color-avatar-2);
+    --color-avatar-3: var(--noctis-color-avatar-3);
+    --color-avatar-4: var(--noctis-color-avatar-4);
+    --color-avatar-5: var(--noctis-color-avatar-5);
+    --color-avatar-6: var(--noctis-color-avatar-6);
+    --color-avatar-7: var(--noctis-color-avatar-7);
+    --color-avatar-8: var(--noctis-color-avatar-8);
+    --color-avatar-9: var(--noctis-color-avatar-9);
+    --color-avatar-10: var(--noctis-color-avatar-10);
+    --color-avatar-foreground: var(--noctis-color-avatar-foreground);
+
+    /* Named text sizes + their paired line-height keys (`--text-<size>--line-height`). */
+    --text-micro: var(--noctis-text-micro);
+    --text-micro--line-height: var(--noctis-leading-micro);
+    --text-mini: var(--noctis-text-mini);
+    --text-mini--line-height: var(--noctis-leading-mini);
+    --text-small: var(--noctis-text-small);
+    --text-small--line-height: var(--noctis-leading-small);
+    --text-regular: var(--noctis-text-regular);
+    --text-regular--line-height: var(--noctis-leading-regular);
+    --text-large: var(--noctis-text-large);
+    --text-large--line-height: var(--noctis-leading-large);
+    --text-title-1: var(--noctis-text-title-1);
+    --text-title-1--line-height: var(--noctis-leading-title-1);
+    --text-title-2: var(--noctis-text-title-2);
+    --text-title-2--line-height: var(--noctis-leading-title-2);
+    --text-title-3: var(--noctis-text-title-3);
+    --text-title-3--line-height: var(--noctis-leading-title-3);
+
+    /* Standalone leadings — `leading-snug`/`leading-relaxed` over the owned steps. */
+    --leading-snug: var(--noctis-leading-snug);
+    --leading-relaxed: var(--noctis-leading-relaxed);
+
+    /* Spacing ramp — every `p-*`/`m-*`/`gap-*`/`size-*`/`w-*`/… step resolves through the
+     * canonical density-scaled scale (fractional keys escaped: `--spacing-1\.5`). */
+    --spacing-0: var(--noctis-space-0);
+    --spacing-0\.5: var(--noctis-space-0\.5);
+    --spacing-1: var(--noctis-space-1);
+    --spacing-1\.5: var(--noctis-space-1\.5);
+    --spacing-2: var(--noctis-space-2);
+    --spacing-2\.5: var(--noctis-space-2\.5);
+    --spacing-3: var(--noctis-space-3);
+    --spacing-3\.5: var(--noctis-space-3\.5);
+    --spacing-4: var(--noctis-space-4);
+    --spacing-5: var(--noctis-space-5);
+    --spacing-6: var(--noctis-space-6);
+    --spacing-7: var(--noctis-space-7);
+    --spacing-8: var(--noctis-space-8);
+    --spacing-9: var(--noctis-space-9);
+    --spacing-10: var(--noctis-space-10);
+    --spacing-11: var(--noctis-space-11);
+    --spacing-12: var(--noctis-space-12);
+    --spacing-14: var(--noctis-space-14);
+    --spacing-16: var(--noctis-space-16);
+    --spacing-20: var(--noctis-space-20);
+    --spacing-24: var(--noctis-space-24);
+    --spacing-28: var(--noctis-space-28);
+    --spacing-32: var(--noctis-space-32);
+    --spacing-36: var(--noctis-space-36);
+    --spacing-40: var(--noctis-space-40);
+    --spacing-44: var(--noctis-space-44);
+    --spacing-48: var(--noctis-space-48);
+    --spacing-52: var(--noctis-space-52);
+    --spacing-56: var(--noctis-space-56);
+    --spacing-60: var(--noctis-space-60);
+    --spacing-64: var(--noctis-space-64);
+    --spacing-72: var(--noctis-space-72);
+    --spacing-80: var(--noctis-space-80);
+    --spacing-96: var(--noctis-space-96);
+    --spacing-px: var(--noctis-space-px);
+
+    /* Radius steps — `rounded-*` resolves through the canonical scale. */
+    --radius-xs: var(--noctis-radius-xs);
+    --radius-sm: var(--noctis-radius-sm);
+    --radius-md: var(--noctis-radius-md);
+    --radius-lg: var(--noctis-radius-lg);
+    --radius-xl: var(--noctis-radius-xl);
+    --radius-full: var(--noctis-radius-full);
+    --radius-control: var(--noctis-radius-control);
+
+    /* Easing curves. */
+    --ease-standard: var(--noctis-ease-standard);
+    --ease-in: var(--noctis-ease-in);
+    --ease-out: var(--noctis-ease-out);
+    --ease-in-out: var(--noctis-ease-in-out);
+    --ease-overlay: var(--noctis-ease-overlay);
+
+    /* Motion durations — `duration-fast|quick|regular|slow|overlay` read the named stops. */
+    --transition-duration-fast: var(--noctis-duration-fast);
+    --transition-duration-quick: var(--noctis-duration-quick);
+    --transition-duration-regular: var(--noctis-duration-regular);
+    --transition-duration-slow: var(--noctis-duration-slow);
+    --transition-duration-overlay: var(--noctis-duration-overlay);
+
+    /* Stacking — `z-raised|dropdown|sticky|overlay|modal|popover|toast` read the z ladder. */
+    --z-index-raised: var(--noctis-z-raised);
+    --z-index-dropdown: var(--noctis-z-dropdown);
+    --z-index-sticky: var(--noctis-z-sticky);
+    --z-index-overlay: var(--noctis-z-overlay);
+    --z-index-modal: var(--noctis-z-modal);
+    --z-index-popover: var(--noctis-z-popover);
+    --z-index-toast: var(--noctis-z-toast);
+
+    /* Typography — families, weights, tracking. */
+    --font-sans: var(--noctis-font-sans);
+    --font-mono: var(--noctis-font-mono);
+    --font-weight-light: var(--noctis-font-weight-light);
+    --font-weight-normal: var(--noctis-font-weight-normal);
+    --font-weight-medium: var(--noctis-font-weight-medium);
+    --font-weight-semibold: var(--noctis-font-weight-semibold);
+    --font-weight-bold: var(--noctis-font-weight-bold);
+    --font-weight-extrabold: var(--noctis-font-weight-extrabold);
+    --font-weight-black: var(--noctis-font-weight-black);
+    --tracking-tight: var(--noctis-tracking-tight);
+    --tracking-normal: var(--noctis-tracking-normal);
+    --tracking-wide: var(--noctis-tracking-wide);
+
+    /* Box-shadow ladder — semantic utility names over the composed shadow families (the
+     * geometry/alpha parts are canonical-only). Utilities: `shadow-card`, `shadow-popover`,
+     * `shadow-modal`, `shadow-inset`, `shadow-focus`, plus the mirrored `shadow-sm`. */
+    --shadow-card: var(--noctis-shadow-low);
+    --shadow-popover: var(--noctis-shadow-medium);
+    --shadow-modal: var(--noctis-shadow-high);
+    --shadow-inset: var(--noctis-shadow-inset);
+    --shadow-focus: var(--noctis-shadow-focus);
+    --shadow-sm: var(--noctis-shadow-sm);
+
+    /* Container widths — named `w-*`/`max-w-*`/`basis-*` sizes read the owned steps. */
+    --container-xs: var(--noctis-container-xs);
+    --container-sm: var(--noctis-container-sm);
+    --container-md: var(--noctis-container-md);
+    --container-xl: var(--noctis-container-xl);
+    --container-2xl: var(--noctis-container-2xl);
+    --container-3xl: var(--noctis-container-3xl);
+    --container-7xl: var(--noctis-container-7xl);
+
+    /* Border widths — `border`/`border-2`/`border-4` resolve through the minted steps. */
+    --border-width-1: var(--noctis-border-width-1);
+    --border-width-2: var(--noctis-border-width-2);
+    --border-width-4: var(--noctis-border-width-4);
+
+    /* Blur radii — `blur-*` and `backdrop-blur-*` read the owned steps. */
+    --blur-sm: var(--noctis-blur-sm);
+    --blur-md: var(--noctis-blur-md);
+
+    /* Animations — `animate-spin` reads the owned set; keyframes ship top-level. */
+    --animate-spin: var(--noctis-animate-spin);
+}
+
+/* ── Roles whose fill and border are different values ──────────────────────────────────
+ * A single Tailwind color shares one value across `bg-*`/`border-*`, so the selected-row
+ * surface vs its border, and the field fill vs its border, are defined as explicit
+ * utilities pointing at distinct roles.
+ */
+@utility bg-selected {
+    background-color: var(--noctis-color-selected);
+}
+@utility border-selected {
+    border-color: var(--noctis-color-border-selected);
+}
+@utility bg-field {
+    background-color: var(--noctis-color-field);
+}
+@utility bg-field-hover {
+    background-color: var(--noctis-color-field-hover);
+}
+@utility bg-field-focus {
+    background-color: var(--noctis-color-field-focus);
+}
+@utility border-field {
+    border-color: var(--noctis-color-field-border);
+}
+@utility border-field-hover {
+    border-color: var(--noctis-color-field-border-hover);
+}
+@utility border-field-focus {
+    border-color: var(--noctis-color-field-border-focus);
+}
+@utility border-field-invalid {
+    border-color: var(--noctis-color-field-border-invalid);
+}
+
+/* Form-element fills + borders (a checkbox/radio fill and its border are different values). */
+@utility bg-checkbox {
+    background-color: var(--noctis-color-checkbox);
+}
+@utility border-checkbox {
+    border-color: var(--noctis-color-checkbox-border);
+}
+@utility border-checkbox-hover {
+    border-color: var(--noctis-color-checkbox-border-hover);
+}
+@utility bg-radio {
+    background-color: var(--noctis-color-radio);
+}
+@utility border-radio {
+    border-color: var(--noctis-color-radio-border);
+}
+
+/* Kbd cap fill + 3D-edge border. */
+@utility bg-kbd {
+    background-color: var(--noctis-color-kbd);
+}
+@utility border-kbd {
+    border-color: var(--noctis-color-kbd-border);
+}
+
+/* Status outline borders for muted callouts (`border-<status>` already gives the solid outline). */
+@utility border-danger-subtle {
+    border-color: var(--noctis-color-danger-border);
+}
+@utility border-success-subtle {
+    border-color: var(--noctis-color-success-border);
+}
+@utility border-warning-subtle {
+    border-color: var(--noctis-color-warning-border);
+}
+@utility border-info-subtle {
+    border-color: var(--noctis-color-info-border);
+}
+
+/* Data-grid gridlines + the high-chroma selected-column border. */
+@utility border-data-grid {
+    border-color: var(--noctis-color-data-grid-border);
+}
+@utility border-data-grid-selected {
+    border-color: var(--noctis-color-data-grid-column-selected-border);
+}
+@utility border-chart-grid {
+    border-color: var(--noctis-color-chart-grid);
+}
+
+/* Inverse surface (primary text as a surface) + its text (canvas). */
+@utility bg-inverse {
+    background-color: var(--noctis-color-inverse);
+}
+@utility text-inverse {
+    color: var(--noctis-color-inverse-foreground);
+}
+
+/* Disabled = reduced opacity (the convention, not a color family). */
+@utility opacity-disabled {
+    opacity: var(--noctis-opacity-disabled);
+}
+
+/* Status-tint gradient surfaces (faint hue → neutral) for status cards. */
+@utility bg-danger-gradient {
+    background-image: linear-gradient(var(--noctis-color-danger-faint), var(--noctis-color-surface));
+}
+@utility bg-success-gradient {
+    background-image: linear-gradient(var(--noctis-color-success-faint), var(--noctis-color-surface));
+}
+@utility bg-warning-gradient {
+    background-image: linear-gradient(var(--noctis-color-warning-faint), var(--noctis-color-surface));
+}
+@utility bg-info-gradient {
+    background-image: linear-gradient(var(--noctis-color-info-faint), var(--noctis-color-surface));
+}
+
+/* Text selection uses the chromatic accent wash. */
+::selection {
+    background-color: var(--noctis-color-selection);
+}
+
+/* The text caret carries the chromatic accent. */
+:where(input, textarea, [contenteditable]) {
+    caret-color: var(--noctis-color-accent);
+}
+
+/* ── Composite control idioms ───────────────────────────────────────────────────────────
+ * The keyboard focus ring (geometry only — pair with a color utility like `outline-ring` /
+ * `outline-danger`), the popup open/close chrome shared by floating panels, and the panel-region
+ * padding. `outline-style: solid` is set explicitly to sidestep the `--tw-outline-style` reset.
+ */
+@utility focus-ring {
+    outline-width: var(--noctis-size-focus-ring-width);
+    outline-style: solid;
+    outline-offset: var(--noctis-size-focus-ring-offset);
+}
+@utility focus-ring-inset {
+    outline-width: var(--noctis-size-focus-ring-width);
+    outline-style: solid;
+    outline-offset: calc(-1 * var(--noctis-size-focus-ring-offset));
+}
+@utility focus-ring-field {
+    outline-width: var(--noctis-size-focus-ring-width);
+    outline-style: solid;
+    outline-offset: -1px;
+}
+
+/* Popup chrome: the radius + opacity/scale enter-exit a floating panel adopts (the elevated
+ * surface, border, and shadow stay on the Surface primitive). The transition names `scale` — not
+ * `transform` — because Tailwind v4's `scale-*` set the standalone `scale` property. */
+@utility popup {
+    border-radius: var(--noctis-radius-md);
+    transition-property: opacity, scale;
+    transition-timing-function: var(--noctis-ease-out);
+    transition-duration: var(--noctis-duration-quick);
+    &[data-starting-style],
+    &[data-ending-style] {
+        scale: 0.96;
+        opacity: 0;
+    }
+    &[data-ending-style] {
+        transition-duration: var(--noctis-duration-fast);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+}
+
+/* Panel-region padding — the header/body/footer inset of a sheet or rail. */
+@utility p-region {
+    padding: var(--noctis-space-region);
+}

package/dist/theme/react.d.ts

@@ -0,0 +1 @@
+export * from "@stridge/noctis-theme-engine/react";

package/dist/theme/react.js

@@ -0,0 +1 @@
+export * from "@stridge/noctis-theme-engine/react";

package/dist/theme.d.ts

@@ -0,0 +1 @@
+export * from "@stridge/noctis-theme-engine";

package/dist/theme.js

@@ -0,0 +1 @@
+export * from "@stridge/noctis-theme-engine";

package/dist/tokens/react.d.ts

@@ -0,0 +1 @@
+export * from "@stridge/noctis-design-tokens/react";

package/dist/tokens/react.js

@@ -0,0 +1 @@
+export * from "@stridge/noctis-design-tokens/react";

package/dist/tokens.d.ts

@@ -0,0 +1 @@
+export * from "@stridge/noctis-design-tokens";

package/dist/tokens.js

@@ -0,0 +1 @@
+export * from "@stridge/noctis-design-tokens";