@omnipad/vue 0.1.1-alpha.0 → 0.2.0-alpha.2

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import { ComponentProvideOptions } from 'vue';
 import { ComponentPublicInstance } from 'vue';
 import { ComputedRef } from 'vue';
 import { ConfigTreeNode } from '@omnipad/core';
+import { CursorState } from '@omnipad/core';
 import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
 import { GlobalComponents } from 'vue';
@@ -20,6 +21,7 @@ import { OnCleanup } from '@vue/reactivity';
 import { PublicProps } from 'vue';
 import { ShallowUnwrapRef } from 'vue';
 import { Slot } from 'vue';
+import { Vec2 } from '@omnipad/core';
 import { VNodeProps } from 'vue';
 import { WatchOptions } from 'vue';
 import { WatchStopHandle } from 'vue';
@@ -32,6 +34,10 @@ declare const __VLS_component_2: DefineComponent<__VLS_Props, {}, {}, {}, {}, Co
 elementRef: HTMLDivElement;
 }, HTMLDivElement>;
 
+declare const __VLS_component_3: DefineComponent<TargetZoneProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<TargetZoneProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+elementRef: HTMLDivElement;
+}, HTMLDivElement>;
+
 declare type __VLS_Props = {
     /** The runtime tree node for auto-configuration. */
     treeNode?: ConfigTreeNode;
@@ -61,10 +67,32 @@ declare function __VLS_template_2(): {
     rootEl: HTMLDivElement;
 };
 
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        'focus-feedback'?(_: {
+            state: CursorState | undefined;
+            isReturning: boolean | undefined;
+            cursorPos: Vec2 | undefined;
+        }): any;
+        cursor?(_: {
+            state: CursorState | undefined;
+            isDown: boolean | undefined;
+            cursorPos: Vec2 | undefined;
+        }): any;
+    };
+    refs: {
+        elementRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -77,6 +105,12 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 export declare const InputZone: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 declare interface InputZoneProps {
@@ -97,9 +131,7 @@ export declare function registerComponent(type: string, component: Component): v
 
 export declare const RootLayer: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
-export declare const TargetZone: DefineComponent<TargetZoneProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<TargetZoneProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
-elementRef: HTMLDivElement;
-}, HTMLDivElement>;
+export declare const TargetZone: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
 declare interface TargetZoneProps {
     /** The runtime tree node for automatic setup. */
@@ -114,11 +146,12 @@ declare interface TargetZoneProps {
     layout?: LayoutBox;
 }
 
-export declare const VirtualKeyboardButton: DefineComponent<VirtualKeyButtonButtonProps, {
+export declare const VirtualKeyboardButton: DefineComponent<VirtualKeyButtonProps, {
 uid: ComputedRef<any>;
 onPointerDown: (e: PointerEvent) => void | undefined;
 onPointerUp: (e: PointerEvent) => void | undefined;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualKeyButtonButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+onPointerCancel: (e: PointerEvent) => void | undefined;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualKeyButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
 elementRef: ({
 $: ComponentInternalInstance;
 $data: {};
@@ -176,10 +209,10 @@ default?(_: {}): any;
 }) | null;
 }, HTMLDivElement>;
 
-declare interface VirtualKeyButtonButtonProps {
+declare interface VirtualKeyButtonProps {
     /** The runtime tree node for automatic setup. */
     treeNode?: ConfigTreeNode;
-    /** Unique configuration ID (CID) for this zone. Used for profile serialization. */
+    /** Unique configuration ID (CID) for this button. Used for profile serialization. */
     widgetId?: string;
     /** The text or symbol displayed on the button surface. */
     label?: string;
@@ -194,4 +227,166 @@ declare interface VirtualKeyButtonButtonProps {
     layout?: LayoutBox;
 }
 
+export declare const VirtualMouseButton: DefineComponent<VirtualMouseButtonProps, {
+uid: ComputedRef<any>;
+onPointerDown: (e: PointerEvent) => void | undefined;
+onPointerUp: (e: PointerEvent) => void | undefined;
+onPointerCancel: (e: PointerEvent) => void | undefined;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualMouseButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+elementRef: ({
+$: ComponentInternalInstance;
+$data: {};
+$props: {
+readonly layout?: LayoutBox | undefined;
+readonly isActive?: boolean | undefined;
+readonly label?: string | undefined;
+} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+$attrs: {
+[x: string]: unknown;
+};
+$refs: {
+[x: string]: unknown;
+};
+$slots: Readonly<{
+[name: string]: Slot<any> | undefined;
+}>;
+$root: ComponentPublicInstance | null;
+$parent: ComponentPublicInstance | null;
+$host: Element | null;
+$emit: (event: string, ...args: any[]) => void;
+$el: HTMLDivElement;
+$options: ComponentOptionsBase<Readonly<{
+layout?: LayoutBox;
+isActive?: boolean;
+label?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+beforeCreate?: (() => void) | (() => void)[];
+created?: (() => void) | (() => void)[];
+beforeMount?: (() => void) | (() => void)[];
+mounted?: (() => void) | (() => void)[];
+beforeUpdate?: (() => void) | (() => void)[];
+updated?: (() => void) | (() => void)[];
+activated?: (() => void) | (() => void)[];
+deactivated?: (() => void) | (() => void)[];
+beforeDestroy?: (() => void) | (() => void)[];
+beforeUnmount?: (() => void) | (() => void)[];
+destroyed?: (() => void) | (() => void)[];
+unmounted?: (() => void) | (() => void)[];
+renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+};
+$forceUpdate: () => void;
+$nextTick: nextTick;
+$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
+} & Readonly<{}> & Omit<Readonly<{
+layout?: LayoutBox;
+isActive?: boolean;
+label?: string;
+}> & Readonly<{}>, never> & ShallowUnwrapRef<    {}> & {} & ComponentCustomProperties & {} & {
+$slots: {
+default?(_: {}): any;
+};
+}) | null;
+}, HTMLDivElement>;
+
+declare interface VirtualMouseButtonProps {
+    /** The runtime tree node for automatic setup. */
+    treeNode?: ConfigTreeNode;
+    /** Unique configuration ID (CID) for this button. Used for profile serialization. */
+    widgetId?: string;
+    /** The text or symbol displayed on the button surface. */
+    label?: string;
+    /** The ID (CID) of the TargetZone this button sends signals to. */
+    targetStageId?: string;
+    /** 0: Left, 1: Middle, 2: Right */
+    button?: 0 | 1 | 2;
+    /**
+     * Fixed coordinate to click on (0-100 percentage).
+     * Example: { x: 95, y: 5 } for a pause button in the corner.
+     */
+    fixedPoint?: Vec2;
+    /** Spatial layout configuration relative to its parent zone. */
+    layout?: LayoutBox;
+}
+
+export declare const VirtualTrackpad: DefineComponent<VirtualTrackpadProps, {
+uid: ComputedRef<any>;
+onPointerDown: (e: PointerEvent) => void | undefined;
+onPointerMove: (e: PointerEvent) => void | undefined;
+onPointerUp: (e: PointerEvent) => void | undefined;
+onPointerCancel: (e: PointerEvent) => void | undefined;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualTrackpadProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+elementRef: ({
+$: ComponentInternalInstance;
+$data: {};
+$props: {
+readonly layout?: LayoutBox | undefined;
+readonly isActive?: boolean | undefined;
+readonly label?: string | undefined;
+} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+$attrs: {
+[x: string]: unknown;
+};
+$refs: {
+[x: string]: unknown;
+};
+$slots: Readonly<{
+[name: string]: Slot<any> | undefined;
+}>;
+$root: ComponentPublicInstance | null;
+$parent: ComponentPublicInstance | null;
+$host: Element | null;
+$emit: (event: string, ...args: any[]) => void;
+$el: HTMLDivElement;
+$options: ComponentOptionsBase<Readonly<{
+layout?: LayoutBox;
+isActive?: boolean;
+label?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+beforeCreate?: (() => void) | (() => void)[];
+created?: (() => void) | (() => void)[];
+beforeMount?: (() => void) | (() => void)[];
+mounted?: (() => void) | (() => void)[];
+beforeUpdate?: (() => void) | (() => void)[];
+updated?: (() => void) | (() => void)[];
+activated?: (() => void) | (() => void)[];
+deactivated?: (() => void) | (() => void)[];
+beforeDestroy?: (() => void) | (() => void)[];
+beforeUnmount?: (() => void) | (() => void)[];
+destroyed?: (() => void) | (() => void)[];
+unmounted?: (() => void) | (() => void)[];
+renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
+errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
+};
+$forceUpdate: () => void;
+$nextTick: nextTick;
+$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
+} & Readonly<{}> & Omit<Readonly<{
+layout?: LayoutBox;
+isActive?: boolean;
+label?: string;
+}> & Readonly<{}>, never> & ShallowUnwrapRef<    {}> & {} & ComponentCustomProperties & {} & {
+$slots: {
+default?(_: {}): any;
+};
+}) | null;
+}, HTMLDivElement>;
+
+declare interface VirtualTrackpadProps {
+    /** The runtime tree node for automatic setup. */
+    treeNode?: ConfigTreeNode;
+    /** Unique configuration ID (CID) for this trackpad. Used for profile serialization. */
+    widgetId?: string;
+    /** The text or symbol displayed on the trackpad surface. */
+    label?: string;
+    /** Determines the mapping ratio between the physical displacement of the trackpad and the movement of the screen cursor. */
+    sensitivity?: number;
+    /** The ID (CID) of the TargetZone this trackpad sends signals to. */
+    targetStageId?: string;
+    /** Spatial layout configuration relative to its parent zone. */
+    layout?: LayoutBox;
+}
+
 export { }

package/dist/omnipad-vue.css

@@ -1 +1 @@
-:root{--omnipad-btn-bg: rgba(255, 255, 255, .2);--omnipad-btn-border-color: rgba(255, 255, 255, .4);--omnipad-btn-border-width: 2px;--omnipad-btn-border-style: solid;--omnipad-btn-radius: 8px;--omnipad-btn-label-color: #ffffff;--omnipad-btn-font-family: "Upheaval", "monacoregular", sans-serif;--omnipad-btn-font-size: 18px;--omnipad-btn-font-weight: bold;--omnipad-btn-pressed-bg: rgba(255, 186, 67, .6);--omnipad-btn-pressed-border-color: #ffba43;--omnipad-btn-pressed-scale: .92;--omnipad-btn-pressed-opacity: 1;--omnipad-btn-transition-duration: .1s;--omnipad-btn-transition-timing: ease-out}.omnipad-button-base{background:var(--omnipad-btn-bg);border:var(--omnipad-btn-border-width) var(--omnipad-btn-border-style) var(--omnipad-btn-border-color);border-radius:var(--omnipad-btn-radius);display:flex;align-items:center;justify-content:center;transition:all var(--omnipad-btn-transition-duration) var(--omnipad-btn-transition-timing)}.omnipad-button-label-hollow{font-family:var(--omnipad-btn-font-family);font-size:var(--omnipad-btn-font-size);color:var(--omnipad-btn-label-color);font-weight:var(--omnipad-btn-font-weight);background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;filter:invert(1) grayscale(1) contrast(9);mix-blend-mode:destination-out}.omnipad-prevent{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.omnipad-virtual-layer-base[data-v-6f1860f6]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}[data-v-6f1860f6] .omnipad-input-zone,[data-v-6f1860f6] .omnipad-button{pointer-events:auto}.omnipad-input-zone[data-v-02669919]{position:absolute;pointer-events:none}.omnipad-input-zone-trigger[data-v-02669919]{position:absolute;inset:0;pointer-events:auto;background:transparent;touch-action:none}.dynamic-widget-mount[data-v-02669919]{pointer-events:none}.omnipad-virtual-layer[data-v-a509fd6e]{position:relative;height:100%;width:100%;pointer-events:none}.omnipad-target-zone[data-v-b9d49b97]{pointer-events:none;overflow:hidden}.omnipad-virtual-cursor[data-v-b9d49b97]{position:absolute;width:20px;height:20px;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .2s}.cursor-dot[data-v-b9d49b97]{width:100%;height:100%;border:2px solid white;border-radius:50%;background:#ff000080}.cursor-dot.is-down[data-v-b9d49b97]{transform:scale(.8);background:red}.focus-feedback-ring[data-v-b9d49b97]{position:absolute;width:60px;height:60px;transform:translate(-50%,-50%);border:2px solid rgba(100,200,255,.8);border-radius:50%;pointer-events:none;z-index:5}.pulse-enter-active[data-v-b9d49b97]{animation:ripple-out-b9d49b97 .5s ease-out forwards}@keyframes ripple-out-b9d49b97{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.omnipad-virtual-cursor[data-v-b9d49b97]{z-index:10}.omnipad-button-base[data-v-6cbe805c]{-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;box-sizing:border-box;pointer-events:auto}.omnipad-button-base.omnipad-is-active[data-v-6cbe805c]{background:var(--omnipad-btn-pressed-bg);border-color:var(--omnipad-btn-pressed-border-color);opacity:var(--omnipad-btn-pressed-opacity);filter:brightness(1.2)}.omnipad-button-label[data-v-6cbe805c]{font-family:var(--omnipad-btn-font-family);font-size:var(--omnipad-btn-font-size);color:var(--omnipad-btn-label-color);font-weight:var(--omnipad-btn-font-weight)}
+:root{--omnipad-btn-bg: rgba(255, 255, 255, .2);--omnipad-btn-border-color: rgba(255, 255, 255, .4);--omnipad-btn-border-width: 2px;--omnipad-btn-border-style: solid;--omnipad-btn-radius: 8px;--omnipad-btn-label-color: #ffffff;--omnipad-btn-font-family: "Upheaval", "monacoregular", sans-serif;--omnipad-btn-font-size: 18px;--omnipad-btn-font-weight: bold;--omnipad-btn-pressed-bg: rgba(255, 186, 67, .6);--omnipad-btn-pressed-border-color: #ffba43;--omnipad-btn-pressed-scale: .92;--omnipad-btn-pressed-opacity: 1;--omnipad-btn-transition-duration: .1s;--omnipad-btn-transition-timing: ease-out;--omnipad-default-cursor-height: 20px;--omnipad-default-cursor-width: 20px;--omnipad-default-cursor-transition: var(--omnipad-default-cursor-transition-mode) var(--omnipad-default-cursor-transition-time);--omnipad-default-cursor-transition-mode: opacity;--omnipad-default-cursor-transition-time: .2s;--omnipad-default-cursor-dot-background: #ff000080;--omnipad-default-cursor-dot-border-color: #ffffff;--omnipad-default-cursor-dot-border-radius: 50%;--omnipad-default-cursor-dot-border-style: solid;--omnipad-default-cursor-dot-border-width: 2px;--omnipad-default-cursor-dot-down-background: #ff0000;--omnipad-default-cursor-dot-down-scale: .8;--omnipad-focus-color: rgba(100, 200, 255, .8);--omnipad-focus-bg-color: rgba(100, 200, 255, .05);--omnipad-trackpad-bg: rgba(255, 255, 255, .05);--omnipad-trackpad-border-style: dashed;--omnipad-trackpad-cursor: crosshair}.omnipad-button-base{background:var(--omnipad-btn-bg);border:var(--omnipad-btn-border-width) var(--omnipad-btn-border-style) var(--omnipad-btn-border-color);border-radius:var(--omnipad-btn-radius);display:flex;align-items:center;justify-content:center;transition:all var(--omnipad-btn-transition-duration) var(--omnipad-btn-transition-timing)}.omnipad-button-label-hollow{font-family:var(--omnipad-btn-font-family);font-size:var(--omnipad-btn-font-size);color:var(--omnipad-btn-label-color);font-weight:var(--omnipad-btn-font-weight);background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;filter:invert(1) grayscale(1) contrast(9);mix-blend-mode:destination-out}.omnipad-default-cursor-dot{width:100%;height:100%;border-width:var(--omnipad-default-cursor-dot-border-width);border-style:var(--omnipad-default-cursor-dot-border-style);border-color:var(--omnipad-default-cursor-dot-border-color);border-radius:var(--omnipad-default-cursor-dot-border-radius);background:var(--omnipad-default-cursor-dot-background)}.omnipad-default-cursor-dot.is-down{transform:scale(var(--omnipad-default-cursor-dot-down-scale));background:var(--omnipad-default-cursor-dot-down-background)}.omnipad-default-focus-border-feedback{position:absolute;inset:0;pointer-events:none;z-index:5;border:2px solid var(--omnipad-focus-color);background-color:var(--omnipad-focus-bg-color);box-shadow:inset 0 0 10px var(--omnipad-focus-color);box-sizing:border-box}.omnipad-default-focus-fade-enter-active{transition:opacity .05s ease-in}.omnipad-default-focus-fade-leave-active{transition:opacity .2s ease-out}.omnipad-default-focus-fade-enter-from,.omnipad-default-focus-fade-leave-to{opacity:0}.omnipad-prevent{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.omnipad-trackpad:before{content:"";position:absolute;inset:10px;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.omnipad-virtual-layer-base[data-v-6f1860f6]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}[data-v-6f1860f6] .omnipad-input-zone,[data-v-6f1860f6] .omnipad-button{pointer-events:auto}.omnipad-input-zone[data-v-e0c28ebd]{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;touch-action:none}.omnipad-input-zone-trigger[data-v-e0c28ebd]{position:absolute;inset:0;pointer-events:auto;background:transparent;touch-action:none}.dynamic-widget-mount[data-v-e0c28ebd]{pointer-events:none}.omnipad-virtual-layer[data-v-9e46ef9c]{position:relative;height:100%;width:100%;pointer-events:none}.omnipad-target-zone[data-v-70b706ac]{-webkit-user-select:none;user-select:none;touch-action:none;pointer-events:auto;overflow:hidden}.omnipad-virtual-cursor[data-v-70b706ac]{position:absolute;width:var(--omnipad-default-cursor-width);height:var(--omnipad-default-cursor-height);transform:translate(-50%,-50%);pointer-events:none;transition:var(--omnipad-default-cursor-transition);z-index:10}.omnipad-button-base[data-v-3db6d4f9]{-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;box-sizing:border-box;pointer-events:auto}.omnipad-button-base.is-active[data-v-3db6d4f9]{background:var(--omnipad-btn-pressed-bg);border-color:var(--omnipad-btn-pressed-border-color);opacity:var(--omnipad-btn-pressed-opacity);filter:brightness(1.2)}.omnipad-button-label[data-v-3db6d4f9]{font-family:var(--omnipad-btn-font-family);font-size:var(--omnipad-btn-font-size);color:var(--omnipad-btn-label-color);font-weight:var(--omnipad-btn-font-weight)}.omnipad-trackpad[data-v-c28e3a2e]{-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden;--omnipad-btn-border-style: var(--omnipad-trackpad-border-style);--omnipad-btn-bg: var(--omnipad-trackpad-bg);cursor:var(--omnipad-trackpad-cursor)}