@gadxr/ui 0.0.0-stage → 0.1.0

package/dist/Menu.svelte

@@ -0,0 +1,193 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">// Base UI-style Menu: a list of selectable items, with optional end labels
+// (shortcuts, counts), dividers and disabled items.
+//   <Menu items={[{ label: 'Wave', end: '1' }, { divider: true }, { label: 'Leave' }]} onselect={…} />
+// Pass `selected` (an item's id, or its label) to make it a single-choice menu with a check.
+// 2D: roving focus with arrow keys / Home / End. 3D: equal-width rows on a backing slab.
+import { ensure3d } from "./aframe";
+import { nextIndex } from "./component-style";
+import { getDimension, getTheme } from "./context";
+import { createStack, setStack, useSlot } from "./layout.svelte";
+import Pressable3D from "./Pressable3D.svelte";
+import Rule3D from "./Rule3D.svelte";
+let { items, onselect, selected = $bindable(), width, dimension, style: userStyle = "", ...rest } = $props();
+const theme = getTheme();
+const t = $derived(theme());
+const c = $derived(t.colors.menu);
+const tk = $derived(t.menu);
+const font = $derived(t.typography[tk.typography]);
+const endFont = $derived(t.typography[tk.endTypography]);
+const isDivider = (item) => "divider" in item;
+const idOf = (item) => item.id ?? item.label;
+const selectable = $derived(selected !== undefined);
+function choose(item, index) {
+	if (item.disabled) return;
+	if (selectable) selected = idOf(item);
+	onselect?.(item, index);
+}
+// What goes on the right: the item's end label, else a check when it's the selected one.
+const endOf = (item) => item.end ?? (selectable && selected === idOf(item) ? "✓" : undefined);
+const textOf = (item) => item.disabled ? t.colors.buttonDisabledText : selectable && selected === idOf(item) ? c.selected : c.text;
+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 column = is3d ? createStack(() => ({
+	direction: "column",
+	gap: 0
+})) : undefined;
+const pad = $derived(m(tk.padding));
+// Rows are drawn as wide as the widest one (or the menu's width).
+const rowWidth = $derived(Math.max(column?.size.width ?? 0, m(width ?? tk.minWidth) - 2 * pad));
+const outer = $derived({
+	width: rowWidth + 2 * pad,
+	height: (column?.size.height ?? 0) + 2 * pad
+});
+const slot = is3d ? useSlot(() => outer) : () => ({
+	x: 0,
+	y: 0
+});
+setStack(column);
+const depth = .02;
+// ---- 2D ----
+let buttons = $state([]);
+const usable = $derived(items.map((item) => !isDivider(item) && !item.disabled));
+let focusIndex = $state(-1);
+const tabStop = $derived(focusIndex >= 0 ? focusIndex : usable.indexOf(true));
+function onkeydown(event) {
+	const from = tabStop;
+	const to = event.key === "ArrowDown" ? nextIndex(usable, from, 1) : event.key === "ArrowUp" ? nextIndex(usable, from, -1) : event.key === "Home" ? nextIndex(usable, -1, 1, false) : event.key === "End" ? nextIndex(usable, items.length, -1, false) : -1;
+	if (to < 0) return;
+	event.preventDefault();
+	focusIndex = to;
+	buttons[to]?.focus();
+}
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">
+			<a-entity
+				rounded="width: {outer.width}; height: {outer.height}; depth: {depth}; radius: {Math.min(m(tk.radius), outer.height / 2)}; color: {c.fill}; opacity: {t.space3d.panelOpacity}"
+				position="{-outer.width / 2} {-outer.height / 2} {-depth}"
+			></a-entity>
+			<a-entity position="0 0 0.002">
+				{#each items as item, i}
+					{#if isDivider(item)}
+						<Rule3D width={rowWidth - 2 * m(tk.paddingX)} color={c.divider} />
+					{:else}
+						<Pressable3D
+							label={item.label}
+							end={endOf(item)}
+							{font}
+							{endFont}
+							textColor={textOf(item)}
+							endColor={selectable && selected === idOf(item) ? c.selected : c.end}
+							height={tk.itemHeight}
+							paddingX={tk.paddingX}
+							radius={tk.itemRadius}
+							fillWidth={rowWidth}
+							align="start"
+							hoverFill={c.hover}
+							activeFill={c.active}
+							disabled={item.disabled}
+							onclick={() => choose(item, i)}
+						/>
+					{/if}
+				{/each}
+			</a-entity>
+		</a-entity>
+	</a-entity>
+{:else}
+	<div
+		class="ui-menu"
+		role="menu"
+		tabindex="-1"
+		{onkeydown}
+		style="--ui-fill: {c.fill}; --ui-border: {c.border}; --ui-hover: {c.hover}; --ui-active: {c.active}; --ui-text: {c.text}; --ui-end: {c.end}; --ui-selected: {c.selected}; --ui-divider: {c.divider}; --ui-disabled: {t.colors.buttonDisabledText}; --ui-focus: {t.colors.accent}; --ui-padding: {tk.padding}px; --ui-padding-x: {tk.paddingX}px; --ui-radius: {tk.radius}px; --ui-item-radius: {tk.itemRadius}px; --ui-item-height: {tk.itemHeight}px; --ui-width: {width ?? tk.minWidth}px; --ui-font: {font.fontWeight} {font.fontSize}px/{font.lineHeight}px {t.typography.fontFamily}; --ui-end-font: {endFont.fontWeight} {endFont.fontSize}px/{endFont.lineHeight}px {t.typography.fontFamily}; {userStyle}"
+		{...rest}
+	>
+		{#each items as item, i}
+			{#if isDivider(item)}
+				<hr />
+			{:else}
+				<button
+					bind:this={buttons[i]}
+					type="button"
+					role={selectable ? 'menuitemradio' : 'menuitem'}
+					aria-checked={selectable ? selected === idOf(item) : undefined}
+					class:selected={selectable && selected === idOf(item)}
+					tabindex={i === tabStop ? 0 : -1}
+					disabled={item.disabled}
+					onfocus={() => (focusIndex = i)}
+					onclick={() => choose(item, i)}
+				>
+					<span>{item.label}</span>
+					{#if endOf(item)}<span class="end">{endOf(item)}</span>{/if}
+				</button>
+			{/if}
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.ui-menu {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		min-width: var(--ui-width);
+		padding: var(--ui-padding);
+		border-radius: var(--ui-radius);
+		background: var(--ui-fill);
+		border: 1px solid var(--ui-border);
+	}
+	button {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		height: var(--ui-item-height);
+		padding: 0 var(--ui-padding-x);
+		border: 0;
+		border-radius: var(--ui-item-radius);
+		background: transparent;
+		color: var(--ui-text);
+		font: var(--ui-font);
+		text-align: left;
+		cursor: pointer;
+	}
+	button:hover:not(:disabled) {
+		background: var(--ui-hover);
+	}
+	button:active:not(:disabled) {
+		background: var(--ui-active);
+	}
+	button:focus-visible {
+		outline: 3px solid var(--ui-focus);
+		outline-offset: -3px;
+	}
+	button:disabled {
+		color: var(--ui-disabled);
+		cursor: not-allowed;
+	}
+	.selected {
+		color: var(--ui-selected);
+	}
+	.end {
+		font: var(--ui-end-font);
+		color: var(--ui-end);
+	}
+	.selected .end {
+		color: var(--ui-selected);
+	}
+	hr {
+		width: calc(100% - 2 * var(--ui-padding-x));
+		margin: 6px auto;
+		border: 0;
+		border-top: 1px solid var(--ui-divider);
+	}
+</style>

package/dist/Menu.svelte.d.ts

@@ -0,0 +1,23 @@
+export type MenuItem = {
+    id?: string;
+    label: string;
+    end?: string;
+    disabled?: boolean;
+} | {
+    divider: true;
+};
+import type { Dimension } from './theme';
+type Item = Exclude<MenuItem, {
+    divider: true;
+}>;
+type Props = {
+    items: MenuItem[];
+    onselect?: (item: Item, index: number) => void;
+    selected?: string;
+    width?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Menu: import("svelte").Component<Props, {}, "selected">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/Modal.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">import Button from "./Button.svelte";
+import { getDimension, getTheme } from "./context";
+import Panel from "./Panel.svelte";
+import Stack from "./Stack.svelte";
+import StackScope from "./StackScope.svelte";
+const theme = getTheme();
+let { open = $bindable(false), title, children, actions, closeable = true, onclose, width = theme().modal.width, dimension, ...rest } = $props();
+const t = $derived(theme());
+const contextDimension = getDimension();
+const is3d = $derived((dimension ?? contextDimension) === "3d");
+function close() {
+	if (!open) return;
+	open = false;
+	onclose?.();
+}
+// 2D: keep the native dialog in sync with `open`.
+let dialog = $state();
+$effect(() => {
+	if (!dialog) return;
+	if (open && !dialog.open) dialog.showModal();
+	if (!open && dialog.open) dialog.close();
+});
+// 3D: Escape closes (desktop).
+$effect(() => {
+	if (!is3d || !open || !closeable) return;
+	const onkey = (event) => event.key === "Escape" && close();
+	window.addEventListener("keydown", onkey);
+	return () => window.removeEventListener("keydown", onkey);
+});
+</script>
+
+{#snippet closeButton()}
+	<Button label="×" kind="tertiary" shape="circle" size="compact" aria-label="Close" onclick={close} />
+{/snippet}
+
+{#snippet content()}
+	<Panel {title} {width} catchClicks action={closeable ? closeButton : undefined}>
+		{@render children?.()}
+		{#if actions}
+			<Stack direction="row" gap={12} alignSelf="end">{@render actions()}</Stack>
+		{/if}
+	</Panel>
+{/snippet}
+
+{#if is3d}
+	{#if open}
+		<!-- An overlay: not part of any surrounding Panel / Stack layout. -->
+		<StackScope>
+			<a-entity {...rest}>
+				<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+				<a-entity
+					class="raycastable"
+					geometry="primitive: plane; width: 12; height: 12"
+					material="color: {t.colors.modal.backdrop}; opacity: {t.colors.modal.backdropOpacity}; transparent: true; shader: flat"
+					position="0 0 -0.08"
+					onclick={() => closeable && close()}
+				></a-entity>
+				<a-entity
+					animation__open="property: scale; from: 0.92 0.92 0.92; to: 1 1 1; dur: {t.animation.timing200}; easing: {t.animation.easeOut3d}"
+				>
+					{@render content()}
+				</a-entity>
+			</a-entity>
+		</StackScope>
+	{/if}
+{:else}
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+	<dialog
+		bind:this={dialog}
+		class="ui-modal"
+		style="--ui-backdrop: {t.colors.modal.backdrop}; --ui-backdrop-opacity: {t.colors.modal.backdropOpacity};"
+		onclose={close}
+		oncancel={(event) => !closeable && event.preventDefault()}
+		onclick={(event) => event.target === dialog && closeable && close()}
+		{...rest}
+	>
+		{@render content()}
+	</dialog>
+{/if}
+
+<style>
+	.ui-modal {
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		max-width: calc(100vw - 32px);
+		overflow: visible;
+	}
+	.ui-modal[open] {
+		animation: ui-modal-in 0.2s cubic-bezier(0.2, 0.8, 0.4, 1);
+	}
+	.ui-modal::backdrop {
+		background: color-mix(in srgb, var(--ui-backdrop) calc(var(--ui-backdrop-opacity) * 100%), transparent);
+		backdrop-filter: blur(4px);
+	}
+	@keyframes ui-modal-in {
+		from {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+	}
+</style>

package/dist/Modal.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { Dimension } from './theme';
+type Props = {
+    open?: boolean;
+    title?: string;
+    children?: Snippet;
+    actions?: Snippet;
+    closeable?: boolean;
+    onclose?: () => void;
+    width?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/Panel.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">import { ensure3d } from "./aframe";
+import { getDimension, getTheme } from "./context";
+import { createStack, setStack, useSlot } from "./layout.svelte";
+import StackScope from "./StackScope.svelte";
+import Text from "./Text.svelte";
+const theme = getTheme();
+let { children, title, action, kind = "solid", fill, catchClicks = false, align = "start", width, padding = theme().panel.padding, gap = theme().panel.gap, dimension, style: userStyle = "", ...rest } = $props();
+const t = $derived(theme());
+const m = (px) => px * t.space3d.metersPerPx;
+const contextDimension = getDimension();
+// svelte-ignore state_referenced_locally
+const is3d = (dimension ?? contextDimension) === "3d";
+// 3D: join the parent's stack (if nested), then stack our own children.
+if (is3d) ensure3d();
+const column = is3d ? createStack(() => ({
+	direction: "column",
+	gap: m(gap),
+	align
+})) : undefined;
+const innerWidth = $derived(Math.max(column?.size.width ?? 0, width ? m(width) - 2 * m(padding) : 0));
+const outer = $derived({
+	width: innerWidth + 2 * m(padding),
+	height: (column?.size.height ?? 0) + 2 * m(padding)
+});
+const slot = is3d ? useSlot(() => outer) : () => ({
+	x: 0,
+	y: 0
+});
+setStack(column);
+const actionRow = is3d ? createStack(() => ({
+	direction: "row",
+	gap: m(8)
+})) : undefined;
+// The action's row is centered on the title line (or just tucked into the corner).
+const titleHeight = $derived(title ? m(t.typography.HeadingSmall.lineHeight) * t.space3d.textScale : actionRow?.size.height ?? 0);
+const actionPosition = $derived({
+	x: outer.width / 2 - m(padding) - (actionRow?.size.width ?? 0) / 2,
+	y: outer.height / 2 - m(padding) - titleHeight / 2
+});
+const background = $derived(fill ?? t.colors.panel.fill);
+const depth = .02;
+const slab = $derived([
+	`width: ${outer.width}`,
+	`height: ${outer.height}`,
+	`depth: ${depth}`,
+	`radius: ${Math.min(m(t.panel.radius), outer.height / 2)}`,
+	`glass: ${kind === "glass"}`,
+	`color: ${background}`,
+	`opacity: ${kind === "glass" ? 1 : t.space3d.panelOpacity}`
+].join("; "));
+// Start-aligned children line up with the inner left edge even when `width` makes the panel wider.
+const contentX = $derived(align === "start" ? -(innerWidth - (column?.size.width ?? 0)) / 2 : 0);
+</script>
+
+{#if is3d}
+	<a-entity {...rest}>
+		<a-entity position="{slot().x} {slot().y} 0">
+			<!-- The slab's front face sits at z = 0; content just in front of it. -->
+			<a-entity rounded={slab} position="{-outer.width / 2} {-outer.height / 2} {-depth}"></a-entity>
+			{#if catchClicks}
+				<a-entity
+					class="raycastable"
+					geometry="primitive: plane; width: {outer.width}; height: {outer.height}"
+					material="visible: false"
+					position="0 0 0.001"
+				></a-entity>
+			{/if}
+			<a-entity position="{contentX} 0 0.005">
+				{#if title}<Text variant="HeadingSmall" text={title} />{/if}
+				{@render children?.()}
+			</a-entity>
+			{#if action}
+				<a-entity position="{actionPosition.x} {actionPosition.y} 0.005">
+					<StackScope stack={actionRow}>{@render action()}</StackScope>
+				</a-entity>
+			{/if}
+		</a-entity>
+	</a-entity>
+{:else}
+	<section
+		class="ui-panel"
+		class:glass={kind === 'glass'}
+		class:has-corner-action={action && !title}
+		style="--ui-fill: {background}; --ui-border: {fill ? `color-mix(in srgb, ${fill} 70%, white 10%)` : t.colors.panel.border}; --ui-radius: {t.panel.radius}px; --ui-padding: {padding}px; --ui-gap: {gap}px; --ui-align: {align === 'start'
+			? 'flex-start'
+			: 'center'}; {width ? `width: ${width}px;` : ''} {userStyle}"
+		{...rest}
+	>
+		{#if title && action}
+			<div class="header"><Text variant="HeadingSmall" text={title} />{@render action()}</div>
+		{:else if title}
+			<Text variant="HeadingSmall" text={title} />
+		{:else if action}
+			<div class="corner">{@render action()}</div>
+		{/if}
+		{@render children?.()}
+	</section>
+{/if}
+
+<style>
+	.ui-panel {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		align-items: var(--ui-align);
+		gap: var(--ui-gap);
+		padding: var(--ui-padding);
+		border-radius: var(--ui-radius);
+		background: var(--ui-fill);
+		border: 1px solid var(--ui-border);
+	}
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		align-self: stretch;
+	}
+	.has-corner-action {
+		position: relative;
+		padding-right: calc(var(--ui-padding) + 32px);
+	}
+	.corner {
+		position: absolute;
+		top: calc(var(--ui-padding) / 2);
+		right: calc(var(--ui-padding) / 2);
+	}
+	.glass {
+		background: color-mix(in srgb, var(--ui-fill) 55%, transparent);
+		backdrop-filter: blur(16px) saturate(1.4);
+	}
+</style>

package/dist/Panel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { Dimension } from './theme';
+type Props = {
+    children?: Snippet;
+    title?: string;
+    action?: Snippet;
+    kind?: 'solid' | 'glass';
+    fill?: string;
+    catchClicks?: boolean;
+    align?: 'start' | 'center';
+    width?: number;
+    padding?: number;
+    gap?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+declare const Panel: import("svelte").Component<Props, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/Pressable3D.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">// Internal 3D building block for Tabs and Menu: a clickable row with a label, an
+// optional end label (shortcut / meta), a hover background and an optional
+// underline. The parent resolves every color; this only draws and reports its size.
+import { ensure3d } from "./aframe";
+import { watchTextSize } from "./aframe/measure";
+import { getTheme } from "./context";
+import { font3d } from "./fonts";
+import { useSlot } from "./layout.svelte";
+let { label, end, font, endFont = font, textColor, endColor = textColor, height, paddingX, minWidth = 0, radius = 0, fillWidth, align = "center", fill, hoverFill, activeFill, indicator, selected = false, disabled = false, onclick } = $props();
+ensure3d();
+const theme = getTheme();
+const t = $derived(theme());
+const m = (px) => px * t.space3d.metersPerPx;
+let hovered = $state(false);
+let pressed = $state(false);
+let labelWidth = $state(0);
+let endWidth = $state(0);
+let labelEl = $state();
+let endEl = $state();
+const h = $derived(m(height));
+const pad = $derived(m(paddingX));
+const endGap = $derived(end ? m(16) : 0);
+const intrinsic = $derived(Math.max(m(minWidth), labelWidth + endGap + endWidth + 2 * pad));
+const w = $derived(fillWidth ?? intrinsic);
+const slot = useSlot(() => ({
+	width: intrinsic,
+	height: h
+}));
+const background = $derived(disabled ? undefined : pressed ? activeFill : hovered ? hoverFill : fill);
+const text = (value, f, color, anchor) => `value: ${value.replace(/;/g, ",")}; fontSize: ${m(f.fontSize) * t.space3d.textScale}; color: ${color}; font: ${font3d(t)}; anchor: ${anchor}; baseline: center`;
+$effect(() => {
+	if (!disabled) return;
+	hovered = pressed = false;
+});
+$effect(() => {
+	if (labelEl) return watchTextSize(labelEl, (width) => labelWidth = width);
+});
+$effect(() => {
+	if (endEl) return watchTextSize(endEl, (width) => endWidth = width);
+});
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions, a11y_mouse_events_have_key_events -->
+<a-entity
+	position="{slot().x} {slot().y} 0"
+	onclick={(event: Event) => !disabled && onclick?.(event)}
+	onmouseenter={() => !disabled && (hovered = true)}
+	onmouseleave={() => (hovered = pressed = false)}
+	onmousedown={() => !disabled && (pressed = true)}
+	onmouseup={() => (pressed = false)}
+>
+	<a-entity
+		class={disabled ? '' : 'raycastable'}
+		geometry="primitive: plane; width: {w}; height: {h}"
+		material="visible: false"
+		position="0 0 0.006"
+	></a-entity>
+	<a-entity
+		rounded="flat: true; width: {w}; height: {h}; radius: {Math.min(m(radius), h / 2)}; color: {background ?? '#000000'}; enabled: {!!background}"
+		position="{-w / 2} {-h / 2} 0.001"
+	></a-entity>
+	{#if indicator}
+		<a-entity
+			rounded="flat: true; width: {w}; height: {m(indicator.height)}; radius: {m(indicator.height) / 2}; color: {indicator.color}; enabled: {selected}"
+			position="{-w / 2} {-h / 2} 0.002"
+		></a-entity>
+	{/if}
+	<a-entity
+		bind:this={labelEl}
+		troika-text={text(label, font, textColor, align === 'start' ? 'left' : 'center')}
+		troika-text-material="shader: standard"
+		position="{align === 'start' ? -w / 2 + pad : end ? -(endGap + endWidth) / 2 : 0} 0 0.004"
+	></a-entity>
+	{#if end}
+		<a-entity
+			bind:this={endEl}
+			troika-text={text(end, endFont, endColor, 'right')}
+			troika-text-material="shader: standard"
+			position="{w / 2 - pad} 0 0.004"
+		></a-entity>
+	{/if}
+</a-entity>

package/dist/Pressable3D.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Font } from './theme';
+type Props = {
+    label: string;
+    end?: string;
+    font: Font;
+    endFont?: Font;
+    textColor: string;
+    endColor?: string;
+    height: number;
+    paddingX: number;
+    minWidth?: number;
+    radius?: number;
+    fillWidth?: number;
+    align?: 'center' | 'start';
+    fill?: string;
+    hoverFill?: string;
+    activeFill?: string;
+    indicator?: {
+        color: string;
+        height: number;
+    };
+    selected?: boolean;
+    disabled?: boolean;
+    onclick?: (event: Event) => void;
+};
+declare const Pressable3D: import("svelte").Component<Props, {}, "">;
+type Pressable3D = ReturnType<typeof Pressable3D>;
+export default Pressable3D;