@slexkit/streamdown 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SlexKit contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,291 @@
+# @slexkit/streamdown
+
+Streamdown custom renderer for Slex fenced UI blocks.
+
+## Install
+
+```sh
+npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom
+```
+
+Import both style sheets in your app:
+
+```ts
+import "@slexkit/theme-shadcn/style.css";
+import "@slexkit/streamdown/style.css";
+```
+
+## Minimal Usage
+
+```tsx
+import { Streamdown } from "streamdown";
+import { slexkitRenderer } from "@slexkit/streamdown";
+
+export function Message({ markdown }: { markdown: string }) {
+  return (
+    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>
+      {markdown}
+    </Streamdown>
+  );
+}
+```
+
+## Vercel AI SDK
+
+```tsx
+import { useChat } from "@ai-sdk/react";
+import { Streamdown } from "streamdown";
+import { slexkitRenderer } from "@slexkit/streamdown";
+
+export function Chat() {
+  const { messages, status } = useChat();
+
+  return messages.map((message) =>
+    message.parts.map((part, index) =>
+      part.type === "text" ? (
+        <Streamdown
+          key={index}
+          isAnimating={status === "streaming"}
+          plugins={{ renderers: [slexkitRenderer] }}
+        >
+          {part.text}
+        </Streamdown>
+      ) : null,
+    ),
+  );
+}
+```
+
+## Model Output
+
+Ask the model to emit Slex only in explicit `slex` fenced blocks. The body is JavaScript-compatible Slex source: a plain object literal with native JS state and expression strings.
+
+````md
+```slex
+{
+  namespace: "status_demo",
+  g: {},
+  layout: {
+    "text:status": { text: "3/4 checks complete" }
+  }
+}
+```
+
+**Status:** 3/4 checks complete
+````
+
+The renderer intentionally handles only `slex` fences by default. It does not sniff generic JavaScript code blocks.
+
+To show the same Slex source inside the embedded playground UI, keep the `slex` fence and switch the renderer mode with fence meta:
+
+````md
+```slex render="playground" title="Editable demo"
+{
+  namespace: "editable_demo",
+  layout: {
+    "text:status": { text: "Rendered inside the playground" }
+  }
+}
+```
+````
+
+You can also make playground display the default for a Markdown surface:
+
+```tsx
+const renderer = createSlexKitRenderer({ renderMode: "playground" });
+```
+
+### Fence meta resolution
+
+Fence meta values resolve to the render mode via a flexible parser:
+
+| Meta value | Resolved mode |
+|------------|--------------|
+| `render="playground"`, `as="playground"`, `mode="playground"` | `playground` |
+| `render="editor"`, `render="workbench"` | `playground` |
+| `render="component"`, `as="component"`, `as="preview"` | `component` |
+| No meta | Fallback to `renderMode` option |
+
+Playground meta also supports `title`, `mode`, `height`/`previewMinHeight`, `webUrl`/`playgroundUrl`, and `pluginVersion`.
+
+## Streaming behavior
+
+During streaming (`isIncomplete: true`), the renderer shows a placeholder instead of attempting to parse partial Slex source. The placeholder defaults to "Rendering SlexKit..." and can be customized:
+
+```tsx
+<SlexKitRenderer
+  code={code}
+  isIncomplete={true}
+  placeholder={<Spinner />}
+/>
+```
+
+State-only blocks (source with `namespace` and `g` but no renderable `layout`) are processed via `ingest()` and return `null` from the component — they update state silently without rendering DOM.
+
+## Trust Boundary
+
+Slex source is JavaScript-compatible object literal syntax with runtime expressions. This package is intended for trusted or controlled model output. Do not treat it as a sandbox for arbitrary third-party Markdown.
+
+For untrusted model output, opt into the secure runtime. The renderer will pass the fence source text into a sandbox frame and route sensitive capabilities through host policy enforced `api.*` methods:
+
+```tsx
+import { createSlexKitRenderer } from "@slexkit/streamdown";
+import "@slexkit/theme-shadcn/style.css";
+import "@slexkit/streamdown/style.css";
+
+const renderer = createSlexKitRenderer({
+  runtime: "secure",
+  securePolicy: {
+    network: {
+      enabled: true,
+      methods: ["GET", "POST"],
+      allowOrigins: ["https://api.example.com"],
+      credentials: "omit",
+      timeoutMs: 15000,
+      maxBodyBytes: 4096,
+    },
+    timer: { enabled: true, maxTimers: 8, minIntervalMs: 16 },
+    animation: { enabled: true },
+    canvas: { enabled: true, maxCanvases: 4, maxPixels: 1048576, allowedContexts: ["2d"] },
+    execution: { heartbeatIntervalMs: 1000, maxUnresponsiveMs: 5000 },
+  },
+  secureFrame: {
+    runtimeUrl: "/slexkit.runtime.js",
+    loadTimeoutMs: 8000,
+  },
+});
+```
+
+The secure renderer uses the main `slexkit.runtime.js` module as its iframe runner. You do not need to ship a second runner file.
+
+Copy the runtime file into your public static directory:
+
+```sh
+npx -y slexkit copy-runtime public/slexkit.runtime.js
+```
+
+The file must be served by your app or CDN with these response headers:
+
+```http
+Access-Control-Allow-Origin: *
+Content-Type: text/javascript
+```
+
+This header is configured in your deployment layer, not inside `createSlexKitRenderer()`. Secure iframes intentionally run with an opaque origin, so the browser treats `runtimeUrl` as a cross-origin ES module import even when the URL is on your own site. Do not add `allow-same-origin` to the iframe sandbox to bypass this; that weakens isolation.
+
+If the iframe cannot load or mount the runtime, SlexKit renders a `role="alert"` diagnostic next to the iframe and logs the same message to `console.error`. Tune the diagnostic delay with `secureFrame.loadTimeoutMs`.
+
+For the full trust boundary and capability contract, see the root package security runtime reference.
+
+Examples:
+
+```js
+// next.config.js
+export default {
+  async headers() {
+    return [
+      {
+        source: "/slexkit.runtime.js",
+        headers: [
+          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: "Content-Type", value: "text/javascript" },
+        ],
+      },
+    ];
+  },
+};
+```
+
+```text
+# Netlify / Cloudflare Pages _headers
+/slexkit.runtime.js
+  Access-Control-Allow-Origin: *
+  Content-Type: text/javascript
+```
+
+If your Markdown surface already owns a page-level SlexKit runtime, pass it into the renderer so block mount/unmount events are delegated to that host:
+
+```tsx
+import {
+  createSlexKitMarkdownRuntimeHost,
+} from "slexkit";
+import { createSlexKitRenderer } from "@slexkit/streamdown";
+
+const runtimeHost = createSlexKitMarkdownRuntimeHost({
+  mode: "secure",
+  policy,
+  secureFrame: {
+    runtimeUrl: "/slexkit.runtime.js",
+  },
+});
+
+const renderer = createSlexKitRenderer({
+  runtimeHost,
+});
+```
+
+## Custom Renderer Options
+
+```tsx
+import { createSlexKitRenderer } from "@slexkit/streamdown";
+
+export const renderer = createSlexKitRenderer({
+  languages: ["slex"],          // Fence language tags to process (default: ["slex"])
+  renderMode: "component",      // "component" | "playground"
+  runtime: "trusted",           // "trusted" | "secure"
+  domain: "my-app",             // Namespace prefix for blocks
+  showChrome: true,             // Show CodeBlockContainer + toolbar (default: true)
+  showSource: false,            // Show source code in a details element
+  className: "my-block",        // Extra CSS class on wrapper
+  useGlobalRuntimeHost: false,  // Use global markdown runtime host
+  playgroundUrl: "/playground.html",  // Custom playground iframe URL
+  placeholder: null,            // ReactNode shown during streaming
+  onError(error, code) {
+    console.error("Failed to render SlexKit", error, code);
+  },
+});
+```
+
+### Standalone component usage
+
+`SlexKitRenderer` is also exported for direct use without Streamdown:
+
+```tsx
+import { SlexKitRenderer } from "@slexkit/streamdown";
+
+function MyBlock() {
+  return (
+    <SlexKitRenderer
+      code={`{
+        namespace: "inline",
+        g: {},
+        layout: { "text:hello": { text: "Hello" } }
+      }`}
+      language="slex"
+      renderMode="component"
+    />
+  );
+}
+```
+
+## Error handling
+
+Parse errors display a diagnostic panel with line, column, excerpt, and detail. Runtime mount errors render a similar alert. The `onError` callback fires for both cases, receiving the error object and the source code string.
+
+## Documentation
+
+- [SlexKit Security runtime](https://github.com/slexkit/slexkit/blob/main/site/content/reference/security/en-US.md)
+- [SlexKit Host integration](https://github.com/slexkit/slexkit/blob/main/site/content/reference/integration/en-US.md)
+- [SlexKit Usage guide](https://github.com/slexkit/slexkit/blob/main/site/content/reference/usage/en-US.md)
+
+## Release validation
+
+The package is considered release-ready when the repository checks pass:
+
+```sh
+bun run build
+bun run test
+bun run smoke:release
+```
+
+Those checks verify the public renderer exports, `style.css` subpath export, trusted rendering, secure frame rendering, runtime-host delegation, state-only fences, domain isolation, embedded playground mode, and package version sync.

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import { type CustomRenderer, type CustomRendererProps } from "streamdown";
+import { type SlexKitMarkdownRuntimeHost, type HostRuntimeAdapter, type HostRuntimePolicy, type SecureFrameOptions } from "slexkit";
+export type SlexKitRendererOptions = {
+    languages?: string | string[];
+    domain?: string;
+    renderMode?: "component" | "playground";
+    runtime?: "trusted" | "secure";
+    runtimeHost?: SlexKitMarkdownRuntimeHost;
+    useGlobalRuntimeHost?: boolean;
+    securePolicy?: HostRuntimePolicy;
+    hostAdapter?: HostRuntimeAdapter;
+    secureFrame?: boolean | SecureFrameOptions;
+    playgroundUrl?: string;
+    showChrome?: boolean;
+    showSource?: boolean;
+    placeholder?: ReactNode;
+    className?: string;
+    onError?: (error: unknown, code: string) => void;
+};
+export type SlexKitRendererProps = CustomRendererProps & Omit<SlexKitRendererOptions, "languages">;
+export declare function SlexKitRenderer({ code, language, isIncomplete, meta, domain, renderMode, runtime, runtimeHost, useGlobalRuntimeHost, securePolicy, hostAdapter, secureFrame, playgroundUrl, showChrome, showSource, placeholder, className, onError, }: SlexKitRendererProps): import("react").DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement> | import("react").FunctionComponentElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    language: string;
+    isIncomplete?: boolean;
+}> | null;
+export declare function createSlexKitRenderer(options?: SlexKitRendererOptions): CustomRenderer;
+export declare const slexkitRenderer: CustomRenderer;

package/dist/index.js

@@ -0,0 +1,297 @@
+import { createElement, Fragment, useEffect, useMemo, useRef, useState, } from "react";
+import { CodeBlockContainer, CodeBlockHeader, } from "streamdown";
+import { ingest, getSlexKitMarkdownRuntimeHost, mount, mountSecureArtifact, parseSlexSource, } from "slexkit";
+const DEFAULT_LANGUAGES = ["slex"];
+const STREAMDOWN_RENDERER_VERSION = "0.2.0";
+const DEFAULT_SECURE_POLICY = {};
+function languageList(languages) {
+    return languages ?? [...DEFAULT_LANGUAGES];
+}
+async function copySource(code) {
+    if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(code);
+        return;
+    }
+    const textarea = document.createElement("textarea");
+    textarea.value = code;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    textarea.remove();
+}
+function defaultPlaceholder() {
+    return createElement("div", { className: "slex-streamdown-placeholder" }, "Rendering SlexKit...");
+}
+function parseFenceOptions(meta = "") {
+    const options = {};
+    for (const match of String(meta).matchAll(/([A-Za-z0-9_-]+)=("([^"]*)"|'([^']*)'|([^\s]+))/g)) {
+        options[match[1]] = match[3] ?? match[4] ?? match[5] ?? "";
+    }
+    return options;
+}
+function resolveRenderMode(meta, fallback) {
+    const options = parseFenceOptions(meta);
+    const value = String(options.render ?? options.as ?? options.mode ?? "").toLowerCase();
+    if (value === "playground" || value === "editor" || value === "workbench")
+        return "playground";
+    if (value === "component" || value === "render" || value === "preview")
+        return "component";
+    return fallback;
+}
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+function errorDiagnostic(error) {
+    if (!isRecord(error))
+        return null;
+    const diagnostic = error.diagnostic;
+    if (!isRecord(diagnostic))
+        return null;
+    if (typeof diagnostic.message !== "string" ||
+        typeof diagnostic.line !== "number" ||
+        typeof diagnostic.column !== "number" ||
+        typeof diagnostic.excerpt !== "string") {
+        return null;
+    }
+    return {
+        message: diagnostic.message,
+        line: diagnostic.line,
+        column: diagnostic.column,
+        detail: typeof diagnostic.detail === "string" ? diagnostic.detail : undefined,
+        excerpt: diagnostic.excerpt,
+    };
+}
+function renderError(error) {
+    const diagnostic = errorDiagnostic(error);
+    if (!diagnostic) {
+        return createElement("div", { className: "slex-streamdown-error", role: "alert" }, createElement("div", { className: "slex-streamdown-error-title" }, "Failed to render SlexKit"), createElement("div", { className: "slex-streamdown-error-message" }, errorMessage(error)));
+    }
+    return createElement("div", { className: "slex-streamdown-error", role: "alert" }, createElement("div", { className: "slex-streamdown-error-title" }, "SlexKit syntax error"), createElement("div", { className: "slex-streamdown-error-message" }, diagnostic.message), createElement("div", { className: "slex-streamdown-error-location" }, `Line ${diagnostic.line}, column ${diagnostic.column}`), diagnostic.detail
+        ? createElement("div", { className: "slex-streamdown-error-detail" }, diagnostic.detail)
+        : null, createElement("pre", { className: "slex-streamdown-error-excerpt" }, diagnostic.excerpt));
+}
+function isRecord(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function isRenderableSource(value) {
+    if (!isRecord(value))
+        return false;
+    if ("layout" in value)
+        return isRecord(value.layout) && Object.keys(value.layout).length > 0;
+    if ("namespace" in value || "g" in value)
+        return false;
+    return Object.keys(value).some((key) => key.includes(":"));
+}
+function isStateOnlySource(value) {
+    return isRecord(value)
+        && !isRenderableSource(value)
+        && ("slex" in value || "namespace" in value || "g" in value);
+}
+function scopedSlexKitInput(code, source, domain) {
+    if (!domain || !isRecord(source) || !("slex" in source || "namespace" in source || "g" in source || "layout" in source))
+        return code;
+    const namespace = String(source.namespace || "default");
+    if (!("layout" in source) && isRenderableSource(source)) {
+        const { slex, namespace: _namespace, g, layout: _layout, ...bareLayout } = source;
+        return {
+            ...(typeof slex === "string" ? { slex } : {}),
+            namespace: `${domain}::${namespace}`,
+            ...(isRecord(g) ? { g } : {}),
+            layout: bareLayout,
+        };
+    }
+    return {
+        ...source,
+        namespace: `${domain}::${namespace}`,
+    };
+}
+function playgroundOption(meta, key, fallback = "") {
+    return parseFenceOptions(meta)[key] || fallback;
+}
+function playgroundSlexKitInput(code, meta, domain, playgroundUrl) {
+    const options = parseFenceOptions(meta);
+    const namespace = domain || "streamdown";
+    return {
+        slex: "0.1",
+        namespace: `${namespace}::playground`,
+        g: {},
+        layout: {
+            "playground:inline": {
+                domain: `${namespace}::playground`,
+                mode: options.mode || options.webMode || "render",
+                playgroundUrl: options.webUrl || options.playgroundUrl || playgroundUrl || "/playground.html",
+                pluginVersion: options.pluginVersion || STREAMDOWN_RENDERER_VERSION,
+                previewMinHeight: playgroundOption(meta, "previewMinHeight", playgroundOption(meta, "height", "360px")),
+                source: code,
+                sourceType: "slex",
+                title: playgroundOption(meta, "title", "SlexKit playground"),
+            },
+        },
+    };
+}
+function PlaygroundShell({ code, domain, meta, playgroundUrl, }) {
+    const hostRef = useRef(null);
+    const [loadError, setLoadError] = useState(null);
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        host.replaceChildren();
+        setLoadError(null);
+        let active = true;
+        let cleanup;
+        void import("slexkit/tooling")
+            .then(() => {
+            if (!active)
+                return;
+            cleanup = mount(playgroundSlexKitInput(code, meta, domain, playgroundUrl), host);
+        })
+            .catch((err) => {
+            if (active)
+                setLoadError(err);
+        });
+        return () => {
+            active = false;
+            cleanup?.();
+            host.replaceChildren();
+        };
+    }, [code, domain, meta, playgroundUrl]);
+    return createElement(Fragment, null, loadError ? renderError(loadError) : null, createElement("div", { ref: hostRef }));
+}
+export function SlexKitRenderer({ code, language, isIncomplete, meta, domain, renderMode = "component", runtime = "trusted", runtimeHost, useGlobalRuntimeHost = false, securePolicy = DEFAULT_SECURE_POLICY, hostAdapter, secureFrame = true, playgroundUrl, showChrome = true, showSource = false, placeholder, className, onError, }) {
+    const hostRef = useRef(null);
+    const [error, setError] = useState(null);
+    const isSecureRuntime = runtime === "secure";
+    const activeRuntimeHost = runtimeHost ?? (useGlobalRuntimeHost ? getSlexKitMarkdownRuntimeHost() : undefined);
+    const activeRuntimeMode = activeRuntimeHost?.getMode();
+    const delegatesToSecureHost = activeRuntimeMode === "secure";
+    const parsedSource = useMemo(() => (isIncomplete || isSecureRuntime || delegatesToSecureHost ? undefined : parseSlexSource(code)), [code, delegatesToSecureHost, isIncomplete, isSecureRuntime]);
+    const sourceKind = useMemo(() => {
+        if (isIncomplete)
+            return "renderable";
+        if (isSecureRuntime || delegatesToSecureHost)
+            return "renderable";
+        return parsedSource?.ok && isStateOnlySource(parsedSource.value) ? "state-only" : "renderable";
+    }, [delegatesToSecureHost, isIncomplete, isSecureRuntime, parsedSource]);
+    const isStateOnly = sourceKind === "state-only";
+    const runtimeInput = useMemo(() => isSecureRuntime || delegatesToSecureHost ? String(code) : scopedSlexKitInput(code, parsedSource?.ok ? parsedSource.value : undefined, domain), [code, delegatesToSecureHost, domain, isSecureRuntime, parsedSource]);
+    const effectiveRenderMode = useMemo(() => resolveRenderMode(meta, renderMode), [meta, renderMode]);
+    const parseError = parsedSource && !parsedSource.ok ? parsedSource.error : null;
+    const displayError = parseError ?? error;
+    useEffect(() => {
+        setError(null);
+        if (isIncomplete)
+            return;
+        if (parseError) {
+            onError?.(parseError, String(code));
+            return;
+        }
+        if (isStateOnly) {
+            if (!ingest(runtimeInput)) {
+                const err = new Error("Failed to parse Slex state block.");
+                setError(err);
+                onError?.(err, String(code));
+            }
+            return;
+        }
+        if (effectiveRenderMode === "playground")
+            return;
+        const host = hostRef.current;
+        if (!host)
+            return;
+        host.replaceChildren();
+        let cleanup;
+        try {
+            cleanup = activeRuntimeHost
+                ? activeRuntimeHost.mountBlock({
+                    artifactId: domain,
+                    source: runtimeInput,
+                    container: host,
+                    theme: undefined,
+                })
+                : isSecureRuntime
+                    ? mountSecureArtifact(runtimeInput, host, {
+                        policy: securePolicy,
+                        hostAdapter,
+                        frame: secureFrame,
+                    })
+                    : mount(runtimeInput, host);
+            if (!host.querySelector(".slexkit-root")) {
+                if (delegatesToSecureHost)
+                    return;
+                if (isSecureRuntime && host.querySelector("iframe[data-slexkit-secure-frame='true']"))
+                    return;
+                throw new Error("SlexKit did not render a root. Check the source syntax.");
+            }
+        }
+        catch (err) {
+            try {
+                cleanup?.();
+            }
+            finally {
+                host.replaceChildren();
+            }
+            setError(err);
+            onError?.(err, String(code));
+        }
+        return () => {
+            cleanup?.();
+            host.replaceChildren();
+        };
+    }, [
+        code,
+        activeRuntimeHost,
+        delegatesToSecureHost,
+        effectiveRenderMode,
+        hostAdapter,
+        isIncomplete,
+        isSecureRuntime,
+        isStateOnly,
+        onError,
+        parseError,
+        runtimeInput,
+        secureFrame,
+        securePolicy,
+    ]);
+    if (isStateOnly)
+        return null;
+    const body = createElement("div", { className: "slex-streamdown-body" }, isIncomplete ? (placeholder ?? defaultPlaceholder()) : null, !isIncomplete && effectiveRenderMode === "playground"
+        ? createElement(PlaygroundShell, {
+            code: String(code),
+            domain,
+            meta,
+            playgroundUrl,
+        })
+        : createElement(Fragment, null, displayError ? renderError(displayError) : null, createElement("div", { ref: hostRef })));
+    if (!showChrome) {
+        return createElement("div", {
+            className: ["slex-streamdown-block", className].filter(Boolean).join(" "),
+        }, body, showSource
+            ? createElement("details", { className: "slex-streamdown-source" }, createElement("summary", null, "Source"), createElement("pre", null, createElement("code", null, code)))
+            : null);
+    }
+    return createElement(CodeBlockContainer, {
+        className: ["slex-streamdown-block", className].filter(Boolean).join(" "),
+        isIncomplete,
+        language,
+    }, createElement(CodeBlockHeader, { language }), createElement("div", { className: "slex-streamdown-toolbar" }, createElement("button", {
+        className: "slex-streamdown-copy",
+        onClick: () => {
+            void copySource(code);
+        },
+        type: "button",
+    }, "Copy source")), body, showSource
+        ? createElement("details", { className: "slex-streamdown-source" }, createElement("summary", null, "Source"), createElement("pre", null, createElement("code", null, code)))
+        : null);
+}
+export function createSlexKitRenderer(options = {}) {
+    const { languages, ...rendererOptions } = options;
+    return {
+        language: languageList(languages),
+        component: (props) => createElement(SlexKitRenderer, { ...props, ...rendererOptions }),
+    };
+}
+export const slexkitRenderer = createSlexKitRenderer();

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@slexkit/streamdown",
+  "version": "0.2.0",
+  "description": "Streamdown custom renderer for SlexKit fenced UI blocks.",
+  "author": "SlexKit contributors",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/slexkit/slexkit.git",
+    "directory": "packages/streamdown"
+  },
+  "homepage": "https://github.com/slexkit/slexkit/tree/main/packages/streamdown#readme",
+  "bugs": {
+    "url": "https://github.com/slexkit/slexkit/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./style.css"
+  },
+  "files": [
+    "dist/",
+    "style.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./style.css"
+  ],
+  "scripts": {
+    "build": "bun run scripts/build.ts"
+  },
+  "keywords": [
+    "slexkit",
+    "streamdown",
+    "react",
+    "markdown",
+    "renderer"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "slexkit": "^0.2.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "streamdown": "^2.5.0"
+  },
+  "peerDependenciesMeta": {
+    "slexkit": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "slexkit": "file:../..",
+    "streamdown": "^2.5.0"
+  }
+}

