@myko/ui-vue 4.4.2 → 4.4.6

package/dist/composables/useConnection.d.ts

@@ -0,0 +1,40 @@
+import { ComputedRef, Ref } from 'vue';
+import { ConnectionStatus } from '@myko/core';
+
+export interface UseConnectionReturn {
+    /** Current connection status (reactive) */
+    status: Ref<ConnectionStatus>;
+    /** Whether currently connected (computed) */
+    isConnected: ComputedRef<boolean>;
+    /** Whether currently connecting (computed) */
+    isConnecting: ComputedRef<boolean>;
+    /** Whether currently disconnected (computed) */
+    isDisconnected: ComputedRef<boolean>;
+    /** Connect to a server address */
+    connect: (address: string) => void;
+    /** Disconnect from the server */
+    disconnect: () => void;
+}
+/**
+ * Vue composable for managing Myko connection status.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ *   import { useConnection } from '@myko/ui-vue'
+ *
+ *   const { status, isConnected, connect, disconnect } = useConnection()
+ *
+ *   function handleConnect() {
+ *     connect('ws://localhost:5155')
+ *   }
+ * </script>
+ *
+ * <template>
+ *   <div>Status: {{ status }}</div>
+ *   <button v-if="!isConnected" @click="handleConnect">Connect</button>
+ *   <button v-else @click="disconnect">Disconnect</button>
+ * </template>
+ * ```
+ */
+export declare function useConnection(): UseConnectionReturn;

package/dist/composables/useQuery.d.ts

