@arbidocs/blocks 0.4.4 → 0.4.5

package/dist/agents/index.js

@@ -1,15 +1,15 @@
 "use client";
-export { ACTION_LABELS, AgentAvatarField, AgentBar, AgentBarIconButton, AgentBarMenu, AgentBarNotes, AgentBarProbeAnswer, AgentBarQueuedNote, AgentBarStatus, AgentCard, AgentCreateView, AgentCreatedView, AgentCreator, AgentEditView, AgentGallery, AgentMainView, AgentSelect, AgentTypeSelector, CapabilityGrid, CapabilityTile, ConfigField, ConfigForm, ConsentActions, ConsentBulletList, ConsentCard, ConsentFootnote, ConsentHeader, ConsentMessage, ConsentNotice, ConsentPage, ConsentPermissionList, ConsentSection, ConsentStrong, ConsentText, CopyableUrl, DEFAULT_AGENT_AVATAR_FIELD_LABELS, DEFAULT_AGENT_BAR_LABELS, DEFAULT_AGENT_CARD_LABELS, DEFAULT_AGENT_CREATOR_LABELS, DEFAULT_AGENT_GALLERY_LABELS, DEFAULT_AGENT_SELECT_LABELS, DEFAULT_AGENT_STEPS_LABELS, DEFAULT_AGENT_TYPE_SELECTOR_LABELS, DEFAULT_AUTHORIZE_AGENT_LABELS, DEFAULT_CONFIG_FIELD_LABELS, DEFAULT_CONFIG_FORM_LABELS, DEFAULT_CONSENT_ACTIONS_LABELS, DEFAULT_COPYABLE_URL_LABELS, DEFAULT_LIVE_RUNS_BANNER_LABELS, DEFAULT_RECURRENCE, DEFAULT_RECURRENCE_BUILDER_LABELS, DEFAULT_SCHEMA_FORM_LABELS, DEFAULT_SKILL_CARD_LABELS, DEFAULT_SKILL_EDIT_FORM_LABELS, DEFAULT_SKILL_GENERATE_FORM_LABELS, DEFAULT_SKILL_GLOBAL_BADGE_LABELS, DEFAULT_SKILL_ROW_LABELS, DEFAULT_SKILL_VIEW_TOGGLE_LABELS, DEFAULT_SUBAGENT_ROSTER_LABELS, DEFAULT_TASKS_CHROME_LABELS, DEFAULT_TASK_COLUMN_LABELS, DEFAULT_TASK_COMPOSER_LABELS, DEFAULT_TASK_PLAN_LABELS, DEFAULT_TASK_ROW_ACTIONS_LABELS, DEFAULT_TASK_RUNS_DIALOG_LABELS, DEFAULT_TUPLE_ARRAY_FIELD_LABELS, DEFAULT_UPLOAD_TASK_ITEM_LABELS, DEFAULT_UPLOAD_TASK_LIST_LABELS, DEFAULT_WORKFLOW_CONFIG_DIALOG_LABELS, EMPTY_WORKFLOW_SCOPE, GoalCriteria, LiveRunsBanner, NewTaskEmptyAction, RecurrenceBuilder, SKILL_PROMPT_FALLBACK_PLACEHOLDER, SKILL_PROMPT_LABEL, STATUS_LABELS, SchemaForm, SkillActionButton, SkillCard, SkillDetail, SkillDetailSection, SkillEditForm, SkillFilterChips, SkillGenerateForm, SkillGlobalBadge, SkillRow, SkillTile, SkillTypeBadge, SkillViewToggle, StepDetail, StepNarration, StepOutcome, StepParams, StepRow, StepSummary, StepTrace, StepTraceSummary, SubAgentLane, SubStepGroup, SubagentRoster, TRIGGER_LABELS, TaskComposer, TaskPlan, TaskRowActions, TaskRunsDialog, TasksBulkBar, TasksToolbar, TupleArrayField, UploadTaskItem, UploadTaskList, WEEKDAYS, WorkflowConfigDialog, WorkflowLauncher, agentConfigSectionToValues, agentCreatorToConfigSection, authModeFor, buildLaunch, buildRRule, composePersona, composeWorkflowPrompt, createTaskColumns, defaultInputs, defaultTaskComposerValues, deriveAgentName, describeRRule, formatElapsed, goalProgress, humanizeSection, inferType, inputsFromContext, isAgenticWorkflow, isEmptyWorkflowScope, isOutOfBounds, isValidAgentName, isWorkflowScope, isoToLocalInput, localInputToIso, nextCriterionId, parseRRule, prettifyKey, promptFieldName, skillToWorkflow, statusBadgeVariant, stripPersonaPreamble, summarizeAgent, summarizeCapabilities, taskComposerToCreateRequest, taskComposerToUpdateRequest, taskNeedsAccess, taskToComposerValues, validateInputs, workflowAccepts, workflowFromFrontmatter, workflowTaskFields, workflowsAccepting, workflowsForHost } from '../chunk-BBEMPS6C.js';
-import '../chunk-NJL4LIXX.js';
+export { ACTION_LABELS, AgentAvatarField, AgentBar, AgentBarIconButton, AgentBarMenu, AgentBarNotes, AgentBarProbeAnswer, AgentBarQueuedNote, AgentBarStatus, AgentCard, AgentCreateView, AgentCreatedView, AgentCreator, AgentEditView, AgentGallery, AgentMainView, AgentSelect, AgentTypeSelector, CapabilityGrid, CapabilityTile, ConfigField, ConfigForm, ConsentActions, ConsentBulletList, ConsentCard, ConsentFootnote, ConsentHeader, ConsentMessage, ConsentNotice, ConsentPage, ConsentPermissionList, ConsentSection, ConsentStrong, ConsentText, CopyableUrl, DEFAULT_AGENT_AVATAR_FIELD_LABELS, DEFAULT_AGENT_BAR_LABELS, DEFAULT_AGENT_CARD_LABELS, DEFAULT_AGENT_CREATOR_LABELS, DEFAULT_AGENT_GALLERY_LABELS, DEFAULT_AGENT_SELECT_LABELS, DEFAULT_AGENT_STEPS_LABELS, DEFAULT_AGENT_TYPE_SELECTOR_LABELS, DEFAULT_AUTHORIZE_AGENT_LABELS, DEFAULT_CONFIG_FIELD_LABELS, DEFAULT_CONFIG_FORM_LABELS, DEFAULT_CONSENT_ACTIONS_LABELS, DEFAULT_COPYABLE_URL_LABELS, DEFAULT_LIVE_RUNS_BANNER_LABELS, DEFAULT_RECURRENCE, DEFAULT_RECURRENCE_BUILDER_LABELS, DEFAULT_SCHEMA_FORM_LABELS, DEFAULT_SKILL_CARD_LABELS, DEFAULT_SKILL_EDIT_FORM_LABELS, DEFAULT_SKILL_GENERATE_FORM_LABELS, DEFAULT_SKILL_GLOBAL_BADGE_LABELS, DEFAULT_SKILL_ROW_LABELS, DEFAULT_SKILL_VIEW_TOGGLE_LABELS, DEFAULT_SUBAGENT_ROSTER_LABELS, DEFAULT_TASKS_CHROME_LABELS, DEFAULT_TASK_COLUMN_LABELS, DEFAULT_TASK_COMPOSER_LABELS, DEFAULT_TASK_PLAN_LABELS, DEFAULT_TASK_ROW_ACTIONS_LABELS, DEFAULT_TASK_RUNS_DIALOG_LABELS, DEFAULT_TUPLE_ARRAY_FIELD_LABELS, DEFAULT_UPLOAD_TASK_ITEM_LABELS, DEFAULT_UPLOAD_TASK_LIST_LABELS, DEFAULT_WORKFLOW_CONFIG_DIALOG_LABELS, EMPTY_WORKFLOW_SCOPE, GoalCriteria, LiveRunsBanner, NewTaskEmptyAction, RecurrenceBuilder, SKILL_PROMPT_FALLBACK_PLACEHOLDER, SKILL_PROMPT_LABEL, STATUS_LABELS, SchemaForm, SkillActionButton, SkillCard, SkillDetail, SkillDetailSection, SkillEditForm, SkillFilterChips, SkillGenerateForm, SkillGlobalBadge, SkillRow, SkillTile, SkillTypeBadge, SkillViewToggle, StepDetail, StepNarration, StepOutcome, StepParams, StepRow, StepSummary, StepTrace, StepTraceSummary, SubAgentLane, SubStepGroup, SubagentRoster, TRIGGER_LABELS, TaskComposer, TaskPlan, TaskRowActions, TaskRunsDialog, TasksBulkBar, TasksToolbar, TupleArrayField, UploadTaskItem, UploadTaskList, WEEKDAYS, WorkflowConfigDialog, WorkflowLauncher, agentConfigSectionToValues, agentCreatorToConfigSection, authModeFor, buildLaunch, buildRRule, composePersona, composeWorkflowPrompt, createTaskColumns, defaultInputs, defaultTaskComposerValues, deriveAgentName, describeRRule, formatElapsed, goalProgress, humanizeSection, inferType, inputsFromContext, isAgenticWorkflow, isEmptyWorkflowScope, isOutOfBounds, isValidAgentName, isWorkflowScope, isoToLocalInput, localInputToIso, nextCriterionId, parseRRule, prettifyKey, promptFieldName, skillToWorkflow, statusBadgeVariant, stripPersonaPreamble, summarizeAgent, summarizeCapabilities, taskComposerToCreateRequest, taskComposerToUpdateRequest, taskNeedsAccess, taskToComposerValues, validateInputs, workflowAccepts, workflowFromFrontmatter, workflowTaskFields, workflowsAccepting, workflowsForHost } from '../chunk-5XTZFH65.js';
+import '../chunk-NUNKSZKU.js';
+import '../chunk-NPKGUQU5.js';
 import '../chunk-CQCC7LE7.js';
