ropav 0.2.0 → 0.3.0

package/dist/styles.css

@@ -0,0 +1,17 @@
+@import "@ropav/styles";
+
+/**
+ * Rules layered on top of `@ropav/styles` rather than merged into it, so each one stays
+ * separately deletable once `packages/styles` folds it in.
+ */
+@layer components {
+  /**
+   * A vertical group stacks along the block axis, so its cross axis is the one that decides
+   * button width. `.button` is `w-fit`, which would leave each button as wide as its own
+   * label and centred against the widest one - a ragged left and right edge. `min-width`
+   * squares them up without overriding the fixed width an icon-only button relies on.
+   */
+  .button-group--vertical .button {
+    @apply min-w-full;
+  }
+}

package/dist/utils/aria-hide-outside.d.ts

@@ -0,0 +1,34 @@
+export interface AriaHideOutsideOptions {
+    /** Nothing above this element is hidden. @default document.body */
+    root?: Element;
+    /**
+     * Uses `inert` instead of `aria-hidden`, which also blocks pointer interaction and focus
+     * rather than only hiding content from assistive technology.
+     */
+    shouldUseInert?: boolean;
+}
+/**
+ * Hide everything outside the given elements from assistive technology, and keep hiding anything
+ * that appears later, ported from React Aria's `ariaHideOutside`.
+ *
+ * A modal overlay looks exclusive but is not: everything behind it is still in the accessibility
+ * tree, so a screen reader can wander out of the menu and read the page underneath with no way
+ * of knowing it has left. Marking the page hidden is what makes the overlay modal in the only
+ * sense that matters to a screen reader user.
+ *
+ * The mutation observer is not defensive detail: content is added to the page while an overlay is
+ * open — another overlay, a toast, anything lazily rendered — and without watching for it that
+ * content would be readable behind the overlay.
+ *
+ * @returns A function restoring everything this call hid.
+ */
+export declare const ariaHideOutside: (targets: Element[], options?: AriaHideOutsideOptions) => (() => void);
+/**
+ * Exempt an element from the hiding the innermost call applied.
+ *
+ * A non-modal overlay — a submenu, a combobox listbox — is rendered outside the overlay that
+ * opened it, so it would be hidden along with the rest of the page.
+ *
+ * @returns A function withdrawing the exemption, or `undefined` if nothing is hiding anything.
+ */
+export declare const keepVisible: (element: Element) => (() => void) | undefined;

package/dist/utils/aria-hide-outside.js

