@gadxr/ui 0.0.0-stage → 0.1.0

package/dist/theme.js

@@ -0,0 +1,312 @@
+// Design tokens, Base UI style. Everything is in px; 3D converts with
+// `space3d.metersPerPx`, so one set of numbers drives both HTML and A-Frame.
+// Keep this file erasable TypeScript only (no enums) — tests import it with Node's type stripping.
+const primitives = {
+    white: '#FFFFFF',
+    black: '#000000',
+    gray50: '#F6F6F6',
+    gray100: '#EEEEEE',
+    gray200: '#E2E2E2',
+    gray300: '#CBCBCB',
+    gray400: '#AFAFAF',
+    gray500: '#757575',
+    gray600: '#545454',
+    gray700: '#333333',
+    gray800: '#1F1F1F',
+    gray900: '#141414',
+    accent: '#276EF1',
+    accent400: '#5B91F5',
+    negative: '#E11900',
+    positive: '#05944F',
+    warning: '#FFC043',
+};
+const typography = {
+    fontFamily: "Geist, system-ui, 'Segoe UI', Roboto, sans-serif",
+    // Font URL for 3D text (troika loads it directly). Empty = the bundled Geist (fonts.ts).
+    font3d: '',
+    LabelXSmall: { fontSize: 12, lineHeight: 16, fontWeight: 500 },
+    LabelSmall: { fontSize: 14, lineHeight: 16, fontWeight: 500 },
+    LabelMedium: { fontSize: 16, lineHeight: 20, fontWeight: 500 },
+    LabelLarge: { fontSize: 18, lineHeight: 24, fontWeight: 500 },
+    HeadingSmall: { fontSize: 20, lineHeight: 28, fontWeight: 600 },
+    HeadingMedium: { fontSize: 24, lineHeight: 32, fontWeight: 600 },
+    ParagraphMedium: { fontSize: 16, lineHeight: 24, fontWeight: 400 },
+};
+// Dark by default: the world and page background are black.
+export const defaultTheme = {
+    name: 'dark',
+    colors: {
+        ...primitives,
+        contentPrimary: primitives.white,
+        contentSecondary: primitives.gray300,
+        contentTertiary: primitives.gray500,
+        backgroundPrimary: primitives.black,
+        backgroundSecondary: primitives.gray800,
+        button: {
+            primary: {
+                fill: primitives.white,
+                text: primitives.black,
+                hover: primitives.gray200,
+                active: primitives.gray300,
+                selectedFill: primitives.accent,
+                selectedText: primitives.white,
+            },
+            secondary: {
+                fill: primitives.gray700,
+                text: primitives.white,
+                hover: primitives.gray600,
+                active: primitives.gray500,
+                selectedFill: primitives.accent,
+                selectedText: primitives.white,
+            },
+            tertiary: {
+                fill: 'transparent',
+                text: primitives.white,
+                hover: primitives.gray800,
+                active: primitives.gray700,
+                selectedFill: primitives.gray700,
+                selectedText: primitives.accent400,
+            },
+        },
+        buttonDisabledFill: primitives.gray800,
+        buttonDisabledText: primitives.gray600,
+        panel: { fill: primitives.gray900, border: primitives.gray800 },
+        checkbox: {
+            border: primitives.gray500,
+            // 3D has no outline, so an unchecked box is a solid slab.
+            fill3d: primitives.gray700,
+            fillChecked: primitives.accent,
+            mark: primitives.white,
+            toggleTrack: primitives.gray600,
+            toggleTrackChecked: primitives.accent,
+            toggleKnob: primitives.white,
+        },
+        slider: { track: primitives.gray700, fill: primitives.accent, thumb: primitives.white },
+        tag: {
+            neutral: { solidFill: primitives.gray600, solidText: primitives.white, lightFill: primitives.gray800, lightText: primitives.gray200 },
+            accent: { solidFill: primitives.accent, solidText: primitives.white, lightFill: '#14284F', lightText: primitives.accent400 },
+            positive: { solidFill: primitives.positive, solidText: primitives.white, lightFill: '#0B3B24', lightText: '#3AA76D' },
+            warning: { solidFill: primitives.warning, solidText: primitives.black, lightFill: '#4A3810', lightText: primitives.warning },
+            negative: { solidFill: primitives.negative, solidText: primitives.white, lightFill: '#4A140E', lightText: '#F1998E' },
+        },
+        spinner: { track: primitives.gray700, active: primitives.accent },
+        input: {
+            fill: primitives.gray800,
+            border: primitives.gray700,
+            hover: primitives.gray600,
+            focus: primitives.accent,
+            error: primitives.negative,
+            text: primitives.white,
+            placeholder: primitives.gray500,
+            caret: primitives.accent400,
+            label: primitives.white,
+            caption: primitives.gray400,
+            errorText: '#F1998E',
+        },
+        keyboard: {
+            fill: primitives.gray900,
+            key: primitives.gray700,
+            keyHover: primitives.gray500,
+            special: primitives.gray800,
+            specialHover: primitives.gray600,
+            accent: primitives.accent,
+            accentHover: primitives.accent400,
+            pressed: primitives.white,
+            pressedText: primitives.black,
+            on: primitives.gray200,
+            onText: primitives.black,
+            text: primitives.white,
+        },
+        tabs: { text: primitives.gray400, textActive: primitives.white, hover: primitives.gray800, indicator: primitives.accent, border: primitives.gray800 },
+        menu: {
+            fill: primitives.gray900,
+            border: primitives.gray800,
+            hover: primitives.gray800,
+            active: primitives.gray700,
+            text: primitives.white,
+            end: primitives.gray500,
+            selected: primitives.accent400,
+            divider: primitives.gray800,
+        },
+        modal: { fill: primitives.gray900, backdrop: primitives.black, backdropOpacity: 0.6 },
+        radial: { fill: primitives.gray800, active: primitives.accent, text: primitives.white, disabledText: primitives.gray600, ring: primitives.gray900 },
+        toast: {
+            info: { fill: '#14284F', text: primitives.white, accent: primitives.accent400 },
+            positive: { fill: '#0B3B24', text: primitives.white, accent: '#3AA76D' },
+            warning: { fill: '#4A3810', text: primitives.white, accent: primitives.warning },
+            negative: { fill: '#4A140E', text: primitives.white, accent: '#F1998E' },
+        },
+        progressBar: { track: primitives.gray700, fill: primitives.accent },
+        avatar: {
+            // Picked per name (avatarColor), so a player keeps the same color everywhere.
+            palette: [primitives.accent, '#7356BF', primitives.positive, '#FF6937', '#E11900', '#0E8AA8'],
+            text: primitives.white,
+            // Around the status dot, to cut it out of the avatar (the panel color).
+            statusRing: primitives.gray900,
+            status: { online: primitives.positive, away: primitives.warning, busy: primitives.negative, offline: primitives.gray500 },
+        },
+        // Light on the dark UI, so it reads as floating above it.
+        tooltip: { fill: primitives.gray200, text: primitives.black },
+    },
+    sizing: {
+        scale0: 2,
+        scale100: 4,
+        scale200: 6,
+        scale300: 8,
+        scale400: 10,
+        scale500: 12,
+        scale550: 14,
+        scale600: 16,
+        scale700: 20,
+        scale800: 24,
+        scale900: 32,
+        scale1000: 40,
+        scale1200: 48,
+        scale1400: 56,
+        scale1600: 64,
+    },
+    borders: {
+        radius100: 2,
+        radius200: 4,
+        radius300: 8,
+        radius400: 12,
+        radius500: 16,
+        buttonBorderRadius: 16,
+    },
+    typography,
+    animation: {
+        timing100: 100,
+        timing200: 200,
+        timing300: 300,
+        timing400: 400,
+        timing500: 500,
+        easeOutCurve: 'cubic-bezier(.2, .8, .4, 1)',
+        easeInOutCurve: 'cubic-bezier(.8, .2, .6, 1)',
+        // A-Frame animation component easing names
+        easeOut3d: 'easeOutQuad',
+        easeInOut3d: 'easeInOutQuad',
+    },
+    button: {
+        sizes: {
+            mini: { height: 28, paddingX: 8, typography: 'LabelXSmall' },
+            compact: { height: 36, paddingX: 12, typography: 'LabelSmall' },
+            default: { height: 48, paddingX: 16, typography: 'LabelMedium' },
+            large: { height: 56, paddingX: 20, typography: 'LabelLarge' },
+        },
+    },
+    panel: { padding: 24, gap: 16, radius: 24 },
+    checkbox: {
+        box: 20,
+        boxRadius: 4,
+        trackWidth: 40,
+        trackHeight: 24,
+        knob: 18,
+        // Between the control and its label.
+        gap: 10,
+        typography: 'LabelMedium',
+    },
+    slider: { width: 240, trackHeight: 4, thumb: 20, gap: 8, typography: 'LabelSmall' },
+    tag: {
+        radius: 8,
+        sizes: {
+            small: { height: 24, paddingX: 8, typography: 'LabelXSmall' },
+            medium: { height: 32, paddingX: 12, typography: 'LabelSmall' },
+        },
+    },
+    tabs: { height: 40, paddingX: 12, gap: 4, indicator: 2, radius: 8, typography: 'LabelMedium' },
+    menu: {
+        itemHeight: 40,
+        paddingX: 12,
+        // Around the list, inside the menu's background.
+        padding: 6,
+        radius: 12,
+        itemRadius: 8,
+        minWidth: 200,
+        typography: 'LabelMedium',
+        endTypography: 'LabelSmall',
+    },
+    modal: { width: 420 },
+    input: {
+        width: 280,
+        height: 48,
+        paddingX: 14,
+        radius: 12,
+        border: 2,
+        // Between the label, the field and the caption.
+        gap: 6,
+        caretWidth: 2,
+        typography: 'ParagraphMedium',
+        labelTypography: 'LabelSmall',
+        captionTypography: 'LabelXSmall',
+    },
+    // VR keyboard. `key` is one key unit (a letter key is key × key).
+    keyboard: {
+        key: 52,
+        gap: 6,
+        padding: 14,
+        radius: 10,
+        typography: 'LabelLarge',
+        // Word labels (space, Done, 123, Send).
+        wordTypography: 'LabelMedium',
+    },
+    // px. Labels are shrunk to fit small rings (at most half the radius).
+    radial: { radius: 110, innerRadius: 34, gap: 3, deadzone: 24, typography: 'LabelLarge' },
+    toast: { width: 320, padding: 16 },
+    spinner: { sizes: { small: 24, medium: 32, large: 48 }, thickness: 0.125 },
+    progressBar: {
+        width: 240,
+        // Bar thickness.
+        sizes: { small: 4, medium: 8, large: 12 },
+        // Between the label row and the bar.
+        gap: 8,
+        typography: 'LabelSmall',
+        // Indeterminate (`infinite`): the moving segment's share of the bar, and one pass (ms).
+        segment: 0.3,
+        duration: 1200,
+    },
+    avatar: {
+        sizes: { small: 24, medium: 40, large: 64 },
+        // Initials size and status dot diameter, as a fraction of the avatar.
+        initials: 0.4,
+        status: 0.3,
+        statusRing: 2,
+    },
+    tooltip: { paddingX: 10, paddingY: 6, radius: 8, gap: 8, maxWidth: 240, delay: 400, typography: 'LabelSmall' },
+    space3d: {
+        // A default (48px) button comes out 0.15 m tall, the size of the original menu buttons.
+        metersPerPx: 0.003125,
+        // Text needs to be relatively bigger in-world: 16px label → 0.075 m.
+        textScale: 1.5,
+        // Slab thickness (meters).
+        depth: 0.05,
+        hoverScale: 1.04,
+        pressDepth: 0.02,
+        material: { primary: 'glass', secondary: 'solid', tertiary: 'none' },
+        panelOpacity: 0.92,
+        // Raised parts (switch knob, slider thumb) sit this far in front of their track.
+        raise: 0.012,
+        // Label color on glass, which ignores the fill color.
+        glassText: primitives.white,
+    },
+};
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function merge(base, overrides) {
+    if (!isPlainObject(base) || !isPlainObject(overrides))
+        return (overrides ?? base);
+    const out = { ...base };
+    for (const [key, value] of Object.entries(overrides)) {
+        if (value === undefined)
+            continue;
+        out[key] = isPlainObject(value) && isPlainObject(out[key]) ? merge(out[key], value) : value;
+    }
+    return out;
+}
+// Like Base UI's createTheme: start from the default theme and override any token.
+export function createTheme(overrides = {}, base = defaultTheme) {
+    return merge(base, overrides);
+}
+export function toMeters(theme, px) {
+    return px * theme.space3d.metersPerPx;
+}