+import '../chunk-UBNVIIBT.js';
+import '../chunk-NPLYHR2E.js';
 import '../chunk-P6GHJSLR.js';
 import '../chunk-S7PSMMRG.js';
 import '../chunk-TX2ZICS7.js';
-import '../chunk-NUNKSZKU.js';
-import '../chunk-UBNVIIBT.js';
-import '../chunk-NPLYHR2E.js';
 import '../chunk-76JDDMSP.js';
-import '../chunk-OXF2IFXG.js';
 import '../chunk-7F6CBP3Z.js';
+import '../chunk-OXF2IFXG.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/artifacts/ArtifactCompareBar.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+/** Every fixed string of the compare bar. Pass a partial `labels` to translate or reword. */
+export interface ArtifactCompareBarLabels {
+    compareVs: string;
+    trackChanges: string;
+    trackChangesBack: string;
+    trackChangesView: string;
+    flipComparison: string;
+    stopComparing: string;
+}
+export declare const DEFAULT_ARTIFACT_COMPARE_BAR_LABELS: ArtifactCompareBarLabels;
+export interface ArtifactCompareBarTestIds {
+    trackChanges: string;
+}
+export interface ArtifactCompareBarProps {
+    /** The compared-against version (the host renders its name or pill). */
+    compareTarget: ReactNode;
+    /** "v2": which version it is, when every version shares one file name. */
+    versionLabel?: string | null;
+    /** An editable artifact toggles Track changes; a read-only comparison gets a flip arrow. */
+    mode: 'track-changes' | 'flip';
+    showTrackChanges: boolean;
+    onToggleTrackChanges: () => void;
+    onFlip: () => void;
+    onStop: () => void;
+    labels?: Partial<ArtifactCompareBarLabels>;
+    testIds?: Partial<ArtifactCompareBarTestIds>;
+}
+/**
+ * "Compare vs. [version]" row contents: always an explicit text label (an icon-only pill was
+ * unclear), with Track changes or Flip, and Stop comparing.
+ */
+export declare function ArtifactCompareBar({ compareTarget, versionLabel, mode, showTrackChanges, onToggleTrackChanges, onFlip, onStop, labels, testIds, }: ArtifactCompareBarProps): import("react").JSX.Element;

