npm - mdx-artifacts - Versions diffs - 0.1.0 - Mend

mdx-artifacts 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/LICENSE +21 -0
package/README.md +234 -0
package/README.zh-CN.md +129 -0
package/agents/AGENTS.snippet.md +13 -0
package/artifact-docs/examples/commentable-feedback.mdx +126 -0
package/artifact-docs/examples/decision-matrix.mdx +80 -0
package/artifact-docs/examples/layout-composition.mdx +216 -0
package/artifact-docs/examples/streamlit-style-mixed.mdx +183 -0
package/dist/lib/cli/artifact-state.d.ts +27 -0
package/dist/lib/cli/artifact-state.js +115 -0
package/dist/lib/cli/build.d.ts +1 -0
package/dist/lib/cli/build.js +25 -0
package/dist/lib/cli/components.d.ts +3 -0
package/dist/lib/cli/components.js +58 -0
package/dist/lib/cli/config.d.ts +2 -0
package/dist/lib/cli/config.js +36 -0
package/dist/lib/cli/dev.d.ts +1 -0
package/dist/lib/cli/dev.js +24 -0
package/dist/lib/cli/index.d.ts +2 -0
package/dist/lib/cli/index.js +69 -0
package/dist/lib/cli/review.d.ts +33 -0
package/dist/lib/cli/review.js +390 -0
package/dist/lib/cli/scaffold.d.ts +1 -0
package/dist/lib/cli/scaffold.js +56 -0
package/dist/lib/cli/types.d.ts +7 -0
package/dist/lib/cli/types.js +1 -0
package/dist/lib/cli/validate.d.ts +6 -0
package/dist/lib/cli/validate.js +79 -0
package/dist/lib/cli/vite-artifact.d.ts +13 -0
package/dist/lib/cli/vite-artifact.js +213 -0
package/dist/lib/react/components/AnnotatedCode.d.ts +19 -0
package/dist/lib/react/components/AnnotatedCode.js +30 -0
package/dist/lib/react/components/ArtifactState.d.ts +68 -0
package/dist/lib/react/components/ArtifactState.js +286 -0
package/dist/lib/react/components/Callout.d.ts +9 -0
package/dist/lib/react/components/Callout.js +21 -0
package/dist/lib/react/components/CodeBlock.d.ts +10 -0
package/dist/lib/react/components/CodeBlock.js +28 -0
package/dist/lib/react/components/Comments.d.ts +53 -0
package/dist/lib/react/components/Comments.js +613 -0
package/dist/lib/react/components/ComparisonSet.d.ts +24 -0
package/dist/lib/react/components/ComparisonSet.js +30 -0
package/dist/lib/react/components/DecisionMatrix.d.ts +16 -0
package/dist/lib/react/components/DecisionMatrix.js +27 -0
package/dist/lib/react/components/DiffBlock.d.ts +15 -0
package/dist/lib/react/components/DiffBlock.js +24 -0
package/dist/lib/react/components/ExportPanel.d.ts +7 -0
package/dist/lib/react/components/ExportPanel.js +84 -0
package/dist/lib/react/components/InlineText.d.ts +9 -0
package/dist/lib/react/components/InlineText.js +18 -0
package/dist/lib/react/components/Layout.d.ts +44 -0
package/dist/lib/react/components/Layout.js +28 -0
package/dist/lib/react/components/MarkdownBody.d.ts +7 -0
package/dist/lib/react/components/MarkdownBody.js +36 -0
package/dist/lib/react/components/OptionGrid.d.ts +13 -0
package/dist/lib/react/components/OptionGrid.js +21 -0
package/dist/lib/react/components/Section.d.ts +7 -0
package/dist/lib/react/components/Section.js +41 -0
package/dist/lib/react/components/SeverityBadge.d.ts +7 -0
package/dist/lib/react/components/SeverityBadge.js +14 -0
package/dist/lib/react/index.d.ts +33 -0
package/dist/lib/react/index.js +16 -0
package/dist/lib/react/registry.d.ts +24 -0
package/dist/lib/react/registry.js +1002 -0
package/dist/lib/react/styles.css +1417 -0
package/docs/component-protocol.md +273 -0
package/docs/component-taxonomy.md +273 -0
package/docs/design.md +239 -0
package/docs/design.zh-CN.md +217 -0
package/docs/naming.md +123 -0
package/docs/testing.md +138 -0
package/package.json +90 -0

