@spooky-sync/client-solid 0.0.1-canary.5 → 0.0.1-canary.50

package/skills/sp00ky-solid/SKILL.md

@@ -0,0 +1,264 @@
+---
+name: sp00ky-solid
+description: >-
+  SolidJS integration for the Sp00ky reactive local-first SurrealDB framework.
+  Use when setting up Sp00kyProvider, using useQuery for reactive data, building
+  queries with QueryBuilder in SolidJS components, handling mutations, auth,
+  file uploads/downloads, or working with Sp00ky types like Model and RecordId.
+metadata:
+  author: sp00ky-sync
+  version: "0.0.1"
+---
+
+# Sp00ky SolidJS Client
+
+`@spooky-sync/client-solid` provides SolidJS bindings for the Sp00ky framework. It wraps `@spooky-sync/core` with a context provider, reactive `useQuery` hook, and file operation hooks.
+
+## Setup
+
+```tsx
+import { Sp00kyProvider } from '@spooky-sync/client-solid';
+import { schema } from './generated/schema';
+import schemaSurql from './generated/schema.surql?raw';
+
+function App() {
+  return (
+    <Sp00kyProvider
+      config={{
+        database: {
+          endpoint: 'ws://localhost:8000',
+          namespace: 'my_ns',
+          database: 'my_db',
+          store: 'indexeddb',
+        },
+        schema,
+        schemaSurql,
+        logLevel: 'info',
+      }}
+      fallback={<div>Loading database...</div>}
+      onReady={(db) => console.log('DB ready')}
+      onError={(err) => console.error('DB failed', err)}
+    >
+      <MyApp />
+    </Sp00kyProvider>
+  );
+}
+```
+
+### Sp00kyProvider Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `config` | `SyncedDbConfig<S>` | Same as `Sp00kyConfig` from core |
+| `fallback` | `JSX.Element` | Shown while the database is initializing |
+| `onReady` | `(db: SyncedDb<S>) => void` | Called when initialization succeeds |
+| `onError` | `(error: Error) => void` | Called if initialization fails |
+| `children` | `JSX.Element` | App content, rendered after init |
+
+## useQuery
+
+The primary hook for reactive data fetching. Queries automatically re-subscribe when inputs change.
+
+### Context-based usage (recommended)
+
+```tsx
+import { useQuery } from '@spooky-sync/client-solid';
+import { QueryBuilder } from '@spooky-sync/query-builder';
+import { schema } from './generated/schema';
+
+function PostList() {
+  const db = useDb();
+
+  // Static query
+  const posts = useQuery(
+    db.query('post').orderBy('createdAt', 'desc').limit(20).build()
+  );
+
+  return (
+    <Show when={!posts.isLoading()} fallback={<div>Loading...</div>}>
+      <For each={posts.data()}>
+        {(post) => <div>{post.title}</div>}
+      </For>
+    </Show>
+  );
+}
+```
+
+### Reactive queries (function form)
+
+Wrap the query in a function to make it reactive to signal changes:
+
+```tsx
+function UserPosts(props: { userId: string }) {
+  const db = useDb();
+
+  // Query re-runs when props.userId changes
+  const posts = useQuery(
+    () => db.query('post')
+      .where({ author: props.userId })
+      .related('author')
+      .build()
+  );
+
+  return <For each={posts.data()}>{(post) => <div>{post.title}</div>}</For>;
+}
+```
+
+### Conditional queries
+
+Use the `enabled` option to conditionally run queries:
+
+```tsx
+const [userId, setUserId] = createSignal<string | null>(null);
+
+const user = useQuery(
+  () => userId()
+    ? db.query('user').where({ id: userId()! }).one().build()
+    : undefined,
+  { enabled: () => userId() !== null }
+);
+```
+
+### Return value
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `data` | `() => T \| undefined` | Reactive accessor for query results |
+| `error` | `() => Error \| undefined` | Reactive accessor for errors |
+| `isLoading` | `() => boolean` | `true` until first data arrives |
+
+### Explicit db overload
+
+You can also pass the `SyncedDb` instance directly (legacy):
+
+```tsx
+const posts = useQuery(db, db.query('post').build());
+```
+
+## useDb
+
+Access the `SyncedDb` instance from context:
+
+```tsx
+import { useDb } from '@spooky-sync/client-solid';
+
+function MyComponent() {
+  const db = useDb();
+  // db.query(), db.create(), db.update(), db.delete(), db.auth, etc.
+}
+```
+
+## Mutations
+
+Use the `SyncedDb` instance (from `useDb()`) for mutations:
+
+```tsx
+const db = useDb();
+
+// Create
+await db.create('post:abc', { title: 'Hello', body: 'World', author: 'user:alice' });
+
+// Update
+await db.update('post', 'post:abc', { title: 'Updated' });
+
+// Update with debounce
+await db.update('post', 'post:abc', { body: newText }, {
+  debounced: { key: 'recordId_x_fields', delay: 300 },
+});
+
+// Delete
+await db.delete('post', 'post:abc');
+```
+
+## Authentication
+
+```tsx
+const db = useDb();
+
+await db.auth.signUp('user_access', { email, password, name });
+await db.auth.signIn('user_access', { email, password });
+await db.auth.signOut();
+
+// Subscribe to auth state
+const unsub = db.auth.subscribe((userId) => { ... });
+```
+
+## File Upload & Download
+
+See [references/file-hooks.md](references/file-hooks.md) for details.
+
+```tsx
+import { useFileUpload, useDownloadFile } from '@spooky-sync/client-solid';
+
+// Upload
+const { upload, isUploading, error } = useFileUpload('avatars');
+await upload('alice/photo.png', file);
+
+// Download (reactive)
+const { url, isLoading } = useDownloadFile('avatars', () => user()?.avatarPath);
+```
+
+## Backend Runs
+
+Use `db.run()` to trigger server-side operations via the outbox pattern. See the `sp00ky-core` skill for full details on `db.run()` and how it works.
+
+### Basic Usage
+
+```tsx
+const db = useDb();
+await db.run('api', '/spookify', { id: threadId });
+```
+
+### Entity Linking with `assignedTo`
+
+Pass `assignedTo` to link the job to an entity. This enables permission scoping and lets you query job status via relationships:
+
+```tsx
+const db = useDb();
+
+// Trigger backend run linked to a thread
+await db.run('api', '/spookify', { id: threadData.id }, {
+  assignedTo: threadData.id,  // Links the job record to this thread
+});
+```
+
+### Tracking Job Status Reactively
+
+Use `.related()` to include jobs in your query, then reactively track their status:
+
+```tsx
+// Query a thread with its latest spookify job
+const threadResult = useQuery(() =>
+  db.query('thread')
+    .where({ id: `thread:${threadId}` })
+    .related('jobs', (q) =>
+      q.where({ path: '/spookify' }).orderBy('created_at', 'desc').limit(1)
+    )
+    .one()
+    .build()
+);
+
+const thread = () => threadResult.data();
+
+// Check if a job is in progress
+const isJobLoading = () =>
+  ['pending', 'processing'].includes(thread()?.jobs?.[0]?.status ?? '');
+
+// Use in UI
+<Show when={isJobLoading()}>
+  <span>Processing...</span>
+</Show>
+```
+
+The job's `status` field transitions through: `pending` → `processing` → `success` | `failed`. Since the job record syncs reactively, your UI updates automatically as the backend processes the job.
+
+## Key Re-exports
+
+The package re-exports commonly needed types:
+
+```typescript
+import { RecordId, Uuid } from '@spooky-sync/client-solid';
+import type {
+  Model, GenericModel, QueryResult, TableModel, TableNames, GetTable,
+} from '@spooky-sync/client-solid';
+```

