@gadxr/ui 0.0.0-stage → 0.1.0

package/dist/text-focus.svelte.js

@@ -0,0 +1,102 @@
+import { keyToAction } from './text-edit';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class TextFocus {
+    // Raw: a deep $state would hold a proxy, and `current === field` would never match.
+    current = $state.raw(null);
+    // Mounted <Keyboard> roots: pressing inside them keeps focus too.
+    keyboards = new Set();
+    focus(field) {
+        if (this.current === field)
+            return;
+        this.current?.done();
+        this.current = field;
+        listen(field.el);
+    }
+    blur(field) {
+        if (this.current === field)
+            this.current = null;
+    }
+    contains(target) {
+        if (!(target instanceof Element))
+            return false;
+        if (this.current?.el?.contains(target))
+            return true;
+        for (const keyboard of this.keyboards)
+            if (keyboard.contains(target))
+                return true;
+        return false;
+    }
+}
+export const textFocus = new TextFocus();
+// Native fields (2D Inputs, other HTML) keep their own keys.
+function isNativeEditable(target) {
+    return target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
+}
+// Capture phase, before the page's own shortcuts and movement controls (all on window):
+// while a 3D field has focus, it gets every key except Cmd/Ctrl shortcuts.
+function onKeydown(event) {
+    const field = textFocus.current;
+    if (!field || isNativeEditable(event.target) || event.ctrlKey || event.metaKey)
+        return;
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    takenKeys.add(keyId(event));
+    const action = keyToAction(event);
+    if (action === 'enter')
+        field.enter();
+    else if (action === 'escape')
+        field.cancel();
+    else if (action)
+        field.edit(action);
+}
+// The keyup of a key the field took is taken too, even once editing has ended (Enter,
+// Escape): A-Frame's keyboard-shortcuts acts on keyup (F enters VR, which on desktop is
+// fullscreen). A key already down before focus keeps its keyup, so movement controls
+// see it released.
+const takenKeys = new Set();
+const keyId = (event) => event.code || event.key;
+function onKeyup(event) {
+    if (!takenKeys.delete(keyId(event)))
+        return;
+    event.stopImmediatePropagation();
+    event.preventDefault();
+}
+function onPaste(event) {
+    const field = textFocus.current;
+    const text = event.clipboardData?.getData('text/plain');
+    if (!field || isNativeEditable(event.target) || !text)
+        return;
+    event.preventDefault();
+    field.edit({ type: 'insert', text });
+}
+// Any cursor press (mouse or VR laser) on something other than the field or the
+// keyboard — including on nothing — ends editing. The cursor emits mousedown on itself
+// with what it hit (`intersectedEl`, no `cursorEl`), and that bubbles to the scene.
+function onCursorDown(event) {
+    const detail = event.detail;
+    if (!textFocus.current || !detail || !event.target?.components?.cursor)
+        return;
+    if (!textFocus.contains(detail.intersectedEl))
+        textFocus.current.done();
+}
+// Clicking HTML outside the 3D canvas ends editing as well.
+function onPointerDown(event) {
+    if (textFocus.current && !(event.target instanceof HTMLCanvasElement))
+        textFocus.current.done();
+}
+let windowListening = false;
+const scenes = new WeakSet();
+function listen(el) {
+    if (!windowListening) {
+        windowListening = true;
+        window.addEventListener('keydown', onKeydown, true);
+        window.addEventListener('keyup', onKeyup, true);
+        window.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('paste', onPaste);
+    }
+    const scene = el?.sceneEl ?? el?.closest('a-scene');
+    if (scene && !scenes.has(scene)) {
+        scenes.add(scene);
+        scene.addEventListener('mousedown', onCursorDown);
+    }
+}

package/dist/theme.d.ts