@@ -0,0 +1,40 @@
+import { ComputedRef, Ref } from 'vue';
+import { Query, QueryItem } from '@myko/core';
+
+export interface UseQueryReturn<Q extends Query<unknown>> {
+    /** Reactive map of items by ID */
+    items: Map<string, QueryItem<Q> & {
+        id: string;
+    }>;
+    /** Array of all items (computed for convenience) */
+    itemsArray: ComputedRef<(QueryItem<Q> & {
+        id: string;
+    })[]>;
+    /** Whether the query has received its first response */
+    resolved: Ref<boolean>;
+    /** Manually release the subscription (also called on unmount) */
+    release: () => void;
+}
+/**
+ * Vue composable for watching a Myko query.
+ *
+ * Automatically releases the subscription when the component is unmounted.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ *   import { useQuery } from '@myko/ui-vue'
+ *   import { queries } from '@rship/entities'
+ *
+ *   const { items, itemsArray, resolved } = useQuery(queries.GetAllTargets({}))
+ * </script>
+ *
+ * <template>
+ *   <div v-if="!resolved">Loading...</div>
+ *   <div v-for="target in itemsArray" :key="target.id">
+ *     {{ target.name }}
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function useQuery<Q extends Query<unknown>>(queryFactory: Q): UseQueryReturn<Q>;

package/dist/composables/useReport.d.ts

@@ -0,0 +1,29 @@
+import { ShallowRef } from 'vue';
+import { Report, ReportResult } from '@myko/core';
+
+export interface UseReportReturn<R extends Report<unknown>> {
+    /** Current value (reactive via ref) */
+    value: ShallowRef<ReportResult<R> | undefined>;
+    /** Manually release the subscription (also called on unmount) */
+    release: () => void;
+}
+/**
+ * Vue composable for watching a Myko report.
+ *
+ * Automatically releases the subscription when the component is unmounted.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ *   import { useReport } from '@myko/ui-vue'
+ *   import { reports } from '@rship/entities'
+ *
+ *   const { value } = useReport(reports.CountAllTargets({}))
+ * </script>
+ *
+ * <template>
+ *   <div>Count: {{ value?.count ?? 'loading...' }}</div>
+ * </template>
+ * ```
+ */
+export declare function useReport<R extends Report<unknown>>(reportFactory: R): UseReportReturn<R>;

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var S=Object.defineProperty;var p=(s,t,e)=>t in s?S(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var i=(s,t,e)=>p(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("@myko/core"),c=require("vue"),f=require("rxjs");class b{constructor(){i(this,"client");i(this,"sharedQueries",new Map);i(this,"sharedReports",new Map);i(this,"commandSuccessSubject",new f.Subject);i(this,"commandErrorSubject",new f.Subject);i(this,"commandSuccess$",this.commandSuccessSubject.asObservable());i(this,"commandError$",this.commandErrorSubject.asObservable());i(this,"_connectionStatus",c.ref(u.ConnectionStatus.Disconnected));this.client=new u.MykoClient,this.client.connectionStatus$.subscribe(t=>{this._connectionStatus.value=t})}getCacheKey(t,e){const n=t==="query"?e.queryId:e.reportId,o=t==="query"?e.query:e.report;return`${t}:${n}:${JSON.stringify(o)}`}get connectionStatus(){return this._connectionStatus}get isConnected(){return this._connectionStatus.value===u.ConnectionStatus.Connected}connect(t){this.client.setAddress(t)}disconnect(){for(const t of this.sharedQueries.values())t.subscription.unsubscribe();this.sharedQueries.clear();for(const t of this.sharedReports.values())t.subscription.unsubscribe();this.sharedReports.clear(),this.client.disconnect()}query(t){const e=this.getCacheKey("query",t);let n=this.sharedQueries.get(e);if(!n){const r=c.shallowReactive(new Map),a=c.ref(!1),h=this.client.watchQueryDiff(t).subscribe({next:m=>{m.sequence===0n&&r.clear();for(const l of m.deletes)r.delete(l);for(const l of m.upserts)r.set(l.id,l);a.value=!0}});n={items:r,resolved:a,subscription:h,refCount:0},this.sharedQueries.set(e,n)}n.refCount++;let o=!1;return{items:n.items,resolved:n.resolved,release:()=>{if(o)return;o=!0;const r=this.sharedQueries.get(e);r&&(r.refCount--,r.refCount<=0&&(r.subscription.unsubscribe(),this.sharedQueries.delete(e)))}}}report(t){const e=this.getCacheKey("report",t);let n=this.sharedReports.get(e);if(!n){const r=c.shallowRef(void 0),a=this.client.watchReport(t).subscribe({next:h=>{r.value=h}});n={value:r,subscription:a,refCount:0},this.sharedReports.set(e,n)}n.refCount++;let o=!1;return{value:n.value,release:()=>{if(o)return;o=!0;const r=this.sharedReports.get(e);r&&(r.refCount--,r.refCount<=0&&(r.subscription.unsubscribe(),this.sharedReports.delete(e)))}}}async sendCommand(t){const e=t.commandId;try{const n=await this.client.sendCommand(t);return this.commandSuccessSubject.next({commandId:e,response:n}),n}catch(n){const o=n instanceof Error?n:new Error(String(n));throw this.commandErrorSubject.next({commandId:e,error:o}),n}}get raw(){return this.client}}const C=new b;function d(){return C}function v(){return new b}function y(s){const e=d().query(s);c.onUnmounted(()=>{e.release()});const n=c.computed(()=>Array.from(e.items.values()));return{items:e.items,itemsArray:n,resolved:e.resolved,release:e.release}}function g(s){const e=d().report(s);return c.onUnmounted(()=>{e.release()}),{value:e.value,release:e.release}}function w(){const s=d(),t=c.computed(()=>s.connectionStatus.value===u.ConnectionStatus.Connected),e=c.computed(()=>s.connectionStatus.value===u.ConnectionStatus.Connecting),n=c.computed(()=>s.connectionStatus.value===u.ConnectionStatus.Disconnected);return{status:s.connectionStatus,isConnected:t,isConnecting:e,isDisconnected:n,connect:o=>s.connect(o),disconnect:()=>s.disconnect()}}Object.defineProperty(exports,"ConnectionStatus",{enumerable:!0,get:()=>u.ConnectionStatus});exports.VueMykoClient=b;exports.createMykoClient=v;exports.getMykoClient=d;exports.myko=C;exports.useConnection=w;exports.useQuery=y;exports.useReport=g;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createMykoClient, getMykoClient, myko, VueMykoClient, type CommandError, type CommandSuccess, type ReactiveQuery, type ReactiveReport } from './services/vue-client';
+export { useQuery, useReport, useConnection, type UseQueryReturn, type UseReportReturn, type UseConnectionReturn } from './composables';
+export { ConnectionStatus } from '@myko/core';

package/dist/index.mjs

@@ -0,0 +1,227 @@
+var S = Object.defineProperty;
+var v = (n, t, e) => t in n ? S(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var c = (n, t, e) => v(n, typeof t != "symbol" ? t + "" : t, e);
+import { ConnectionStatus as i, MykoClient as g } from "@myko/core";
+import { ConnectionStatus as I } from "@myko/core";
+import { ref as f, shallowReactive as w, shallowRef as y, onUnmounted as p, computed as l } from "vue";
+import { Subject as b } from "rxjs";
+class C {
+  constructor() {
+    c(this, "client");
+    // Shared queries by cache key
+    c(this, "sharedQueries", /* @__PURE__ */ new Map());
+    // Shared reports by cache key
+    c(this, "sharedReports", /* @__PURE__ */ new Map());
+    // Command outcome subjects
+    c(this, "commandSuccessSubject", new b());
+    c(this, "commandErrorSubject", new b());
+    /** Observable of all command successes */
+    c(this, "commandSuccess$", this.commandSuccessSubject.asObservable());
+    /** Observable of all command errors */
+    c(this, "commandError$", this.commandErrorSubject.asObservable());
+    // Reactive connection status
+    c(this, "_connectionStatus", f(i.Disconnected));
+    this.client = new g(), this.client.connectionStatus$.subscribe((t) => {
+      this._connectionStatus.value = t;
+    });
+  }
+  /** Create a stable cache key from a query/report factory */
+  getCacheKey(t, e) {
+    const s = t === "query" ? e.queryId : e.reportId, o = t === "query" ? e.query : e.report;
+    return `${t}:${s}:${JSON.stringify(o)}`;
+  }
+  /** Current connection status (reactive) */
+  get connectionStatus() {
+    return this._connectionStatus;
+  }
+  /** Whether currently connected (reactive) - use .value to access */
+  get isConnected() {
+    return this._connectionStatus.value === i.Connected;
+  }
+  /** Set the server address and connect */
+  connect(t) {
+    this.client.setAddress(t);
+  }
+  /** Disconnect from the server */
+  disconnect() {
+    for (const t of this.sharedQueries.values())
+      t.subscription.unsubscribe();
+    this.sharedQueries.clear();
+    for (const t of this.sharedReports.values())
+      t.subscription.unsubscribe();
+    this.sharedReports.clear(), this.client.disconnect();
+  }
+  /**
+   * Watch a query with reactive Map updates.
+   *
+   * Multiple calls with the same query args share the same Map,
+   * and the subscription is only cancelled when all consumers release.
+   *
+   * @example
+   * ```vue
+   * <script setup>
+   *   import { onUnmounted } from 'vue'
+   *   const { items, resolved, release } = client.query(queries.GetAllTargets({}))
+   *   onUnmounted(release)
+   * <\/script>
+   *
+   * <template>
+   *   <div v-for="[id, target] in items" :key="id">{{ target.name }}</div>
+   * </template>
+   * ```
+   */
+  query(t) {
+    const e = this.getCacheKey("query", t);
+    let s = this.sharedQueries.get(e);
+    if (!s) {
+      const r = w(/* @__PURE__ */ new Map()), u = f(!1), d = this.client.watchQueryDiff(t).subscribe({
+        next: (h) => {
+          h.sequence === 0n && r.clear();
+          for (const a of h.deletes)
+            r.delete(a);
+          for (const a of h.upserts)
+            r.set(a.id, a);
+          u.value = !0;
+        }
+      });
+      s = { items: r, resolved: u, subscription: d, refCount: 0 }, this.sharedQueries.set(e, s);
+    }
+    s.refCount++;
+    let o = !1;
+    return {
+      items: s.items,
+      resolved: s.resolved,
+      release: () => {
+        if (o) return;
+        o = !0;
+        const r = this.sharedQueries.get(e);
+        r && (r.refCount--, r.refCount <= 0 && (r.subscription.unsubscribe(), this.sharedQueries.delete(e)));
+      }
+    };
+  }
+  /**
+   * Watch a report with reactive value updates.
+   *
+   * Multiple calls with the same report args share the same subscription,
+   * and the subscription is only cancelled when all consumers release.
+   *
+   * @example
+   * ```vue
+   * <script setup>
+   *   import { onUnmounted } from 'vue'
+   *   const { value, release } = client.report(reports.CountAllTargets({}))
+   *   onUnmounted(release)
+   * <\/script>
+   *
+   * <template>
+   *   <div>Count: {{ value?.count ?? 'loading...' }}</div>
+   * </template>
+   * ```
+   */
+  report(t) {
+    const e = this.getCacheKey("report", t);
+    let s = this.sharedReports.get(e);
+    if (!s) {
+      const r = y(void 0), u = this.client.watchReport(t).subscribe({
+        next: (d) => {
+          r.value = d;
+        }
+      });
+      s = {
+        value: r,
+        subscription: u,
+        refCount: 0
+      }, this.sharedReports.set(e, s);
+    }
+    s.refCount++;
+    let o = !1;
+    return {
+      value: s.value,
+      release: () => {
+        if (o) return;
+        o = !0;
+        const r = this.sharedReports.get(e);
+        r && (r.refCount--, r.refCount <= 0 && (r.subscription.unsubscribe(), this.sharedReports.delete(e)));
+      }
+    };
+  }
+  /**
+   * Send a command and wait for the response.
+   *
+   * Emits to commandSuccess$ or commandError$ observables for generic handling.
+   *
+   * @example
+   * ```vue
+   * <script setup>
+   *   async function deleteMachine(id: string) {
+   *     const result = await myko.sendCommand(commands.DeleteMachine({ machineId: id }))
+   *     console.log('Deleted:', result)
+   *   }
+   * <\/script>
+   * ```
+   */
+  async sendCommand(t) {
+    const e = t.commandId;
+    try {
+      const s = await this.client.sendCommand(t);
+      return this.commandSuccessSubject.next({ commandId: e, response: s }), s;
+    } catch (s) {
+      const o = s instanceof Error ? s : new Error(String(s));
+      throw this.commandErrorSubject.next({ commandId: e, error: o }), s;
+    }
+  }
+  /** Access the underlying MykoClient for advanced use cases */
+  get raw() {
+    return this.client;
+  }
+}
+const R = new C();
+function m() {
+  return R;
+}
+function x() {
+  return new C();
+}
+function E(n) {
+  const e = m().query(n);
+  p(() => {
+    e.release();
+  });
+  const s = l(() => Array.from(e.items.values()));
+  return {
+    items: e.items,
+    itemsArray: s,
+    resolved: e.resolved,
+    release: e.release
+  };
+}
+function $(n) {
+  const e = m().report(n);
+  return p(() => {
+    e.release();
+  }), {
+    value: e.value,
+    release: e.release
+  };
+}
+function k() {
+  const n = m(), t = l(() => n.connectionStatus.value === i.Connected), e = l(() => n.connectionStatus.value === i.Connecting), s = l(() => n.connectionStatus.value === i.Disconnected);
+  return {
+    status: n.connectionStatus,
+    isConnected: t,
+    isConnecting: e,
+    isDisconnected: s,
+    connect: (o) => n.connect(o),
+    disconnect: () => n.disconnect()
+  };
+}
+export {
+  I as ConnectionStatus,
+  C as VueMykoClient,
+  x as createMykoClient,
+  m as getMykoClient,
+  R as myko,
+  k as useConnection,
+  E as useQuery,
+  $ as useReport
+};

package/dist/services/vue-client.d.ts

@@ -0,0 +1,124 @@
+import { ConnectionStatus, MykoClient, Command, CommandResult, QueryItem, Query, ReportResult, Report } from '@myko/core';
+import { Ref, ShallowRef } from 'vue';
+import { Observable } from 'rxjs';
+
+/** Command success event */
+export type CommandSuccess = {
+    commandId: string;
+    response: unknown;
+};
+/** Command error event */
+export type CommandError = {
+    commandId: string;
+    error: Error;
+};
+/** Reactive query result using reactive Map - generic over the Query factory type */
+export type ReactiveQuery<Q extends Query<unknown>> = {
+    /** Reactive map of items by ID */
+    readonly items: Map<string, QueryItem<Q> & {
+        id: string;
+    }>;
+    /** Whether the query has received its first response */
+    readonly resolved: Ref<boolean>;
+    /** Release this consumer's reference (unsubscribes when last consumer releases) */
+    release: () => void;
+};
+/** Reactive report result - generic over the Report factory type */
+export type ReactiveReport<R extends Report<unknown>> = {
+    /** Current value (reactive via ref) */
+    readonly value: ShallowRef<ReportResult<R> | undefined>;
+    /** Release this consumer's reference (unsubscribes when last consumer releases) */
+    release: () => void;
+};
+/**
+ * Vue-friendly Myko client
+ *
+ * Wraps MykoClient to provide reactive Vue state with automatic deduplication.
+ */
+export declare class VueMykoClient {
+    private client;
+    private sharedQueries;
+    private sharedReports;
+    private commandSuccessSubject;
+    private commandErrorSubject;
+    /** Observable of all command successes */
+    readonly commandSuccess$: Observable<CommandSuccess>;
+    /** Observable of all command errors */
+    readonly commandError$: Observable<CommandError>;
+    private _connectionStatus;
+    constructor();
+    /** Create a stable cache key from a query/report factory */
+    private getCacheKey;
+    /** Current connection status (reactive) */
+    get connectionStatus(): Ref<ConnectionStatus>;
+    /** Whether currently connected (reactive) - use .value to access */
+    get isConnected(): boolean;
+    /** Set the server address and connect */
+    connect(address: string): void;
+    /** Disconnect from the server */
+    disconnect(): void;
+    /**
+     * Watch a query with reactive Map updates.
+     *
+     * Multiple calls with the same query args share the same Map,
+     * and the subscription is only cancelled when all consumers release.
+     *
+     * @example
+     * ```vue
+     * <script setup>
+     *   import { onUnmounted } from 'vue'
+     *   const { items, resolved, release } = client.query(queries.GetAllTargets({}))
+     *   onUnmounted(release)
+     * </script>
+     *
+     * <template>
+     *   <div v-for="[id, target] in items" :key="id">{{ target.name }}</div>
+     * </template>
+     * ```
+     */
+    query<Q extends Query<unknown>>(queryFactory: Q): ReactiveQuery<Q>;
+    /**
+     * Watch a report with reactive value updates.
+     *
+     * Multiple calls with the same report args share the same subscription,
+     * and the subscription is only cancelled when all consumers release.
+     *
+     * @example
+     * ```vue
+     * <script setup>
+     *   import { onUnmounted } from 'vue'
+     *   const { value, release } = client.report(reports.CountAllTargets({}))
+     *   onUnmounted(release)
+     * </script>
+     *
+     * <template>
+     *   <div>Count: {{ value?.count ?? 'loading...' }}</div>
+     * </template>
+     * ```
+     */
+    report<R extends Report<unknown>>(reportFactory: R): ReactiveReport<R>;
+    /**
+     * Send a command and wait for the response.
+     *
+     * Emits to commandSuccess$ or commandError$ observables for generic handling.
+     *
+     * @example
+     * ```vue
+     * <script setup>
+     *   async function deleteMachine(id: string) {
+     *     const result = await myko.sendCommand(commands.DeleteMachine({ machineId: id }))
+     *     console.log('Deleted:', result)
+     *   }
+     * </script>
+     * ```
+     */
+    sendCommand<C extends Command<unknown>>(commandFactory: C): Promise<CommandResult<C>>;
+    /** Access the underlying MykoClient for advanced use cases */
+    get raw(): MykoClient;
+}
+/** Global singleton client instance (auto-initialized) */
+export declare const myko: VueMykoClient;
+/** Get the global MykoClient instance */
+export declare function getMykoClient(): VueMykoClient;
+/** Create a new VueMykoClient instance (non-singleton, for advanced use) */
+export declare function createMykoClient(): VueMykoClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@myko/core": "^4.4.2"
+    "@myko/core": "^4.4.6"
   },
   "devDependencies": {
     "@types/luxon": "^3.4.2",
@@ -16,9 +16,13 @@
   },
   "exports": {
     ".": {
-      "default": "./src/lib/index.ts"
+      "default": "./src/lib/index.ts",
+      "types": "./src/lib/index.ts"
     }
   },
+  "files": [
+    "dist"
+  ],
   "flux": {
     "tasks": [
       "build",
@@ -31,13 +35,24 @@
   "peerDependencies": {
     "vue": "^3.4.0"
   },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.mjs",
+        "require": "./dist/index.cjs",
+        "types": "./dist/index.d.ts"
+      }
+    },
+    "main": "./dist/index.cjs",
+    "types": "./dist/index.d.ts"
+  },
   "repository": {
     "directory": "libs/myko/ui-vue",
     "type": "git",
     "url": "https://github.com/ignition-is-go/myko"
   },
   "scripts": {
-    "build": "vue-tsc --noEmit",
+    "build": "vue-tsc --noEmit && vite build",
     "check": "vue-tsc --noEmit",
     "dev": "vite build --watch",
     "format": "prettier --write .",
@@ -45,5 +60,5 @@
   },
   "type": "module",
   "types": "./src/lib/index.ts",