package/skills/sp00ky-solid/references/file-hooks.md

@@ -0,0 +1,112 @@
+# File Hooks Reference
+
+## useFileUpload
+
+Upload, download, and manage files in a SurrealDB bucket.
+
+### Signatures
+
+```typescript
+// Context-based (inside Sp00kyProvider)
+useFileUpload<S>(bucketName: BucketNames<S>): FileUploadResult;
+
+// Explicit db
+useFileUpload<S>(db: SyncedDb<S>, bucketName: BucketNames<S>): FileUploadResult;
+```
+
+### Return Value
+
+```typescript
+interface FileUploadResult {
+  isUploading: () => boolean;
+  error: () => Error | null;
+  clearError: () => void;
+  upload: (path: string, file: File | Blob) => Promise<void>;
+  download: (path: string) => Promise<string | null>; // Returns object URL
+  remove: (path: string) => Promise<void>;
+  exists: (path: string) => Promise<boolean>;
+}
+```
+
+### Validation
+
+If the bucket has `maxSize` or `allowedExtensions` configured in the schema, the hook validates files before upload and sets `error()` on failure.
+
+### Example
+
+```tsx
+function AvatarUpload() {
+  const { upload, isUploading, error, clearError } = useFileUpload('avatars');
+
+  const handleFile = async (e: Event) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) {
+      await upload(`user/${userId()}/avatar.png`, file);
+    }
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={handleFile} disabled={isUploading()} />
+      <Show when={error()}>
+        <p class="error">{error()!.message}</p>
+        <button onClick={clearError}>Dismiss</button>
+      </Show>
+    </div>
+  );
+}
+```
+
+## useDownloadFile
+
+Reactively download a file from a bucket. Re-fetches when the path changes.
+
+### Signatures
+
+```typescript
+// Context-based
+useDownloadFile<S>(
+  bucketName: BucketNames<S>,
+  path: Accessor<string | null | undefined>,
+  options?: { cache?: boolean },
+): UseDownloadFileResult;
+
+// Explicit db
+useDownloadFile<S>(
+  db: SyncedDb<S>,
+  bucketName: BucketNames<S>,
+  path: Accessor<string | null | undefined>,
+  options?: { cache?: boolean },
+): UseDownloadFileResult;
+```
+
+### Return Value
+
+```typescript
+interface UseDownloadFileResult {
+  url: Accessor<string | null>;     // Object URL for the file
+  isLoading: Accessor<boolean>;
+  error: Accessor<Error | null>;
+  refetch: () => void;              // Force re-download (evicts cache)
+}
+```
+
+### Caching
+
+By default, downloads are cached by `bucket:path` key with reference counting. Object URLs are revoked when no component references them. Set `cache: false` to disable.
+
+### Example
+
+```tsx
+function Avatar(props: { path: string | null }) {
+  const { url, isLoading } = useDownloadFile('avatars', () => props.path);
+
+  return (
+    <Show when={!isLoading()} fallback={<Spinner />}>
+      <Show when={url()}>
+        <img src={url()!} alt="Avatar" />
+      </Show>
+    </Show>
+  );
+}
+```