@@ -0,0 +1,127 @@
+import { TOP_LAYER_SELECTOR } from "./top-layer.js";
+//#region src/utils/aria-hide-outside.ts
+var supportsInert = typeof HTMLElement !== "undefined" && "inert" in HTMLElement.prototype;
+/**
+* How many active calls are hiding each element.
+*
+* Two overlays can be open at once and both want the rest of the page hidden; the attribute may
+* only come off when the last of them is done. An element that was already hidden by the page
+* itself keeps a count of zero, so it is never un-hidden by this.
+*/
+var refCounts = /* @__PURE__ */ new WeakMap();
+/** Active layers, innermost last. Only the innermost watches the DOM for new content. */
+var layers = [];
+/** Content that must never be hidden, however deep in the page it sits. */
+var ALWAYS_VISIBLE_SELECTOR = `[data-live-announcer], ${TOP_LAYER_SELECTOR}`;
+var isAlwaysVisible = (node) => node instanceof HTMLElement && node.matches(ALWAYS_VISIBLE_SELECTOR);
+/**
+* Hide everything outside the given elements from assistive technology, and keep hiding anything
+* that appears later, ported from React Aria's `ariaHideOutside`.
+*
+* A modal overlay looks exclusive but is not: everything behind it is still in the accessibility
+* tree, so a screen reader can wander out of the menu and read the page underneath with no way
+* of knowing it has left. Marking the page hidden is what makes the overlay modal in the only
+* sense that matters to a screen reader user.
+*
+* The mutation observer is not defensive detail: content is added to the page while an overlay is
+* open — another overlay, a toast, anything lazily rendered — and without watching for it that
+* content would be readable behind the overlay.
+*
+* @returns A function restoring everything this call hid.
+*/
+var ariaHideOutside = (targets, options = {}) => {
+	const root = options.root ?? document.body;
+	const useInert = Boolean(options.shouldUseInert) && supportsInert;
+	const visibleNodes = new Set(targets);
+	const hiddenNodes = /* @__PURE__ */ new Set();
+	const getHidden = (element) => useInert && element instanceof HTMLElement ? element.inert : element.getAttribute("aria-hidden") === "true";
+	const setHidden = (element, hidden) => {
+		if (useInert && element instanceof HTMLElement) element.inert = hidden;
+		else if (hidden) element.setAttribute("aria-hidden", "true");
+		else {
+			element.removeAttribute("aria-hidden");
+			if (element instanceof HTMLElement) element.inert = false;
+		}
+	};
+	const hide = (node) => {
+		const refCount = refCounts.get(node) ?? 0;
+		if (getHidden(node) && refCount === 0) return;
+		if (refCount === 0) setHidden(node, true);
+		hiddenNodes.add(node);
+		refCounts.set(node, refCount + 1);
+	};
+	const walk = (from) => {
+		for (const element of from.querySelectorAll(ALWAYS_VISIBLE_SELECTOR)) visibleNodes.add(element);
+		const acceptNode = (node) => {
+			if (hiddenNodes.has(node) || visibleNodes.has(node) || node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute("role") !== "row") return NodeFilter.FILTER_REJECT;
+			for (const target of visibleNodes) if (node.contains(target)) return NodeFilter.FILTER_SKIP;
+			return NodeFilter.FILTER_ACCEPT;
+		};
+		const acceptRoot = acceptNode(from);
+		if (acceptRoot === NodeFilter.FILTER_ACCEPT) hide(from);
+		if (acceptRoot === NodeFilter.FILTER_REJECT) return;
+		const walker = document.createTreeWalker(from, NodeFilter.SHOW_ELEMENT, { acceptNode });
+		let node = walker.nextNode();
+		while (node != null) {
+			hide(node);
+			node = walker.nextNode();
+		}
+	};
+	layers.at(-1)?.disconnect();
+	walk(root);
+	const observer = new MutationObserver((changes) => {
+		for (const change of changes) {
+			if (change.type !== "childList") continue;
+			if (!change.target.isConnected) continue;
+			if ([...visibleNodes, ...hiddenNodes].some((node) => node.contains(change.target))) continue;
+			for (const node of change.addedNodes) {
+				if (!(node instanceof Element)) continue;
+				if (isAlwaysVisible(node)) visibleNodes.add(node);
+				else walk(node);
+			}
+		}
+	});
+	const layer = {
+		disconnect: () => observer.disconnect(),
+		hiddenNodes,
+		observe: () => observer.observe(root, {
+			childList: true,
+			subtree: true
+		}),
+		visibleNodes
+	};
+	layer.observe();
+	layers.push(layer);
+	return () => {
+		observer.disconnect();
+		for (const node of hiddenNodes) {
+			const count = refCounts.get(node);
+			if (count == null) continue;
+			if (count === 1) {
+				setHidden(node, false);
+				refCounts.delete(node);
+			} else refCounts.set(node, count - 1);
+		}
+		const index = layers.indexOf(layer);
+		if (index >= 0) layers.splice(index, 1);
+		layers.at(-1)?.observe();
+	};
+};
+/**
+* Exempt an element from the hiding the innermost call applied.
+*
+* A non-modal overlay — a submenu, a combobox listbox — is rendered outside the overlay that
+* opened it, so it would be hidden along with the rest of the page.
+*
+* @returns A function withdrawing the exemption, or `undefined` if nothing is hiding anything.
+*/
+var keepVisible = (element) => {
+	const layer = layers.at(-1);
+	if (!layer || layer.visibleNodes.has(element)) return void 0;
+	layer.visibleNodes.add(element);
+	return () => {
+		layer.visibleNodes.delete(element);
+	};
+};
+//#endregion
+export { ariaHideOutside, keepVisible };

package/dist/utils/assertion.d.ts

@@ -0,0 +1,9 @@
+export type Booleanish = boolean | "true" | "false";
+/**
+ * Render a boolean as a `data-*` attribute value.
+ *
+ * `true` becomes `"true"`; anything falsy becomes `undefined` so the attribute is
+ * omitted entirely. `@ropav/styles` keys on the presence of `data-*="true"`, never on
+ * `data-*="false"`.
+ */
+export declare const dataAttr: (condition: boolean | undefined) => Booleanish | undefined;

package/dist/utils/assertion.js

