mdx-artifacts 0.1.2 → 0.2.0

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";

package/dist/lib/react/composites/export-panel/index.js

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

package/dist/lib/react/{components → composites/section}/Section.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, isValidElement } from "react";
-import { CommentTarget } from "./Comments.js";
+import { CommentTarget } from "../../interactions/comments/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 }) }));

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

@@ -0,0 +1,2 @@
+export { Section } from "./Section";
+export type { SectionProps } from "./Section";

package/dist/lib/react/composites/section/index.js

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

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

@@ -1,33 +1,38 @@
-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 { AnnotatedCode } from "./primitives/annotated-code/AnnotatedCode";
+export type { AnnotatedCodeProps, CodeAnnotation } from "./primitives/annotated-code/AnnotatedCode";
+export { ArtifactStateProvider, createArtifactCommentsFromState, createArtifactStateFromComments, useOptionalArtifactState } from "./interactions/artifact-state/ArtifactState";
+export type { ArtifactStateComment, ArtifactStateMessage, ArtifactStateMeta, ArtifactStateProviderProps, ArtifactStateStatus, ArtifactStateThread, ArtifactStateValue } from "./interactions/artifact-state/ArtifactState";
+export { Callout } from "./primitives/callout/Callout";
+export type { CalloutProps, CalloutTone } from "./primitives/callout/Callout";
+export { ComparisonSet } from "./composites/comparison-set/ComparisonSet";
+export type { ComparisonSetItemProps, ComparisonSetProps } from "./composites/comparison-set/ComparisonSet";
+export { ContentItem, ContentSet } from "./composites/content-set/ContentItem";
+export type { ContentItemEmphasis, ContentItemProps, ContentItemTone, ContentSetColumns, ContentSetItemProps, ContentSetLayout, ContentSetSurface, ContentSetProps } from "./composites/content-set/ContentItem";
+export { DecisionMatrix, OptionGrid } from "./legacy/LegacyContentComponents";
+export type { DecisionMatrixOptionProps, DecisionMatrixProps, OptionGridItemProps, OptionGridProps } from "./legacy/LegacyContentComponents";
+export { CodeBlock, CodeBlockView } from "./primitives/code-block/CodeBlock";
+export type { CodeBlockProps, CodeBlockViewProps } from "./primitives/code-block/CodeBlock";
+export { CodeSurface } from "./primitives/code-surface/CodeSurface";
+export type { CodeSurfaceProps } from "./primitives/code-surface/CodeSurface";
+export { CommentableBlock, CommentExport, CommentLayer, CommentTarget, serializeCommentsToMarkdown, useOptionalCommentExportValue } from "./interactions/comments/Comments";
+export type { ArtifactComment, CommentableBlockProps, CommentExportFormat, CommentExportProps, CommentExportValue, CommentLayerProps, CommentTargetProps } from "./interactions/comments/Comments";
+export { DiffBlock } from "./primitives/diff-block/DiffBlock";
+export type { DiffBlockProps, DiffLine, DiffLineType } from "./primitives/diff-block/DiffBlock";
+export { ExportPanel } from "./composites/export-panel/ExportPanel";
+export type { ExportFormat, ExportPanelProps } from "./composites/export-panel/ExportPanel";
+export { InlineText } from "./primitives/inline-text/InlineText";
+export type { InlineTextAs, InlineTextProps, InlineTextVariant } from "./primitives/inline-text/InlineText";
+export { Columns, Frame, Grid, SplitPane, Stack } from "./layout/layout-primitives/Layout";
+export type { AkCollapseAt, AkGap, AkSurface, ColumnsProps, ColumnsRatio, FrameProps, GridProps, SplitPaneProps, SplitPaneRatio, StackProps } from "./layout/layout-primitives/Layout";
+export { MarkdownBody } from "./primitives/markdown-body/MarkdownBody";
+export type { MarkdownBodyProps, MarkdownBodyVariant } from "./primitives/markdown-body/MarkdownBody";
+export { artifactMdxComponents, ArtifactCodePre } from "./mdx-components";
+export { Section } from "./composites/section/Section";
+export type { SectionProps } from "./composites/section/Section";
+export { SeverityBadge } from "./primitives/severity-badge/SeverityBadge";
+export type { SeverityBadgeProps, SeverityLevel } from "./primitives/severity-badge/SeverityBadge";
+export { SortableList, createSortableListInteraction, reorderIds, resolveSortableListOrder } from "./interactions/sortable-list/SortableList";
+export type { SortableListInteraction, SortableListItem, SortableListProps, SortableListSurface } from "./interactions/sortable-list/SortableList";
 export { componentRegistry, findComponentMeta } from "./registry";
 export type { ComponentMeta, ComponentPropMeta } from "./registry";
