@arbidocs/blocks 0.4.4 → 0.4.6

package/dist/artifacts/index.js

@@ -0,0 +1,787 @@
+"use client";
+import { testIdOr } from '../chunk-7F6CBP3Z.js';
+import { cn, Button } from '@arbidocs/react/ui';
+import { Eye, EyeOff, ArrowLeftRight, X, Pencil, GitCompare, Loader2, Check, History, Undo2 } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCallback, useRef, useState, useMemo, useLayoutEffect } from 'react';
+
+var DEFAULT_ARTIFACT_COMPARE_BAR_LABELS = {
+  compareVs: "Compare vs.",
+  trackChanges: "Track changes",
+  trackChangesBack: "Back to editing (your comparison stays active)",
+  trackChangesView: "View tracked changes against Compare vs.",
+  flipComparison: "Flip comparison direction",
+  stopComparing: "Stop comparing"
+};
+var barButton = "inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:px-2.5";
+function ArtifactCompareBar({
+  compareTarget,
+  versionLabel,
+  mode,
+  showTrackChanges,
+  onToggleTrackChanges,
+  onFlip,
+  onStop,
+  labels,
+  testIds
+}) {
+  const l = { ...DEFAULT_ARTIFACT_COMPARE_BAR_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-muted-foreground", children: l.compareVs }),
+    compareTarget,
+    versionLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: versionLabel }),
+    mode === "track-changes" ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleTrackChanges,
+        "aria-pressed": showTrackChanges,
+        className: cn(
+          barButton,
+          showTrackChanges ? "bg-accent text-accent-foreground hover:bg-accent/70" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+        ),
+        title: showTrackChanges ? l.trackChangesBack : l.trackChangesView,
+        "data-testid": testIdOr(testIds?.trackChanges, { testId: "track-changes-toggle" }),
+        children: [
+          showTrackChanges ? /* @__PURE__ */ jsx(Eye, { className: "size-3.5", "aria-hidden": true }) : /* @__PURE__ */ jsx(EyeOff, { className: "size-3.5", "aria-hidden": true }),
+          l.trackChanges
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onFlip,
+        className: cn(
+          barButton,
+          "p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+        ),
+        title: l.flipComparison,
+        "aria-label": l.flipComparison,
+        children: /* @__PURE__ */ jsx(ArrowLeftRight, { className: "size-3.5", "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onStop,
+        className: cn(
+          barButton,
+          "ml-auto text-muted-foreground hover:bg-muted hover:text-foreground"
+        ),
+        title: l.stopComparing,
+        children: [
+          /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": true }),
+          l.stopComparing
+        ]
+      }
+    )
+  ] });
+}
+function ArtifactEditorBody({
+  content,
+  isEditing,
+  comparing,
+  showTrackChanges,
+  editor,
+  redline,
+  renderMarkdown,
+  onSave,
+  canSave = true,
+  className,
+  testIds
+}) {
+  const onKeyDown = useCallback(
+    (e) => {
+      if (!isEditing || !onSave) return;
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        if (canSave) onSave();
+      }
+    },
+    [isEditing, onSave, canSave]
+  );
+  const tracking = isEditing && comparing && showTrackChanges;
+  return (
+    // The key handler only listens to bubbling keystrokes of the editor inside; the editor itself
+    // is the focusable element.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "artifact-body",
+        className: cn("h-full min-h-0 overflow-auto", className),
+        onKeyDown,
+        children: !isEditing ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "p-6",
+            "data-slot": "artifact-rendered",
+            "data-testid": testIdOr(testIds?.rendered, { testId: "document-rendered-markdown" }),
+            children: renderMarkdown(content)
+          }
+        ) : tracking ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full",
+            "data-testid": testIdOr(testIds?.trackChanges, { testId: "track-changes-panel" }),
+            children: redline
+          }
+        ) : editor
+      }
+    )
+  );
+}
+var DEFAULT_ARTIFACT_TOOLBAR_LABELS = {
+  group: "Document actions",
+  edit: "Edit",
+  cancel: "Cancel",
+  cancelTitle: "Cancel editing",
+  compare: "Compare",
+  compareTitle: "Compare against the previous version",
+  saveDocument: "Save document",
+  saveAsVersion: "Save as a new version",
+  noChanges: "No changes to save",
+  saving: "Saving\u2026",
+  save: "Save",
+  saveVersion: "Save version",
+  unsaved: "Unsaved changes"
+};
+function ArtifactToolbar({
+  isEditing,
+  isDraft = false,
+  compact = false,
+  hasChanges,
+  isSaving,
+  canCompare,
+  onStartEdit,
+  onCancel,
+  onCompare,
+  onSave,
+  className,
+  labels,
+  testIds
+}) {
+  const l = { ...DEFAULT_ARTIFACT_TOOLBAR_LABELS, ...labels };
+  const group = (children) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": l.group,
+      "data-slot": "artifact-toolbar",
+      className: cn("flex items-center gap-2", compact && "gap-1", className),
+      children
+    }
+  );
+  if (!isEditing) {
+    return group(
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: onStartEdit,
+          variant: "outline",
+          size: compact ? "icon" : "sm",
+          title: l.edit,
+          "aria-label": l.edit,
+          "data-testid": testIdOr(testIds?.edit, { testId: "edit-document-button" }),
+          className: "pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+          children: [
+            /* @__PURE__ */ jsx(Pencil, { className: "size-4", "aria-hidden": true }),
+            !compact && /* @__PURE__ */ jsx("span", { className: "ml-1", children: l.edit })
+          ]
+        }
+      )
+    );
+  }
+  return group(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isDraft && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: onCancel,
+          variant: "outline",
+          size: "sm",
+          title: l.cancelTitle,
+          "data-testid": testIdOr(testIds?.cancel, { testId: "cancel-edit-button" }),
+          className: "pointer-coarse:min-h-11",
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1", children: l.cancel })
+          ]
+        }
+      ),
+      canCompare && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: onCompare,
+          variant: "outline",
+          size: compact ? "icon" : "sm",
+          title: l.compareTitle,
+          "aria-label": l.compare,
+          "data-testid": testIdOr(testIds?.compare, { testId: "compare-button" }),
+          className: "pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+          children: [
+            /* @__PURE__ */ jsx(GitCompare, { className: "size-4", "aria-hidden": true }),
+            !compact && /* @__PURE__ */ jsx("span", { className: "ml-1", children: l.compare })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: onSave,
+            variant: hasChanges ? "default" : "outline",
+            size: "sm",
+            title: hasChanges ? isDraft ? l.saveDocument : l.saveAsVersion : l.noChanges,
+            disabled: !hasChanges || isSaving,
+            "data-testid": testIdOr(testIds?.save, { testId: "save-document-button" }),
+            className: "pointer-coarse:min-h-11",
+            children: [
+              isSaving ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "ml-1", children: isSaving ? l.saving : isDraft ? l.save : l.saveVersion })
+            ]
+          }
+        ),
+        hasChanges && !isSaving && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute -right-1 -top-1 size-2.5 rounded-full bg-primary ring-2 ring-background",
+            "aria-hidden": true,
+            "data-testid": testIdOr(testIds?.unsavedDot, { testId: "unsaved-changes-dot" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: hasChanges && !isSaving ? l.unsaved : "" })
+    ] })
+  );
+}
+var DEFAULT_ARTIFACT_VERSION_BAR_LABELS = {
+  group: "Versions",
+  position: (index, total) => `Version ${index} of ${total}`,
+  only: "Version 1",
+  latest: "Latest",
+  select: "Open a version",
+  option: (index, date, isCurrent) => `Version ${index} \xB7 ${date}${isCurrent ? " (open)" : ""}`,
+  compare: "Compare with previous",
+  compareTitle: "Compare this version against the one it was saved from"
+};
+function ArtifactVersionBar({
+  versions,
+  currentId,
+  formatDate,
+  onOpen,
+  onCompare,
+  className,
+  labels,
+  testIds
+}) {
+  const l = { ...DEFAULT_ARTIFACT_VERSION_BAR_LABELS, ...labels };
+  const index = versions.findIndex((v) => v.id === currentId);
+  const isLatest = index === versions.length - 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": l.group,
+      "data-slot": "artifact-version-bar",
+      className: cn("flex min-w-0 flex-wrap items-center gap-2 text-sm", className),
+      "data-testid": testIdOr(testIds?.root, { testId: "artifact-version-bar" }),
+      children: [
+        /* @__PURE__ */ jsx(History, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "shrink-0 font-medium text-foreground",
+            "data-testid": testIdOr(testIds?.position, { testId: "artifact-version-position" }),
+            children: versions.length > 1 && index >= 0 ? l.position(index + 1, versions.length) : l.only
+          }
+        ),
+        versions.length > 1 && index >= 0 && isLatest && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-accent-foreground", children: l.latest }),
+        versions.length > 1 && /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": l.select,
+            value: currentId,
+            onChange: (e) => onOpen(e.target.value),
+            className: "min-w-0 max-w-full rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11 pointer-coarse:text-base",
+            "data-testid": testIdOr(testIds?.select, { testId: "artifact-version-select" }),
+            children: versions.map((v, i) => /* @__PURE__ */ jsx("option", { value: v.id, children: l.option(i + 1, formatDate(v.createdAt), v.id === currentId) }, v.id))
+          }
+        ),
+        onCompare && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onCompare,
+            title: l.compareTitle,
+            className: "pointer-coarse:min-h-11",
+            "data-testid": testIdOr(testIds?.compare, { testId: "artifact-version-compare" }),
+            children: [
+              /* @__PURE__ */ jsx(GitCompare, { className: "size-4", "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: "ml-1", children: l.compare })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var defaultFormatDate = (iso) => {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+};
+function ArtifactEditor({
+  content,
+  isEditing,
+  hasChanges,
+  isSaving,
+  isDraft = false,
+  compact = false,
+  canCompare,
+  comparing,
+  compareId,
+  showTrackChanges,
+  versions = [],
+  currentVersionId = "",
+  onStartEdit,
+  onCancel,
+  onSave,
+  onCompare,
+  onStopCompare,
+  onToggleTrackChanges,
+  onOpenVersion,
+  formatDate = defaultFormatDate,
+  editor,
+  redline,
+  renderMarkdown,
+  actions,
+  className,
+  labels,
+  testIds
+}) {
+  const compared = versions.findIndex((v) => v.id === compareId);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "artifact-editor",
+      className: cn("flex h-full max-h-dvh min-h-0 flex-col bg-background", className),
+      "data-testid": testIdOr(testIds?.root, { testId: "artifact-editor" }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2", children: [
+          versions.length > 0 && onOpenVersion ? /* @__PURE__ */ jsx(
+            ArtifactVersionBar,
+            {
+              versions,
+              currentId: currentVersionId,
+              formatDate,
+              onOpen: onOpenVersion,
+              onCompare: canCompare ? onCompare : void 0,
+              labels: labels?.versions,
+              testIds: testIds?.versions
+            }
+          ) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              ArtifactToolbar,
+              {
+                isEditing,
+                isDraft,
+                compact,
+                hasChanges,
+                isSaving,
+                canCompare: canCompare && !(versions.length > 0 && onOpenVersion),
+                onStartEdit,
+                onCancel,
+                onCompare,
+                onSave,
+                labels: labels?.toolbar
+              }
+            ),
+            actions
+          ] })
+        ] }),
+        comparing && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex flex-wrap items-center gap-1.5 border-b border-border px-3 py-1.5",
+            "data-testid": testIdOr(testIds?.compareRow, { testId: "artifact-compare-row" }),
+            children: /* @__PURE__ */ jsx(
+              ArtifactCompareBar,
+              {
+                compareTarget: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-medium text-foreground", children: compared >= 0 ? versions[compared].name : "" }),
+                versionLabel: compared >= 0 && versions.length > 1 ? `v${compared + 1}` : null,
+                mode: "track-changes",
+                showTrackChanges,
+                onToggleTrackChanges,
+                onFlip: onStopCompare,
+                onStop: onStopCompare,
+                labels: labels?.compare
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+          ArtifactEditorBody,
+          {
+            content,
+            isEditing,
+            comparing,
+            showTrackChanges,
+            editor,
+            redline,
+            renderMarkdown,
+            onSave,
+            canSave: hasChanges && !isSaving,
+            testIds: testIds?.body
+          }
+        ) })
+      ]
+    }
+  );
+}
+var DEFAULT_REDLINE_LABELS = {
+  flipComparison: "Flip comparison",
+  noDocument: "No document selected for comparison.",
+  noChangesYet: "No changes yet \u2014 start editing to see redlined differences here.",
+  identical: "Documents are identical.",
+  unavailable: "Document text not available for comparison.",
+  revertMove: "Undo this move (revert both ends)",
+  revertReplace: "Undo this edit",
+  revertAdd: "Undo this insertion",
+  revertRemove: "Undo this deletion",
+  tracked: "Tracked changes",
+  computing: "Comparing\u2026"
+};
+function RedlineFrame({ header, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", "data-slot": "redline-frame", children: [
+    header,
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto text-sm leading-relaxed", children })
+  ] });
+}
+function RedlineHeader({ base, compare, onFlip, labels }) {
+  const l = { ...DEFAULT_REDLINE_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border bg-muted px-3 py-2", children: [
+    base,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "size-6 shrink-0 pointer-coarse:size-11",
+        onClick: onFlip,
+        title: l.flipComparison,
+        "aria-label": l.flipComparison,
+        children: /* @__PURE__ */ jsx(ArrowLeftRight, { className: "size-3.5" })
+      }
+    ),
+    compare
+  ] });
+}
+function RedlineStatus({
+  kind,
+  reviewMode,
+  labels
+}) {
+  const l = { ...DEFAULT_REDLINE_LABELS, ...labels };
+  const text = kind === "idle" ? l.noDocument : kind === "identical" ? reviewMode ? l.noChangesYet : l.identical : l.unavailable;
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: text });
+}
+function RedlineComputing({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children });
+}
+function RedlineDocument({ children, bodyRef, gutter }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("div", { ref: bodyRef, className: "mx-auto max-w-3xl px-6 py-4 pr-14", children }),
+    gutter
+  ] });
+}
+var MARK_TONE = {
+  del: {
+    base: "font-semibold text-red-600 line-through decoration-2 dark:text-red-400",
+    move: "font-semibold text-emerald-600 line-through decoration-2 dark:text-emerald-400"
+  },
+  ins: {
+    base: "font-semibold text-blue-600 underline decoration-2 dark:text-blue-400",
+    move: "font-semibold text-emerald-600 underline decoration-2 dark:text-emerald-400"
+  }
+};
+function RedlineMark({
+  as: Tag,
+  isMove,
+  children,
+  ...props
+}) {
+  const cls = MARK_TONE[Tag][isMove ? "move" : "base"];
+  return /* @__PURE__ */ jsx(Tag, { className: cls, ...props, children });
+}
+var REVERT_TONE = {
+  move: "border-emerald-600 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-400 dark:text-emerald-300 dark:hover:bg-emerald-950/40",
+  add: "border-blue-600 text-blue-700 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-300 dark:hover:bg-blue-950/40",
+  replace: "border-blue-600 text-blue-700 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-300 dark:hover:bg-blue-950/40",
+  remove: "border-red-600 text-red-700 hover:bg-red-50 dark:border-red-400 dark:text-red-300 dark:hover:bg-red-950/40"
+};
+function RedlineRevertGutter({
+  markers,
+  onRevert,
+  labels,
+  testId
+}) {
+  if (markers.length === 0) return null;
+  const l = { ...DEFAULT_REDLINE_LABELS, ...labels };
+  const revertTitle = {
+    move: l.revertMove,
+    replace: l.revertReplace,
+    add: l.revertAdd,
+    remove: l.revertRemove
+  };
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-2 top-0 w-9", "data-slot": "redline-gutter", children: markers.map((m) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onRevert(m.cid),
+      title: revertTitle[m.kind],
+      "aria-label": revertTitle[m.kind],
+      style: { top: m.top - 2 },
+      className: cn(
+        "pointer-events-auto absolute right-0 inline-flex h-6 w-7 items-center justify-center rounded-md border bg-background transition-colors pointer-coarse:h-11 pointer-coarse:w-11",
+        REVERT_TONE[m.kind]
+      ),
+      "data-testid": testIdOr(testId?.(m.cid), { testId: `redline-revert-${m.cid}` }),
+      children: /* @__PURE__ */ jsx(Undo2, { className: "size-3.5" })
+    },
+    m.cid
+  )) });
+}
+function kindFromCid(cid) {
+  switch (cid?.[0]) {
+    case "p":
+      return "replace";
+    case "r":
+      return "remove";
+    case "a":
+      return "add";
+    case "m":
+      return "move";
+    default:
+      return null;
+  }
+}
+var MARKER_MIN_GAP = 26;
+function ArtifactRedlineView({
+  state,
+  renderMarkdown,
+  onRevert,
+  header,
+  labels,
+  testIds
+}) {
+  const l = { ...DEFAULT_REDLINE_LABELS, ...labels };
+  const reviewMode = typeof onRevert === "function";
+  const bodyRef = useRef(null);
+  const [markers, setMarkers] = useState([]);
+  const regionKinds = useMemo(
+    () => state.kind === "ready" ? new Map(state.regions.map((r) => [r.id, r.kind])) : null,
+    [state]
+  );
+  const components = useMemo(() => {
+    const isMove = (cid) => (regionKinds?.get(cid ?? "") ?? kindFromCid(cid)) === "move";
+    return {
+      del: ({ children, ...props }) => /* @__PURE__ */ jsx(RedlineMark, { as: "del", isMove: isMove(props["data-cid"]), ...props, children }),
+      ins: ({ children, ...props }) => /* @__PURE__ */ jsx(RedlineMark, { as: "ins", isMove: isMove(props["data-cid"]), ...props, children })
+    };
+  }, [regionKinds]);
+  useLayoutEffect(() => {
+    const host = bodyRef.current;
+    if (!reviewMode || state.kind !== "ready" || !host) {
+      setMarkers([]);
+      return;
+    }
+    const hostTop = host.getBoundingClientRect().top;
+    const seen = /* @__PURE__ */ new Map();
+    host.querySelectorAll("[data-cid]").forEach((el) => {
+      const cid = el.dataset.cid;
+      if (!cid || seen.has(cid)) return;
+      seen.set(cid, {
+        top: el.getBoundingClientRect().top - hostTop,
+        kind: regionKinds?.get(cid) ?? kindFromCid(cid) ?? "replace"
+      });
+    });
+    const sorted = Array.from(seen, ([cid, v]) => ({ cid, ...v })).sort((a, b) => a.top - b.top);
+    const spaced = [];
+    for (const m of sorted) {
+      const prev = spaced[spaced.length - 1];
+      spaced.push({
+        ...m,
+        top: prev && m.top - prev.top < MARKER_MIN_GAP ? prev.top + MARKER_MIN_GAP : m.top
+      });
+    }
+    setMarkers(spaced);
+  }, [reviewMode, state, regionKinds]);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": l.tracked,
+      className: "h-full",
+      "data-testid": testIdOr(testIds?.root, { testId: "artifact-redline" }),
+      children: /* @__PURE__ */ jsx(RedlineFrame, { header, children: state.kind === "idle" || state.kind === "identical" || state.kind === "unavailable" ? /* @__PURE__ */ jsx("div", { role: "status", className: "h-full", children: /* @__PURE__ */ jsx(RedlineStatus, { kind: state.kind, reviewMode, labels }) }) : state.kind === "computing" ? /* @__PURE__ */ jsxs(RedlineComputing, { children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "size-5 animate-spin text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", children: l.computing })
+      ] }) : /* @__PURE__ */ jsx(
+        RedlineDocument,
+        {
+          bodyRef,
+          gutter: reviewMode ? /* @__PURE__ */ jsx(
+            RedlineRevertGutter,
+            {
+              markers,
+              onRevert,
+              labels,
+              testId: testIds?.revert
+            }
+          ) : null,
+          children: renderMarkdown(state.markdown, components)
+        }
+      ) })
+    }
+  );
+}
+var DEFAULT_VERSION_TIMELINE_LABELS = {
+  emptyLive: "No earlier versions yet. When you ask the assistant for a change, the previous version is kept here.",
+  emptyDocument: "No earlier versions yet. Editing this draft and saving creates a new version here.",
+  untitled: "Untitled",
+  latest: "Latest",
+  viewing: "Viewing",
+  current: "Current",
+  version: (n) => `Version ${n}`,
+  branchedFrom: (n) => `branched from Version ${n}`,
+  open: "Open",
+  compare: "Compare"
+};
+function VersionTimeline({
+  versions,
+  currentId,
+  live = false,
+  formatDate,
+  onOpen,
+  onCompare,
+  className,
+  labels,
+  testIds
+}) {
+  const l = { ...DEFAULT_VERSION_TIMELINE_LABELS, ...labels };
+  if (versions.length <= 1) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("p-6 text-sm text-muted-foreground", className),
+        "data-testid": testIdOr(testIds?.empty, { testId: "version-timeline-empty" }),
+        children: live ? l.emptyLive : l.emptyDocument
+      }
+    );
+  }
+  const numberById = /* @__PURE__ */ new Map();
+  versions.forEach((v, i) => numberById.set(v.id, i + 1));
+  const canCompare = !live && !!onCompare;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-full overflow-auto p-4", className),
+      "data-testid": testIdOr(testIds?.root, { testId: "version-timeline" }),
+      children: /* @__PURE__ */ jsx("ol", { className: "mx-auto max-w-2xl space-y-1", children: versions.map((v, i) => {
+        const isCurrent = v.id === currentId;
+        const isLatest = i === versions.length - 1;
+        const parentNumber = v.parentId ? numberById.get(v.parentId) : void 0;
+        const branchedFrom = parentNumber !== void 0 && parentNumber !== i ? parentNumber : null;
+        const badge = !isCurrent ? null : live ? isLatest ? l.latest : l.viewing : l.current;
+        const name = live ? (v.name || l.untitled).replace(/\.[A-Za-z0-9]+$/, "") : v.name || l.untitled;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(
+              "flex items-center gap-3 rounded-md px-3 py-2.5",
+              isCurrent && "bg-accent"
+            ),
+            "data-testid": testIdOr(testIds?.row?.(v.id), { testId: `version-row-${v.id}` }),
+            children: [
+              /* @__PURE__ */ jsx(History, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: l.version(i + 1) }),
+                  badge && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "rounded-full bg-background px-2 py-0.5 text-xs font-medium text-accent-foreground",
+                      "data-testid": testIdOr(testIds?.currentBadge, {
+                        testId: "version-current-badge"
+                      }),
+                      children: badge
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "truncate text-sm text-muted-foreground", children: [
+                  name,
+                  " \xB7 ",
+                  formatDate(v.createdAt),
+                  branchedFrom !== null && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-testid": testIdOr(testIds?.branch?.(v.id), {
+                        testId: `version-branch-${v.id}`
+                      }),
+                      children: [
+                        " ",
+                        "\xB7 ",
+                        l.branchedFrom(branchedFrom)
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              !isCurrent && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onOpen(v.id),
+                    className: "inline-flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
+                    "data-testid": testIdOr(testIds?.open?.(v.id), {
+                      testId: `open-version-${v.id}`
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx(Eye, { className: "size-3.5" }),
+                      " ",
+                      l.open
+                    ]
+                  }
+                ),
+                canCompare && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onCompare(v.id),
+                    className: "inline-flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1.5 text-sm font-medium text-primary transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
+                    "data-testid": testIdOr(testIds?.compare?.(v.id), {
+                      testId: `compare-version-${v.id}`
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx(GitCompare, { className: "size-3.5" }),
+                      " ",
+                      l.compare
+                    ]
+                  }
+                )
+              ] })
+            ]
+          },
+          v.id
+        );
+      }) })
+    }
+  );
+}
+
+export { ArtifactCompareBar, ArtifactEditor, ArtifactEditorBody, ArtifactRedlineView, ArtifactToolbar, ArtifactVersionBar, DEFAULT_ARTIFACT_COMPARE_BAR_LABELS, DEFAULT_ARTIFACT_TOOLBAR_LABELS, DEFAULT_ARTIFACT_VERSION_BAR_LABELS, DEFAULT_REDLINE_LABELS, DEFAULT_VERSION_TIMELINE_LABELS, RedlineComputing, RedlineDocument, RedlineFrame, RedlineHeader, RedlineMark, RedlineRevertGutter, RedlineStatus, VersionTimeline };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map