@rool-dev/app 0.3.0

package/dist/reactive.svelte.js

@@ -0,0 +1,267 @@
+/**
+ * Reactive Svelte wrapper around AppChannel (bridge client).
+ *
+ * Mirrors the @rool-dev/svelte ReactiveChannel API: same $state properties,
+ * same methods, same reactive primitives (object(), watch()).
+ * The underlying transport is the postMessage bridge, not the SDK directly.
+ */
+// ---------------------------------------------------------------------------
+// ReactiveWatch
+// ---------------------------------------------------------------------------
+class ReactiveWatchImpl {
+    #channel;
+    #options;
+    #unsubscribers = [];
+    #currentIds = new Set();
+    objects = $state([]);
+    loading = $state(true);
+    constructor(channel, options) {
+        this.#channel = channel;
+        this.#options = options;
+        this.#setup();
+    }
+    #setup() {
+        this.refresh();
+        const onObjectCreated = ({ object }) => {
+            if (this.#matches(object))
+                this.refresh();
+        };
+        this.#channel.on('objectCreated', onObjectCreated);
+        this.#unsubscribers.push(() => this.#channel.off('objectCreated', onObjectCreated));
+        const onObjectUpdated = ({ objectId, object }) => {
+            const wasIn = this.#currentIds.has(objectId);
+            const nowMatches = this.#matches(object);
+            if (wasIn && nowMatches) {
+                const i = this.objects.findIndex((o) => o.id === objectId);
+                if (i !== -1)
+                    this.objects[i] = { ...this.objects[i], ...object };
+            }
+            else if (wasIn && !nowMatches) {
+                const where = this.#options.where;
+                const isPartial = where && Object.keys(where).some((k) => !(k in object));
+                if (isPartial) {
+                    const i = this.objects.findIndex((o) => o.id === objectId);
+                    if (i !== -1)
+                        this.objects[i] = { ...this.objects[i], ...object };
+                }
+                else {
+                    this.objects = this.objects.filter((o) => o.id !== objectId);
+                    this.#currentIds.delete(objectId);
+                }
+            }
+            else if (!wasIn && nowMatches) {
+                this.refresh();
+            }
+        };
+        this.#channel.on('objectUpdated', onObjectUpdated);
+        this.#unsubscribers.push(() => this.#channel.off('objectUpdated', onObjectUpdated));
+        const onObjectDeleted = ({ objectId }) => {
+            if (this.#currentIds.has(objectId)) {
+                this.objects = this.objects.filter((o) => o.id !== objectId);
+                this.#currentIds.delete(objectId);
+            }
+        };
+        this.#channel.on('objectDeleted', onObjectDeleted);
+        this.#unsubscribers.push(() => this.#channel.off('objectDeleted', onObjectDeleted));
+        const onReset = () => this.refresh();
+        this.#channel.on('reset', onReset);
+        this.#unsubscribers.push(() => this.#channel.off('reset', onReset));
+    }
+    #matches(object) {
+        const where = this.#options.where;
+        if (!where)
+            return true;
+        for (const [key, value] of Object.entries(where)) {
+            if (object[key] !== value)
+                return false;
+        }
+        return true;
+    }
+    async refresh() {
+        this.loading = true;
+        try {
+            const { objects } = await this.#channel.findObjects({
+                where: this.#options.where,
+                limit: this.#options.limit,
+                order: this.#options.order,
+                ephemeral: true,
+            });
+            this.objects = objects;
+            this.#currentIds = new Set(objects.map((o) => o.id));
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    close() {
+        for (const unsub of this.#unsubscribers)
+            unsub();
+        this.#unsubscribers.length = 0;
+    }
+}
+// ---------------------------------------------------------------------------
+// ReactiveObject
+// ---------------------------------------------------------------------------
+class ReactiveObjectImpl {
+    #channel;
+    #objectId;
+    #unsubscribers = [];
+    data = $state(undefined);
+    loading = $state(true);
+    constructor(channel, objectId) {
+        this.#channel = channel;
+        this.#objectId = objectId;
+        this.#setup();
+    }
+    #setup() {
+        this.refresh();
+        const onObjectUpdated = ({ objectId, object }) => {
+            if (objectId === this.#objectId)
+                this.data = object;
+        };
+        this.#channel.on('objectUpdated', onObjectUpdated);
+        this.#unsubscribers.push(() => this.#channel.off('objectUpdated', onObjectUpdated));
+        const onObjectCreated = ({ object }) => {
+            if (object.id === this.#objectId)
+                this.data = object;
+        };
+        this.#channel.on('objectCreated', onObjectCreated);
+        this.#unsubscribers.push(() => this.#channel.off('objectCreated', onObjectCreated));
+        const onObjectDeleted = ({ objectId }) => {
+            if (objectId === this.#objectId)
+                this.data = undefined;
+        };
+        this.#channel.on('objectDeleted', onObjectDeleted);
+        this.#unsubscribers.push(() => this.#channel.off('objectDeleted', onObjectDeleted));
+        const onReset = () => this.refresh();
+        this.#channel.on('reset', onReset);
+        this.#unsubscribers.push(() => this.#channel.off('reset', onReset));
+    }
+    async refresh() {
+        this.loading = true;
+        try {
+            this.data = await this.#channel.getObject(this.#objectId);
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    close() {
+        for (const unsub of this.#unsubscribers)
+            unsub();
+        this.#unsubscribers.length = 0;
+    }
+}
+// ---------------------------------------------------------------------------
+// ReactiveAppChannel
+// ---------------------------------------------------------------------------
+class ReactiveAppChannelImpl {
+    #channel;
+    #closed = false;
+    // Reactive state
+    interactions = $state([]);
+    objectIds = $state([]);
+    #unsubscribers = [];
+    constructor(channel) {
+        this.#channel = channel;
+        // Load initial data
+        channel.getInteractions().then((list) => { this.interactions = list; });
+        channel.getObjectIds().then((ids) => { this.objectIds = ids; });
+        // Subscribe to channel updates → refresh interactions
+        const onChannelUpdated = () => {
+            channel.getInteractions().then((list) => { this.interactions = list; });
+        };
+        channel.on('channelUpdated', onChannelUpdated);
+        this.#unsubscribers.push(() => channel.off('channelUpdated', onChannelUpdated));
+        // Subscribe to object events → refresh objectIds
+        const refreshObjectIds = () => {
+            channel.getObjectIds().then((ids) => { this.objectIds = ids; });
+        };
+        channel.on('objectCreated', refreshObjectIds);
+        this.#unsubscribers.push(() => channel.off('objectCreated', refreshObjectIds));
+        channel.on('objectDeleted', refreshObjectIds);
+        this.#unsubscribers.push(() => channel.off('objectDeleted', refreshObjectIds));
+        // Full resets
+        const onReset = () => {
+            channel.getInteractions().then((list) => { this.interactions = list; });
+            channel.getObjectIds().then((ids) => { this.objectIds = ids; });
+        };
+        channel.on('reset', onReset);
+        this.#unsubscribers.push(() => channel.off('reset', onReset));
+    }
+    // Proxied properties
+    get channelId() { return this.#channel.channelId; }
+    get spaceId() { return this.#channel.spaceId; }
+    get spaceName() { return this.#channel.spaceName; }
+    get role() { return this.#channel.role; }
+    get linkAccess() { return this.#channel.linkAccess; }
+    get userId() { return this.#channel.userId; }
+    get isReadOnly() { return this.#channel.isReadOnly; }
+    // Object operations
+    getObject(objectId) { return this.#channel.getObject(objectId); }
+    stat(objectId) { return this.#channel.stat(objectId); }
+    findObjects(options) { return this.#channel.findObjects(options); }
+    getObjectIds(options) { return this.#channel.getObjectIds(options); }
+    createObject(options) { return this.#channel.createObject(options); }
+    updateObject(objectId, options) { return this.#channel.updateObject(objectId, options); }
+    deleteObjects(objectIds) { return this.#channel.deleteObjects(objectIds); }
+    // AI
+    prompt(text, options) { return this.#channel.prompt(text, options); }
+    // Undo/redo
+    checkpoint(label) { return this.#channel.checkpoint(label); }
+    canUndo() { return this.#channel.canUndo(); }
+    canRedo() { return this.#channel.canRedo(); }
+    undo() { return this.#channel.undo(); }
+    redo() { return this.#channel.redo(); }
+    clearHistory() { return this.#channel.clearHistory(); }
+    // Metadata
+    setMetadata(key, value) { return this.#channel.setMetadata(key, value); }
+    getMetadata(key) { return this.#channel.getMetadata(key); }
+    getAllMetadata() { return this.#channel.getAllMetadata(); }
+    // History
+    getInteractions() { return this.#channel.getInteractions(); }
+    getSystemInstruction() { return this.#channel.getSystemInstruction(); }
+    setSystemInstruction(instruction) { return this.#channel.setSystemInstruction(instruction); }
+    // Schema
+    getSchema() { return this.#channel.getSchema(); }
+    createCollection(name, fields) { return this.#channel.createCollection(name, fields); }
+    alterCollection(name, fields) { return this.#channel.alterCollection(name, fields); }
+    dropCollection(name) { return this.#channel.dropCollection(name); }
+    // Events
+    on(...args) { return this.#channel.on(...args); }
+    off(...args) { return this.#channel.off(...args); }
+    // Reactive primitives
+    object(objectId) {
+        if (this.#closed)
+            throw new Error('Cannot create reactive object: channel is closed');
+        return new ReactiveObjectImpl(this.#channel, objectId);
+    }
+    watch(options) {
+        if (this.#closed)
+            throw new Error('Cannot create reactive watch: channel is closed');
+        return new ReactiveWatchImpl(this.#channel, options);
+    }
+    // Cleanup
+    destroy() {
+        this.#closed = true;
+        for (const unsub of this.#unsubscribers)
+            unsub();
+        this.#unsubscribers.length = 0;
+        this.#channel.destroy();
+    }
+}
+// ---------------------------------------------------------------------------
+// initApp (reactive version)
+// ---------------------------------------------------------------------------
+import { initApp as initBridge } from './client.js';
+/**
+ * Initialize the app and return a reactive channel.
+ *
+ * Sends `rool:ready` to the host, waits for the handshake, and returns
+ * a reactive channel with $state properties (interactions, objectIds)
+ * and reactive primitives (object(), watch()).
+ */
+export async function initApp(timeout) {
+    const bridge = await initBridge(timeout);
+    return new ReactiveAppChannelImpl(bridge);
+}

package/dist/types.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Lightweight types for app-side code.
+ *
+ * These mirror the SDK types but are defined locally so that
+ * @rool-dev/app has zero runtime dependencies for apps.
+ */
+export interface RoolObject {
+    id: string;
+    [key: string]: unknown;
+}
+export interface RoolObjectStat {
+    modifiedAt: number;
+    modifiedBy: string;
+    modifiedByName: string | null;
+}
+export type FieldType = {
+    kind: 'string';
+} | {
+    kind: 'number';
+} | {
+    kind: 'boolean';
+} | {
+    kind: 'array';
+    inner?: FieldType;
+} | {
+    kind: 'maybe';
+    inner: FieldType;
+} | {
+    kind: 'enum';
+    values: string[];
+} | {
+    kind: 'literal';
+    value: string | number | boolean;
+} | {
+    kind: 'ref';
+};
+export interface FieldDef {
+    name: string;
+    type: FieldType;
+}
+export interface CollectionDef {
+    fields: FieldDef[];
+}
+export type SpaceSchema = Record<string, CollectionDef>;
+export interface ToolCall {
+    name: string;
+    input: unknown;
+    result: string;
+}
+export interface Interaction {
+    id: string;
+    timestamp: number;
+    userId: string;
+    userName?: string | null;
+    operation: 'prompt' | 'createObject' | 'updateObject' | 'deleteObjects';
+    input: string;
+    output: string | null;
+    ai: boolean;
+    modifiedObjectIds: string[];
+    toolCalls: ToolCall[];
+    attachments?: string[];
+}
+export type PromptEffort = 'QUICK' | 'STANDARD' | 'REASONING' | 'RESEARCH';
+export interface PromptOptions {
+    objectIds?: string[];
+    responseSchema?: Record<string, unknown>;
+    effort?: PromptEffort;
+    ephemeral?: boolean;
+    readOnly?: boolean;
+}
+export interface FindObjectsOptions {
+    where?: Record<string, unknown>;
+    prompt?: string;
+    limit?: number;
+    objectIds?: string[];
+    order?: 'asc' | 'desc';
+    ephemeral?: boolean;
+}
+export interface CreateObjectOptions {
+    data: Record<string, unknown>;
+    ephemeral?: boolean;
+}
+export interface UpdateObjectOptions {
+    data?: Record<string, unknown>;
+    prompt?: string;
+    ephemeral?: boolean;
+}
+export type ChangeSource = 'local_user' | 'remote_user' | 'remote_agent' | 'system';
+export type RoolUserRole = 'owner' | 'admin' | 'editor' | 'viewer';
+export type LinkAccess = 'none' | 'viewer' | 'editor';
+export interface AppChannelEvents {
+    objectCreated: {
+        objectId: string;
+        object: RoolObject;
+        source: ChangeSource;
+    };
+    objectUpdated: {
+        objectId: string;
+        object: RoolObject;
+        source: ChangeSource;
+    };
+    objectDeleted: {
+        objectId: string;
+        source: ChangeSource;
+    };
+    metadataUpdated: {
+        metadata: Record<string, unknown>;
+        source: ChangeSource;
+    };
+    channelUpdated: {
+        channelId: string;
+        source: ChangeSource;
+    };
+    reset: {
+        source: ChangeSource;
+    };
+    syncError: Error;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,7 @@
+/**
+ * Lightweight types for app-side code.
+ *
+ * These mirror the SDK types but are defined locally so that
+ * @rool-dev/app has zero runtime dependencies for apps.
+ */
+export {};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@rool-dev/app",
+  "version": "0.3.0",
+  "description": "Svelte-first app SDK for Rool — reactive channel over iframe bridge",
+  "packageManager": "pnpm@10.17.1",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./host": {
+      "types": "./dist/host.d.ts",
+      "default": "./dist/host.js"
+    }
+  },
+  "bin": {
+    "rool-app": "./dist/cli/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist && chmod +x dist/cli/index.js && vite build -c build/vite.config.js",
+    "build:host-shell": "vite build -c build/vite.config.js",
+    "dev": "svelte-package -i src -o dist --watch",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "clean": "rm -rf dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://docs.rool.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rool-dev/rool-js.git",
+    "directory": "packages/app"
+  },
+  "keywords": [
+    "rool",
+    "app",
+    "svelte",
+    "iframe",
+    "sandbox",
+    "postmessage"
+  ],
+  "author": {
+    "name": "Rool Limited",
+    "email": "info@rool.dev",
+    "url": "https://rool.dev"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "@rool-dev/sdk": "workspace:*",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "archiver": "^7.0.1",
+    "tailwindcss": "^4.1.18",
+    "vite": "^6.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.0.0",
+    "@types/archiver": "^7.0.0",
+    "@types/node": "^25.4.0",
+    "gridstack": "^12.4.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.9.3"
+  }
+}