@stridge/noctis 1.0.0-beta.0 → 1.0.0-beta.3

package/README.md

@@ -1,5 +1,7 @@
 # @stridge/noctis
 
+![license](https://img.shields.io/badge/license-MIT-blue) ![coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)
+
 The Stridge design system, and the single package consumers install. It pairs Base UI
 behavior with precompiled, **framework-neutral component CSS** on the semantic token layer, and
 ships the authoring substrate every primitive builds on — the polymorphic `Primitive` base, the

package/dist/components/code-block/code-block.js

@@ -41,6 +41,7 @@ function CodeBlockRoot({ label, language, icon, copyText, copyLabel, copiedLabel
 	const context = useMemo(() => ({
 		state: { activeValue: void 0 },
 		actions: {
+			/* v8 ignore next -- unreachable: Root has no tab strip to switch */
 			setActiveValue: () => {},
 			registerTarget,
 			getText
@@ -144,6 +145,7 @@ function CodeBlockTabs({ children, "aria-label": ariaLabel, copyLabel, copiedLab
 	const items = Children.toArray(children).filter((child) => isValidElement(child));
 	const [value, setValue] = useState("0");
 	const panelRef = useRef(null);
+	/* v8 ignore next -- unreachable: Tabs parts read the shared panelRef instead of registering */
 	const registerTarget = useCallback((_ref) => {}, []);
 	const getText = useCallback(() => panelRef.current?.querySelector("code, pre")?.textContent ?? "", []);
 	const setActiveValue = useCallback((next) => setValue(next), []);
@@ -167,6 +169,7 @@ function CodeBlockTabs({ children, "aria-label": ariaLabel, copyLabel, copiedLab
 		copiedLabel
 	]);
 	if (items.length === 0) return null;
+	/* v8 ignore next 2 -- unreachable: value tracks a live tab index, so the left side is always defined */
 	const activeChild = items[Number(value)] ?? items[0];
 	return /* @__PURE__ */ jsx(CodeBlockProvider, {
 		value: context,
@@ -186,13 +189,15 @@ function CodeBlockTabs({ children, "aria-label": ariaLabel, copyLabel, copiedLab
 						children: items.map((child, index) => {
 							const language = childLanguage(child.props);
 							const label = childLabel(child.props);
+							/* v8 ignore next 2 -- unreachable: Children.toArray always assigns a key */
+							const key = child.key ?? index;
 							return /* @__PURE__ */ jsx(CodeBlockTab, {
 								value: String(index),
 								language,
 								label,
 								icon: childIcon(child.props),
 								children: resolveTabLabel(label, language, index)
-							}, child.key ?? index);
+							}, key);
 						})
 					}), /* @__PURE__ */ jsx(CodeBlockCopyButton, {})]
 				}), /* @__PURE__ */ jsx(CodeBlockPanel, {

package/dist/components/collapsible/collapsible.js

@@ -51,7 +51,8 @@ function CollapsibleRoot({ className, ...props }) {
 * @see {@link Collapsible.Trigger.Props}
 */
 function CollapsibleTrigger({ indicator = true, className, children, ...props }) {
-	const labelId = useCollapsibleId();
+	/* v8 ignore next */
+	const labelIdAttr = useCollapsibleId() ?? void 0;
 	const side = resolveIndicator(indicator);
 	const { "data-disabled": _ghostDisabled, ...ghostButton } = Button.props({
 		variant: "ghost",
@@ -76,7 +77,7 @@ function CollapsibleTrigger({ indicator = true, className, children, ...props })
 			side === "chevron-start" ? chevron : null,
 			/* @__PURE__ */ jsx("span", {
 				"data-collapsible-label": "",
-				id: labelId ?? void 0,
+				id: labelIdAttr,
 				children
 			}),
 			side === "chevron-end" ? chevron : null

package/dist/components/color-picker/area.js

@@ -18,6 +18,7 @@ function ColorPickerArea({ className }) {
 	const draggingRef = useRef(false);
 	const updateFromPoint = (clientX, clientY) => {
 		const node = areaRef.current;
+		/* v8 ignore next -- defensive: updateFromPoint only runs from pointer handlers on this node, so the ref is always set */
 		if (!node) return;
 		const rect = node.getBoundingClientRect();
 		const ratioX = clamp01((clientX - rect.left) / rect.width);

package/dist/components/color-picker/color-picker.js

@@ -35,6 +35,7 @@ function ColorPickerRoot({ value, defaultValue, format, defaultFormat = "oklch",
 	const syncingValue = useRef(false);
 	const syncingFormat = useRef(false);
 	if (storeRef.current === null) {
+		/* v8 ignore next -- defensive: DEFAULT_COLOR always parses, so the `?? BLACK` fallback is unreachable */
 		const seed = parseColor(value ?? defaultValue ?? "oklch(0.504 0.151 275.2)") ?? BLACK;
 		const color = {
 			...seed,
@@ -59,6 +60,8 @@ function ColorPickerRoot({ value, defaultValue, format, defaultFormat = "oklch",
 		const next = formatColor(state.color, state.format, alpha);
 		if (next !== lastValue.current) {
 			lastValue.current = next;
+			/* v8 ignore next -- the value-sync effect pre-seeds lastValue to this exact string, so when
+			syncingValue is true the outer guard is already false; the skip branch is unreachable */
 			if (!syncingValue.current) onValueChange?.(next);
 		}
 	}), [

package/dist/components/color-picker/color.js

@@ -38,6 +38,7 @@ function parseColor(input) {
 	const parsed = parse(input);
 	if (!parsed) return null;
 	const rgb = toRgb(parsed);
+	/* v8 ignore next -- defensive: culori's rgb converter only returns undefined for an undefined input, and `parsed` is a valid color here */
 	if (!rgb) return null;
 	return {
 		r: to255(rgb.r),
@@ -63,12 +64,14 @@ function rgbToHsv(rgb) {
 		b: rgb.b / 255,
 		alpha: rgb.a
 	});
+	/* v8 ignore next -- defensive: the hsv converter never returns undefined for a constructed rgb object */
 	if (!hsv) return {
 		h: 0,
 		s: 0,
 		v: 0,
 		a: rgb.a
 	};
+	/* v8 ignore next -- s/v are always present (0 on the gray/black axis); only h drops out, so the s/v `?? 0` fallbacks are unreachable */
 	return {
 		h: wrapHue(hsv.h ?? 0),
 		s: round((hsv.s ?? 0) * 100),
@@ -85,6 +88,7 @@ function hsvToRgb(hsv) {
 		v: hsv.v / 100,
 		alpha: hsv.a
 	});
+	/* v8 ignore next -- defensive: the rgb converter never returns undefined for a constructed hsv object */
 	if (!rgb) return {
 		...BLACK,
 		a: hsv.a
@@ -181,19 +185,23 @@ function formatRgbString(rgb, withAlpha) {
 	return `rgb(${r} ${g} ${b} / ${trim(rgb.a.toFixed(3))})`;
 }
 function formatHslString(hsl, withAlpha) {
+	/* v8 ignore next -- defensive: the hsl converter never returns undefined for the constructed rgb object formatColor passes */
 	if (!hsl) return "hsl(0 0% 0%)";
 	const h = round(wrapHue(hsl.h ?? 0));
 	const s = round(hsl.s * 100);
 	const l = round(hsl.l * 100);
+	/* v8 ignore next -- alpha is always set: formatColor builds the source rgb with `alpha: rgb.a`, so the `?? 1` fallback is unreachable */
 	const a = hsl.alpha ?? 1;
 	if (!withAlpha || a >= 1) return `hsl(${h} ${s}% ${l}%)`;
 	return `hsl(${h} ${s}% ${l}% / ${trim(a.toFixed(3))})`;
 }
 function formatOklchString(oklch, withAlpha) {
+	/* v8 ignore next -- defensive: the oklch converter never returns undefined for the constructed rgb object formatColor passes */
 	if (!oklch) return "oklch(0% 0 0)";
 	const l = `${trim((oklch.l * 100).toFixed(2))}%`;
 	const c = trim(oklch.c.toFixed(3));
 	const h = trim(wrapHue(oklch.h ?? 0).toFixed(2));
+	/* v8 ignore next -- alpha is always set: formatColor builds the source rgb with `alpha: rgb.a`, so the `?? 1` fallback is unreachable */
 	const a = oklch.alpha ?? 1;
 	if (!withAlpha || a >= 1) return `oklch(${l} ${c} ${h})`;
 	return `oklch(${l} ${c} ${h} / ${trim(a.toFixed(3))})`;
@@ -218,6 +226,7 @@ function wrapHue(n) {
 	return (n % 360 + 360) % 360;
 }
 function trim(s) {
+	/* v8 ignore next -- every caller passes a `toFixed(n)` string, which always contains a "."; the no-dot `: s` branch is unreachable */
 	return s.includes(".") ? s.replace(/0+$/, "").replace(/\.$/, "") : s;
 }
 //#endregion

package/dist/components/color-picker/eyedropper.js

@@ -19,6 +19,8 @@ function ColorPickerEyeDropper({ className }) {
 	}, []);
 	if (!supported) return null;
 	const pick = async () => {
+		/* v8 ignore next -- defensive: the button is rendered `disabled` when `disabled` is set, so
+		React never dispatches this click; the guard can't be reached through the rendered button */
 		if (disabled) return;
 		const Ctor = window.EyeDropper;
 		if (!Ctor) return;

package/dist/components/color-picker/inputs.js

@@ -26,6 +26,8 @@ function ColorPickerInput({ className }) {
 		setDraft(next);
 		if (!accepts(next, format, alpha)) return;
 		const rgb = parseColor(format === "hex" ? withHash(next) : next);
+		/* v8 ignore next -- defensive: `accepts` already proved `next` parses, and culori's rgb
+		converter never fails on a parsed color, so parseColor can't return null here */
 		if (!rgb) return;
 		const constrained = {
 			...rgb,

package/dist/components/color-picker/sliders.js

@@ -68,7 +68,9 @@ function ChannelSlider({ slot, thumbSlot, ariaLabel, value, max, disabled, track
 		max,
 		step: 1,
 		disabled,
-		onValueChange: (next) => onValueChange(typeof next === "number" ? next : next[0] ?? 0),
+		onValueChange: (next) => {
+			onValueChange(typeof next === "number" ? next : next[0] ?? 0);
+		},
 		className: clsx$1(className),
 		children: /* @__PURE__ */ jsxs(Slider.Control, {
 			"data-color-picker-channel-control": true,

package/dist/components/select/select.js

@@ -62,6 +62,7 @@ function SelectValue({ className, children, placeholder, ...props }) {
 	const { multiple } = useSelectContext("Value");
 	const formatter = useNoctisStringFormatter();
 	const render = children === void 0 && multiple ? (value) => {
+		/* v8 ignore next -- non-array value never reaches a multiple Select.Value */
 		const count = Array.isArray(value) ? value.length : 0;
 		return count > 0 ? formatter.format("select.selectedCount", { count }) : placeholder ?? null;
 	} : children;

package/dist/components/sheet/sheet-stack.js

@@ -1,6 +1,6 @@
 "use client";
 import { Sheet } from "./sheet.js";
-import { createContext, use, useMemo, useReducer, useRef } from "react";
+import { createContext, use, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sheet/sheet-stack.tsx
 /** The empty stack. */
@@ -111,24 +111,43 @@ function useSheetStackContext() {
 	if (!manager) throw new Error("useSheetStackContext must be used within <SheetStack>.");
 	return manager;
 }
-/** Render layers from `index` down, each nested inside the one before it so the stack reads as depth. */
-function renderLayer(entries, index, manager) {
-	if (index >= entries.length) return null;
-	const entry = entries[index];
-	if (!entry) return null;
+/**
+* One stacked layer. A `manager.push` adds the entry already `open`, so handing that straight to
+* `Sheet.Root` would mount Base UI's dialog in the open state and skip its enter transition — the panel
+* would snap in with no slide. Instead the root mounts closed and flips to the entry's visibility on the
+* first commit, so Base UI runs the closed→open transition and the layer animates in like a
+* trigger-opened sheet. After that the local state tracks `entry.open`, so `pop`/`close` animate out too.
+*/
+function SheetStackLayer({ entry, manager, children }) {
+	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		setOpen(entry.open);
+	}, [entry.open]);
 	return /* @__PURE__ */ jsx(Sheet.Root, {
-		open: entry.open,
-		onOpenChange: (open) => {
-			if (!open) manager.close(entry.key);
+		open,
+		onOpenChange: (next) => {
+			/* v8 ignore next -- next===true never fires: layers open via the controlled `open` prop (manager.push), never by Base UI requesting open on a triggerless stack root */
+			if (!next) manager.close(entry.key);
 		},
-		onOpenChangeComplete: (open) => {
-			if (!open) manager.remove(entry.key);
+		onOpenChangeComplete: (next) => {
+			if (!next) manager.remove(entry.key);
 		},
 		children: /* @__PURE__ */ jsxs(Sheet.Content, {
 			side: entry.side,
 			size: entry.size,
-			children: [entry.content, renderLayer(entries, index + 1, manager)]
+			children: [entry.content, children]
 		})
+	});
+}
+/** Render layers from `index` down, each nested inside the one before it so the stack reads as depth. */
+function renderLayer(entries, index, manager) {
+	if (index >= entries.length) return null;
+	const entry = entries[index];
+	if (!entry) return null;
+	return /* @__PURE__ */ jsx(SheetStackLayer, {
+		entry,
+		manager,
+		children: renderLayer(entries, index + 1, manager)
 	}, entry.key);
 }
 /**

package/dist/core/noctis-provider.d.ts

@@ -16,6 +16,7 @@ declare function NoctisProvider({
   messages,
   theme,
   themeOverrides,
+  themePresets,
   nonce,
   children
 }: NoctisProvider.Props): ReactElement;
@@ -29,7 +30,12 @@ declare namespace NoctisProvider {
     direction?: TextDirection; /** String dictionary for the localized-string hooks. Defaults to the built-in `en` stub. */
     messages?: LocalizedStrings<string, string>; /** Server-resolved theme seed for the engine; omit it for the default theme. */
     theme?: ThemeProviderProps["initialInput"]; /** Generation-time engine overrides — per-primitive replacements that participate in derivation. */
-    themeOverrides?: ThemeProviderProps["overrides"]; /** CSP nonce stamped on the inline styles Base UI injects, so they stay valid under a strict CSP. */
+    themeOverrides?: ThemeProviderProps["overrides"];
+    /**
+     * Named theme seeds advertised to the tree via `useTheme().presets` — what a theme picker offers.
+     * Defaults to the presets Noctis ships; pass your own palette to showcase additional themes.
+     */
+    themePresets?: ThemeProviderProps["presets"]; /** CSP nonce stamped on the inline styles Base UI injects, so they stay valid under a strict CSP. */
     nonce?: string;
     children: ReactNode;
   };

package/dist/core/noctis-provider.js

@@ -14,7 +14,7 @@ import { ThemeProvider } from "@stridge/noctis-design-tokens/react";
 * it for the default theme. RTL-aware primitives resolve the active direction from Base UI's
 * innermost `DirectionProvider`.
 */
-function NoctisProvider({ locale, direction, messages, theme, themeOverrides, nonce, children }) {
+function NoctisProvider({ locale, direction, messages, theme, themeOverrides, themePresets, nonce, children }) {
 	const resolvedDirection = direction ?? (isRTL(locale) ? "rtl" : "ltr");
 	const value = useMemo(() => ({
 		locale,
@@ -30,6 +30,7 @@ function NoctisProvider({ locale, direction, messages, theme, themeOverrides, no
 		children: /* @__PURE__ */ jsx(ThemeProvider, {
 			initialInput: theme,
 			overrides: themeOverrides,
+			presets: themePresets,
 			children: /* @__PURE__ */ jsx(LocaleContext.Provider, {
 				value,
 				children: /* @__PURE__ */ jsx(DirectionProvider, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stridge/noctis",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.3",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
@@ -69,9 +69,9 @@
     "culori": "4.0.2",
     "lucide-react": "1.17.0",
     "simple-icons": "16.23.0",
-    "@stridge/noctis-design-tokens": "1.0.0-beta.0",
-    "@stridge/noctis-intl": "1.0.0-beta.0",
-    "@stridge/noctis-theme-engine": "1.0.0-beta.0"
+    "@stridge/noctis-design-tokens": "1.0.0-beta.3",
+    "@stridge/noctis-theme-engine": "1.0.0-beta.3",
+    "@stridge/noctis-intl": "1.0.0-beta.3"
   },
   "peerDependencies": {
     "react": "19.2.7",
@@ -106,6 +106,7 @@
     "tsdown": "0.21.10",
     "typescript": "6.0.3",
     "vitest": "4.1.8",
+    "@vitest/coverage-v8": "4.1.8",
     "@stridge/noctis-typescript": "0.0.0",
     "@stridge/noctis-test-utils": "0.0.0"
   },
@@ -115,7 +116,7 @@
     "check:publint": "publint",
     "check:size": "size-limit",
     "check:publish": "pnpm run check:publint && pnpm run check:size",
-    "test": "vitest --run",
+    "test": "vitest --run --coverage --maxWorkers=2",
     "primitives:gen": "node scripts/generate-primitives.mjs"
   }
 }