uiconfig-blueprint 0.1.0-dev.13 → 0.1.0-dev.14

package/src/components/FileComponent.tsx

@@ -1,15 +1,22 @@
-import React, {useEffect, useRef} from "react";
+import React, {JSX, ReactNode, useEffect, useRef} from "react";
 import {Button, ControlGroup, FileInput, HTMLSelect, InputGroup} from "@blueprintjs/core";
 import {BPFileComponentState} from "../bpComponents/BPFileComponent";
 import {useLoadingStateKey} from './loadingState'
 
-export interface FileComponentProps {
-    state: BPFileComponentState
-    onChange: (state: Partial<BPFileComponentState>)=>Promise<void>
-    previewSlot?: React.ReactNode,
+export interface FileComponentProps<TSV = never> {
+    state: BPFileComponentState<TSV>
+    onChange: (state: Partial<BPFileComponentState<TSV>>)=>Promise<void>
+    previewSlot?: ReactNode,
     uuid?: string
+    AssetPicker?: (props: {
+        state: BPFileComponentState<TSV>
+        onChange: (state: Partial<BPFileComponentState<TSV>>)=>Promise<void>
+        className?: string
+        style?: React.CSSProperties
+    })=>JSX.Element
+    disableFileInput?: boolean // todo
 }
-export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, previewSlot})=>{
+export const FileComponent = <TSV,>({state, onChange, previewSlot, AssetPicker}: FileComponentProps<TSV>)=>{
     const fileInputRef = useRef<HTMLInputElement>()
     const textInputRef = useRef<HTMLInputElement>()
     // console.log('render file component', state)
@@ -28,8 +35,15 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, pr
         }
         if(!fileElement) return;
         // console.log(val)
+
+        // it can be Blob also because of GLTF loaded...
+        const file = val instanceof File ? val :
+            typeof val === 'string' || typeof (val as any as Blob).arrayBuffer === 'function' ?
+                new File([val as string | Blob], (val as any).name||('file'+((val as any).ext?'.'+(val as any).ext:'')))
+                : null
+        if(!file) return
         const dataTransfer = new DataTransfer();
-        dataTransfer.items.add(val instanceof File ? val : new File([val], (val as any).name||('file'+((val as any).ext?'.'+(val as any).ext:'')))); // it can be Blob also because of GLTF loaded...
+        dataTransfer.items.add(file);
         fileElement!.files = dataTransfer.files
     }, [state.value]);
     // useEffect(() => {
@@ -38,6 +52,9 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, pr
 
     // const hasValue = !!state.value || !!state.preview
 
+    const dropdownOptions = ['url', 'file']
+    if(AssetPicker) dropdownOptions.push('asset')
+
     const {loadingState, updateLoading} = useLoadingStateKey()
 
     return (
@@ -46,8 +63,8 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, pr
                 <>
                     {previewSlot}
                     <Button icon="small-cross"
-                            minimal={false}
-                            small={true}
+                            size={"small"}
+                            variant={"solid"}
                             disabled={state.disabled}
                             intent={"danger"}
                             style={{position: "absolute", top: 0, right: 0, opacity: 0.7}}
@@ -55,25 +72,25 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, pr
                             onClick={() => updateLoading(onChange({value: null}))}></Button>
                 </>
             )}
