@octanejs/thinking-orbs 0.1.0

package/src/presets.ts

@@ -0,0 +1,106 @@
+// The shipped tunings: nine states × two sizes, baked from the inkform
+// mini-page tuning session. `count`/`size` are multipliers over the base
+// fine profiles; `speed` multiplies the shared clock. Resolved once per
+// (state, size) pair and cached — the render loop sees plain numbers.
+
+import type { ModeOpts } from './engine/profiles';
+import { BASE_PROFILES, scaleCounts, scaleRadii } from './engine/profiles';
+import type { OrbSize, OrbState } from './types';
+
+export type ModeKey =
+	'orbits' | 'globe' | 'rubik' | 'wave' | 'web' | 'braid' | 'ribbon' | 'ring' | 'morph';
+
+export const STATE_TO_MODE: Record<OrbState, ModeKey> = {
+	working: 'orbits',
+	searching: 'globe',
+	solving: 'rubik',
+	listening: 'wave',
+	connecting: 'web',
+	weaving: 'braid',
+	composing: 'ribbon',
+	breathing: 'ring',
+	shaping: 'morph',
+};
+
+interface Preset {
+	speed: number;
+	count: number;
+	size: number;
+	/** Extra mode opts merged verbatim after scaling. */
+	extra?: ModeOpts;
+}
+
+const PRESETS: Record<ModeKey, Record<OrbSize, Preset>> = {
+	orbits: {
+		64: { speed: 1.885, count: 1, size: 1 },
+		20: { speed: 3.9, count: 0.238, size: 2.4 },
+	},
+	globe: {
+		64: { speed: 2.015, count: 0.42, size: 1.15, extra: { scanMul: 4.08, dimBase: 0.45 } },
+		20: { speed: 2.665, count: 0.105, size: 1.75, extra: { scanMul: 4.335, dimBase: 0.45 } },
+	},
+	rubik: {
+		64: { speed: 1.82, count: 0.35, size: 1.05 },
+		20: { speed: 1.95, count: 0.088, size: 1.9 },
+	},
+	wave: {
+		64: { speed: 4.388, count: 0.341, size: 1 },
+		20: { speed: 3.998, count: 0.105, size: 1.6 },
+	},
+	web: {
+		64: { speed: 3.315, count: 1.35, size: 0.95 },
+		20: { speed: 6.63, count: 0.25, size: 1.52 },
+	},
+	braid: {
+		64: { speed: 1.625, count: 0.5, size: 1 },
+		20: { speed: 2.75, count: 0.1125, size: 1.36 },
+	},
+	ribbon: {
+		64: { speed: 2.34, count: 0.25, size: 0.85, extra: { spin: 0, bandMul: 3.9, wobMul: 1 } },
+		20: { speed: 3.12, count: 0.051, size: 1.073, extra: { spin: 0, bandMul: 4.94, wobMul: 1 } },
+	},
+	ring: {
+		64: {
+			speed: 3.24,
+			count: 0.25,
+			size: 0.956,
+			extra: { spin: 0, bandMul: 3.627, wobMul: 0.368 },
+		},
+		20: {
+			speed: 3.78,
+			count: 0.028,
+			size: 1.622,
+			extra: { spin: 0, bandMul: 3.968, wobMul: 0.565 },
+		},
+	},
+	morph: {
+		64: { speed: 2.405, count: 0.702, size: 0.395, extra: { spread: 1.45 } },
+		20: { speed: 2.08, count: 0.53, size: 1.011, extra: { spread: 1.45 } },
+	},
+};
+
+export interface Resolved {
+	mode: ModeKey;
+	speed: number;
+	opts: ModeOpts;
+}
+
+const cache = new Map<string, Resolved>();
+
+/** Resolve a (state, size) pair to its mode + fully-scaled draw options. */
+export function resolvePreset(state: OrbState, size: OrbSize): Resolved {
+	const key = `${state}-${size}`;
+	const hit = cache.get(key);
+	if (hit) return hit;
+
+	const mode = STATE_TO_MODE[state];
+	const preset = PRESETS[mode][size];
+	let opts: ModeOpts = { ...BASE_PROFILES[mode] };
+	if (preset.count !== 1) opts = scaleCounts(opts, preset.count);
+	if (preset.size !== 1) opts = scaleRadii(opts, preset.size);
+	if (preset.extra) opts = { ...opts, ...preset.extra };
+
+	const resolved: Resolved = { mode, speed: preset.speed, opts };
+	cache.set(key, resolved);
+	return resolved;
+}