package/dist/artifacts/ArtifactEditor.d.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { type ArtifactCompareBarLabels } from './ArtifactCompareBar';
+import { type ArtifactEditorBodyTestIds } from './ArtifactEditorBody';
+import type { RenderMarkdown } from './ArtifactRedlineView';
+import { type ArtifactToolbarLabels } from './ArtifactToolbar';
+import { type ArtifactVersionBarLabels, type ArtifactVersionBarTestIds } from './ArtifactVersionBar';
+import type { VersionEntry } from './VersionTimeline';
+export interface ArtifactEditorLabels {
+    toolbar: Partial<ArtifactToolbarLabels>;
+    versions: Partial<ArtifactVersionBarLabels>;
+    compare: Partial<ArtifactCompareBarLabels>;
+}
+export interface ArtifactEditorTestIds {
+    root: string;
+    compareRow: string;
+    body: Partial<ArtifactEditorBodyTestIds>;
+    versions: Partial<ArtifactVersionBarTestIds>;
+}
+export interface ArtifactEditorProps {
+    /** The saved markdown of the open version. */
+    content: string;
+    isEditing: boolean;
+    hasChanges: boolean;
+    isSaving: boolean;
+    isDraft?: boolean;
+    /** Narrow container: icon-only Edit and Compare. */
+    compact?: boolean;
+    canCompare: boolean;
+    /** A comparison is active. */
+    comparing: boolean;
+    /** The version being compared against. */
+    compareId?: string | null;
+    showTrackChanges: boolean;
+    /** The lineage, oldest first. The version bar shows only for two or more. */
+    versions?: VersionEntry[];
+    currentVersionId?: string;
+    onStartEdit: () => void;
+    onCancel: () => void;
+    /** Save the buffer as a new version. */
+    onSave: () => void;
+    onCompare: () => void;
+    onStopCompare: () => void;
+    onToggleTrackChanges: () => void;
+    /** Open another version from the version list. */
+    onOpenVersion?: (id: string) => void;
+    formatDate?: (iso: string) => string;
+    /** The editing surface (for example `ArtifactMarkdownEditor`). */
+    editor: ReactNode;
+    /** The track-changes panel (for example `ArtifactRedlineView`). */
+    redline: ReactNode;
+    renderMarkdown: RenderMarkdown;
+    /** Extra actions in the header (share, download...). */
+    actions?: ReactNode;
+    className?: string;
+    labels?: Partial<ArtifactEditorLabels>;
+    testIds?: Partial<ArtifactEditorTestIds>;
+}
+/**
+ * The artifact surface: a header with the version bar and the toolbar (Edit, Cancel, Compare,
+ * Save as a new version), a compare row while comparing, and the body (read, edit or track
+ * changes). Everything is view-model driven: a host binds state with `useArtifactSession` from
+ * `@arbidocs/react/artifacts` and passes the editor and redline as slots.
+ */
+export declare function ArtifactEditor({ content, isEditing, hasChanges, isSaving, isDraft, compact, canCompare, comparing, compareId, showTrackChanges, versions, currentVersionId, onStartEdit, onCancel, onSave, onCompare, onStopCompare, onToggleTrackChanges, onOpenVersion, formatDate, editor, redline, renderMarkdown, actions, className, labels, testIds, }: ArtifactEditorProps): import("react").JSX.Element;

package/dist/artifacts/ArtifactEditorBody.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import type { RenderMarkdown } from './ArtifactRedlineView';
+export interface ArtifactEditorBodyTestIds {
+    /** The read-only rendered document. */
+    rendered: string;
+    /** The track-changes panel. */
+    trackChanges: string;
+}
+export interface ArtifactEditorBodyProps {
+    /** The saved markdown, shown rendered while not editing. */
+    content: string;
+    isEditing: boolean;
+    /** A comparison is active. */
+    comparing: boolean;
+    /** Show the track-changes panel instead of the editor (needs `comparing`). */
+    showTrackChanges: boolean;
+    /** The editing surface (for example `ArtifactMarkdownEditor`). */
+    editor: ReactNode;
+    /** The track-changes panel (for example `ArtifactRedlineView`). */
+    redline: ReactNode;
+    renderMarkdown: RenderMarkdown;
+    /** Mod+S while editing; omit to leave the shortcut to the browser. */
+    onSave?: () => void;
+    /** Mod+S only saves when this is true (there are changes and no save is running). */
+    canSave?: boolean;
+    className?: string;
+    testIds?: Partial<ArtifactEditorBodyTestIds>;
+}
+/**
+ * The body of an artifact: the rendered document when reading, the editor when editing, and the
+ * track-changes panel in its place while comparing. It is either typing or reviewing, never both
+ * stacked, as in Word's Show Markup. Mod+S saves from anywhere inside it.
+ */
+export declare function ArtifactEditorBody({ content, isEditing, comparing, showTrackChanges, editor, redline, renderMarkdown, onSave, canSave, className, testIds, }: ArtifactEditorBodyProps): import("react").JSX.Element;