package/src/cache/index.ts

@@ -1,6 +1,6 @@
 export { SurrealDBWasmFactory } from './surrealdb-wasm-factory';
 
-import { Surreal } from 'surrealdb';
+import type { Surreal } from 'surrealdb';
 import type { CacheStrategy } from '../types';
 
 /**

package/src/cache/surrealdb-wasm-factory.ts

@@ -1,9 +1,11 @@
-import { Diagnostic, Surreal, applyDiagnostics } from 'surrealdb';
+import type { Diagnostic} from 'surrealdb';
+import { Surreal, applyDiagnostics } from 'surrealdb';
 import { createWasmEngines } from '@surrealdb/wasm';
 import type { CacheStrategy } from '../types';
 
 const printDiagnostic = ({ key, type, phase, ...other }: Diagnostic) => {
   if (phase === 'progress' || phase === 'after') {
+    // oxlint-disable-next-line no-console -- intentional diagnostic logging
     console.log(`[SurrealDB_WASM] [${key}] ${type}:${phase}\n${JSON.stringify(other, null, 2)}`);
   }
 };
@@ -11,6 +13,7 @@ const printDiagnostic = ({ key, type, phase, ...other }: Diagnostic) => {
 /**
  * SurrealDB WASM client factory for different storage strategies
  */
