mdx-artifacts 0.1.0

package/dist/lib/react/components/DecisionMatrix.d.ts

@@ -0,0 +1,16 @@
+export type DecisionMatrixOption = {
+    id?: string;
+    name: string;
+    summary?: string;
+    pros?: string[];
+    cons?: string[];
+    risks?: string[];
+    confidence?: "low" | "medium" | "high";
+    verdict?: string;
+};
+export type DecisionMatrixProps = {
+    id?: string;
+    question: string;
+    options: DecisionMatrixOption[];
+};
+export declare function DecisionMatrix({ id, question, options }: DecisionMatrixProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/DecisionMatrix.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CommentTarget } from "./Comments.js";
+import { InlineText } from "./InlineText.js";
+export function DecisionMatrix({ id, question, options }) {
+    const targetId = id ?? `decision:${slugify(question)}`;
+    return (_jsx(CommentTarget, { className: "ak-comment-target-section", description: "DecisionMatrix component", targetId: targetId, title: question, children: _jsxs("section", { className: "ak-section ak-decision-matrix", children: [_jsxs("div", { className: "ak-section-header", children: [_jsx("p", { className: "ak-eyebrow", children: "Decision Matrix" }), _jsx(InlineText, { as: "h2", text: question, variant: "title" })] }), _jsx("div", { className: "ak-decision-grid", children: options.map((option, index) => {
+                        const optionTargetId = id
+                            ? `${id}.${option.id ?? `${index + 1}`}`
+                            : `decision:${slugify(question)}:${index + 1}:${slugify(option.name)}`;
+                        return (_jsx(CommentTarget, { className: "ak-comment-target-card", description: `DecisionMatrix option in ${question}`, targetId: optionTargetId, title: option.name, children: _jsxs("article", { className: "ak-card", children: [_jsxs("div", { className: "ak-card-header", children: [_jsx(InlineText, { as: "h3", text: option.name, variant: "subtitle" }), option.confidence ? (_jsx("span", { className: `ak-badge ak-badge-${option.confidence}`, children: option.confidence })) : null] }), option.summary ? _jsx(InlineText, { as: "p", className: "ak-muted", text: option.summary }) : null, _jsx(ListBlock, { title: "Pros", items: option.pros }), _jsx(ListBlock, { title: "Cons", items: option.cons }), _jsx(ListBlock, { title: "Risks", items: option.risks }), option.verdict ? _jsx(InlineText, { as: "p", className: "ak-verdict", text: option.verdict }) : null] }) }, option.name));
+                    }) })] }) }));
+}
+function ListBlock({ title, items }) {
+    if (!items?.length) {
+        return null;
+    }
+    return (_jsxs("div", { className: "ak-list-block", children: [_jsx("h4", { children: title }), _jsx("ul", { children: items.map((item) => (_jsx("li", { children: _jsx(InlineText, { text: item }) }, item))) })] }));
+}
+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/DiffBlock.d.ts

@@ -0,0 +1,15 @@
+export type DiffLineType = "add" | "remove" | "context";
+export type DiffLine = {
+    type: DiffLineType;
+    oldLine?: number;
+    newLine?: number;
+    content: string;
+};
+export type DiffBlockProps = {
+    id?: string;
+    lines: DiffLine[];
+    filename?: string;
+    language?: string;
+    className?: string;
+};
+export declare function DiffBlock({ id, lines, filename, language, className }: DiffBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/DiffBlock.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CommentTarget } from "./Comments.js";
+const markers = {
+    add: "+",
+    remove: "-",
+    context: " "
+};
+export function DiffBlock({ id, lines, filename, language, className }) {
+    const title = filename ?? (language ? `${language} diff block` : "Diff block");
+    const targetId = id ?? `diff:${slugify(filename ?? language ?? lines.map((line) => line.content).join("-"))}`;
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "DiffBlock component", targetId: targetId, title: title, children: _jsxs("figure", { className: "ak-code-block ak-diff-block", children: [(filename || language) && (_jsxs("figcaption", { className: "ak-code-header", children: [filename && _jsx("span", { className: "ak-code-filename", children: filename }), language && _jsx("span", { className: "ak-code-language", children: language })] })), _jsx("pre", { className: "ak-code-pre", children: _jsx("code", { className: language ? `language-${language}` : undefined, children: lines.map((line, index) => (_jsxs("span", { className: classNames("ak-diff-line", `ak-diff-line-${line.type}`), children: [_jsx("span", { className: "ak-diff-line-number", children: line.newLine ?? line.oldLine ?? "" }), _jsx("span", { className: "ak-diff-marker", children: markers[line.type] }), _jsx("span", { className: "ak-diff-line-content", children: line.content || "\u00a0" })] }, `${line.type}-${index}`))) }) })] }) }));
+}
+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/ExportPanel.d.ts

