Markdown Editor

"use client";

import * as React from "react";
import { motion } from "motion/react";

function subscribeReducedMotion(callback: () => void) {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", callback);
  return () => mq.removeEventListener("change", callback);
}

/** SSR-safe: hydrates as "no preference", then follows the media query. */
function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    () => false,
  );
}

/* -------------------------------------------------------------------------- */
/*  Safe Markdown subset → React elements                                     */
/* -------------------------------------------------------------------------- */

const SAFE_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);

/** Returns a normalised href for http(s)/mailto URLs, or null for anything else (javascript:, data:, relative…). */
export function safeHref(raw: string): string | null {
  try {
    // The URL parser also strips the tabs/newlines used to disguise "java\tscript:".
    const url = new URL(raw.trim());
    return SAFE_PROTOCOLS.has(url.protocol) ? url.href : null;
  } catch {
    return null;
  }
}

// One pass over inline syntax. Order matters: code spans win, then escapes, links, bold, italic.
const INLINE =
  /(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)|\\([\\`*_[\]()#>+\-.!])|\[([^\]\n]+)\]\(((?:[^()\s]|\([^()\s]*\))+)\)|\*\*(?=\S)([\s\S]*?\S)\*\*|__(?=\S)([\s\S]*?\S)__|\*(?=[^\s*])([\s\S]*?[^\s*])\*|(?<![A-Za-z0-9])_(?=[^\s_])([\s\S]*?[^\s_])_(?![A-Za-z0-9])/g;

function renderInline(text: string, key: string, depth = 0): React.ReactNode[] {
  const out: React.ReactNode[] = [];
  let last = 0;
  let n = 0;
  // Strings become React text nodes, so any HTML in the source is escaped, never parsed.
  for (const m of text.matchAll(INLINE)) {
    const at = m.index ?? 0;
    if (at > last) out.push(text.slice(last, at));
    const k = `${key}-${n++}`;
    const nest = (s: string) => (depth < 4 ? renderInline(s, k, depth + 1) : [s]);
    if (m[2] !== undefined) {
      out.push(
        <code key={k} className="rounded bg-zinc-900/[0.06] px-1 py-px font-mono text-[0.88em] text-zinc-900 dark:bg-white/10 dark:text-zinc-100">
          {m[2].replace(/^ (.*) $/, "$1")}
        </code>,
      );
    } else if (m[3] !== undefined) {
      out.push(m[3]);
    } else if (m[4] !== undefined) {
      const href = safeHref(m[5]);
      out.push(
        href ? (
          <a
            key={k}
            href={href}
            target="_blank"
            rel="noopener noreferrer nofollow ugc"
            className="font-medium text-zinc-950 underline decoration-[var(--me-accent)] decoration-[1.5px] underline-offset-[3px] dark:text-white"
          >
            {nest(m[4])}
          </a>
        ) : (
          // Unsafe or relative URL: keep the text, drop the link.
          <span key={k} title="Link removed: only http, https and mailto links are allowed" className="underline decoration-dotted underline-offset-[3px]">
            {nest(m[4])}
          </span>
        ),
      );
    } else if (m[6] !== undefined || m[7] !== undefined) {
      out.push(
        <strong key={k} className="font-semibold text-zinc-950 dark:text-white">
          {nest(m[6] ?? m[7])}
        </strong>,
      );
    } else {
      out.push(<em key={k}>{nest(m[8] ?? m[9])}</em>);
    }
    last = at + m[0].length;
  }
  if (last < text.length) out.push(text.slice(last));
  return out;
}

type Block =
  | { type: "heading"; level: number; text: string }
  | { type: "paragraph"; lines: string[] }
  | { type: "list"; ordered: boolean; start: number; items: string[] }
  | { type: "quote"; lines: string[] }
  | { type: "code"; text: string };

const HEADING = /^(#{1,6})\s+(.*?)\s*#*\s*$/;
const BULLET = /^\s{0,3}[-*+]\s+(.*)$/;
const NUMBERED = /^\s{0,3}(\d{1,9})[.)]\s+(.*)$/;
const QUOTE = /^\s{0,3}>\s?(.*)$/;
const FENCE = /^\s{0,3}```/;

function parseBlocks(source: string): Block[] {
  const lines = source.replace(/\r\n?/g, "\n").split("\n");
  const blocks: Block[] = [];
  let i = 0;
  while (i < lines.length) {
    const line = lines[i];
    if (!line.trim()) {
      i++;
      continue;
    }
    if (FENCE.test(line)) {
      const body: string[] = [];
      i++;
      while (i < lines.length && !FENCE.test(lines[i])) body.push(lines[i++]);
      i++; // closing fence (or end of input)
      blocks.push({ type: "code", text: body.join("\n") });
      continue;
    }
    const heading = HEADING.exec(line);
    if (heading) {
      blocks.push({ type: "heading", level: heading[1].length, text: heading[2] });
      i++;
      continue;
    }
    if (QUOTE.test(line)) {
      const body: string[] = [];
      while (i < lines.length && QUOTE.test(lines[i])) body.push(QUOTE.exec(lines[i++])![1]);
      blocks.push({ type: "quote", lines: body });
      continue;
    }
    const bullet = BULLET.exec(line);
    const numbered = NUMBERED.exec(line);
    if (bullet || numbered) {
      const ordered = !bullet;
      const re = ordered ? NUMBERED : BULLET;
      const items: string[] = [];
      while (i < lines.length) {
        const m = re.exec(lines[i]);
        if (m) {
          items.push(ordered ? m[2] : m[1]);
          i++;
        } else if (items.length && /^\s{2,}\S/.test(lines[i])) {
          items[items.length - 1] += " " + lines[i++].trim(); // indented continuation line
        } else break;
      }
      blocks.push({ type: "list", ordered, start: numbered ? Number(numbered[1]) : 1, items });
      continue;
    }
    const para: string[] = [];
    while (
      i < lines.length &&
      lines[i].trim() &&
      !FENCE.test(lines[i]) &&
      !HEADING.test(lines[i]) &&
      !QUOTE.test(lines[i]) &&
      !BULLET.test(lines[i]) &&
      !NUMBERED.test(lines[i])
    )
      para.push(lines[i++]);
    blocks.push({ type: "paragraph", lines: para });
  }
  return blocks;
}

const HEADING_CLASS = [
  "text-[1.5em] font-semibold tracking-tight",
  "text-[1.3em] font-semibold tracking-tight",
  "text-[1.12em] font-semibold tracking-tight",
  "text-[1em] font-semibold",
  "text-[0.92em] font-semibold",
  "text-[0.85em] font-semibold uppercase tracking-[0.06em]",
];

function renderLines(lines: string[], key: string) {
  // Single line breaks are kept (comment-style), joined with <br>.
  return lines.flatMap((l, i) => (i ? [<br key={`${key}-br${i}`} />, ...renderInline(l, `${key}-${i}`)] : renderInline(l, `${key}-${i}`)));
}

function renderBlocks(blocks: Block[], key = "b", depth = 0): React.ReactNode[] {
  return blocks.map((block, i) => {
    const k = `${key}-${i}`;
    switch (block.type) {
      case "heading": {
        const Tag = `h${block.level}` as "h1";
        return (
          <Tag key={k} className={`text-zinc-950 dark:text-white ${HEADING_CLASS[block.level - 1]}`}>
            {renderInline(block.text, k)}
          </Tag>
        );
      }
      case "paragraph":
        return <p key={k}>{renderLines(block.lines, k)}</p>;
      case "list": {
        const items = block.items.map((item, j) => (
          <li key={j} className="pl-1">
            {renderInline(item, `${k}-${j}`)}
          </li>
        ));
        return block.ordered ? (
          <ol key={k} start={block.start} className="list-decimal space-y-1 pl-6 marker:font-mono marker:text-[0.85em] marker:text-zinc-400">
            {items}
          </ol>
        ) : (
          <ul key={k} className="list-disc space-y-1 pl-6 marker:text-[var(--me-accent)]">
            {items}
          </ul>
        );
      }
      case "quote":
        return (
          <blockquote key={k} className="space-y-3 border-l-2 border-[var(--me-accent)] pl-4 text-zinc-600 dark:text-zinc-400">
            {depth < 3 ? renderBlocks(parseBlocks(block.lines.join("\n")), k, depth + 1) : block.lines.join(" ")}
          </blockquote>
        );
      case "code":
        return (
          <pre key={k} className="overflow-x-auto rounded-lg border border-zinc-900/10 bg-zinc-900/[0.03] p-3 font-mono text-[12.5px] leading-relaxed text-zinc-800 dark:border-white/10 dark:bg-white/[0.04] dark:text-zinc-200">
            <code>{block.text}</code>
          </pre>
        );
    }
  });
}

/** Renders the supported Markdown subset as React elements (no HTML strings, no dangerouslySetInnerHTML). */
export function MarkdownPreview({ source, className = "" }: { source: string; className?: string }) {
  return (
    <div className={`space-y-3 break-words text-[14px] leading-relaxed text-zinc-700 dark:text-zinc-300 ${className}`}>
      {renderBlocks(parseBlocks(source))}
    </div>
  );
}

/* -------------------------------------------------------------------------- */
/*  Text edits                                                                */
/* -------------------------------------------------------------------------- */

/** Replace [start, end) with `text`, then select [selStart, selEnd) in the new value. */
interface Edit {
  start: number;
  end: number;
  text: string;
  selStart: number;
  selEnd: number;
}

function wrapEdit(value: string, s: number, e: number, marker: string, placeholder: string): Edit {
  const m = marker.length;
  const sel = value.slice(s, e);
  // Toggle off: markers just outside the selection…
  if (s >= m && value.slice(s - m, s) === marker && value.slice(e, e + m) === marker) {
    return { start: s - m, end: e + m, text: sel, selStart: s - m, selEnd: e - m };
  }
  // …or included in it.
  if (sel.length > 2 * m && sel.startsWith(marker) && sel.endsWith(marker)) {
    return { start: s, end: e, text: sel.slice(m, -m), selStart: s, selEnd: e - 2 * m };
  }
  const inner = sel || placeholder;
  // Keep surrounding spaces outside the markers: "word " → "**word** ".
  const lead = /^\s*/.exec(inner)![0];
  const trail = inner.length > lead.length ? /\s*$/.exec(inner)![0] : "";
  const core = inner.slice(lead.length, inner.length - trail.length) || placeholder;
  const startCore = s + lead.length + m;
  return { start: s, end: e, text: `${lead}${marker}${core}${marker}${trail}`, selStart: startCore, selEnd: startCore + core.length };
}

type LineKind = "heading" | "bullet" | "number" | "quote";
const LINE_PATTERNS: Record<LineKind, RegExp> = {
  heading: /^#{1,6}\s+/,
  bullet: /^[-*+]\s+/,
  number: /^\d+[.)]\s+/,
  quote: /^>\s?/,
};
const ANY_BLOCK_PREFIX = /^(#{1,6}\s+|[-*+]\s+|\d+[.)]\s+)/;

function lineEdit(value: string, s: number, e: number, kind: LineKind): Edit {
  const start = value.lastIndexOf("\n", s - 1) + 1;
  // A selection ending right after a newline does not include the next line.
  const endFrom = e > s && value[e - 1] === "\n" ? e - 1 : e;
  const nl = value.indexOf("\n", endFrom);
  const end = nl === -1 ? value.length : nl;
  const lines = value.slice(start, end).split("\n");
  const re = LINE_PATTERNS[kind];
  const content = lines.filter((l) => l.trim());
  const remove = content.length > 0 && content.every((l) => re.test(l));
  let counter = 0;
  const next = lines.map((line) => {
    if (remove) return line.replace(re, "");
    if (!line.trim() && lines.length > 1) return line;
    if (kind === "quote") return `> ${line}`;
    // Switching between heading / bullet / numbered replaces the old prefix.
    const bare = line.replace(ANY_BLOCK_PREFIX, "");
    if (kind === "heading") return `## ${bare}`;
    if (kind === "bullet") return `- ${bare}`;
    return `${++counter}. ${bare}`;
  });
  const text = next.join("\n");
  // Single caret on one line: keep the caret at the end of that line; otherwise select the block.
  if (s === e && lines.length === 1) return { start, end, text, selStart: start + text.length, selEnd: start + text.length };
  return { start, end, text, selStart: start, selEnd: start + text.length };
}

function linkEdit(value: string, s: number, e: number): Edit {
  const sel = value.slice(s, e);
  if (/^(https?:\/\/|mailto:)\S+$/i.test(sel.trim())) {
    // Selected a URL: wrap it and put the caret in the label.
    return { start: s, end: e, text: `[](${sel.trim()})`, selStart: s + 1, selEnd: s + 1 };
  }
  if (!sel) {
    const label = "link text";
    return { start: s, end: e, text: `[${label}](https://)`, selStart: s + 1, selEnd: s + 1 + label.length };
  }
  const urlStart = s + sel.length + 3;
  return { start: s, end: e, text: `[${sel}](https://)`, selStart: urlStart, selEnd: urlStart + "https://".length };
}

function codeEdit(value: string, s: number, e: number): Edit {
  const sel = value.slice(s, e);
  if (!sel.includes("\n")) return wrapEdit(value, s, e, "`", "code");
  const before = s > 0 && value[s - 1] !== "\n" ? "\n" : "";
  const after = e < value.length && value[e] !== "\n" ? "\n" : "";
  const text = `${before}\`\`\`\n${sel.replace(/\n$/, "")}\n\`\`\`${after}`;
  const bodyStart = s + before.length + 4;
  return { start: s, end: e, text, selStart: bodyStart, selEnd: bodyStart + sel.replace(/\n$/, "").length };
}

/* -------------------------------------------------------------------------- */
/*  Toolbar                                                                   */
/* -------------------------------------------------------------------------- */

type ActionId = "bold" | "italic" | "heading" | "bullet" | "number" | "link" | "code" | "quote";

const ACTIONS: { id: ActionId; label: string; shortcut?: string; icon: React.ReactNode }[] = [
  { id: "heading", label: "Heading", icon: <path d="M4 3v10M12 3v10M4 8h8" /> },
  { id: "bold", label: "Bold", shortcut: "B", icon: <path d="M5 3h4a2.5 2.5 0 0 1 0 5H5zM5 8h4.6a2.5 2.5 0 0 1 0 5H5z" /> },
  { id: "italic", label: "Italic", shortcut: "I", icon: <path d="M7 3h5M4 13h5M10 3 6.5 13" /> },
  { id: "quote", label: "Quote", icon: <path d="M3 4v8M6.5 5.5h6.5M6.5 8h6.5M6.5 10.5h4" /> },
  { id: "code", label: "Code", icon: <path d="M6 4.5 2.5 8 6 11.5M10 4.5l3.5 3.5-3.5 3.5" /> },
  { id: "link", label: "Link", shortcut: "K", icon: <path d="M7 9.5a2.7 2.7 0 0 0 3.8 0l2-2a2.7 2.7 0 0 0-3.8-3.8l-.6.6M9 6.5a2.7 2.7 0 0 0-3.8 0l-2 2a2.7 2.7 0 0 0 3.8 3.8l.6-.6" /> },
  { id: "bullet", label: "Bulleted list", icon: <path d="M6.5 4.5H13M6.5 8H13M6.5 11.5H13M3.2 4.5h.1M3.2 8h.1M3.2 11.5h.1" /> },
  { id: "number", label: "Numbered list", icon: <path d="M7 4.5h6M7 8h6M7 11.5h6M2.8 3.5l1-.5v3M2.6 9.5c.3-.5 1.6-.6 1.6.3 0 .6-1.6 1.4-1.6 1.7h1.7" /> },
];

/* -------------------------------------------------------------------------- */
/*  Editor                                                                    */
/* -------------------------------------------------------------------------- */

export interface MarkdownEditorProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "children"> {
  /** Controlled Markdown text. */
  value?: string;
  /** Initial text when uncontrolled. */
  defaultValue?: string;
  onChange?: (value: string) => void;
  label?: React.ReactNode;
  hint?: React.ReactNode;
  placeholder?: string;
  /** Maximum characters; 0 means no limit (the count is still shown). */
  maxLength?: number;
  /** Rows shown when empty; the textarea grows from here. */
  minRows?: number;
  /** Rows before the textarea stops growing and scrolls. */
  maxRows?: number;
  /** Show the character count. */
  showCount?: boolean;
  /** Tab shown first. */
  defaultTab?: "write" | "preview";
  /** Active tab indicator, focus rings, link underline and list markers. */
  accent?: string;
  /** Name of the submitted textarea. */
  name?: string;
  disabled?: boolean;
}

const LINE_HEIGHT = 22;
const PAD_Y = 24;

/**
 * A textarea Markdown editor: an ARIA toolbar (roving focus) applies formatting to the selection
 * through the browser's own editing pipeline, so Ctrl/Cmd+Z undoes it; Write / Preview tabs show
 * a safe rendering of a small Markdown subset built from React elements.
 */
export function MarkdownEditor({
  value,
  defaultValue = "",
  onChange,
  label = "Comment",
  hint,
  placeholder = "Write in Markdown…",
  maxLength = 0,
  minRows = 5,
  maxRows = 12,
  showCount = true,
  defaultTab = "write",
  accent = "#FF7448",
  name,
  disabled = false,
  className = "",
  style,
  ...props
}: MarkdownEditorProps) {
  const reduceMotion = usePrefersReducedMotion();
  const uid = React.useId();
  const ids = {
    label: `${uid}-label`,
    textarea: `${uid}-textarea`,
    hint: `${uid}-hint`,
    count: `${uid}-count`,
    writeTab: `${uid}-tab-write`,
    previewTab: `${uid}-tab-preview`,
    writePanel: `${uid}-panel-write`,
    previewPanel: `${uid}-panel-preview`,
  };

  const [inner, setInner] = React.useState(defaultValue);
  const text = value ?? inner;
  const [tab, setTab] = React.useState<"write" | "preview">(defaultTab);
  const [toolIndex, setToolIndex] = React.useState(0);
  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
  const toolRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
  const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]);

  const setText = (next: string) => {
    if (value === undefined) setInner(next);
    onChange?.(next);
  };

  // Auto-grow: measure scrollHeight after each change; clamp between min and max rows.
  React.useLayoutEffect(() => {
    const el = textareaRef.current;
    if (!el || tab !== "write") return;
    el.style.height = "auto";
    const min = minRows * LINE_HEIGHT + PAD_Y;
    const max = maxRows * LINE_HEIGHT + PAD_Y;
    el.style.height = `${Math.min(max, Math.max(min, el.scrollHeight + 2))}px`;
    el.style.overflowY = el.scrollHeight + 2 > max ? "auto" : "hidden";
  }, [text, minRows, maxRows, tab]);

  /** Applies an edit through execCommand("insertText") so native undo works; falls back to setRangeText. */
  const apply = (edit: Edit) => {
    const el = textareaRef.current;
    if (!el || disabled) return;
    el.focus();
    el.setSelectionRange(edit.start, edit.end);
    let inserted = false;
    try {
      inserted = edit.text.length > 0 && document.execCommand("insertText", false, edit.text);
    } catch {
      inserted = false;
    }
    if (!inserted) {
      el.setRangeText(edit.text, edit.start, edit.end, "end");
      // React listens for "input" to run onChange.
      el.dispatchEvent(new Event("input", { bubbles: true }));
    }
    el.setSelectionRange(edit.selStart, edit.selEnd);
  };

  const run = (id: ActionId) => {
    const el = textareaRef.current;
    if (!el) return;
    const { selectionStart: s, selectionEnd: e, value: v } = el;
    switch (id) {
      case "bold":
        return apply(wrapEdit(v, s, e, "**", "bold text"));
      case "italic":
        return apply(wrapEdit(v, s, e, "_", "italic text"));
      case "code":
        return apply(codeEdit(v, s, e));
      case "link":
        return apply(linkEdit(v, s, e));
      case "heading":
      case "bullet":
      case "number":
      case "quote":
        return apply(lineEdit(v, s, e, id));
    }
  };

  const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (!(event.ctrlKey || event.metaKey) || event.altKey || event.shiftKey) return;
    const key = event.key.toLowerCase();
    const id: ActionId | null = key === "b" ? "bold" : key === "i" ? "italic" : key === "k" ? "link" : null;
    if (!id) return;
    // The focused editor owns these shortcuts: keep them from reaching page-level hotkeys (e.g. a ⌘K palette).
    event.preventDefault();
    event.stopPropagation();
    run(id);
  };

  const handleToolKeyDown = (index: number, event: React.KeyboardEvent<HTMLButtonElement>) => {
    const last = ACTIONS.length - 1;
    let next = -1;
    if (event.key === "ArrowRight") next = index === last ? 0 : index + 1;
    else if (event.key === "ArrowLeft") next = index === 0 ? last : index - 1;
    else if (event.key === "Home") next = 0;
    else if (event.key === "End") next = last;
    if (next === -1) return;
    event.preventDefault();
    setToolIndex(next);
    toolRefs.current[next]?.focus();
  };

  const selectTab = (next: "write" | "preview", focus = false) => {
    setTab(next);
    if (focus) tabRefs.current[next === "write" ? 0 : 1]?.focus();
  };

  const handleTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
      event.preventDefault();
      const next =
        event.key === "Home" ? "write" : event.key === "End" ? "preview" : tab === "write" ? "preview" : "write";
      selectTab(next, true);
    }
  };

  const limit = maxLength > 0 ? maxLength : 0;
  const count = text.length;
  const nearLimit = limit > 0 && count >= limit * 0.9;
  const describedBy = [hint ? ids.hint : null, showCount ? ids.count : null].filter(Boolean).join(" ") || undefined;
  const tabs: { id: "write" | "preview"; label: string }[] = [
    { id: "write", label: "Write" },
    { id: "preview", label: "Preview" },
  ];

  return (
    <div
      className={`w-full ${className}`}
      style={{ ["--me-accent" as string]: accent, ...style }}
      {...props}
    >
      <label id={ids.label} htmlFor={ids.textarea} className="mb-2 block font-mono text-[10px] uppercase tracking-[0.14em] text-zinc-500 dark:text-zinc-400">
        {label}
      </label>

      <div
        className={`overflow-hidden rounded-xl border bg-white transition-[border-color,box-shadow] duration-150 dark:bg-zinc-950 motion-reduce:transition-none ${
          disabled
            ? "border-zinc-900/10 opacity-50 dark:border-white/10"
            : "border-zinc-900/15 focus-within:border-[var(--me-accent)] focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--me-accent)_18%,transparent)] dark:border-white/15"
        }`}
      >
        <div className="flex flex-wrap items-center justify-between gap-x-2 gap-y-1 border-b border-zinc-900/10 px-1.5 dark:border-white/10">
          <div role="tablist" aria-label="Editor mode" className="flex">
            {tabs.map((t, i) => {
              const selected = tab === t.id;
              return (
                <button
                  key={t.id}
                  ref={(el) => {
                    tabRefs.current[i] = el;
                  }}
                  id={t.id === "write" ? ids.writeTab : ids.previewTab}
                  type="button"
                  role="tab"
                  aria-selected={selected}
                  aria-controls={t.id === "write" ? ids.writePanel : ids.previewPanel}
                  tabIndex={selected ? 0 : -1}
                  onClick={() => selectTab(t.id)}
                  onKeyDown={handleTabKeyDown}
                  className={`relative h-10 px-3 text-[13px] font-medium tracking-tight outline-hidden transition-colors focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-solid focus-visible:outline-[var(--me-accent)] ${
                    selected ? "text-zinc-950 dark:text-white" : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
                  }`}
                >
                  {t.label}
                  {selected && (
                    <motion.span
                      layoutId={`${uid}-tab-indicator`}
                      transition={reduceMotion ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 40 }}
                      aria-hidden="true"
                      className="absolute inset-x-2 -bottom-px h-[2px] rounded-full bg-[var(--me-accent)]"
                    />
                  )}
                </button>
              );
            })}
          </div>

          <div
            role="toolbar"
            aria-label="Formatting"
            aria-controls={ids.textarea}
            aria-orientation="horizontal"
            aria-hidden={tab !== "write" || undefined}
            className={`flex flex-wrap items-center gap-0.5 py-1 transition-opacity ${tab === "write" ? "" : "pointer-events-none opacity-30"}`}
          >
            {ACTIONS.map((action, i) => (
              <React.Fragment key={action.id}>
                {(i === 3 || i === 6) && <span aria-hidden="true" className="mx-1 h-4 w-px bg-zinc-900/10 dark:bg-white/10" />}
                <button
                  ref={(el) => {
                    toolRefs.current[i] = el;
                  }}
                  type="button"
                  aria-label={action.label}
                  aria-keyshortcuts={action.shortcut ? `Control+${action.shortcut} Meta+${action.shortcut}` : undefined}
                  title={action.shortcut ? `${action.label} (Ctrl/⌘+${action.shortcut})` : action.label}
                  tabIndex={tab === "write" && i === toolIndex ? 0 : -1}
                  disabled={disabled || tab !== "write"}
                  // Keep the textarea selection when clicking a tool with the mouse.
                  onMouseDown={(e) => e.preventDefault()}
                  onClick={() => {
                    setToolIndex(i);
                    run(action.id);
                  }}
                  onKeyDown={(e) => handleToolKeyDown(i, e)}
                  className="grid size-8 place-items-center rounded-md text-zinc-500 outline-hidden transition-colors hover:bg-zinc-900/[0.06] hover:text-zinc-950 focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-solid focus-visible:outline-[var(--me-accent)] dark:text-zinc-400 dark:hover:bg-white/[0.08] dark:hover:text-white"
                >
                  <svg aria-hidden="true" viewBox="0 0 16 16" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    {action.icon}
                  </svg>
                </button>
              </React.Fragment>
            ))}
          </div>
        </div>

        <div id={ids.writePanel} role="tabpanel" aria-labelledby={ids.writeTab} hidden={tab !== "write"}>
          <textarea
            ref={textareaRef}
            id={ids.textarea}
            name={name}
            value={text}
            onChange={(e) => setText(e.target.value)}
            onKeyDown={handleTextareaKeyDown}
            placeholder={placeholder}
            disabled={disabled}
            maxLength={limit || undefined}
            rows={minRows}
            aria-describedby={describedBy}
            spellCheck
            className="block w-full resize-none bg-transparent px-4 py-3 font-mono text-[13px] leading-[22px] text-zinc-900 caret-[var(--me-accent)] outline-hidden placeholder:text-zinc-400 disabled:cursor-not-allowed dark:text-zinc-100 dark:placeholder:text-zinc-600"
          />
        </div>

        <div
          id={ids.previewPanel}
          role="tabpanel"
          aria-labelledby={ids.previewTab}
          hidden={tab !== "preview"}
          tabIndex={0}
          className="px-4 py-3 outline-hidden focus-visible:shadow-[inset_0_0_0_2px_var(--me-accent)]"
          style={{ minHeight: minRows * LINE_HEIGHT + PAD_Y }}
        >
          {tab === "preview" &&
            (text.trim() ? (
              <MarkdownPreview source={text} />
            ) : (
              <p className="font-mono text-[11px] uppercase tracking-[0.14em] text-zinc-400 dark:text-zinc-500">Nothing to preview</p>
            ))}
        </div>

        <div className="flex items-center justify-between gap-3 border-t border-zinc-900/10 px-4 py-2 dark:border-white/10">
          <span className="truncate font-mono text-[10px] tracking-[0.04em] text-zinc-400 dark:text-zinc-500">
            <span className="uppercase tracking-[0.14em]">Markdown</span> · **bold** _italic_ `code` [link](url)
          </span>
          {showCount && (
            <span
              id={ids.count}
              className={`shrink-0 font-mono text-[10px] tabular-nums tracking-[0.1em] ${
                nearLimit ? "text-[color-mix(in_srgb,var(--me-accent)_72%,black)] dark:text-[var(--me-accent)]" : "text-zinc-400 dark:text-zinc-500"
              }`}
            >
              {count}
              {limit ? `/${limit}` : ""}
              <span className="sr-only"> characters{limit ? ` of ${limit}` : ""}</span>
            </span>
          )}
        </div>
      </div>

      {hint && (
        <p id={ids.hint} className="mt-1.5 text-[12px] leading-snug text-zinc-500 dark:text-zinc-400">
          {hint}
        </p>
      )}
    </div>
  );
}