mdx-artifacts 0.1.2 → 0.2.0

package/dist/lib/cli/commands/validate.js

@@ -0,0 +1,311 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { componentRegistry } from "../../react/registry.js";
+import { validateResourceReferences } from "../resources/resource-policy.js";
+const componentsRequiringStableId = [
+    "Section",
+    "ComparisonSet",
+    "ComparisonSet.Item",
+    "AnnotatedCode",
+    "CodeBlock",
+    "DiffBlock",
+    "Callout",
+    "ContentItem",
+    "ContentSet",
+    "ContentSet.Item",
+    "SortableList"
+];
+const deprecatedAuthoringComponents = [
+    {
+        componentName: "DecisionMatrix",
+        warning: "DecisionMatrix is a deprecated compatibility component. Use ContentSet with ContentSet.Item children.",
+        suggestion: "Replace DecisionMatrix with ContentSet and ContentSet.Item children."
+    },
+    {
+        componentName: "DecisionMatrix.Option",
+        warning: "DecisionMatrix.Option is a deprecated compatibility component. Use ContentSet.Item.",
+        suggestion: "Replace DecisionMatrix.Option with ContentSet.Item."
+    },
+    {
+        componentName: "OptionGrid",
+        warning: "OptionGrid is a deprecated compatibility component. Use ContentSet with ContentSet.Item children.",
+        suggestion: "Replace OptionGrid with ContentSet and ContentSet.Item children."
+    },
+    {
+        componentName: "OptionGrid.Item",
+        warning: "OptionGrid.Item is a deprecated compatibility component. Use ContentSet.Item.",
+        suggestion: "Replace OptionGrid.Item with ContentSet.Item."
+    }
+];
+const deprecatedAuthoringProps = [
+    {
+        componentName: "DecisionMatrix",
+        propName: "question",
+        warning: 'DecisionMatrix prop "question" is deprecated. Use ContentSet prop "title".',
+        suggestion: 'Rename "question" to "title" when migrating to ContentSet.'
+    },
+    {
+        componentName: "DecisionMatrix",
+        propName: "options",
+        warning: 'DecisionMatrix prop "options" is deprecated. Use ContentSet.Item children.',
+        suggestion: "Move each option into an explicit ContentSet.Item child."
+    },
+    {
+        componentName: "DecisionMatrix.Option",
+        propName: "name",
+        warning: 'DecisionMatrix.Option prop "name" is deprecated. Use "title".',
+        suggestion: 'Rename "name" to "title".'
+    },
+    {
+        componentName: "DecisionMatrix.Option",
+        propName: "pros",
+        warning: 'DecisionMatrix.Option prop "pros" is deprecated. Move long lists into MDX children.',
+        suggestion: "Move pros into the ContentSet.Item MDX body."
+    },
+    {
+        componentName: "DecisionMatrix.Option",
+        propName: "cons",
+        warning: 'DecisionMatrix.Option prop "cons" is deprecated. Move long lists into MDX children.',
+        suggestion: "Move cons into the ContentSet.Item MDX body."
+    },
+    {
+        componentName: "DecisionMatrix.Option",
+        propName: "risks",
+        warning: 'DecisionMatrix.Option prop "risks" is deprecated. Move risks into MDX children.',
+        suggestion: "Move risks into the ContentSet.Item MDX body."
+    },
+    {
+        componentName: "DecisionMatrix.Option",
+        propName: "confidence",
+        warning: 'DecisionMatrix.Option prop "confidence" is deprecated. Use "badge" for short display labels.',
+        suggestion: 'Use "badge" for short display labels.'
+    },
+    {
+        componentName: "DecisionMatrix.Option",
+        propName: "verdict",
+        warning: 'DecisionMatrix.Option prop "verdict" is deprecated. Use "summary" or MDX children.',
+        suggestion: 'Use "summary" for short verdict text or move longer verdicts into children.'
+    },
+    {
+        componentName: "OptionGrid.Item",
+        propName: "name",
+        warning: 'OptionGrid.Item prop "name" is deprecated. Use "title".',
+        suggestion: 'Rename "name" to "title".'
+    },
+    {
+        componentName: "OptionGrid",
+        propName: "options",
+        warning: 'OptionGrid prop "options" is deprecated. Use ContentSet.Item children.',
+        suggestion: "Move each option into an explicit ContentSet.Item child."
+    },
+    {
+        componentName: "OptionGrid.Item",
+        propName: "intent",
+        warning: 'OptionGrid.Item prop "intent" is deprecated. Use "summary" for short intent text.',
+        suggestion: 'Rename "intent" to "summary" when the text is short.'
+    },
+    {
+        componentName: "OptionGrid.Item",
+        propName: "description",
+        warning: 'OptionGrid.Item prop "description" is deprecated. Move longer descriptions into MDX children.',
+        suggestion: "Move longer descriptions into the ContentSet.Item MDX body."
+    },
+    {
+        componentName: "OptionGrid.Item",
+        propName: "tradeoffs",
+        warning: 'OptionGrid.Item prop "tradeoffs" is deprecated. Move tradeoff lists into MDX children.',
+        suggestion: "Move tradeoff lists into the ContentSet.Item MDX body."
+    }
+];
+export async function validateMdx(filePath, options = {}) {
+    const result = createValidationResult();
+    if (path.extname(filePath) !== ".mdx") {
+        addDiagnostic(result, {
+            severity: "error",
+            code: "invalid_file_extension",
+            message: "Input file must be .mdx.",
+            sourcePath: filePath,
+            suggestion: "Pass a .mdx artifact source file to mdx-artifacts validate.",
+            example: "mdx-artifacts validate artifact-docs/examples/hello.mdx"
+        });
+        return result;
+    }
+    let source = "";
+    try {
+        source = await readFile(filePath, "utf8");
+    }
+    catch {
+        addDiagnostic(result, {
+            severity: "error",
+            code: "file_read_failed",
+            message: `Failed to read file: ${filePath}`,
+            sourcePath: filePath,
+            suggestion: "Confirm the file exists and is readable."
+        });
+        return result;
+    }
+    if (source.includes("<script")) {
+        addDiagnostic(result, {
+            severity: "error",
+            code: "raw_script_blocked",
+            message: "Do not write <script> directly in MDX. Wrap behavior in a controlled component.",
+            sourcePath: filePath,
+            suggestion: "Move browser behavior into a controlled React component instead of inline script tags."
+        });
+    }
+    if (options.config) {
+        const resourceDiagnostics = await validateResourceReferences({
+            projectRoot: options.projectRoot ?? process.cwd(),
+            references: options.config.styles.map((stylePath) => ({
+                type: "style",
+                path: stylePath,
+                sourcePath: filePath,
+                fieldName: "styles"
+            }))
+        });
+        for (const diagnostic of resourceDiagnostics) {
+            addDiagnostic(result, diagnostic);
+        }
+    }
+    if (!source.includes("ExportPanel") && !source.includes("CommentExport")) {
+        addDiagnostic(result, {
+            severity: "warning",
+            code: "export_component_missing",
+            message: "ExportPanel or equivalent export component not found. Interactive artifacts should provide an export path.",
+            sourcePath: filePath,
+            suggestion: "Add ExportPanel for result handoff, or CommentExport for comments-only artifacts.",
+            example: '<ExportPanel value={{ status: "ready" }} />'
+        });
+    }
+    if (source.length > 40_000) {
+        addDiagnostic(result, {
+            severity: "warning",
+            code: "mdx_file_large",
+            message: "MDX file is large. Move bulky data to adjacent JSON files.",
+            sourcePath: filePath,
+            suggestion: "Keep authored prose in MDX and move large structured data into adjacent files."
+        });
+    }
+    const knownComponents = componentRegistry.map((component) => component.name);
+    const usedArtifactComponent = knownComponents.some((name) => source.includes(`<${name}`));
+    if (!usedArtifactComponent) {
+        addDiagnostic(result, {
+            severity: "warning",
+            code: "high_level_component_missing",
+            message: "No first-stage high-level artifact component found. Confirm plain MDX is intentional.",
+            sourcePath: filePath,
+            suggestion: "Use high-level artifact components when the document needs structured workflow UI."
+        });
+    }
+    const sourceWithoutStringLiterals = stripStringLiterals(source);
+    for (const componentName of componentsRequiringStableId) {
+        if (hasOpeningTagWithoutProp(sourceWithoutStringLiterals, componentName, "id")) {
+            addDiagnostic(result, {
+                severity: "warning",
+                code: "stable_id_missing",
+                message: `${componentName} should include a stable id prop so comments and state can use a durable anchorId.`,
+                sourcePath: filePath,
+                componentName,
+                propName: "id",
+                suggestion: `Add a stable id prop to ${componentName}.`,
+                example: stableIdExample(componentName)
+            });
+        }
+    }
+    for (const deprecatedComponent of deprecatedAuthoringComponents) {
+        if (hasOpeningTag(sourceWithoutStringLiterals, deprecatedComponent.componentName)) {
+            addDiagnostic(result, {
+                severity: "warning",
+                code: "deprecated_component",
+                message: deprecatedComponent.warning,
+                sourcePath: filePath,
+                componentName: deprecatedComponent.componentName,
+                suggestion: deprecatedComponent.suggestion
+            });
+        }
+    }
+    for (const deprecatedProp of deprecatedAuthoringProps) {
+        if (hasOpeningTagWithProp(sourceWithoutStringLiterals, deprecatedProp.componentName, deprecatedProp.propName)) {
+            addDiagnostic(result, {
+                severity: "warning",
+                code: "deprecated_prop",
+                message: deprecatedProp.warning,
+                sourcePath: filePath,
+                componentName: deprecatedProp.componentName,
+                propName: deprecatedProp.propName,
+                suggestion: deprecatedProp.suggestion
+            });
+        }
+    }
+    return result;
+}
+function createValidationResult() {
+    return { diagnostics: [], errors: [], warnings: [] };
+}
+function addDiagnostic(result, diagnostic) {
+    result.diagnostics.push(diagnostic);
+    if (diagnostic.severity === "error") {
+        result.errors.push(diagnostic.message);
+        return;
+    }
+    if (diagnostic.severity === "warning") {
+        result.warnings.push(diagnostic.message);
+    }
+}
+export function formatValidationJson(result) {
+    return {
+        ok: result.errors.length === 0,
+        diagnostics: result.diagnostics
+    };
+}
+export function printValidationResult(result) {
+    for (const error of result.errors) {
+        console.error(`error: ${error}`);
+    }
+    for (const warning of result.warnings) {
+        console.warn(`warn: ${warning}`);
+    }
+    if (result.errors.length === 0 && result.warnings.length === 0) {
+        console.log("validate ok");
+    }
+}
+function stableIdExample(componentName) {
+    if (componentName.includes(".")) {
+        return `<${componentName} id="item.example" title="Example">Readable body.</${componentName}>`;
+    }
+    return `<${componentName} id="${componentName.toLowerCase()}.example" />`;
+}
+function stripStringLiterals(source) {
+    return source
+        .replace(/`(?:\\[\s\S]|[^`\\])*`/g, "``")
+        .replace(/"(?:\\.|[^"\\])*"/g, '""')
+        .replace(/'(?:\\.|[^'\\])*'/g, "''");
+}
+function hasOpeningTagWithoutProp(source, componentName, propName) {
+    const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const tagPattern = new RegExp(`<${escapedName}(?=[\\s>/])[^>]*>`, "g");
+    const propPattern = new RegExp(`\\s${propName}\\s*=`);
+    for (const match of source.matchAll(tagPattern)) {
+        const openingTag = match[0];
+        if (!propPattern.test(openingTag)) {
+            return true;
+        }
+    }
+    return false;
+}
+function hasOpeningTag(source, componentName) {
+    const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const tagPattern = new RegExp(`<${escapedName}(?=[\\s>/])`);
+    return tagPattern.test(source);
+}
+function hasOpeningTagWithProp(source, componentName, propName) {
+    const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const tagPattern = new RegExp(`<${escapedName}(?=[\\s>/])[^>]*>`, "g");
+    const propPattern = new RegExp(`\\s${propName}\\s*=`);
+    for (const match of source.matchAll(tagPattern)) {
+        if (propPattern.test(match[0])) {
+            return true;
+        }
+    }
+    return false;
+}

package/dist/lib/cli/config/config.d.ts

@@ -0,0 +1,2 @@
+import type { MdxArtifactsConfig } from "./types";
+export declare function loadConfig(projectRoot: string): Promise<Required<MdxArtifactsConfig>>;

package/dist/lib/cli/{config.js → config/config.js}

@@ -6,7 +6,8 @@ const defaultConfig = {
     includeDefaultStyles: true,
     outDir: "dist/artifacts",
     port: 4321,
-    styles: []
+    styles: [],
+    tailwindSources: []
 };
 export async function loadConfig(projectRoot) {
     const configPath = await findConfigPath(projectRoot);
@@ -22,7 +23,7 @@ export async function loadConfig(projectRoot) {
     }
 }
 async function findConfigPath(projectRoot) {
-    for (const filename of ["artifact-kit.config.mjs", "artifact-kit.config.js", "artifact-kit.config.ts"]) {
+    for (const filename of ["mdx-artifacts.config.mjs", "mdx-artifacts.config.js", "mdx-artifacts.config.ts"]) {
         const configPath = path.join(projectRoot, filename);
         try {
             await access(configPath);

package/dist/lib/cli/{types.d.ts → config/types.d.ts}

@@ -1,7 +1,8 @@
-export type ArtifactKitConfig = {
+export type MdxArtifactsConfig = {
     docsDir?: string;
     includeDefaultStyles?: boolean;
     outDir?: string;
     port?: number;
     styles?: string[];
+    tailwindSources?: string[];
 };

package/dist/lib/cli/{vite-artifact.d.ts → dev-server/vite-artifact.d.ts}

@@ -1,6 +1,6 @@
 import type { InlineConfig, ViteDevServer } from "vite";
-import { type ArtifactRoute } from "./artifact-state";
-import type { ArtifactKitConfig } from "./types";
+import { type ArtifactRoute } from "../state/artifact-state";
+import type { MdxArtifactsConfig } from "../config/types";
 export type ArtifactProject = {
     artifact: ArtifactRoute;
     tmpDir: string;
@@ -8,6 +8,6 @@ export type ArtifactProject = {
     config: InlineConfig;
     cleanup: () => Promise<void>;
 };
-export declare function createArtifactProject(projectRoot: string, mdxPath: string, config: Required<ArtifactKitConfig>): Promise<ArtifactProject>;
+export declare function createArtifactProject(projectRoot: string, mdxPath: string, config: Required<MdxArtifactsConfig>): 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 → dev-server/vite-artifact.js}

@@ -7,21 +7,24 @@ import { createRequire } from "node:module";
 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";
+import { createArtifactMeta, createArtifactRoute, readArtifactState, writeArtifactState } from "../state/artifact-state.js";
+import { addInteractionItemService, promoteInteractionService, removeInteractionItemService, resetInteractionService, setInteractionOrderService, updateInteractionItemService } from "../services/interaction-service.js";
 const packageCliDir = path.dirname(fileURLToPath(import.meta.url));
-const defaultStylesPath = path.resolve(packageCliDir, "../react/styles.css");
+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 tmpDir = path.join(projectRoot, ".mdx-artifacts", "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 tailwindSourcePath = path.join(srcDir, "artifact-tailwind-sources.css");
     const mdxImport = toRelativeImport(entryPath, mdxPath);
-    const styleImports = createStyleImports(projectRoot, entryPath, config);
+    const styleImports = createStyleImports(projectRoot, entryPath, config, tailwindSourcePath);
     const reactEntryPath = await resolveReactEntryPath();
     const reactEntryImport = toRelativeImport(entryPath, reactEntryPath);
     const reactAliases = resolveReactAliases(projectRoot);
     await mkdir(srcDir, { recursive: true });
+    await writeFile(tailwindSourcePath, createTailwindSourceCss(projectRoot, tailwindSourcePath, mdxPath, config));
     await writeFile(path.join(tmpDir, "index.html"), `<!doctype html>
 <html lang="en">
   <head>