@@ -0,0 +1,7 @@
+export type ExportFormat = "markdown" | "json";
+export type ExportPanelProps = {
+    title?: string;
+    formats?: ExportFormat[];
+    value: unknown;
+};
+export declare function ExportPanel({ title, formats, value }: ExportPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/ExportPanel.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Tabs from "@radix-ui/react-tabs";
+import { useMemo, useState } from "react";
+import { serializeCommentsToMarkdown, useOptionalCommentExportValue } from "./Comments.js";
+import { InlineText } from "./InlineText.js";
+export function ExportPanel({ title = "Export Result", formats = ["markdown", "json"], value }) {
+    const [format, setFormat] = useState(formats[0] ?? "markdown");
+    const [source, setSource] = useState("result");
+    const [isOpen, setOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const comments = useOptionalCommentExportValue();
+    const hasCommentsSource = Boolean(comments);
+    const resolvedSource = source === "comments" && !hasCommentsSource ? "result" : source;
+    const output = useMemo(() => {
+        if (resolvedSource === "comments" && comments) {
+            return format === "json" ? JSON.stringify(comments, null, 2) : serializeCommentsToMarkdown(comments);
+        }
+        return serialize(value, format);
+    }, [comments, format, resolvedSource, value]);
+    async function copyOutput() {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(output);
+        }
+        else {
+            fallbackCopy(output);
+        }
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1200);
+    }
+    function updateSource(value) {
+        setSource(value);
+        setCopied(false);
+    }
+    function updateFormat(value) {
+        setFormat(value);
+        setCopied(false);
+    }
+    return (_jsxs("aside", { className: "ak-export-dock", "aria-label": title, children: [_jsx("button", { className: "ak-export-dock-trigger", onClick: () => setOpen((current) => !current), type: "button", children: "Export" }), isOpen ? (_jsxs("div", { className: "ak-export-drawer", role: "dialog", children: [_jsxs("div", { className: "ak-section-header ak-export-header", children: [_jsxs("div", { children: [_jsx("p", { className: "ak-eyebrow", children: "Export" }), _jsx(InlineText, { as: "h2", text: title, variant: "title" })] }), _jsx("button", { className: "ak-button", onClick: () => setOpen(false), type: "button", children: "Close" })] }), _jsxs("div", { className: "ak-export-toolbar", children: [_jsx(Tabs.Root, { className: "ak-format-tabs", onValueChange: updateSource, value: resolvedSource, children: _jsxs(Tabs.List, { "aria-label": "Export source", className: "ak-format-tabs-list", children: [_jsx(Tabs.Trigger, { className: "ak-format-trigger", value: "result", children: "Result" }), hasCommentsSource ? (_jsx(Tabs.Trigger, { className: "ak-format-trigger", value: "comments", children: "Comments" })) : null] }) }), _jsx(Tabs.Root, { className: "ak-format-tabs", onValueChange: updateFormat, value: format, children: _jsx(Tabs.List, { "aria-label": "Export format", className: "ak-format-tabs-list", children: formats.map((item) => (_jsx(Tabs.Trigger, { className: "ak-format-trigger", value: item, children: item }, item))) }) }), _jsx("button", { className: "ak-button ak-button-primary", onClick: copyOutput, type: "button", children: copied ? "Copied" : "Copy" })] }), _jsx("pre", { className: "ak-export-output", children: output })] })) : null] }));
+}
+function serialize(value, format) {
+    if (format === "json") {
+        return JSON.stringify(value, null, 2);
+    }
+    return toMarkdown(value);
+}
+function fallbackCopy(value) {
+    const textarea = document.createElement("textarea");
+    textarea.value = value;
+    textarea.setAttribute("readonly", "true");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+}
+function toMarkdown(value, depth = 0) {
+    if (value == null) {
+        return "";
+    }
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    if (Array.isArray(value)) {
+        return value
+            .map((item) => {
+            const rendered = toMarkdown(item, depth + 1);
+            return `${"  ".repeat(depth)}- ${rendered.replace(/\n/g, `\n${"  ".repeat(depth + 1)}`)}`;
+        })
+            .join("\n");
+    }
+    if (typeof value === "object") {
+        return Object.entries(value)
+            .map(([key, item]) => {
+            const rendered = toMarkdown(item, depth + 1);
+            if (Array.isArray(item) || (item && typeof item === "object")) {
+                return `${"  ".repeat(depth)}- **${key}**:\n${rendered}`;
+            }
+            return `${"  ".repeat(depth)}- **${key}**: ${rendered}`;
+        })
+            .join("\n");
+    }
+    return String(value);
+}