@@ -0,0 +1,11 @@
+//#region src/utils/assertion.ts
+/**
+* Render a boolean as a `data-*` attribute value.
+*
+* `true` becomes `"true"`; anything falsy becomes `undefined` so the attribute is
+* omitted entirely. `@ropav/styles` keys on the presence of `data-*="true"`, never on
+* `data-*="false"`.
+*/
+var dataAttr = (condition) => condition ? "true" : void 0;
+//#endregion
+export { dataAttr };

package/dist/utils/block.d.ts

@@ -0,0 +1,21 @@
+import type { Block } from "vue";
+/**
+ * The DOM nodes a Vapor block resolves to, in document order.
+ *
+ * A slot function hands back a block rather than a node: a single node for one child, an
+ * array for several, a component instance, or a fragment when the content sits behind
+ * `v-if` or is forwarded through another `<slot>`. Flattening it gives the one thing a
+ * caller can actually ask questions about.
+ *
+ * Everything read here is already rendered by the time the block is returned, so this
+ * inspects the result of a render rather than causing one.
+ */
+export declare const flattenBlock: (block: Block | undefined | null) => Node[];
+/**
+ * Whether a block is nothing but text — the Vapor equivalent of React's
+ * `typeof children === "string" || typeof children === "number"`.
+ *
+ * Empty counts as false: a component asking this is deciding whether to wrap the content,
+ * and there is nothing to wrap.
+ */
+export declare const isTextOnlyBlock: (nodes: Node[]) => boolean;

package/dist/utils/block.js

@@ -0,0 +1,30 @@
+import { isFragment, isVaporComponent } from "vue";
+//#region src/utils/block.ts
+/**
+* The DOM nodes a Vapor block resolves to, in document order.
+*
+* A slot function hands back a block rather than a node: a single node for one child, an
+* array for several, a component instance, or a fragment when the content sits behind
+* `v-if` or is forwarded through another `<slot>`. Flattening it gives the one thing a
+* caller can actually ask questions about.
+*
+* Everything read here is already rendered by the time the block is returned, so this
+* inspects the result of a render rather than causing one.
+*/
+var flattenBlock = (block) => {
+	if (block == null) return [];
+	if (Array.isArray(block)) return block.flatMap(flattenBlock);
+	if (isFragment(block)) return flattenBlock(block.nodes);
+	if (isVaporComponent(block)) return flattenBlock(block.block);
+	return [block];
+};
+/**
+* Whether a block is nothing but text — the Vapor equivalent of React's
+* `typeof children === "string" || typeof children === "number"`.
+*
+* Empty counts as false: a component asking this is deciding whether to wrap the content,
+* and there is nothing to wrap.
+*/
+var isTextOnlyBlock = (nodes) => nodes.length > 0 && nodes.every((node) => node.nodeType === Node.TEXT_NODE);
+//#endregion
+export { flattenBlock, isTextOnlyBlock };

package/dist/utils/calendar.d.ts

