@json-render/svelte 0.6.1

package/dist/streaming.svelte.js

@@ -0,0 +1,404 @@
+import { setByPath, getByPath, removeByPath, createMixedStreamParser, applySpecPatch, } from "@json-render/core";
+function parseLine(line) {
+    try {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith("//")) {
+            return null;
+        }
+        const parsed = JSON.parse(trimmed);
+        if (parsed.__meta === "usage") {
+            return {
+                type: "usage",
+                usage: {
+                    promptTokens: parsed.promptTokens ?? 0,
+                    completionTokens: parsed.completionTokens ?? 0,
+                    totalTokens: parsed.totalTokens ?? 0,
+                },
+            };
+        }
+        return { type: "patch", patch: parsed };
+    }
+    catch {
+        return null;
+    }
+}
+function setSpecValue(newSpec, path, value) {
+    if (path === "/root") {
+        newSpec.root = value;
+        return;
+    }
+    if (path === "/state") {
+        newSpec.state = value;
+        return;
+    }
+    if (path.startsWith("/state/")) {
+        if (!newSpec.state)
+            newSpec.state = {};
+        const statePath = path.slice("/state".length);
+        setByPath(newSpec.state, statePath, value);
+        return;
+    }
+    if (path.startsWith("/elements/")) {
+        const pathParts = path.slice("/elements/".length).split("/");
+        const elementKey = pathParts[0];
+        if (!elementKey)
+            return;
+        if (pathParts.length === 1) {
+            newSpec.elements[elementKey] = value;
+        }
+        else {
+            const element = newSpec.elements[elementKey];
+            if (element) {
+                const propPath = "/" + pathParts.slice(1).join("/");
+                const newElement = { ...element };
+                setByPath(newElement, propPath, value);
+                newSpec.elements[elementKey] = newElement;
+            }
+        }
+    }
+}
+function removeSpecValue(newSpec, path) {
+    if (path === "/state") {
+        delete newSpec.state;
+        return;
+    }
+    if (path.startsWith("/state/") && newSpec.state) {
+        const statePath = path.slice("/state".length);
+        removeByPath(newSpec.state, statePath);
+        return;
+    }
+    if (path.startsWith("/elements/")) {
+        const pathParts = path.slice("/elements/".length).split("/");
+        const elementKey = pathParts[0];
+        if (!elementKey)
+            return;
+        if (pathParts.length === 1) {
+            const { [elementKey]: _, ...rest } = newSpec.elements;
+            newSpec.elements = rest;
+        }
+        else {
+            const element = newSpec.elements[elementKey];
+            if (element) {
+                const propPath = "/" + pathParts.slice(1).join("/");
+                const newElement = { ...element };
+                removeByPath(newElement, propPath);
+                newSpec.elements[elementKey] = newElement;
+            }
+        }
+    }
+}
+function getSpecValue(spec, path) {
+    if (path === "/root")
+        return spec.root;
+    if (path === "/state")
+        return spec.state;
+    if (path.startsWith("/state/") && spec.state) {
+        const statePath = path.slice("/state".length);
+        return getByPath(spec.state, statePath);
+    }
+    return getByPath(spec, path);
+}
+function applyPatch(spec, patch) {
+    const newSpec = {
+        ...spec,
+        elements: { ...spec.elements },
+        ...(spec.state ? { state: { ...spec.state } } : {}),
+    };
+    switch (patch.op) {
+        case "add":
+        case "replace": {
+            setSpecValue(newSpec, patch.path, patch.value);
+            break;
+        }
+        case "remove": {
+            removeSpecValue(newSpec, patch.path);
+            break;
+        }
+        case "move": {
+            if (!patch.from)
+                break;
+            const moveValue = getSpecValue(newSpec, patch.from);
+            removeSpecValue(newSpec, patch.from);
+            setSpecValue(newSpec, patch.path, moveValue);
+            break;
+        }
+        case "copy": {
+            if (!patch.from)
+                break;
+            const copyValue = getSpecValue(newSpec, patch.from);
+            setSpecValue(newSpec, patch.path, copyValue);
+            break;
+        }
+        case "test": {
+            break;
+        }
+    }
+    return newSpec;
+}
+/**
+ * Create a streaming UI generator using Svelte 5 $state
+ */
+export function createUIStream({ api, onComplete, onError, }) {
+    let spec = $state(null);
+    let isStreaming = $state(false);
+    let error = $state(null);
+    let usage = $state(null);
+    let rawLines = $state([]);
+    let abortController = null;
+    const clear = () => {
+        spec = null;
+        error = null;
+        usage = null;
+        rawLines = [];
+    };
+    const send = async (prompt, context) => {
+        abortController?.abort();
+        abortController = new AbortController();
+        isStreaming = true;
+        error = null;
+        usage = null;
+        rawLines = [];
+        const previousSpec = context?.previousSpec;
+        let currentSpec = previousSpec && previousSpec.root
+            ? { ...previousSpec, elements: { ...previousSpec.elements } }
+            : { root: "", elements: {} };
+        spec = currentSpec;
+        try {
+            const response = await fetch(api, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ prompt, context, currentSpec }),
+                signal: abortController.signal,
+            });
+            if (!response.ok) {
+                let errorMessage = `HTTP error: ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    if (errorData.message)
+                        errorMessage = errorData.message;
+                    else if (errorData.error)
+                        errorMessage = errorData.error;
+                }
+                catch {
+                    // Ignore
+                }
+                throw new Error(errorMessage);
+            }
+            const reader = response.body?.getReader();
+            if (!reader)
+                throw new Error("No response body");
+            const decoder = new TextDecoder();
+            let buffer = "";
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split("\n");
+                buffer = lines.pop() ?? "";
+                for (const line of lines) {
+                    const trimmed = line.trim();
+                    if (!trimmed)
+                        continue;
+                    const result = parseLine(trimmed);
+                    if (!result)
+                        continue;
+                    if (result.type === "usage") {
+                        usage = result.usage;
+                    }
+                    else {
+                        rawLines = [...rawLines, trimmed];
+                        currentSpec = applyPatch(currentSpec, result.patch);
+                        spec = { ...currentSpec };
+                    }
+                }
+            }
+            if (buffer.trim()) {
+                const trimmed = buffer.trim();
+                const result = parseLine(trimmed);
+                if (result) {
+                    if (result.type === "usage") {
+                        usage = result.usage;
+                    }
+                    else {
+                        rawLines = [...rawLines, trimmed];
+                        currentSpec = applyPatch(currentSpec, result.patch);
+                        spec = { ...currentSpec };
+                    }
+                }
+            }
+            onComplete?.(currentSpec);
+        }
+        catch (err) {
+            if (err.name === "AbortError")
+                return;
+            const e = err instanceof Error ? err : new Error(String(err));
+            error = e;
+            onError?.(e);
+        }
+        finally {
+            isStreaming = false;
+        }
+    };
+    return {
+        get spec() {
+            return spec;
+        },
+        get isStreaming() {
+            return isStreaming;
+        },
+        get error() {
+            return error;
+        },
+        get usage() {
+            return usage;
+        },
+        get rawLines() {
+            return rawLines;
+        },
+        send,
+        clear,
+    };
+}
+let chatMessageIdCounter = 0;
+function generateChatId() {
+    if (typeof crypto !== "undefined" &&
+        typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    chatMessageIdCounter += 1;
+    return `msg-${Date.now()}-${chatMessageIdCounter}`;
+}
+/**
+ * Create a chat UI with streaming support
+ */
+export function createChatUI({ api, onComplete, onError, }) {
+    let messages = $state([]);
+    let isStreaming = $state(false);
+    let error = $state(null);
+    let abortController = null;
+    const clear = () => {
+        messages = [];
+        error = null;
+    };
+    const send = async (text) => {
+        if (!text.trim())
+            return;
+        abortController?.abort();
+        abortController = new AbortController();
+        const userMessage = {
+            id: generateChatId(),
+            role: "user",
+            text: text.trim(),
+            spec: null,
+        };
+        const assistantId = generateChatId();
+        const assistantMessage = {
+            id: assistantId,
+            role: "assistant",
+            text: "",
+            spec: null,
+        };
+        messages = [...messages, userMessage, assistantMessage];
+        isStreaming = true;
+        error = null;
+        const historyForApi = messages
+            .slice(0, -1)
+            .map((m) => ({ role: m.role, content: m.text }));
+        let accumulatedText = "";
+        let currentSpec = { root: "", elements: {} };
+        let hasSpec = false;
+        try {
+            const response = await fetch(api, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ messages: historyForApi }),
+                signal: abortController.signal,
+            });
+            if (!response.ok) {
+                let errorMessage = `HTTP error: ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    if (errorData.message)
+                        errorMessage = errorData.message;
+                    else if (errorData.error)
+                        errorMessage = errorData.error;
+                }
+                catch {
+                    // Ignore
+                }
+                throw new Error(errorMessage);
+            }
+            const reader = response.body?.getReader();
+            if (!reader)
+                throw new Error("No response body");
+            const decoder = new TextDecoder();
+            const parser = createMixedStreamParser({
+                onPatch(patch) {
+                    hasSpec = true;
+                    applySpecPatch(currentSpec, patch);
+                    messages = messages.map((m) => m.id === assistantId
+                        ? {
+                            ...m,
+                            spec: {
+                                root: currentSpec.root,
+                                elements: { ...currentSpec.elements },
+                                ...(currentSpec.state
+                                    ? { state: { ...currentSpec.state } }
+                                    : {}),
+                            },
+                        }
+                        : m);
+                },
+                onText(line) {
+                    accumulatedText += (accumulatedText ? "\n" : "") + line;
+                    messages = messages.map((m) => m.id === assistantId ? { ...m, text: accumulatedText } : m);
+                },
+            });
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                parser.push(decoder.decode(value, { stream: true }));
+            }
+            parser.flush();
+            const finalMessage = {
+                id: assistantId,
+                role: "assistant",
+                text: accumulatedText,
+                spec: hasSpec
+                    ? {
+                        root: currentSpec.root,
+                        elements: { ...currentSpec.elements },
+                        ...(currentSpec.state ? { state: { ...currentSpec.state } } : {}),
+                    }
+                    : null,
+            };
+            onComplete?.(finalMessage);
+        }
+        catch (err) {
+            if (err.name === "AbortError")
+                return;
+            const e = err instanceof Error ? err : new Error(String(err));
+            error = e;
+            messages = messages.filter((m) => m.id !== assistantId || m.text.length > 0);
+            onError?.(e);
+        }
+        finally {
+            isStreaming = false;
+        }
+    };
+    return {
+        get messages() {
+            return messages;
+        },
+        get isStreaming() {
+            return isStreaming;
+        },
+        get error() {
+            return error;
+        },
+        send,
+        clear,
+    };
+}