-export type { ArtifactKitConfig } from "../cli/types";
+export type { MdxArtifactsConfig } from "../cli/config/types";

package/dist/lib/react/index.js

@@ -1,16 +1,19 @@
-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 { AnnotatedCode } from "./primitives/annotated-code/AnnotatedCode.js";
+export { ArtifactStateProvider, createArtifactCommentsFromState, createArtifactStateFromComments, useOptionalArtifactState } from "./interactions/artifact-state/ArtifactState.js";
+export { Callout } from "./primitives/callout/Callout.js";
+export { ComparisonSet } from "./composites/comparison-set/ComparisonSet.js";
+export { ContentItem, ContentSet } from "./composites/content-set/ContentItem.js";
+export { DecisionMatrix, OptionGrid } from "./legacy/LegacyContentComponents.js";
+export { CodeBlock, CodeBlockView } from "./primitives/code-block/CodeBlock.js";
+export { CodeSurface } from "./primitives/code-surface/CodeSurface.js";
+export { CommentableBlock, CommentExport, CommentLayer, CommentTarget, serializeCommentsToMarkdown, useOptionalCommentExportValue } from "./interactions/comments/Comments.js";
+export { DiffBlock } from "./primitives/diff-block/DiffBlock.js";
+export { ExportPanel } from "./composites/export-panel/ExportPanel.js";
+export { InlineText } from "./primitives/inline-text/InlineText.js";
+export { Columns, Frame, Grid, SplitPane, Stack } from "./layout/layout-primitives/Layout.js";
+export { MarkdownBody } from "./primitives/markdown-body/MarkdownBody.js";
+export { artifactMdxComponents, ArtifactCodePre } from "./mdx-components.js";
+export { Section } from "./composites/section/Section.js";
+export { SeverityBadge } from "./primitives/severity-badge/SeverityBadge.js";
+export { SortableList, createSortableListInteraction, reorderIds, resolveSortableListOrder } from "./interactions/sortable-list/SortableList.js";
 export { componentRegistry, findComponentMeta } from "./registry.js";

package/dist/lib/react/interactions/artifact-state/index.d.ts

@@ -0,0 +1 @@
+export * from "./ArtifactState";

package/dist/lib/react/interactions/artifact-state/index.js

@@ -0,0 +1 @@
+export * from "./ArtifactState.js";

