chroma-panel 0.1.0

package/dist/core/styleInjector.cjs

@@ -0,0 +1,38 @@
+//#region src/core/styleInjector.ts
+let nonceProvider = null;
+function setStyleNonce(provider) {
+	nonceProvider = typeof provider === "function" ? provider : () => provider;
+}
+const injectedByRoot = /* @__PURE__ */ new WeakMap();
+function containerFor(root) {
+	if (typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot) return root;
+	const doc = root.head !== void 0 ? root : document;
+	return doc.head ?? doc.documentElement ?? null;
+}
+function injectStyles(css, id, node) {
+	if (typeof document === "undefined") return;
+	const root = node?.getRootNode?.() ?? document;
+	let seen = injectedByRoot.get(root);
+	if (seen === void 0) {
+		seen = /* @__PURE__ */ new Set();
+		injectedByRoot.set(root, seen);
+	}
+	if (seen.has(id)) return;
+	const container = containerFor(root);
+	if (container === null) return;
+	const existing = container.querySelector?.(`style[data-chroma-panel="${id}"]`);
+	if (existing !== null && existing !== void 0) {
+		seen.add(id);
+		return;
+	}
+	const style = document.createElement("style");
+	style.setAttribute("data-chroma-panel", id);
+	const nonce = nonceProvider?.();
+	if (nonce !== void 0 && nonce !== "") style.setAttribute("nonce", nonce);
+	style.appendChild(document.createTextNode(css));
+	container.appendChild(style);
+	seen.add(id);
+}
+//#endregion
+exports.injectStyles = injectStyles;
+exports.setStyleNonce = setStyleNonce;

package/dist/core/styleInjector.d.cts

@@ -0,0 +1,4 @@
+//#region src/core/styleInjector.d.ts
+export declare function setStyleNonce(provider: string | (() => string | undefined)): void;
+export declare function injectStyles(css: string, id: string, node?: Node | null): void;
+//#endregion

package/dist/core/styleInjector.d.ts

@@ -0,0 +1,4 @@
+//#region src/core/styleInjector.d.ts
+export declare function setStyleNonce(provider: string | (() => string | undefined)): void;
+export declare function injectStyles(css: string, id: string, node?: Node | null): void;
+//#endregion

package/dist/core/styleInjector.js

@@ -0,0 +1,38 @@
+//#region src/core/styleInjector.ts
+let nonceProvider = null;
+function setStyleNonce(provider) {
+	nonceProvider = typeof provider === "function" ? provider : () => provider;
+}
+const injectedByRoot = /* @__PURE__ */ new WeakMap();
+function containerFor(root) {
+	if (typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot) return root;
+	const doc = root.head !== void 0 ? root : document;
+	return doc.head ?? doc.documentElement ?? null;
+}
+function injectStyles(css, id, node) {
+	if (typeof document === "undefined") return;
+	const root = node?.getRootNode?.() ?? document;
+	let seen = injectedByRoot.get(root);
+	if (seen === void 0) {
+		seen = /* @__PURE__ */ new Set();
+		injectedByRoot.set(root, seen);
+	}
+	if (seen.has(id)) return;
+	const container = containerFor(root);
+	if (container === null) return;
+	const existing = container.querySelector?.(`style[data-chroma-panel="${id}"]`);
+	if (existing !== null && existing !== void 0) {
+		seen.add(id);
+		return;
+	}
+	const style = document.createElement("style");
+	style.setAttribute("data-chroma-panel", id);
+	const nonce = nonceProvider?.();
+	if (nonce !== void 0 && nonce !== "") style.setAttribute("nonce", nonce);
+	style.appendChild(document.createTextNode(css));
+	container.appendChild(style);
+	seen.add(id);
+}
+//#endregion
+export { injectStyles, setStyleNonce };
+

package/dist/core/useColorStore.cjs

