@uix-ai/stream 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,128 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+export { Streamdown } from 'streamdown';
+
+interface CodeBlockProps {
+    /**
+     * The code content to display
+     */
+    children: string;
+    /**
+     * Programming language for syntax highlighting
+     */
+    language?: string;
+    /**
+     * Show line numbers
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Show copy button
+     */
+    showCopyButton?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * CodeBlock Component
+ *
+ * Displays code with syntax highlighting and optional features like
+ * line numbers and copy button.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock language="typescript">
+ *   const hello = "world"
+ * </CodeBlock>
+ * ```
+ */
+declare function CodeBlock({ children, language, showLineNumbers, showCopyButton, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface StreamMarkdownProps {
+    /**
+     * The markdown content to render
+     */
+    content: string;
+    /**
+     * Whether content is still streaming
+     * Note: Streamdown handles streaming automatically via Remend
+     */
+    isStreaming?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * StreamMarkdown Component
+ *
+ * Renders markdown content with full streaming support.
+ * Powered by Vercel Streamdown for optimal AI streaming scenarios.
+ *
+ * Features:
+ * - GitHub Flavored Markdown (tables, task lists, strikethrough)
+ * - Syntax highlighted code blocks (Shiki)
+ * - LaTeX math equations (KaTeX)
+ * - Mermaid diagrams
+ * - Automatic self-healing for incomplete markdown (Remend)
+ * - Memoized rendering for performance
+ * - Security hardening (rehype-harden)
+ *
+ * @example
+ * ```tsx
+ * <StreamMarkdown
+ *   content={streamingContent}
+ *   isStreaming={true}
+ * />
+ * ```
+ */
+declare function StreamMarkdown({ content, isStreaming, className, }: StreamMarkdownProps): react_jsx_runtime.JSX.Element;
+
+interface StreamTextProps {
+    /**
+     * The text content to display
+     */
+    children: string;
+    /**
+     * Whether to show typing cursor
+     */
+    showCursor?: boolean;
+    /**
+     * Cursor style
+     */
+    cursorStyle?: 'block' | 'line' | 'underscore';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * StreamText Component
+ *
+ * Simple streaming text display with optional typing cursor.
+ * Use this for plain text streaming without markdown.
+ *
+ * @example
+ * ```tsx
+ * <StreamText showCursor={isStreaming}>
+ *   {streamingText}
+ * </StreamText>
+ * ```
+ */
+declare function StreamText({ children, showCursor, cursorStyle, className, }: StreamTextProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Merge Tailwind CSS classes with clsx
+ */
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Fix incomplete markdown for streaming scenarios
+ * Handles unclosed code blocks, bold, italic, etc.
+ *
+ * @deprecated Streamdown now handles this automatically via Remend.
+ * This function is kept for backward compatibility.
+ */
+declare function healMarkdown(content: string): string;
+
+export { CodeBlock, type CodeBlockProps, StreamMarkdown, type StreamMarkdownProps, StreamText, type StreamTextProps, cn, healMarkdown };

package/dist/index.js

@@ -0,0 +1,132 @@
+// src/components/CodeBlock.tsx
+import * as React from "react";
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function healMarkdown(content) {
+  let result = content;
+  const codeBlockMatches = result.match(/```/g);
+  if (codeBlockMatches && codeBlockMatches.length % 2 !== 0) {
+    result += "\n```";
+  }
+  const inlineCodeMatches = result.match(/(?<!`)`(?!`)/g);
+  if (inlineCodeMatches && inlineCodeMatches.length % 2 !== 0) {
+    result += "`";
+  }
+  const boldMatches = result.match(/\*\*/g);
+  if (boldMatches && boldMatches.length % 2 !== 0) {
+    result += "**";
+  }
+  const italicMatches = result.match(/(?<!\*)\*(?!\*)/g);
+  if (italicMatches && italicMatches.length % 2 !== 0) {
+    result += "*";
+  }
+  return result;
+}
+
+// src/components/CodeBlock.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CodeBlock({
+  children,
+  language,
+  showLineNumbers = false,
+  showCopyButton = true,
+  className
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(children);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  const lines = children.split("\n");
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative group rounded-lg overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-gray-800 text-gray-400 text-xs", children: [
+      /* @__PURE__ */ jsx("span", { children: language || "text" }),
+      showCopyButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "opacity-0 group-hover:opacity-100 transition-opacity px-2 py-1 rounded hover:bg-gray-700",
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-gray-900 overflow-x-auto", children: /* @__PURE__ */ jsx("pre", { className: "p-4 text-sm", children: /* @__PURE__ */ jsx("code", { className: `language-${language || "text"}`, children: showLineNumbers ? /* @__PURE__ */ jsx("table", { className: "border-collapse", children: /* @__PURE__ */ jsx("tbody", { children: lines.map((line, index) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { className: "pr-4 text-gray-500 select-none text-right w-8", children: index + 1 }),
+      /* @__PURE__ */ jsx("td", { className: "text-gray-100", children: line || " " })
+    ] }, index)) }) }) : /* @__PURE__ */ jsx("span", { className: "text-gray-100", children }) }) }) })
+  ] });
+}
+
+// src/components/StreamMarkdown.tsx
+import { Streamdown } from "streamdown";
+import { Streamdown as Streamdown2 } from "streamdown";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function StreamMarkdown({
+  content,
+  isStreaming = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "prose prose-gray max-w-none",
+        // Lucid UI typography styles
+        "prose-headings:text-foreground prose-headings:font-semibold",
+        "prose-p:text-foreground prose-p:leading-relaxed",
+        "prose-a:text-primary-600 prose-a:no-underline hover:prose-a:underline",
+        "prose-strong:text-foreground prose-strong:font-semibold",
+        "prose-code:text-primary-700 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm",
+        "prose-pre:p-0 prose-pre:bg-transparent",
+        "prose-blockquote:border-l-primary-500 prose-blockquote:text-gray-600",
+        "prose-ul:text-foreground prose-ol:text-foreground",
+        "prose-li:marker:text-gray-400",
+        "prose-table:text-sm",
+        "prose-th:bg-gray-50 prose-th:text-foreground prose-th:font-medium",
+        "prose-td:text-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2(Streamdown, { mode: isStreaming ? "streaming" : "static", children: content })
+    }
+  );
+}
+
+// src/components/StreamText.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function StreamText({
+  children,
+  showCursor = false,
+  cursorStyle = "line",
+  className
+}) {
+  const cursorClasses = {
+    block: "inline-block w-2 h-5 bg-primary-500 animate-pulse ml-0.5 align-middle",
+    line: "inline-block w-0.5 h-5 bg-primary-500 animate-pulse ml-0.5 align-middle",
+    underscore: "inline-block w-2 h-0.5 bg-primary-500 animate-pulse ml-0.5 align-bottom"
+  };
+  return /* @__PURE__ */ jsxs2("span", { className: cn("text-foreground", className), children: [
+    children,
+    showCursor && /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: cursorClasses[cursorStyle],
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+export {
+  CodeBlock,
+  StreamMarkdown,
+  StreamText,
+  Streamdown2 as Streamdown,
+  cn,
+  healMarkdown
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeBlock.tsx","../src/utils.ts","../src/components/StreamMarkdown.tsx","../src/components/StreamText.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils'\n\nexport interface CodeBlockProps {\n  /**\n   * The code content to display\n   */\n  children: string\n  /**\n   * Programming language for syntax highlighting\n   */\n  language?: string\n  /**\n   * Show line numbers\n   */\n  showLineNumbers?: boolean\n  /**\n   * Show copy button\n   */\n  showCopyButton?: boolean\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n}\n\n/**\n * CodeBlock Component\n *\n * Displays code with syntax highlighting and optional features like\n * line numbers and copy button.\n *\n * @example\n * ```tsx\n * <CodeBlock language=\"typescript\">\n *   const hello = \"world\"\n * </CodeBlock>\n * ```\n */\nexport function CodeBlock({\n  children,\n  language,\n  showLineNumbers = false,\n  showCopyButton = true,\n  className,\n}: CodeBlockProps) {\n  const [copied, setCopied] = React.useState(false)\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(children)\n    setCopied(true)\n    setTimeout(() => setCopied(false), 2000)\n  }\n\n  const lines = children.split('\\n')\n\n  return (\n    <div className={cn('relative group rounded-lg overflow-hidden', className)}>\n      {/* Header with language label and copy button */}\n      <div className=\"flex items-center justify-between px-4 py-2 bg-gray-800 text-gray-400 text-xs\">\n        <span>{language || 'text'}</span>\n        {showCopyButton && (\n          <button\n            onClick={handleCopy}\n            className=\"opacity-0 group-hover:opacity-100 transition-opacity px-2 py-1 rounded hover:bg-gray-700\"\n          >\n            {copied ? 'Copied!' : 'Copy'}\n          </button>\n        )}\n      </div>\n\n      {/* Code content */}\n      <div className=\"bg-gray-900 overflow-x-auto\">\n        <pre className=\"p-4 text-sm\">\n          <code className={`language-${language || 'text'}`}>\n            {showLineNumbers ? (\n              <table className=\"border-collapse\">\n                <tbody>\n                  {lines.map((line, index) => (\n                    <tr key={index}>\n                      <td className=\"pr-4 text-gray-500 select-none text-right w-8\">\n                        {index + 1}\n                      </td>\n                      <td className=\"text-gray-100\">{line || ' '}</td>\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            ) : (\n              <span className=\"text-gray-100\">{children}</span>\n            )}\n          </code>\n        </pre>\n      </div>\n    </div>\n  )\n}\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Merge Tailwind CSS classes with clsx\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n/**\n * Fix incomplete markdown for streaming scenarios\n * Handles unclosed code blocks, bold, italic, etc.\n *\n * @deprecated Streamdown now handles this automatically via Remend.\n * This function is kept for backward compatibility.\n */\nexport function healMarkdown(content: string): string {\n  let result = content\n\n  // Count backticks for code blocks\n  const codeBlockMatches = result.match(/```/g)\n  if (codeBlockMatches && codeBlockMatches.length % 2 !== 0) {\n    // Unclosed code block - add closing\n    result += '\\n```'\n  }\n\n  // Count inline code backticks\n  const inlineCodeMatches = result.match(/(?<!`)`(?!`)/g)\n  if (inlineCodeMatches && inlineCodeMatches.length % 2 !== 0) {\n    result += '`'\n  }\n\n  // Count bold markers (**)\n  const boldMatches = result.match(/\\*\\*/g)\n  if (boldMatches && boldMatches.length % 2 !== 0) {\n    result += '**'\n  }\n\n  // Count italic markers (single *)\n  // This is tricky because * is also used in lists\n  const italicMatches = result.match(/(?<!\\*)\\*(?!\\*)/g)\n  if (italicMatches && italicMatches.length % 2 !== 0) {\n    result += '*'\n  }\n\n  return result\n}\n","import * as React from 'react'\nimport { Streamdown } from 'streamdown'\nimport { cn } from '../utils'\n\nexport interface StreamMarkdownProps {\n  /**\n   * The markdown content to render\n   */\n  content: string\n  /**\n   * Whether content is still streaming\n   * Note: Streamdown handles streaming automatically via Remend\n   */\n  isStreaming?: boolean\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n}\n\n/**\n * StreamMarkdown Component\n *\n * Renders markdown content with full streaming support.\n * Powered by Vercel Streamdown for optimal AI streaming scenarios.\n *\n * Features:\n * - GitHub Flavored Markdown (tables, task lists, strikethrough)\n * - Syntax highlighted code blocks (Shiki)\n * - LaTeX math equations (KaTeX)\n * - Mermaid diagrams\n * - Automatic self-healing for incomplete markdown (Remend)\n * - Memoized rendering for performance\n * - Security hardening (rehype-harden)\n *\n * @example\n * ```tsx\n * <StreamMarkdown\n *   content={streamingContent}\n *   isStreaming={true}\n * />\n * ```\n */\nexport function StreamMarkdown({\n  content,\n  isStreaming = false,\n  className,\n}: StreamMarkdownProps) {\n  return (\n    <div\n      className={cn(\n        'prose prose-gray max-w-none',\n        // Lucid UI typography styles\n        'prose-headings:text-foreground prose-headings:font-semibold',\n        'prose-p:text-foreground prose-p:leading-relaxed',\n        'prose-a:text-primary-600 prose-a:no-underline hover:prose-a:underline',\n        'prose-strong:text-foreground prose-strong:font-semibold',\n        'prose-code:text-primary-700 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm',\n        'prose-pre:p-0 prose-pre:bg-transparent',\n        'prose-blockquote:border-l-primary-500 prose-blockquote:text-gray-600',\n        'prose-ul:text-foreground prose-ol:text-foreground',\n        'prose-li:marker:text-gray-400',\n        'prose-table:text-sm',\n        'prose-th:bg-gray-50 prose-th:text-foreground prose-th:font-medium',\n        'prose-td:text-foreground',\n        className\n      )}\n    >\n      <Streamdown mode={isStreaming ? 'streaming' : 'static'}>{content}</Streamdown>\n    </div>\n  )\n}\n\n/**\n * Re-export Streamdown component for advanced usage\n */\nexport { Streamdown } from 'streamdown'\n","import * as React from 'react'\nimport { cn } from '../utils'\n\nexport interface StreamTextProps {\n  /**\n   * The text content to display\n   */\n  children: string\n  /**\n   * Whether to show typing cursor\n   */\n  showCursor?: boolean\n  /**\n   * Cursor style\n   */\n  cursorStyle?: 'block' | 'line' | 'underscore'\n  /**\n   * Additional CSS classes\n   */\n  className?: string\n}\n\n/**\n * StreamText Component\n *\n * Simple streaming text display with optional typing cursor.\n * Use this for plain text streaming without markdown.\n *\n * @example\n * ```tsx\n * <StreamText showCursor={isStreaming}>\n *   {streamingText}\n * </StreamText>\n * ```\n */\nexport function StreamText({\n  children,\n  showCursor = false,\n  cursorStyle = 'line',\n  className,\n}: StreamTextProps) {\n  const cursorClasses = {\n    block: 'inline-block w-2 h-5 bg-primary-500 animate-pulse ml-0.5 align-middle',\n    line: 'inline-block w-0.5 h-5 bg-primary-500 animate-pulse ml-0.5 align-middle',\n    underscore: 'inline-block w-2 h-0.5 bg-primary-500 animate-pulse ml-0.5 align-bottom',\n  }\n\n  return (\n    <span className={cn('text-foreground', className)}>\n      {children}\n      {showCursor && (\n        <span\n          className={cursorClasses[cursorStyle]}\n          aria-hidden=\"true\"\n        />\n      )}\n    </span>\n  )\n}\n"],"mappings":"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","names":["Streamdown","jsx","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@uix-ai/stream",
+  "version": "0.0.1",
+  "description": "Streaming content renderer for UIX blocks - powered by Vercel Streamdown",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@uix-ai/core": "workspace:*",
+    "@uix-ai/lucid-tokens": "workspace:*",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
+    "streamdown": "^1.6.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "keywords": [
+    "react",
+    "markdown",
+    "streaming",
+    "uix",
+    "declarative-ui",
+    "self-healing"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Deepractice/UIX.git",
+    "directory": "packages/stream"
+  }
+}