package/dist/lib/react/{components → interactions/comments}/Comments.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
-import { type ArtifactStateMessage, type ArtifactStateReviewThread } from "./ArtifactState";
-export { createArtifactCommentsFromState, createArtifactThreadsFromState } from "./ArtifactState";
+import { type ArtifactStateMessage, type ArtifactStateReviewThread } from "../artifact-state/ArtifactState";
+export { createArtifactCommentsFromState, createArtifactThreadsFromState } from "../artifact-state/ArtifactState";
 export type ArtifactComment = {
     id: string;
     blockId: string;

package/dist/lib/react/{components → interactions/comments}/Comments.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 import * as Tabs from "@radix-ui/react-tabs";
-import { createArtifactThreadsFromState as createThreadsFromState, useOptionalArtifactState } from "./ArtifactState.js";
-import { InlineText } from "./InlineText.js";
-export { createArtifactCommentsFromState, createArtifactThreadsFromState } from "./ArtifactState.js";
+import { createArtifactThreadsFromState as createThreadsFromState, useOptionalArtifactState } from "../artifact-state/ArtifactState.js";
+import { InlineText } from "../../primitives/inline-text/InlineText.js";
+export { createArtifactCommentsFromState, createArtifactThreadsFromState } from "../artifact-state/ArtifactState.js";
 const CommentContext = createContext(null);
 export function CommentLayer({ children }) {
     const artifactState = useOptionalArtifactState();

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

@@ -0,0 +1 @@
+export * from "./Comments";

package/dist/lib/react/interactions/comments/index.js

@@ -0,0 +1 @@
+export * from "./Comments.js";

package/dist/lib/react/interactions/sortable-list/SortableList.d.ts

@@ -0,0 +1,29 @@
+export type SortableListSurface = "plain" | "subtle" | "outlined";
+export type SortableListItem = {
+    id: string;
+    title: string;
+    summary?: string;
+    badge?: string;
+    tags?: string[];
+    disabled?: boolean;
+};
+export type SortableListInteraction = {
+    type: "sortable-list";
+    id: string;
+    title: string;
+    orderedIds: string[];
+    orderedItems: SortableListItem[];
+    updatedAt: string;
+};
+export type SortableListProps = {
+    id: string;
+    title: string;
+    summary?: string;
+    items: SortableListItem[];
+    surface?: SortableListSurface;
+    className?: string;
+};
+export declare function SortableList({ id, title, summary, items, surface, className }: SortableListProps): import("react/jsx-runtime").JSX.Element;
+export declare function createSortableListInteraction(id: string, title: string, orderedIds: string[], items: SortableListItem[]): SortableListInteraction;
+export declare function resolveSortableListOrder(items: SortableListItem[], orderedIds: string[] | undefined): string[];
+export declare function reorderIds(orderedIds: string[], activeId: string, targetId: string): string[];

package/dist/lib/react/interactions/sortable-list/SortableList.js

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useOptionalArtifactState } from "../artifact-state/ArtifactState.js";
+import { CommentTarget } from "../comments/Comments.js";
+import { InlineText } from "../../primitives/inline-text/InlineText.js";
+export function SortableList({ id, title, summary, items, surface = "outlined", className }) {
+    const artifactState = useOptionalArtifactState();
+    const writable = artifactState?.meta.daemon?.writable === true;
+    const persistedInteraction = artifactState?.state?.interactions[id];
+    const persistedOrder = useMemo(() => getPersistedOrder(persistedInteraction), [persistedInteraction]);
+    const [currentItems, setCurrentItems] = useState(items);
+    const [orderedIds, setOrderedIds] = useState(() => resolveSortableListOrder(currentItems, persistedOrder));
+    const [draggingId, setDraggingId] = useState();
+    const [editorMode, setEditorMode] = useState();
+    const [editingItemId, setEditingItemId] = useState();
+    const [draft, setDraft] = useState(() => createEmptyDraft());
+    const [editorStatus, setEditorStatus] = useState("idle");
+    const [editorError, setEditorError] = useState();
+    const orderedItems = useMemo(() => orderItems(currentItems, orderedIds), [currentItems, orderedIds]);
+    useEffect(() => {
+        setCurrentItems(items);
+    }, [items]);
+    useEffect(() => {
+        setOrderedIds(resolveSortableListOrder(currentItems, persistedOrder));
+    }, [currentItems, persistedOrder]);
+    function commitOrder(nextOrderedIds) {
+        setOrderedIds(nextOrderedIds);
+        if (!artifactState?.state) {
+            return;
+        }
+        const nextState = {
+            ...artifactState.state,
+            interactions: {
+                ...artifactState.state.interactions,
+                [id]: createSortableListInteraction(id, title, nextOrderedIds, currentItems)
+            }
+        };
+        void artifactState.actions.saveState(nextState);
+    }
+    function moveItem(activeId, targetId) {
+        const activeItem = currentItems.find((item) => item.id === activeId);
+        if (!activeItem || activeItem.disabled || activeId === targetId) {
+            return;
+        }
+        commitOrder(reorderIds(orderedIds, activeId, targetId));
+    }
+    function moveByOffset(itemId, offset) {
+        const item = currentItems.find((candidate) => candidate.id === itemId);
+        if (!item || item.disabled) {
+            return;
+        }
+        const index = orderedIds.indexOf(itemId);
+        const targetId = orderedIds[index + offset];
+        if (!targetId) {
+            return;
+        }
+        const nextOrderedIds = [...orderedIds];
+        nextOrderedIds.splice(index, 1);
+        nextOrderedIds.splice(index + offset, 0, itemId);
+        commitOrder(nextOrderedIds);
+    }
+    function handleDragStart(event, itemId) {
+        setDraggingId(itemId);
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", itemId);
+    }
+    function handleDragOver(event, targetId) {
+        const activeId = draggingId ?? event.dataTransfer.getData("text/plain");
+        if (!activeId || activeId === targetId) {
+            return;
+        }
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+    }
+    function handleDrop(event, targetId) {
+        event.preventDefault();
+        const activeId = event.dataTransfer.getData("text/plain") || draggingId;
+        if (activeId) {
+            moveItem(activeId, targetId);
+        }
+        setDraggingId(undefined);
+    }
+    function startAddItem() {
+        setEditorMode("add");
+        setEditingItemId(undefined);
+        setDraft(createEmptyDraft());
+        setEditorStatus("idle");
+        setEditorError(undefined);
+    }
+    function startEditItem(item) {
+        setEditorMode("edit");
+        setEditingItemId(item.id);
+        setDraft(createDraftFromItem(item));
+        setEditorStatus("idle");
+        setEditorError(undefined);
+    }
+    function cancelEdit() {
+        setEditorMode(undefined);
+        setEditingItemId(undefined);
+        setDraft(createEmptyDraft());
+        setEditorStatus("idle");
+        setEditorError(undefined);
+    }
+    async function saveDraft() {
+        if (!editorMode || editorStatus === "saving") {
+            return;
+        }
+        const nextItem = createItemFromDraft(draft);
+        if (!nextItem.id || !nextItem.title) {
+            setEditorStatus("error");
+            setEditorError("Item id and title are required.");
+            return;
+        }
+        try {
+            setEditorStatus("saving");
+            setEditorError(undefined);
+            if (editorMode === "add") {
+                await postInteraction("/__artifact/interactions/add-item", {
+                    id,
+                    item: nextItem,
+                    afterId: orderedIds[orderedIds.length - 1]
+                });
+                const nextItems = [...currentItems, nextItem];
+                setCurrentItems(nextItems);
+                setOrderedIds(resolveSortableListOrder(nextItems, [...orderedIds, nextItem.id]));
+            }
+            else if (editingItemId) {
+                const patch = createPatchFromDraft(draft);
+                await postInteraction("/__artifact/interactions/update-item", {
+                    id,
+                    itemId: editingItemId,
+                    patch: createPatchPayloadFromDraft(draft)
+                });
+                const nextItems = currentItems.map((item) => (item.id === editingItemId ? { ...item, ...patch } : item));
+                setCurrentItems(nextItems);
+            }
+            cancelEdit();
+        }
+        catch (error) {
+            setEditorStatus("error");
+            setEditorError(error instanceof Error ? error.message : String(error));
+        }
+    }
+    async function deleteItem(item) {
+        if (!window.confirm(`Delete ${item.title}?`)) {
+            return;
+        }
+        try {
+            await postInteraction("/__artifact/interactions/remove-item", {
+                id,
+                itemId: item.id
+            });
+            const nextItems = currentItems.filter((candidate) => candidate.id !== item.id);
+            setCurrentItems(nextItems);
+            setOrderedIds(orderedIds.filter((itemId) => itemId !== item.id));
+        }
+        catch (error) {
+            setEditorStatus("error");
+            setEditorError(error instanceof Error ? error.message : String(error));
+        }
+    }
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "SortableList component", targetId: id, title: title, children: _jsxs("section", { className: classNames("ak-section", "ak-sortable-list", `ak-surface-${surface}`, "ak-padding-md"), children: [_jsxs("div", { className: "ak-section-header", children: [_jsx("p", { className: "ak-eyebrow", children: "Sortable List" }), _jsx(InlineText, { as: "h2", text: title, variant: "title" }), summary ? _jsx(InlineText, { as: "p", className: "ak-sortable-list-summary", text: summary }) : null, writable ? (_jsx("div", { className: "ak-sortable-list-editor-actions", children: _jsx("button", { className: "ak-sortable-list-control", onClick: startAddItem, type: "button", children: "Add item" }) })) : null] }), writable && editorMode ? (_jsx(SortableListEditor, { draft: draft, itemIdLocked: editorMode === "edit", onCancel: cancelEdit, onChange: setDraft, onSave: saveDraft, status: editorStatus })) : null, editorError ? _jsx("p", { className: "ak-sortable-list-editor-error", children: editorError }) : null, _jsx("ol", { className: "ak-sortable-list-items", children: orderedItems.map((item, index) => (_jsxs("li", { className: classNames("ak-sortable-list-item", item.disabled ? "ak-sortable-list-item-disabled" : undefined), draggable: !item.disabled, onDragEnd: () => setDraggingId(undefined), onDragOver: (event) => handleDragOver(event, item.id), onDragStart: (event) => handleDragStart(event, item.id), onDrop: (event) => handleDrop(event, item.id), children: [_jsx("div", { className: "ak-sortable-list-rank", children: index + 1 }), _jsxs("div", { className: "ak-sortable-list-content", children: [_jsxs("div", { className: "ak-sortable-list-item-header", children: [_jsx(InlineText, { as: "h3", text: item.title, variant: "subtitle" }), item.badge ? _jsx("span", { className: "ak-sortable-list-badge", children: item.badge }) : null] }), item.summary ? _jsx(InlineText, { as: "p", className: "ak-sortable-list-item-summary", text: item.summary }) : null, item.tags?.length ? (_jsx("div", { className: "ak-sortable-list-tags", "aria-label": `${item.title} tags`, children: item.tags.map((tag) => (_jsx("span", { className: "ak-sortable-list-tag", children: tag }, tag))) })) : null] }), _jsxs("div", { className: "ak-sortable-list-controls", children: [_jsx("button", { "aria-label": `Move ${item.title} up`, className: "ak-sortable-list-control", disabled: item.disabled || index === 0, onClick: () => moveByOffset(item.id, -1), type: "button", children: "Up" }), _jsx("button", { "aria-label": `Move ${item.title} down`, className: "ak-sortable-list-control", disabled: item.disabled || index === orderedItems.length - 1, onClick: () => moveByOffset(item.id, 1), type: "button", children: "Down" }), writable ? (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": `Edit ${item.title}`, className: "ak-sortable-list-control", onClick: () => startEditItem(item), type: "button", children: "Edit" }), _jsx("button", { "aria-label": `Delete ${item.title}`, className: "ak-sortable-list-control", onClick: () => void deleteItem(item), type: "button", children: "Delete" })] })) : null] })] }, item.id))) })] }) }));
+}
+function SortableListEditor({ draft, itemIdLocked, onCancel, onChange, onSave, status }) {
+    return (_jsxs("div", { className: "ak-sortable-list-editor", children: [_jsxs("label", { className: "ak-sortable-list-editor-field", children: [_jsx("span", { children: "Id" }), _jsx("input", { disabled: itemIdLocked, onChange: (event) => onChange({ ...draft, id: event.currentTarget.value }), value: draft.id })] }), _jsxs("label", { className: "ak-sortable-list-editor-field", children: [_jsx("span", { children: "Title" }), _jsx("input", { onChange: (event) => onChange({ ...draft, title: event.currentTarget.value }), value: draft.title })] }), _jsxs("label", { className: "ak-sortable-list-editor-field", children: [_jsx("span", { children: "Summary" }), _jsx("input", { onChange: (event) => onChange({ ...draft, summary: event.currentTarget.value }), value: draft.summary })] }), _jsxs("label", { className: "ak-sortable-list-editor-field", children: [_jsx("span", { children: "Badge" }), _jsx("input", { onChange: (event) => onChange({ ...draft, badge: event.currentTarget.value }), value: draft.badge })] }), _jsxs("label", { className: "ak-sortable-list-editor-field", children: [_jsx("span", { children: "Tags" }), _jsx("input", { onChange: (event) => onChange({ ...draft, tags: event.currentTarget.value }), value: draft.tags })] }), _jsxs("label", { className: "ak-sortable-list-editor-check", children: [_jsx("input", { checked: draft.disabled, onChange: (event) => onChange({ ...draft, disabled: event.currentTarget.checked }), type: "checkbox" }), _jsx("span", { children: "Disabled" })] }), _jsxs("div", { className: "ak-sortable-list-editor-buttons", children: [_jsx("button", { className: "ak-sortable-list-control", disabled: status === "saving", onClick: onSave, type: "button", children: "Save" }), _jsx("button", { className: "ak-sortable-list-control", onClick: onCancel, type: "button", children: "Cancel" })] })] }));
+}
+function createEmptyDraft() {
+    return {
+        id: "",
+        title: "",
+        summary: "",
+        badge: "",
+        tags: "",
+        disabled: false
+    };
+}
+function createDraftFromItem(item) {
+    return {
+        id: item.id,
+        title: item.title,
+        summary: item.summary ?? "",
+        badge: item.badge ?? "",
+        tags: item.tags?.join(", ") ?? "",
+        disabled: item.disabled ?? false
+    };
+}
+function createItemFromDraft(draft) {
+    return {
+        id: draft.id.trim(),
+        title: draft.title.trim(),
+        ...createPatchFromDraft(draft)
+    };
+}
+function createPatchFromDraft(draft) {
+    return {
+        title: draft.title.trim(),
+        summary: draft.summary.trim() || undefined,
+        badge: draft.badge.trim() || undefined,
+        tags: parseTagDraft(draft.tags),
+        disabled: draft.disabled
+    };
+}
+function createPatchPayloadFromDraft(draft) {
+    return {
+        title: draft.title.trim(),
+        summary: draft.summary.trim() || null,
+        badge: draft.badge.trim() || null,
+        tags: parseTagDraft(draft.tags) ?? null,
+        disabled: draft.disabled
+    };
+}
+function parseTagDraft(value) {
+    const tags = value
+        .split(",")
+        .map((tag) => tag.trim())
+        .filter(Boolean);
+    return tags.length > 0 ? tags : undefined;
+}
+async function postInteraction(path, body) {
+    const response = await fetch(path, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+        const payload = await response.json().catch(() => undefined);
+        throw new Error(isRecord(payload) && typeof payload.error === "string" ? payload.error : "Failed to save item.");
+    }
+    return response.json();
+}
+export function createSortableListInteraction(id, title, orderedIds, items) {
+    return {
+        type: "sortable-list",
+        id,
+        title,
+        orderedIds,
+        orderedItems: orderItems(items, orderedIds),
+        updatedAt: new Date().toISOString()
+    };
+}
+export function resolveSortableListOrder(items, orderedIds) {
+    const itemIds = items.map((item) => item.id);
+    if (!orderedIds) {
+        return itemIds;
+    }
+    const knownItemIds = new Set(itemIds);
+    const retainedIds = orderedIds.filter((itemId) => knownItemIds.has(itemId));
+    const retainedIdSet = new Set(retainedIds);
+    const appendedIds = itemIds.filter((itemId) => !retainedIdSet.has(itemId));
+    return [...retainedIds, ...appendedIds];
+}
+export function reorderIds(orderedIds, activeId, targetId) {
+    const activeIndex = orderedIds.indexOf(activeId);
+    const initialTargetIndex = orderedIds.indexOf(targetId);
+    if (activeIndex < 0 || initialTargetIndex < 0 || activeIndex === initialTargetIndex) {
+        return orderedIds;
+    }
+    const nextIds = orderedIds.filter((itemId) => itemId !== activeId);
+    const targetIndex = nextIds.indexOf(targetId);
+    nextIds.splice(targetIndex, 0, activeId);
+    return nextIds;
+}
+function orderItems(items, orderedIds) {
+    const itemsById = new Map(items.map((item) => [item.id, item]));
+    return orderedIds.flatMap((itemId) => {
+        const item = itemsById.get(itemId);
+        return item ? [item] : [];
+    });
+}
+function getPersistedOrder(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 isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}

package/dist/lib/react/interactions/sortable-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./SortableList";

package/dist/lib/react/interactions/sortable-list/index.js

@@ -0,0 +1 @@
+export * from "./SortableList.js";

package/dist/lib/react/layout/layout-primitives/index.d.ts

@@ -0,0 +1,2 @@
+export { Columns, Frame, Grid, SplitPane, Stack } from "./Layout";
+export type { AkCollapseAt, AkGap, AkSurface, ColumnsProps, ColumnsRatio, FrameProps, GridProps, SplitPaneProps, SplitPaneRatio, StackProps } from "./Layout";

package/dist/lib/react/layout/layout-primitives/index.js

@@ -0,0 +1 @@
+export { Columns, Frame, Grid, SplitPane, Stack } from "./Layout.js";