@@ -0,0 +1,54 @@
+import type { CalendarDate, DateDuration, DateValue } from "@internationalized/date";
+/** The day a week can be told to start on, spelled the way `@internationalized/date` spells it. */
+export type DayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+/** How wide a weekday name is written. */
+export type WeekdayStyle = "narrow" | "short" | "long";
+/** Whether a date falls outside the allowed range. */
+export declare const isDateInvalid: (date: DateValue, minValue?: DateValue | null, maxValue?: DateValue | null) => boolean;
+/**
+ * Pull an aligned range back inside `minValue`/`maxValue`.
+ *
+ * Only clamps on the side the date itself is already inside: a focused date beyond the maximum has
+ * to keep its own page visible, or the calendar would jump somewhere the user did not ask for.
+ */
+export declare const constrainStart: (date: CalendarDate, aligned: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) => CalendarDate;
+/** Align a visible range so `date` sits in its first unit. */
+export declare const alignStart: (date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) => CalendarDate;
+/** Align a visible range so `date` sits in its last unit. */
+export declare const alignEnd: (date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) => CalendarDate;
+/** Align a visible range so `date` sits in the middle of it. */
+export declare const alignCenter: (date: CalendarDate, duration: DateDuration, locale: string, minValue?: DateValue | null, maxValue?: DateValue | null) => CalendarDate;
+/** Clamp a date into the allowed range. */
+export declare const constrainValue: (date: CalendarDate, minValue?: DateValue | null, maxValue?: DateValue | null) => CalendarDate;
+/**
+ * Walk back from `date` to the nearest available day, stopping at `minValue`.
+ *
+ * Returns `null` when the whole stretch down to `minValue` is unavailable, which is what tells the
+ * caller there is nothing to select rather than to select the boundary.
+ */
+export declare const previousAvailableDate: (date: CalendarDate, minValue: DateValue, isDateUnavailable?: (date: CalendarDate) => boolean) => CalendarDate | null;
+/** Whether two visible durations span the same thing. */
+export declare const isEqualDuration: (a: DateDuration, b: DateDuration) => boolean;
+/**
+ * How far a calendar system's year numbering sits from the Gregorian one.
+ *
+ * Used to turn the default 1900–2099 Gregorian bounds into the same span of real time in whatever
+ * calendar the locale resolves to, so the year picker offers years the user recognises.
+ */
+export declare const getGregorianYearOffset: (identifier: string) => number;
+/**
+ * Every year start from `start` to `end` inclusive.
+ *
+ * Steps with calendar-aware arithmetic rather than counting integers, because a year is not a fixed
+ * number of anything in the Hebrew or Japanese calendars.
+ */
+export declare const getYearRange: (start?: DateValue | null, end?: DateValue | null) => DateValue[];
+/** The weekday names above a day view, starting from the week `start` falls in. */
+export declare const getDayViewWeekDayLabels: (start: DateValue, locale: string, firstDayOfWeek: DayOfWeek | undefined, weekdayStyle?: WeekdayStyle, timeZone?: string) => string[];
+/**
+ * Week-aligned rows for a day view.
+ *
+ * The first row starts on its week boundary rather than on `start`, so a day view lines up under
+ * the weekday names; the leading dates are rendered but fall outside the visible range.
+ */
+export declare const getDayViewGridRows: (start: DateValue, end: DateValue, locale: string, firstDayOfWeek?: DayOfWeek) => (DateValue | null)[][];

package/dist/utils/calendar.js