package/dist/lib/cli/vite-artifact.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import type { InlineConfig, ViteDevServer } from "vite";
+import { type ArtifactRoute } from "./artifact-state";
+import type { ArtifactKitConfig } from "./types";
+export type ArtifactProject = {
+    artifact: ArtifactRoute;
+    tmpDir: string;
+    distDir: string;
+    config: InlineConfig;
+    cleanup: () => Promise<void>;
+};
+export declare function createArtifactProject(projectRoot: string, mdxPath: string, config: Required<ArtifactKitConfig>): Promise<ArtifactProject>;
+export declare function startDevServer(project: ArtifactProject): Promise<ViteDevServer>;
+export declare function buildArtifact(project: ArtifactProject): Promise<string>;

package/dist/lib/cli/vite-artifact.js ADDED Viewed

@@ -0,0 +1,213 @@
+import mdx from "@mdx-js/rollup";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { randomUUID } from "node:crypto";
+import { access, mkdir, readFile, rm, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createServer, build as viteBuild } from "vite";
+import { createArtifactMeta, createArtifactRoute, readArtifactState, writeArtifactState } from "./artifact-state.js";
+const packageCliDir = path.dirname(fileURLToPath(import.meta.url));
+const defaultStylesPath = path.resolve(packageCliDir, "../react/styles.css");
+export async function createArtifactProject(projectRoot, mdxPath, config) {
+    const tmpDir = path.join(projectRoot, ".artifact-kit", "tmp", randomUUID());
+    const artifact = createArtifactRoute(projectRoot, mdxPath, config.docsDir);
+    const srcDir = path.join(tmpDir, "src");
+    const distDir = path.join(tmpDir, "dist");
+    const entryPath = path.join(srcDir, "entry.tsx");
+    const mdxImport = toRelativeImport(entryPath, mdxPath);
+    const styleImports = createStyleImports(projectRoot, entryPath, config);
+    const reactEntryImport = toRelativeImport(entryPath, await resolveReactEntryPath());
+    await mkdir(srcDir, { recursive: true });
+    await writeFile(path.join(tmpDir, "index.html"), `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MDX Artifact</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/entry.tsx"></script>
+  </body>
+</html>
+`);
+    await writeFile(entryPath, `import React from "react";
+import { createRoot } from "react-dom/client";
+import { ArtifactStateProvider, CommentLayer } from "${reactEntryImport}";
+import Doc from "${mdxImport}";
+${styleImports}
+function App() {
+  return (
+    <main className="ak-shell">
+      <article className="ak-document">
+        <ArtifactStateProvider>
+          <CommentLayer>
+            <Doc />
+          </CommentLayer>
+        </ArtifactStateProvider>
+      </article>
+    </main>
+  );
+}
+createRoot(document.getElementById("root")!).render(<App />);
+`);
+    const viteConfig = {
+        root: tmpDir,
+        logLevel: "warn",
+        plugins: [artifactStatePlugin(projectRoot, artifact), react(), mdx(), tailwindcss()],
+        server: {
+            port: config.port,
+            fs: {
+                allow: [projectRoot]
+            }
+        },
+        build: {
+            outDir: distDir,
+            emptyOutDir: true,
+            cssCodeSplit: false,
+            assetsInlineLimit: Number.MAX_SAFE_INTEGER,
+            rollupOptions: {
+                input: path.join(tmpDir, "index.html")
+            }
+        }
+    };
+    return {
+        artifact,
+        tmpDir,
+        distDir,
+        config: viteConfig,
+        cleanup: () => rm(tmpDir, { recursive: true, force: true })
+    };
+}
+function artifactStatePlugin(projectRoot, artifact) {
+    return {
+        name: "artifact-kit-state",
+        configureServer(server) {
+            server.middlewares.use(async (request, response, next) => {
+                const requestUrl = new URL(request.url ?? "/", "http://localhost");
+                try {
+                    if (requestUrl.pathname === "/__artifact/meta") {
+                        await handleArtifactMeta(projectRoot, artifact, request, response);
+                        return;
+                    }
+                    if (requestUrl.pathname === "/__artifact/state") {
+                        await handleArtifactState(projectRoot, artifact, request, response);
+                        return;
+                    }
+                }
+                catch (error) {
+                    sendJson(response, 500, {
+                        error: error instanceof Error ? error.message : String(error)
+                    });
+                    return;
+                }
+                next();
+            });
+        }
+    };
+}
+async function handleArtifactMeta(projectRoot, artifact, request, response) {
+    if (request.method !== "GET") {
+        sendJson(response, 405, { error: "Method not allowed." });
+        return;
+    }
+    sendJson(response, 200, await createArtifactMeta(projectRoot, artifact));
+}
+async function handleArtifactState(projectRoot, artifact, request, response) {
+    if (request.method === "GET") {
+        sendJson(response, 200, await readArtifactState(artifact));
+        return;
+    }
+    if (request.method === "POST") {
+        let value;
+        try {
+            value = JSON.parse(await readRequestBody(request));
+        }
+        catch {
+            sendJson(response, 400, { error: "Request body must be valid JSON." });
+            return;
+        }
+        const state = await writeArtifactState(projectRoot, artifact, value);
+        sendJson(response, 200, { ok: true, state });
+        return;
+    }
+    sendJson(response, 405, { error: "Method not allowed." });
+}
+function readRequestBody(request) {
+    return new Promise((resolve, reject) => {
+        let body = "";
+        request.setEncoding("utf8");
+        request.on("data", (chunk) => {
+            body += chunk;
+        });
+        request.on("end", () => resolve(body));
+        request.on("error", reject);
+    });
+}
+function sendJson(response, statusCode, value) {
+    response.statusCode = statusCode;
+    response.setHeader("content-type", "application/json; charset=utf-8");
+    response.end(JSON.stringify(value, null, 2));
+}
+async function resolveReactEntryPath() {
+    const builtEntryPath = path.resolve(packageCliDir, "../react/index.js");
+    const sourceEntryPath = path.resolve(packageCliDir, "../react/index.ts");
+    try {
+        await access(builtEntryPath);
+        return builtEntryPath;
+    }
+    catch {
+        return sourceEntryPath;
+    }
+}
+export async function startDevServer(project) {
+    const server = await createServer(project.config);
+    await server.listen();
+    return server;
+}
+export async function buildArtifact(project) {
+    await viteBuild(project.config);
+    return inlineBuildAssets(project.distDir);
+}
+async function inlineBuildAssets(distDir) {
+    const htmlPath = path.join(distDir, "index.html");
+    let html = await readFile(htmlPath, "utf8");
+    html = await replaceAsync(html, /<link rel="stylesheet" crossorigin href="([^"]+)">/g, async (_match, href) => {
+        const css = await readFile(assetPath(distDir, href), "utf8");
+        return `<style>${css}</style>`;
+    });
+    html = await replaceAsync(html, /<script type="module" crossorigin src="([^"]+)"><\/script>/g, async (_match, src) => {
+        const js = await readFile(assetPath(distDir, src), "utf8");
+        return `<script type="module">${escapeScriptContent(js)}</script>`;
+    });
+    return html;
+}
+function assetPath(distDir, value) {
+    return path.join(distDir, value.replace(/^\//, ""));
+}
+function toRelativeImport(fromFile, targetFile) {
+    const relative = path.relative(path.dirname(fromFile), targetFile).replaceAll(path.sep, "/");
+    return relative.startsWith(".") ? relative : `./${relative}`;
+}
+function createStyleImports(projectRoot, entryPath, config) {
+    const styles = [
+        ...(config.includeDefaultStyles ? [defaultStylesPath] : []),
+        ...config.styles.map((stylePath) => path.resolve(projectRoot, stylePath))
+    ];
+    return styles.map((stylePath) => `import "${toRelativeImport(entryPath, stylePath)}";`).join("\n");
+}
+async function replaceAsync(source, pattern, replacer) {
+    const matches = Array.from(source.matchAll(pattern));
+    let output = source;
+    for (const match of matches) {
+        const replacement = await replacer(match[0], ...match.slice(1));
+        output = output.replace(match[0], () => replacement);
+    }
+    return output;
+}
+function escapeScriptContent(source) {
+    return source.replace(/<\/script/gi, "<\\/script");
+}

package/dist/lib/react/components/AnnotatedCode.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { type SeverityLevel } from "./SeverityBadge";
+export type CodeAnnotation = {
+    id?: string;
+    line: number;
+    body: string;
+    title?: string;
+    severity?: SeverityLevel;
+};
+export type AnnotatedCodeProps = {
+    id?: string;
+    code: string;
+    annotations: CodeAnnotation[];
+    language?: string;
+    filename?: string;
+    showLineNumbers?: boolean;
+    highlightLines?: number[];
+    className?: string;
+};
+export declare function AnnotatedCode({ id, code, annotations, language, filename, showLineNumbers, highlightLines, className }: AnnotatedCodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/AnnotatedCode.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CodeBlock } from "./CodeBlock.js";
+import { CommentTarget } from "./Comments.js";
+import { InlineText } from "./InlineText.js";
+import { MarkdownBody } from "./MarkdownBody.js";
+import { SeverityBadge } from "./SeverityBadge.js";
+export function AnnotatedCode({ id, code, annotations, language, filename, showLineNumbers = true, highlightLines = [], className }) {
+    const annotationLines = annotations.map((annotation) => annotation.line);
+    const highlighted = Array.from(new Set([...highlightLines, ...annotationLines])).sort((a, b) => a - b);
+    const title = filename ?? (language ? `${language} annotated code` : "Annotated code");
+    const targetId = id ?? `annotated-code:${slugify(filename ?? language ?? code)}`;
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "AnnotatedCode component", targetId: targetId, title: title, children: _jsxs("section", { className: "ak-annotated-code", children: [_jsx(CodeBlock, { code: code, filename: filename, highlightLines: highlighted, id: id ? `${id}.code` : undefined, language: language, showLineNumbers: showLineNumbers }), annotations.length > 0 ? (_jsx("div", { className: "ak-annotation-list", children: annotations.map((annotation) => {
+                        const annotationTargetId = id
+                            ? `${id}.${annotation.id ?? `line-${annotation.line}`}`
+                            : `annotation:${slugify(title)}:${annotation.line}:${slugify(annotation.title ?? annotation.body)}`;
+                        return (_jsx(CommentTarget, { className: "ak-comment-target-section", description: `Annotation for line ${annotation.line}`, targetId: annotationTargetId, title: annotation.title ?? `Line ${annotation.line}`, children: _jsxs("article", { className: "ak-annotation", "data-line": annotation.line, children: [_jsxs("div", { className: "ak-annotation-header", children: [_jsxs("span", { className: "ak-annotation-line", children: ["Line ", annotation.line] }), _jsx(SeverityBadge, { level: annotation.severity ?? "info" })] }), annotation.title ? _jsx(InlineText, { as: "h3", text: annotation.title, variant: "subtitle" }) : null, _jsx(MarkdownBody, { body: annotation.body, variant: "compact" })] }) }, `${annotation.line}-${annotation.id ?? annotation.title ?? annotation.body}`));
+                    }) })) : null] }) }));
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}
+function slugify(value) {
+    const slug = value
+        .toLowerCase()
+        .replace(/[`*_~[\]()]/g, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 64);
+    return slug || "item";
+}

package/dist/lib/react/components/ArtifactState.d.ts ADDED Viewed

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+export type ArtifactStateProviderProps = {
+    children: ReactNode;
+};
+export type ArtifactStateMeta = {
+    sourcePath: string;
+    statePath: string;
+    writable: boolean;
+};
+export type ArtifactStateValue = {
+    version: number;
+    source: string;
+    threads: ArtifactStateThread[];
+    interactions: Record<string, unknown>;
+    [key: string]: unknown;
+};
+export type ArtifactStateThread = {
+    id: string;
+    anchorId: string;
+    status: string;
+    title?: string;
+    description?: string;
+    messages: ArtifactStateMessage[];
+    [key: string]: unknown;
+};
+export type ArtifactStateMessage = {
+    id: string;
+    role: "user" | "assistant";
+    body: string;
+    createdAt?: string;
+    [key: string]: unknown;
+};
+export type ArtifactStateComment = {
+    id: string;
+    blockId: string;
+    blockTitle: string;
+    blockDescription?: string;
+    comment: string;
+    createdAt: string;
+};
+export type ArtifactStateReviewThread = {
+    id: string;
+    blockId: string;
+    blockTitle: string;
+    blockDescription?: string;
+    status: string;
+    messages: ArtifactStateMessage[];
+};
+export type ArtifactStateStatus = "loading" | "static" | "ready" | "saving" | "saved" | "error";
+type ArtifactStateContextValue = {
+    state?: ArtifactStateValue;
+    actions: {
+        saveComments: (comments: ArtifactStateComment[]) => Promise<void>;
+        saveThreads: (threads: ArtifactStateReviewThread[]) => Promise<void>;
+        saveState: (state: unknown) => Promise<void>;
+    };
+    meta: {
+        daemon?: ArtifactStateMeta;
+        status: ArtifactStateStatus;
+    };
+};
+export declare function ArtifactStateProvider({ children }: ArtifactStateProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useOptionalArtifactState(): ArtifactStateContextValue | null;
+export declare function createArtifactStateFromComments(comments: ArtifactStateComment[], currentState: unknown, sourcePath: string): ArtifactStateValue;
+export declare function createArtifactStateFromThreads(threads: ArtifactStateReviewThread[], currentState: unknown, sourcePath: string): ArtifactStateValue;
+export declare function createArtifactCommentsFromState(value: unknown): ArtifactStateComment[];
+export declare function createArtifactThreadsFromState(value: unknown): ArtifactStateReviewThread[];
+export {};

package/dist/lib/react/components/ArtifactState.js ADDED Viewed

@@ -0,0 +1,286 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+const ArtifactStateContext = createContext(null);
+export function ArtifactStateProvider({ children }) {
+    const [daemonMeta, setDaemonMeta] = useState();
+    const [state, setState] = useState();
+    const [status, setStatus] = useState("loading");
+    useEffect(() => {
+        let active = true;
+        async function loadArtifactState() {
+            if (typeof fetch !== "function") {
+                setStatus("static");
+                return;
+            }
+            try {
+                const metaResponse = await fetch("/__artifact/meta", { headers: { accept: "application/json" } });
+                if (!metaResponse.ok) {
+                    setStatus("static");
+                    return;
+                }
+                const nextMeta = await metaResponse.json();
+                if (!isArtifactStateMeta(nextMeta) || !nextMeta.writable) {
+                    setStatus("static");
+                    return;
+                }
+                const stateResponse = await fetch("/__artifact/state", { headers: { accept: "application/json" } });
+                const nextState = stateResponse.ok ? normalizeArtifactState(await stateResponse.json(), nextMeta.sourcePath) : createEmptyArtifactState(nextMeta.sourcePath);
+                if (active) {
+                    setDaemonMeta(nextMeta);
+                    setState(nextState);
+                    setStatus("ready");
+                }
+            }
+            catch {
+                if (active) {
+                    setStatus("static");
+                }
+            }
+        }
+        loadArtifactState();
+        return () => {
+            active = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (!daemonMeta || typeof window === "undefined" || typeof fetch !== "function") {
+            return;
+        }
+        const interval = window.setInterval(async () => {
+            if (status === "saving") {
+                return;
+            }
+            try {
+                const response = await fetch("/__artifact/state", { headers: { accept: "application/json" } });
+                if (!response.ok) {
+                    return;
+                }
+                const nextState = normalizeArtifactState(await response.json(), daemonMeta.sourcePath);
+                setState((current) => (sameArtifactState(current, nextState) ? current : nextState));
+            }
+            catch {
+                // Keep the current in-page state when the local daemon is temporarily unavailable.
+            }
+        }, 2000);
+        return () => window.clearInterval(interval);
+    }, [daemonMeta, status]);
+    const value = useMemo(() => ({
+        state,
+        actions: {
+            async saveComments(comments) {
+                if (!daemonMeta) {
+                    return;
+                }
+                const nextState = createArtifactStateFromComments(comments, state, daemonMeta.sourcePath);
+                await saveArtifactState(nextState, daemonMeta, setStatus, setState);
+            },
+            async saveThreads(threads) {
+                if (!daemonMeta) {
+                    return;
+                }
+                const nextState = createArtifactStateFromThreads(threads, state, daemonMeta.sourcePath);
+                await saveArtifactState(nextState, daemonMeta, setStatus, setState);
+            },
+            async saveState(nextState) {
+                if (!daemonMeta) {
+                    return;
+                }
+                await saveArtifactState(normalizeArtifactState(nextState, daemonMeta.sourcePath), daemonMeta, setStatus, setState);
+            }
+        },
+        meta: {
+            daemon: daemonMeta,
+            status
+        }
+    }), [daemonMeta, state, status]);
+    return _jsx(ArtifactStateContext.Provider, { value: value, children: children });
+}
+export function useOptionalArtifactState() {
+    return useContext(ArtifactStateContext);
+}
+export function createArtifactStateFromComments(comments, currentState, sourcePath) {
+    return createArtifactStateFromThreads(comments.map(createReviewThreadFromComment), currentState, sourcePath);
+}
+export function createArtifactStateFromThreads(threads, currentState, sourcePath) {
+    const baseState = normalizeArtifactState(currentState, sourcePath);
+    const reviewThreads = threads.map((thread) => createStateThreadFromReviewThread(thread, baseState.threads));
+    const threadAnchorIds = new Set(reviewThreads.map((thread) => thread.anchorId));
+    const retainedThreads = baseState.threads.filter((thread) => !threadAnchorIds.has(thread.anchorId));
+    return {
+        ...baseState,
+        source: sourcePath,
+        threads: [...retainedThreads, ...reviewThreads]
+    };
+}
+export function createArtifactCommentsFromState(value) {
+    return createArtifactThreadsFromState(value).flatMap((thread) => {
+        const userMessage = thread.messages.find((message) => message.role === "user" && message.body.trim().length > 0);
+        if (!userMessage) {
+            return [];
+        }
+        return [
+            {
+                id: userMessage.id,
+                blockId: thread.blockId,
+                blockTitle: thread.blockTitle,
+                blockDescription: thread.blockDescription,
+                comment: userMessage.body.trim(),
+                createdAt: userMessage.createdAt ?? ""
+            }
+        ];
+    });
+}
+export function createArtifactThreadsFromState(value) {
+    if (!isRecord(value) || !Array.isArray(value.threads)) {
+        return [];
+    }
+    return value.threads.flatMap((thread) => createArtifactThreadFromStateThread(thread));
+}
+async function saveArtifactState(nextState, daemonMeta, setStatus, setState) {
+    setStatus("saving");
+    try {
+        const response = await fetch("/__artifact/state", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(nextState)
+        });
+        if (!response.ok) {
+            throw new Error("Failed to save artifact state.");
+        }
+        const payload = await response.json();
+        const savedState = isRecord(payload) && "state" in payload ? payload.state : nextState;
+        setState(normalizeArtifactState(savedState, daemonMeta.sourcePath));
+        setStatus("saved");
+        window.setTimeout(() => setStatus("ready"), 1200);
+    }
+    catch {
+        setStatus("error");
+    }
+}
+function normalizeArtifactState(value, sourcePath) {
+    if (!isRecord(value)) {
+        return createEmptyArtifactState(sourcePath);
+    }
+    return {
+        ...value,
+        version: typeof value.version === "number" ? value.version : 1,
+        source: sourcePath,
+        threads: normalizeThreads(value.threads),
+        interactions: isRecord(value.interactions) ? value.interactions : {}
+    };
+}
+function sameArtifactState(first, second) {
+    return JSON.stringify(first) === JSON.stringify(second);
+}
+function createEmptyArtifactState(sourcePath) {
+    return {
+        version: 1,
+        source: sourcePath,
+        threads: [],
+        interactions: {}
+    };
+}
+function createReviewThreadFromComment(comment) {
+    return {
+        id: `thread-${comment.id}`,
+        blockId: comment.blockId,
+        blockTitle: comment.blockTitle,
+        blockDescription: comment.blockDescription,
+        status: "open",
+        messages: [
+            {
+                id: comment.id,
+                role: "user",
+                body: comment.comment,
+                createdAt: comment.createdAt
+            }
+        ]
+    };
+}
+function createStateThreadFromReviewThread(thread, currentThreads) {
+    const currentThread = currentThreads.find((item) => item.anchorId === thread.blockId);
+    const currentMessages = currentThread?.messages ?? [];
+    const messages = thread.messages.map((message) => {
+        const currentMessage = currentMessages.find((item) => item.id === message.id) ??
+            (message.role === "user" ? currentMessages.find((item) => item.role === "user") : undefined);
+        return {
+            ...currentMessage,
+            id: currentMessage?.id ?? message.id,
+            role: message.role,
+            body: message.body,
+            createdAt: currentMessage?.createdAt ?? message.createdAt
+        };
+    });
+    const messageIds = new Set(messages.map((message) => message.id));
+    const retainedAssistantMessages = currentMessages.filter((message) => message.role === "assistant" && !messageIds.has(message.id));
+    return {
+        ...currentThread,
+        id: resolveThreadId(currentThread?.id, thread.blockId),
+        anchorId: thread.blockId,
+        status: thread.status,
+        title: thread.blockTitle,
+        description: thread.blockDescription,
+        messages: [...messages, ...retainedAssistantMessages]
+    };
+}
+function createArtifactThreadFromStateThread(thread) {
+    if (!isRecord(thread) || typeof thread.anchorId !== "string" || !Array.isArray(thread.messages)) {
+        return [];
+    }
+    const typedThread = thread;
+    const messages = thread.messages.filter(isStateMessage);
+    if (messages.length === 0) {
+        return [];
+    }
+    return [
+        {
+            id: typedThread.id,
+            blockId: typedThread.anchorId,
+            blockTitle: typeof typedThread.title === "string" ? typedThread.title : typedThread.anchorId,
+            blockDescription: typeof typedThread.description === "string" ? typedThread.description : undefined,
+            status: typeof typedThread.status === "string" ? typedThread.status : "open",
+            messages
+        }
+    ];
+}
+function normalizeThreads(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    return value.filter(isArtifactStateThread);
+}
+function isArtifactStateThread(value) {
+    if (!isRecord(value)) {
+        return false;
+    }
+    return typeof value.id === "string" && typeof value.anchorId === "string" && Array.isArray(value.messages);
+}
+function isStateMessage(value) {
+    return (isRecord(value) &&
+        typeof value.id === "string" &&
+        (value.role === "user" || value.role === "assistant") &&
+        typeof value.body === "string" &&
+        value.body.trim().length > 0);
+}
+function isArtifactStateMeta(value) {
+    return (isRecord(value) &&
+        typeof value.sourcePath === "string" &&
+        typeof value.statePath === "string" &&
+        typeof value.writable === "boolean");
+}
+function resolveThreadId(currentId, anchorId) {
+    if (currentId && currentId.startsWith("thr") && currentId.length <= 32) {
+        return currentId;
+    }
+    return `thr_${compactId(anchorId)}`;
+}
+function compactId(value) {
+    let hash = 5381;
+    for (let index = 0; index < value.length; index += 1) {
+        hash = (hash * 33) ^ value.charCodeAt(index);
+    }
+    return (hash >>> 0).toString(36);
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/dist/lib/react/components/Callout.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export type CalloutTone = "info" | "success" | "warning" | "danger";
+export type CalloutProps = {
+    id?: string;
+    body: string;
+    title?: string;
+    tone?: CalloutTone;
+    className?: string;
+};
+export declare function Callout({ id, body, title, tone, className }: CalloutProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/Callout.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CommentTarget } from "./Comments.js";
+import { InlineText } from "./InlineText.js";
+import { MarkdownBody } from "./MarkdownBody.js";
+export function Callout({ id, body, title, tone = "info", className }) {
+    const displayTitle = title ?? `${tone} callout`;
+    const targetId = id ?? `callout:${slugify(displayTitle)}:${slugify(body)}`;
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "Callout component", targetId: targetId, title: displayTitle, children: _jsxs("aside", { className: classNames("ak-callout", `ak-callout-${tone}`), children: [title ? _jsx(InlineText, { as: "h3", text: title, variant: "subtitle" }) : null, _jsx(MarkdownBody, { body: body, variant: "compact" })] }) }));
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}
+function slugify(value) {
+    const slug = value
+        .toLowerCase()
+        .replace(/[`*_~[\]()]/g, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 64);
+    return slug || "item";
+}

package/dist/lib/react/components/CodeBlock.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export type CodeBlockProps = {
+    id?: string;
+    code: string;
+    language?: string;
+    filename?: string;
+    showLineNumbers?: boolean;
+    highlightLines?: number[];
+    className?: string;
+};
+export declare function CodeBlock({ id, code, language, filename, showLineNumbers, highlightLines, className }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;