@suzumiyaaoba/mdxr 0.1.0

package/src/ui/tests.tsx

@@ -0,0 +1,218 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { isOneOf, nonEmpty } from "../guards.js";
+import { LINK_LINES_PROPS, NUMISH } from "./attrs.js";
+import { CaptionBar, ListPanel, LocLink, TrimBody } from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  CHIP_BORDER_CLS,
+  COUNT_CHIP_CLS,
+  LOC_CLS,
+  SUNKEN_CLS,
+  TEXT,
+  TONE_TEXT,
+} from "./tones.js";
+
+export const TEST_STATUSES = ["pass", "fail", "skip", "todo"] as const;
+export type TestStatus = (typeof TEST_STATUSES)[number];
+
+const isTestStatus = isOneOf(TEST_STATUSES);
+
+const STYLES: Record<TestStatus, { cls: string; icon: string; label: string }> =
+  {
+    fail: {
+      cls: TONE_TEXT.red,
+      icon: "lucide:circle-x",
+      label: "failed",
+    },
+    pass: {
+      cls: TONE_TEXT.emerald,
+      icon: "lucide:circle-check",
+      label: "passed",
+    },
+    skip: {
+      cls: TONE_TEXT.neutral,
+      icon: "lucide:circle-minus",
+      label: "skipped",
+    },
+    todo: {
+      cls: TONE_TEXT.violet,
+      icon: "lucide:circle-dashed",
+      label: "todo",
+    },
+  };
+
+/** `"120ms"`/`"1.2s"`/`"2m"` → milliseconds; unparseable → undefined. */
+export const parseDuration = (x: unknown): number | undefined => {
+  if (typeof x === "number") {
+    return Number.isFinite(x) ? x : undefined;
+  }
+  if (typeof x !== "string") {
+    return undefined;
+  }
+  const m = /^(?<n>\d+(?:\.\d+)?)\s*(?<u>ms|s|m)?$/u.exec(x.trim());
+  if (m?.groups === undefined) {
+    return undefined;
+  }
+  const n = Number(m.groups.n);
+  const unit = m.groups.u ?? "ms";
+  if (unit === "s") {
+    return n * 1000;
+  }
+  if (unit === "m") {
+    return n * 60_000;
+  }
+  return n;
+};
+
+export const formatDuration = (ms: number): string => {
+  if (ms >= 10_000) {
+    return `${Math.round(ms / 1000)}s`;
+  }
+  if (ms >= 1000) {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+  return `${Math.round(ms)}ms`;
+};
+
+export const Test = defineComponent(
+  {
+    description:
+      "テスト結果1行。name は必須、status は pass|fail|skip|todo。duration に所要時間、file/lines で実ファイルへのエディタリンク。children は失敗時の詳細 (エラー出力など)",
+    schema: v.looseObject({
+      ...LINK_LINES_PROPS,
+      duration: v.optional(NUMISH),
+      file: v.optional(v.string()),
+      name: v.string(),
+      status: v.optional(v.picklist(TEST_STATUSES), "pass"),
+    }),
+  },
+  ({ name, status, duration, file, lines, href, children }) => {
+    const s = STYLES[status];
+    return (
+      <div className="px-4 py-2.5">
+        <div className="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
+          <Icon
+            className={`h-4 w-4 shrink-0 self-center ${s.cls}`}
+            label={s.label}
+            name={s.icon}
+          />
+          <span className="text-sm">{name}</span>
+          {nonEmpty(file) ? (
+            <LocLink href={href} lines={lines} path={file} />
+          ) : null}
+          {duration === undefined || duration === "" ? null : (
+            <span className={`${LOC_CLS} ml-auto tabular-nums`}>
+              {String(duration)}
+            </span>
+          )}
+        </div>
+        <TrimBody
+          className={`mt-1.5 rounded-md border-l-2 px-3 py-2 text-xs ${TEXT.body} ${
+            status === "fail"
+              ? "border-red-400/60 bg-red-500/5"
+              : `${CHIP_BORDER_CLS} ${SUNKEN_CLS}`
+          }`}
+        >
+          {children}
+        </TrimBody>
+      </div>
+    );
+  }
+);
+
+interface TestSummary {
+  counts: Map<TestStatus, number>;
+  /** False when any <Test> carried an unparseable duration — hides the total. */
+  durationOk: boolean;
+  total: number;
+  totalMs: number;
+}
+
+/** Aggregates status counts and total duration over <Test> children. */
+const summarizeTests = (children: ReactNode): TestSummary => {
+  const counts = new Map<TestStatus, number>();
+  let totalMs = 0;
+  let total = 0;
+  let durationOk = true;
+  for (const node of flattenChildren(children)) {
+    if (!isEl(node, Test)) {
+      continue;
+    }
+    const st = propOf(node, "status");
+    const status = isTestStatus(st) ? st : "pass";
+    counts.set(status, (counts.get(status) ?? 0) + 1);
+    total += 1;
+    const rawDuration = propOf(node, "duration");
+    const d = parseDuration(rawDuration);
+    if (d !== undefined) {
+      totalMs += d;
+      continue;
+    }
+    if (rawDuration !== undefined && rawDuration !== "") {
+      durationOk = false;
+    }
+  }
+  return { counts, durationOk, total, totalMs };
+};
+
+const TestsCaption = ({
+  summary,
+  title,
+  tool,
+}: {
+  summary: TestSummary;
+  title: string | undefined;
+  tool: string | undefined;
+}): ReactElement => (
+  <CaptionBar className="flex flex-wrap items-center gap-x-2.5 gap-y-1">
+    <Icon className="h-3.5 w-3.5" name="lucide:flask-conical" />
+    {nonEmpty(title) ? (
+      <span className="font-medium">{title}</span>
+    ) : (
+      <span className="font-medium">Tests</span>
+    )}
+    {nonEmpty(tool) ? <span className={COUNT_CHIP_CLS}>{tool}</span> : null}
+    <span className="ml-auto flex items-center gap-x-2 font-medium">
+      {TEST_STATUSES.map((st) => {
+        const c = summary.counts.get(st);
+        return c === undefined ? null : (
+          <span className={STYLES[st].cls} key={st}>
+            {c} {STYLES[st].label}
+          </span>
+        );
+      })}
+      {summary.durationOk && summary.totalMs > 0 ? (
+        <span className="font-mono tabular-nums">
+          {formatDuration(summary.totalMs)}
+        </span>
+      ) : null}
+    </span>
+  </CaptionBar>
+);
+
+export const Tests = defineComponent(
+  {
+    description:
+      "テスト実行レポートのコンテナ。<Test> を並べる。title はキャプション、tool はランナー名チップ。status 別の件数と合計時間を自動集計",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      tool: v.optional(v.string()),
+    }),
+  },
+  ({ title, tool, children }) => {
+    const summary = summarizeTests(children);
+    const caption = nonEmpty(title) || nonEmpty(tool) || summary.total > 0;
+    return (
+      <ListPanel>
+        {caption ? (
+          <TestsCaption summary={summary} title={title} tool={tool} />
+        ) : null}
+        {children}
+      </ListPanel>
+    );
+  }
+);