@@ -0,0 +1,335 @@
+export type ButtonKind = 'primary' | 'secondary' | 'tertiary';
+export type ButtonSize = 'mini' | 'compact' | 'default' | 'large';
+export type ButtonShape = 'default' | 'pill' | 'round' | 'circle' | 'square';
+export type Dimension = '2d' | '3d';
+export type Material3D = 'glass' | 'solid' | 'none';
+export type TagKind = 'neutral' | 'accent' | 'positive' | 'warning' | 'negative';
+export type TagVariant = 'solid' | 'light';
+export type TagSize = 'small' | 'medium';
+export type SpinnerSize = 'small' | 'medium' | 'large';
+export type ToastKind = 'info' | 'positive' | 'warning' | 'negative';
+export type ProgressBarSize = 'small' | 'medium' | 'large';
+export type AvatarSize = 'small' | 'medium' | 'large';
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TypographyVariant = 'LabelXSmall' | 'LabelSmall' | 'LabelMedium' | 'LabelLarge' | 'HeadingSmall' | 'HeadingMedium' | 'ParagraphMedium';
+export type Font = {
+    fontSize: number;
+    lineHeight: number;
+    fontWeight: number;
+};
+type TagColors = {
+    solidFill: string;
+    solidText: string;
+    lightFill: string;
+    lightText: string;
+};
+type KindColors = {
+    fill: string;
+    text: string;
+    hover: string;
+    active: string;
+    selectedFill: string;
+    selectedText: string;
+};
+export declare const defaultTheme: {
+    name: string;
+    colors: {
+        contentPrimary: string;
+        contentSecondary: string;
+        contentTertiary: string;
+        backgroundPrimary: string;
+        backgroundSecondary: string;
+        button: Record<ButtonKind, KindColors>;
+        buttonDisabledFill: string;
+        buttonDisabledText: string;
+        panel: {
+            fill: string;
+            border: string;
+        };
+        checkbox: {
+            border: string;
+            fill3d: string;
+            fillChecked: string;
+            mark: string;
+            toggleTrack: string;
+            toggleTrackChecked: string;
+            toggleKnob: string;
+        };
+        slider: {
+            track: string;
+            fill: string;
+            thumb: string;
+        };
+        tag: Record<TagKind, TagColors>;
+        spinner: {
+            track: string;
+            active: string;
+        };
+        input: {
+            fill: string;
+            border: string;
+            hover: string;
+            focus: string;
+            error: string;
+            text: string;
+            placeholder: string;
+            caret: string;
+            label: string;
+            caption: string;
+            errorText: string;
+        };
+        keyboard: {
+            fill: string;
+            key: string;
+            keyHover: string;
+            special: string;
+            specialHover: string;
+            accent: string;
+            accentHover: string;
+            pressed: string;
+            pressedText: string;
+            on: string;
+            onText: string;
+            text: string;
+        };
+        tabs: {
+            text: string;
+            textActive: string;
+            hover: string;
+            indicator: string;
+            border: string;
+        };
+        menu: {
+            fill: string;
+            border: string;
+            hover: string;
+            active: string;
+            text: string;
+            end: string;
+            selected: string;
+            divider: string;
+        };
+        modal: {
+            fill: string;
+            backdrop: string;
+            backdropOpacity: number;
+        };
+        radial: {
+            fill: string;
+            active: string;
+            text: string;
+            disabledText: string;
+            ring: string;
+        };
+        toast: Record<ToastKind, {
+            fill: string;
+            text: string;
+            accent: string;
+        }>;
+        progressBar: {
+            track: string;
+            fill: string;
+        };
+        avatar: {
+            palette: string[];
+            text: string;
+            statusRing: string;
+            status: Record<AvatarStatus, string>;
+        };
+        tooltip: {
+            fill: string;
+            text: string;
+        };
+        white: string;
+        black: string;
+        gray50: string;
+        gray100: string;
+        gray200: string;
+        gray300: string;
+        gray400: string;
+        gray500: string;
+        gray600: string;
+        gray700: string;
+        gray800: string;
+        gray900: string;
+        accent: string;
+        accent400: string;
+        negative: string;
+        positive: string;
+        warning: string;
+    };
+    sizing: {
+        scale0: number;
+        scale100: number;
+        scale200: number;
+        scale300: number;
+        scale400: number;
+        scale500: number;
+        scale550: number;
+        scale600: number;
+        scale700: number;
+        scale800: number;
+        scale900: number;
+        scale1000: number;
+        scale1200: number;
+        scale1400: number;
+        scale1600: number;
+    };
+    borders: {
+        radius100: number;
+        radius200: number;
+        radius300: number;
+        radius400: number;
+        radius500: number;
+        buttonBorderRadius: number;
+    };
+    typography: Record<TypographyVariant, Font> & {
+        fontFamily: string;
+        font3d: string;
+    };
+    animation: {
+        timing100: number;
+        timing200: number;
+        timing300: number;
+        timing400: number;
+        timing500: number;
+        easeOutCurve: string;
+        easeInOutCurve: string;
+        easeOut3d: string;
+        easeInOut3d: string;
+    };
+    button: {
+        sizes: Record<ButtonSize, {
+            height: number;
+            paddingX: number;
+            typography: TypographyVariant;
+        }>;
+    };
+    panel: {
+        padding: number;
+        gap: number;
+        radius: number;
+    };
+    checkbox: {
+        box: number;
+        boxRadius: number;
+        trackWidth: number;
+        trackHeight: number;
+        knob: number;
+        gap: number;
+        typography: TypographyVariant;
+    };
+    slider: {
+        width: number;
+        trackHeight: number;
+        thumb: number;
+        gap: number;
+        typography: TypographyVariant;
+    };
+    tag: {
+        radius: number;
+        sizes: Record<TagSize, {
+            height: number;
+            paddingX: number;
+            typography: TypographyVariant;
+        }>;
+    };
+    tabs: {
+        height: number;
+        paddingX: number;
+        gap: number;
+        indicator: number;
+        radius: number;
+        typography: TypographyVariant;
+    };
+    menu: {
+        itemHeight: number;
+        paddingX: number;
+        padding: number;
+        radius: number;
+        itemRadius: number;
+        minWidth: number;
+        typography: TypographyVariant;
+        endTypography: TypographyVariant;
+    };
+    modal: {
+        width: number;
+    };
+    input: {
+        width: number;
+        height: number;
+        paddingX: number;
+        radius: number;
+        border: number;
+        gap: number;
+        caretWidth: number;
+        typography: TypographyVariant;
+        labelTypography: TypographyVariant;
+        captionTypography: TypographyVariant;
+    };
+    keyboard: {
+        key: number;
+        gap: number;
+        padding: number;
+        radius: number;
+        typography: TypographyVariant;
+        wordTypography: TypographyVariant;
+    };
+    radial: {
+        radius: number;
+        innerRadius: number;
+        gap: number;
+        deadzone: number;
+        typography: TypographyVariant;
+    };
+    toast: {
+        width: number;
+        padding: number;
+    };
+    spinner: {
+        sizes: Record<SpinnerSize, number>;
+        thickness: number;
+    };
+    progressBar: {
+        width: number;
+        sizes: Record<ProgressBarSize, number>;
+        gap: number;
+        typography: TypographyVariant;
+        segment: number;
+        duration: number;
+    };
+    avatar: {
+        sizes: Record<AvatarSize, number>;
+        initials: number;
+        status: number;
+        statusRing: number;
+    };
+    tooltip: {
+        paddingX: number;
+        paddingY: number;
+        radius: number;
+        gap: number;
+        maxWidth: number;
+        delay: number;
+        typography: TypographyVariant;
+    };
+    space3d: {
+        metersPerPx: number;
+        textScale: number;
+        depth: number;
+        hoverScale: number;
+        pressDepth: number;
+        material: Record<ButtonKind, Material3D>;
+        panelOpacity: number;
+        raise: number;
+        glassText: string;
+    };
+};
+export type Theme = typeof defaultTheme;
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+export declare function createTheme(overrides?: DeepPartial<Theme>, base?: Theme): Theme;
+export declare function toMeters(theme: Theme, px: number): number;
+export {};