@@ -0,0 +1,43 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/core/useColorStore.ts
+function useSyncExternalStoreFallback(subscribe, getSnapshot) {
+	const value = getSnapshot();
+	const [, force] = react.useState(0);
+	const latest = react.useRef(value);
+	react.useEffect(() => {
+		latest.current = value;
+	});
+	react.useEffect(() => {
+		const check = () => {
+			const next = getSnapshot();
+			if (!Object.is(latest.current, next)) {
+				latest.current = next;
+				force((n) => n + 1);
+			}
+		};
+		check();
+		return subscribe(check);
+	}, [subscribe, getSnapshot]);
+	return value;
+}
+const useSyncExternal = react.useSyncExternalStore ?? useSyncExternalStoreFallback;
+function useColorValue(store) {
+	return useSyncExternal(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+}
+function useTransientColor(store, effect) {
+	const latest = react.useRef(effect);
+	react.useEffect(() => {
+		latest.current = effect;
+	});
+	react.useEffect(() => {
+		const run = (color) => latest.current(color);
+		run(store.get());
+		return store.subscribe(run);
+	}, [store]);
+}
+//#endregion
+exports.useColorValue = useColorValue;
+exports.useTransientColor = useTransientColor;

package/dist/core/useColorStore.d.cts

@@ -0,0 +1,6 @@
+import { Hsva } from "../color/types.cjs";
+import { ColorStore } from "./store.cjs";
+//#region src/core/useColorStore.d.ts
+export declare function useColorValue(store: ColorStore): Hsva;
+export declare function useTransientColor(store: ColorStore, effect: (color: Hsva) => void): void;
+//#endregion

package/dist/core/useColorStore.d.ts

@@ -0,0 +1,6 @@
+import { Hsva } from "../color/types.js";
+import { ColorStore } from "./store.js";
+//#region src/core/useColorStore.d.ts
+export declare function useColorValue(store: ColorStore): Hsva;
+export declare function useTransientColor(store: ColorStore, effect: (color: Hsva) => void): void;
+//#endregion

package/dist/core/useColorStore.js

@@ -0,0 +1,41 @@
+"use client";
+import * as React from "react";
+//#region src/core/useColorStore.ts
+function useSyncExternalStoreFallback(subscribe, getSnapshot) {
+	const value = getSnapshot();
+	const [, force] = React.useState(0);
+	const latest = React.useRef(value);
+	React.useEffect(() => {
+		latest.current = value;
+	});
+	React.useEffect(() => {
+		const check = () => {
+			const next = getSnapshot();
+			if (!Object.is(latest.current, next)) {
+				latest.current = next;
+				force((n) => n + 1);
+			}
+		};
+		check();
+		return subscribe(check);
+	}, [subscribe, getSnapshot]);
+	return value;
+}
+const useSyncExternal = React.useSyncExternalStore ?? useSyncExternalStoreFallback;
+function useColorValue(store) {
+	return useSyncExternal(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+}
+function useTransientColor(store, effect) {
+	const latest = React.useRef(effect);
+	React.useEffect(() => {
+		latest.current = effect;
+	});
+	React.useEffect(() => {
+		const run = (color) => latest.current(color);
+		run(store.get());
+		return store.subscribe(run);
+	}, [store]);
+}
+//#endregion
+export { useColorValue, useTransientColor };
+

package/dist/core/useFormControl.cjs

@@ -0,0 +1,87 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/core/useFormControl.ts
+function setNativeValue(input, value) {
+	Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set?.call(input, value);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function useFormReset(ref, onReset) {
+	const latest = react.useRef(onReset);
+	react.useEffect(() => {
+		latest.current = onReset;
+	});
+	react.useEffect(() => {
+		const form = ref.current?.form;
+		if (form === null || form === void 0) return;
+		const handle = (event) => {
+			if (event.defaultPrevented) return;
+			latest.current();
+		};
+		form.addEventListener("reset", handle);
+		return () => form.removeEventListener("reset", handle);
+	}, [ref]);
+}
+function useFieldsetDisabled(ref) {
+	const [disabled, setDisabled] = react.useState(false);
+	react.useEffect(() => {
+		const fieldset = ref.current?.closest("fieldset");
+		if (fieldset === null || fieldset === void 0) {
+			setDisabled(false);
+			return;
+		}
+		setDisabled(fieldset.disabled);
+		const observer = new MutationObserver(() => setDisabled(fieldset.disabled));
+		observer.observe(fieldset, {
+			attributes: true,
+			attributeFilter: ["disabled"]
+		});
+		return () => observer.disconnect();
+	}, [ref]);
+	return disabled;
+}
+function useConstraintValidation(ref, options) {
+	const latest = react.useRef(options);
+	react.useEffect(() => {
+		latest.current = options;
+	});
+	react.useEffect(() => {
+		const input = ref.current;
+		if (input === null) return;
+		const { behavior, required, isEmpty } = latest.current;
+		const message = behavior === "native" && required && isEmpty ? "Please choose a colour." : "";
+		input.setCustomValidity(message);
+		if (!input.hasAttribute("title")) input.title = "";
+	});
+	react.useEffect(() => {
+		const input = ref.current;
+		if (input === null) return;
+		const onInvalid = (event) => {
+			event.preventDefault();
+			latest.current.focusTrigger();
+		};
+		input.addEventListener("invalid", onInvalid);
+		return () => input.removeEventListener("invalid", onInvalid);
+	}, [ref]);
+}
+const visuallyHiddenInput = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0,
+	opacity: 0,
+	pointerEvents: "none"
+};
+//#endregion
+exports.setNativeValue = setNativeValue;
+exports.useConstraintValidation = useConstraintValidation;
+exports.useFieldsetDisabled = useFieldsetDisabled;
+exports.useFormReset = useFormReset;
+exports.visuallyHiddenInput = visuallyHiddenInput;

package/dist/core/useFormControl.js

@@ -0,0 +1,82 @@
+"use client";
+import * as React from "react";
+//#region src/core/useFormControl.ts
+function setNativeValue(input, value) {
+	Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set?.call(input, value);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function useFormReset(ref, onReset) {
+	const latest = React.useRef(onReset);
+	React.useEffect(() => {
+		latest.current = onReset;
+	});
+	React.useEffect(() => {
+		const form = ref.current?.form;
+		if (form === null || form === void 0) return;
+		const handle = (event) => {
+			if (event.defaultPrevented) return;
+			latest.current();
+		};
+		form.addEventListener("reset", handle);
+		return () => form.removeEventListener("reset", handle);
+	}, [ref]);
+}
+function useFieldsetDisabled(ref) {
+	const [disabled, setDisabled] = React.useState(false);
+	React.useEffect(() => {
+		const fieldset = ref.current?.closest("fieldset");
+		if (fieldset === null || fieldset === void 0) {
+			setDisabled(false);
+			return;
+		}
+		setDisabled(fieldset.disabled);
+		const observer = new MutationObserver(() => setDisabled(fieldset.disabled));
+		observer.observe(fieldset, {
+			attributes: true,
+			attributeFilter: ["disabled"]
+		});
+		return () => observer.disconnect();
+	}, [ref]);
+	return disabled;
+}
+function useConstraintValidation(ref, options) {
+	const latest = React.useRef(options);
+	React.useEffect(() => {
+		latest.current = options;
+	});
+	React.useEffect(() => {
+		const input = ref.current;
+		if (input === null) return;
+		const { behavior, required, isEmpty } = latest.current;
+		const message = behavior === "native" && required && isEmpty ? "Please choose a colour." : "";
+		input.setCustomValidity(message);
+		if (!input.hasAttribute("title")) input.title = "";
+	});
+	React.useEffect(() => {
+		const input = ref.current;
+		if (input === null) return;
+		const onInvalid = (event) => {
+			event.preventDefault();
+			latest.current.focusTrigger();
+		};
+		input.addEventListener("invalid", onInvalid);
+		return () => input.removeEventListener("invalid", onInvalid);
+	}, [ref]);
+}
+const visuallyHiddenInput = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0,
+	opacity: 0,
+	pointerEvents: "none"
+};
+//#endregion
+export { setNativeValue, useConstraintValidation, useFieldsetDisabled, useFormReset, visuallyHiddenInput };
+

package/dist/core/useMediaQuery.cjs

@@ -0,0 +1,48 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/core/useMediaQuery.ts
+function useSyncExternalStoreFallback(subscribe, getSnapshot) {
+	const value = getSnapshot();
+	const [, force] = react.useState(0);
+	const latest = react.useRef(value);
+	react.useEffect(() => {
+		latest.current = value;
+	});
+	react.useEffect(() => {
+		const check = () => {
+			const next = getSnapshot();
+			if (!Object.is(latest.current, next)) {
+				latest.current = next;
+				force((n) => n + 1);
+			}
+		};
+		check();
+		return subscribe(check);
+	}, [subscribe, getSnapshot]);
+	return value;
+}
+const useSyncExternal = react.useSyncExternalStore ?? useSyncExternalStoreFallback;
+function useMediaQuery(query) {
+	const subscribe = react.useCallback((onChange) => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+		const list = window.matchMedia(query);
+		if (typeof list.addEventListener === "function") {
+			list.addEventListener("change", onChange);
+			return () => list.removeEventListener("change", onChange);
+		}
+		list.addListener(onChange);
+		return () => list.removeListener(onChange);
+	}, [query]);
+	const getSnapshot = react.useCallback(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+		return window.matchMedia(query).matches;
+	}, [query]);
+	const getServerSnapshot = react.useCallback(() => false, []);
+	return useSyncExternal(subscribe, getSnapshot, getServerSnapshot);
+}
+const COMPACT_QUERY = "(max-width: 640px)";
+//#endregion
+exports.COMPACT_QUERY = COMPACT_QUERY;
+exports.useMediaQuery = useMediaQuery;