package/src/theme.ts

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'octane';
+import type { OrbTheme } from './types';
+
+type RefObject<T> = { current: T | null };
+
+function ancestorTheme(el: Element | null): boolean | null {
+	let node: Element | null = el;
+	while (node) {
+		const attr = node.getAttribute('data-theme');
+		if (attr === 'dark') return true;
+		if (attr === 'light') return false;
+		if (node.classList.contains('dark')) return true;
+		if (node.classList.contains('light')) return false;
+		node = node.parentElement;
+	}
+	return null;
+}
+
+function systemDark(): boolean {
+	return typeof matchMedia === 'undefined' || matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+export function useResolvedDark(theme: OrbTheme, hostRef: RefObject<Element | null>): boolean {
+	const [dark, setDark] = useState(true);
+
+	useEffect(() => {
+		if (theme === 'dark') {
+			setDark(true);
+			return;
+		}
+		if (theme === 'light') {
+			setDark(false);
+			return;
+		}
+
+		function resolve(): void {
+			const fromTree = ancestorTheme(hostRef.current);
+			setDark(fromTree ?? systemDark());
+		}
+		resolve();
+
+		const mq =
+			typeof matchMedia !== 'undefined' ? matchMedia('(prefers-color-scheme: dark)') : null;
+		const onMq = (): void => {
+			resolve();
+		};
+		mq?.addEventListener('change', onMq);
+
+		let mo: MutationObserver | null = null;
+		if (typeof MutationObserver !== 'undefined' && hostRef.current) {
+			mo = new MutationObserver(resolve);
+			mo.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ['class', 'data-theme'],
+				subtree: true,
+			});
+		}
+
+		return () => {
+			mq?.removeEventListener('change', onMq);
+			mo?.disconnect();
+		};
+	}, [theme, hostRef]);
+
+	return dark;
+}
+
+export function useReducedMotion(): boolean {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		if (typeof matchMedia === 'undefined') return;
+		const mq = matchMedia('(prefers-reduced-motion: reduce)');
+		setReduced(mq.matches);
+		const on = (event: MediaQueryListEvent): void => {
+			setReduced(event.matches);
+		};
+		mq.addEventListener('change', on);
+		return () => {
+			mq.removeEventListener('change', on);
+		};
+	}, []);
+	return reduced;
+}

package/src/types.ts

@@ -0,0 +1,34 @@
+import type { Octane } from 'octane/jsx-runtime';
+
+export type CSSProperties = Exclude<
+	Octane.JSX.IntrinsicElements['canvas']['style'],
+	string | undefined
+>;
+
+export type OrbState =
+	| 'working'
+	| 'searching'
+	| 'solving'
+	| 'listening'
+	| 'connecting'
+	| 'weaving'
+	| 'composing'
+	| 'breathing'
+	| 'shaping';
+
+export type OrbSize = 64 | 20;
+
+export type OrbTheme = 'auto' | 'dark' | 'light';
+
+export interface ThinkingOrbProps extends Omit<
+	Octane.JSX.IntrinsicElements['canvas'],
+	'style' | 'ref'
+> {
+	state?: OrbState;
+	size?: OrbSize;
+	theme?: OrbTheme;
+	speed?: number;
+	paused?: boolean;
+	style?: CSSProperties;
+	ref?: Octane.JSX.IntrinsicElements['canvas']['ref'];
+}