@suzumiyaaoba/mdxr 0.1.0

package/src/ui/bits.tsx

@@ -0,0 +1,537 @@
+import type { ReactElement, ReactNode } from "react";
+
+import { nonEmpty } from "../guards.js";
+import { indexChildren } from "./child-index.js";
+import { linkTarget, useFileLink } from "./file-link.js";
+import { Icon } from "./icon.js";
+import {
+  BORDER_CLS,
+  CHIP_BORDER_CLS,
+  commentStripCls,
+  LOC_CLS,
+  SURFACE_CLS,
+  TEXT,
+  TEXT_MICRO,
+  TEXT_SUB,
+  TONE_TEXT,
+  TRIM_CLS,
+} from "./tones.js";
+
+/**
+ * Bordered panel shape framing a document block (code, diffs, graphs,
+ * tables). Exported for panels needing a non-figure tag (`<nav>`, `<section>`)
+ * or extra attributes; plain panels should use `<Panel>`.
+ */
+export const PANEL_CLS = `not-prose my-6 overflow-hidden rounded-lg border ${BORDER_CLS}`;
+
+export const Panel = (props: {
+  children?: ReactNode;
+  /** Extra classes (e.g. `mdxr-json`) merged after the panel shape. */
+  className?: string;
+}): ReactElement => (
+  <figure className={`${PANEL_CLS} ${props.className ?? ""}`}>
+    {props.children}
+  </figure>
+);
+
+// Lookup maps (not `items-${x}` interpolation) so Tailwind's static class
+// scan sees the literals.
+const ROW_ALIGN = {
+  baseline: "items-baseline",
+  center: "items-center",
+} as const;
+const ROW_GAP_X = {
+  "2": "gap-x-2",
+  "2.5": "gap-x-2.5",
+  "3": "gap-x-3",
+} as const;
+
+/** One padded row inside a `ListPanel`. */
+export const ListRow = (props: {
+  /** `items-*` — default `items-baseline`. */
+  align?: keyof typeof ROW_ALIGN;
+  children?: ReactNode;
+  /** Non-conflicting extras, e.g. `opacity-60`. */
+  className?: string;
+  /** `gap-x-*` — default `gap-x-3`. */
+  gapX?: keyof typeof ROW_GAP_X;
+}): ReactElement => (
+  <div
+    className={`flex flex-wrap ${ROW_ALIGN[props.align ?? "baseline"]} ${ROW_GAP_X[props.gapX ?? "3"]} gap-y-1 px-4 py-2.5 ${props.className ?? ""}`}
+  >
+    {props.children}
+  </div>
+);
+
+/**
+ * Click-to-copy button. The `mdxr-copy`/`mdxr-copy-idle`/`mdxr-copy-done`
+ * classes are client-JS hooks (assets.ts toggles `.copied` on the button) —
+ * rename them and copy stops working.
+ */
+export const CopyButton = (props: {
+  /** Extra button classes (default `opacity-60`). */
+  className?: string;
+  /** Clipboard payload (`data-copy`). */
+  copy: string;
+  /** Done-state color classes (default light+dark emerald). */
+  doneClassName?: string;
+  /** Tooltip + accessible label. */
+  title: string;
+}): ReactElement => (
+  <button
+    aria-label={props.title}
+    className={`mdxr-copy cursor-pointer ${props.className ?? "opacity-60"}`}
+    data-copy={props.copy}
+    title={props.title}
+    type="button"
+  >
+    <span className="mdxr-copy-idle inline-flex">
+      <Icon className="h-3.5 w-3.5" name="lucide:copy" />
+    </span>
+    <span
+      className={`mdxr-copy-done hidden items-center ${props.doneClassName ?? TONE_TEXT.emerald}`}
+    >
+      <Icon className="h-3.5 w-3.5" name="lucide:check" />
+    </span>
+  </button>
+);
+
+/**
+ * Bordered secondary-button shape for labeled copy/save actions (Ask,
+ * Board). `transition-colors` only — `transition-all` would animate layout
+ * properties too.
+ */
+export const ACTION_BUTTON_CLS = `inline-flex cursor-pointer items-center rounded-md border ${CHIP_BORDER_CLS} bg-white px-2.5 py-1 text-xs font-medium ${TEXT.chip} transition-colors hover:bg-neutral-100 active:translate-y-px dark:bg-neutral-800 dark:hover:bg-neutral-700`;
+
+/**
+ * Idle/done label pair inside a labeled action button. The
+ * `mdxr-copy-idle`/`mdxr-copy-done` classes are client-JS hooks — the
+ * document script toggles `.copied` on the parent button to swap them.
+ */
+export const CopyFeedback = (props: {
+  /** Done-state text (e.g. `Copied`, `Saved`). */
+  done: string;
+  /** Idle-state icon, e.g. `lucide:clipboard-list`. */
+  icon: string;
+  /** Idle-state text (e.g. `Copy answers`). */
+  label: string;
+}): ReactElement => (
+  <>
+    <span className="mdxr-copy-idle inline-flex items-center gap-1.5">
+      <Icon className="h-3.5 w-3.5" name={props.icon} />
+      {props.label}
+    </span>
+    <span
+      className={`mdxr-copy-done hidden items-center gap-1.5 ${TONE_TEXT.emerald}`}
+    >
+      <Icon className="h-3.5 w-3.5" name="lucide:check" />
+      {props.done}
+    </span>
+  </>
+);
+
+/** Round status/kind chip — icon + label on a `TONE` background. */
+export const Pill = (props: {
+  children?: ReactNode;
+  /** Tone/color classes appended after the pill shape. */
+  className?: string;
+  /** Iconify name, e.g. `lucide:check`. */
+  icon?: string;
+}): ReactElement => (
+  <span
+    className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${props.className ?? ""}`}
+  >
+    {props.icon === undefined ? null : (
+      <Icon className="h-3 w-3" name={props.icon} />
+    )}
+    {props.children}
+  </span>
+);
+
+const CAPTION_BASE = `${SURFACE_CLS} px-4 py-2 text-xs ${TEXT.muted}`;
+const CAPTION_BORDER = `border-b ${BORDER_CLS}`;
+
+/** CaptionBar's strip classes, for headers that are not a `<figcaption>`
+ * (Ask's section header). */
+export const CAPTION_CLS = `${CAPTION_BORDER} ${CAPTION_BASE}`;
+
+/**
+ * Header strip on framed blocks (code, diffs, tables). `border` (default on)
+ * draws the divider to the body; `className` adds layout like
+ * `flex items-center gap-2` or weight like `font-medium`/`font-mono`.
+ */
+export const CaptionBar = (props: {
+  border?: boolean;
+  children?: ReactNode;
+  className?: string;
+}): ReactElement => (
+  <figcaption
+    className={`${props.border === false ? "" : `${CAPTION_BORDER} `}${CAPTION_BASE} ${props.className ?? ""}`}
+  >
+    {props.children}
+  </figcaption>
+);
+
+/** PANEL_CLS + row dividers — the bordered container for row-style lists. */
+const LIST_CLS = `divide-y divide-neutral-200 dark:divide-neutral-800 ${PANEL_CLS}`;
+
+/**
+ * Bordered `divide-y` container for row-style lists (Deps, Files, Tests…).
+ * `as` picks the semantic tag; figures are the default because captioned
+ * lists pair this with `CaptionBar` (a figcaption). `title` renders that
+ * caption — only sensible on the default figure.
+ */
+export const ListPanel = (props: {
+  as?: "div" | "dl" | "figure" | "section";
+  children?: ReactNode;
+  className?: string;
+  /** Plain-text list title rendered as a `CaptionBar`. */
+  title?: string;
+}): ReactElement => {
+  const Tag = props.as ?? "figure";
+  return (
+    <Tag className={`${LIST_CLS} ${props.className ?? ""}`}>
+      {nonEmpty(props.title) ? (
+        <CaptionBar border={false} className="font-medium">
+          {props.title}
+        </CaptionBar>
+      ) : null}
+      {props.children}
+    </Tag>
+  );
+};
+
+/**
+ * Truncated name + optional muted sub-line — the label cell of chart rows
+ * (Waterfall spans, Gantt tasks/milestones).
+ */
+export const RowLabel = (props: {
+  name: ReactNode;
+  /** Faint second line (`owner · note`); empty/absent hides it. */
+  sub?: string;
+}): ReactElement => (
+  <div className="min-w-0">
+    <div className="truncate text-sm">{props.name}</div>
+    {nonEmpty(props.sub) ? (
+      <div className={`truncate ${TEXT_SUB} ${TEXT.faint}`}>{props.sub}</div>
+    ) : null}
+  </div>
+);
+
+/**
+ * Rotating disclosure chevron for tree-line `<details>` (Tree, Json).
+ * `mdxr-chev` is the CSS hook that spins it open — keep the name.
+ */
+export const FoldChev = (props: {
+  /** Non-conflicting extras, e.g. group-hover colors. */
+  className?: string;
+}): ReactElement => (
+  <Icon
+    className={`mdxr-chev h-3 w-3 shrink-0 self-center ${TEXT.faint} ${props.className ?? ""}`}
+    name="lucide:chevron-right"
+  />
+);
+
+/** Muted icon centered on a list row (Files/Deps/Changes/Search). */
+export const RowIcon = (props: {
+  /** Non-conflicting extras. */
+  className?: string;
+  /** Iconify name, e.g. `lucide:search`. */
+  name: string;
+}): ReactElement => (
+  <Icon
+    className={`h-3.5 w-3.5 shrink-0 self-center ${TEXT.faint} ${props.className ?? ""}`}
+    name={props.name}
+  />
+);
+
+/**
+ * Inline kind/status tag — icon + label colored via `className`
+ * (e.g. `text-emerald-600 dark:text-emerald-400`); no background, unlike `Pill`.
+ */
+export const Tag = (props: {
+  children?: ReactNode;
+  /** Tone/extra classes appended after the tag shape. */
+  className?: string;
+  /** Iconify name. */
+  icon: string;
+}): ReactElement => (
+  <span
+    className={`inline-flex shrink-0 items-center gap-1 text-xs font-medium ${props.className ?? ""}`}
+  >
+    <Icon className="h-3.5 w-3.5" name={props.icon} />
+    {props.children}
+  </span>
+);
+
+/** Top-level titled section — the `my-6` wrapper with an optional h3 heading. */
+export const Section = (props: {
+  children?: ReactNode;
+  /** Heading text; empty/absent hides the h3. */
+  title?: string;
+}): ReactElement => (
+  <section className="my-6">
+    {nonEmpty(props.title) ? <h3 className="mt-0">{props.title}</h3> : null}
+    {props.children}
+  </section>
+);
+
+/** Small numbered square used by list items indexed via `useChildIndex`. */
+export const NumBadge = (props: { n: number }): ReactElement => (
+  <span
+    className={`flex h-5 w-5 items-center justify-center rounded-md border ${CHIP_BORDER_CLS} font-mono ${TEXT_MICRO} font-medium ${TEXT.faint}`}
+  >
+    {props.n}
+  </span>
+);
+
+/**
+ * Optional MDX body region — renders nothing without children and trims the
+ * outer margins of the first/last child (TRIM_CLS). `className` carries the
+ * spacing/text look, e.g. `mt-1.5 text-sm`.
+ */
+export const TrimBody = (props: {
+  children?: ReactNode;
+  className?: string;
+}): ReactElement | null =>
+  props.children === undefined ? null : (
+    <div className={`${TRIM_CLS} ${props.className ?? ""}`}>
+      {props.children}
+    </div>
+  );
+
+/**
+ * Bordered card for counted list items (Finding, Hypothesis): index badge +
+ * a pill slot + optional title + prose children.
+ */
+export const IndexedCard = (props: {
+  /** Right-aligned extra in the header row (e.g. a file LocLink). */
+  aside?: ReactNode;
+  children?: ReactNode;
+  /** 1-based index from `useChildIndex`; 0 hides the badge. */
+  n: number;
+  /** Status pill (usually `<Pill>`). */
+  pill: ReactNode;
+  title?: string;
+}): ReactElement => (
+  <article className={`rounded-lg border px-4 py-3 ${BORDER_CLS}`}>
+    <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+      {props.n > 0 ? <NumBadge n={props.n} /> : null}
+      {props.pill}
+      {nonEmpty(props.title) ? (
+        <span className="text-sm font-medium">{props.title}</span>
+      ) : null}
+      {props.aside === undefined ? null : (
+        <span className="ml-auto">{props.aside}</span>
+      )}
+    </div>
+    <TrimBody className="mt-1.5 text-sm">{props.children}</TrimBody>
+  </article>
+);
+
+/**
+ * Section wrapper for counted item lists (Findings, Hypotheses): optional
+ * heading, a `N items · n status` summary line, then indexed children.
+ */
+export const CountedList = (props: {
+  children?: ReactNode;
+  /** prop value → count, e.g. `{confirmed: 2, inferred: 1}`. */
+  counts: ReadonlyMap<string, number>;
+  /** Display label for a count key (rendered lowercased by callers). */
+  labelOf: (key: string) => string;
+  /** `[singular, plural]` noun for the total line. */
+  noun: readonly [string, string];
+  /** Fixed display order for the per-key counts. */
+  order: readonly string[];
+  title?: string;
+}): ReactElement => {
+  const total = [...props.counts.values()].reduce((a, b) => a + b, 0);
+  return (
+    <Section title={props.title}>
+      {total > 0 ? (
+        <div
+          className={`mb-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs ${TEXT.muted}`}
+        >
+          <span>
+            {total} {props.noun[total === 1 ? 0 : 1]}
+          </span>
+          {props.order.map((k) => {
+            const count = props.counts.get(k);
+            return count === undefined ? null : (
+              <span key={k}>
+                · {count} {props.labelOf(k)}
+              </span>
+            );
+          })}
+        </div>
+      ) : null}
+      <div className="not-prose space-y-3">{indexChildren(props.children)}</div>
+    </Section>
+  );
+};
+
+/**
+ * Hover "+" on a code/diff row (`<Comments>`) — opens the comment form
+ * under that line. `data-comment-add` carries the line number, `data-side`/
+ * `data-file` the diff anchor; `.mdxr-add` positions and reveals the
+ * button (BASE_CSS). All are client-JS hooks — rename them and adding
+ * comments stops working.
+ */
+export const AddCommentButton = (props: {
+  file?: string;
+  line: number;
+  side?: "new" | "old";
+}): ReactElement => (
+  <button
+    aria-label={`Add a comment on line ${props.line}`}
+    className="mdxr-add"
+    data-comment-add={props.line}
+    data-file={props.file}
+    data-side={props.side === "old" ? "old" : undefined}
+    title="Add a comment"
+    type="button"
+  >
+    <Icon className="h-3 w-3" name="lucide:plus" />
+  </button>
+);
+
+/**
+ * Reply affordance at the end of a comment thread. `data-comment-reply`
+ * is a client-JS hook (doc-events.ts swaps it for the comment form) —
+ * rename it and replies stop opening.
+ */
+export const CommentReplyButton = (): ReactElement => (
+  <button
+    className={`inline-flex cursor-pointer items-center gap-1 rounded-md border ${CHIP_BORDER_CLS} bg-white px-2 py-0.5 text-xs font-medium ${TEXT.muted} transition-colors hover:bg-neutral-100 active:translate-y-px dark:bg-neutral-900 dark:hover:bg-neutral-800`}
+    data-comment-reply=""
+    type="button"
+  >
+    <Icon className="h-3 w-3" name="lucide:reply" />
+    Reply
+  </button>
+);
+
+/**
+ * Full-width strip inserted between code/diff rows to hold a comment
+ * thread (`<Comments>`) — GitHub's inline review-thread row: white
+ * background, edge-to-edge top border. `bleed` stretches the strip across
+ * a parent's `px-4` padding (annotated code blocks sit inside one).
+ * `anchor` lands on `data-strip-*`: replies posted into the strip inherit
+ * it and the markdown serializer emits it on the new `<Comment>`.
+ * `data-comment-strip`/`data-thread-tools` are client-JS hooks.
+ */
+export const CommentStrip = (props: {
+  /** Anchor replies inherit (file/lines/side). */
+  anchor?: { file?: string; lines?: string; side?: "new" | "old" };
+  bleed?: boolean;
+  children?: ReactNode;
+}): ReactElement => (
+  <div
+    className={commentStripCls(props.bleed)}
+    data-comment-strip=""
+    data-strip-file={props.anchor?.file}
+    data-strip-lines={props.anchor?.lines}
+    data-strip-side={props.anchor?.side === "old" ? "old" : undefined}
+  >
+    {props.children}
+    <div className="mdxr-thread-tools" data-thread-tools="">
+      <CommentReplyButton />
+    </div>
+  </div>
+);
+
+/**
+ * File/editor link that may not resolve: renders an `<a>` when `href` is
+ * set (with `linkTarget`), else a `<span>` — identical classes either way.
+ * Link-only utilities (`hover:underline`, `text-inherit`) are inert on the
+ * span, so a single `className` covers both branches.
+ */
+export const MaybeLink = (props: {
+  children?: ReactNode;
+  className?: string;
+  href?: string;
+}): ReactElement =>
+  props.href === undefined ? (
+    <span className={props.className}>{props.children}</span>
+  ) : (
+    <a
+      className={props.className}
+      href={props.href}
+      {...linkTarget(props.href)}
+    >
+      {props.children}
+    </a>
+  );
+
+/**
+ * Trailing note slot inside a `ListRow` — the muted free-text annotation at
+ * the end of a row (Files/Deps/Changes/…). Renders nothing without children.
+ */
+export const RowNote = (props: {
+  children?: ReactNode;
+  /** Non-conflicting extras, e.g. margin-trimming `[&>*]:…` selectors. */
+  className?: string;
+}): ReactElement | null =>
+  props.children === undefined ? null : (
+    <span
+      className={`min-w-0 flex-1 text-sm ${TEXT.muted} ${props.className ?? ""}`}
+    >
+      {props.children}
+    </span>
+  );
+
+/**
+ * Bordered inline chip shell shared by the reference components —
+ * FileRef/SymbolRef/Cmd (via CodeChip), Ref's link chip, Graph's standalone
+ * node chip. `font-mono` stays with the callers that want mono content.
+ */
+export const CODE_CHIP_CLS = `not-prose mx-0.5 inline-flex items-center gap-1.5 rounded-md border ${CHIP_BORDER_CLS} bg-neutral-100 px-1.5 py-0.5 align-baseline text-[0.85em] ${TEXT.code} dark:bg-neutral-800`;
+
+/** Bordered inline code chip — the `<code>` shell used by FileRef/SymbolRef/Cmd. */
+export const CodeChip = (props: { children?: ReactNode }): ReactElement => (
+  <code className={`font-mono ${CODE_CHIP_CLS}`}>{props.children}</code>
+);
+
+/** `path` plus its `:lines` suffix — the file-location label. */
+export const PathLabel = (props: {
+  lines?: string;
+  /** Classes for the `:{lines}` suffix (e.g. `opacity-60`); plain text otherwise. */
+  linesClassName?: string;
+  path: string;
+}): ReactElement => {
+  const suffix = nonEmpty(props.lines) ? `:${props.lines}` : "";
+  return (
+    <>
+      {props.path}
+      {props.linesClassName === undefined || suffix === "" ? (
+        suffix
+      ) : (
+        <span className={props.linesClassName}>{suffix}</span>
+      )}
+    </>
+  );
+};
+
+/**
+ * File-location link: `path:lines` in muted mono, linked to the editor when
+ * the path resolves (`useFileLink`). The standard companion of `FlowStep`,
+ * `TraceFrame`, `Test` rows.
+ */
+export const LocLink = (props: {
+  /** Overrides the muted-mono look. */
+  className?: string;
+  /** Explicit link override (the `href` catalog prop). */
+  href?: string;
+  lines?: string;
+  path: string;
+}): ReactElement => {
+  const link = useFileLink(props.path, props.lines, props.href);
+  return (
+    <MaybeLink
+      className={props.className ?? `${LOC_CLS} no-underline hover:underline`}
+      href={link}
+    >
+      <PathLabel lines={props.lines} path={props.path} />
+    </MaybeLink>
+  );
+};

package/src/ui/board.tsx

@@ -0,0 +1,173 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, textOf } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { TITLE_PROP } from "./attrs.js";
+import { ACTION_BUTTON_CLS, CopyFeedback, Section, TrimBody } from "./bits.js";
+import { isEl } from "./children.js";
+import { CHIP_PROPS, ChipRow } from "./chips.js";
+import { Icon } from "./icon.js";
+import { STATUS_ICON_CLS, STATUS_ICONS, STATUS_PROP } from "./status-badge.js";
+import type { Status } from "./status-badge.js";
+import { BORDER_CLS, COUNT_CHIP_CLS, TEXT } from "./tones.js";
+
+const DOT: Record<Status, string> = {
+  blocked: "bg-red-500",
+  doing: "bg-sky-500",
+  done: "bg-emerald-500",
+  todo: "bg-neutral-400",
+};
+
+/**
+ * Lane-to-lane move buttons — the keyboard/touch alternative to drag & drop
+ * (HTML5 DnD never reaches touch browsers). `data-board-move` is a client-JS
+ * hook: doc-events.ts moves the card ±1 lane on click and disables the
+ * button at the board's edges via `disabled`.
+ */
+const MoveButton = (props: {
+  /** `"-1"` previous lane, `"1"` next lane. */
+  dir: "-1" | "1";
+}): ReactElement => (
+  <button
+    aria-label={
+      props.dir === "-1" ? "Move to previous lane" : "Move to next lane"
+    }
+    className="mdxr-move"
+    data-board-move={props.dir}
+    title={props.dir === "-1" ? "Move left" : "Move right"}
+    type="button"
+  >
+    <Icon
+      className="h-3.5 w-3.5"
+      name={props.dir === "-1" ? "lucide:chevron-left" : "lucide:chevron-right"}
+    />
+  </button>
+);
+
+export const BoardCard = defineComponent(
+  {
+    description:
+      "カンバンのカード。title は必須。priority/effort/owner/due で既存チップを並べられる。children は補足テキスト。ドラッグまたは両端の矢印ボタンでレーン間を移動できる",
+    schema: v.looseObject({
+      ...CHIP_PROPS,
+      status: STATUS_PROP,
+      title: v.string(),
+    }),
+  },
+  ({ title, priority, effort, owner, due, status, children }) => {
+    // Plain-text payload for the markdown serializer — element children
+    // (links, emphasis) flatten to their visible text.
+    const text = children === undefined ? "" : textOf(children).trim();
+    return (
+      <div
+        className={`rounded-md border bg-white p-2.5 shadow-sm dark:bg-neutral-950 ${BORDER_CLS}`}
+        data-board-card=""
+        data-card-due={due}
+        data-card-effort={effort}
+        data-card-owner={owner}
+        data-card-priority={priority}
+        data-card-status={status}
+        data-card-text={nonEmpty(text) ? text : undefined}
+        data-card-title={title}
+        draggable
+      >
+        <div className="flex items-start gap-1.5">
+          <Icon
+            className={`mdxr-grip mt-0.5 h-3.5 w-3.5 shrink-0 ${TEXT.ghost}`}
+            name="lucide:grip-vertical"
+          />
+          {status === undefined ? null : (
+            <Icon
+              className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${STATUS_ICON_CLS[status]}`}
+              label={status}
+              name={STATUS_ICONS[status]}
+            />
+          )}
+          <div className="min-w-0 flex-1 text-sm leading-snug font-medium">
+            {title}
+          </div>
+          <span className="mdxr-card-moves -mt-0.5 -mr-1 flex shrink-0 items-center">
+            <MoveButton dir="-1" />
+            <MoveButton dir="1" />
+          </span>
+        </div>
+        <TrimBody className={`mt-1 text-xs ${TEXT.muted}`}>{children}</TrimBody>
+        <ChipRow due={due} effort={effort} owner={owner} priority={priority} />
+      </div>
+    );
+  }
+);
+
+export const Lane = defineComponent(
+  {
+    description:
+      "カンバンの列。<Board> の子として使う。title は列名、status でヘッダの色点 (todo|doing|done|blocked)。子の <BoardCard> 数がバッジになる。空の列もドロップ先になる",
+    schema: v.looseObject({
+      status: STATUS_PROP,
+      title: v.string(),
+    }),
+  },
+  ({ title, status, children }) => {
+    const count = flattenChildren(children).filter((c) =>
+      isEl(c, BoardCard)
+    ).length;
+    return (
+      <section
+        className="w-64 shrink-0 rounded-xl bg-neutral-100/70 p-2 dark:bg-neutral-900/70"
+        data-board-lane=""
+        data-lane-status={status}
+        data-lane-title={title}
+      >
+        <header
+          className={`flex items-center gap-2 px-1.5 py-1.5 text-xs font-semibold ${TEXT.body}`}
+        >
+          {status === undefined ? null : (
+            <span
+              aria-hidden
+              className={`h-2 w-2 shrink-0 rounded-full ${DOT[status]}`}
+            />
+          )}
+          <span className="min-w-0 flex-1 truncate">{title}</span>
+          <span className={`mdxr-lane-count ${COUNT_CHIP_CLS}`}>{count}</span>
+        </header>
+        <div className="min-h-8 space-y-2" data-board-cards="">
+          {children}
+        </div>
+      </section>
+    );
+  }
+);
+
+export const Board = defineComponent(
+  {
+    description:
+      "カンバンボードのコンテナ。<Lane> を横に並べる (はみ出しは横スクロール)。カードはドラッグまたは矢印ボタンで移動でき、移動後の状態を <Board> マークアップとしてコピーできる",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => (
+    <Section title={title}>
+      <div className="mdxr-board" data-board="" data-board-title={title}>
+        <div className="not-prose flex items-start gap-3 overflow-x-auto pb-1">
+          {children}
+        </div>
+        <div className="mdxr-board-tools not-prose mt-2 flex items-center justify-between gap-3">
+          <span className={`text-xs ${TEXT.faint}`}>
+            Drag cards or use the arrow buttons, then copy the updated markup.
+          </span>
+          <button
+            className={ACTION_BUTTON_CLS}
+            data-board-copy=""
+            type="button"
+          >
+            <CopyFeedback
+              done="Copied"
+              icon="lucide:clipboard-list"
+              label="Copy markdown"
+            />
+          </button>
+        </div>
+      </div>
+    </Section>
+  )
+);