mdx-artifacts 0.1.1 → 0.2.0

package/dist/lib/cli/services/interaction-service.js

@@ -0,0 +1,226 @@
+import { readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { createArtifactMeta, createArtifactRoute, readArtifactState, writeArtifactState } from "../state/artifact-state.js";
+import { loadConfig } from "../config/config.js";
+import { addSortableListItem as addSortableListItemSource, extractSortableListSeeds, promoteSortableListOrder, removeSortableListItem as removeSortableListItemSource, updateSortableListItem as updateSortableListItemSource } from "../mdx/sortable-list.js";
+export async function inspectInteractionService(projectRoot, input, id) {
+    const artifact = await createArtifactFromInput(projectRoot, input);
+    const meta = await createArtifactMeta(projectRoot, artifact);
+    const state = await readArtifactState(artifact);
+    const source = await readFile(artifact.sourcePath, "utf8");
+    const component = findSortableList(source, id);
+    const persistedOrder = readPersistedOrder(state.interactions[id]);
+    const resolvedOrder = resolveOrder(component, persistedOrder);
+    const warnings = createInspectWarnings(id, resolvedOrder.staleIds);
+    return {
+        component,
+        order: resolvedOrder,
+        state: {
+            path: meta.statePath,
+            exists: meta.stateExists
+        },
+        source: {
+            path: meta.sourcePath
+        },
+        warnings
+    };
+}
+export async function setInteractionOrderService(projectRoot, input, id, orderedIds) {
+    const { artifact, component } = await loadSortableList(projectRoot, input, id);
+    validateOrderedIds(component, orderedIds);
+    const state = await readArtifactState(artifact);
+    const interaction = createSortableListInteraction(component, orderedIds);
+    const nextState = await writeArtifactState(projectRoot, artifact, {
+        ...state,
+        interactions: {
+            ...state.interactions,
+            [id]: interaction
+        }
+    });
+    return createMutationResult("set-order", artifact, id, nextState, { orderedIds });
+}
+export async function resetInteractionService(projectRoot, input, id) {
+    const { artifact } = await loadSortableList(projectRoot, input, id);
+    const state = await readArtifactState(artifact);
+    const { [id]: _removed, ...interactions } = state.interactions;
+    const nextState = await writeArtifactState(projectRoot, artifact, {
+        ...state,
+        interactions
+    });
+    return createMutationResult("reset", artifact, id, nextState);
+}
+export async function promoteInteractionService(projectRoot, input, id) {
+    const { artifact, component, source } = await loadSortableList(projectRoot, input, id);
+    const state = await readArtifactState(artifact);
+    const orderedIds = readPersistedOrder(state.interactions[id]);
+    if (!orderedIds) {
+        return createMutationResult("promote", artifact, id, state, { status: "noop", reason: "no runtime overlay" });
+    }
+    validateOrderedIds(component, orderedIds);
+    const nextSource = promoteSortableListOrder(source, id, orderedIds);
+    await writeFile(artifact.sourcePath, nextSource, "utf8");
+    const { [id]: _removed, ...interactions } = state.interactions;
+    const nextState = await writeArtifactState(projectRoot, artifact, {
+        ...state,
+        interactions
+    });
+    return createMutationResult("promote", artifact, id, nextState, { orderedIds });
+}
+export async function addInteractionItemService(projectRoot, input, id, item, options = {}) {
+    const { artifact, source } = await loadSortableList(projectRoot, input, id);
+    const nextSource = addSortableListItemSource(source, id, item, options);
+    const nextComponent = readSortableListFromSource(nextSource, id);
+    await writeFile(artifact.sourcePath, nextSource, "utf8");
+    const nextState = await syncInteractionOverlay(projectRoot, artifact, id, nextComponent);
+    return createMutationResult("add-item", artifact, id, nextState, { itemId: item.id });
+}
+export async function removeInteractionItemService(projectRoot, input, id, itemId) {
+    const { artifact, source } = await loadSortableList(projectRoot, input, id);
+    const nextSource = removeSortableListItemSource(source, id, itemId);
+    const nextComponent = readSortableListFromSource(nextSource, id);
+    await writeFile(artifact.sourcePath, nextSource, "utf8");
+    const nextState = await syncInteractionOverlay(projectRoot, artifact, id, nextComponent);
+    return createMutationResult("remove-item", artifact, id, nextState, { itemId });
+}
+export async function updateInteractionItemService(projectRoot, input, id, itemId, patch) {
+    const { artifact, source } = await loadSortableList(projectRoot, input, id);
+    const nextSource = updateSortableListItemSource(source, id, itemId, patch);
+    const nextComponent = readSortableListFromSource(nextSource, id);
+    await writeFile(artifact.sourcePath, nextSource, "utf8");
+    const nextState = await syncInteractionOverlay(projectRoot, artifact, id, nextComponent);
+    return createMutationResult("update-item", artifact, id, nextState, { itemId });
+}
+async function createArtifactFromInput(projectRoot, input) {
+    const config = await loadConfig(projectRoot);
+    const mdxPath = path.resolve(projectRoot, input);
+    return createArtifactRoute(projectRoot, mdxPath, config.docsDir);
+}
+async function loadSortableList(projectRoot, input, id) {
+    const artifact = await createArtifactFromInput(projectRoot, input);
+    const source = await readFile(artifact.sourcePath, "utf8");
+    const component = findSortableList(source, id);
+    return { artifact, component, source };
+}
+function findSortableList(source, id) {
+    const seeds = extractSortableListSeeds(source);
+    const component = seeds.find((seed) => seed.id === id);
+    if (!component) {
+        const availableIds = seeds.map((seed) => seed.id);
+        throw new Error(availableIds.length > 0
+            ? `SortableList not found: ${id}. Available SortableList ids: ${availableIds.join(", ")}.`
+            : `SortableList not found: ${id}.`);
+    }
+    return component;
+}
+function validateOrderedIds(component, orderedIds) {
+    const itemIds = component.items.map((item) => item.id);
+    const expectedIds = new Set(itemIds);
+    const seenIds = new Set();
+    const duplicateIds = new Set();
+    const unknownIds = new Set();
+    for (const orderedId of orderedIds) {
+        if (seenIds.has(orderedId)) {
+            duplicateIds.add(orderedId);
+        }
+        seenIds.add(orderedId);
+        if (!expectedIds.has(orderedId)) {
+            unknownIds.add(orderedId);
+        }
+    }
+    const missingIds = itemIds.filter((itemId) => !seenIds.has(itemId));
+    const errors = [
+        duplicateIds.size > 0 ? `duplicate ids: ${Array.from(duplicateIds).join(", ")}` : undefined,
+        unknownIds.size > 0 ? `unknown ids: ${Array.from(unknownIds).join(", ")}` : undefined,
+        missingIds.length > 0 ? `missing ids: ${missingIds.join(", ")}` : undefined
+    ].filter(Boolean);
+    if (errors.length > 0) {
+        throw new Error(`Invalid orderedIds for SortableList ${component.id}: ${errors.join("; ")}.`);
+    }
+}
+async function syncInteractionOverlay(projectRoot, artifact, id, component) {
+    const state = await readArtifactState(artifact);
+    const orderedIds = readPersistedOrder(state.interactions[id]);
+    if (!orderedIds) {
+        return state;
+    }
+    const nextOrder = resolveOrder(component, orderedIds).orderedIds;
+    return writeArtifactState(projectRoot, artifact, {
+        ...state,
+        interactions: {
+            ...state.interactions,
+            [id]: createSortableListInteraction(component, nextOrder)
+        }
+    });
+}
+function readSortableListFromSource(source, id) {
+    const component = extractSortableListSeeds(source).find((seed) => seed.id === id);
+    if (!component) {
+        throw new Error(`SortableList not found: ${id}.`);
+    }
+    return component;
+}
+function createSortableListInteraction(component, orderedIds) {
+    return {
+        type: "sortable-list",
+        id: component.id,
+        title: component.title,
+        orderedIds,
+        orderedItems: orderedIds.map((itemId) => {
+            const item = component.items.find((candidate) => candidate.id === itemId);
+            if (!item) {
+                throw new Error(`SortableList item not found: ${itemId}`);
+            }
+            return item;
+        }),
+        updatedAt: new Date().toISOString()
+    };
+}
+function readPersistedOrder(interaction) {
+    if (!isRecord(interaction) || !Array.isArray(interaction.orderedIds)) {
+        return undefined;
+    }
+    const orderedIds = interaction.orderedIds.filter((itemId) => typeof itemId === "string");
+    return orderedIds.length > 0 ? orderedIds : undefined;
+}
+function resolveOrder(component, persistedOrder) {
+    const itemIds = component.items.map((item) => item.id);
+    if (!persistedOrder) {
+        return {
+            source: "mdx",
+            orderedIds: itemIds,
+            staleIds: [],
+            appendedIds: []
+        };
+    }
+    const knownIds = new Set(itemIds);
+    const staleIds = persistedOrder.filter((itemId) => !knownIds.has(itemId));
+    const retainedIds = persistedOrder.filter((itemId) => knownIds.has(itemId));
+    const retainedIdSet = new Set(retainedIds);
+    const appendedIds = itemIds.filter((itemId) => !retainedIdSet.has(itemId));
+    return {
+        source: "state",
+        orderedIds: [...retainedIds, ...appendedIds],
+        staleIds,
+        appendedIds
+    };
+}
+function createInspectWarnings(id, staleIds) {
+    if (staleIds.length === 0) {
+        return [];
+    }
+    return [`SortableList ${id} state contains stale orderedIds ignored by inspect: ${staleIds.join(", ")}.`];
+}
+function createMutationResult(action, artifact, id, state, extra = {}) {
+    return {
+        action,
+        component: id,
+        sourcePath: artifact.sourceRelativePath,
+        statePath: artifact.stateRelativePath,
+        state,
+        status: extra.status ?? "ok",
+        ...extra
+    };
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/dist/lib/cli/services/review.d.ts

@@ -0,0 +1,43 @@
+export type ReviewReply = {
+    threadId: string;
+    body: string;
+};
+export type ReviewAddOptions = {
+    anchorId: string;
+    body: string;
+    title?: string;
+};
+export type ReviewReplyOptions = {
+    replies: ReviewReply[];
+    status?: string;
+};
+export type ReviewAddResult = {
+    anchorId: string;
+    statePath: string;
+    threadId: string;
+};
+export type ReviewReplyResult = {
+    messageRecords: Array<{
+        threadId: string;
+        messageId: string;
+    }>;
+    statePath: string;
+};
+export type ReviewValidationResult = {
+    anchorCount: number;
+    missingThreads: ReviewMissingThread[];
+    statePath: string;
+    threadCount: number;
+};
+export type ReviewMissingThread = {
+    anchorId: string;
+    threadId: string;
+    title?: string;
+    status?: string;
+};
+export declare function addReviewThreadService(projectRoot: string, input: string, options: ReviewAddOptions): Promise<ReviewAddResult>;
+export declare function replyToReviewThreadService(projectRoot: string, input: string, options: ReviewReply & {
+    status?: string;
+}): Promise<ReviewReplyResult>;
+export declare function replyToReviewThreadsService(projectRoot: string, input: string, options: ReviewReplyOptions): Promise<ReviewReplyResult>;
+export declare function validateReviewStateService(projectRoot: string, input: string): Promise<ReviewValidationResult>;

package/dist/lib/cli/{review.js → services/review.js}

@@ -1,31 +1,8 @@
 import { readFile } from "node:fs/promises";
 import path from "node:path";
-import { createArtifactRoute, readArtifactState, writeArtifactState } from "./artifact-state.js";
-import { loadConfig } from "./config.js";
-export async function reviewCommand(projectRoot, args) {
-    const [subcommand] = args;
-    if (subcommand === "add") {
-        const options = parseReviewAddArgs(args.slice(1));
-        console.log(await addReviewThread(projectRoot, options.input, options));
-        return;
-    }
-    if (subcommand === "reply") {
-        const options = parseReviewReplyArgs(args.slice(1));
-        console.log(await replyToReviewThreads(projectRoot, options.input, options));
-        return;
-    }
-    if (subcommand === "validate") {
-        const input = parseReviewValidateArgs(args.slice(1));
-        const result = await validateReviewState(projectRoot, input);
-        console.log(result.output);
-        if (result.missingThreads.length > 0) {
-            process.exitCode = 1;
-        }
-        return;
-    }
-    throw new Error("review requires a subcommand. Use `artifact-kit review add <file.mdx>`, `artifact-kit review reply <file.mdx>`, or `artifact-kit review validate <file.mdx>`.");
-}
-export async function addReviewThread(projectRoot, input, options) {
+import { loadConfig } from "../config/config.js";
+import { createArtifactRoute, readArtifactState, writeArtifactState } from "../state/artifact-state.js";
+export async function addReviewThreadService(projectRoot, input, options) {
     const artifact = await createArtifactFromInput(projectRoot, input);
     const state = await readArtifactState(artifact);
     const source = await readFile(artifact.sourcePath, "utf8");
@@ -49,15 +26,19 @@ export async function addReviewThread(projectRoot, input, options) {
         ...state,
         threads: [...state.threads, thread]
     });
-    return [`review add ok`, `state: ${artifact.stateRelativePath}`, `thread: ${threadId}`, `anchorId: ${options.anchorId}`].join("\n");
+    return {
+        anchorId: options.anchorId,
+        statePath: artifact.stateRelativePath,
+        threadId
+    };
 }
-export async function replyToReviewThread(projectRoot, input, options) {
-    return replyToReviewThreads(projectRoot, input, {
+export async function replyToReviewThreadService(projectRoot, input, options) {
+    return replyToReviewThreadsService(projectRoot, input, {
         replies: [{ threadId: options.threadId, body: options.body }],
         ...(options.status ? { status: options.status } : {})
     });
 }
-export async function replyToReviewThreads(projectRoot, input, options) {
+export async function replyToReviewThreadsService(projectRoot, input, options) {
     const artifact = await createArtifactFromInput(projectRoot, input);
     const state = await readArtifactState(artifact);
     const repliesByThread = groupRepliesByThread(options.replies);
@@ -90,14 +71,12 @@ export async function replyToReviewThreads(projectRoot, input, options) {
         ...state,
         threads
     });
-    return [
-        `review reply ok`,
-        `state: ${artifact.stateRelativePath}`,
-        `messages: ${messageRecords.length}`,
-        ...messageRecords.map((record) => `- thread: ${record.threadId} message: ${record.messageId}`)
-    ].join("\n");
+    return {
+        messageRecords,
+        statePath: artifact.stateRelativePath
+    };
 }
-export async function validateReviewState(projectRoot, input) {
+export async function validateReviewStateService(projectRoot, input) {
     const artifact = await createArtifactFromInput(projectRoot, input);
     const state = await readArtifactState(artifact);
     const source = await readFile(artifact.sourcePath, "utf8");
@@ -116,32 +95,10 @@ export async function validateReviewState(projectRoot, input) {
             }
         ];
     });
-    const output = missingThreads.length === 0
-        ? [
-            `review validate ok`,
-            `state: ${artifact.stateRelativePath}`,
-            `anchors: ${anchorIds.size}`,
-            `threads: ${threads.length}`
-        ].join("\n")
-        : [
-            `review validate failed`,
-            `state: ${artifact.stateRelativePath}`,
-            `anchors: ${anchorIds.size}`,
-            `threads: ${threads.length}`,
-            `missing: ${missingThreads.length}`,
-            ...missingThreads.map((thread) => [
-                `- thread: ${thread.threadId}`,
-                `anchorId: ${thread.anchorId}`,
-                thread.status ? `status: ${thread.status}` : undefined,
-                thread.title ? `title: ${thread.title}` : undefined
-            ]
-                .filter(Boolean)
-                .join(" "))
-        ].join("\n");
     return {
         anchorCount: anchorIds.size,
         missingThreads,
-        output,
+        statePath: artifact.stateRelativePath,
         threadCount: threads.length
     };
 }
@@ -150,116 +107,6 @@ async function createArtifactFromInput(projectRoot, input) {
     const mdxPath = path.resolve(projectRoot, input);
     return createArtifactRoute(projectRoot, mdxPath, config.docsDir);
 }
-function parseReviewReplyArgs(args) {
-    const [input, ...rest] = args;
-    if (!input) {
-        throw new Error("review reply requires a .mdx file path.");
-    }
-    const { replies, status } = parseReviewReplyOptions(rest);
-    return {
-        input,
-        replies,
-        ...(status ? { status } : {})
-    };
-}
-function parseReviewValidateArgs(args) {
-    const [input, ...rest] = args;
-    if (!input) {
-        throw new Error("review validate requires a .mdx file path.");
-    }
-    if (rest.length > 0) {
-        throw new Error(`Unexpected review validate argument: ${rest[0]}`);
-    }
-    return input;
-}
-function parseReviewAddArgs(args) {
-    const [input, ...rest] = args;
-    if (!input) {
-        throw new Error("review add requires a .mdx file path.");
-    }
-    const options = parseKeyValueOptions(rest, ["anchor", "body", "title"]);
-    const anchorId = options.get("anchor");
-    const body = options.get("body");
-    const title = options.get("title");
-    if (!anchorId) {
-        throw new Error("review add requires --anchor <anchorId>.");
-    }
-    if (!body || !body.trim()) {
-        throw new Error("review add requires --body <message>.");
-    }
-    return {
-        input,
-        anchorId,
-        body: body.trim(),
-        ...(title ? { title } : {})
-    };
-}
-function parseKeyValueOptions(args, allowedKeys) {
-    const options = new Map();
-    for (let index = 0; index < args.length; index += 1) {
-        const name = args[index];
-        if (!name?.startsWith("--")) {
-            throw new Error(`Unexpected review argument: ${name}`);
-        }
-        const key = name.slice(2);
-        const value = args[index + 1];
-        if (!allowedKeys.includes(key)) {
-            throw new Error(`Unknown review option: --${key}.`);
-        }
-        if (!value || value.startsWith("--")) {
-            throw new Error(`Missing value for --${key}.`);
-        }
-        options.set(key, value);
-        index += 1;
-    }
-    return options;
-}
-function parseReviewReplyOptions(args) {
-    const replies = [];
-    let status;
-    let threadId;
-    for (let index = 0; index < args.length; index += 1) {
-        const name = args[index];
-        if (!name?.startsWith("--")) {
-            throw new Error(`Unexpected review reply argument: ${name}`);
-        }
-        const key = name.slice(2);
-        const value = args[index + 1];
-        if (!value || value.startsWith("--")) {
-            throw new Error(`Missing value for --${key}.`);
-        }
-        if (key === "thread") {
-            if (threadId) {
-                throw new Error(`Missing --body for --thread ${threadId}.`);
-            }
-            threadId = value;
-        }
-        else if (key === "body") {
-            if (!threadId) {
-                throw new Error("review reply requires --thread before --body.");
-            }
-            if (!value.trim()) {
-                throw new Error("review reply requires --body <message>.");
-            }
-            replies.push({ threadId, body: value.trim() });
-            threadId = undefined;
-        }
-        else if (key === "status") {
-            status = value;
-        }
-        else {
-            throw new Error(`Unknown review reply option: --${key}.`);
-        }
-        index += 1;
-    }
-    if (threadId) {
-        throw new Error(`Missing --body for --thread ${threadId}.`);
-    }
-    if (replies.length === 0) {
-        throw new Error("review reply requires at least one --thread <threadId> --body <message> pair.");
-    }
-    return { replies, status };
-}
 function groupRepliesByThread(replies) {
     const repliesByThread = new Map();
     for (const reply of replies) {
@@ -306,8 +153,7 @@ function extractReviewAnchorIds(source) {
             anchorIds.add(match[2]);
         }
     }
-    addArrayChildAnchors(source, anchorIds, "DecisionMatrix", "options");
-    addArrayChildAnchors(source, anchorIds, "OptionGrid", "options");
+    addCompoundChildAnchors(source, anchorIds, "ContentSet", "Item");
     addArrayChildAnchors(source, anchorIds, "AnnotatedCode", "annotations", { addCodeChild: true });
     addComparisonSetChildAnchors(source, anchorIds);
     return anchorIds;
@@ -332,6 +178,22 @@ function addArrayChildAnchors(source, anchorIds, componentName, arrayPropName, o
         }
     }
 }
+function addCompoundChildAnchors(source, anchorIds, componentName, childName) {
+    const componentPattern = new RegExp(`<${componentName}\\b[\\s\\S]*?</${componentName}>`, "g");
+    const childPattern = new RegExp(`<${componentName}\\.${childName}\\b[^>]*\\sid\\s*=\\s*["']([^"']+)["'][^>]*>`, "g");
+    for (const match of source.matchAll(componentPattern)) {
+        const componentSource = match[0];
+        const parentId = extractJsxStringProp(componentSource, "id");
+        if (!parentId) {
+            continue;
+        }
+        for (const childMatch of componentSource.matchAll(childPattern)) {
+            if (childMatch[1]) {
+                anchorIds.add(`${parentId}.${childMatch[1]}`);
+            }
+        }
+    }
+}
 function addComparisonSetChildAnchors(source, anchorIds) {
     for (const match of source.matchAll(/<ComparisonSet\b[\s\S]*?<\/ComparisonSet>/g)) {
         const componentSource = match[0];

package/dist/lib/react/{components → composites/comparison-set}/ComparisonSet.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type AkCollapseAt, type AkGap } from "./Layout";
+import { type AkCollapseAt, type AkGap } from "../../layout/layout-primitives/Layout";
 export type ComparisonSetProps = {
     id?: string;
     title: string;

package/dist/lib/react/{components → composites/comparison-set}/ComparisonSet.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-import { Grid } from "./Layout.js";
-import { InlineText } from "./InlineText.js";
-import { CommentTarget } from "./Comments.js";
+import { CommentTarget } from "../../interactions/comments/Comments.js";
+import { Grid } from "../../layout/layout-primitives/Layout.js";
+import { InlineText } from "../../primitives/inline-text/InlineText.js";
 const ComparisonSetIdContext = createContext(undefined);
 function ComparisonSetRoot({ id, title, children, columns = 2, gap = "md", collapseAt = "md", className }) {
     const targetId = id ?? `comparison:${slugify(title)}`;

package/dist/lib/react/composites/comparison-set/index.d.ts

@@ -0,0 +1,2 @@
+export { ComparisonSet } from "./ComparisonSet";
+export type { ComparisonSetItemProps, ComparisonSetProps } from "./ComparisonSet";

package/dist/lib/react/composites/comparison-set/index.js

@@ -0,0 +1 @@
+export { ComparisonSet } from "./ComparisonSet.js";

package/dist/lib/react/composites/content-set/ContentItem.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+export type ContentItemTone = "neutral" | "info" | "positive" | "warning" | "danger" | "accent";
+export type ContentItemEmphasis = "default" | "primary" | "subtle";
+export type ContentSetLayout = "grid" | "stack";
+export type ContentSetColumns = 2 | 3 | 4 | 5;
+export type ContentSetSurface = "plain" | "subtle" | "outlined";
+export type ContentItemProps = {
+    id?: string;
+    title: string;
+    badge?: string;
+    summary?: string;
+    icon?: ReactNode;
+    tone?: ContentItemTone;
+    emphasis?: ContentItemEmphasis;
+    children?: ReactNode;
+    className?: string;
+};
+export type ContentSetProps = {
+    id?: string;
+    title: string;
+    children?: ReactNode;
+    icon?: ReactNode;
+    layout?: ContentSetLayout;
+    columns?: ContentSetColumns;
+    surface?: ContentSetSurface;
+    tone?: ContentItemTone;
+    emphasis?: ContentItemEmphasis;
+    className?: string;
+};
+export type ContentSetItemProps = ContentItemProps;
+export declare function ContentItem({ id, title, badge, summary, icon, tone, emphasis, children, className }: ContentItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ContentSetRoot({ id, title, children, icon, layout, columns, surface, tone, emphasis, className }: ContentSetProps): import("react/jsx-runtime").JSX.Element;
+declare function ContentSetItem({ id, title, badge, summary, icon, tone, emphasis, children, className }: ContentSetItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const ContentSet: typeof ContentSetRoot & {
+    Item: typeof ContentSetItem;
+};
+export {};

package/dist/lib/react/composites/content-set/ContentItem.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { CommentTarget } from "../../interactions/comments/Comments.js";
+import { InlineText } from "../../primitives/inline-text/InlineText.js";
+const ContentSetContext = createContext(null);
+export function ContentItem({ id, title, badge, summary, icon, tone = "neutral", emphasis = "default", children, className }) {
+    return (_jsx(ContentItemCard, { badge: badge, className: className, description: "ContentItem component", emphasis: emphasis, icon: icon, summary: summary, targetId: id ?? `content:${slugify(title)}`, title: title, tone: tone, children: children }));
+}
+function ContentSetRoot({ id, title, children, icon, layout = "grid", columns = 3, surface = "plain", tone, emphasis, className }) {
+    const targetId = id ?? `content-set:${slugify(title)}`;
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "ContentSet component", targetId: targetId, title: title, children: _jsxs("section", { className: classNames("ak-section", "ak-content-set", `ak-content-set-${layout}`, `ak-content-set-surface-${surface}`), children: [_jsxs("div", { className: "ak-section-header", children: [_jsx("p", { className: "ak-eyebrow", children: "Content Set" }), _jsxs("div", { className: "ak-content-set-title-row", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "ak-content-set-icon", children: icon })) : null, _jsx(InlineText, { as: "h2", variant: "title", children: title })] })] }), _jsx("div", { className: classNames("ak-content-set-items", `ak-content-set-items-${layout}`), style: cssVars({ "--ak-content-set-columns": String(columns) }), children: _jsx(ContentSetContext.Provider, { value: { id, title, tone, emphasis }, children: children }) })] }) }));
+}
+function ContentSetItem({ id, title, badge, summary, icon, tone, emphasis, children, className }) {
+    const context = useContext(ContentSetContext);
+    const resolvedTone = tone ?? context?.tone ?? "neutral";
+    const resolvedEmphasis = emphasis ?? context?.emphasis ?? "default";
+    const targetId = createItemTargetId(context?.id, context?.title, id, title);
+    return (_jsx(ContentItemCard, { badge: badge, className: className, description: context ? `ContentSet item in ${context.title}` : "ContentSet item", emphasis: resolvedEmphasis, icon: icon, summary: summary, targetId: targetId, title: title, tone: resolvedTone, children: children }));
+}
+function ContentItemCard({ badge, children, className, description, emphasis, icon, summary, targetId, title, tone }) {
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-card", className), description: description, targetId: targetId, title: title, children: _jsxs("article", { className: classNames("ak-content-item", `ak-content-item-tone-${tone}`, `ak-content-item-emphasis-${emphasis}`), children: [_jsxs("div", { className: "ak-content-item-header", children: [_jsxs("div", { className: "ak-content-item-title-row", children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "ak-content-item-icon", children: icon })) : null, _jsx(InlineText, { as: "h3", variant: "subtitle", children: title })] }), badge ? _jsx("span", { className: "ak-content-item-badge", children: badge }) : null] }), summary ? (_jsx(InlineText, { as: "p", className: "ak-content-item-summary", children: summary })) : null, children ? _jsx("div", { className: "ak-content-item-body", children: children }) : null] }) }));
+}
+export const ContentSet = Object.assign(ContentSetRoot, {
+    Item: ContentSetItem
+});
+function createItemTargetId(parentId, parentTitle, itemId, itemTitle) {
+    if (parentId) {
+        return `${parentId}.${itemId ?? slugify(itemTitle)}`;
+    }
+    if (parentTitle) {
+        return itemId ?? `content-set:${slugify(parentTitle)}:${slugify(itemTitle)}`;
+    }
+    return itemId ?? `content:${slugify(itemTitle)}`;
+}
+function cssVars(values) {
+    return values;
+}
+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/composites/content-set/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentItem, ContentSet } from "./ContentItem";
+export type { ContentItemEmphasis, ContentItemProps, ContentItemTone, ContentSetColumns, ContentSetItemProps, ContentSetLayout, ContentSetProps, ContentSetSurface } from "./ContentItem";

package/dist/lib/react/composites/content-set/index.js

@@ -0,0 +1 @@
+export { ContentItem, ContentSet } from "./ContentItem.js";

package/dist/lib/react/{components → composites/export-panel}/ExportPanel.js

@@ -1,8 +1,8 @@
 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";
+import { serializeCommentsToMarkdown, useOptionalCommentExportValue } from "../../interactions/comments/Comments.js";
+import { InlineText } from "../../primitives/inline-text/InlineText.js";
 export function ExportPanel({ title = "Export Result", formats = ["markdown", "json"], value }) {
     const [format, setFormat] = useState(formats[0] ?? "markdown");
     const [source, setSource] = useState("result");

package/dist/lib/react/composites/export-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { ExportPanel } from "./ExportPanel";
+export type { ExportFormat, ExportPanelProps } from "./ExportPanel";