package/dist/artifacts/ArtifactRedlineView.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { type RedlineLabels, type RedlineRegionKind } from './RedlineParts';
+type DelProps = React.ComponentPropsWithoutRef<'del'> & {
+    'data-cid'?: string;
+};
+type InsProps = React.ComponentPropsWithoutRef<'ins'> & {
+    'data-cid'?: string;
+};
+/** The `<del>` / `<ins>` renderers a markdown renderer must use for the tracked changes. */
+export interface RedlineMarkdownComponents {
+    del: React.FC<DelProps>;
+    ins: React.FC<InsProps>;
+}
+/**
+ * Renders markdown to React. The redline markdown carries raw `<del>` / `<ins>` tags, so the
+ * renderer must allow inline HTML and honour `components`.
+ */
+export type RenderMarkdown = (markdown: string, components?: RedlineMarkdownComponents) => ReactNode;
+/** What the view shows. Matches `RedlineState` of `@arbidocs/react/artifacts`. */
+export type ArtifactRedlineState = {
+    kind: 'idle';
+} | {
+    kind: 'computing';
+} | {
+    kind: 'ready';
+    markdown: string;
+    regions: {
+        id: string;
+        kind: RedlineRegionKind;
+    }[];
+} | {
+    kind: 'identical';
+} | {
+    kind: 'unavailable';
+};
+export interface ArtifactRedlineViewTestIds {
+    /** Replaces the whole `redline-revert-<cid>` id. */
+    revert: (cid: string) => string;
+    root: string;
+}
+export interface ArtifactRedlineViewProps {
+    state: ArtifactRedlineState;
+    renderMarkdown: RenderMarkdown;
+    /** Accept/reject mode: a margin button per change undoes that change. Omit for read-only. */
+    onRevert?: (regionId: string) => void;
+    /** A header row (for example `RedlineHeader`). */
+    header?: ReactNode;
+    labels?: Partial<RedlineLabels>;
+    testIds?: Partial<ArtifactRedlineViewTestIds>;
+}
+/**
+ * Word-style track changes between two versions: deletions struck through in red, insertions
+ * underlined in blue, moves in green, status lines when there is nothing to diff, and (when
+ * `onRevert` is set) an undo button per change aligned in the margin.
+ */
+export declare function ArtifactRedlineView({ state, renderMarkdown, onRevert, header, labels, testIds, }: ArtifactRedlineViewProps): import("react").JSX.Element;
+export {};

package/dist/artifacts/ArtifactToolbar.d.ts

