@outkit-dev/react 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -22,6 +22,11 @@ var index_exports = {};
 __export(index_exports, {
   AIRenderer: () => AIRenderer,
   OUTKIT_TOKENS: () => import_renderer2.OUTKIT_TOKENS,
+  completePartialJson: () => completePartialJson,
+  expandWireBlock: () => expandWireBlock,
+  extractCompleteBlocks: () => extractCompleteBlocks,
+  isRenderableBlock: () => isRenderableBlock,
+  parseStreamingBlocks: () => parseStreamingBlocks,
   useBlockStream: () => useBlockStream
 });
 module.exports = __toCommonJS(index_exports);
@@ -223,6 +228,149 @@ var SingleComponent = (0, import_react.memo)(function SingleComponent2({
 
 // src/use-block-stream.ts
 var import_react2 = require("react");
+
+// src/streaming/complete-partial-json.ts
+function completePartialJson(partial) {
+  let inString = false;
+  let escaped = false;
+  const stack = [];
+  for (let i = 0; i < partial.length; i++) {
+    const ch = partial[i];
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\" && inString) {
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === "{") stack.push("}");
+    else if (ch === "[") stack.push("]");
+    else if ((ch === "}" || ch === "]") && stack.length > 0 && stack[stack.length - 1] === ch) {
+      stack.pop();
+    }
+  }
+  let result = partial;
+  if (inString) {
+    if (escaped) result = result.slice(0, -1);
+    const trailingUnicode = result.match(/\\u[0-9a-fA-F]{0,3}$/);
+    if (trailingUnicode) {
+      result = result.slice(0, -trailingUnicode[0].length);
+    }
+    result += '"';
+  }
+  while (stack.length > 0) {
+    result += stack.pop();
+  }
+  return result;
+}
+
+// src/streaming/parse-streaming-blocks.ts
+function expandWireBlock(block) {
+  if ("type" in block && "component" in block) return block;
+  if ("type" in block && block.type === "text") return block;
+  if (typeof block.c === "string" && typeof block.p === "object" && block.p !== null) {
+    return {
+      type: "component",
+      component: block.c,
+      version: block.v ?? "1.0",
+      props: block.p,
+      ...block.f !== void 0 ? { fallback: block.f } : {},
+      ...block.m ? { meta: block.m } : {}
+    };
+  }
+  return block;
+}
+function isRenderableBlock(block) {
+  if (!block || typeof block !== "object") return false;
+  const b = block;
+  if (b.type === "text" && typeof b.content === "string" && b.content.length > 0)
+    return true;
+  if (b.type === "component" && typeof b.component === "string" && b.component.length >= 2 && typeof b.props === "object" && b.props !== null)
+    return true;
+  return false;
+}
+function extractCompleteBlocks(accumulated) {
+  const blocksIdx = accumulated.indexOf('"blocks"');
+  let arrayStart = -1;
+  if (blocksIdx !== -1) {
+    arrayStart = accumulated.indexOf("[", blocksIdx);
+  } else {
+    arrayStart = accumulated.indexOf("[");
+  }
+  if (arrayStart === -1) return [];
+  const content = accumulated.slice(arrayStart + 1);
+  const blocks = [];
+  let depth = 0;
+  let blockStart = -1;
+  let inString = false;
+  let escaped = false;
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i];
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\" && inString) {
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === "{") {
+      if (depth === 0) blockStart = i;
+      depth++;
+    } else if (ch === "}") {
+      depth--;
+      if (depth === 0 && blockStart !== -1) {
+        try {
+          const parsed = JSON.parse(content.slice(blockStart, i + 1));
+          const expanded = expandWireBlock(parsed);
+          if (isRenderableBlock(expanded)) blocks.push(expanded);
+        } catch {
+        }
+        blockStart = -1;
+      }
+    }
+  }
+  return blocks;
+}
+function parseStreamingBlocks(accumulated) {
+  if (!accumulated.trim()) return [];
+  let target = accumulated;
+  const blocksIdx = accumulated.indexOf('"blocks"');
+  if (blocksIdx > 0) {
+    let braceIdx = blocksIdx - 1;
+    while (braceIdx >= 0 && accumulated[braceIdx] !== "{") braceIdx--;
+    if (braceIdx > 0) target = accumulated.slice(braceIdx);
+  }
+  const patched = completePartialJson(target);
+  try {
+    const parsed = JSON.parse(patched);
+    const rawBlocks = parsed?.blocks ?? (Array.isArray(parsed) ? parsed : []);
+    return rawBlocks.map((b) => {
+      if (!b || typeof b !== "object") return b;
+      return expandWireBlock(b);
+    }).filter(isRenderableBlock).map((block) => {
+      if (!("version" in block)) {
+        return Object.assign({}, block, { version: "1.0" });
+      }
+      return block;
+    });
+  } catch {
+    return extractCompleteBlocks(accumulated);
+  }
+}
+
+// src/use-block-stream.ts
 function useBlockStream() {
   const [blocks, setBlocks] = (0, import_react2.useState)([]);
   const [isStreaming, setIsStreaming] = (0, import_react2.useState)(false);
@@ -230,6 +378,9 @@ function useBlockStream() {
   const pendingRef = (0, import_react2.useRef)(null);
   const rafRef = (0, import_react2.useRef)(0);
   const streamingRef = (0, import_react2.useRef)(false);
+  const accumulatedRef = (0, import_react2.useRef)("");
+  const designReceivedRef = (0, import_react2.useRef)(false);
+  const bufferedBlocksRef = (0, import_react2.useRef)(null);
   const flush = (0, import_react2.useCallback)(() => {
     rafRef.current = 0;
     if (pendingRef.current !== null) {
@@ -271,11 +422,50 @@ function useBlockStream() {
       rafRef.current = 0;
     }
     pendingRef.current = null;
+    accumulatedRef.current = "";
+    bufferedBlocksRef.current = null;
+    designReceivedRef.current = false;
     streamingRef.current = false;
     setBlocks([]);
     setIsStreaming(false);
     setDesignState(void 0);
   }, []);
+  const feedChunk = (0, import_react2.useCallback)(
+    (data) => {
+      accumulatedRef.current += data;
+      const parsed = parseStreamingBlocks(accumulatedRef.current);
+      if (parsed.length > 0) {
+        if (designReceivedRef.current) {
+          push(parsed);
+        } else {
+          bufferedBlocksRef.current = parsed;
+        }
+      }
+    },
+    [push]
+  );
+  const feedMeta = (0, import_react2.useCallback)(
+    (tokens) => {
+      designReceivedRef.current = true;
+      setDesignState(tokens);
+      if (bufferedBlocksRef.current) {
+        push(bufferedBlocksRef.current);
+        bufferedBlocksRef.current = null;
+      }
+    },
+    [push]
+  );
+  const feedDone = (0, import_react2.useCallback)(() => {
+    if (accumulatedRef.current) {
+      const parsed = parseStreamingBlocks(accumulatedRef.current);
+      if (parsed.length > 0) {
+        pendingRef.current = parsed;
+      }
+    }
+    accumulatedRef.current = "";
+    bufferedBlocksRef.current = null;
+    complete();
+  }, [complete]);
   (0, import_react2.useEffect)(() => {
     return () => {
       if (rafRef.current) {
@@ -283,7 +473,7 @@ function useBlockStream() {
       }
     };
   }, []);
-  return { blocks, isStreaming, design, push, setDesign, complete, reset };
+  return { blocks, isStreaming, design, feedChunk, feedMeta, feedDone, push, setDesign, complete, reset };
 }
 
 // src/index.ts
@@ -292,5 +482,10 @@ var import_renderer2 = require("@outkit-dev/renderer");
 0 && (module.exports = {
   AIRenderer,
   OUTKIT_TOKENS,
+  completePartialJson,
+  expandWireBlock,
+  extractCompleteBlocks,
+  isRenderableBlock,
+  parseStreamingBlocks,
   useBlockStream
 });

package/dist/index.d.cts

@@ -43,6 +43,12 @@ interface UseBlockStreamReturn {
     isStreaming: boolean;
     /** Design tokens received from the stream's meta event. Pass to <AIRenderer design={design} />. */
     design: Record<string, string> | undefined;
+    /** Append a raw SSE data chunk. Parses accumulated buffer and updates blocks. */
+    feedChunk: (data: string) => void;
+    /** Set design tokens from a meta SSE event. Alias for setDesign. */
+    feedMeta: (tokens: Record<string, string>) => void;
+    /** Signal end of stream. Final parse + flush + mark complete. */
+    feedDone: () => void;
     /** Push a new full blocks array (the latest snapshot). Batched at 60fps. */
     push: (blocks: ContentBlock[]) => void;
     /** Set design tokens (typically from a meta SSE event). */
@@ -71,4 +77,35 @@ interface UseBlockStreamReturn {
  */
 declare function useBlockStream(): UseBlockStreamReturn;
 
-export { AIRenderer, type AIRendererProps, type UseBlockStreamReturn, useBlockStream };
+/**
+ * Close unclosed strings, arrays, and objects so partial JSON can be parsed.
+ *
+ * As the LLM streams a JSON structure token by token, this function patches
+ * the accumulated buffer into valid JSON at every chunk boundary. This lets
+ * content stream character-by-character while remaining parseable.
+ */
+declare function completePartialJson(partial: string): string;
+
+/** Expand a compact wire-format block (c/v/p/f/m) into the full ContentBlock shape. */
+declare function expandWireBlock(block: Record<string, unknown>): Record<string, unknown>;
+/** Check if a parsed object is a renderable block. */
+declare function isRenderableBlock(block: unknown): block is ContentBlock;
+/** Fallback: extract only fully brace-matched block objects from accumulated data. */
+declare function extractCompleteBlocks(accumulated: string): ContentBlock[];
+/**
+ * Parse streaming LLM JSON into renderable blocks.
+ *
+ * Call this with the full accumulated buffer on every chunk. It closes
+ * unclosed strings/arrays/objects via `completePartialJson`, parses the
+ * result, and returns all currently renderable blocks.
+ *
+ * Handles both wire format (`{ c, v, p }`) and expanded format
+ * (`{ type, component, version, props }`). The renderer's `normalizeBlock()`
+ * also handles wire format at render time as a further safety net.
+ *
+ * @param accumulated - The full accumulated raw LLM output so far
+ * @returns Array of renderable ContentBlock objects
+ */
+declare function parseStreamingBlocks(accumulated: string): ContentBlock[];
+
+export { AIRenderer, type AIRendererProps, type UseBlockStreamReturn, completePartialJson, expandWireBlock, extractCompleteBlocks, isRenderableBlock, parseStreamingBlocks, useBlockStream };

package/dist/index.d.ts

@@ -43,6 +43,12 @@ interface UseBlockStreamReturn {
     isStreaming: boolean;
     /** Design tokens received from the stream's meta event. Pass to <AIRenderer design={design} />. */
     design: Record<string, string> | undefined;
+    /** Append a raw SSE data chunk. Parses accumulated buffer and updates blocks. */
+    feedChunk: (data: string) => void;
+    /** Set design tokens from a meta SSE event. Alias for setDesign. */
+    feedMeta: (tokens: Record<string, string>) => void;
+    /** Signal end of stream. Final parse + flush + mark complete. */
+    feedDone: () => void;
     /** Push a new full blocks array (the latest snapshot). Batched at 60fps. */
     push: (blocks: ContentBlock[]) => void;
     /** Set design tokens (typically from a meta SSE event). */
@@ -71,4 +77,35 @@ interface UseBlockStreamReturn {
  */
 declare function useBlockStream(): UseBlockStreamReturn;
 
-export { AIRenderer, type AIRendererProps, type UseBlockStreamReturn, useBlockStream };
+/**
+ * Close unclosed strings, arrays, and objects so partial JSON can be parsed.
+ *
+ * As the LLM streams a JSON structure token by token, this function patches
+ * the accumulated buffer into valid JSON at every chunk boundary. This lets
+ * content stream character-by-character while remaining parseable.
+ */
+declare function completePartialJson(partial: string): string;
+
+/** Expand a compact wire-format block (c/v/p/f/m) into the full ContentBlock shape. */
+declare function expandWireBlock(block: Record<string, unknown>): Record<string, unknown>;
+/** Check if a parsed object is a renderable block. */
+declare function isRenderableBlock(block: unknown): block is ContentBlock;
+/** Fallback: extract only fully brace-matched block objects from accumulated data. */
+declare function extractCompleteBlocks(accumulated: string): ContentBlock[];
+/**
+ * Parse streaming LLM JSON into renderable blocks.
+ *
+ * Call this with the full accumulated buffer on every chunk. It closes
+ * unclosed strings/arrays/objects via `completePartialJson`, parses the
+ * result, and returns all currently renderable blocks.
+ *
+ * Handles both wire format (`{ c, v, p }`) and expanded format
+ * (`{ type, component, version, props }`). The renderer's `normalizeBlock()`
+ * also handles wire format at render time as a further safety net.
+ *
+ * @param accumulated - The full accumulated raw LLM output so far
+ * @returns Array of renderable ContentBlock objects
+ */
+declare function parseStreamingBlocks(accumulated: string): ContentBlock[];
+
+export { AIRenderer, type AIRendererProps, type UseBlockStreamReturn, completePartialJson, expandWireBlock, extractCompleteBlocks, isRenderableBlock, parseStreamingBlocks, useBlockStream };

package/dist/index.js

@@ -195,6 +195,149 @@ var SingleComponent = memo(function SingleComponent2({
 
 // src/use-block-stream.ts
 import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+
+// src/streaming/complete-partial-json.ts
+function completePartialJson(partial) {
+  let inString = false;
+  let escaped = false;
+  const stack = [];
+  for (let i = 0; i < partial.length; i++) {
+    const ch = partial[i];
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\" && inString) {
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === "{") stack.push("}");
+    else if (ch === "[") stack.push("]");
+    else if ((ch === "}" || ch === "]") && stack.length > 0 && stack[stack.length - 1] === ch) {
+      stack.pop();
+    }
+  }
+  let result = partial;
+  if (inString) {
+    if (escaped) result = result.slice(0, -1);
+    const trailingUnicode = result.match(/\\u[0-9a-fA-F]{0,3}$/);
+    if (trailingUnicode) {
+      result = result.slice(0, -trailingUnicode[0].length);
+    }
+    result += '"';
+  }
+  while (stack.length > 0) {
+    result += stack.pop();
+  }
+  return result;
+}
+
+// src/streaming/parse-streaming-blocks.ts
+function expandWireBlock(block) {
+  if ("type" in block && "component" in block) return block;
+  if ("type" in block && block.type === "text") return block;
+  if (typeof block.c === "string" && typeof block.p === "object" && block.p !== null) {
+    return {
+      type: "component",
+      component: block.c,
+      version: block.v ?? "1.0",
+      props: block.p,
+      ...block.f !== void 0 ? { fallback: block.f } : {},
+      ...block.m ? { meta: block.m } : {}
+    };
+  }
+  return block;
+}
+function isRenderableBlock(block) {
+  if (!block || typeof block !== "object") return false;
+  const b = block;
+  if (b.type === "text" && typeof b.content === "string" && b.content.length > 0)
+    return true;
+  if (b.type === "component" && typeof b.component === "string" && b.component.length >= 2 && typeof b.props === "object" && b.props !== null)
+    return true;
+  return false;
+}
+function extractCompleteBlocks(accumulated) {
+  const blocksIdx = accumulated.indexOf('"blocks"');
+  let arrayStart = -1;
+  if (blocksIdx !== -1) {
+    arrayStart = accumulated.indexOf("[", blocksIdx);
+  } else {
+    arrayStart = accumulated.indexOf("[");
+  }
+  if (arrayStart === -1) return [];
+  const content = accumulated.slice(arrayStart + 1);
+  const blocks = [];
+  let depth = 0;
+  let blockStart = -1;
+  let inString = false;
+  let escaped = false;
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i];
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\" && inString) {
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === "{") {
+      if (depth === 0) blockStart = i;
+      depth++;
+    } else if (ch === "}") {
+      depth--;
+      if (depth === 0 && blockStart !== -1) {
+        try {
+          const parsed = JSON.parse(content.slice(blockStart, i + 1));
+          const expanded = expandWireBlock(parsed);
+          if (isRenderableBlock(expanded)) blocks.push(expanded);
+        } catch {
+        }
+        blockStart = -1;
+      }
+    }
+  }
+  return blocks;
+}
+function parseStreamingBlocks(accumulated) {
+  if (!accumulated.trim()) return [];
+  let target = accumulated;
+  const blocksIdx = accumulated.indexOf('"blocks"');
+  if (blocksIdx > 0) {
+    let braceIdx = blocksIdx - 1;
+    while (braceIdx >= 0 && accumulated[braceIdx] !== "{") braceIdx--;
+    if (braceIdx > 0) target = accumulated.slice(braceIdx);
+  }
+  const patched = completePartialJson(target);
+  try {
+    const parsed = JSON.parse(patched);
+    const rawBlocks = parsed?.blocks ?? (Array.isArray(parsed) ? parsed : []);
+    return rawBlocks.map((b) => {
+      if (!b || typeof b !== "object") return b;
+      return expandWireBlock(b);
+    }).filter(isRenderableBlock).map((block) => {
+      if (!("version" in block)) {
+        return Object.assign({}, block, { version: "1.0" });
+      }
+      return block;
+    });
+  } catch {
+    return extractCompleteBlocks(accumulated);
+  }
+}
+
+// src/use-block-stream.ts
 function useBlockStream() {
   const [blocks, setBlocks] = useState([]);
   const [isStreaming, setIsStreaming] = useState(false);
@@ -202,6 +345,9 @@ function useBlockStream() {
   const pendingRef = useRef2(null);
   const rafRef = useRef2(0);
   const streamingRef = useRef2(false);
+  const accumulatedRef = useRef2("");
+  const designReceivedRef = useRef2(false);
+  const bufferedBlocksRef = useRef2(null);
   const flush = useCallback(() => {
     rafRef.current = 0;
     if (pendingRef.current !== null) {
@@ -243,11 +389,50 @@ function useBlockStream() {
       rafRef.current = 0;
     }
     pendingRef.current = null;
+    accumulatedRef.current = "";
+    bufferedBlocksRef.current = null;
+    designReceivedRef.current = false;
     streamingRef.current = false;
     setBlocks([]);
     setIsStreaming(false);
     setDesignState(void 0);
   }, []);
+  const feedChunk = useCallback(
+    (data) => {
+      accumulatedRef.current += data;
+      const parsed = parseStreamingBlocks(accumulatedRef.current);
+      if (parsed.length > 0) {
+        if (designReceivedRef.current) {
+          push(parsed);
+        } else {
+          bufferedBlocksRef.current = parsed;
+        }
+      }
+    },
+    [push]
+  );
+  const feedMeta = useCallback(
+    (tokens) => {
+      designReceivedRef.current = true;
+      setDesignState(tokens);
+      if (bufferedBlocksRef.current) {
+        push(bufferedBlocksRef.current);
+        bufferedBlocksRef.current = null;
+      }
+    },
+    [push]
+  );
+  const feedDone = useCallback(() => {
+    if (accumulatedRef.current) {
+      const parsed = parseStreamingBlocks(accumulatedRef.current);
+      if (parsed.length > 0) {
+        pendingRef.current = parsed;
+      }
+    }
+    accumulatedRef.current = "";
+    bufferedBlocksRef.current = null;
+    complete();
+  }, [complete]);
   useEffect2(() => {
     return () => {
       if (rafRef.current) {
@@ -255,7 +440,7 @@ function useBlockStream() {
       }
     };
   }, []);
-  return { blocks, isStreaming, design, push, setDesign, complete, reset };
+  return { blocks, isStreaming, design, feedChunk, feedMeta, feedDone, push, setDesign, complete, reset };
 }
 
 // src/index.ts
@@ -263,5 +448,10 @@ import { OUTKIT_TOKENS } from "@outkit-dev/renderer";
 export {
   AIRenderer,
   OUTKIT_TOKENS,
+  completePartialJson,
+  expandWireBlock,
+  extractCompleteBlocks,
+  isRenderableBlock,
+  parseStreamingBlocks,
   useBlockStream
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outkit-dev/react",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -16,7 +16,7 @@
     "dist"
   ],
   "dependencies": {
-    "@outkit-dev/renderer": "0.0.3"
+    "@outkit-dev/renderer": "0.0.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"