package/dist/utils.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Spec, FlatElement } from "@json-render/core";
+/**
+ * A single part from an AI response. Minimal structural type for library helpers.
+ */
+export interface DataPart {
+    type: string;
+    text?: string;
+    data?: unknown;
+}
+/**
+ * Convert a flat element list to a Spec.
+ * Input elements use key/parentKey to establish identity and relationships.
+ * Output spec uses the map-based format where key is the map entry key
+ * and parent-child relationships are expressed through children arrays.
+ */
+export declare function flatToTree(elements: FlatElement[]): Spec;
+/**
+ * Build a `Spec` by replaying all spec data parts from a message's parts array.
+ * Returns `null` if no spec data parts are present.
+ */
+export declare function buildSpecFromParts(parts: DataPart[], snapshot?: boolean): Spec | null;
+/**
+ * Extract and join all text content from a message's parts array.
+ */
+export declare function getTextFromParts(parts: DataPart[]): string;
+//# sourceMappingURL=utils.svelte.d.ts.map

package/dist/utils.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.svelte.d.ts","sourceRoot":"","sources":["../src/utils.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,IAAI,EAEJ,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAO3B;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,CA8BxD;AAmBD;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,QAAQ,EAAE,EACjB,QAAQ,UAAO,GACd,IAAI,GAAG,IAAI,CA0Bb;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,CAS1D"}

