@korajs/svelte 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,7 +1,23 @@
-// src/index.ts
+// src/context.ts
 import { KoraError } from "@korajs/core";
+import { QueryStoreCache } from "@korajs/store";
 import { getContext, setContext } from "svelte";
+var koraContextKey = /* @__PURE__ */ Symbol("korajs-context");
 var koraAppContextKey = /* @__PURE__ */ Symbol("korajs-app");
+function setKoraContext(value) {
+  setContext(koraContextKey, value);
+}
+function getKoraContext() {
+  const context = getContext(koraContextKey);
+  if (!context) {
+    throw new KoraError(
+      "Kora context missing. Wrap your app with <KoraProvider app={kora}> or <KoraStoreProvider store={store}>.",
+      "KORA_NOT_PROVIDED",
+      { fix: "Wrap your app with <KoraProvider app={kora}> or <KoraStoreProvider store={store}>." }
+    );
+  }
+  return context;
+}
 function setKoraAppContext(koraApp) {
   setContext(koraAppContextKey, koraApp);
 }
@@ -9,17 +25,277 @@ function getKoraApp() {
   const app = getContext(koraAppContextKey);
   if (!app) {
     throw new KoraError(
-      "getKoraApp() requires setKoraAppContext(koraApp) on an ancestor component.",
-      "KORA_NOT_PROVIDED",
-      {
-        fix: "In +layout.svelte: setKoraAppContext(kora); await kora.ready before queries."
-      }
+      "getKoraApp() requires setKoraAppContext(koraApp) on an ancestor.",
+      "KORA_NOT_PROVIDED"
+    );
+  }
+  return app;
+}
+async function initKoraProvider(app) {
+  await app.ready;
+  const queryStoreCache = typeof app.getQueryStoreCache === "function" ? app.getQueryStoreCache() : new QueryStoreCache();
+  const value = {
+    store: app.getStore(),
+    syncEngine: app.getSyncEngine(),
+    app,
+    events: app.events ?? null,
+    subscribeSyncStatus: app.sync?.subscribeStatus ?? null,
+    queryStoreCache
+  };
+  setKoraContext(value);
+  setKoraAppContext(app);
+  return value;
+}
+
+// src/stores/query-store.ts
+import { assertQueryReady } from "@korajs/store";
+import { readable } from "svelte/store";
+var EMPTY_ARRAY = Object.freeze([]);
+function createQueryStore(query, options) {
+  const { queryStoreCache } = getKoraContext();
+  const enabled = options?.enabled !== false;
+  return readable(EMPTY_ARRAY, (set) => {
+    if (!enabled) {
+      set(EMPTY_ARRAY);
+      return () => {
+      };
+    }
+    assertQueryReady(query);
+    const queryStore = queryStoreCache.getOrCreate(query);
+    const unsubscribe = queryStore.subscribe(() => {
+      set(queryStore.getSnapshot());
+    });
+    set(queryStore.getSnapshot());
+    return () => {
+      unsubscribe();
+      queryStoreCache.release(query);
+    };
+  });
+}
+var useQuery = createQueryStore;
+
+// src/composables/use-mutation.ts
+import { createMutationController } from "@korajs/core/bindings";
+function createMutation(mutationFn, options) {
+  const optionsRef = { current: options };
+  optionsRef.current = options;
+  const fnRef = { current: mutationFn };
+  fnRef.current = mutationFn;
+  const controller = createMutationController({
+    mutationFn: (...args) => fnRef.current(...args),
+    resolveOptions: () => optionsRef.current
+  });
+  const loadingListeners = /* @__PURE__ */ new Set();
+  const errorListeners = /* @__PURE__ */ new Set();
+  controller.subscribe(() => {
+    const snapshot = controller.getSnapshot();
+    for (const listener of loadingListeners) {
+      listener(snapshot.isLoading);
+    }
+    for (const listener of errorListeners) {
+      listener(snapshot.error);
+    }
+  });
+  return {
+    mutate: (...args) => controller.mutate(...args),
+    mutateAsync: (...args) => controller.mutateAsync(...args),
+    subscribeLoading: (fn) => {
+      loadingListeners.add(fn);
+      fn(controller.getSnapshot().isLoading);
+      return () => loadingListeners.delete(fn);
+    },
+    subscribeError: (fn) => {
+      errorListeners.add(fn);
+      fn(controller.getSnapshot().error);
+      return () => errorListeners.delete(fn);
+    },
+    get loading() {
+      return controller.getSnapshot().isLoading;
+    },
+    get isLoading() {
+      return controller.getSnapshot().isLoading;
+    },
+    get error() {
+      return controller.getSnapshot().error;
+    },
+    reset: () => controller.reset()
+  };
+}
+var useMutation = createMutation;
+
+// src/composables/use-sync-status.ts
+import { OFFLINE_SYNC_STATUS, createSyncStatusController } from "@korajs/sync";
+import { readable as readable2 } from "svelte/store";
+function createSyncStatusStore() {
+  const { syncEngine, subscribeSyncStatus, events } = getKoraContext();
+  return readable2(OFFLINE_SYNC_STATUS, (set) => {
+    const controller = createSyncStatusController({
+      syncEngine,
+      subscribeSyncStatus,
+      events: subscribeSyncStatus ? null : events
+    });
+    set(controller.getSnapshot());
+    const unsubscribe = controller.subscribe(() => {
+      set(controller.getSnapshot());
+    });
+    return () => {
+      unsubscribe();
+      controller.destroy();
+    };
+  });
+}
+var useSyncStatus = createSyncStatusStore;
+
+// src/composables/use-app.ts
+function getApp() {
+  const { app } = getKoraContext();
+  if (!app) {
+    throw new Error(
+      "getApp() requires <KoraProvider app={kora}> or <KoraStoreProvider store={store}> with a createApp() instance."
     );
   }
   return app;
 }