package/dist/lib/react/components/InlineText.d.ts

@@ -0,0 +1,9 @@
+export type InlineTextAs = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type InlineTextVariant = "default" | "title" | "subtitle" | "label" | "caption";
+export type InlineTextProps = {
+    text: string;
+    as?: InlineTextAs;
+    variant?: InlineTextVariant;
+    className?: string;
+};
+export declare function InlineText({ text, as: Component, variant, className }: InlineTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/InlineText.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+const inlineAllowedElements = ["p", "strong", "em", "del", "code", "a", "br"];
+const inlineComponents = {
+    p({ children }) {
+        return _jsx(_Fragment, { children: children });
+    },
+    a({ children, href }) {
+        return (_jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: children }));
+    }
+};
+export function InlineText({ text, as: Component = "span", variant = "default", className }) {
+    return (_jsx(Component, { className: classNames("ak-inline-text", `ak-inline-text--${variant}`, className), children: _jsx(ReactMarkdown, { allowedElements: inlineAllowedElements, components: inlineComponents, remarkPlugins: [remarkGfm], skipHtml: true, unwrapDisallowed: true, children: text }) }));
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/dist/lib/react/components/Layout.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+export type AkGap = "sm" | "md" | "lg";
+export type AkCollapseAt = "sm" | "md" | "lg";
+export type AkSurface = "none" | "plain" | "subtle" | "outlined";
+export type StackProps = {
+    children: ReactNode;
+    gap?: AkGap;
+    align?: "start" | "center" | "stretch";
+    className?: string;
+};
+export type ColumnsRatio = "1:1" | "1:1:1" | "1:1:1:1" | "2:1" | "3:1" | "3:1:1" | "1:3:1" | "1:1:3";
+export type ColumnsProps = {
+    children: ReactNode;
+    ratio?: ColumnsRatio;
+    gap?: AkGap;
+    collapseAt?: AkCollapseAt;
+    className?: string;
+};
+export type GridProps = {
+    children: ReactNode;
+    columns?: 2 | 3 | 4;
+    gap?: AkGap;
+    collapseAt?: AkCollapseAt;
+    className?: string;
+};
+export type SplitPaneRatio = "1:1" | "2:1" | "3:1" | "1:2" | "1:3";
+export type SplitPaneProps = {
+    children: ReactNode;
+    ratio?: SplitPaneRatio;
+    gap?: AkGap;
+    collapseAt?: AkCollapseAt;
+    className?: string;
+};
+export type FrameProps = {
+    children: ReactNode;
+    surface?: AkSurface;
+    padding?: "none" | AkGap;
+    className?: string;
+};
+export declare function Stack({ children, gap, align, className }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Columns({ children, ratio, gap, collapseAt, className }: ColumnsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, columns, gap, collapseAt, className }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitPane({ children, ratio, gap, collapseAt, className }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function Frame({ children, surface, padding, className }: FrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/Layout.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Stack({ children, gap = "md", align = "stretch", className }) {
+    return _jsx("div", { className: classNames("ak-stack", `ak-gap-${gap}`, `ak-stack-align-${align}`, className), children: children });
+}
+export function Columns({ children, ratio = "1:1", gap = "md", collapseAt = "md", className }) {
+    return (_jsx("div", { className: classNames("ak-columns", `ak-gap-${gap}`, `ak-collapse-${collapseAt}`, className), style: cssVars({ "--ak-layout-columns": ratioToTemplate(ratio) }), children: children }));
+}
+export function Grid({ children, columns = 2, gap = "md", collapseAt = "md", className }) {
+    return (_jsx("div", { className: classNames("ak-grid", `ak-gap-${gap}`, `ak-collapse-${collapseAt}`, className), style: cssVars({ "--ak-layout-columns": `repeat(${columns}, minmax(0, 1fr))` }), children: children }));
+}
+export function SplitPane({ children, ratio = "3:1", gap = "md", collapseAt = "md", className }) {
+    return (_jsx("div", { className: classNames("ak-split-pane", `ak-gap-${gap}`, `ak-collapse-${collapseAt}`, className), style: cssVars({ "--ak-layout-columns": ratioToTemplate(ratio) }), children: children }));
+}
+export function Frame({ children, surface = "outlined", padding = "md", className }) {
+    return (_jsx("div", { className: classNames("ak-frame", `ak-surface-${surface}`, `ak-padding-${padding}`, className), children: children }));
+}
+function ratioToTemplate(ratio) {
+    return ratio
+        .split(":")
+        .map((part) => `${part}fr`)
+        .join(" ");
+}
+function cssVars(values) {
+    return values;
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/dist/lib/react/components/MarkdownBody.d.ts

@@ -0,0 +1,7 @@
+export type MarkdownBodyVariant = "default" | "compact";
+export type MarkdownBodyProps = {
+    body: string;
+    variant?: MarkdownBodyVariant;
+    className?: string;
+};
+export declare function MarkdownBody({ body, variant, className }: MarkdownBodyProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/lib/react/components/MarkdownBody.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+const blockAllowedElements = [
+    "p",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "strong",
+    "em",
+    "del",
+    "code",
+    "a",
+    "br",
+    "ul",
+    "ol",
+    "li",
+    "blockquote"
+];
+const blockComponents = {
+    a({ children, href }) {
+        return (_jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: children }));
+    }
+};
+export function MarkdownBody({ body, variant = "default", className }) {
+    if (!body.trim()) {
+        return null;
+    }
+    return (_jsx("div", { className: classNames("ak-markdown-body", `ak-markdown-body--${variant}`, className), children: _jsx(ReactMarkdown, { allowedElements: blockAllowedElements, components: blockComponents, remarkPlugins: [remarkGfm], skipHtml: true, unwrapDisallowed: true, children: body }) }));
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/dist/lib/react/components/OptionGrid.d.ts

@@ -0,0 +1,13 @@
+export type OptionGridItem = {
+    id?: string;
+    name: string;
+    intent?: string;
+    description?: string;
+    tradeoffs?: string[];
+};
+export type OptionGridProps = {
+    id?: string;
+    title: string;
+    options: OptionGridItem[];
+};
+export declare function OptionGrid({ id, title, options }: OptionGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/OptionGrid.js

@@ -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";
+export function OptionGrid({ id, title, options }) {
+    const targetId = id ?? `option:${slugify(title)}`;
+    return (_jsx(CommentTarget, { className: "ak-comment-target-section", description: "OptionGrid component", targetId: targetId, title: title, children: _jsxs("section", { className: "ak-section", children: [_jsxs("div", { className: "ak-section-header", children: [_jsx("p", { className: "ak-eyebrow", children: "Option Grid" }), _jsx(InlineText, { as: "h2", text: title, variant: "title" })] }), _jsx("div", { className: "ak-option-grid", children: options.map((option, index) => {
+                        const optionTargetId = id
+                            ? `${id}.${option.id ?? `${index + 1}`}`
+                            : `option:${slugify(title)}:${index + 1}:${slugify(option.name)}`;
+                        return (_jsx(CommentTarget, { className: "ak-comment-target-card", description: `OptionGrid item in ${title}`, targetId: optionTargetId, title: option.name, children: _jsxs("article", { className: "ak-card", children: [_jsx(InlineText, { as: "h3", text: option.name, variant: "subtitle" }), option.intent ? _jsx(InlineText, { as: "p", className: "ak-intent", text: option.intent }) : null, option.description ? _jsx(InlineText, { as: "p", text: option.description }) : null, option.tradeoffs?.length ? (_jsx("ul", { children: option.tradeoffs.map((tradeoff) => (_jsx("li", { children: _jsx(InlineText, { text: tradeoff }) }, tradeoff))) })) : null] }) }, option.name));
+                    }) })] }) }));
+}
+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/Section.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export type SectionProps = {
+    id: string;
+    children: ReactNode;
+    className?: string;
+};
+export declare function Section({ id, children, className }: SectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/Section.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { CommentTarget } from "./Comments.js";
+export function Section({ id, children, className }) {
+    const title = getFirstHeadingText(children) ?? id;
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), targetId: id, title: title, children: _jsx("div", { className: "ak-section ak-content-section", children: children }) }));
+}
+function getFirstHeadingText(children) {
+    for (const child of Children.toArray(children)) {
+        const heading = getHeadingText(child);
+        if (heading) {
+            return heading;
+        }
+    }
+    return undefined;
+}
+function getHeadingText(node) {
+    if (!isValidElement(node)) {
+        return undefined;
+    }
+    if (typeof node.type === "string" && /^h[1-6]$/.test(node.type)) {
+        return getTextContent(node.props.children);
+    }
+    return undefined;
+}
+function getTextContent(node) {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        const text = node.map(getTextContent).filter(Boolean).join(" ").trim();
+        return text || undefined;
+    }
+    if (isValidElement(node)) {
+        return getTextContent(node.props.children);
+    }
+    return undefined;
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/dist/lib/react/components/SeverityBadge.d.ts

@@ -0,0 +1,7 @@
+export type SeverityLevel = "info" | "low" | "medium" | "high" | "critical";
+export type SeverityBadgeProps = {
+    level?: SeverityLevel;
+    label?: string;
+    className?: string;
+};
+export declare function SeverityBadge({ level, label, className }: SeverityBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/react/components/SeverityBadge.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultLabels = {
+    info: "Info",
+    low: "Low",
+    medium: "Medium",
+    high: "High",
+    critical: "Critical"
+};
+export function SeverityBadge({ level = "info", label = defaultLabels[level], className }) {
+    return _jsx("span", { className: classNames("ak-severity-badge", `ak-severity-badge-${level}`, className), children: label });
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/dist/lib/react/index.d.ts

@@ -0,0 +1,33 @@
+export { AnnotatedCode } from "./components/AnnotatedCode";
+export type { AnnotatedCodeProps, CodeAnnotation } from "./components/AnnotatedCode";
+export { ArtifactStateProvider, createArtifactCommentsFromState, createArtifactStateFromComments, useOptionalArtifactState } from "./components/ArtifactState";
+export type { ArtifactStateComment, ArtifactStateMessage, ArtifactStateMeta, ArtifactStateProviderProps, ArtifactStateStatus, ArtifactStateThread, ArtifactStateValue } from "./components/ArtifactState";
+export { Callout } from "./components/Callout";
+export type { CalloutProps, CalloutTone } from "./components/Callout";
+export { ComparisonSet } from "./components/ComparisonSet";
+export type { ComparisonSetItemProps, ComparisonSetProps } from "./components/ComparisonSet";
+export { CodeBlock } from "./components/CodeBlock";
+export type { CodeBlockProps } from "./components/CodeBlock";
+export { CommentableBlock, CommentExport, CommentLayer, CommentTarget, serializeCommentsToMarkdown, useOptionalCommentExportValue } from "./components/Comments";
+export type { ArtifactComment, CommentableBlockProps, CommentExportFormat, CommentExportProps, CommentExportValue, CommentLayerProps, CommentTargetProps } from "./components/Comments";
+export { DecisionMatrix } from "./components/DecisionMatrix";
+export type { DecisionMatrixOption, DecisionMatrixProps } from "./components/DecisionMatrix";
+export { DiffBlock } from "./components/DiffBlock";
+export type { DiffBlockProps, DiffLine, DiffLineType } from "./components/DiffBlock";
+export { ExportPanel } from "./components/ExportPanel";
+export type { ExportFormat, ExportPanelProps } from "./components/ExportPanel";
+export { InlineText } from "./components/InlineText";
+export type { InlineTextAs, InlineTextProps, InlineTextVariant } from "./components/InlineText";
+export { Columns, Frame, Grid, SplitPane, Stack } from "./components/Layout";
+export type { AkCollapseAt, AkGap, AkSurface, ColumnsProps, ColumnsRatio, FrameProps, GridProps, SplitPaneProps, SplitPaneRatio, StackProps } from "./components/Layout";
+export { MarkdownBody } from "./components/MarkdownBody";
+export type { MarkdownBodyProps, MarkdownBodyVariant } from "./components/MarkdownBody";
+export { OptionGrid } from "./components/OptionGrid";
+export type { OptionGridItem, OptionGridProps } from "./components/OptionGrid";
+export { Section } from "./components/Section";
+export type { SectionProps } from "./components/Section";
+export { SeverityBadge } from "./components/SeverityBadge";
+export type { SeverityBadgeProps, SeverityLevel } from "./components/SeverityBadge";
+export { componentRegistry, findComponentMeta } from "./registry";
+export type { ComponentMeta, ComponentPropMeta } from "./registry";
+export type { ArtifactKitConfig } from "../cli/types";

package/dist/lib/react/index.js

@@ -0,0 +1,16 @@
+export { AnnotatedCode } from "./components/AnnotatedCode.js";
+export { ArtifactStateProvider, createArtifactCommentsFromState, createArtifactStateFromComments, useOptionalArtifactState } from "./components/ArtifactState.js";
+export { Callout } from "./components/Callout.js";
+export { ComparisonSet } from "./components/ComparisonSet.js";
+export { CodeBlock } from "./components/CodeBlock.js";
+export { CommentableBlock, CommentExport, CommentLayer, CommentTarget, serializeCommentsToMarkdown, useOptionalCommentExportValue } from "./components/Comments.js";
+export { DecisionMatrix } from "./components/DecisionMatrix.js";
+export { DiffBlock } from "./components/DiffBlock.js";
+export { ExportPanel } from "./components/ExportPanel.js";
+export { InlineText } from "./components/InlineText.js";
+export { Columns, Frame, Grid, SplitPane, Stack } from "./components/Layout.js";
+export { MarkdownBody } from "./components/MarkdownBody.js";
+export { OptionGrid } from "./components/OptionGrid.js";
+export { Section } from "./components/Section.js";
+export { SeverityBadge } from "./components/SeverityBadge.js";
+export { componentRegistry, findComponentMeta } from "./registry.js";

package/dist/lib/react/registry.d.ts

@@ -0,0 +1,24 @@
+export type ComponentPropMeta = {
+    name: string;
+    type: string;
+    contentType?: "plainText" | "inlineMarkdown" | "blockMarkdown" | "json" | "code";
+    required?: boolean;
+    description: string;
+};
+export type ComponentTypeMeta = {
+    name: string;
+    description?: string;
+    fields: ComponentPropMeta[];
+};
+export type ComponentMeta = {
+    name: string;
+    category?: "artifact" | "content" | "layout" | "semantic";
+    stability?: "stable" | "advanced";
+    description: string;
+    useWhen: string[];
+    props: ComponentPropMeta[];
+    types?: ComponentTypeMeta[];
+    example: string;
+};
+export declare const componentRegistry: ComponentMeta[];
+export declare function findComponentMeta(name: string): ComponentMeta | undefined;