package/dist/toast.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ToastKind } from './theme';
+export type Toast = {
+    id: number;
+    kind: ToastKind;
+    message: string;
+};
+export type ToastOptions = {
+    kind?: ToastKind;
+    duration?: number;
+};
+export declare const DEFAULT_TOAST_DURATION = 4000;
+declare class Toaster {
+    #private;
+    items: Toast[];
+    show(message: string, { kind, duration }?: ToastOptions): number;
+    info: (message: string, options?: Omit<ToastOptions, "kind">) => number;
+    positive: (message: string, options?: Omit<ToastOptions, "kind">) => number;
+    warning: (message: string, options?: Omit<ToastOptions, "kind">) => number;
+    negative: (message: string, options?: Omit<ToastOptions, "kind">) => number;
+    dismiss(id: number): void;
+    clear(): void;
+}
+export declare const toaster: Toaster;
+export {};

package/dist/toast.svelte.js

@@ -0,0 +1,30 @@
+// ms before a toast hides itself; 0 keeps it until closed.
+export const DEFAULT_TOAST_DURATION = 4000;
+class Toaster {
+    items = $state([]);
+    #nextId = 0;
+    #timers = new Map();
+    show(message, { kind = 'info', duration = DEFAULT_TOAST_DURATION } = {}) {
+        const id = this.#nextId++;
+        this.items = [...this.items, { id, kind, message }];
+        if (duration > 0)
+            this.#timers.set(id, setTimeout(() => this.dismiss(id), duration));
+        return id;
+    }
+    info = (message, options) => this.show(message, { ...options, kind: 'info' });
+    positive = (message, options) => this.show(message, { ...options, kind: 'positive' });
+    warning = (message, options) => this.show(message, { ...options, kind: 'warning' });
+    negative = (message, options) => this.show(message, { ...options, kind: 'negative' });
+    dismiss(id) {
+        clearTimeout(this.#timers.get(id));
+        this.#timers.delete(id);
+        this.items = this.items.filter((toast) => toast.id !== id);
+    }
+    clear() {
+        for (const timer of this.#timers.values())
+            clearTimeout(timer);
+        this.#timers.clear();
+        this.items = [];
+    }
+}
+export const toaster = new Toaster();

package/dist/types.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { ButtonKind, ButtonShape, ButtonSize, Dimension, TypographyVariant } from './theme';
+export type ButtonProps = {
+    label?: string;
+    children?: Snippet;
+    kind?: ButtonKind;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    isSelected?: boolean;
+    disabled?: boolean;
+    inert?: boolean;
+    onclick?: (event: Event) => void;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};
+export type TextProps = {
+    text?: string;
+    children?: Snippet;
+    variant?: TypographyVariant;
+    color?: string;
+    align?: 'left' | 'center' | 'right';
+    maxWidth?: number;
+    dimension?: Dimension;
+    [attribute: string]: unknown;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/xr.svelte.d.ts

@@ -0,0 +1,9 @@
+declare class XRState {
+    #private;
+    presenting: boolean;
+    simulated: boolean;
+    get immersive(): boolean;
+    watch(scene: any): void;
+}
+export declare const xr: XRState;
+export {};

package/dist/xr.svelte.js

@@ -0,0 +1,24 @@
+// Whether the player is in an immersive (headset) session — the signal Surfaces use
+// to switch from HTML to 3D. `simulated` forces 3D on desktop for testing and demos.
+//   import { xr } from '$lib/ui';  xr.simulated = true;  if (xr.immersive) …
+class XRState {
+    presenting = $state(false);
+    simulated = $state(false);
+    get immersive() {
+        return this.presenting || this.simulated;
+    }
+    #watched = new WeakSet();
+    // Follows a scene's enter-vr / exit-vr. Called by every Surface; each scene is watched once.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    watch(scene) {
+        if (!scene || this.#watched.has(scene))
+            return;
+        this.#watched.add(scene);
+        // enter-vr also fires for non-immersive fullscreen; only a real XR session counts.
+        const update = () => (this.presenting = !!scene.xrSession && (scene.is('vr-mode') || scene.is('ar-mode')));
+        scene.addEventListener('enter-vr', update);
+        scene.addEventListener('exit-vr', update);
+        update();
+    }
+}
+export const xr = new XRState();

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@gadxr/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "gadxr design system: Svelte 5 components that render as HTML, or as A-Frame entities in 3D.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gad-sh/xr-kit.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "aframe": "^1.8.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tsconfig/svelte": "^5.0.8",
+    "aframe": "^1.8.0",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.4.6",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.9"
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "test": "node --test \"tests/*.test.mjs\"",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.