@@ -0,0 +1,165 @@
+import { isSameDay, maxDate, minDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
+//#region src/utils/calendar.ts
+/** Whether a date falls outside the allowed range. */
+var isDateInvalid = (date, minValue, maxValue) => minValue != null && date.compare(minValue) < 0 || maxValue != null && date.compare(maxValue) > 0;
+/**
+* Pull an aligned range back inside `minValue`/`maxValue`.
+*
+* Only clamps on the side the date itself is already inside: a focused date beyond the maximum has
+* to keep its own page visible, or the calendar would jump somewhere the user did not ask for.
+*/
+var constrainStart = (date, aligned, duration, locale, minValue, maxValue) => {
+	let result = aligned;
+	if (minValue && date.compare(minValue) >= 0) {
+		const next = maxDate(result, alignStart(toCalendarDate(minValue), duration, locale));
+		if (next) result = next;
+	}
+	if (maxValue && date.compare(maxValue) <= 0) {
+		const next = minDate(result, alignEnd(toCalendarDate(maxValue), duration, locale));
+		if (next) result = next;
+	}
+	return result;
+};
+/** Align a visible range so `date` sits in its first unit. */
+var alignStart = (date, duration, locale, minValue, maxValue) => {
+	let aligned = date;
+	if (duration.years) aligned = startOfYear(date);
+	else if (duration.months) aligned = startOfMonth(date);
+	else if (duration.weeks || duration.days && duration.days > 7) aligned = startOfWeek(date, locale);
+	return constrainStart(date, aligned, duration, locale, minValue, maxValue);
+};
+/** Align a visible range so `date` sits in its last unit. */
+var alignEnd = (date, duration, locale, minValue, maxValue) => {
+	const rest = { ...duration };
+	if (rest.days) rest.days--;
+	else if (rest.weeks) rest.weeks--;
+	else if (rest.months) rest.months--;
+	else if (rest.years) rest.years--;
+	return constrainStart(date, alignStart(date, duration, locale).subtract(rest), duration, locale, minValue, maxValue);
+};
+/** Align a visible range so `date` sits in the middle of it. */
+var alignCenter = (date, duration, locale, minValue, maxValue) => {
+	const half = {};
+	for (const key of Object.keys(duration)) {
+		const value = duration[key] ?? 0;
+		half[key] = Math.floor(value / 2);
+		if (half[key] > 0 && value % 2 === 0) half[key]--;
+	}
+	return constrainStart(date, alignStart(date, duration, locale).subtract(half), duration, locale, minValue, maxValue);
+};
+/** Clamp a date into the allowed range. */
+var constrainValue = (date, minValue, maxValue) => {
+	let result = date;
+	if (minValue) {
+		const next = maxDate(result, toCalendarDate(minValue));
+		if (next) result = next;
+	}
+	if (maxValue) {
+		const next = minDate(result, toCalendarDate(maxValue));
+		if (next) result = next;
+	}
+	return result;
+};
+/**
+* Walk back from `date` to the nearest available day, stopping at `minValue`.
+*
+* Returns `null` when the whole stretch down to `minValue` is unavailable, which is what tells the
+* caller there is nothing to select rather than to select the boundary.
+*/
+var previousAvailableDate = (date, minValue, isDateUnavailable) => {
+	if (!isDateUnavailable) return date;
+	let result = date;
+	while (result.compare(minValue) >= 0 && isDateUnavailable(result)) result = result.subtract({ days: 1 });
+	return result.compare(minValue) >= 0 ? result : null;
+};
+/** Whether two visible durations span the same thing. */
+var isEqualDuration = (a, b) => a === b || a.days === b.days && a.weeks === b.weeks && a.months === b.months && a.years === b.years;
+/**
+* How far a calendar system's year numbering sits from the Gregorian one.
+*
+* Used to turn the default 1900–2099 Gregorian bounds into the same span of real time in whatever
+* calendar the locale resolves to, so the year picker offers years the user recognises.
+*/
+var getGregorianYearOffset = (identifier) => {
+	switch (identifier) {
+		case "buddhist": return 543;
+		case "ethiopic":
+		case "ethioaa": return -8;
+		case "coptic": return -284;
+		case "hebrew": return 3760;
+		case "indian": return -78;
+		case "islamic-civil":
+		case "islamic-tbla":
+		case "islamic-umalqura": return -579;
+		case "persian": return -600;
+		default: return 0;
+	}
+};
+/**
+* Every year start from `start` to `end` inclusive.
+*
+* Steps with calendar-aware arithmetic rather than counting integers, because a year is not a fixed
+* number of anything in the Hebrew or Japanese calendars.
+*/
+var getYearRange = (start, end) => {
+	const years = [];
+	if (!start || !end) return years;
+	let current = startOfYear(start);
+	while (current.compare(end) <= 0) {
+		years.push(current);
+		current = startOfYear(current.add({ years: 1 }));
+	}
+	return years;
+};
+/** The weekday names above a day view, starting from the week `start` falls in. */
+var getDayViewWeekDayLabels = (start, locale, firstDayOfWeek, weekdayStyle = "short", timeZone = "UTC") => {
+	const formatter = new Intl.DateTimeFormat(locale, {
+		timeZone,
+		weekday: weekdayStyle
+	});
+	const labels = [];
+	let date = startOfWeek(start, locale, firstDayOfWeek);
+	for (let index = 0; index < 7; index++) {
+		labels.push(formatter.format(date.toDate(timeZone)));
+		const next = date.add({ days: 1 });
+		if (isSameDay(date, next)) break;
+		date = next;
+	}
+	while (labels.length < 7) labels.push("");
+	return labels;
+};
+var buildDayViewWeekRow = (rowStart, end) => {
+	const row = [];
+	let date = rowStart;
+	for (let index = 0; index < 7; index++) {
+		row.push(date.compare(end) > 0 ? null : date);
+		const next = date.add({ days: 1 });
+		if (isSameDay(date, next)) {
+			while (row.length < 7) row.push(null);
+			return row;
+		}
+		date = next;
+	}
+	return row;
+};
+/**
+* Week-aligned rows for a day view.
+*
+* The first row starts on its week boundary rather than on `start`, so a day view lines up under
+* the weekday names; the leading dates are rendered but fall outside the visible range.
+*/
+var getDayViewGridRows = (start, end, locale, firstDayOfWeek) => {
+	const rows = [];
+	let rowStart = startOfWeek(start, locale, firstDayOfWeek);
+	rows.push(buildDayViewWeekRow(rowStart, end));
+	rowStart = rowStart.add({ weeks: 1 });
+	while (rowStart.compare(end) <= 0) {
+		rows.push(buildDayViewWeekRow(rowStart, end));
+		const nextWeek = rowStart.add({ weeks: 1 });
+		if (isSameDay(rowStart, nextWeek)) break;
+		rowStart = nextWeek;
+	}
+	return rows;
+};
+//#endregion
+export { alignCenter, alignEnd, alignStart, constrainStart, constrainValue, getDayViewGridRows, getDayViewWeekDayLabels, getGregorianYearOffset, getYearRange, isDateInvalid, isEqualDuration, previousAvailableDate };

package/dist/utils/color-oklch.d.ts

@@ -0,0 +1,40 @@
+/**
+ * sRGB → OKLCH, and the hue table a colour name is bucketed into.
+ *
+ * Ported from React Stately's `color/Color.ts` (react-stately 3.49.0), which in turn follows the
+ * conversion code in https://www.w3.org/TR/css-color-4/#color-conversion-code.
+ *
+ * Why OKLCH and not HSL: naming a colour needs *perceptual* lightness. In HSL, `hsl(60, 100%, 50%)`
+ * and `hsl(240, 100%, 50%)` claim the same lightness while yellow reads as bright and blue as dark,
+ * so a name derived from HSL calls both "yellow" and "blue" mid-lightness and gets one of them
+ * badly wrong. OKLCH's L is uniform across hues, so a single set of thresholds works everywhere.
+ *
+ * Kept out of `utils/index.ts`: this is the colour model's internal machinery, not API.
+ */
+/** Lightness threshold between orange and brown. */
+export declare const ORANGE_LIGHTNESS_THRESHOLD = 0.68;
+/** Lightness threshold between pure yellow and "yellow green". */
+export declare const YELLOW_GREEN_LIGHTNESS_THRESHOLD = 0.85;
+/** The maximum lightness considered to be "dark". */
+export declare const MAX_DARK_LIGHTNESS = 0.55;
+/** The chroma threshold between gray and colour. */
+export declare const GRAY_THRESHOLD = 0.001;
+/**
+ * Hue buckets, as `[degree at which the name starts, name]`.
+ *
+ * Uneven on purpose — the spans track how wide each hue reads to the eye in OKLCH, so blue owns
+ * 89° (175–264) while red owns 33° (15–48). `pink` appears twice because the wheel wraps.
+ */
+export declare const OKLCH_HUES: ReadonlyArray<readonly [number, string]>;
+type Triple = [number, number, number];
+/** Gamma-encoded sRGB in 0–1 to linear-light sRGB. */
+export declare const linearizeSRGB: (r: number, g: number, b: number) => Triple;
+/** Linear-light sRGB to CIE XYZ, using sRGB's own white point D65 (no chromatic adaptation). */
+export declare const linearSRGBToXYZ: (r: number, g: number, b: number) => Triple;
+/** CIE XYZ relative to D65 to OKLab. */
+export declare const xyzToOKLab: (x: number, y: number, z: number) => Triple;
+/** OKLab to OKLCH: `[lightness, chroma, hue in degrees 0–360)]`. */
+export declare const okLabToOKLCH: (l: number, a: number, b: number) => Triple;
+/** sRGB channels in 0–255 to OKLCH. */
+export declare const rgbToOKLCH: (red: number, green: number, blue: number) => Triple;
+export {};

package/dist/utils/color-oklch.js

@@ -0,0 +1,120 @@
+//#region src/utils/color-oklch.ts
+/**
+* sRGB → OKLCH, and the hue table a colour name is bucketed into.
+*
+* Ported from React Stately's `color/Color.ts` (react-stately 3.49.0), which in turn follows the
+* conversion code in https://www.w3.org/TR/css-color-4/#color-conversion-code.
+*
+* Why OKLCH and not HSL: naming a colour needs *perceptual* lightness. In HSL, `hsl(60, 100%, 50%)`
+* and `hsl(240, 100%, 50%)` claim the same lightness while yellow reads as bright and blue as dark,
+* so a name derived from HSL calls both "yellow" and "blue" mid-lightness and gets one of them
+* badly wrong. OKLCH's L is uniform across hues, so a single set of thresholds works everywhere.
+*
+* Kept out of `utils/index.ts`: this is the colour model's internal machinery, not API.
+*/
+/** Lightness threshold between orange and brown. */
+var ORANGE_LIGHTNESS_THRESHOLD = .68;
+/** Lightness threshold between pure yellow and "yellow green". */
+var YELLOW_GREEN_LIGHTNESS_THRESHOLD = .85;
+/** The maximum lightness considered to be "dark". */
+var MAX_DARK_LIGHTNESS = .55;
+/** The chroma threshold between gray and colour. */
+var GRAY_THRESHOLD = .001;
+/**
+* Hue buckets, as `[degree at which the name starts, name]`.
+*
+* Uneven on purpose — the spans track how wide each hue reads to the eye in OKLCH, so blue owns
+* 89° (175–264) while red owns 33° (15–48). `pink` appears twice because the wheel wraps.
+*/
+var OKLCH_HUES = Object.freeze([
+	Object.freeze([0, "pink"]),
+	Object.freeze([15, "red"]),
+	Object.freeze([48, "orange"]),
+	Object.freeze([94, "yellow"]),
+	Object.freeze([135, "green"]),
+	Object.freeze([175, "cyan"]),
+	Object.freeze([264, "blue"]),
+	Object.freeze([284, "purple"]),
+	Object.freeze([320, "magenta"]),
+	Object.freeze([349, "pink"])
+]);
+var multiplyMatrix = (m, x, y, z) => [
+	m[0] * x + m[1] * y + m[2] * z,
+	m[3] * x + m[4] * y + m[5] * z,
+	m[6] * x + m[7] * y + m[8] * z
+];
+/**
+* Undo sRGB's transfer function for one component.
+*
+* The sign is carried separately so out-of-gamut negatives reflect through the origin rather than
+* producing `NaN` from a fractional power of a negative number.
+*/
+var linearizeComponent = (value) => {
+	const sign = value < 0 ? -1 : 1;
+	const abs = Math.abs(value);
+	if (abs <= .04045) return value / 12.92;
+	return sign * Math.pow((abs + .055) / 1.055, 2.4);
+};
+/** Gamma-encoded sRGB in 0–1 to linear-light sRGB. */
+var linearizeSRGB = (r, g, b) => [
+	linearizeComponent(r),
+	linearizeComponent(g),
+	linearizeComponent(b)
+];
+/** Linear-light sRGB to CIE XYZ, using sRGB's own white point D65 (no chromatic adaptation). */
+var linearSRGBToXYZ = (r, g, b) => multiplyMatrix([
+	506752 / 1228815,
+	87881 / 245763,
+	12673 / 70218,
+	87098 / 409605,
+	175762 / 245763,
+	12673 / 175545,
+	7918 / 409605,
+	87881 / 737289,
+	1001167 / 1053270
+], r, g, b);
+/** CIE XYZ relative to D65 to OKLab. */
+var xyzToOKLab = (x, y, z) => {
+	const xyzToLMS = [
+		.819022437996703,
+		.3619062600528904,
+		-.1288737815209879,
+		.0329836539323885,
+		.9292868615863434,
+		.0361446663506424,
+		.0481771893596242,
+		.2642395317527308,
+		.6335478284694309
+	];
+	const lmsToOKLab = [
+		.210454268309314,
+		.7936177747023054,
+		-.0040720430116193,
+		1.9779985324311684,
+		-2.42859224204858,
+		.450593709617411,
+		.0259040424655478,
+		.7827717124575296,
+		-.8086757549230774
+	];
+	const [a, b, c] = multiplyMatrix(xyzToLMS, x, y, z);
+	return multiplyMatrix(lmsToOKLab, Math.cbrt(a), Math.cbrt(b), Math.cbrt(c));
+};
+/** OKLab to OKLCH: `[lightness, chroma, hue in degrees 0–360)]`. */
+var okLabToOKLCH = (l, a, b) => {
+	const hue = Math.atan2(b, a) * 180 / Math.PI;
+	return [
+		l,
+		Math.sqrt(a ** 2 + b ** 2),
+		hue >= 0 ? hue : hue + 360
+	];
+};
+/** sRGB channels in 0–255 to OKLCH. */
+var rgbToOKLCH = (red, green, blue) => {
+	const [r, g, b] = linearizeSRGB(red / 255, green / 255, blue / 255);
+	const [x, y, z] = linearSRGBToXYZ(r, g, b);
+	const [l, a, bb] = xyzToOKLab(x, y, z);
+	return okLabToOKLCH(l, a, bb);
+};
+//#endregion
+export { GRAY_THRESHOLD, MAX_DARK_LIGHTNESS, OKLCH_HUES, ORANGE_LIGHTNESS_THRESHOLD, YELLOW_GREEN_LIGHTNESS_THRESHOLD, linearSRGBToXYZ, linearizeSRGB, okLabToOKLCH, rgbToOKLCH, xyzToOKLab };