@gadxr/ui 0.0.0-stage → 0.1.0

package/dist/Checkbox.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type CheckboxType } from './component-style';
+import type { Dimension } from './theme';
+type Props = {
+    checked?: boolean;
+    label?: string;
+    type?: CheckboxType;
+    disabled?: boolean;
+    onchange?: (checked: boolean) => void;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/DimensionScope.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">import { setDimension } from "./context";
+let { dimension, children } = $props();
+// svelte-ignore state_referenced_locally
+setDimension(dimension);
+</script>
+
+{@render children()}

package/dist/DimensionScope.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { Dimension } from './theme';
+type $$ComponentProps = {
+    dimension: Dimension;
+    children: Snippet;
+};
+declare const DimensionScope: import("svelte").Component<$$ComponentProps, {}, "">;
+type DimensionScope = ReturnType<typeof DimensionScope>;
+export default DimensionScope;

package/dist/Input.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">// Base UI-style single-line text Input: a label, the field, and a caption (or an
+// error, which replaces it and turns the field red).
+// 2D: a native <input>. 3D: a field with a blinking caret; clicking focuses it and
+// places the caret. The physical keyboard types into a focused 3D field (desktop, or a
+// keyboard paired to the headset); in VR a <Keyboard> placed in the scene opens.
+// Enter submits (`onsubmit`; `blurOnSubmit={false}` keeps editing, e.g. chat, and
+// `onsubmit` returning false keeps editing that once, e.g. an invalid value);
+// Escape / the keyboard's close key restores the value from before editing (`oncancel`).
+import { untrack } from "svelte";
+import { ensure3d } from "./aframe";
+import { setTroikaValue } from "./aframe/measure";
+import { resolveInputStyle } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { font3d } from "./fonts";
+import { useSlot } from "./layout.svelte";
+import { clampCaret, edit } from "./text-edit";
+import { textFocus } from "./text-focus.svelte";
+import TextLine3D from "./TextLine3D.svelte";
+import { xr } from "./xr.svelte";
+const theme = getTheme();
+let { value = $bindable(""), label = "", placeholder = "", caption = "", error = "", disabled = false, width = theme().input.width, maxLength, inputmode = "text", enterkeyhint = "enter", blurOnSubmit = true, focused = $bindable(false), onsubmit, oncancel, dimension, style: userStyle = "", ...rest } = $props();
+const t = $derived(theme());
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+// The value when editing started, for cancel.
+let original = "";
+let hovered = $state(false);
+const message = $derived(error || caption);
+// ---- 3D ----
+const m = (px) => px * t.space3d.metersPerPx;
+if (is3d) ensure3d();
+let rootEl = $state();
+let caret = $state(0);
+// The value can change from outside while editing (e.g. cleared after a chat send).
+const caretPos = $derived(clampCaret(value, caret));
+const editable = {
+	get text() {
+		return value;
+	},
+	get caret() {
+		return caretPos;
+	},
+	get placeholder() {
+		return placeholder;
+	},
+	get inputmode() {
+		return inputmode;
+	},
+	get enterKeyHint() {
+		return enterkeyhint;
+	},
+	get el() {
+		return rootEl;
+	},
+	edit(action) {
+		const result = edit({
+			text: value,
+			caret: caretPos
+		}, action, { maxLength });
+		if (!result) return;
+		value = result.state.text;
+		caret = result.state.caret;
+	},
+	setCaret(index) {
+		caret = clampCaret(value, index);
+	},
+	enter() {
+		if (onsubmit?.(value) !== false && blurOnSubmit) stop();
+	},
+	done: () => stop(),
+	cancel() {
+		value = original;
+		caret = value.length;
+		oncancel?.();
+		stop();
+	}
+};
+const hasFocus = $derived(is3d ? textFocus.current === editable : focused);
+const s = $derived(resolveInputStyle(t, {
+	focused: hasFocus,
+	hovered,
+	error: !!error,
+	disabled
+}));
+let warned = false;
+function start() {
+	if (disabled || textFocus.current === editable) return;
+	original = value;
+	caret = value.length;
+	textFocus.focus(editable);
+	if (xr.immersive && !textFocus.keyboards.size && !warned) {
+		warned = true;
+		console.warn("gadxr ui: a 3D Input has focus in VR, but no <Keyboard /> is in the scene to type with.");
+	}
+}
+function stop() {
+	textFocus.blur(editable);
+}
+if (is3d) {
+	// `focused` from outside → focus / blur; focus changing here → `focused`.
+	$effect(() => {
+		if (focused !== untrack(() => hasFocus)) untrack(() => focused ? start() : stop());
+	});
+	$effect(() => {
+		const f = hasFocus;
+		untrack(() => {
+			if (focused !== f) focused = f;
+		});
+	});
+	$effect(() => {
+		if (disabled) untrack(stop);
+	});
+	$effect(() => () => stop());
+}
+const W = $derived(m(width));
+const textScale = $derived(t.space3d.textScale);
+const labelH = $derived(label ? m(s.labelFont.lineHeight) * textScale : 0);
+const fieldH = $derived(m(s.height));
+const messageH = $derived(message ? m(s.captionFont.lineHeight) * textScale : 0);
+const gap = $derived(m(t.input.gap));
+const size = $derived({
+	width: W,
+	height: labelH + (label ? gap : 0) + fieldH + (message ? gap : 0) + messageH
+});
+const slot = is3d ? useSlot(() => size) : () => ({
+	x: 0,
+	y: 0
+});
+const labelY = $derived(size.height / 2 - labelH / 2);
+const fieldY = $derived(size.height / 2 - labelH - (label ? gap : 0) - fieldH / 2);
+const messageY = $derived(-size.height / 2 + messageH / 2);
+const depth = .02;
+const border = $derived(m(s.border));
+const padX = $derived(m(s.paddingX));
+let labelEl = $state();
+let messageEl = $state();
+$effect(() => setTroikaValue(labelEl, label));
+$effect(() => setTroikaValue(messageEl, message));
+function pick(index) {
+	start();
+	editable.setCaret(index);
+}
+// ---- 2D ----
+let inputEl = $state();
+$effect(() => {
+	if (is3d || !inputEl) return;
+	if (focused && document.activeElement !== inputEl) inputEl.focus();
+	else if (!focused && document.activeElement === inputEl) inputEl.blur();
+});
+function onkeydown(event) {
+	if (event.key === "Enter") {
+		event.preventDefault();
+		if (onsubmit?.(value) !== false && blurOnSubmit) inputEl?.blur();
+	} else if (event.key === "Escape") {
+		event.preventDefault();
+		value = original;
+		oncancel?.();
+		inputEl?.blur();
+	}
+}
+</script>
+
+{#if is3d}
+	<!-- svelte-ignore a11y_no_static_element_interactions, a11y_mouse_events_have_key_events -->
+	<a-entity
+		{...rest}
+		bind:this={rootEl}
+		onmouseenter={() => (hovered = !disabled)}
+		onmouseleave={() => (hovered = false)}
+	>
+		<a-entity position="{slot().x} {slot().y} 0">
+			{#if label}
+				<a-entity
+					bind:this={labelEl}
+					troika-text="fontSize: {m(s.labelFont.fontSize) * textScale}; color: {s.labelColor}; font: {font3d(t)}; anchor: left; baseline: center"
+					troika-text-material="shader: standard"
+					position="{-W / 2} {labelY} 0.002"
+				></a-entity>
+			{/if}
+			<a-entity position="0 {fieldY} 0">
+				<!-- Border: a slab behind the field, showing around its edge. -->
+				<a-entity
+					rounded="width: {W}; height: {fieldH}; depth: {depth}; radius: {m(s.radius)}; color: {s.borderColor}"
+					position="{-W / 2} {-fieldH / 2} 0"
+				></a-entity>
+				<a-entity
+					rounded="width: {W - 2 * border}; height: {fieldH - 2 * border}; depth: {depth}; radius: {Math.max(m(s.radius) - border, 0)}; color: {s.fill}"
+					position="{-W / 2 + border} {-fieldH / 2 + border} 0.002"
+				></a-entity>
+				<a-entity position="0 0 {depth + 0.003}">
+					<TextLine3D
+						text={value}
+						caret={caretPos}
+						focused={hasFocus}
+						{placeholder}
+						font={s.font}
+						color={s.text}
+						placeholderColor={s.placeholder}
+						caretColor={s.caret}
+						width={W - 2 * padX}
+						hitWidth={W}
+						hitHeight={fieldH}
+						interactive={!disabled}
+						onpick={pick}
+					/>
+				</a-entity>
+			</a-entity>
+			{#if message}
+				<a-entity
+					bind:this={messageEl}
+					troika-text="fontSize: {m(s.captionFont.fontSize) * textScale}; color: {s.captionColor}; font: {font3d(t)}; anchor: left; baseline: center"
+					troika-text-material="shader: standard"
+					position="{-W / 2} {messageY} 0.002"
+				></a-entity>
+			{/if}
+		</a-entity>
+	</a-entity>
+{:else}
+	<label
+		class="ui-input"
+		class:disabled
+		class:invalid={!!error}
+		style="--ui-width: {width}px; --ui-height: {s.height}px; --ui-padding-x: {s.paddingX}px; --ui-radius: {s.radius}px; --ui-border-width: {s.border}px; --ui-fill: {s.fill}; --ui-border: {s.borderColor}; --ui-hover: {t.colors.input.hover}; --ui-focus: {error ? t.colors.input.error : t.colors.input.focus}; --ui-text: {s.text}; --ui-placeholder: {s.placeholder}; --ui-caret: {s.caret}; --ui-label: {s.labelColor}; --ui-caption: {s.captionColor}; --ui-gap: {t.input.gap}px; --ui-font: {s.font.fontWeight} {s.font.fontSize}px/{s.font.lineHeight}px {t.typography.fontFamily}; --ui-label-font: {s.labelFont.fontWeight} {s.labelFont.fontSize}px/{s.labelFont.lineHeight}px {t.typography.fontFamily}; --ui-caption-font: {s.captionFont.fontWeight} {s.captionFont.fontSize}px/{s.captionFont.lineHeight}px {t.typography.fontFamily}; --ui-duration: {t.animation.timing200}ms; {userStyle}"
+		{...rest}
+	>
+		{#if label}<span class="label">{label}</span>{/if}
+		<input
+			bind:this={inputEl}
+			bind:value
+			type="text"
+			{placeholder}
+			{disabled}
+			{inputmode}
+			{enterkeyhint}
+			maxlength={maxLength}
+			aria-invalid={!!error}
+			onfocus={() => {
+				original = value;
+				focused = true;
+			}}
+			onblur={() => (focused = false)}
+			{onkeydown}
+		/>
+		{#if message}<span class="message" role={error ? 'alert' : undefined}>{message}</span>{/if}
+	</label>
+{/if}
+
+<style>
+	.ui-input {
+		display: inline-flex;
+		flex-direction: column;
+		gap: var(--ui-gap);
+		width: var(--ui-width);
+		max-width: 100%;
+		text-align: start;
+	}
+	.label {
+		font: var(--ui-label-font);
+		color: var(--ui-label);
+	}
+	input {
+		box-sizing: border-box;
+		width: 100%;
+		height: var(--ui-height);
+		padding: 0 var(--ui-padding-x);
+		border: var(--ui-border-width) solid var(--ui-border);
+		border-radius: var(--ui-radius);
+		background: var(--ui-fill);
+		color: var(--ui-text);
+		caret-color: var(--ui-caret);
+		font: var(--ui-font);
+		outline: none;
+		transition: border-color var(--ui-duration);
+	}
+	input::placeholder {
+		color: var(--ui-placeholder);
+		opacity: 1;
+	}
+	.ui-input:not(.disabled):not(.invalid) input:hover:not(:focus) {
+		border-color: var(--ui-hover);
+	}
+	input:focus {
+		border-color: var(--ui-focus);
+	}
+	input:disabled {
+		cursor: not-allowed;
+	}
+	.message {
+		font: var(--ui-caption-font);
+		color: var(--ui-caption);
+	}
+</style>

package/dist/Input.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { EnterKeyHint } from './keyboard-layout';
+import type { Dimension } from './theme';
+type Props = {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    caption?: string;
+    error?: string;
+    disabled?: boolean;
+    width?: number;
+    maxLength?: number;
+    inputmode?: 'text' | 'numeric';
+    enterkeyhint?: EnterKeyHint;
+    blurOnSubmit?: boolean;
+    focused?: boolean;
+    onsubmit?: (value: string) => boolean | void;
+    oncancel?: () => void;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Input: import("svelte").Component<Props, {}, "value" | "focused">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/Key3D.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">// Internal: one key of the VR keyboard. Fixed size, centered on its position.
+// Hover lightens it and lifts it toward you; pressing (cursor down) sinks it and turns it
+// white, held for a moment so a quick trigger pull still shows; a press also pulses
+// the controller that made it.
+import { onDestroy } from "svelte";
+import { setTroikaValue } from "./aframe/measure";
+import { resolveKeyStyle } from "./component-style";
+import { getTheme } from "./context";
+import { font3d } from "./fonts";
+let { label, width, height, font, kind = "char", on = false, onpress } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const m = (px) => px * t.space3d.metersPerPx;
+let hovered = $state(false);
+let pressed = $state(false);
+let releaseTimer;
+onDestroy(() => clearTimeout(releaseTimer));
+const s = $derived(resolveKeyStyle(t, {
+	kind,
+	hovered,
+	pressed,
+	on
+}));
+const depth = .03;
+const z = $derived(pressed ? -t.space3d.pressDepth : hovered ? .008 : 0);
+let labelEl = $state();
+$effect(() => setTroikaValue(labelEl, label));
+function down(event) {
+	clearTimeout(releaseTimer);
+	pressed = true;
+	pulse(event.detail?.cursorEl);
+}
+function up() {
+	releaseTimer = setTimeout(() => pressed = false, 90);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function pulse(cursorEl) {
+	try {
+		cursorEl?.components?.["tracked-controls"]?.controller?.gamepad?.hapticActuators?.[0]?.pulse?.(.25, 18);
+	} catch {}
+}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions, a11y_mouse_events_have_key_events -->
+<a-entity
+	position="0 0 {z}"
+	onclick={onpress}
+	onmouseenter={() => (hovered = true)}
+	onmouseleave={() => {
+		hovered = false;
+		up();
+	}}
+	onmousedown={down}
+	onmouseup={up}
+>
+	<a-entity
+		class="raycastable"
+		rounded="width: {width}; height: {height}; depth: {depth}; radius: {m(t.keyboard.radius)}; color: {s.fill}"
+		position="{-width / 2} {-height / 2} 0"
+	></a-entity>
+	<a-entity
+		bind:this={labelEl}
+		troika-text="fontSize: {m(font.fontSize) * t.space3d.textScale}; color: {s.text}; font: {font3d(t)}; anchor: center; baseline: center"
+		troika-text-material="shader: standard"
+		position="0 0 {depth + 0.002}"
+	></a-entity>
+</a-entity>

package/dist/Key3D.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Font } from './theme';
+type Props = {
+    label: string;
+    width: number;
+    height: number;
+    font: Font;
+    kind?: 'char' | 'special' | 'accent';
+    on?: boolean;
+    onpress: (event: Event) => void;
+};
+declare const Key3D: import("svelte").Component<Props, {}, "">;
+type Key3D = ReturnType<typeof Key3D>;
+export default Key3D;

package/dist/Keyboard.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">// The VR keyboard. Place one in the <a-scene> (not under the camera), like Toaster:
+//   <Keyboard />
+// While a 3D Input has focus in an immersive session (or xr.simulated), it slides in on
+// a Surface that lazily follows your gaze, below eye level and in front of other
+// follow surfaces. The line on top shows the text being typed (click it to move the
+// caret), so the field itself can be anywhere. Keys are pressed with the laser and
+// trigger, or the mouse while simulating. Enter submits, Done keeps the text, × cancels.
+import { untrack } from "svelte";
+import { ensure3d } from "./aframe";
+import { getTheme } from "./context";
+import Key3D from "./Key3D.svelte";
+import { KEYBOARD, ROW_UNITS, afterChar, keyChar, keyLabel, keyWidth, startPage, tapShift } from "./keyboard-layout";
+import Surface from "./Surface.svelte";
+import { textFocus } from "./text-focus.svelte";
+import TextLine3D from "./TextLine3D.svelte";
+import { xr } from "./xr.svelte";
+let { distance = .75, height = -.5, scale = .3, tilt = 25 } = $props();
+ensure3d();
+const theme = getTheme();
+const t = $derived(theme());
+const m = (px) => px * t.space3d.metersPerPx;
+const field = $derived(textFocus.current);
+const open = $derived(!!field && xr.immersive);
+let page = $state("letters");
+let shift = $state("off");
+let lastShiftTap = 0;
+// Each newly focused field starts on its page, unshifted.
+$effect(() => {
+	const f = field;
+	if (!f) return;
+	untrack(() => {
+		page = startPage(f.inputmode);
+		shift = "off";
+	});
+});
+let rootEl = $state();
+$effect(() => {
+	const el = rootEl;
+	if (!el) return;
+	textFocus.keyboards.add(el);
+	return () => textFocus.keyboards.delete(el);
+});
+// Layout (meters). A key `w` units wide also covers the gaps it spans, so every row
+// (ROW_UNITS wide) lines up whatever its key count.
+const unit = $derived(m(t.keyboard.key));
+const gap = $derived(m(t.keyboard.gap));
+const pad = $derived(m(t.keyboard.padding));
+const span = (w) => w * unit + (w - 1) * gap;
+const rowsW = $derived(span(ROW_UNITS));
+const rows = $derived(KEYBOARD[page]);
+const previewH = $derived(m(t.input.height));
+const W = $derived(rowsW + 2 * pad);
+const H = $derived(pad + previewH + gap * 2 + rows.length * unit + (rows.length - 1) * gap + pad);
+const keyFont = $derived(t.typography[t.keyboard.typography]);
+const wordFont = $derived(t.typography[t.keyboard.wordTypography]);
+const inputStyle = $derived(t.colors.input);
+const placed = $derived(rows.flatMap((row, r) => {
+	let x = -rowsW / 2;
+	const y = H / 2 - pad - previewH - gap * 2 - unit / 2 - r * (unit + gap);
+	return row.map((key, k) => {
+		const w = span(keyWidth(key));
+		const item = {
+			key,
+			id: `${r}-${k}`,
+			x: x + w / 2,
+			y,
+			w
+		};
+		x += w + gap;
+		return item;
+	});
+}));
+const kindOf = (key) => key.action === "char" ? "char" : key.action === "enter" ? "accent" : "special";
+function press(key) {
+	const f = textFocus.current;
+	if (!f) return;
+	switch (key.action) {
+		case "char":
+			f.edit({
+				type: "insert",
+				text: keyChar(key, shift)
+			});
+			shift = afterChar(shift);
+			break;
+		case "space":
+			f.edit({
+				type: "insert",
+				text: " "
+			});
+			break;
+		case "backspace":
+			f.edit({ type: "backspace" });
+			break;
+		case "shift": {
+			const now = performance.now();
+			shift = tapShift(shift, now - lastShiftTap);
+			lastShiftTap = now;
+			break;
+		}
+		case "page":
+			page = key.page;
+			shift = "off";
+			break;
+		case "enter":
+			f.enter();
+			break;
+		case "done":
+			f.done();
+			break;
+		case "close":
+			f.cancel();
+			break;
+	}
+}
+</script>
+
+<a-entity bind:this={rootEl} class="ui-keyboard">
+	<Surface mode="3d" vr="follow" open={open} {distance} {height} {scale} maxAngle={25}>
+		<a-entity rotation="{-tilt} 0 0">
+			<!-- Raycastable so a press that misses a key lands here and keeps editing, instead of
+			     counting as a click elsewhere (which closes the keyboard). -->
+			<a-entity
+				class="raycastable"
+				rounded="width: {W}; height: {H}; depth: 0.02; radius: {m(t.panel.radius)}; color: {t.colors.keyboard.fill}; opacity: {t.space3d.panelOpacity}"
+				position="{-W / 2} {-H / 2} -0.02"
+			></a-entity>
+			<!-- What's being typed, with its caret. -->
+			<a-entity position="0 {H / 2 - pad - previewH / 2} 0">
+				<a-entity
+					rounded="width: {rowsW}; height: {previewH}; depth: 0.01; radius: {m(t.input.radius)}; color: {inputStyle.fill}"
+					position="{-rowsW / 2} {-previewH / 2} 0"
+				></a-entity>
+				<a-entity position="0 0 0.012">
+				<TextLine3D
+					text={field?.text ?? ''}
+					caret={field?.caret ?? 0}
+					focused={!!field}
+					placeholder={field?.placeholder ?? ''}
+					font={t.typography[t.input.typography]}
+					color={inputStyle.text}
+					placeholderColor={inputStyle.placeholder}
+					caretColor={inputStyle.caret}
+					width={rowsW - 2 * m(t.input.paddingX)}
+					hitWidth={rowsW}
+					hitHeight={previewH}
+					onpick={(index) => textFocus.current?.setCaret(index)}
+				/>
+				</a-entity>
+			</a-entity>
+			{#each placed as { key, id, x, y, w } (id)}
+				{#if key.action !== 'spacer'}
+					<a-entity position="{x} {y} 0">
+						<Key3D
+							label={keyLabel(key, shift, field?.enterKeyHint)}
+							width={w}
+							height={unit}
+							font={[...keyLabel(key, shift, field?.enterKeyHint)].length > 1 ? wordFont : keyFont}
+							kind={kindOf(key)}
+							on={key.action === 'shift' && shift !== 'off'}
+							onpress={() => press(key)}
+						/>
+					</a-entity>
+				{/if}
+			{/each}
+		</a-entity>
+	</Surface>
+</a-entity>

package/dist/Keyboard.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    distance?: number;
+    height?: number;
+    scale?: number;
+    tilt?: number;
+};
+declare const Keyboard: import("svelte").Component<Props, {}, "">;
+type Keyboard = ReturnType<typeof Keyboard>;
+export default Keyboard;