+var useApp = getApp;
+
+// src/composables/use-collection.ts
+function getCollection(name) {
+  const { store } = getKoraContext();
+  return store.collection(name);
+}
+var useCollection = getCollection;
+
+// src/composables/use-rich-text.ts
+import { asRichTextSyncEngine, createRichTextController } from "@korajs/store";
+import { onDestroy } from "svelte";
+import { get, readable as readable3 } from "svelte/store";
+function createRichTextBinding(collectionName, recordId, fieldName, options) {
+  const { store, syncEngine } = getKoraContext();
+  const controller = createRichTextController({
+    collection: store.collection(collectionName),
+    collectionName,
+    recordId,
+    fieldName,
+    store,
+    syncEngine: asRichTextSyncEngine(syncEngine),
+    useDocChannel: options?.useDocChannel,
+    user: options?.user
+  });
+  onDestroy(() => {
+    controller.destroy();
+  });
+  const resultStore = readable3(buildResult(controller), (set) => {
+    const sync = () => {
+      set(buildResult(controller));
+    };
+    sync();
+    return controller.subscribe(sync);
+  });
+  return {
+    get doc() {
+      return controller.doc;
+    },
+    get text() {
+      return controller.text;
+    },
+    undo: () => controller.undo(),
+    redo: () => controller.redo(),
+    get ready() {
+      return get(resultStore).ready;
+    },
+    get error() {
+      return get(resultStore).error;
+    },
+    get canUndo() {
+      return get(resultStore).canUndo;
+    },
+    get canRedo() {
+      return get(resultStore).canRedo;
+    },
+    get cursors() {
+      return get(resultStore).cursors;
+    },
+    setCursor: (anchor, head) => controller.setCursor(anchor, head),
+    clearCursor: () => controller.clearCursor(),
+    subscribe: resultStore.subscribe
+  };
+}
+var useRichText = createRichTextBinding;
+function buildResult(controller) {
+  const snapshot = controller.getSnapshot();
+  return {
+    doc: controller.doc,
+    text: controller.text,
+    undo: () => controller.undo(),
+    redo: () => controller.redo(),
+    ready: snapshot.ready,
+    error: snapshot.error,
+    canUndo: snapshot.canUndo,
+    canRedo: snapshot.canRedo,
+    cursors: [...snapshot.cursors],
+    setCursor: (anchor, head) => controller.setCursor(anchor, head),
+    clearCursor: () => controller.clearCursor()
+  };
+}
+
+// src/composables/use-presence.ts
+function applyPresence(user) {
+  const { syncEngine } = getKoraContext();
+  if (!syncEngine || !user?.name || !user?.color) {
+    return () => {
+    };
+  }
+  const awareness = syncEngine.getAwarenessManager();
+  awareness.setLocalState({
+    user: {
+      name: user.name,
+      color: user.color,
+      avatar: user.avatar
+    }
+  });
+  return () => {
+    awareness.setLocalState(null);
+  };
+}
+var usePresence = applyPresence;
+
+// src/composables/use-collaborators.ts
+import { subscribeRemoteAwarenessStates } from "@korajs/sync";
+import { readable as readable4 } from "svelte/store";
+function createCollaboratorsStore() {
+  const { syncEngine } = getKoraContext();
+  return readable4([], (set) => {
+    if (!syncEngine) {
+      set([]);
+      return () => {
+      };
+    }
+    const awareness = syncEngine.getAwarenessManager();
+    return subscribeRemoteAwarenessStates(awareness, set);
+  });
+}
+var useCollaborators = createCollaboratorsStore;
 export {
+  applyPresence,
+  createCollaboratorsStore,
+  createMutation,
+  createQueryStore,
+  createRichTextBinding,
+  createSyncStatusStore,
+  getApp,
+  getCollection,
   getKoraApp,
-  setKoraAppContext
+  getKoraContext,
+  initKoraProvider,
+  setKoraAppContext,
+  setKoraContext,
+  useApp,
+  useCollaborators,
+  useCollection,
+  useMutation,
+  usePresence,
+  useQuery,
+  useRichText,
+  useSyncStatus
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { KoraError } from '@korajs/core'\nimport { getContext, setContext } from 'svelte'\nimport type { KoraAppHandle } from './types'\n\nexport type { KoraAppHandle } from './types'\n\nconst koraAppContextKey = Symbol('korajs-app')\n\n/**\n * Set the Kora app in Svelte context (call from a root layout or `+layout.svelte`).\n */\nexport function setKoraAppContext(koraApp: KoraAppHandle): void {\n\tsetContext(koraAppContextKey, koraApp)\n}\n\n/**\n * Read the Kora app from Svelte context in child components.\n */\nexport function getKoraApp(): KoraAppHandle {\n\tconst app = getContext<KoraAppHandle | undefined>(koraAppContextKey)\n\tif (!app) {\n\t\tthrow new KoraError(\n\t\t\t'getKoraApp() requires setKoraAppContext(koraApp) on an ancestor component.',\n\t\t\t'KORA_NOT_PROVIDED',\n\t\t\t{\n\t\t\t\tfix: 'In +layout.svelte: setKoraAppContext(kora); await kora.ready before queries.',\n\t\t\t},\n\t\t)\n\t}\n\treturn app\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,YAAY,kBAAkB;AAKvC,IAAM,oBAAoB,uBAAO,YAAY;AAKtC,SAAS,kBAAkB,SAA8B;AAC/D,aAAW,mBAAmB,OAAO;AACtC;AAKO,SAAS,aAA4B;AAC3C,QAAM,MAAM,WAAsC,iBAAiB;AACnE,MAAI,CAAC,KAAK;AACT,UAAM,IAAI;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,QACC,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;","names":[]}
+{"version":3,"sources":["../src/context.ts","../src/stores/query-store.ts","../src/composables/use-mutation.ts","../src/composables/use-sync-status.ts","../src/composables/use-app.ts","../src/composables/use-collection.ts","../src/composables/use-rich-text.ts","../src/composables/use-presence.ts","../src/composables/use-collaborators.ts"],"sourcesContent":["import { KoraError } from '@korajs/core'\nimport { QueryStoreCache } from '@korajs/store'\nimport { getContext, setContext } from 'svelte'\nimport type { KoraAppLike, KoraContextValue } from './types'\n\nconst koraContextKey = Symbol('korajs-context')\nconst koraAppContextKey = Symbol('korajs-app')\n\nexport function setKoraContext(value: KoraContextValue): void {\n\tsetContext(koraContextKey, value)\n}\n\nexport function getKoraContext(): KoraContextValue {\n\tconst context = getContext<KoraContextValue | undefined>(koraContextKey)\n\tif (!context) {\n\t\tthrow new KoraError(\n\t\t\t'Kora context missing. Wrap your app with <KoraProvider app={kora}> or <KoraStoreProvider store={store}>.',\n\t\t\t'KORA_NOT_PROVIDED',\n\t\t\t{ fix: 'Wrap your app with <KoraProvider app={kora}> or <KoraStoreProvider store={store}>.' },\n\t\t)\n\t}\n\treturn context\n}\n\n/** @deprecated Use {@link setKoraContext} via {@link KoraProvider} or {@link KoraStoreProvider}. */\nexport function setKoraAppContext(koraApp: KoraAppLike): void {\n\tsetContext(koraAppContextKey, koraApp)\n}\n\n/** @deprecated Use {@link getKoraContext} and {@link getApp}. */\nexport function getKoraApp(): KoraAppLike {\n\tconst app = getContext<KoraAppLike | undefined>(koraAppContextKey)\n\tif (!app) {\n\t\tthrow new KoraError(\n\t\t\t'getKoraApp() requires setKoraAppContext(koraApp) on an ancestor.',\n\t\t\t'KORA_NOT_PROVIDED',\n\t\t)\n\t}\n\treturn app\n}\n\n/**\n * Initialize Kora provider context after `app.ready`.\n *\n * @deprecated Prefer {@link KoraProvider} or {@link KoraStoreProvider} in root layout.\n */\nexport async function initKoraProvider(app: KoraAppLike): Promise<KoraContextValue> {\n\tawait app.ready\n\tconst queryStoreCache =\n\t\ttypeof app.getQueryStoreCache === 'function'\n\t\t\t? app.getQueryStoreCache()\n\t\t\t: new QueryStoreCache()\n\tconst value: KoraContextValue = {\n\t\tstore: app.getStore(),\n\t\tsyncEngine: app.getSyncEngine(),\n\t\tapp,\n\t\tevents: app.events ?? null,\n\t\tsubscribeSyncStatus: app.sync?.subscribeStatus ?? null,\n\t\tqueryStoreCache,\n\t}\n\tsetKoraContext(value)\n\tsetKoraAppContext(app)\n\treturn value\n}\n","import type { CollectionRecord, QueryBuilder } from '@korajs/store'\nimport { assertQueryReady } from '@korajs/store'\nimport { readable, type Readable } from 'svelte/store'\nimport { getKoraContext } from '../context'\nimport type { UseQueryOptions } from '../types'\n\nconst EMPTY_ARRAY: readonly unknown[] = Object.freeze([])\n\n/**\n * Create a Svelte readable store for a static Kora query.\n *\n * For reactive filter changes, use {@link KoraQuery} which re-subscribes when the\n * query descriptor changes.\n */\nexport function createQueryStore<T = CollectionRecord>(\n\tquery: QueryBuilder<T>,\n\toptions?: UseQueryOptions,\n): Readable<readonly T[]> {\n\tconst { queryStoreCache } = getKoraContext()\n\tconst enabled = options?.enabled !== false\n\n\treturn readable<readonly T[]>(EMPTY_ARRAY as readonly T[], (set) => {\n\t\tif (!enabled) {\n\t\t\tset(EMPTY_ARRAY as readonly T[])\n\t\t\treturn () => {}\n\t\t}\n\n\t\tassertQueryReady(query as QueryBuilder<unknown>)\n\t\tconst queryStore = queryStoreCache.getOrCreate(query)\n\t\tconst unsubscribe = queryStore.subscribe(() => {\n\t\t\tset(queryStore.getSnapshot())\n\t\t})\n\t\tset(queryStore.getSnapshot())\n\n\t\treturn () => {\n\t\t\tunsubscribe()\n\t\t\tqueryStoreCache.release(query as QueryBuilder<unknown>)\n\t\t}\n\t})\n}\n\n/** Alias for {@link createQueryStore}. */\nexport const useQuery = createQueryStore\n","import { createMutationController } from '@korajs/core/bindings'\nimport type { UseMutationOptions, UseMutationResult } from '../types'\n\n/**\n * Create a mutation controller with optimistic update hooks.\n */\nexport function createMutation<TData, TArgs extends unknown[], TContext = void>(\n\tmutationFn: (...args: TArgs) => Promise<TData>,\n\toptions?: UseMutationOptions<TData, TArgs, TContext>,\n): UseMutationResult<TData, TArgs> {\n\tconst optionsRef = { current: options }\n\toptionsRef.current = options\n\n\tconst fnRef = { current: mutationFn }\n\tfnRef.current = mutationFn\n\n\tconst controller = createMutationController<TData, TArgs, TContext>({\n\t\tmutationFn: (...args) => fnRef.current(...args),\n\t\tresolveOptions: () => optionsRef.current,\n\t})\n\n\tconst loadingListeners = new Set<(value: boolean) => void>()\n\tconst errorListeners = new Set<(value: Error | null) => void>()\n\n\tcontroller.subscribe(() => {\n\t\tconst snapshot = controller.getSnapshot()\n\t\tfor (const listener of loadingListeners) {\n\t\t\tlistener(snapshot.isLoading)\n\t\t}\n\t\tfor (const listener of errorListeners) {\n\t\t\tlistener(snapshot.error)\n\t\t}\n\t})\n\n\treturn {\n\t\tmutate: (...args: TArgs) => controller.mutate(...args),\n\t\tmutateAsync: (...args: TArgs) => controller.mutateAsync(...args),\n\t\tsubscribeLoading: (fn) => {\n\t\t\tloadingListeners.add(fn)\n\t\t\tfn(controller.getSnapshot().isLoading)\n\t\t\treturn () => loadingListeners.delete(fn)\n\t\t},\n\t\tsubscribeError: (fn) => {\n\t\t\terrorListeners.add(fn)\n\t\t\tfn(controller.getSnapshot().error)\n\t\t\treturn () => errorListeners.delete(fn)\n\t\t},\n\t\tget loading() {\n\t\t\treturn controller.getSnapshot().isLoading\n\t\t},\n\t\tget isLoading() {\n\t\t\treturn controller.getSnapshot().isLoading\n\t\t},\n\t\tget error() {\n\t\t\treturn controller.getSnapshot().error\n\t\t},\n\t\treset: () => controller.reset(),\n\t}\n}\n\n/** Alias for {@link createMutation}. */\nexport const useMutation = createMutation\n","import { OFFLINE_SYNC_STATUS, createSyncStatusController } from '@korajs/sync'\nimport type { SyncStatusInfo } from '@korajs/sync'\nimport { readable, type Readable } from 'svelte/store'\nimport { getKoraContext } from '../context'\n\n/**\n * Readable store of sync engine status.\n */\nexport function createSyncStatusStore(): Readable<SyncStatusInfo> {\n\tconst { syncEngine, subscribeSyncStatus, events } = getKoraContext()\n\n\treturn readable<SyncStatusInfo>(OFFLINE_SYNC_STATUS, (set) => {\n\t\tconst controller = createSyncStatusController({\n\t\t\tsyncEngine,\n\t\t\tsubscribeSyncStatus,\n\t\t\tevents: subscribeSyncStatus ? null : events,\n\t\t})\n\t\tset(controller.getSnapshot())\n\t\tconst unsubscribe = controller.subscribe(() => {\n\t\t\tset(controller.getSnapshot())\n\t\t})\n\t\treturn () => {\n\t\t\tunsubscribe()\n\t\t\tcontroller.destroy()\n\t\t}\n\t})\n}\n\n/** Alias for {@link createSyncStatusStore}. */\nexport const useSyncStatus = createSyncStatusStore\n","import { getKoraContext } from '../context'\nimport type { KoraAppLike } from '../types'\n\nexport function getApp<T extends KoraAppLike = KoraAppLike>(): T {\n\tconst { app } = getKoraContext()\n\tif (!app) {\n\t\tthrow new Error(\n\t\t\t'getApp() requires <KoraProvider app={kora}> or <KoraStoreProvider store={store}> with a createApp() instance.',\n\t\t)\n\t}\n\treturn app as T\n}\n\n/** Alias for {@link getApp}. */\nexport const useApp = getApp\n","import type { CollectionAccessor } from '@korajs/store'\nimport { getKoraContext } from '../context'\n\nexport function getCollection(name: string): CollectionAccessor {\n\tconst { store } = getKoraContext()\n\treturn store.collection(name)\n}\n\n/** Alias for {@link getCollection}. */\nexport const useCollection = getCollection\n","import { asRichTextSyncEngine, createRichTextController } from '@korajs/store'\nimport type { AwarenessUser } from '@korajs/sync'\nimport { onDestroy } from 'svelte'\nimport { get, readable, type Readable } from 'svelte/store'\nimport { getKoraContext } from '../context'\nimport type { UseRichTextResult } from '../types'\n\nexport interface UseRichTextOptions {\n\tuser?: AwarenessUser\n\tuseDocChannel?: boolean\n}\n\n/**\n * Binds a richtext field to a shared Yjs document for editor integration.\n *\n * Must be called during component initialization. For reactive target changes,\n * use {@link KoraRichText} instead.\n */\nexport function createRichTextBinding(\n\tcollectionName: string,\n\trecordId: string,\n\tfieldName: string,\n\toptions?: UseRichTextOptions,\n): UseRichTextResult & { subscribe: Readable<UseRichTextResult>['subscribe'] } {\n\tconst { store, syncEngine } = getKoraContext()\n\n\tconst controller = createRichTextController({\n\t\tcollection: store.collection(collectionName),\n\t\tcollectionName,\n\t\trecordId,\n\t\tfieldName,\n\t\tstore,\n\t\tsyncEngine: asRichTextSyncEngine(syncEngine),\n\t\tuseDocChannel: options?.useDocChannel,\n\t\tuser: options?.user,\n\t})\n\n\tonDestroy(() => {\n\t\tcontroller.destroy()\n\t})\n\n\tconst resultStore = readable<UseRichTextResult>(buildResult(controller), (set) => {\n\t\tconst sync = (): void => {\n\t\t\tset(buildResult(controller))\n\t\t}\n\t\tsync()\n\t\treturn controller.subscribe(sync)\n\t})\n\n\treturn {\n\t\tget doc() {\n\t\t\treturn controller.doc\n\t\t},\n\t\tget text() {\n\t\t\treturn controller.text\n\t\t},\n\t\tundo: () => controller.undo(),\n\t\tredo: () => controller.redo(),\n\t\tget ready() {\n\t\t\treturn get(resultStore).ready\n\t\t},\n\t\tget error() {\n\t\t\treturn get(resultStore).error\n\t\t},\n\t\tget canUndo() {\n\t\t\treturn get(resultStore).canUndo\n\t\t},\n\t\tget canRedo() {\n\t\t\treturn get(resultStore).canRedo\n\t\t},\n\t\tget cursors() {\n\t\t\treturn get(resultStore).cursors\n\t\t},\n\t\tsetCursor: (anchor: number, head: number) => controller.setCursor(anchor, head),\n\t\tclearCursor: () => controller.clearCursor(),\n\t\tsubscribe: resultStore.subscribe,\n\t}\n}\n\n/** @alias createRichTextBinding */\nexport const useRichText = createRichTextBinding\n\nfunction buildResult(\n\tcontroller: ReturnType<typeof createRichTextController>,\n): UseRichTextResult {\n\tconst snapshot = controller.getSnapshot()\n\treturn {\n\t\tdoc: controller.doc,\n\t\ttext: controller.text,\n\t\tundo: () => controller.undo(),\n\t\tredo: () => controller.redo(),\n\t\tready: snapshot.ready,\n\t\terror: snapshot.error,\n\t\tcanUndo: snapshot.canUndo,\n\t\tcanRedo: snapshot.canRedo,\n\t\tcursors: [...snapshot.cursors],\n\t\tsetCursor: (anchor, head) => controller.setCursor(anchor, head),\n\t\tclearCursor: () => controller.clearCursor(),\n\t}\n}\n","import { getKoraContext } from '../context'\n\n/**\n * Applies local collaborative presence. Returns a cleanup function.\n *\n * In Svelte components, call from an effect:\n * `$effect(() => applyPresence(user))`\n */\nexport function applyPresence(\n\tuser: { name: string; color: string; avatar?: string } | null,\n): () => void {\n\tconst { syncEngine } = getKoraContext()\n\tif (!syncEngine || !user?.name || !user?.color) {\n\t\treturn () => {}\n\t}\n\n\tconst awareness = syncEngine.getAwarenessManager()\n\tawareness.setLocalState({\n\t\tuser: {\n\t\t\tname: user.name,\n\t\t\tcolor: user.color,\n\t\t\tavatar: user.avatar,\n\t\t},\n\t})\n\n\treturn () => {\n\t\tawareness.setLocalState(null)\n\t}\n}\n\n/** Alias for {@link applyPresence} — use inside `$effect()` in `.svelte` files. */\nexport const usePresence = applyPresence\n","import type { AwarenessState } from '@korajs/sync'\nimport { subscribeRemoteAwarenessStates } from '@korajs/sync'\nimport { readable, type Readable } from 'svelte/store'\nimport { getKoraContext } from '../context'\n\n/**\n * Readable store of remote collaborators' awareness states.\n */\nexport function createCollaboratorsStore(): Readable<AwarenessState[]> {\n\tconst { syncEngine } = getKoraContext()\n\n\treturn readable<AwarenessState[]>([], (set) => {\n\t\tif (!syncEngine) {\n\t\t\tset([])\n\t\t\treturn () => {}\n\t\t}\n\n\t\tconst awareness = syncEngine.getAwarenessManager()\n\t\treturn subscribeRemoteAwarenessStates(awareness, set)\n\t})\n}\n\n/** Alias for {@link createCollaboratorsStore}. */\nexport const useCollaborators = createCollaboratorsStore\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,YAAY,kBAAkB;AAGvC,IAAM,iBAAiB,uBAAO,gBAAgB;AAC9C,IAAM,oBAAoB,uBAAO,YAAY;AAEtC,SAAS,eAAe,OAA+B;AAC7D,aAAW,gBAAgB,KAAK;AACjC;AAEO,SAAS,iBAAmC;AAClD,QAAM,UAAU,WAAyC,cAAc;AACvE,MAAI,CAAC,SAAS;AACb,UAAM,IAAI;AAAA,MACT;AAAA,MACA;AAAA,MACA,EAAE,KAAK,qFAAqF;AAAA,IAC7F;AAAA,EACD;AACA,SAAO;AACR;AAGO,SAAS,kBAAkB,SAA4B;AAC7D,aAAW,mBAAmB,OAAO;AACtC;AAGO,SAAS,aAA0B;AACzC,QAAM,MAAM,WAAoC,iBAAiB;AACjE,MAAI,CAAC,KAAK;AACT,UAAM,IAAI;AAAA,MACT;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAOA,eAAsB,iBAAiB,KAA6C;AACnF,QAAM,IAAI;AACV,QAAM,kBACL,OAAO,IAAI,uBAAuB,aAC/B,IAAI,mBAAmB,IACvB,IAAI,gBAAgB;AACxB,QAAM,QAA0B;AAAA,IAC/B,OAAO,IAAI,SAAS;AAAA,IACpB,YAAY,IAAI,cAAc;AAAA,IAC9B;AAAA,IACA,QAAQ,IAAI,UAAU;AAAA,IACtB,qBAAqB,IAAI,MAAM,mBAAmB;AAAA,IAClD;AAAA,EACD;AACA,iBAAe,KAAK;AACpB,oBAAkB,GAAG;AACrB,SAAO;AACR;;;AC9DA,SAAS,wBAAwB;AACjC,SAAS,gBAA+B;AAIxC,IAAM,cAAkC,OAAO,OAAO,CAAC,CAAC;AAQjD,SAAS,iBACf,OACA,SACyB;AACzB,QAAM,EAAE,gBAAgB,IAAI,eAAe;AAC3C,QAAM,UAAU,SAAS,YAAY;AAErC,SAAO,SAAuB,aAA6B,CAAC,QAAQ;AACnE,QAAI,CAAC,SAAS;AACb,UAAI,WAA2B;AAC/B,aAAO,MAAM;AAAA,MAAC;AAAA,IACf;AAEA,qBAAiB,KAA8B;AAC/C,UAAM,aAAa,gBAAgB,YAAY,KAAK;AACpD,UAAM,cAAc,WAAW,UAAU,MAAM;AAC9C,UAAI,WAAW,YAAY,CAAC;AAAA,IAC7B,CAAC;AACD,QAAI,WAAW,YAAY,CAAC;AAE5B,WAAO,MAAM;AACZ,kBAAY;AACZ,sBAAgB,QAAQ,KAA8B;AAAA,IACvD;AAAA,EACD,CAAC;AACF;AAGO,IAAM,WAAW;;;AC1CxB,SAAS,gCAAgC;AAMlC,SAAS,eACf,YACA,SACkC;AAClC,QAAM,aAAa,EAAE,SAAS,QAAQ;AACtC,aAAW,UAAU;AAErB,QAAM,QAAQ,EAAE,SAAS,WAAW;AACpC,QAAM,UAAU;AAEhB,QAAM,aAAa,yBAAiD;AAAA,IACnE,YAAY,IAAI,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9C,gBAAgB,MAAM,WAAW;AAAA,EAClC,CAAC;AAED,QAAM,mBAAmB,oBAAI,IAA8B;AAC3D,QAAM,iBAAiB,oBAAI,IAAmC;AAE9D,aAAW,UAAU,MAAM;AAC1B,UAAM,WAAW,WAAW,YAAY;AACxC,eAAW,YAAY,kBAAkB;AACxC,eAAS,SAAS,SAAS;AAAA,IAC5B;AACA,eAAW,YAAY,gBAAgB;AACtC,eAAS,SAAS,KAAK;AAAA,IACxB;AAAA,EACD,CAAC;AAED,SAAO;AAAA,IACN,QAAQ,IAAI,SAAgB,WAAW,OAAO,GAAG,IAAI;AAAA,IACrD,aAAa,IAAI,SAAgB,WAAW,YAAY,GAAG,IAAI;AAAA,IAC/D,kBAAkB,CAAC,OAAO;AACzB,uBAAiB,IAAI,EAAE;AACvB,SAAG,WAAW,YAAY,EAAE,SAAS;AACrC,aAAO,MAAM,iBAAiB,OAAO,EAAE;AAAA,IACxC;AAAA,IACA,gBAAgB,CAAC,OAAO;AACvB,qBAAe,IAAI,EAAE;AACrB,SAAG,WAAW,YAAY,EAAE,KAAK;AACjC,aAAO,MAAM,eAAe,OAAO,EAAE;AAAA,IACtC;AAAA,IACA,IAAI,UAAU;AACb,aAAO,WAAW,YAAY,EAAE;AAAA,IACjC;AAAA,IACA,IAAI,YAAY;AACf,aAAO,WAAW,YAAY,EAAE;AAAA,IACjC;AAAA,IACA,IAAI,QAAQ;AACX,aAAO,WAAW,YAAY,EAAE;AAAA,IACjC;AAAA,IACA,OAAO,MAAM,WAAW,MAAM;AAAA,EAC/B;AACD;AAGO,IAAM,cAAc;;;AC7D3B,SAAS,qBAAqB,kCAAkC;AAEhE,SAAS,YAAAA,iBAA+B;AAMjC,SAAS,wBAAkD;AACjE,QAAM,EAAE,YAAY,qBAAqB,OAAO,IAAI,eAAe;AAEnE,SAAOC,UAAyB,qBAAqB,CAAC,QAAQ;AAC7D,UAAM,aAAa,2BAA2B;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,QAAQ,sBAAsB,OAAO;AAAA,IACtC,CAAC;AACD,QAAI,WAAW,YAAY,CAAC;AAC5B,UAAM,cAAc,WAAW,UAAU,MAAM;AAC9C,UAAI,WAAW,YAAY,CAAC;AAAA,IAC7B,CAAC;AACD,WAAO,MAAM;AACZ,kBAAY;AACZ,iBAAW,QAAQ;AAAA,IACpB;AAAA,EACD,CAAC;AACF;AAGO,IAAM,gBAAgB;;;AC1BtB,SAAS,SAAiD;AAChE,QAAM,EAAE,IAAI,IAAI,eAAe;AAC/B,MAAI,CAAC,KAAK;AACT,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAGO,IAAM,SAAS;;;ACXf,SAAS,cAAc,MAAkC;AAC/D,QAAM,EAAE,MAAM,IAAI,eAAe;AACjC,SAAO,MAAM,WAAW,IAAI;AAC7B;AAGO,IAAM,gBAAgB;;;ACT7B,SAAS,sBAAsB,gCAAgC;AAE/D,SAAS,iBAAiB;AAC1B,SAAS,KAAK,YAAAC,iBAA+B;AAetC,SAAS,sBACf,gBACA,UACA,WACA,SAC8E;AAC9E,QAAM,EAAE,OAAO,WAAW,IAAI,eAAe;AAE7C,QAAM,aAAa,yBAAyB;AAAA,IAC3C,YAAY,MAAM,WAAW,cAAc;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,qBAAqB,UAAU;AAAA,IAC3C,eAAe,SAAS;AAAA,IACxB,MAAM,SAAS;AAAA,EAChB,CAAC;AAED,YAAU,MAAM;AACf,eAAW,QAAQ;AAAA,EACpB,CAAC;AAED,QAAM,cAAcC,UAA4B,YAAY,UAAU,GAAG,CAAC,QAAQ;AACjF,UAAM,OAAO,MAAY;AACxB,UAAI,YAAY,UAAU,CAAC;AAAA,IAC5B;AACA,SAAK;AACL,WAAO,WAAW,UAAU,IAAI;AAAA,EACjC,CAAC;AAED,SAAO;AAAA,IACN,IAAI,MAAM;AACT,aAAO,WAAW;AAAA,IACnB;AAAA,IACA,IAAI,OAAO;AACV,aAAO,WAAW;AAAA,IACnB;AAAA,IACA,MAAM,MAAM,WAAW,KAAK;AAAA,IAC5B,MAAM,MAAM,WAAW,KAAK;AAAA,IAC5B,IAAI,QAAQ;AACX,aAAO,IAAI,WAAW,EAAE;AAAA,IACzB;AAAA,IACA,IAAI,QAAQ;AACX,aAAO,IAAI,WAAW,EAAE;AAAA,IACzB;AAAA,IACA,IAAI,UAAU;AACb,aAAO,IAAI,WAAW,EAAE;AAAA,IACzB;AAAA,IACA,IAAI,UAAU;AACb,aAAO,IAAI,WAAW,EAAE;AAAA,IACzB;AAAA,IACA,IAAI,UAAU;AACb,aAAO,IAAI,WAAW,EAAE;AAAA,IACzB;AAAA,IACA,WAAW,CAAC,QAAgB,SAAiB,WAAW,UAAU,QAAQ,IAAI;AAAA,IAC9E,aAAa,MAAM,WAAW,YAAY;AAAA,IAC1C,WAAW,YAAY;AAAA,EACxB;AACD;AAGO,IAAM,cAAc;AAE3B,SAAS,YACR,YACoB;AACpB,QAAM,WAAW,WAAW,YAAY;AACxC,SAAO;AAAA,IACN,KAAK,WAAW;AAAA,IAChB,MAAM,WAAW;AAAA,IACjB,MAAM,MAAM,WAAW,KAAK;AAAA,IAC5B,MAAM,MAAM,WAAW,KAAK;AAAA,IAC5B,OAAO,SAAS;AAAA,IAChB,OAAO,SAAS;AAAA,IAChB,SAAS,SAAS;AAAA,IAClB,SAAS,SAAS;AAAA,IAClB,SAAS,CAAC,GAAG,SAAS,OAAO;AAAA,IAC7B,WAAW,CAAC,QAAQ,SAAS,WAAW,UAAU,QAAQ,IAAI;AAAA,IAC9D,aAAa,MAAM,WAAW,YAAY;AAAA,EAC3C;AACD;;;AC3FO,SAAS,cACf,MACa;AACb,QAAM,EAAE,WAAW,IAAI,eAAe;AACtC,MAAI,CAAC,cAAc,CAAC,MAAM,QAAQ,CAAC,MAAM,OAAO;AAC/C,WAAO,MAAM;AAAA,IAAC;AAAA,EACf;AAEA,QAAM,YAAY,WAAW,oBAAoB;AACjD,YAAU,cAAc;AAAA,IACvB,MAAM;AAAA,MACL,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACd;AAAA,EACD,CAAC;AAED,SAAO,MAAM;AACZ,cAAU,cAAc,IAAI;AAAA,EAC7B;AACD;AAGO,IAAM,cAAc;;;AC9B3B,SAAS,sCAAsC;AAC/C,SAAS,YAAAC,iBAA+B;AAMjC,SAAS,2BAAuD;AACtE,QAAM,EAAE,WAAW,IAAI,eAAe;AAEtC,SAAOC,UAA2B,CAAC,GAAG,CAAC,QAAQ;AAC9C,QAAI,CAAC,YAAY;AAChB,UAAI,CAAC,CAAC;AACN,aAAO,MAAM;AAAA,MAAC;AAAA,IACf;AAEA,UAAM,YAAY,WAAW,oBAAoB;AACjD,WAAO,+BAA+B,WAAW,GAAG;AAAA,EACrD,CAAC;AACF;AAGO,IAAM,mBAAmB;","names":["readable","readable","readable","readable","readable","readable"]}

package/package.json

@@ -1,44 +1,74 @@
 {
   "name": "@korajs/svelte",
-  "version": "0.5.0",
-  "description": "Experimental Svelte bindings stub for Kora.js (context helpers)",
+  "version": "0.6.0",
+  "description": "Kora.js Svelte bindings for offline-first applications",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./KoraQuery.svelte": {
+      "svelte": "./src/components/KoraQuery.svelte",
+      "import": "./dist/components/KoraQuery.js",
+      "default": "./dist/components/KoraQuery.js"
+    },
+    "./KoraRichText.svelte": {
+      "svelte": "./src/components/KoraRichText.svelte",
+      "import": "./dist/components/KoraRichText.js",
+      "default": "./dist/components/KoraRichText.js"
+    },
+    "./KoraProvider.svelte": {
+      "svelte": "./src/components/KoraProvider.svelte",
+      "import": "./dist/components/KoraProvider.js",
+      "default": "./dist/components/KoraProvider.js"
+    },
+    "./KoraStoreProvider.svelte": {
+      "svelte": "./src/components/KoraStoreProvider.svelte",
+      "import": "./dist/components/KoraStoreProvider.js",
+      "default": "./dist/components/KoraStoreProvider.js"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/components/KoraQuery.svelte",
+    "src/components/KoraRichText.svelte",
+    "src/components/KoraProvider.svelte",
+    "src/components/KoraStoreProvider.svelte"
   ],
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "@korajs/store": "0.5.0",
-    "@korajs/core": "0.5.0"
+    "yjs": "^13.6.30",
+    "@korajs/core": "0.6.0",
+    "@korajs/store": "0.6.0",
+    "@korajs/sync": "0.6.0"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/svelte": "^5.2.6",
+    "@testing-library/user-event": "^14.6.1",
+    "happy-dom": "^17.4.4",
+    "svelte": "^5.0.0",
     "tsup": "^8.3.6",
     "typescript": "^5.7.3",
-    "svelte": "^5.0.0"
+    "vitest": "^3.0.4"
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/build-components.mjs",
     "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "typecheck": "tsc --noEmit",
     "lint": "biome check src/",
-    "clean": "rm -rf dist .turbo"
+    "clean": "rm -rf dist .turbo coverage"
   }
 }

package/src/components/KoraProvider.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { KoraAppLike } from '../types'
+	import KoraContextBridge from './KoraContextBridge.svelte'
+	import KoraStoreBridge from './KoraStoreBridge.svelte'
+
+	interface Props {
+		app: KoraAppLike
+		fallback?: import('svelte').Snippet
+		children?: import('svelte').Snippet
+	}
+
+	let { app, fallback, children }: Props = $props()
+
+	let ready = $state(false)
+	let initError = $state<Error | null>(null)
+
+	$effect(() => {
+		let cancelled = false
+		ready = false
+		initError = null
+
+		void (async () => {
+			try {
+				await app.ready
+				if (cancelled) return
+				ready = true
+			} catch (error: unknown) {
+				if (cancelled) return
+				initError = error instanceof Error ? error : new Error(String(error))
+				console.error('[Kora] Initialization failed:', initError)
+			}
+		})()
+
+		return () => {
+			cancelled = true
+		}
+	})
+</script>
+
+{#if initError}
+	<div role="alert" style="color: red; padding: 1rem; font-family: monospace;">
+		<strong>Kora initialization error: </strong>{initError.message}
+	</div>
+{:else if !ready}
+	{#if fallback}
+		{@render fallback()}
+	{:else}
+		<div>Loading...</div>
+	{/if}
+{:else if children}
+	<KoraContextBridge {app}>
+		{@render children()}
+	</KoraContextBridge>
+{/if}

package/src/components/KoraQuery.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import type { CollectionRecord, QueryBuilder } from '@korajs/store'
+</script>
+
+<script lang="ts" generics="T extends CollectionRecord = CollectionRecord">
+	import { assertQueryReady } from '@korajs/store'
+	import { getKoraContext } from '../context'
+
+	interface Props {
+		query: QueryBuilder<T>
+		enabled?: boolean
+		children?: import('svelte').Snippet<[readonly T[]]>
+	}
+
+	let { query, enabled = true, children }: Props = $props()
+
+	getKoraContext()
+
+	let data = $state<readonly T[]>([])
+
+	$effect(() => {
+		if (!enabled) {
+			data = []
+			return
+		}
+
+		const { queryStoreCache } = getKoraContext()
+		assertQueryReady(query as QueryBuilder<unknown>)
+		const queryStore = queryStoreCache.getOrCreate(query)
+		const unsubscribe = queryStore.subscribe(() => {
+			data = queryStore.getSnapshot()
+		})
+		data = queryStore.getSnapshot()
+
+		return () => {
+			unsubscribe()
+			queryStoreCache.release(query as QueryBuilder<unknown>)
+		}
+	})
+</script>
+
+{#if children}
+	{@render children(data)}
+{/if}

package/src/components/KoraRichText.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { asRichTextSyncEngine, createRichTextController } from '@korajs/store'
+	import type { AwarenessUser } from '@korajs/sync'
+	import { getKoraContext } from '../context'
+	import type { UseRichTextResult } from '../types'
+
+	interface Props {
+		collectionName: string
+		recordId: string
+		fieldName: string
+		user?: AwarenessUser
+		useDocChannel?: boolean
+		children?: import('svelte').Snippet<[UseRichTextResult]>
+	}
+
+	let { collectionName, recordId, fieldName, user, useDocChannel, children }: Props = $props()
+
+	const { store, syncEngine } = getKoraContext()
+	let result = $state<UseRichTextResult | null>(null)
+
+	$effect(() => {
+		const controller = createRichTextController({
+			collection: store.collection(collectionName),
+			collectionName,
+			recordId,
+			fieldName,
+			store,
+			syncEngine: asRichTextSyncEngine(syncEngine),
+			useDocChannel,
+			user,
+		})
+
+		const sync = (): void => {
+			const snapshot = controller.getSnapshot()
+			result = {
+				doc: controller.doc,
+				text: controller.text,
+				undo: () => controller.undo(),
+				redo: () => controller.redo(),
+				ready: snapshot.ready,
+				error: snapshot.error,
+				canUndo: snapshot.canUndo,
+				canRedo: snapshot.canRedo,
+				cursors: [...snapshot.cursors],
+				setCursor: (anchor, head) => controller.setCursor(anchor, head),
+				clearCursor: () => controller.clearCursor(),
+			}
+		}
+
+		sync()
+		const unsubscribe = controller.subscribe(sync)
+
+		return () => {
+			unsubscribe()
+			controller.destroy()
+			result = null
+		}
+	})
+</script>
+
+{#if result && children}
+	{@render children(result)}
+{/if}

package/src/components/KoraStoreProvider.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { KoraContextValue } from '../types'
+	import KoraStoreBridge from './KoraStoreBridge.svelte'
+
+	interface Props {
+		store: KoraContextValue['store']
+		syncEngine?: KoraContextValue['syncEngine']
+		children?: import('svelte').Snippet
+	}
+
+	let { store, syncEngine = null, children }: Props = $props()
+</script>
+
+<KoraStoreBridge {store} {syncEngine}>
+	{#if children}
+		{@render children()}
+	{/if}
+</KoraStoreBridge>