package/src/ui/timeline.tsx

@@ -0,0 +1,63 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { TITLE_PROP } from "./attrs.js";
+import { Section } from "./bits.js";
+import { Icon } from "./icon.js";
+import {
+  STATUS_ICON_CLS,
+  STATUS_ICONS,
+  STATUS_PROP,
+  StatusBadge,
+} from "./status-badge.js";
+import { RAIL_CLS, TEXT } from "./tones.js";
+
+export const Timeline = defineComponent(
+  {
+    description: "時系列のイベント/マイルストーンリスト。<Event> を並べる",
+    schema: v.looseObject(TITLE_PROP),
+  },
+  ({ title, children }) => (
+    <Section title={title}>
+      <div className={`space-y-4 border-l-2 pl-4 ${RAIL_CLS}`}>{children}</div>
+    </Section>
+  )
+);
+
+export const Event = defineComponent(
+  {
+    description:
+      "タイムラインの1項目。date は必須、status は todo|doing|done|blocked",
+    schema: v.looseObject({
+      date: v.string(),
+      status: STATUS_PROP,
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ date, status, title, children }) => (
+    <div className="relative">
+      {status === undefined ? (
+        <span
+          className="absolute top-1.5 -left-[1.42rem] h-2.5 w-2.5 rounded-full bg-neutral-400 dark:bg-neutral-500"
+          aria-hidden
+        />
+      ) : (
+        <Icon
+          className={`bg-background absolute top-0.5 -left-[1.61rem] h-4 w-4 ${STATUS_ICON_CLS[status]}`}
+          name={STATUS_ICONS[status]}
+        />
+      )}
+      <div className="flex flex-wrap items-baseline gap-2">
+        <time className={`font-mono text-xs ${TEXT.muted}`}>{date}</time>
+        {status === undefined ? null : <StatusBadge status={status} />}
+        {nonEmpty(title) ? <span className="font-medium">{title}</span> : null}
+      </div>
+      {children === undefined ? null : (
+        <div className="text-sm [&>*:first-child]:mt-1.5 [&>*:last-child]:mb-0">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+);

package/src/ui/toc.tsx

@@ -0,0 +1,56 @@
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { attrFalse, BOOLISH_PROP } from "./attrs.js";
+import { PANEL_CLS } from "./bits.js";
+import { Icon } from "./icon.js";
+import { BORDER_CLS, SURFACE_CLS, TEXT } from "./tones.js";
+
+const closed = attrFalse;
+
+/**
+ * Table of contents. The `:::toc` directive / `<Toc>` element is a marker —
+ * the remark plugin collects the document's headings, gives them `id`s, and
+ * injects the link list as this component's children. `depth`/`min` are read
+ * by the plugin at that point; the component itself frames the list as a
+ * collapsible outline (native <details> — works without client JS).
+ */
+export const Toc = defineComponent(
+  {
+    description:
+      '目次。見出し (h2〜) へのリンク一覧を自動生成する。depth="4" で深さ変更 (デフォルト 3)。open="false" で初期状態を折りたたみ。:::toc でも書ける',
+    schema: v.looseObject({
+      depth: v.optional(v.string()),
+      min: v.optional(v.string()),
+      open: BOOLISH_PROP,
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ title, open, children }) => {
+    if (flattenChildren(children).length === 0) {
+      return null;
+    }
+    return (
+      <nav aria-label="Table of contents" className={`mdxr-toc ${PANEL_CLS}`}>
+        <details open={!closed(open)}>
+          <summary
+            className={`flex cursor-pointer items-center gap-1.5 ${SURFACE_CLS} px-4 py-2 text-xs font-semibold ${TEXT.muted} transition-colors select-none hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-800/70 dark:active:bg-neutral-800`}
+          >
+            <Icon className="h-3.5 w-3.5" name="lucide:list-tree" />
+            <span className="flex-1">
+              {nonEmpty(title) ? title : "Contents"}
+            </span>
+            <Icon
+              className="mdxr-chev h-3.5 w-3.5 opacity-50"
+              name="lucide:chevron-right"
+            />
+          </summary>
+          <div className={`mdxr-toc-body border-t px-3 py-2.5 ${BORDER_CLS}`}>
+            {children}
+          </div>
+        </details>
+      </nav>
+    );
+  }
+);

package/src/ui/tones.ts

@@ -0,0 +1,187 @@
+/**
+ * Semantic color pairs for pill/chip surfaces — `bg-{c}-100 text-{c}-700`
+ * with the dark-mode counterparts. Shared so every status badge, risk chip,
+ * and confidence pill stays visually consistent (and one edit restyles all).
+ */
+export const TONE = {
+  amber: "bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-300",
+  emerald:
+    "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-300",
+  indigo:
+    "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/60 dark:text-indigo-300",
+  neutral:
+    "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300",
+  orange:
+    "bg-orange-100 text-orange-700 dark:bg-orange-900/60 dark:text-orange-300",
+  red: "bg-red-100 text-red-700 dark:bg-red-900/60 dark:text-red-300",
+  sky: "bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-300",
+  teal: "bg-teal-100 text-teal-700 dark:bg-teal-900/60 dark:text-teal-300",
+  violet:
+    "bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-300",
+} as const;
+
+export type Tone = keyof typeof TONE;
+
+/**
+ * Neutral text-tone pairs, strongest→faintest. Use these instead of open-
+ * coding `text-neutral-* dark:text-neutral-*` so the muted-text hierarchy
+ * stays consistent across the catalog.
+ */
+export const TEXT = {
+  /** Secondary body text (neutral-600/300). */
+  body: "text-neutral-600 dark:text-neutral-300",
+  /** Interactive chip/control labels (neutral-700/200). */
+  chip: "text-neutral-700 dark:text-neutral-200",
+  /** Code/mono-context body (neutral-800/200). */
+  code: "text-neutral-800 dark:text-neutral-200",
+  /** Faint placeholders, locations, icons (neutral-400/500). */
+  faint: "text-neutral-400 dark:text-neutral-500",
+  /** Ghosted context lines, empty cells (neutral-300/600). */
+  ghost: "text-neutral-300 dark:text-neutral-600",
+  /** Muted annotations, captions, meta (neutral-500/400). */
+  muted: "text-neutral-500 dark:text-neutral-400",
+  /** Headings, term names, primary labels (neutral-900/100). */
+  strong: "text-neutral-900 dark:text-neutral-100",
+} as const;
+
+/**
+ * Text-only accent pairs (`text-{c}-600 dark:text-{c}-400`) — the single
+ * accent scale for tag labels, status icons, +/- counts, and graph edges.
+ * `neutral` maps to `TEXT.muted`. Standalone fills (dots, bars) keep
+ * `bg-{c}-500` and need no dark variant.
+ */
+export const TONE_TEXT = {
+  amber: "text-amber-600 dark:text-amber-400",
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  indigo: "text-indigo-600 dark:text-indigo-400",
+  neutral: "text-neutral-500 dark:text-neutral-400",
+  orange: "text-orange-600 dark:text-orange-400",
+  red: "text-red-600 dark:text-red-400",
+  sky: "text-sky-600 dark:text-sky-400",
+  teal: "text-teal-600 dark:text-teal-400",
+  violet: "text-violet-600 dark:text-violet-400",
+} as const;
+
+/**
+ * Lightly tinted bands (`bg-{c}-50 text-{c}-700`, dark `950/40` + `300`) —
+ * inline alert strips inside panels: Trace errors, Before/After headers,
+ * diff hunk markers. Callout bodies stay on their own deeper `950/100`
+ * variant since they carry prose.
+ */
+export const TONE_BAND = {
+  amber: "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+  emerald:
+    "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300",
+  indigo:
+    "bg-indigo-50 text-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-300",
+  neutral:
+    "bg-neutral-100 text-neutral-700 dark:bg-neutral-800/70 dark:text-neutral-300",
+  orange:
+    "bg-orange-50 text-orange-700 dark:bg-orange-950/40 dark:text-orange-300",
+  red: "bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300",
+  sky: "bg-sky-50 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300",
+  teal: "bg-teal-50 text-teal-700 dark:bg-teal-950/40 dark:text-teal-300",
+  violet:
+    "bg-violet-50 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300",
+} as const;
+
+/**
+ * 1px tinted card borders (`border-{c}-200 dark:border-{c}-900/60`) — the
+ * outline for tone-tinted cards (Option, Before/After). `neutral` is the
+ * standard panel border. Left-accent bars (Callout/Risk `border-l-4`) keep
+ * the stronger `border-{c}-500` since a 4px strip is the accent itself.
+ */
+export const TONE_BORDER = {
+  amber: "border-amber-200 dark:border-amber-900/60",
+  emerald: "border-emerald-200 dark:border-emerald-900/60",
+  indigo: "border-indigo-200 dark:border-indigo-900/60",
+  neutral: "border-neutral-200 dark:border-neutral-800",
+  orange: "border-orange-200 dark:border-orange-900/60",
+  red: "border-red-200 dark:border-red-900/60",
+  sky: "border-sky-200 dark:border-sky-900/60",
+  teal: "border-teal-200 dark:border-teal-900/60",
+  violet: "border-violet-200 dark:border-violet-900/60",
+} as const;
+
+/** Tiny chip/tick-label size — counts, method badges, axis labels (10.4px). */
+export const TEXT_MICRO = "text-[0.65rem]";
+
+/** Small secondary line — sub-labels under names, dense meta rows (11.2px). */
+export const TEXT_SUB = "text-[0.7rem]";
+
+/** Muted mono chip text — the `path:lines` location label shared by
+ * file-referencing components (Flow, Trace, Tests, Search, Approvals). */
+export const LOC_CLS = `font-mono text-xs ${TEXT.faint}`;
+
+/** Inline `<code>` look inside list rows — `font-mono` on the body text color. */
+export const MONO_CLS = `font-mono text-[0.85em] ${TEXT.code}`;
+
+/** Trim first/last child margins inside MDX-rendered body regions. */
+export const TRIM_CLS = "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0";
+
+/** Standard neutral border — panels, cards, dividers (neutral-200/800). */
+export const BORDER_CLS = "border-neutral-200 dark:border-neutral-800";
+
+/** CommentStrip's class list — shared with the `<template>` clone in
+ * `<Comments>` so strips the client inserts match SSR output. `bleed`
+ * stretches the strip across a parent's `px-4` padding (annotated code
+ * blocks sit inside one). */
+export const commentStripCls = (bleed?: boolean): string =>
+  `border-t ${BORDER_CLS} space-y-3 bg-white py-3 font-sans text-sm whitespace-normal dark:bg-neutral-950 ${
+    bleed === true ? "-mx-4 px-4" : "px-4"
+  }`;
+
+/** Stronger border for controls and chips — inputs, code chips, marked
+ * squares (neutral-300/700). */
+export const CHIP_BORDER_CLS = "border-neutral-300 dark:border-neutral-700";
+
+/** Caption-strip surface — header/footer bars inside panels (neutral-50/900). */
+export const SURFACE_CLS = "bg-neutral-50 dark:bg-neutral-900";
+
+/** Sunken content surface — file trees, JSON/code viewers, graph canvases
+ * (neutral-50 light, softer `900/60` dark so it sits under the card bg). */
+export const SUNKEN_CLS = "bg-neutral-50 dark:bg-neutral-900/60";
+
+/** Connector/guide lines in border form — timeline rails, JSON indent guides
+ * (a hair darker than BORDER_CLS in dark mode since they are functional). */
+export const RAIL_CLS = "border-neutral-200 dark:border-neutral-700";
+
+/** Connector/guide lines in background form — flow stems, chart gridlines,
+ * tree rails. */
+export const RAIL_BG_CLS = "bg-neutral-200 dark:bg-neutral-700";
+
+/** Sunken track behind progress/timing bars — Summary, Gantt, Waterfall. */
+export const TRACK_CLS = "bg-neutral-100 dark:bg-neutral-800";
+
+/** Inherit-color link that underlines on hover — chips/labels inside panels. */
+export const LINK_CLS = "text-inherit no-underline hover:underline";
+
+/** Indented tree-line row — Json nodes and file-Tree entries. */
+export const TREE_ROW_CLS = "flex items-baseline gap-1.5 py-px";
+
+/** Clickable inline fold row — `<summary>` of a tree-line <details> (Tree, Json). */
+export const DISCLOSURE_ROW_CLS =
+  "flex cursor-pointer items-baseline gap-1.5 py-px select-none";
+
+/** CaptionBar layout for icon+title headers (Graph/Gantt/Waterfall/Endpoints). */
+export const CAPTION_TITLE_CLS = "flex items-center gap-2 font-medium";
+
+/** Right-aligned mono digits in a titled caption (Gantt/Waterfall). */
+export const MONO_NUM_CLS = "font-mono font-normal tabular-nums";
+
+/** Soft inner divider rows inside panels (Ask questions, Matrix, Props). */
+export const DIVIDE_CLS =
+  "divide-y divide-neutral-100 dark:divide-neutral-800/60";
+
+/** Tiny pill shape — counts, tags, diff file kinds. Callers add a TONE/bg. */
+export const MINI_CHIP_CLS = `inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-px font-medium ${TEXT_MICRO}`;
+
+/** Muted count/tag chip on tinted surfaces — Json key counts, Tests tool
+ * tags, Board lane counts (neutral-200/70 so it reads on neutral-50/100). */
+export const COUNT_CHIP_CLS = `${MINI_CHIP_CLS} bg-neutral-200/70 font-mono ${TEXT.muted} dark:bg-neutral-800`;
+
+/** Bordered mono tag — search tool names, graph edge labels. */
+export const MONO_TAG_CLS = `inline-flex shrink-0 items-center rounded border ${CHIP_BORDER_CLS} bg-white px-1.5 py-0.5 font-mono ${TEXT_SUB} ${TEXT.muted} dark:bg-neutral-900`;
+
+/** Left-accent panel shell shared by Callout and Risk. */
+export const EDGE_PANEL_CLS = "my-6 rounded-r-lg border-l-4 px-4 py-3 text-sm";

package/src/ui/trace.tsx

@@ -0,0 +1,69 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { FILE_LINK_PROPS } from "./attrs.js";
+import { ListPanel, ListRow, LocLink, RowNote, Tag } from "./bits.js";
+import { indexChildren, useChildIndex } from "./child-index.js";
+import { Icon } from "./icon.js";
+import { LOC_CLS, MONO_CLS, TEXT, TONE_BAND } from "./tones.js";
+
+export const FRAME_KINDS = ["app", "lib"] as const;
+export type FrameKind = (typeof FRAME_KINDS)[number];
+
+export const Trace = defineComponent(
+  {
+    description:
+      "スタックトレースのコンテナ。<TraceFrame> を先頭（最新フレーム）から順に並べる。error で例外メッセージ行を先頭に表示、title でキャプションバー",
+    schema: v.looseObject({
+      error: v.optional(v.string()),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ error, title, children }) => (
+    <ListPanel title={title}>
+      {nonEmpty(error) ? (
+        <div
+          className={`flex items-center gap-2 px-4 py-2 font-mono text-[0.85em] font-medium ${TONE_BAND.red}`}
+        >
+          <Icon className="h-3.5 w-3.5 shrink-0" name="lucide:circle-alert" />
+          {error}
+        </div>
+      ) : null}
+      {indexChildren(children)}
+    </ListPanel>
+  )
+);
+
+export const TraceFrame = defineComponent(
+  {
+    description:
+      "スタックフレーム1行。#番号はコンテナ内で自動採番（先頭=#0）。name=シンボル名、path/lines=発生箇所（実在すればエディタリンク、href で上書き可）、kind=app|lib（lib は淡色+タグ）。children は注記",
+    schema: v.looseObject({
+      ...FILE_LINK_PROPS,
+      kind: v.optional(v.picklist(FRAME_KINDS), "app"),
+      name: v.string(),
+    }),
+  },
+  ({ name, path, lines, kind, href, children }) => {
+    const { n } = useChildIndex();
+    const lib = kind === "lib";
+    return (
+      <ListRow className={lib ? "opacity-60" : ""}>
+        <span className={`${LOC_CLS} w-7 shrink-0`}>
+          {n > 0 ? `#${n - 1}` : "·"}
+        </span>
+        <code className={MONO_CLS}>{name}</code>
+        {nonEmpty(path) ? (
+          <LocLink href={href} lines={lines} path={path} />
+        ) : null}
+        {lib ? (
+          <Tag className={TEXT.faint} icon="lucide:package">
+            lib
+          </Tag>
+        ) : null}
+        <RowNote>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);