@gadxr/ui 0.0.0-stage → 0.1.0

package/dist/Tabs.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">import { nextIndex } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { createStack, setStack, useSlot } from "./layout.svelte";
+import Pressable3D from "./Pressable3D.svelte";
+import Stack from "./Stack.svelte";
+import { setTabs } from "./tabs-context";
+let { children, active = $bindable(), onchange, gap = 12, dimension, style: userStyle = "", ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const c = $derived(t.colors.tabs);
+const font = $derived(t.typography[t.tabs.typography]);
+const uid = `ui-tabs-${Math.random().toString(36).slice(2, 8)}`;
+let tabs = $state.raw([]);
+const current = $derived(active ?? tabs.find((tab) => !tab.disabled)?.key);
+function select(key) {
+	if (key === current) return;
+	active = key;
+	onchange?.(key);
+}
+setTabs({
+	id: uid,
+	register: (tab) => tabs = [...tabs, tab],
+	unregister: (tab) => tabs = tabs.filter((x) => x !== tab),
+	get active() {
+		return current;
+	}
+});
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+const m = (px) => px * t.space3d.metersPerPx;
+const column = is3d ? createStack(() => ({
+	direction: "column",
+	gap: m(gap),
+	align: "start"
+})) : undefined;
+const slot = is3d ? useSlot(() => column.size) : () => ({
+	x: 0,
+	y: 0
+});
+setStack(column);
+// 2D keyboard: arrows / Home / End move to (and select) another enabled tab.
+let buttons = $state([]);
+function onkeydown(event) {
+	const usable = tabs.map((tab) => !tab.disabled);
+	const from = tabs.findIndex((tab) => tab.key === current);
+	const to = event.key === "ArrowRight" ? nextIndex(usable, from, 1) : event.key === "ArrowLeft" ? nextIndex(usable, from, -1) : event.key === "Home" ? nextIndex(usable, -1, 1, false) : event.key === "End" ? nextIndex(usable, tabs.length, -1, false) : -1;
+	if (to < 0 || to === from) return;
+	event.preventDefault();
+	select(tabs[to].key);
+	buttons[to]?.focus();
+}
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">
+			<Stack direction="row" gap={t.tabs.gap}>
+				{#each tabs as tab (tab)}
+					<Pressable3D
+						label={tab.title}
+						{font}
+						textColor={tab.disabled ? t.colors.buttonDisabledText : tab.key === current ? c.textActive : c.text}
+						height={t.tabs.height}
+						paddingX={t.tabs.paddingX}
+						radius={t.tabs.radius}
+						hoverFill={c.hover}
+						activeFill={c.hover}
+						indicator={{ color: c.indicator, height: t.tabs.indicator }}
+						selected={tab.key === current}
+						disabled={tab.disabled}
+						onclick={() => select(tab.key)}
+					/>
+				{/each}
+			</Stack>
+			{@render children()}
+		</a-entity>
+	</a-entity>
+{:else}
+	<div
+		class="ui-tabs"
+		style="--ui-text: {c.text}; --ui-text-active: {c.textActive}; --ui-hover: {c.hover}; --ui-indicator: {c.indicator}; --ui-border: {c.border}; --ui-height: {t.tabs.height}px; --ui-padding-x: {t.tabs.paddingX}px; --ui-radius: {t.tabs.radius}px; --ui-indicator-height: {t.tabs.indicator}px; --ui-gap: {gap}px; --ui-focus: {t.colors.accent}; --ui-disabled: {t.colors.buttonDisabledText}; --ui-font: {font.fontWeight} {font.fontSize}px/{font.lineHeight}px {t.typography.fontFamily}; {userStyle}"
+		{...rest}
+	>
+		<div role="tablist" tabindex="-1" {onkeydown}>
+			{#each tabs as tab, i (tab)}
+				<button
+					bind:this={buttons[i]}
+					type="button"
+					role="tab"
+					id="{uid}-tab-{tab.key}"
+					aria-controls="{uid}-panel-{tab.key}"
+					aria-selected={tab.key === current}
+					tabindex={tab.key === current ? 0 : -1}
+					disabled={tab.disabled}
+					onclick={() => select(tab.key)}
+				>
+					{tab.title}
+				</button>
+			{/each}
+		</div>
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.ui-tabs {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ui-gap);
+		align-self: stretch;
+	}
+	[role='tablist'] {
+		display: flex;
+		gap: 4px;
+		border-bottom: 1px solid var(--ui-border);
+	}
+	button {
+		height: var(--ui-height);
+		padding: 0 var(--ui-padding-x);
+		border: 0;
+		border-radius: var(--ui-radius) var(--ui-radius) 0 0;
+		background: transparent;
+		color: var(--ui-text);
+		font: var(--ui-font);
+		cursor: pointer;
+		box-shadow: inset 0 calc(-1 * var(--ui-indicator-height)) 0 transparent;
+		transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
+	}
+	button:hover:not(:disabled) {
+		background: var(--ui-hover);
+	}
+	button[aria-selected='true'] {
+		color: var(--ui-text-active);
+		box-shadow: inset 0 calc(-1 * var(--ui-indicator-height)) 0 var(--ui-indicator);
+	}
+	button:disabled {
+		color: var(--ui-disabled);
+		cursor: not-allowed;
+	}
+	button:focus-visible {
+		outline: 3px solid var(--ui-focus);
+		outline-offset: -3px;
+	}
+</style>

package/dist/Tabs.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { Dimension } from './theme';
+type Props = {
+    children: Snippet;
+    active?: string;
+    onchange?: (key: string) => void;
+    gap?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Tabs: import("svelte").Component<Props, {}, "active">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/Tag.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">// Base UI-style Tag: a small status chip ("Live", "3 players"). Not interactive.
+import { ensure3d } from "./aframe";
+import { watchTextSize } from "./aframe/measure";
+import { resolveTagStyle } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { font3d } from "./fonts";
+import { useSlot } from "./layout.svelte";
+let { label, kind, variant, size, dimension, style: userStyle = "", ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const s = $derived(resolveTagStyle(t, {
+	kind,
+	variant,
+	size
+}));
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+// ---- 3D ----
+const m = (px) => px * t.space3d.metersPerPx;
+if (is3d) ensure3d();
+let textWidth = $state(0);
+let labelEl = $state();
+const height = $derived(m(s.height));
+const width = $derived(Math.max(height, textWidth + 2 * m(s.paddingX)));
+const slot = is3d ? useSlot(() => ({
+	width,
+	height
+})) : () => ({
+	x: 0,
+	y: 0
+});
+const depth = .01;
+$effect(() => {
+	if (labelEl) return watchTextSize(labelEl, (w) => textWidth = w);
+});
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">
+			<a-entity
+				rounded="width: {width}; height: {height}; depth: {depth}; radius: {m(s.radius)}; color: {s.fill}"
+				position="{-width / 2} {-height / 2} 0"
+			></a-entity>
+			<a-entity
+				bind:this={labelEl}
+				troika-text="value: {label.replace(/;/g, ',')}; fontSize: {m(s.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>
+	</a-entity>
+{:else}
+	<span
+		class="ui-tag"
+		style="height: {s.height}px; padding: 0 {s.paddingX}px; border-radius: {s.radius}px; background: {s.fill}; color: {s.text}; font: {s.font.fontWeight} {s.font.fontSize}px/{s.font.lineHeight}px {t.typography.fontFamily}; {userStyle}"
+		{...rest}
+	>
+		{label}
+	</span>
+{/if}
+
+<style>
+	.ui-tag {
+		display: inline-flex;
+		align-items: center;
+		box-sizing: border-box;
+		white-space: nowrap;
+	}
+</style>

package/dist/Tag.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Dimension, TagKind, TagSize, TagVariant } from './theme';
+type Props = {
+    label: string;
+    kind?: TagKind;
+    variant?: TagVariant;
+    size?: TagSize;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/Text.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">// Typography. 2D: a <span>. 3D: troika text, anchored by `align` (default center).
+// Inside a Panel / ButtonGroup it measures itself and takes its place in the stack.
+import { ensure3d } from "./aframe";
+import { setTroikaValue, watchTextSize } from "./aframe/measure";
+import { getDimension, getTheme } from "./context";
+import { font3d } from "./fonts";
+import { inStack, useSlot } from "./layout.svelte";
+let { text = "", children, variant = "ParagraphMedium", color, align, maxWidth, dimension, style: userStyle = "", ...rest } = $props();
+const contextDimension = getDimension();
+const theme = getTheme();
+const t = $derived(theme());
+const font = $derived(t.typography[variant]);
+const textColor = $derived(color ?? t.colors.contentPrimary);
+const is3d = $derived((dimension ?? contextDimension) === "3d");
+const anchor = $derived(align ?? "center");
+// 3D only.
+let size = $state({
+	width: 0,
+	height: 0
+});
+let textEl = $state();
+// svelte-ignore state_referenced_locally
+const stacked = (dimension ?? contextDimension) === "3d" && inStack();
+const slot = stacked ? useSlot(() => size) : () => ({
+	x: 0,
+	y: 0
+});
+// In a stack the slot is the text's center, so shift left/right-anchored text to fill it.
+// Outside one, the anchor is relative to the entity's own position.
+const anchorShift = $derived(!stacked ? 0 : anchor === "left" ? -size.width / 2 : anchor === "right" ? size.width / 2 : 0);
+$effect(() => {
+	if (is3d) ensure3d();
+});
+$effect(() => {
+	if (textEl) return watchTextSize(textEl, (width, height) => size = {
+		width,
+		height
+	});
+});
+// Set apart from the attribute string, which A-Frame splits on `;` (chat text can have one).
+$effect(() => setTroikaValue(textEl, text));
+const troika = $derived.by(() => {
+	const m = t.space3d.metersPerPx;
+	return [
+		`fontSize: ${font.fontSize * m * t.space3d.textScale}`,
+		`lineHeight: ${font.lineHeight / font.fontSize}`,
+		`color: ${textColor}`,
+		`font: ${font3d(t)}`,
+		`align: ${anchor}`,
+		`anchor: ${anchor}`,
+		maxWidth ? `maxWidth: ${maxWidth * m}` : ""
+	].filter(Boolean).join("; ");
+});
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity
+			bind:this={textEl}
+			troika-text={troika}
+			troika-text-material="shader: standard"
+			position="{slot().x + anchorShift} {slot().y} 0"
+		></a-entity>
+	</a-entity>
+{:else}
+	<span
+		class="ui-text"
+		style="font: {font.fontWeight} {font.fontSize}px/{font.lineHeight}px {t.typography.fontFamily}; color: {textColor}; text-align: {align ?? 'inherit'}; {maxWidth
+			? `max-width: ${maxWidth}px; display: inline-block;`
+			: ''} {userStyle}"
+		{...rest}
+	>
+		{#if children}{@render children()}{:else}{text}{/if}
+	</span>
+{/if}

package/dist/Text.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TextProps } from './types';
+declare const Text: import("svelte").Component<TextProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/TextLine3D.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">// Internal: one line of editable text in 3D — troika text clipped to a window, a
+// blinking caret, a placeholder, and horizontal scroll that keeps the caret in view.
+// Clicking it reports the caret index under the cursor (`onpick`). Used by Input's
+// field and the VR keyboard's preview line. Centered on its position.
+import { onDestroy } from "svelte";
+import { setTroikaValue, watchTextLayout } from "./aframe/measure";
+import { getTheme } from "./context";
+import { font3d } from "./fonts";
+import { caretIndexAt, caretX, scrollToCaret } from "./text-edit";
+let { text, caret, focused = false, placeholder = "", font, color, placeholderColor, caretColor, width, hitWidth = width, hitHeight, interactive = true, onpick } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const m = (px) => px * t.space3d.metersPerPx;
+const fontSize = $derived(m(font.fontSize) * t.space3d.textScale);
+const lineHeight = $derived(m(font.lineHeight) * t.space3d.textScale);
+let textEl = $state();
+let placeholderEl = $state();
+// troika's caret positions for the text as last laid out (it lays out asynchronously).
+let positions = $state.raw(null);
+const laidOut = $derived(positions ? positions.length / 4 : 0);
+const caretAt = $derived(caretX(Math.min(caret, laidOut), positions, laidOut));
+const textWidth = $derived(caretX(laidOut, positions, laidOut));
+let scroll = $state(0);
+$effect(() => {
+	scroll = scrollToCaret(caretAt, scroll, width, textWidth);
+});
+$effect(() => {
+	if (textEl) return watchTextLayout(textEl, (info) => positions = info.caretPositions ?? null);
+});
+$effect(() => setTroikaValue(textEl, text));
+$effect(() => setTroikaValue(placeholderEl, placeholder));
+// Blink, solid again whenever the text or caret moves. A timer, not
+// requestAnimationFrame, so it keeps going in an immersive session.
+let blinkOn = $state(true);
+let timer;
+$effect(() => {
+	void text;
+	void caret;
+	blinkOn = true;
+	clearInterval(timer);
+	if (focused) timer = setInterval(() => blinkOn = !blinkOn, 530);
+});
+onDestroy(() => clearInterval(timer));
+const common = $derived(`fontSize: ${fontSize}; color: ${color}; font: ${font3d(t)}; anchor: left; baseline: center; whiteSpace: nowrap`);
+function pick(event) {
+	const point = event.detail?.intersection?.point;
+	const obj = textEl?.object3D;
+	if (!point || !obj || !onpick) return;
+	const x = obj.worldToLocal(point.clone()).x;
+	onpick(caretIndexAt(x, positions, laidOut));
+}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<a-entity onclick={pick}>
+	<!-- Hit area (the raycaster ignores `visible`). -->
+	<a-entity
+		class={interactive ? 'raycastable' : ''}
+		geometry="primitive: plane; width: {hitWidth}; height: {hitHeight ?? lineHeight * 1.6}"
+		material="visible: false"
+		position="0 0 0.003"
+	></a-entity>
+	<a-entity
+		bind:this={textEl}
+		troika-text="{common}; clipRect: {scroll} {-lineHeight} {scroll + width} {lineHeight}"
+		troika-text-material="shader: standard"
+		position="{-width / 2 - scroll} 0 0.001"
+	></a-entity>
+	{#if !text && placeholder}
+		<a-entity
+			bind:this={placeholderEl}
+			troika-text="{common}; color: {placeholderColor}; clipRect: 0 {-lineHeight} {width} {lineHeight}"
+			troika-text-material="shader: standard"
+			position="{-width / 2} 0 0.001"
+		></a-entity>
+	{/if}
+	{#if focused}
+		<a-entity
+			geometry="primitive: plane; width: {m(t.input.caretWidth) * t.space3d.textScale}; height: {fontSize * 1.25}"
+			material="shader: flat; color: {caretColor}; opacity: {blinkOn ? 1 : 0}; transparent: true"
+			position="{-width / 2 + caretAt - scroll} 0 0.002"
+		></a-entity>
+	{/if}
+</a-entity>

package/dist/TextLine3D.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Font } from './theme';
+type Props = {
+    text: string;
+    caret: number;
+    focused?: boolean;
+    placeholder?: string;
+    font: Font;
+    color: string;
+    placeholderColor: string;
+    caretColor: string;
+    width: number;
+    hitWidth?: number;
+    hitHeight?: number;
+    interactive?: boolean;
+    onpick?: (index: number) => void;
+};
+declare const TextLine3D: import("svelte").Component<Props, {}, "">;
+type TextLine3D = ReturnType<typeof TextLine3D>;
+export default TextLine3D;

package/dist/ThemeProvider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">import { setTheme } from "./context";
+import { defaultTheme } from "./theme";
+let { theme = defaultTheme, children } = $props();
+setTheme(() => theme);
+</script>
+
+{@render children()}

package/dist/ThemeProvider.svelte.d.ts

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

package/dist/Toaster.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">// Shows the toast queue (toast.svelte.ts). 2D: fixed in a corner of the page.
+// 3D: a column whose `placement` corner sits at this entity's position (bottom-right:
+// grows up and to the left from it) — e.g. under the camera, low and to the side.
+import { flip } from "svelte/animate";
+import { fly } from "svelte/transition";
+import Button from "./Button.svelte";
+import { getDimension, getTheme } from "./context";
+import { createStack, setStack, useSlot } from "./layout.svelte";
+import Panel from "./Panel.svelte";
+import Text from "./Text.svelte";
+import { toaster } from "./toast.svelte";
+let { placement = "bottom-right", max = 4, dimension, ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const tk = $derived(t.toast);
+const visible = $derived(toaster.items.slice(-max));
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+const m = (px) => px * t.space3d.metersPerPx;
+const column = is3d ? createStack(() => ({
+	direction: "column",
+	gap: m(8),
+	align: placement.endsWith("left") ? "start" : placement.endsWith("right") ? "end" : "center"
+})) : undefined;
+const slot = is3d ? useSlot(() => column.size) : () => ({
+	x: 0,
+	y: 0
+});
+setStack(column);
+// Shift the column so its `placement` corner/edge is at the origin.
+const anchor = $derived({
+	x: placement.endsWith("right") ? -(column?.size.width ?? 0) / 2 : placement.endsWith("left") ? (column?.size.width ?? 0) / 2 : 0,
+	y: placement.startsWith("bottom") ? (column?.size.height ?? 0) / 2 : -(column?.size.height ?? 0) / 2
+});
+</script>
+
+{#snippet toastPanel(toast: Toast)}
+	{@const colors = t.colors.toast[toast.kind]}
+	<Panel
+		fill={colors.fill}
+		width={tk.width}
+		padding={tk.padding}
+		style="border-left: 4px solid {colors.accent};"
+		role={toast.kind === 'negative' ? 'alert' : 'status'}
+	>
+		{#snippet action()}
+			<Button label="×" kind="tertiary" shape="circle" size="mini" aria-label="Dismiss" onclick={() => toaster.dismiss(toast.id)} />
+		{/snippet}
+		<Text variant="LabelMedium" align="left" color={colors.text} maxWidth={tk.width - 2 * tk.padding - 32} text={toast.message} />
+	</Panel>
+{/snippet}
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x + anchor.x} {slot().y + anchor.y} 0">
+			{#each visible as toast (toast.id)}
+				<!-- Slides forward into place when it appears. -->
+				<a-entity animation__in="property: position; from: 0 0 -0.08; to: 0 0 0; dur: {t.animation.timing300}; easing: {t.animation.easeOut3d}">
+					{@render toastPanel(toast)}
+				</a-entity>
+			{/each}
+		</a-entity>
+	</a-entity>
+{:else}
+	<div class="ui-toaster" data-placement={placement} aria-live="polite" {...rest}>
+		{#each visible as toast (toast.id)}
+			<div animate:flip={{ duration: 200 }} transition:fly={{ y: placement.startsWith('top') ? -16 : 16, duration: 200 }}>
+				{@render toastPanel(toast)}
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.ui-toaster {
+		position: fixed;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		pointer-events: none;
+	}
+	.ui-toaster > :global(*) {
+		pointer-events: auto;
+	}
+	[data-placement^='top'] {
+		top: 16px;
+	}
+	[data-placement^='bottom'] {
+		bottom: 16px;
+	}
+	[data-placement$='left'] {
+		left: 16px;
+	}
+	[data-placement$='right'] {
+		right: 16px;
+	}
+	[data-placement='top'],
+	[data-placement='bottom'] {
+		left: 50%;
+		transform: translateX(-50%);
+	}
+</style>

package/dist/Toaster.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Dimension } from './theme';
+type Placement = 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
+type Props = {
+    placement?: Placement;
+    max?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;