@@ -37,7 +40,7 @@ export async function createArtifactProject(projectRoot, mdxPath, config) {
 `);
     await writeFile(entryPath, `import React from "react";
 import { createRoot } from "react-dom/client";
-import { ArtifactStateProvider, CommentLayer } from "${reactEntryImport}";
+import { ArtifactStateProvider, CommentLayer, artifactMdxComponents } from "${reactEntryImport}";
 import Doc from "${mdxImport}";
 ${styleImports}
 
@@ -47,7 +50,7 @@ function App() {
       <article className="ak-document">
         <ArtifactStateProvider>
           <CommentLayer>
-            <Doc />
+            <Doc components={artifactMdxComponents} />
           </CommentLayer>
         </ArtifactStateProvider>
       </article>
@@ -98,7 +101,7 @@ createRoot(document.getElementById("root")!).render(<App />);
 }
 function artifactStatePlugin(projectRoot, artifact) {
     return {
-        name: "artifact-kit-state",
+        name: "mdx-artifacts-state",
         configureServer(server) {
             server.middlewares.use(async (request, response, next) => {
                 const requestUrl = new URL(request.url ?? "/", "http://localhost");
@@ -111,6 +114,10 @@ function artifactStatePlugin(projectRoot, artifact) {
                         await handleArtifactState(projectRoot, artifact, request, response);
                         return;
                     }
+                    if (requestUrl.pathname.startsWith("/__artifact/interactions/")) {
+                        await handleArtifactInteraction(projectRoot, artifact, requestUrl.pathname, request, response);
+                        return;
+                    }
                 }
                 catch (error) {
                     sendJson(response, 500, {
@@ -150,6 +157,143 @@ async function handleArtifactState(projectRoot, artifact, request, response) {
     }
     sendJson(response, 405, { error: "Method not allowed." });
 }
+async function handleArtifactInteraction(projectRoot, artifact, pathname, request, response) {
+    if (request.method !== "POST") {
+        sendJson(response, 405, { error: "Method not allowed." });
+        return;
+    }
+    let value;
+    try {
+        value = JSON.parse(await readRequestBody(request));
+    }
+    catch {
+        sendJson(response, 400, { error: "Request body must be valid JSON." });
+        return;
+    }
+    try {
+        if (pathname === "/__artifact/interactions/set-order") {
+            const body = parseSetOrderRequest(value);
+            const result = await setInteractionOrderService(projectRoot, artifact.sourceRelativePath, body.id, body.orderedIds);
+            sendJson(response, 200, { ok: true, result, state: result.state });
+            return;
+        }
+        if (pathname === "/__artifact/interactions/reset") {
+            const body = parseInteractionIdRequest(value, "reset");
+            const result = await resetInteractionService(projectRoot, artifact.sourceRelativePath, body.id);
+            sendJson(response, 200, { ok: true, result, state: result.state });
+            return;
+        }
+        if (pathname === "/__artifact/interactions/promote") {
+            const body = parseInteractionIdRequest(value, "promote");
+            const result = await promoteInteractionService(projectRoot, artifact.sourceRelativePath, body.id);
+            sendJson(response, 200, { ok: true, result, state: result.state });
+            return;
+        }
+        if (pathname === "/__artifact/interactions/add-item") {
+            const body = parseAddItemRequest(value);
+            const result = await addInteractionItemService(projectRoot, artifact.sourceRelativePath, body.id, body.item, {
+                afterId: body.afterId
+            });
+            sendJson(response, 200, { ok: true, result, state: result.state });
+            return;
+        }
+        if (pathname === "/__artifact/interactions/remove-item") {
+            const body = parseItemIdRequest(value, "remove-item");
+            const result = await removeInteractionItemService(projectRoot, artifact.sourceRelativePath, body.id, body.itemId);
+            sendJson(response, 200, { ok: true, result, state: result.state });
+            return;
+        }
+        if (pathname === "/__artifact/interactions/update-item") {
+            const body = parseUpdateItemRequest(value);
+            const result = await updateInteractionItemService(projectRoot, artifact.sourceRelativePath, body.id, body.itemId, body.patch);
+            sendJson(response, 200, { ok: true, result, state: result.state });
+            return;
+        }
+    }
+    catch (error) {
+        sendJson(response, 400, { error: error instanceof Error ? error.message : String(error) });
+        return;
+    }
+    sendJson(response, 404, { error: "Interaction endpoint not found." });
+}
+function parseAddItemRequest(value) {
+    const body = parseInteractionIdRequest(value, "add-item");
+    if (!isRecord(value) || !isRecord(value.item)) {
+        throw new Error("interactions add-item requires item.");
+    }
+    if (typeof value.item.id !== "string" || !value.item.id) {
+        throw new Error("interactions add-item requires item.id.");
+    }
+    if (typeof value.item.title !== "string" || !value.item.title) {
+        throw new Error("interactions add-item requires item.title.");
+    }
+    return {
+        id: body.id,
+        item: normalizeItem(value.item),
+        afterId: typeof value.afterId === "string" && value.afterId ? value.afterId : undefined
+    };
+}
+function parseUpdateItemRequest(value) {
+    const body = parseItemIdRequest(value, "update-item");
+    if (!isRecord(value) || !isRecord(value.patch)) {
+        throw new Error("interactions update-item requires patch.");
+    }
+    return {
+        id: body.id,
+        itemId: body.itemId,
+        patch: normalizeItemPatch(value.patch)
+    };
+}
+function parseItemIdRequest(value, action) {
+    const body = parseInteractionIdRequest(value, action);
+    if (!isRecord(value) || typeof value.itemId !== "string" || !value.itemId) {
+        throw new Error(`interactions ${action} requires itemId.`);
+    }
+    return {
+        id: body.id,
+        itemId: value.itemId
+    };
+}
+function parseSetOrderRequest(value) {
+    const body = parseInteractionIdRequest(value, "set-order");
+    if (!isRecord(value) || !Array.isArray(value.orderedIds)) {
+        throw new Error("interactions set-order requires orderedIds.");
+    }
+    const orderedIds = value.orderedIds.filter((itemId) => typeof itemId === "string");
+    if (orderedIds.length !== value.orderedIds.length || orderedIds.length === 0) {
+        throw new Error("interactions set-order requires non-empty string orderedIds.");
+    }
+    return {
+        id: body.id,
+        orderedIds
+    };
+}
+function normalizeItem(value) {
+    return {
+        id: value.id,
+        title: value.title,
+        ...normalizeItemPatch(value)
+    };
+}
+function normalizeItemPatch(value) {
+    return {
+        ...(typeof value.title === "string" ? { title: value.title } : {}),
+        ...("summary" in value ? { summary: typeof value.summary === "string" ? value.summary : undefined } : {}),
+        ...("badge" in value ? { badge: typeof value.badge === "string" ? value.badge : undefined } : {}),
+        ...("tags" in value
+            ? { tags: Array.isArray(value.tags) ? value.tags.filter((tag) => typeof tag === "string") : undefined }
+            : {}),
+        ...(typeof value.disabled === "boolean" ? { disabled: value.disabled } : {})
+    };
+}
+function parseInteractionIdRequest(value, action) {
+    if (!isRecord(value) || typeof value.id !== "string" || !value.id) {
+        throw new Error(`interactions ${action} requires id.`);
+    }
+    return {
+        id: value.id
+    };
+}
 function readRequestBody(request) {
     return new Promise((resolve, reject) => {
         let body = "";
@@ -166,9 +310,12 @@ function sendJson(response, statusCode, value) {
     response.setHeader("content-type", "application/json; charset=utf-8");
     response.end(JSON.stringify(value, null, 2));
 }
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 async function resolveReactEntryPath() {
-    const builtEntryPath = path.resolve(packageCliDir, "../react/index.js");
-    const sourceEntryPath = path.resolve(packageCliDir, "../react/index.ts");
+    const builtEntryPath = path.resolve(packageCliDir, "../../react/index.js");
+    const sourceEntryPath = path.resolve(packageCliDir, "../../react/index.ts");
     try {
         await access(builtEntryPath);
         return builtEntryPath;
@@ -234,13 +381,26 @@ 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) {
+function createStyleImports(projectRoot, entryPath, config, tailwindSourcePath) {
     const styles = [
+        tailwindSourcePath,
         ...(config.includeDefaultStyles ? [defaultStylesPath] : []),
         ...config.styles.map((stylePath) => path.resolve(projectRoot, stylePath))
     ];
     return styles.map((stylePath) => `import "${toRelativeImport(entryPath, stylePath)}";`).join("\n");
 }
+function createTailwindSourceCss(projectRoot, sourceStylesPath, mdxPath, config) {
+    const sources = [
+        mdxPath,
+        ...config.tailwindSources.map((sourcePath) => path.resolve(projectRoot, sourcePath))
+    ];
+    return `@import "tailwindcss";\n${sources
+        .map((sourcePath) => `@source "${escapeCssString(toRelativeImport(sourceStylesPath, sourcePath))}";`)
+        .join("\n")}\n`;
+}
+function escapeCssString(value) {
+    return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
 async function replaceAsync(source, pattern, replacer) {
     const matches = Array.from(source.matchAll(pattern));
     let output = source;

package/dist/lib/cli/diagnostics/diagnostics.d.ts

@@ -0,0 +1,11 @@
+export type ArtifactDiagnostic = {
+    severity: "error" | "warning" | "info";
+    code: string;
+    message: string;
+    sourcePath: string;
+    line?: number;
+    componentName?: string;
+    propName?: string;
+    suggestion?: string;
+    example?: string;
+};

package/dist/lib/cli/diagnostics/diagnostics.js

@@ -0,0 +1 @@
+export {};