-  "version": "4.4.2"
+  "version": "4.4.6"
 }

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100
-}

package/src/lib/composables/useConnection.ts

@@ -1,57 +0,0 @@
-import { computed, type ComputedRef, type Ref } from 'vue';
-import { ConnectionStatus } from '@myko/core';
-import { getMykoClient } from '../services/vue-client';
-
-export interface UseConnectionReturn {
-	/** Current connection status (reactive) */
-	status: Ref<ConnectionStatus>;
-	/** Whether currently connected (computed) */
-	isConnected: ComputedRef<boolean>;
-	/** Whether currently connecting (computed) */
-	isConnecting: ComputedRef<boolean>;
-	/** Whether currently disconnected (computed) */
-	isDisconnected: ComputedRef<boolean>;
-	/** Connect to a server address */
-	connect: (address: string) => void;
-	/** Disconnect from the server */
-	disconnect: () => void;
-}
-
-/**
- * Vue composable for managing Myko connection status.
- *
- * @example
- * ```vue
- * <script setup>
- *   import { useConnection } from '@myko/ui-vue'
- *
- *   const { status, isConnected, connect, disconnect } = useConnection()
- *
- *   function handleConnect() {
- *     connect('ws://localhost:5155')
- *   }
- * </script>
- *
- * <template>
- *   <div>Status: {{ status }}</div>
- *   <button v-if="!isConnected" @click="handleConnect">Connect</button>
- *   <button v-else @click="disconnect">Disconnect</button>
- * </template>
- * ```
- */
-export function useConnection(): UseConnectionReturn {
-	const client = getMykoClient();
-
-	const isConnected = computed(() => client.connectionStatus.value === ConnectionStatus.Connected);
-	const isConnecting = computed(() => client.connectionStatus.value === ConnectionStatus.Connecting);
-	const isDisconnected = computed(() => client.connectionStatus.value === ConnectionStatus.Disconnected);
-
-	return {
-		status: client.connectionStatus,
-		isConnected,
-		isConnecting,
-		isDisconnected,
-		connect: (address: string) => client.connect(address),
-		disconnect: () => client.disconnect()
-	};
-}

