@gadxr/ui 0.0.0-stage → 0.1.0

package/dist/ProgressBar.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">// Base UI-style ProgressBar: how far along something is (a download, a vote, loading).
+// `infinite` when there's no known amount: a segment sweeps back and forth instead.
+// Optional header row: `label` on the left, the percentage on the right (`showValue`).
+import { ensure3d } from "./aframe";
+import { sliderFraction } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { setStack, useSlot } from "./layout.svelte";
+import Text from "./Text.svelte";
+const theme = getTheme();
+let { value = 0, max = 100, infinite = false, size = "medium", label = "", showValue = false, color, width = theme().progressBar.width, dimension, style: userStyle = "", ...rest } = $props();
+const t = $derived(theme());
+const tk = $derived(t.progressBar);
+const fill = $derived(color ?? t.colors.progressBar.fill);
+const fraction = $derived(sliderFraction(value, 0, max));
+const percent = $derived(`${Math.round(fraction * 100)}%`);
+const font = $derived(t.typography[tk.typography]);
+const hasHeader = $derived(!!label || showValue && !infinite);
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+// ---- 3D ----
+const m = (px) => px * t.space3d.metersPerPx;
+if (is3d) ensure3d();
+const W = $derived(m(width));
+const barH = $derived(m(tk.sizes[size]));
+const headerH = $derived(hasHeader ? m(font.lineHeight) * t.space3d.textScale : 0);
+const headerGap = $derived(hasHeader ? m(tk.gap) : 0);
+const box = $derived({
+	width: W,
+	height: headerH + headerGap + barH
+});
+const slot = is3d ? useSlot(() => box) : () => ({
+	x: 0,
+	y: 0
+});
+// The header Texts inside are placed by hand, not by a parent Panel's stack.
+setStack(undefined);
+const barY = $derived(-box.height / 2 + barH / 2);
+const headerY = $derived(box.height / 2 - headerH / 2);
+const depth = .01;
+const segment = $derived(W * tk.segment);
+const sweep = $derived(`property: position; from: ${-W / 2} ${-barH / 2} 0.001; to: ${W / 2 - segment} ${-barH / 2} 0.001; dur: ${tk.duration}; dir: alternate; loop: true; easing: easeInOutSine`);
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">
+			{#if hasHeader}
+				<a-entity position="0 {headerY} 0">
+					{#if label}
+						<Text variant={tk.typography} text={label} align="left" position="{-W / 2} 0 0" />
+					{/if}
+					{#if showValue && !infinite}
+						<Text variant={tk.typography} text={percent} align="right" color={t.colors.contentSecondary} position="{W / 2} 0 0" />
+					{/if}
+				</a-entity>
+			{/if}
+			<a-entity position="0 {barY} 0">
+				<a-entity
+					rounded="width: {W}; height: {barH}; depth: {depth}; radius: {barH / 2}; color: {t.colors.progressBar.track}"
+					position="{-W / 2} {-barH / 2} 0"
+				></a-entity>
+				{#if infinite}
+					<!-- Keyed on the sweep so a size change restarts it from the new ends. -->
+					{#key sweep}
+						<a-entity position="{-W / 2} {-barH / 2} 0.001" animation__sweep={sweep}>
+							<a-entity rounded="width: {segment}; height: {barH}; depth: {depth}; radius: {barH / 2}; color: {fill}"></a-entity>
+						</a-entity>
+					{/key}
+				{:else}
+					<a-entity
+						rounded="width: {Math.max(W * fraction, 0.0001)}; height: {barH}; depth: {depth}; radius: {barH / 2}; color: {fill}; enabled: {fraction > 0}"
+						position="{-W / 2} {-barH / 2} 0.001"
+					></a-entity>
+				{/if}
+			</a-entity>
+		</a-entity>
+	</a-entity>
+{:else}
+	<div
+		class="ui-progress"
+		role="progressbar"
+		aria-label={label || undefined}
+		aria-valuemin={0}
+		aria-valuemax={max}
+		aria-valuenow={infinite ? undefined : Math.min(max, Math.max(0, value))}
+		style="--ui-width: {width}px; --ui-bar: {tk.sizes[size]}px; --ui-track: {t.colors.progressBar.track}; --ui-fill: {fill}; --ui-pct: {fraction * 100}%; --ui-segment: {tk.segment * 100}%; --ui-duration: {tk.duration}ms; --ui-gap: {tk.gap}px; --ui-font: {font.fontWeight} {font.fontSize}px/{font.lineHeight}px {t.typography.fontFamily}; --ui-label: {t.colors.contentPrimary}; --ui-value: {t.colors.contentSecondary}; {userStyle}"
+		{...rest}
+	>
+		{#if hasHeader}
+			<span class="header">
+				<span>{label}</span>
+				{#if showValue && !infinite}<span class="value">{percent}</span>{/if}
+			</span>
+		{/if}
+		<span class="track"><span class="fill" class:infinite></span></span>
+	</div>
+{/if}
+
+<style>
+	.ui-progress {
+		display: inline-flex;
+		flex-direction: column;
+		gap: var(--ui-gap);
+		width: var(--ui-width);
+		font: var(--ui-font);
+		color: var(--ui-label);
+	}
+	.header {
+		display: flex;
+		justify-content: space-between;
+	}
+	.value {
+		color: var(--ui-value);
+		font-variant-numeric: tabular-nums;
+	}
+	.track {
+		position: relative;
+		display: block;
+		height: var(--ui-bar);
+		border-radius: var(--ui-bar);
+		background: var(--ui-track);
+		overflow: hidden;
+	}
+	.fill {
+		position: absolute;
+		inset: 0 auto 0 0;
+		width: var(--ui-pct);
+		border-radius: inherit;
+		background: var(--ui-fill);
+		transition: width 0.2s ease-out;
+	}
+	.fill.infinite {
+		width: var(--ui-segment);
+		animation: ui-progress-sweep var(--ui-duration) ease-in-out infinite alternate;
+	}
+	@keyframes ui-progress-sweep {
+		from {
+			left: 0;
+		}
+		to {
+			left: calc(100% - var(--ui-segment));
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.fill {
+			transition: none;
+		}
+		.fill.infinite {
+			animation-duration: calc(var(--ui-duration) * 3);
+		}
+	}
+</style>

package/dist/ProgressBar.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Dimension, ProgressBarSize } from './theme';
+type Props = {
+    value?: number;
+    max?: number;
+    infinite?: boolean;
+    size?: ProgressBarSize;
+    label?: string;
+    showValue?: boolean;
+    color?: string;
+    width?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/RadialMenu.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">// A radial (pie) menu: hold to open, aim at a wedge, release to pick.
+//   <RadialMenu items={emotes} onselect={(item, i) => …} hotkey="e" />                 (desktop)
+//   <RadialMenu items={emotes} onselect={…} controller="#leftHand" hand="left" dimension="3d" />  (VR)
+// Same `items` as Menu (dividers are skipped). Ways to drive it:
+//   VR: `controller` — `openOn` (trigger down) opens, the thumbstick aims, `closeOn` picks.
+//   Desktop: hold `hotkey`; the ring opens at the pointer, moving the pointer aims,
+//            releasing picks. Clicking or hovering a wedge (mouse or 3D cursor/laser) works too.
+//   Keyboard while open: arrows move around the ring, Enter picks, Escape cancels.
+//   Or control it yourself with `bind:open`.
+import { untrack } from "svelte";
+import { ensure3d } from "./aframe";
+import { getDimension, getTheme } from "./context";
+import { font3d } from "./fonts";
+import { ON_CONTROLLER, polar, RadialInput, sectorAngle, sectorPath, wedgeCenter } from "./radial-math";
+import StackScope from "./StackScope.svelte";
+const theme = getTheme();
+let { items, onselect, open = $bindable(false), disabled = false, startAngle, angleOffset, deadzone = .5, controller, hand = "right", openOn = "triggerdown", closeOn = "triggerup", hotkey, radius, innerRadius, labelRotation, dimension, ...rest } = $props();
+// svelte-ignore state_referenced_locally
+const onController = dimension !== "2d" && !!controller;
+// svelte-ignore state_referenced_locally
+const defaults = ON_CONTROLLER[hand];
+const fallback = (key) => onController ? defaults[key] : undefined;
+const ringRadius = $derived(radius ?? fallback("radius") ?? theme().radial.radius);
+const stickOffset = $derived(angleOffset ?? fallback("angleOffset") ?? 0);
+const labelTurn = $derived(labelRotation ?? fallback("labelRotation") ?? 0);
+const placement = $derived({
+	position: rest.position ?? fallback("position"),
+	rotation: rest.rotation ?? fallback("rotation")
+});
+const t = $derived(theme());
+const c = $derived(t.colors.radial);
+const wedges = $derived(items.filter((item) => !("divider" in item)));
+const layout = $derived({
+	count: wedges.length,
+	startAngle: startAngle ?? fallback("startAngle") ?? 90 - sectorAngle(Math.max(1, wedges.length)) / 2
+});
+const inner = $derived(innerRadius ?? fallback("innerRadius") ?? ringRadius * (t.radial.innerRadius / t.radial.radius));
+const font = $derived(t.typography[t.radial.typography]);
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+if (is3d) ensure3d();
+// ---- input (shared) ----
+const input = new RadialInput({
+	count: 0,
+	startAngle: 0
+}, .5);
+let selected = $state(-1);
+$effect(() => {
+	input.layout = layout;
+	input.disabled = (i) => !!wedges[i]?.disabled;
+});
+let pointer = {
+	x: innerWidth / 2,
+	y: innerHeight / 2
+};
+let center = $state({
+	x: 0,
+	y: 0
+});
+function begin() {
+	if (disabled || input.open) return;
+	input.start();
+	selected = -1;
+	center = clampToView(pointer);
+	open = true;
+}
+function sync() {
+	selected = input.selected;
+}
+function finish() {
+	const index = input.release();
+	selected = -1;
+	open = false;
+	if (index >= 0) onselect?.(wedges[index], index);
+}
+function cancel() {
+	input.cancel();
+	selected = -1;
+	open = false;
+}
+// `bind:open` from outside opens/closes it too (closing that way picks nothing).
+$effect(() => {
+	const wanted = open;
+	untrack(() => {
+		if (wanted && !input.open) begin();
+		if (!wanted && input.open) cancel();
+	});
+});
+function clampToView(p) {
+	const r = ringRadius + 8;
+	return {
+		x: Math.min(Math.max(p.x, r), innerWidth - r),
+		y: Math.min(Math.max(p.y, r), innerHeight - r)
+	};
+}
+// ---- desktop: hotkey, pointer, keyboard ----
+const typing = (e) => e.target?.closest?.("input, textarea, [contenteditable]");
+function onkeydown(event) {
+	if (hotkey && event.key.toLowerCase() === hotkey.toLowerCase() && !event.repeat && !typing(event)) begin();
+	if (!input.open) return;
+	const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? -1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? 1 : 0;
+	if (step) {
+		event.preventDefault();
+		// Left / Up go counterclockwise, Right / Down clockwise, skipping disabled wedges.
+		const n = wedges.length;
+		let i = selected;
+		for (let k = 0; k < n; k++) {
+			i = i < 0 ? step > 0 ? 0 : n - 1 : (i + step + n) % n;
+			if (!wedges[i].disabled) {
+				input.point(i);
+				break;
+			}
+		}
+		sync();
+	} else if (event.key === "Enter" || event.key === " ") {
+		event.preventDefault();
+		finish();
+	} else if (event.key === "Escape") {
+		cancel();
+	}
+}
+function onkeyup(event) {
+	if (hotkey && input.open && event.key.toLowerCase() === hotkey.toLowerCase()) finish();
+}
+function onpointermove(event) {
+	pointer = {
+		x: event.clientX,
+		y: event.clientY
+	};
+	if (is3d || !input.open) return;
+	// Pointer offset from the centre, scaled so the deadzone matches the stick's 0.5.
+	const scale = 2 * t.radial.deadzone;
+	input.aim((event.clientX - center.x) / scale, -(event.clientY - center.y) / scale);
+	sync();
+}
+// ---- VR: controller trigger + thumbstick ----
+let controllerEl = null;
+// On a controller, the stick aims. Ignore cursors that would fight it: a laser on the same
+// controller (it passes through its own ring), and the scene's mouse cursor during an XR
+// session (A-Frame keeps its ray active in VR, so it can rest on the ring).
+const fromOwnController = (event) => {
+	if (!controllerEl) return false;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const cursorEl = event.detail?.cursorEl;
+	return cursorEl === controllerEl || cursorEl?.isScene && !!cursorEl.xrSession;
+};
+$effect(() => {
+	if (!is3d || !controller) return;
+	const el = document.querySelector(controller);
+	controllerEl = el;
+	if (!el) return;
+	const onOpen = () => begin();
+	const onClose = () => input.open && finish();
+	const onStick = (event) => {
+		const { x, y } = event.detail;
+		// Stick forward is -y.
+		input.aim(x, -y, stickOffset);
+		sync();
+	};
+	el.addEventListener(openOn, onOpen);
+	el.addEventListener(closeOn, onClose);
+	el.addEventListener("thumbstickmoved", onStick);
+	return () => {
+		el.removeEventListener(openOn, onOpen);
+		el.removeEventListener(closeOn, onClose);
+		el.removeEventListener("thumbstickmoved", onStick);
+	};
+});
+// ---- 3D drawing ----
+const m = (px) => px * t.space3d.metersPerPx;
+const R = $derived(m(ringRadius));
+const r = $derived(m(inner));
+const labelSize3d = $derived(Math.min(m(font.fontSize) * t.space3d.textScale, R * .5));
+const labelSize2d = $derived(Math.min(font.fontSize, ringRadius * .5));
+const labelAt = (i) => polar((ringRadius + inner) / 2, wedgeCenter(i, layout));
+const motion = $derived(`dur: ${t.animation.timing100}; easing: ${t.animation.easeOut3d}`);
+const colorOf = (i) => i === selected ? c.active : c.fill;
+const textOf = (i) => wedges[i].disabled ? c.disabledText : c.text;
+</script>
+
+<svelte:window {onkeydown} {onkeyup} {onpointermove} />
+
+{#if is3d}
+	<StackScope>
+		<a-entity {...rest} position={placement.position} rotation={placement.rotation} visible={open}>
+			<!-- Backing ring, for depth. -->
+			<a-entity
+				geometry="primitive: ring; radiusInner: {r * 0.85}; radiusOuter: {R * 1.04}; segmentsTheta: 48"
+				material="color: {c.ring}; opacity: 0.85; transparent: true; side: double"
+				position="0 0 -{m(4)}"
+			></a-entity>
+			{#each wedges as item, i}
+				{@const raised = i === selected}
+				<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions, a11y_mouse_events_have_key_events -->
+				<a-entity
+					class={open && !item.disabled ? 'raycastable' : ''}
+					geometry="primitive: ring; radiusInner: {r}; radiusOuter: {R}; thetaStart: {layout.startAngle + i * sectorAngle(layout.count) + t.radial.gap / 2}; thetaLength: {sectorAngle(layout.count) - t.radial.gap}; segmentsTheta: 16"
+					material="color: {colorOf(i)}; side: double; roughness: 0.6"
+					animation__pop="property: object3D.position.z; to: {raised ? t.space3d.raise : 0}; {motion}"
+					animation__grow="property: scale; to: {raised ? 1.06 : 1} {raised ? 1.06 : 1} 1; {motion}"
+					onmouseenter={(event: Event) => {
+						if (fromOwnController(event)) return;
+						input.point(i);
+						sync();
+					}}
+					onclick={(event: Event) => {
+						if (fromOwnController(event)) return;
+						input.point(i);
+						if (input.selected === i) finish();
+					}}
+				>
+					<a-entity
+						troika-text="value: {item.label.replace(/;/g, ',')}; fontSize: {labelSize3d}; color: {textOf(i)}; font: {font3d(t)}; anchor: center; baseline: center"
+						troika-text-material="shader: standard"
+						position="{m(labelAt(i)[0])} {m(labelAt(i)[1])} 0.003"
+						rotation="0 0 {labelTurn}"
+					></a-entity>
+				</a-entity>
+			{/each}
+		</a-entity>
+	</StackScope>
+{:else if open}
+	<div
+		class="ui-radial"
+		role="menu"
+		aria-label="Radial menu"
+		style="left: {center.x}px; top: {center.y}px; --ui-size: {ringRadius * 2}px; --ui-fill: {c.fill}; --ui-active: {c.active}; --ui-text: {c.text}; --ui-disabled: {c.disabledText}; --ui-ring: {c.ring}; --ui-font: {font.fontWeight} {labelSize2d}px/1 {t.typography.fontFamily};"
+	>
+		<svg viewBox="{-ringRadius - 6} {-ringRadius - 6} {ringRadius * 2 + 12} {ringRadius * 2 + 12}" aria-hidden="true">
+			<circle r={ringRadius + 4} class="ring" />
+		</svg>
+		<svg viewBox="{-ringRadius - 6} {-ringRadius - 6} {ringRadius * 2 + 12} {ringRadius * 2 + 12}">
+			{#each wedges as item, i}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<path
+					d={sectorPath(i, layout, inner, ringRadius, t.radial.gap)}
+					role="menuitem"
+					tabindex="-1"
+					aria-label={item.label}
+					aria-disabled={item.disabled}
+					class:active={i === selected}
+					class:disabled={item.disabled}
+					onpointerenter={() => {
+						input.point(i);
+						sync();
+					}}
+					onclick={() => {
+						input.point(i);
+						if (input.selected === i) finish();
+					}}
+				/>
+			{/each}
+		</svg>
+		{#each wedges as item, i}
+			<span
+				class="label"
+				class:disabled={item.disabled}
+				style="left: calc(50% + {labelAt(i)[0]}px); top: calc(50% - {labelAt(i)[1]}px);">{item.label}</span
+			>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.ui-radial {
+		position: fixed;
+		z-index: 950;
+		width: calc(var(--ui-size) + 12px);
+		height: calc(var(--ui-size) + 12px);
+		transform: translate(-50%, -50%);
+		animation: ui-radial-in 0.15s cubic-bezier(0.2, 0.8, 0.4, 1);
+		user-select: none;
+	}
+	svg {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+	}
+	.ring {
+		fill: none;
+		stroke: var(--ui-ring);
+		stroke-width: 8;
+		opacity: 0.6;
+	}
+	path {
+		fill: var(--ui-fill);
+		stroke: none;
+		cursor: pointer;
+		transition: fill 0.1s, transform 0.1s;
+		transform-origin: 0 0;
+	}
+	path.active {
+		fill: var(--ui-active);
+		transform: scale(1.05);
+	}
+	path.disabled {
+		cursor: not-allowed;
+		fill-opacity: 0.5;
+	}
+	.label {
+		position: absolute;
+		transform: translate(-50%, -50%);
+		font: var(--ui-font);
+		color: var(--ui-text);
+		pointer-events: none;
+		white-space: nowrap;
+	}
+	.label.disabled {
+		color: var(--ui-disabled);
+		/* Emoji ignore color. */
+		opacity: 0.35;
+	}
+	@keyframes ui-radial-in {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0.85);
+		}
+	}
+</style>

package/dist/RadialMenu.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { MenuItem } from './Menu.svelte';
+import { type Hand } from './radial-math';
+import type { Dimension } from './theme';
+type Item = Exclude<MenuItem, {
+    divider: true;
+}>;
+type Props = {
+    items: MenuItem[];
+    onselect?: (item: Item, index: number) => void;
+    open?: boolean;
+    disabled?: boolean;
+    startAngle?: number;
+    angleOffset?: number;
+    deadzone?: number;
+    controller?: string;
+    hand?: Hand;
+    openOn?: string;
+    closeOn?: string;
+    hotkey?: string;
+    radius?: number;
+    innerRadius?: number;
+    labelRotation?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const RadialMenu: import("svelte").Component<Props, {}, "open">;
+type RadialMenu = ReturnType<typeof RadialMenu>;
+export default RadialMenu;

package/dist/Rule3D.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">// Internal: a thin horizontal line in a 3D stack (menu dividers).
+import { getTheme } from "./context";
+import { useSlot } from "./layout.svelte";
+// width in meters; thickness and margin (above and below) in px.
+let { width, color, thickness = 1, margin = 6 } = $props();
+const theme = getTheme();
+const m = (px) => px * theme().space3d.metersPerPx;
+const slot = useSlot(() => ({
+	width,
+	height: m(thickness + 2 * margin)
+}));
+</script>
+
+<a-entity
+	rounded="flat: true; width: {width}; height: {m(thickness)}; radius: 0; color: {color}"
+	position="{slot().x - width / 2} {slot().y - m(thickness) / 2} 0.001"
+></a-entity>

package/dist/Rule3D.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    width: number;
+    color: string;
+    thickness?: number;
+    margin?: number;
+};
+declare const Rule3D: import("svelte").Component<$$ComponentProps, {}, "">;
+type Rule3D = ReturnType<typeof Rule3D>;
+export default Rule3D;

package/dist/Scene3D.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { setDimension } from "./context";
+import { xr } from "./xr.svelte";
+import { MOUSE_CURSOR, RAYCASTABLE, loadTroika, setupScene } from "./aframe/scene";
+let { children, cursor = MOUSE_CURSOR, raycaster = `objects: .${RAYCASTABLE}`, mouseCursorInVR = false, ...rest } = $props();
+setDimension("3d");
+const troika = loadTroika();
+let ready = $state(!troika);
+troika?.then(() => ready = true);
+let scene = $state();
+$effect(() => {
+	if (!scene) return;
+	xr.watch(scene);
+	return setupScene(scene, {
+		cursor,
+		mouseCursorInVR
+	});
+});
+</script>
+
+{#if ready}
+	<a-scene bind:this={scene} {cursor} {raycaster} {...rest}>
+		{@render children?.()}
+	</a-scene>
+{/if}

package/dist/Scene3D.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    cursor?: string;
+    raycaster?: string;
+    mouseCursorInVR?: boolean;
+    [attribute: string]: unknown;
+};
+declare const Scene3D: import("svelte").Component<$$ComponentProps, {}, "">;
+type Scene3D = ReturnType<typeof Scene3D>;
+export default Scene3D;