@@ -0,0 +1,53 @@
+/** Every fixed string of the toolbar. Pass a partial `labels` to translate or reword. */
+export interface ArtifactToolbarLabels {
+    /** The accessible name of the group of actions. */
+    group: string;
+    edit: string;
+    cancel: string;
+    cancelTitle: string;
+    compare: string;
+    compareTitle: string;
+    saveDocument: string;
+    saveAsVersion: string;
+    noChanges: string;
+    saving: string;
+    save: string;
+    saveVersion: string;
+    /** Announced (not shown) when there are unsaved changes. */
+    unsaved: string;
+}
+export declare const DEFAULT_ARTIFACT_TOOLBAR_LABELS: ArtifactToolbarLabels;
+export interface ArtifactToolbarTestIds {
+    edit: string;
+    cancel: string;
+    compare: string;
+    save: string;
+    unsavedDot: string;
+}
+export interface ArtifactToolbarProps {
+    isEditing: boolean;
+    /** A new document that has no earlier version: "Save" instead of "Save version", no Cancel. */
+    isDraft?: boolean;
+    /** Narrow panel: icon-only Edit and Compare. Save keeps its label. */
+    compact?: boolean;
+    /** The buffer differs from the saved version. */
+    hasChanges: boolean;
+    isSaving: boolean;
+    /** Offer "Compare against the previous version". */
+    canCompare: boolean;
+    onStartEdit: () => void;
+    /** Discard the buffer and leave edit mode. */
+    onCancel: () => void;
+    onCompare: () => void;
+    /** Save the buffer as a NEW version. */
+    onSave: () => void;
+    className?: string;
+    labels?: Partial<ArtifactToolbarLabels>;
+    testIds?: Partial<ArtifactToolbarTestIds>;
+}
+/**
+ * Edit, Cancel (discard), Compare and Save for an artifact. Save is the ONE filled button and only
+ * once there is something to save; a dot marks unsaved changes and a polite status announces them.
+ * Touch targets are 44px on coarse pointers.
+ */
+export declare function ArtifactToolbar({ isEditing, isDraft, compact, hasChanges, isSaving, canCompare, onStartEdit, onCancel, onCompare, onSave, className, labels, testIds, }: ArtifactToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/artifacts/ArtifactVersionBar.d.ts

@@ -0,0 +1,42 @@
+import type { VersionEntry } from './VersionTimeline';
+/** Every fixed string of the version bar. Pass a partial `labels` to translate or reword. */
+export interface ArtifactVersionBarLabels {
+    group: string;
+    /** "Version 2 of 3". */
+    position: (index: number, total: number) => string;
+    /** The only version: nothing to choose from yet. */
+    only: string;
+    latest: string;
+    select: string;
+    option: (index: number, date: string, isCurrent: boolean) => string;
+    compare: string;
+    compareTitle: string;
+}
+export declare const DEFAULT_ARTIFACT_VERSION_BAR_LABELS: ArtifactVersionBarLabels;
+export interface ArtifactVersionBarTestIds {
+    root: string;
+    position: string;
+    select: string;
+    compare: string;
+}
+export interface ArtifactVersionBarProps {
+    /** The lineage, oldest first. */
+    versions: VersionEntry[];
+    /** The open version. */
+    currentId: string;
+    formatDate: (iso: string) => string;
+    /** Open another version (selected from the list). */
+    onOpen: (id: string) => void;
+    /** Compare the open version with the one before it. Omit to hide the button. */
+    onCompare?: () => void;
+    className?: string;
+    labels?: Partial<ArtifactVersionBarLabels>;
+    testIds?: Partial<ArtifactVersionBarTestIds>;
+}
+/**
+ * Where you are in an artifact's versions: "Version 2 of 3", a list to open any version, and
+ * Compare with the previous one. Saving a new version is the toolbar's Save button; the editor
+ * lays the two out on one row. The list is a native select: it is keyboard and screen-reader
+ * complete and uses the phone's own picker.
+ */
+export declare function ArtifactVersionBar({ versions, currentId, formatDate, onOpen, onCompare, className, labels, testIds, }: ArtifactVersionBarProps): import("react").JSX.Element;

package/dist/{files → artifacts}/RedlineParts.d.ts

@@ -10,6 +10,10 @@ export interface RedlineLabels {
     revertReplace: string;
     revertAdd: string;
     revertRemove: string;
+    /** The accessible name of the redline region. */
+    tracked: string;
+    /** Announced while the diff computes. */
+    computing: string;
 }
 export declare const DEFAULT_REDLINE_LABELS: RedlineLabels;
 export type RedlineRegionKind = 'replace' | 'remove' | 'add' | 'move';

package/dist/artifacts/editor/ArtifactMarkdownEditor.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+export interface ArtifactMarkdownEditorLabels {
+    /** The accessible name of the editor region. */
+    editor: string;
+    placeholder: string;
+}
+export declare const DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS: ArtifactMarkdownEditorLabels;
+export interface ArtifactMarkdownEditorProps {
+    /** Current markdown (controlled by the parent). */
+    markdown: string;
+    /** Called with the new markdown whenever the document changes. */
+    onChange: (markdown: string) => void;
+    /**
+     * Fired exactly once per editor instance, with the markdown the editor produces on mount.
+     * MDXEditor canonicalises the source as it parses (table padding, escapes, thematic-break
+     * style), so the first `onChange` after mount is the round-tripped form of the input, not a
+     * user edit. Use it to adopt the normalised form as the baseline so entering edit mode does
+     * not look dirty. Remount via `key` to receive it for the next document.
+     */
+    onNormalized?: (normalized: string) => void;
+    /**
+     * A dictation control for the toolbar (the host owns recording and transcription, for example
+     * `@arbidocs/react`'s `InlineMicButton`). It gets a function that inserts text at the cursor.
+     */
+    dictation?: (insert: (markdown: string) => void) => ReactNode;
+    labels?: Partial<ArtifactMarkdownEditorLabels>;
+    testId?: string;
+}
+/**
+ * WYSIWYG editor for artifact documents: the user edits the rendered document directly and the
+ * editor round-trips Markdown, so `onChange` always yields markdown a save can persist unchanged.
+ *
+ *
+ * Heavy (Lexical via MDXEditor): mount it behind a lazy boundary. The host imports
+ * `@mdxeditor/editor/style.css` once and, from the module that lazily imports this one, a module
+ * that defines the global `Prism` FIRST (assign the prismjs core to `globalThis.Prism`):
+ * `@lexical/code` reads it while it evaluates, and a library cannot order that in every bundler.
+ */
+export declare function ArtifactMarkdownEditor({ markdown, onChange, onNormalized, dictation, labels, testId, }: ArtifactMarkdownEditorProps): React.ReactElement;

package/dist/artifacts/editor/index.cjs

@@ -0,0 +1,89 @@
+"use client";
+'use strict';
+
+var chunkMHVNT4J3_cjs = require('../../chunk-MHVNT4J3.cjs');
+var react = require('react');
+var editor = require('@mdxeditor/editor');
+var jsxRuntime = require('react/jsx-runtime');
+
+function DictationSlot({
+  render
+}) {
+  const insertMarkdown = editor.usePublisher(editor.insertMarkdown$);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(insertMarkdown) });
+}
+var DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS = {
+  editor: "Document editor",
+  placeholder: "Start typing\u2026"
+};
+function ArtifactMarkdownEditor({
+  markdown,
+  onChange,
+  onNormalized,
+  dictation,
+  labels,
+  testId
+}) {
+  const l = { ...DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS, ...labels };
+  const ref = react.useRef(null);
+  const pendingNormalizationRef = react.useRef(true);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": l.editor,
+      "data-testid": chunkMHVNT4J3_cjs.testIdOr(testId, { testId: "artifact-markdown-editor" }),
+      className: "h-full pointer-coarse:[&_[role=toolbar]_button]:min-h-11 pointer-coarse:[&_[role=toolbar]_button]:min-w-11",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        editor.MDXEditor,
+        {
+          ref,
+          markdown,
+          onChange: (next) => {
+            if (pendingNormalizationRef.current) {
+              pendingNormalizationRef.current = false;
+              onNormalized?.(next);
+            }
+            onChange(next);
+          },
+          contentEditableClassName: "markdown-content max-w-none px-6 py-4 outline-none min-h-full",
+          className: "h-full overflow-auto bg-background",
+          placeholder: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: l.placeholder }),
+          plugins: [
+            editor.headingsPlugin(),
+            editor.listsPlugin(),
+            editor.quotePlugin(),
+            editor.thematicBreakPlugin(),
+            editor.linkPlugin(),
+            editor.linkDialogPlugin(),
+            editor.tablePlugin(),
+            editor.markdownShortcutPlugin(),
+            editor.toolbarPlugin({
+              toolbarContents: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(editor.UndoRedo, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.BoldItalicUnderlineToggles, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.BlockTypeSelect, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.ListsToggle, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.CreateLink, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.InsertTable, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(editor.InsertThematicBreak, {}),
+                dictation && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(editor.Separator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(DictationSlot, { render: dictation })
+                ] })
+              ] })
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.ArtifactMarkdownEditor = ArtifactMarkdownEditor;
+exports.DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS = DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/artifacts/editor/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/artifacts/editor/ArtifactMarkdownEditor.tsx"],"names":["usePublisher","insertMarkdown$","jsx","Fragment","useRef","testIdOr","MDXEditor","headingsPlugin","listsPlugin","quotePlugin","thematicBreakPlugin","linkPlugin","linkDialogPlugin","tablePlugin","markdownShortcutPlugin","toolbarPlugin","jsxs","UndoRedo","Separator","BoldItalicUnderlineToggles","BlockTypeSelect","ListsToggle","CreateLink","InsertTable","InsertThematicBreak"],"mappings":"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","file":"index.cjs","sourcesContent":["import { useRef, type ReactNode } from 'react'\nimport {\n  MDXEditor,\n  type MDXEditorMethods,\n  headingsPlugin,\n  listsPlugin,\n  quotePlugin,\n  thematicBreakPlugin,\n  linkPlugin,\n  linkDialogPlugin,\n  tablePlugin,\n  markdownShortcutPlugin,\n  toolbarPlugin,\n  UndoRedo,\n  BoldItalicUnderlineToggles,\n  BlockTypeSelect,\n  ListsToggle,\n  CreateLink,\n  InsertTable,\n  InsertThematicBreak,\n  Separator,\n  insertMarkdown$,\n  usePublisher,\n} from '@mdxeditor/editor'\nimport { testIdOr } from '../../chat/test-id'\n\n/** Renders the host's dictation control; `insert` puts text at the cursor. */\nfunction DictationSlot({\n  render,\n}: {\n  render: (insert: (markdown: string) => void) => ReactNode\n}): React.ReactElement {\n  const insertMarkdown = usePublisher(insertMarkdown$)\n  return <>{render(insertMarkdown)}</>\n}\n\nexport interface ArtifactMarkdownEditorLabels {\n  /** The accessible name of the editor region. */\n  editor: string\n  placeholder: string\n}\n\nexport const DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS: ArtifactMarkdownEditorLabels = {\n  editor: 'Document editor',\n  placeholder: 'Start typing…',\n}\n\nexport interface ArtifactMarkdownEditorProps {\n  /** Current markdown (controlled by the parent). */\n  markdown: string\n  /** Called with the new markdown whenever the document changes. */\n  onChange: (markdown: string) => void\n  /**\n   * Fired exactly once per editor instance, with the markdown the editor produces on mount.\n   * MDXEditor canonicalises the source as it parses (table padding, escapes, thematic-break\n   * style), so the first `onChange` after mount is the round-tripped form of the input, not a\n   * user edit. Use it to adopt the normalised form as the baseline so entering edit mode does\n   * not look dirty. Remount via `key` to receive it for the next document.\n   */\n  onNormalized?: (normalized: string) => void\n  /**\n   * A dictation control for the toolbar (the host owns recording and transcription, for example\n   * `@arbidocs/react`'s `InlineMicButton`). It gets a function that inserts text at the cursor.\n   */\n  dictation?: (insert: (markdown: string) => void) => ReactNode\n  labels?: Partial<ArtifactMarkdownEditorLabels>\n  testId?: string\n}\n\n/**\n * WYSIWYG editor for artifact documents: the user edits the rendered document directly and the\n * editor round-trips Markdown, so `onChange` always yields markdown a save can persist unchanged.\n *\n *\n * Heavy (Lexical via MDXEditor): mount it behind a lazy boundary. The host imports\n * `@mdxeditor/editor/style.css` once and, from the module that lazily imports this one, a module\n * that defines the global `Prism` FIRST (assign the prismjs core to `globalThis.Prism`):\n * `@lexical/code` reads it while it evaluates, and a library cannot order that in every bundler.\n */\nexport function ArtifactMarkdownEditor({\n  markdown,\n  onChange,\n  onNormalized,\n  dictation,\n  labels,\n  testId,\n}: ArtifactMarkdownEditorProps): React.ReactElement {\n  const l = { ...DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS, ...labels }\n  const ref = useRef<MDXEditorMethods>(null)\n  // Latched until MDXEditor fires its first onChange after mount: that is the canonicalisation\n  // round-trip, not a user edit.\n  const pendingNormalizationRef = useRef(true)\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={l.editor}\n      data-testid={testIdOr(testId, { testId: 'artifact-markdown-editor' })}\n      className=\"h-full pointer-coarse:[&_[role=toolbar]_button]:min-h-11 pointer-coarse:[&_[role=toolbar]_button]:min-w-11\"\n    >\n      <MDXEditor\n        ref={ref}\n        markdown={markdown}\n        onChange={(next) => {\n          if (pendingNormalizationRef.current) {\n            pendingNormalizationRef.current = false\n            onNormalized?.(next)\n          }\n          onChange(next)\n        }}\n        contentEditableClassName=\"markdown-content max-w-none px-6 py-4 outline-none min-h-full\"\n        className=\"h-full overflow-auto bg-background\"\n        placeholder={<span className=\"text-muted-foreground\">{l.placeholder}</span>}\n        plugins={[\n          headingsPlugin(),\n          listsPlugin(),\n          quotePlugin(),\n          thematicBreakPlugin(),\n          linkPlugin(),\n          linkDialogPlugin(),\n          tablePlugin(),\n          markdownShortcutPlugin(),\n          toolbarPlugin({\n            toolbarContents: () => (\n              <>\n                <UndoRedo />\n                <Separator />\n                <BoldItalicUnderlineToggles />\n                <Separator />\n                <BlockTypeSelect />\n                <ListsToggle />\n                <Separator />\n                <CreateLink />\n                <InsertTable />\n                <InsertThematicBreak />\n                {dictation && (\n                  <>\n                    <Separator />\n                    <DictationSlot render={dictation} />\n                  </>\n                )}\n              </>\n            ),\n          }),\n        ]}\n      />\n    </div>\n  )\n}\n"]}

package/dist/artifacts/editor/index.d.ts

@@ -0,0 +1 @@
+export { ArtifactMarkdownEditor, DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS, type ArtifactMarkdownEditorLabels, type ArtifactMarkdownEditorProps, } from './ArtifactMarkdownEditor';

package/dist/artifacts/editor/index.js

@@ -0,0 +1,86 @@
+"use client";
+import { testIdOr } from '../../chunk-7F6CBP3Z.js';
+import { useRef } from 'react';
+import { MDXEditor, headingsPlugin, listsPlugin, quotePlugin, thematicBreakPlugin, linkPlugin, linkDialogPlugin, tablePlugin, markdownShortcutPlugin, toolbarPlugin, UndoRedo, Separator, BoldItalicUnderlineToggles, BlockTypeSelect, ListsToggle, CreateLink, InsertTable, InsertThematicBreak, usePublisher, insertMarkdown$ } from '@mdxeditor/editor';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function DictationSlot({
+  render
+}) {
+  const insertMarkdown = usePublisher(insertMarkdown$);
+  return /* @__PURE__ */ jsx(Fragment, { children: render(insertMarkdown) });
+}
+var DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS = {
+  editor: "Document editor",
+  placeholder: "Start typing\u2026"
+};
+function ArtifactMarkdownEditor({
+  markdown,
+  onChange,
+  onNormalized,
+  dictation,
+  labels,
+  testId
+}) {
+  const l = { ...DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS, ...labels };
+  const ref = useRef(null);
+  const pendingNormalizationRef = useRef(true);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": l.editor,
+      "data-testid": testIdOr(testId, { testId: "artifact-markdown-editor" }),
+      className: "h-full pointer-coarse:[&_[role=toolbar]_button]:min-h-11 pointer-coarse:[&_[role=toolbar]_button]:min-w-11",
+      children: /* @__PURE__ */ jsx(
+        MDXEditor,
+        {
+          ref,
+          markdown,
+          onChange: (next) => {
+            if (pendingNormalizationRef.current) {
+              pendingNormalizationRef.current = false;
+              onNormalized?.(next);
+            }
+            onChange(next);
+          },
+          contentEditableClassName: "markdown-content max-w-none px-6 py-4 outline-none min-h-full",
+          className: "h-full overflow-auto bg-background",
+          placeholder: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: l.placeholder }),
+          plugins: [
+            headingsPlugin(),
+            listsPlugin(),
+            quotePlugin(),
+            thematicBreakPlugin(),
+            linkPlugin(),
+            linkDialogPlugin(),
+            tablePlugin(),
+            markdownShortcutPlugin(),
+            toolbarPlugin({
+              toolbarContents: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(UndoRedo, {}),
+                /* @__PURE__ */ jsx(Separator, {}),
+                /* @__PURE__ */ jsx(BoldItalicUnderlineToggles, {}),
+                /* @__PURE__ */ jsx(Separator, {}),
+                /* @__PURE__ */ jsx(BlockTypeSelect, {}),
+                /* @__PURE__ */ jsx(ListsToggle, {}),
+                /* @__PURE__ */ jsx(Separator, {}),
+                /* @__PURE__ */ jsx(CreateLink, {}),
+                /* @__PURE__ */ jsx(InsertTable, {}),
+                /* @__PURE__ */ jsx(InsertThematicBreak, {}),
+                dictation && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Separator, {}),
+                  /* @__PURE__ */ jsx(DictationSlot, { render: dictation })
+                ] })
+              ] })
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { ArtifactMarkdownEditor, DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/artifacts/editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/artifacts/editor/ArtifactMarkdownEditor.tsx"],"names":[],"mappings":";;;;;AA2BA,SAAS,aAAA,CAAc;AAAA,EACrB;AACF,CAAA,EAEuB;AACrB,EAAA,MAAM,cAAA,GAAiB,aAAa,eAAe,CAAA;AACnD,EAAA,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,MAAA,CAAO,cAAc,CAAA,EAAE,CAAA;AACnC;AAQO,IAAM,uCAAA,GAAwE;AAAA,EACnF,MAAA,EAAQ,iBAAA;AAAA,EACR,WAAA,EAAa;AACf;AAkCO,SAAS,sBAAA,CAAuB;AAAA,EACrC,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAAoD;AAClD,EAAA,MAAM,CAAA,GAAI,EAAE,GAAG,uCAAA,EAAyC,GAAG,MAAA,EAAO;AAClE,EAAA,MAAM,GAAA,GAAM,OAAyB,IAAI,CAAA;AAGzC,EAAA,MAAM,uBAAA,GAA0B,OAAO,IAAI,CAAA;AAE3C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,cAAY,CAAA,CAAE,MAAA;AAAA,MACd,eAAa,QAAA,CAAS,MAAA,EAAQ,EAAE,MAAA,EAAQ,4BAA4B,CAAA;AAAA,MACpE,SAAA,EAAU,4GAAA;AAAA,MAEV,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA,EAAU,CAAC,IAAA,KAAS;AAClB,YAAA,IAAI,wBAAwB,OAAA,EAAS;AACnC,cAAA,uBAAA,CAAwB,OAAA,GAAU,KAAA;AAClC,cAAA,YAAA,GAAe,IAAI,CAAA;AAAA,YACrB;AACA,YAAA,QAAA,CAAS,IAAI,CAAA;AAAA,UACf,CAAA;AAAA,UACA,wBAAA,EAAyB,+DAAA;AAAA,UACzB,SAAA,EAAU,oCAAA;AAAA,UACV,6BAAa,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAyB,YAAE,WAAA,EAAY,CAAA;AAAA,UACpE,OAAA,EAAS;AAAA,YACP,cAAA,EAAe;AAAA,YACf,WAAA,EAAY;AAAA,YACZ,WAAA,EAAY;AAAA,YACZ,mBAAA,EAAoB;AAAA,YACpB,UAAA,EAAW;AAAA,YACX,gBAAA,EAAiB;AAAA,YACjB,WAAA,EAAY;AAAA,YACZ,sBAAA,EAAuB;AAAA,YACvB,aAAA,CAAc;AAAA,cACZ,eAAA,EAAiB,sBACf,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA;AAAA,oCACT,SAAA,EAAA,EAAU,CAAA;AAAA,oCACV,0BAAA,EAAA,EAA2B,CAAA;AAAA,oCAC3B,SAAA,EAAA,EAAU,CAAA;AAAA,oCACV,eAAA,EAAA,EAAgB,CAAA;AAAA,oCAChB,WAAA,EAAA,EAAY,CAAA;AAAA,oCACZ,SAAA,EAAA,EAAU,CAAA;AAAA,oCACV,UAAA,EAAA,EAAW,CAAA;AAAA,oCACX,WAAA,EAAA,EAAY,CAAA;AAAA,oCACZ,mBAAA,EAAA,EAAoB,CAAA;AAAA,gBACpB,6BACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAAA,kCACX,GAAA,CAAC,aAAA,EAAA,EAAc,MAAA,EAAQ,SAAA,EAAW;AAAA,iBAAA,EACpC;AAAA,eAAA,EAEJ;AAAA,aAEH;AAAA;AACH;AAAA;AACF;AAAA,GACF;AAEJ","file":"index.js","sourcesContent":["import { useRef, type ReactNode } from 'react'\nimport {\n  MDXEditor,\n  type MDXEditorMethods,\n  headingsPlugin,\n  listsPlugin,\n  quotePlugin,\n  thematicBreakPlugin,\n  linkPlugin,\n  linkDialogPlugin,\n  tablePlugin,\n  markdownShortcutPlugin,\n  toolbarPlugin,\n  UndoRedo,\n  BoldItalicUnderlineToggles,\n  BlockTypeSelect,\n  ListsToggle,\n  CreateLink,\n  InsertTable,\n  InsertThematicBreak,\n  Separator,\n  insertMarkdown$,\n  usePublisher,\n} from '@mdxeditor/editor'\nimport { testIdOr } from '../../chat/test-id'\n\n/** Renders the host's dictation control; `insert` puts text at the cursor. */\nfunction DictationSlot({\n  render,\n}: {\n  render: (insert: (markdown: string) => void) => ReactNode\n}): React.ReactElement {\n  const insertMarkdown = usePublisher(insertMarkdown$)\n  return <>{render(insertMarkdown)}</>\n}\n\nexport interface ArtifactMarkdownEditorLabels {\n  /** The accessible name of the editor region. */\n  editor: string\n  placeholder: string\n}\n\nexport const DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS: ArtifactMarkdownEditorLabels = {\n  editor: 'Document editor',\n  placeholder: 'Start typing…',\n}\n\nexport interface ArtifactMarkdownEditorProps {\n  /** Current markdown (controlled by the parent). */\n  markdown: string\n  /** Called with the new markdown whenever the document changes. */\n  onChange: (markdown: string) => void\n  /**\n   * Fired exactly once per editor instance, with the markdown the editor produces on mount.\n   * MDXEditor canonicalises the source as it parses (table padding, escapes, thematic-break\n   * style), so the first `onChange` after mount is the round-tripped form of the input, not a\n   * user edit. Use it to adopt the normalised form as the baseline so entering edit mode does\n   * not look dirty. Remount via `key` to receive it for the next document.\n   */\n  onNormalized?: (normalized: string) => void\n  /**\n   * A dictation control for the toolbar (the host owns recording and transcription, for example\n   * `@arbidocs/react`'s `InlineMicButton`). It gets a function that inserts text at the cursor.\n   */\n  dictation?: (insert: (markdown: string) => void) => ReactNode\n  labels?: Partial<ArtifactMarkdownEditorLabels>\n  testId?: string\n}\n\n/**\n * WYSIWYG editor for artifact documents: the user edits the rendered document directly and the\n * editor round-trips Markdown, so `onChange` always yields markdown a save can persist unchanged.\n *\n *\n * Heavy (Lexical via MDXEditor): mount it behind a lazy boundary. The host imports\n * `@mdxeditor/editor/style.css` once and, from the module that lazily imports this one, a module\n * that defines the global `Prism` FIRST (assign the prismjs core to `globalThis.Prism`):\n * `@lexical/code` reads it while it evaluates, and a library cannot order that in every bundler.\n */\nexport function ArtifactMarkdownEditor({\n  markdown,\n  onChange,\n  onNormalized,\n  dictation,\n  labels,\n  testId,\n}: ArtifactMarkdownEditorProps): React.ReactElement {\n  const l = { ...DEFAULT_ARTIFACT_MARKDOWN_EDITOR_LABELS, ...labels }\n  const ref = useRef<MDXEditorMethods>(null)\n  // Latched until MDXEditor fires its first onChange after mount: that is the canonicalisation\n  // round-trip, not a user edit.\n  const pendingNormalizationRef = useRef(true)\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={l.editor}\n      data-testid={testIdOr(testId, { testId: 'artifact-markdown-editor' })}\n      className=\"h-full pointer-coarse:[&_[role=toolbar]_button]:min-h-11 pointer-coarse:[&_[role=toolbar]_button]:min-w-11\"\n    >\n      <MDXEditor\n        ref={ref}\n        markdown={markdown}\n        onChange={(next) => {\n          if (pendingNormalizationRef.current) {\n            pendingNormalizationRef.current = false\n            onNormalized?.(next)\n          }\n          onChange(next)\n        }}\n        contentEditableClassName=\"markdown-content max-w-none px-6 py-4 outline-none min-h-full\"\n        className=\"h-full overflow-auto bg-background\"\n        placeholder={<span className=\"text-muted-foreground\">{l.placeholder}</span>}\n        plugins={[\n          headingsPlugin(),\n          listsPlugin(),\n          quotePlugin(),\n          thematicBreakPlugin(),\n          linkPlugin(),\n          linkDialogPlugin(),\n          tablePlugin(),\n          markdownShortcutPlugin(),\n          toolbarPlugin({\n            toolbarContents: () => (\n              <>\n                <UndoRedo />\n                <Separator />\n                <BoldItalicUnderlineToggles />\n                <Separator />\n                <BlockTypeSelect />\n                <ListsToggle />\n                <Separator />\n                <CreateLink />\n                <InsertTable />\n                <InsertThematicBreak />\n                {dictation && (\n                  <>\n                    <Separator />\n                    <DictationSlot render={dictation} />\n                  </>\n                )}\n              </>\n            ),\n          }),\n        ]}\n      />\n    </div>\n  )\n}\n"]}