package/src/lib/composables/useQuery.ts

@@ -1,58 +0,0 @@
-import { onUnmounted, computed, type ComputedRef, type Ref } from 'vue';
-import type { Query, QueryItem } from '@myko/core';
-import { getMykoClient, type ReactiveQuery } from '../services/vue-client';
-
-export interface UseQueryReturn<Q extends Query<unknown>> {
-	/** Reactive map of items by ID */
-	items: Map<string, QueryItem<Q> & { id: string }>;
-	/** Array of all items (computed for convenience) */
-	itemsArray: ComputedRef<(QueryItem<Q> & { id: string })[]>;
-	/** Whether the query has received its first response */
-	resolved: Ref<boolean>;
-	/** Manually release the subscription (also called on unmount) */
-	release: () => void;
-}
-
-/**
- * Vue composable for watching a Myko query.
- *
- * Automatically releases the subscription when the component is unmounted.
- *
- * @example
- * ```vue
- * <script setup>
- *   import { useQuery } from '@myko/ui-vue'
- *   import { queries } from '@rship/entities'
- *
- *   const { items, itemsArray, resolved } = useQuery(queries.GetAllTargets({}))
- * </script>
- *
- * <template>
- *   <div v-if="!resolved">Loading...</div>
- *   <div v-for="target in itemsArray" :key="target.id">
- *     {{ target.name }}
- *   </div>
- * </template>
- * ```
- */
-export function useQuery<Q extends Query<unknown>>(
-	queryFactory: Q
-): UseQueryReturn<Q> {
-	const client = getMykoClient();
-	const result = client.query(queryFactory);
-
-	// Auto-release on unmount
-	onUnmounted(() => {
-		result.release();
-	});
-
-	// Convenience computed for array iteration
-	const itemsArray = computed(() => Array.from(result.items.values()));
-
-	return {
-		items: result.items,
-		itemsArray,
-		resolved: result.resolved,
-		release: result.release
-	};
-}