package/style.css

@@ -0,0 +1,95 @@
+.slex-streamdown-block {
+  margin-block: 0.75rem;
+}
+
+.slex-streamdown-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem 0;
+}
+
+.slex-streamdown-copy {
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+  line-height: 1;
+  padding: 0.4rem 0.6rem;
+}
+
+.slex-streamdown-copy:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.slex-streamdown-body {
+  padding: 0.75rem;
+}
+
+.slex-streamdown-placeholder {
+  border: 1px dashed var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--muted-foreground);
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.slex-streamdown-error {
+  border: 1px dashed var(--destructive);
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--destructive);
+  padding: 1rem;
+  text-align: left;
+}
+
+.slex-streamdown-error-title {
+  font-weight: 700;
+}
+
+.slex-streamdown-error-message {
+  margin-top: 0.5rem;
+  color: var(--foreground);
+  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.slex-streamdown-error-location,
+.slex-streamdown-error-detail {
+  margin-top: 0.5rem;
+  color: var(--muted-foreground);
+  font-size: 0.8125rem;
+}
+
+.slex-streamdown-error-excerpt {
+  overflow: auto;
+  margin: 0.75rem 0 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: var(--background);
+  color: var(--foreground);
+  padding: 0.75rem;
+  font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  white-space: pre;
+}
+
+.slex-streamdown-source {
+  border-top: 1px solid var(--border);
+  padding: 0.5rem 0.75rem 0.75rem;
+}
+
+.slex-streamdown-source summary {
+  color: var(--muted-foreground);
+  cursor: pointer;
+  font-size: 0.75rem;
+}
+
+.slex-streamdown-source pre {
+  margin: 0.5rem 0 0;
+  overflow: auto;
+}