-            {(!state.preview || !previewSlot) && <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
-                {!state.readOnly && !state.value ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+            <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
+                {!state.readOnly && !state.value ? (<HTMLSelect options={dropdownOptions} minimal={true} fill={false}
                                                                 disabled={state.disabled}
                                                                 className={"file-component-select"}
                                                                 value={state.mode} onChange={(e) => {
-                    onChange({mode: e.target.value as 'url' | 'file'})
+                    onChange({mode: e.target.value as BPFileComponentState['mode']})
                 }}/>) : null}
                 {state.mode === 'url' ? (
                     <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url"
                                 defaultValue={typeof state.value === 'string' ? state.value : ''}
                                 rightElement={(
-                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={() => {
+                                    <Button disabled={state.readOnly} variant={"minimal"} icon="arrow-right" onClick={() => {
                                         onChange({mode: 'url', value: textInputRef.current?.value ?? ''})
                                     }}></Button>
                                 )}
                                 disabled={state.disabled} readOnly={state.readOnly}
                                 onChange={(_) => {
                                 }} placeholder="https://example.com/file.png"/>
-                ) : (
+                ) : state.mode === 'file' ? (
                     <FileInput inputProps={{ref: fileInputRef as any}}
                                style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
                                text={(state.value as File)?.name || 'No file'}
@@ -88,15 +105,17 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, pr
                                onChange={() => {
                                    onChange({mode: 'file', value: fileInputRef.current?.files?.[0] ?? null})
                                }} className="inputGroupFile"/>
-                )}
-                {!state.readOnly && state.value && (
-                    <Button minimal={true} icon="small-cross"
+                ) : state.mode === 'asset' && AssetPicker ? (
+                    <AssetPicker state={state} onChange={onChange} className="inputGroupFile"/>
+                ) : null}
+                {!state.readOnly && state.value && !state.preview && (
+                    <Button variant={"minimal"} icon="small-cross"
                             disabled={state.disabled}
                             loading={loadingState}
                             onClick={() => updateLoading(onChange({value: null}))
                             }></Button>
                 )}
-            </ControlGroup>}
+            </ControlGroup>
         </div>
     )
 }

package/src/components/FormGroupComponent.tsx

@@ -1,17 +1,21 @@
 import {FormGroup} from "@blueprintjs/core";
-import {PropsWithChildren} from "react";
+import {CSSProperties, PropsWithChildren, ReactNode} from "react";
 
-export function FormGroupComponent(props: PropsWithChildren<{ label: string, flexBasis?: string, disabled?: boolean }>) {
+export function FormGroupComponent(props: PropsWithChildren<{
+    label: string|ReactNode, flexBasis?: string, disabled?: boolean,
+    style?: CSSProperties
+}>) {
     return (
         <FormGroup className="xPaddedContent folderContent" contentClassName="formGroupContent"
                    style={{
                        justifyContent: "space-between",
                        marginTop: "2px",
                        marginBottom: "2px",
-                       flexBasis: props.flexBasis ?? "50%"
+                       flexBasis: props.flexBasis ?? "50%",
+                       ...props.style,
                    }}
             // helperText="Helper text with details..."
-                   label={(<span title={props.label}>{props.label}</span>)}
+                   label={typeof props.label !== 'string' ? props.label : (<span title={props.label}>{props.label}</span>)}
                    inline={true}
                    disabled={props.disabled}
             // labelInfo="(required)"

package/src/components/InspectorStackComponent.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import {Card, Panel, PanelStack2} from "@blueprintjs/core";
 import {ConfigObject, ConfigProps} from "../ConfigObject";
 import {UiObjectConfig} from 'uiconfig.js'
-import {UiConfigRendererContext} from '../bpComponents/BPComponent'
+import {UiConfigRendererBaseBp, UiConfigRendererContext} from '../bpComponents/BPComponent'
+import {getOrCall, ValOrFunc} from "ts-browser-helpers";
 
 // import {ViewerAppContext} from "./ViewerAppComponent";
 
-export function InspectorStackComponent({config, className}: { config: UiObjectConfig<any, 'panel'>, className?: string }) {
-    const renderer = React.useContext(UiConfigRendererContext)
+export function useConfigToStackItem(config: UiObjectConfig<any, 'panel'>, renderer?: UiConfigRendererBaseBp){
+    renderer = renderer ?? React.useContext(UiConfigRendererContext)
+    if(!renderer) throw new Error('No renderer provided or found in context')
     const stackItem = React.useCallback(() => {
         return {
             props: {config: config},
@@ -20,13 +22,24 @@ export function InspectorStackComponent({config, className}: { config: UiObjectC
                     </ul>
                 )
             },
-            title: renderer.methods.getLabel(config)
+            title: renderer!.methods.getLabel(config)
         } as Panel<{ config: UiObjectConfig }>
     }, [config])
-    const [currentPanelStack, setCurrentPanelStack] = React.useState<Array<Panel<{ config: UiObjectConfig }>>>([stackItem()]);
+    return stackItem
+}
+export type InspectorStackItem = ValOrFunc<Panel<{ config: UiObjectConfig }>>
+function getStackItem(i: InspectorStackItem){
+    const r = getOrCall(i)
+    return r?[r] : []
+}
+export function InspectorStackComponent({stackItem, className}: {
+    stackItem: InspectorStackItem,
+    className?: string
+}) {
+    const [currentPanelStack, setCurrentPanelStack] = React.useState<Array<Panel<{ config: UiObjectConfig }>>>(getStackItem(stackItem));
     React.useEffect(() => {
-        // console.warn('change', config)
-        setCurrentPanelStack([stackItem()])
+        // console.warn('change', stackItem)
+        setCurrentPanelStack(getStackItem(stackItem))
     }, [setCurrentPanelStack, stackItem])
 
     return (

package/src/components/NumericInput.tsx

@@ -27,7 +27,6 @@ import {
     ControlGroup,
     DISPLAYNAME_PREFIX,
     type HTMLInputProps,
-    InputGroup,
     Intent,
     Position,
     refHandler,
@@ -46,6 +45,7 @@ import {
     sanitizeNumericInput,
     toLocaleString,
 } from "@blueprintjs/core/src/components/forms/numericInputUtils";
+import {InputGroup2} from "../bpComponents/InputGroup2";
 
 export interface NumericInputProps extends InputSharedProps {
     /**
@@ -439,8 +439,8 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
         const valueAsNumber = this.getCurrentValueAsNumber();
 
         return (
-            <InputGroup
-                asyncControl={this.props.asyncControl}
+            <InputGroup2
+                // asyncControl={this.props.asyncControl}
                 autoComplete="off"
                 id={this.numericInputId}
                 role={this.props.allowNumericCharactersOnly ? "spinbutton" : undefined}
@@ -451,7 +451,6 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
                 intent={this.state.currentImeInputInvalid ? Intent.DANGER : this.props.intent}
                 inputClassName={this.props.inputClassName}
                 inputRef={this.inputRef}
-                large={this.props.large}
                 leftElement={this.props.leftElement}
                 leftIcon={this.props.leftIcon}
                 onFocus={this.handleInputFocus}
@@ -463,7 +462,7 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
                 onPaste={this.handleInputPaste}
                 onValueChange={this.handleInputChange}
                 rightElement={this.props.rightElement}
-                small={this.props.small}
+                size={this.props.small ? "small" : this.props.large ? "large" : "medium"}
                 value={this.state.value}
             />
         );

package/src/components/common.scss

@@ -1,4 +1,3 @@
-@import './tree2.scss';
 
 .bpButton {
   display: flex;
@@ -42,3 +41,4 @@
     }
   }
 }
+

package/src/lib.ts

@@ -13,7 +13,7 @@ export * from './components/VisualStyleContext'
 export * from './components/DialogContext'
 export * from './components/loadingState'
 export * from './components/AppToaster'
-export * from "./components/treeTypes";
+export * from './bpComponents/InputGroup2'
 export * from './bpComponents/BPButtonComponent'
 export * from './bpComponents/BPColorInputComponent'
 export * from './bpComponents/BPComponent'
@@ -28,9 +28,8 @@ export * from './bpComponents/BPPanelComponent'
 export * from './bpComponents/BPSliderInputComponent'
 export * from './bpComponents/BPTextInputComponent'
 export * from './bpComponents/BPToggleInputComponent'
-export * from './bpComponents/BPTreeComponent'
-export * from './bpComponents/BPTreeFolderComponent'
 export * from './bpComponents/BPValueComponent'
 export * from './bpComponents/BPVectorInputComponent'
 export * from "./bpComponents/NumberUnits";
 export * from "./bpComponents/GetNumberTransformFunctions";
+export {InputGroup2} from "./bpComponents/InputGroup2";

package/src/renderer.scss

@@ -14,6 +14,15 @@
 @import "blueprint-styler/base/blueprint";
 @import "blueprint-styler/base/tokens.scss";
 
+.bp5-vars, :root {
+  //--pt-icon-color: var(--pt-text-color);
+}
+
+.bp5-dark {
+  --pt-icon-color: var(--pt-text-color);
+  --menu-background-color: var(--tooltip-background-color);
+}
+
 :root.bpx-bpv3{
   @import "blueprint-styler/overrides/bpv3/custom-tokens.scss";
   @import "blueprint-styler/overrides/bpv3/override";
@@ -117,14 +126,14 @@
   --background-color-transition-time: 0.2s;
   --background-color-transition: background-color var(--background-color-transition-time) ease-in-out;
 }
-.bp5-panel-stack-view {
+.bp5-panel-stack2-view {
   background-color: $light-gray4 !important;
   transition: var(--background-color-transition);
 }
 
 .bp5-dark{
-  .bp5-panel-stack-view {
-    background-color: $dark-gray2 !important;
+  .bp5-panel-stack2-view {
+    background-color: $dark-gray1 !important;
   }
 }
 
@@ -232,10 +241,6 @@
   }
 }
 
-.bp5-panel-stack2-view{
-  background: transparent;
-}
-
 .bp5-slider-handle{
   border-radius: 100%;
 }
@@ -253,7 +258,7 @@
 }
 
 .bp5-dark {
-  --slider-progress-color: hsla(var(--gray4-hsl),0.15);
+  --slider-progress-color: hsla(var(--gray4-hsl), 0.15);
 }
 
 .bp5-slider-progress, .bp5-slider-track{
@@ -265,3 +270,20 @@
   background-color: hsla(var(--pt-intent-primary-hsl), 1) !important;
   //backdrop-filter: blur(4px);
 }
+
+.bp5-button.bp5-small {
+  .bp5-button-text{
+    font-size: $pt-font-size-small;
+    padding: calc($pt-grid-size * 0.5) 0 calc($pt-grid-size * 0.5) 0;
+  }
+  .bp5-icon > svg{
+    width: $pt-font-size;
+    height: $pt-font-size;
+  }
+}
+
+// todo not sure why its required again, its also in blueprint...
+.bp5-dark .bp5-divider{
+  border-color:rgba(255, 255, 255, 0.2);
+}
+

package/src/utils/PointerLockManager.md

@@ -0,0 +1,334 @@
+# PointerLockManager
+
+A utility class for implementing Unity-style cursor wrap-around behavior using the Pointer Lock API. This allows for infinite dragging without cursor constraints.
+
+## Overview
+
+The `PointerLockManager` provides a seamless way to capture the mouse pointer, hide the real cursor, display a fake cursor, and implement cursor wrap-around at screen edges. This is particularly useful for draggable UI elements that need unlimited range of motion.
+
+## Features
+
+- 🔒 **Pointer Lock API integration** - Captures mouse for unlimited movement
+- 🎯 **Fake cursor rendering** - Shows a custom cursor while the real one is hidden
+- 🔄 **Screen edge wrap-around** - Cursor automatically wraps to opposite edge
+- 📍 **Movement tracking** - Provides both movement deltas and absolute cursor position
+- 🧹 **Automatic cleanup** - Properly releases pointer lock and cleans up resources
+
+## Installation
+
+The PointerLockManager is part of the internal utils package:
+
+```typescript
+import { PointerLockManager } from '../utils/pointerLock';
+```
+
+## Basic Usage
+
+### 1. Setup
+
+Create a reference to the element that will request pointer lock:
+
+```typescript
+import * as React from 'react';
+import { PointerLockManager } from '../utils/pointerLock';
+
+function MyComponent() {
+  const pointerLockManagerRef = React.useRef<PointerLockManager | null>(null);
+  const elementRef = React.useRef<HTMLDivElement>(null);
+
+  // ... rest of component
+}
+```
+
+### 2. Initialize on Mouse Down
+
+Request pointer lock when the user starts interacting:
+
+```typescript
+const handleMouseDown = (ev: React.MouseEvent) => {
+  if (!elementRef.current) return;
+
+  // Create the pointer lock manager
+  pointerLockManagerRef.current = new PointerLockManager(
+    elementRef.current,
+    {
+      onMove: handlePointerMove,
+      onLockChange: (locked) => {
+        if (!locked) {
+          cleanup();
+        }
+      }
+    }
+  );
+
+  // Request lock at current cursor position
+  pointerLockManagerRef.current.requestLock(ev.clientX, ev.clientY);
+};
+```
+
+### 3. Handle Movement
+
+Implement the movement handler to track cursor changes:
+
+```typescript
+const handlePointerMove = (
+  movementX: number,
+  movementY: number,
+  cursorX: number,
+  cursorY: number
+) => {
+  // movementX, movementY: delta movement since last event
+  // cursorX, cursorY: absolute fake cursor position on screen
+
+  console.log(`Movement: ${movementX}, ${movementY}`);
+  console.log(`Cursor at: ${cursorX}, ${cursorY}`);
+
+  // Apply movement to your logic
+  updateValue(movementX);
+};
+```
+
+### 4. Release Lock
+
+Clean up when interaction ends:
+
+```typescript
+const cleanup = () => {
+  if (pointerLockManagerRef.current) {
+    pointerLockManagerRef.current.releaseLock();
+    pointerLockManagerRef.current = null;
+  }
+};
+
+// Call cleanup on mouse up
+onMouseUp={() => {
+  cleanup();
+}}
+```
+
+## Complete Example
+
+Here's a complete example of a draggable number input:
+
+```typescript
+import * as React from 'react';
+import { PointerLockManager } from '../utils/pointerLock';
+
+interface DraggableNumberInputProps {
+  value: number;
+  onChange: (value: number) => void;
+}
+
+export function DraggableNumberInput({ value, onChange }: DraggableNumberInputProps) {
+  const pointerLockManagerRef = React.useRef<PointerLockManager | null>(null);
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const dragStartValueRef = React.useRef(0);
+  const accumulatedOffsetRef = React.useRef(0);
+
+  const handlePointerMove = React.useCallback(
+    (movementX: number, _movementY: number, _cursorX: number, _cursorY: number) => {
+      // Accumulate horizontal movement
+      accumulatedOffsetRef.current += movementX;
+
+      // Calculate new value
+      const newValue = dragStartValueRef.current + accumulatedOffsetRef.current * 0.1;
+
+      // Update parent
+      onChange(newValue);
+    },
+    [onChange]
+  );
+
+  const endDrag = React.useCallback(() => {
+    if (pointerLockManagerRef.current) {
+      pointerLockManagerRef.current.releaseLock();
+      pointerLockManagerRef.current = null;
+    }
+
+    document.documentElement.style.cursor = 'auto';
+    document.removeEventListener('mouseup', endDrag);
+  }, []);
+
+  const startDrag = React.useCallback(
+    (ev: React.MouseEvent) => {
+      if (!divRef.current) return;
+
+      dragStartValueRef.current = value;
+      accumulatedOffsetRef.current = 0;
+
+      // Hide real cursor
+      document.documentElement.style.cursor = 'none';
+
+      // Create pointer lock manager
+      pointerLockManagerRef.current = new PointerLockManager(divRef.current, {
+        onMove: handlePointerMove,
+        onLockChange: (locked) => {
+          if (!locked) {
+            endDrag();
+          }
+        }
+      });
+
+      pointerLockManagerRef.current.requestLock(ev.clientX, ev.clientY);
+
+      this.pointerLockManager = null;
+    }
+
+    document.documentElement.style.cursor = 'auto';
+    document.removeEventListener('mouseup', this.endDrag);
+  };
+
+  render() {
+    return (
+            <div
+                    ref={this.divRef}
+    onMouseDown={this.startDrag}
+    style={{ cursor: 'ew-resize' }}
+  >
+    Value: {this.props.value.toFixed(2)}
+    </div>
+  );
+  }
+}
+```
+
+## API Reference
+
+### Constructor
+
+```typescript
+constructor(element: HTMLElement, options: PointerLockOptions)
+```
+
+**Parameters:**
+- `element`: The HTML element that will request pointer lock
+- `options`: Configuration object
+
+### PointerLockOptions
+
+```typescript
+interface PointerLockOptions {
+  onMove: (movementX: number, movementY: number, cursorX: number, cursorY: number) => void;
+  onLockChange?: (locked: boolean) => void;
+}
+```
+
+**Properties:**
+- `onMove`: Callback fired on mouse movement
+  - `movementX`: Horizontal movement delta (pixels)
+  - `movementY`: Vertical movement delta (pixels)
+  - `cursorX`: Absolute X position of fake cursor (pixels)
+  - `cursorY`: Absolute Y position of fake cursor (pixels)
+- `onLockChange`: Optional callback when lock state changes
+  - `locked`: Whether pointer is currently locked
+
+### Methods
+
+#### `requestLock(initialX: number, initialY: number): void`
+
+Requests pointer lock and shows the fake cursor.
+
+**Parameters:**
+- `initialX`: Initial X position for fake cursor
+- `initialY`: Initial Y position for fake cursor
+
+**Example:**
+```typescript
+manager.requestLock(event.clientX, event.clientY);
+```
+
+#### `releaseLock(): void`
+
+Releases pointer lock and hides the fake cursor. Automatically called when the user presses ESC.
+
+**Example:**
+```typescript
+manager.releaseLock();
+```
+
+#### `isPointerLocked(): boolean`
+
+Returns whether the pointer is currently locked.
+
+**Returns:** `true` if locked, `false` otherwise
+
+**Example:**
+```typescript
+if (manager.isPointerLocked()) {
+  console.log('Pointer is locked');
+}
+```
+
+## Cursor Wrap-Around Behavior
+
+When the fake cursor reaches the edge of the screen, it automatically wraps to the opposite side:
+
+- **Left edge** → wraps to right edge
+- **Right edge** → wraps to left edge
+- **Top edge** → wraps to bottom edge
+- **Bottom edge** → wraps to top edge
+
+This provides infinite dragging space, similar to Unity's inspector fields.
+
+## Fake Cursor
+
+The fake cursor is a singleton instance shared across all `PointerLockManager` instances. It:
+
+- Appears as a white arrow with black stroke
+- Has `pointer-events: none` to not interfere with interactions
+- Has maximum z-index (999999) to stay on top
+- Is automatically managed (shown/hidden) by the manager
+
+## Best Practices
+
+1. **Always clean up**: Make sure to call `releaseLock()` when done
+2. **Listen for ESC**: The browser will release pointer lock when ESC is pressed, handle this in `onLockChange`
+3. **Store reference**: Keep the manager instance as a class property
+4. **Reset state**: Reset your drag state when pointer lock is released
+5. **Hide real cursor**: Set `cursor: 'none'` on a parent element when locking
+
+## Browser Compatibility
+
+The Pointer Lock API is supported in all modern browsers:
+- Chrome/Edge 37+
+- Firefox 50+
+- Safari 10.1+
+
+## Limitations
+
+- User can exit pointer lock by pressing ESC
+- Some browsers may show a notification when pointer lock is activated
+- Pointer lock can only be requested in response to user interaction (e.g., click)
+- Only one element can have pointer lock at a time
+
+## Troubleshooting
+
+### Pointer lock not activating
+
+**Problem:** `requestLock()` is called but nothing happens.
+
+**Solution:** Ensure the call is made in response to a user gesture (like a mouse click).
+
+### Fake cursor not showing
+
+**Problem:** Pointer locks but no cursor appears.
+
+**Solution:** Check that the element is properly mounted in the DOM before requesting lock.
+
+### Lock releases immediately
+
+**Problem:** Pointer lock is released right after requesting.
+
+**Solution:** Check browser console for security errors. Ensure the element is visible and focusable.
+
+### Movement feels wrong
+
+**Problem:** Movement direction or sensitivity is incorrect.
+
+**Solution:** Adjust the movement multiplier in your `onMove` handler. You may need to negate or scale the values.
+
+## See Also
+
+- [Pointer Lock API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
+- [DraggableIcon Component](../components/DraggableIcon.tsx) - Reference implementation
+