package/src/lib/composables/useReport.ts

@@ -1,46 +0,0 @@
-import { onUnmounted, type ShallowRef } from 'vue';
-import type { Report, ReportResult } from '@myko/core';
-import { getMykoClient, type ReactiveReport } from '../services/vue-client';
-
-export interface UseReportReturn<R extends Report<unknown>> {
-	/** Current value (reactive via ref) */
-	value: ShallowRef<ReportResult<R> | undefined>;
-	/** Manually release the subscription (also called on unmount) */
-	release: () => void;
-}
-
-/**
- * Vue composable for watching a Myko report.
- *
- * Automatically releases the subscription when the component is unmounted.
- *
- * @example
- * ```vue
- * <script setup>
- *   import { useReport } from '@myko/ui-vue'
- *   import { reports } from '@rship/entities'
- *
- *   const { value } = useReport(reports.CountAllTargets({}))
- * </script>
- *
- * <template>
- *   <div>Count: {{ value?.count ?? 'loading...' }}</div>
- * </template>
- * ```
- */
-export function useReport<R extends Report<unknown>>(
-	reportFactory: R
-): UseReportReturn<R> {
-	const client = getMykoClient();
-	const result = client.report(reportFactory);
-
-	// Auto-release on unmount
-	onUnmounted(() => {
-		result.release();
-	});
-
-	return {
-		value: result.value,
-		release: result.release
-	};
-}