+// oxlint-disable-next-line no-extraneous-class -- factory pattern groups related static methods
 export class SurrealDBWasmFactory {
   /**
    * Creates a SurrealDB WASM instance with the specified storage strategy

package/src/index.ts

@@ -1,14 +1,14 @@
 import type { SyncedDbConfig } from './types';
 import {
-  SpookyClient,
-  AuthService,
-  BucketHandle,
-  type SpookyQueryResultPromise,
-  UpdateOptions,
-  RunOptions,
+  Sp00kyClient,
+  type Sp00kyQueryResultPromise,
+  type AuthService,
+  type BucketHandle,
+  type UpdateOptions,
+  type RunOptions,
 } from '@spooky-sync/core';
 
-import {
+import type {
   GetTable,
   QueryBuilder,
   SchemaStructure,
@@ -25,19 +25,26 @@ import {
   RoutePayload,
   BucketNames,
   BucketDefinitionSchema,
+  QueryModifier,
+  QueryModifierBuilder,
+  QueryInfo,
+  RelationshipsMetadata,
+  RelationshipDefinition,
+  InferRelatedModelFromMetadata,
+  GetCardinality,
 } from '@spooky-sync/query-builder';
 
-import { RecordId, Uuid, Surreal } from 'surrealdb';
+import { RecordId, Uuid, type Surreal } from 'surrealdb';
 export { RecordId, Uuid };
 export type { Model, GenericModel, GenericSchema, ModelPayload } from './lib/models';
 export { useQuery } from './lib/use-query';
 export { useFileUpload, type FileUploadResult } from './lib/use-file-upload';
 export { useDownloadFile, type UseDownloadFileOptions, type UseDownloadFileResult } from './lib/use-download-file';
-export { SpookyProvider, type SpookyProviderProps } from './lib/SpookyProvider';
+export { Sp00kyProvider, type Sp00kyProviderProps } from './lib/Sp00kyProvider';
 export { useDb } from './lib/context';
 
 // export { AuthEventTypes } from "@spooky-sync/core"; // TODO: Verify if AuthEventTypes exists in core
-export type {};
+
 
 // Re-export query builder types for convenience
 export type {
@@ -52,7 +59,7 @@ export type {
   TableModel,
   TableNames,
   QueryResult,
-} from '@spooky-sync/query-builder';
+};
 
 export type RelationshipField<
   Schema extends SchemaStructure,
@@ -94,30 +101,30 @@ export type WithRelatedMany<Field extends string, RelatedFields extends RelatedF
 };
 
 /**
- * SyncedDb - A thin wrapper around spooky-ts for Solid.js integration
- * Delegates all logic to the underlying spooky-ts instance
+ * SyncedDb - A thin wrapper around sp00ky-ts for Solid.js integration
+ * Delegates all logic to the underlying sp00ky-ts instance
  */
 export class SyncedDb<S extends SchemaStructure> {
   private config: SyncedDbConfig<S>;
-  private spooky: SpookyClient<S> | null = null;
+  private sp00ky: Sp00kyClient<S> | null = null;
   private _initialized = false;
 
   constructor(config: SyncedDbConfig<S>) {
     this.config = config;
   }
 
-  public getSpooky(): SpookyClient<S> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky;
+  public getSp00ky(): Sp00kyClient<S> {
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky;
   }
 
   /**
-   * Initialize the spooky-ts instance
+   * Initialize the sp00ky-ts instance
    */
   async init(): Promise<void> {
     if (this._initialized) return;
-    this.spooky = new SpookyClient<S>(this.config);
-    await this.spooky.init();
+    this.sp00ky = new Sp00kyClient<S>(this.config);
+    await this.sp00ky.init();
     this._initialized = true;
   }
 
@@ -125,8 +132,8 @@ export class SyncedDb<S extends SchemaStructure> {
    * Create a new record in the database
    */
   async create(id: string, payload: Record<string, unknown>): Promise<void> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    await this.spooky.create(id, payload as Record<string, unknown>);
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    await this.sp00ky.create(id, payload as Record<string, unknown>);
   }
 
   /**
@@ -138,8 +145,8 @@ export class SyncedDb<S extends SchemaStructure> {
     payload: Partial<TableModel<GetTable<S, TName>>>,
     options?: UpdateOptions
   ): Promise<void> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    await this.spooky.update(
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    await this.sp00ky.update(
       tableName as string,
       recordId,
       payload as Record<string, unknown>,
@@ -154,10 +161,10 @@ export class SyncedDb<S extends SchemaStructure> {
     tableName: TName,
     selector: string | InnerQuery<GetTable<S, TName>, boolean>
   ): Promise<void> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
     if (typeof selector !== 'string')
       throw new Error('Only string ID selectors are supported currently with core');
-    await this.spooky.delete(tableName as string, selector);
+    await this.sp00ky.delete(tableName as string, selector);
   }
 
   /**
@@ -165,9 +172,9 @@ export class SyncedDb<S extends SchemaStructure> {
    */
   public query<TName extends TableNames<S>>(
     table: TName
-  ): QueryBuilder<S, TName, SpookyQueryResultPromise, {}, false> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky.query(table, {});
+  ): QueryBuilder<S, TName, Sp00kyQueryResultPromise, {}, false> {
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky.query(table, {});
   }
 
   /**
@@ -182,17 +189,17 @@ export class SyncedDb<S extends SchemaStructure> {
     payload: RoutePayload<S, B, R>,
     options?: RunOptions,
   ): Promise<void> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    await this.spooky.run(backend, path, payload, options);
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    await this.sp00ky.run(backend, path, payload, options);
   }
 
   /**
    * Authenticate with the database
    */
   public async authenticate(token: string): Promise<RecordId<string>> {
-    const result = await this.spooky?.authenticate(token);
-    // SpookyClient.authenticate returns whatever remote.authenticate returns (boolean or token usually?)
-    // Wait, checked SpookyClient: return this.remote.getClient().authenticate(token);
+    await this.sp00ky?.authenticate(token);
+    // Sp00kyClient.authenticate returns whatever remote.authenticate returns (boolean or token usually?)
+    // Wait, checked Sp00kyClient: return this.remote.getClient().authenticate(token);
     // SurrealDB authenticate returns void? or token?
     // Assuming void or token.
     return new RecordId('user', 'me'); // Placeholder or actual?
@@ -210,54 +217,54 @@ export class SyncedDb<S extends SchemaStructure> {
    * Sign out, clear session and local storage
    */
   public async signOut(): Promise<void> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    await this.spooky.auth.signOut();
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    await this.sp00ky.auth.signOut();
   }
 
   /**
    * Execute a function with direct access to the remote database connection
    */
   public async useRemote<T>(fn: (db: Surreal) => T | Promise<T>): Promise<T> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return await this.spooky.useRemote(fn);
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return await this.sp00ky.useRemote(fn);
   }
   /**
    * Access the remote database service directly
    */
-  get remote(): SpookyClient<S>['remoteClient'] {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky.remoteClient;
+  get remote(): Sp00kyClient<S>['remoteClient'] {
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky.remoteClient;
   }
 
   /**
    * Access the local database service directly
    */
-  get local(): SpookyClient<S>['localClient'] {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky.localClient;
+  get local(): Sp00kyClient<S>['localClient'] {
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky.localClient;
   }
 
   /**
    * Access the auth service
    */
   get auth(): AuthService<S> {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky.auth;
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky.auth;
   }
 
   get pendingMutationCount(): number {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky.pendingMutationCount;
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky.pendingMutationCount;
   }
 
   subscribeToPendingMutations(cb: (count: number) => void): () => void {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky.subscribeToPendingMutations(cb);
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky.subscribeToPendingMutations(cb);
   }
 
   bucket<B extends BucketNames<S>>(name: B): BucketHandle {
-    if (!this.spooky) throw new Error('SyncedDb not initialized');
-    return this.spooky.bucket(name);
+    if (!this.sp00ky) throw new Error('SyncedDb not initialized');
+    return this.sp00ky.bucket(name);
   }
 
   getBucketConfig(name: string): BucketDefinitionSchema | undefined {

package/src/lib/{SpookyProvider.ts → Sp00kyProvider.ts}

@@ -1,10 +1,11 @@
-import { createSignal, onMount, createComponent, createMemo, JSX, mergeProps } from 'solid-js';
+import type { JSX} from 'solid-js';
+import { createSignal, onMount, createComponent, createMemo, mergeProps } from 'solid-js';
 import type { SchemaStructure } from '@spooky/query-builder';
 import type { SyncedDbConfig } from '../types';
 import { SyncedDb } from '../index';
-import { SpookyContext } from './context';
+import { Sp00kyContext } from './context';
 
-export interface SpookyProviderProps<S extends SchemaStructure> {
+export interface Sp00kyProviderProps<S extends SchemaStructure> {
   config: SyncedDbConfig<S>;
   fallback?: JSX.Element;
   onError?: (error: Error) => void;
@@ -12,8 +13,8 @@ export interface SpookyProviderProps<S extends SchemaStructure> {
   children: JSX.Element;
 }
 
-export function SpookyProvider<S extends SchemaStructure>(
-  props: SpookyProviderProps<S>
+export function Sp00kyProvider<S extends SchemaStructure>(
+  props: Sp00kyProviderProps<S>
 ): JSX.Element {
   const merged = mergeProps(
     {
@@ -35,7 +36,8 @@ export function SpookyProvider<S extends SchemaStructure>(
       if (merged.onError) {
         merged.onError(error);
       } else {
-        console.error('SpookyProvider: Failed to initialize database', error);
+        // oxlint-disable-next-line no-console
+        console.error('Sp00kyProvider: Failed to initialize database', error);
       }
     }
   });
@@ -43,7 +45,7 @@ export function SpookyProvider<S extends SchemaStructure>(
   const content = createMemo(() => {
     const instance = db();
     if (!instance) return merged.fallback;
-    return createComponent(SpookyContext.Provider, {
+    return createComponent(Sp00kyContext.Provider, {
       value: instance,
       get children() {
         return merged.children;