package/dist/core/useMediaQuery.js

@@ -0,0 +1,46 @@
+"use client";
+import * as React from "react";
+//#region src/core/useMediaQuery.ts
+function useSyncExternalStoreFallback(subscribe, getSnapshot) {
+	const value = getSnapshot();
+	const [, force] = React.useState(0);
+	const latest = React.useRef(value);
+	React.useEffect(() => {
+		latest.current = value;
+	});
+	React.useEffect(() => {
+		const check = () => {
+			const next = getSnapshot();
+			if (!Object.is(latest.current, next)) {
+				latest.current = next;
+				force((n) => n + 1);
+			}
+		};
+		check();
+		return subscribe(check);
+	}, [subscribe, getSnapshot]);
+	return value;
+}
+const useSyncExternal = React.useSyncExternalStore ?? useSyncExternalStoreFallback;
+function useMediaQuery(query) {
+	const subscribe = React.useCallback((onChange) => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+		const list = window.matchMedia(query);
+		if (typeof list.addEventListener === "function") {
+			list.addEventListener("change", onChange);
+			return () => list.removeEventListener("change", onChange);
+		}
+		list.addListener(onChange);
+		return () => list.removeListener(onChange);
+	}, [query]);
+	const getSnapshot = React.useCallback(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+		return window.matchMedia(query).matches;
+	}, [query]);
+	const getServerSnapshot = React.useCallback(() => false, []);
+	return useSyncExternal(subscribe, getSnapshot, getServerSnapshot);
+}
+const COMPACT_QUERY = "(max-width: 640px)";
+//#endregion
+export { COMPACT_QUERY, useMediaQuery };
+