package/src/lib/index.ts

@@ -1,24 +0,0 @@
-// Vue-friendly Myko client exports
-export {
-	createMykoClient,
-	getMykoClient,
-	myko,
-	VueMykoClient,
-	type CommandError,
-	type CommandSuccess,
-	type ReactiveQuery,
-	type ReactiveReport
-} from './services/vue-client';
-
-// Vue composables
-export {
-	useQuery,
-	useReport,
-	useConnection,
-	type UseQueryReturn,
-	type UseReportReturn,
-	type UseConnectionReturn
-} from './composables';
-
-// Re-export useful types from @myko/ts
-export { ConnectionStatus } from '@myko/core';

package/src/lib/services/vue-client.ts

@@ -1,345 +0,0 @@
-/**
- * Vue-friendly Myko client wrapper
- *
- * Provides reactive state using Vue 3 reactivity and reactive Map for efficient updates.
- * Queries and reports are deduplicated - multiple calls with the same args share
- * the same subscription and are only cancelled when all consumers unsubscribe.
- */
-
-import {
-	ConnectionStatus,
-	MykoClient,
-	type Command,
-	type CommandResult,
-	type QueryDiff,
-	type QueryItem,
-	type Query,
-	type ReportResult,
-	type Report
-} from '@myko/core';
-import { ref, shallowRef, shallowReactive, type Ref, type ShallowRef } from 'vue';
-import { Subject, type Observable, type Subscription } from 'rxjs';
-
-/** Command success event */
-export type CommandSuccess = {
-	commandId: string;
-	response: unknown;
-};
-
-/** Command error event */
-export type CommandError = {
-	commandId: string;
-	error: Error;
-};
-
-/** Reactive query result using reactive Map - generic over the Query factory type */
-export type ReactiveQuery<Q extends Query<unknown>> = {
-	/** Reactive map of items by ID */
-	readonly items: Map<string, QueryItem<Q> & { id: string }>;
-	/** Whether the query has received its first response */
-	readonly resolved: Ref<boolean>;
-	/** Release this consumer's reference (unsubscribes when last consumer releases) */
-	release: () => void;
-};
-
-/** Reactive report result - generic over the Report factory type */
-export type ReactiveReport<R extends Report<unknown>> = {
-	/** Current value (reactive via ref) */
-	readonly value: ShallowRef<ReportResult<R> | undefined>;
-	/** Release this consumer's reference (unsubscribes when last consumer releases) */
-	release: () => void;
-};
-
-/** Internal state for a shared query */
-type SharedQuery<T extends { id: string }> = {
-	items: Map<string, T>;
-	resolved: Ref<boolean>;
-	subscription: Subscription;
-	refCount: number;
-};
-
-/** Internal state for a shared report */
-type SharedReport<T> = {
-	value: ShallowRef<T | undefined>;
-	subscription: Subscription;
-	refCount: number;
-};
-
-/**
- * Vue-friendly Myko client
- *
- * Wraps MykoClient to provide reactive Vue state with automatic deduplication.
- */
-export class VueMykoClient {
-	private client: MykoClient;
-
-	// Shared queries by cache key
-	private sharedQueries = new Map<string, SharedQuery<{ id: string }>>();
-
-	// Shared reports by cache key
-	private sharedReports = new Map<string, SharedReport<unknown>>();
-
-	// Command outcome subjects
-	private commandSuccessSubject = new Subject<CommandSuccess>();
-	private commandErrorSubject = new Subject<CommandError>();
-
-	/** Observable of all command successes */
-	readonly commandSuccess$: Observable<CommandSuccess> = this.commandSuccessSubject.asObservable();
-
-	/** Observable of all command errors */
-	readonly commandError$: Observable<CommandError> = this.commandErrorSubject.asObservable();
-
-	// Reactive connection status
-	private _connectionStatus = ref<ConnectionStatus>(ConnectionStatus.Disconnected);
-
-	constructor() {
-		this.client = new MykoClient();
-
-		// Sync connection status to reactive state
-		this.client.connectionStatus$.subscribe((status: ConnectionStatus) => {
-			this._connectionStatus.value = status;
-		});
-	}
-
-	/** Create a stable cache key from a query/report factory */
-	private getCacheKey(
-		type: 'query' | 'report',
-		factory: {
-			query?: Record<string, unknown>;
-			report?: Record<string, unknown>;
-			queryId?: string;
-			reportId?: string;
-		}
-	): string {
-		const id = type === 'query' ? factory.queryId : factory.reportId;
-		const args = type === 'query' ? factory.query : factory.report;
-		return `${type}:${id}:${JSON.stringify(args)}`;
-	}
-
-	/** Current connection status (reactive) */
-	get connectionStatus(): Ref<ConnectionStatus> {
-		return this._connectionStatus;
-	}
-
-	/** Whether currently connected (reactive) - use .value to access */
-	get isConnected(): boolean {
-		return this._connectionStatus.value === ConnectionStatus.Connected;
-	}
-
-	/** Set the server address and connect */
-	connect(address: string): void {
-		this.client.setAddress(address);
-	}
-
-	/** Disconnect from the server */
-	disconnect(): void {
-		// Unsubscribe all shared queries
-		for (const shared of this.sharedQueries.values()) {
-			shared.subscription.unsubscribe();
-		}
-		this.sharedQueries.clear();
-
-		// Unsubscribe all shared reports
-		for (const shared of this.sharedReports.values()) {
-			shared.subscription.unsubscribe();
-		}
-		this.sharedReports.clear();
-
-		this.client.disconnect();
-	}
-
-	/**
-	 * Watch a query with reactive Map updates.
-	 *
-	 * Multiple calls with the same query args share the same Map,
-	 * and the subscription is only cancelled when all consumers release.
-	 *
-	 * @example
-	 * ```vue
-	 * <script setup>
-	 *   import { onUnmounted } from 'vue'
-	 *   const { items, resolved, release } = client.query(queries.GetAllTargets({}))
-	 *   onUnmounted(release)
-	 * </script>
-	 *
-	 * <template>
-	 *   <div v-for="[id, target] in items" :key="id">{{ target.name }}</div>
-	 * </template>
-	 * ```
-	 */
-	query<Q extends Query<unknown>>(queryFactory: Q): ReactiveQuery<Q> {
-		type Item = QueryItem<Q> & { id: string };
-		const cacheKey = this.getCacheKey('query', queryFactory);
-
-		// Return existing shared query if available
-		let shared = this.sharedQueries.get(cacheKey) as SharedQuery<Item> | undefined;
-
-		if (!shared) {
-			// Create new shared query with reactive Map
-			const items = shallowReactive(new Map<string, Item>());
-			const resolved = ref(false);
-
-			const subscription = this.client.watchQueryDiff(queryFactory).subscribe({
-				next: (diff) => {
-					if (diff.sequence === 0n) {
-						items.clear();
-					}
-					for (const id of diff.deletes) {
-						items.delete(id);
-					}
-					for (const item of diff.upserts as Item[]) {
-						items.set(item.id, item);
-					}
-					resolved.value = true;
-				}
-			});
-
-			shared = { items, resolved, subscription, refCount: 0 };
-			this.sharedQueries.set(cacheKey, shared as SharedQuery<{ id: string }>);
-		}
-
-		// Increment reference count
-		shared.refCount++;
-
-		let released = false;
-
-		return {
-			items: shared.items,
-			resolved: shared.resolved,
-			release: () => {
-				if (released) return;
-				released = true;
-
-				const s = this.sharedQueries.get(cacheKey);
-				if (s) {
-					s.refCount--;
-					if (s.refCount <= 0) {
-						s.subscription.unsubscribe();
-						this.sharedQueries.delete(cacheKey);
-					}
-				}
-			}
-		};
-	}
-
-	/**
-	 * Watch a report with reactive value updates.
-	 *
-	 * Multiple calls with the same report args share the same subscription,
-	 * and the subscription is only cancelled when all consumers release.
-	 *
-	 * @example
-	 * ```vue
-	 * <script setup>
-	 *   import { onUnmounted } from 'vue'
-	 *   const { value, release } = client.report(reports.CountAllTargets({}))
-	 *   onUnmounted(release)
-	 * </script>
-	 *
-	 * <template>
-	 *   <div>Count: {{ value?.count ?? 'loading...' }}</div>
-	 * </template>
-	 * ```
-	 */
-	report<R extends Report<unknown>>(reportFactory: R): ReactiveReport<R> {
-		type Result = ReportResult<R>;
-		const cacheKey = this.getCacheKey('report', reportFactory);
-
-		// Return existing shared report if available
-		let shared = this.sharedReports.get(cacheKey) as SharedReport<Result> | undefined;
-
-		if (!shared) {
-			// Create new shared report with reactive state
-			const value = shallowRef<Result | undefined>(undefined);
-			const subscription = this.client.watchReport(reportFactory).subscribe({
-				next: (result) => {
-					value.value = result;
-				}
-			});
-
-			shared = {
-				value: value as ShallowRef<Result | undefined>,
-				subscription,
-				refCount: 0
-			};
-			this.sharedReports.set(cacheKey, shared as SharedReport<unknown>);
-		}
-
-		// Increment reference count (shared is guaranteed to be defined here)
-		shared!.refCount++;
-
-		let released = false;
-
-		return {
-			value: shared!.value as ShallowRef<Result | undefined>,
-			release: () => {
-				if (released) return;
-				released = true;
-
-				const s = this.sharedReports.get(cacheKey);
-				if (s) {
-					s.refCount--;
-					if (s.refCount <= 0) {
-						s.subscription.unsubscribe();
-						this.sharedReports.delete(cacheKey);
-					}
-				}
-			}
-		};
-	}
-
-	/**
-	 * Send a command and wait for the response.
-	 *
-	 * Emits to commandSuccess$ or commandError$ observables for generic handling.
-	 *
-	 * @example
-	 * ```vue
-	 * <script setup>
-	 *   async function deleteMachine(id: string) {
-	 *     const result = await myko.sendCommand(commands.DeleteMachine({ machineId: id }))
-	 *     console.log('Deleted:', result)
-	 *   }
-	 * </script>
-	 * ```
-	 */
-	async sendCommand<C extends Command<unknown>>(
-		commandFactory: C
-	): Promise<CommandResult<C>> {
-		const commandId = commandFactory.commandId;
-		try {
-			const response = await this.client.sendCommand(commandFactory);
-			this.commandSuccessSubject.next({ commandId, response });
-			return response;
-		} catch (e) {
-			const error = e instanceof Error ? e : new Error(String(e));
-			this.commandErrorSubject.next({ commandId, error });
-			throw e;
-		}
-	}
-
-	/** Access the underlying MykoClient for advanced use cases */
-	get raw(): MykoClient {
-		return this.client;
-	}
-}
-
-/** Global singleton client instance (auto-initialized) */
-export const myko = new VueMykoClient();
-
-// HMR cleanup - disconnect old client when module is hot-reloaded
-if (import.meta.hot) {
-	import.meta.hot.dispose(() => {
-		myko.disconnect();
-	});
-}
-
-/** Get the global MykoClient instance */
-export function getMykoClient(): VueMykoClient {
-	return myko;
-}
-
-/** Create a new VueMykoClient instance (non-singleton, for advanced use) */
-export function createMykoClient(): VueMykoClient {
-	return new VueMykoClient();
-}

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ESNext",
-		"module": "ESNext",
-		"moduleResolution": "bundler",
-		"strict": true,
-		"jsx": "preserve",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"esModuleInterop": true,
-		"lib": ["ESNext", "DOM"],
-		"skipLibCheck": true,
-		"noEmit": true,
-		"types": ["vite/client"]
-	},
-	"include": ["src/**/*.ts", "src/**/*.vue"],
-	"exclude": ["node_modules", "dist"]
-}

package/vite.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-
-export default defineConfig({
-	plugins: [vue()]
-});