package/dist/utils.svelte.js

@@ -0,0 +1,92 @@
+import { applySpecPatch, nestedToFlat, SPEC_DATA_PART_TYPE, } from "@json-render/core";
+/**
+ * Convert a flat element list to a Spec.
+ * Input elements use key/parentKey to establish identity and relationships.
+ * Output spec uses the map-based format where key is the map entry key
+ * and parent-child relationships are expressed through children arrays.
+ */
+export function flatToTree(elements) {
+    const elementMap = {};
+    let root = "";
+    // First pass: add all elements to map
+    for (const element of elements) {
+        elementMap[element.key] = {
+            type: element.type,
+            props: element.props,
+            children: [],
+            visible: element.visible,
+        };
+    }
+    // Second pass: build parent-child relationships
+    for (const element of elements) {
+        if (element.parentKey) {
+            const parent = elementMap[element.parentKey];
+            if (parent) {
+                if (!parent.children) {
+                    parent.children = [];
+                }
+                parent.children.push(element.key);
+            }
+        }
+        else {
+            root = element.key;
+        }
+    }
+    return { root, elements: elementMap };
+}
+/**
+ * Type guard that validates a data part payload looks like a valid SpecDataPart.
+ */
+function isSpecDataPart(data) {
+    if (typeof data !== "object" || data === null)
+        return false;
+    const obj = data;
+    switch (obj.type) {
+        case "patch":
+            return typeof obj.patch === "object" && obj.patch !== null;
+        case "flat":
+        case "nested":
+            return typeof obj.spec === "object" && obj.spec !== null;
+        default:
+            return false;
+    }
+}
+/**
+ * Build a `Spec` by replaying all spec data parts from a message's parts array.
+ * Returns `null` if no spec data parts are present.
+ */
+export function buildSpecFromParts(parts, snapshot = true) {
+    const spec = { root: "", elements: {} };
+    let hasSpec = false;
+    for (const part of parts) {
+        if (part.type === SPEC_DATA_PART_TYPE) {
+            if (!isSpecDataPart(part.data))
+                continue;
+            const payload = part.data;
+            if (payload.type === "patch") {
+                hasSpec = true;
+                applySpecPatch(spec, snapshot ? $state.snapshot(payload.patch) : payload.patch);
+            }
+            else if (payload.type === "flat") {
+                hasSpec = true;
+                Object.assign(spec, payload.spec);
+            }
+            else if (payload.type === "nested") {
+                hasSpec = true;
+                const flat = nestedToFlat(payload.spec);
+                Object.assign(spec, flat);
+            }
+        }
+    }
+    return hasSpec ? spec : null;
+}
+/**
+ * Extract and join all text content from a message's parts array.
+ */
+export function getTextFromParts(parts) {
+    return parts
+        .filter((p) => p.type === "text" && typeof p.text === "string")
+        .map((p) => p.text.trim())
+        .filter(Boolean)
+        .join("\n\n");
+}