package/dist/core/usePointerDrag.cjs

@@ -0,0 +1,177 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_convert = require("../color/convert.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/core/usePointerDrag.ts
+function positionIn(element, clientX, clientY) {
+	const rect = element.getBoundingClientRect();
+	return {
+		x: rect.width === 0 ? 0 : require_convert.clamp((clientX - rect.left) / rect.width, 0, 1),
+		y: rect.height === 0 ? 0 : require_convert.clamp((clientY - rect.top) / rect.height, 0, 1)
+	};
+}
+function usePointerDrag(options) {
+	const latest = react.useRef(options);
+	react.useEffect(() => {
+		latest.current = options;
+	});
+	const frame = react.useRef(0);
+	const pending = react.useRef(null);
+	const dragging = react.useRef(false);
+	const activePointer = react.useRef(null);
+	const captured = react.useRef(false);
+	const flush = react.useCallback(() => {
+		if (frame.current !== 0) {
+			cancelAnimationFrame(frame.current);
+			frame.current = 0;
+		}
+		if (pending.current !== null) {
+			latest.current.onMove(pending.current);
+			pending.current = null;
+		}
+	}, []);
+	react.useEffect(() => {
+		return () => {
+			if (frame.current !== 0) cancelAnimationFrame(frame.current);
+		};
+	}, []);
+	const schedule = react.useCallback((position) => {
+		pending.current = position;
+		if (frame.current !== 0) return;
+		frame.current = requestAnimationFrame(() => {
+			frame.current = 0;
+			const next = pending.current;
+			pending.current = null;
+			if (next !== null) latest.current.onMove(next);
+		});
+	}, []);
+	const onPointerDown = react.useCallback((event) => {
+		if (latest.current.disabled === true) return;
+		if (event.pointerType === "mouse" && event.button !== 0) return;
+		const element = event.currentTarget;
+		try {
+			element.setPointerCapture(event.pointerId);
+			captured.current = true;
+		} catch {
+			captured.current = false;
+		}
+		event.preventDefault();
+		dragging.current = true;
+		activePointer.current = event.pointerId;
+		const position = positionIn(element, event.clientX, event.clientY);
+		latest.current.onStart?.(position);
+		latest.current.onMove(position);
+	}, []);
+	const onPointerMove = react.useCallback((event) => {
+		if (!dragging.current || latest.current.disabled === true) return;
+		if (activePointer.current !== event.pointerId) return;
+		schedule(positionIn(event.currentTarget, event.clientX, event.clientY));
+	}, [schedule]);
+	const endDrag = react.useCallback(() => {
+		if (!dragging.current) return;
+		dragging.current = false;
+		activePointer.current = null;
+		captured.current = false;
+		flush();
+		latest.current.onEnd?.();
+	}, [flush]);
+	const onLostPointerCapture = react.useCallback(() => endDrag(), [endDrag]);
+	const onPointerUp = react.useCallback((event) => {
+		if (captured.current) return;
+		if (activePointer.current !== event.pointerId) return;
+		endDrag();
+	}, [endDrag]);
+	react.useEffect(() => {
+		if (typeof document === "undefined") return;
+		const onWindowUp = (event) => {
+			if (captured.current || !dragging.current) return;
+			if (activePointer.current !== event.pointerId) return;
+			endDrag();
+		};
+		document.addEventListener("pointerup", onWindowUp);
+		document.addEventListener("pointercancel", onWindowUp);
+		return () => {
+			document.removeEventListener("pointerup", onWindowUp);
+			document.removeEventListener("pointercancel", onWindowUp);
+		};
+	}, [endDrag]);
+	return {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onLostPointerCapture,
+		style: {
+			touchAction: "none",
+			WebkitUserSelect: "none",
+			userSelect: "none",
+			WebkitTouchCallout: "none"
+		}
+	};
+}
+function useAxisKeyboard(options) {
+	const latest = react.useRef(options);
+	react.useEffect(() => {
+		latest.current = options;
+	});
+	return {
+		onKeyDown: react.useCallback((event) => {
+			const o = latest.current;
+			if (o.disabled === true) return;
+			const step = o.step ?? 1;
+			const large = o.largeStep ?? 10;
+			const axis = o.axis ?? "both";
+			const allowX = axis === "x" || axis === "both";
+			const allowY = axis === "y" || axis === "both";
+			const amount = event.shiftKey ? large : step;
+			let dx = 0;
+			let dy = 0;
+			switch (event.key) {
+				case "ArrowLeft":
+					if (allowX) dx = -amount;
+					break;
+				case "ArrowRight":
+					if (allowX) dx = amount;
+					break;
+				case "ArrowUp":
+					if (allowY) dy = amount;
+					else if (allowX) dx = amount;
+					break;
+				case "ArrowDown":
+					if (allowY) dy = -amount;
+					else if (allowX) dx = -amount;
+					break;
+				case "PageUp":
+					if (allowY) dy = large;
+					else if (allowX) dx = large;
+					break;
+				case "PageDown":
+					if (allowY) dy = -large;
+					else if (allowX) dx = -large;
+					break;
+				case "Home":
+					o.onEdge?.("min", allowX ? "x" : "y");
+					event.preventDefault();
+					return;
+				case "End":
+					o.onEdge?.("max", allowX ? "x" : "y");
+					event.preventDefault();
+					return;
+				default: return;
+			}
+			if (dx === 0 && dy === 0) return;
+			event.preventDefault();
+			o.onStep({
+				x: dx,
+				y: dy
+			});
+		}, []),
+		onKeyUp: react.useCallback((event) => {
+			const key = event.key;
+			if (key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown" || key === "PageUp" || key === "PageDown" || key === "Home" || key === "End") latest.current.onEnd?.();
+		}, [])
+	};
+}
+//#endregion
+exports.useAxisKeyboard = useAxisKeyboard;
+exports.usePointerDrag = usePointerDrag;

package/dist/core/usePointerDrag.d.cts

@@ -0,0 +1,35 @@
+import * as React from "react";
+//#region src/core/usePointerDrag.d.ts
+export interface DragPosition {
+  x: number;
+  y: number;
+}
+export interface UsePointerDragOptions {
+  onMove: (position: DragPosition) => void;
+  onStart?: (position: DragPosition) => void;
+  onEnd?: () => void;
+  disabled?: boolean;
+}
+export interface PointerDragProps {
+  onPointerDown: React.PointerEventHandler<HTMLElement>;
+  onPointerMove: React.PointerEventHandler<HTMLElement>;
+  onPointerUp: React.PointerEventHandler<HTMLElement>;
+  onLostPointerCapture: React.PointerEventHandler<HTMLElement>;
+  style: React.CSSProperties;
+}
+export declare function usePointerDrag(options: UsePointerDragOptions): PointerDragProps;
+export interface UseAxisKeyboardOptions {
+  onStep: (delta: DragPosition) => void;
+  onEdge?: (edge: "min" | "max", axis: "x" | "y") => void;
+  onEnd?: () => void;
+  step?: number;
+  largeStep?: number;
+  axis?: "x" | "y" | "both";
+  disabled?: boolean;
+}
+export interface AxisKeyboardProps {
+  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+  onKeyUp: React.KeyboardEventHandler<HTMLElement>;
+}
+export declare function useAxisKeyboard(options: UseAxisKeyboardOptions): AxisKeyboardProps;
+//#endregion