@suzumiyaaoba/mdxr 0.1.0

package/src/ui/stats.tsx

@@ -0,0 +1,63 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { NUMISH } from "./attrs.js";
+import { Icon } from "./icon.js";
+import { BORDER_CLS, TEXT, TONE_TEXT } from "./tones.js";
+
+export const Stats = defineComponent(
+  {
+    description: "指標カードのグリッド。<Stat> を並べる",
+  },
+  ({ children }) => (
+    <div className="not-prose my-6 grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3">
+      {children}
+    </div>
+  )
+);
+
+const deltaStyle = (delta: string): { cls: string; icon: string } => {
+  if (delta.startsWith("+")) {
+    return {
+      cls: TONE_TEXT.emerald,
+      icon: "lucide:trending-up",
+    };
+  }
+  if (delta.startsWith("-")) {
+    return {
+      cls: TONE_TEXT.red,
+      icon: "lucide:trending-down",
+    };
+  }
+  return {
+    cls: TEXT.muted,
+    icon: "lucide:minus",
+  };
+};
+
+export const Stat = defineComponent(
+  {
+    description:
+      '指標カード。value/label は必須。delta に "+12%" 等を書くと符号で色付く',
+    schema: v.looseObject({
+      delta: v.optional(v.string()),
+      label: v.string(),
+      value: NUMISH,
+    }),
+  },
+  ({ value, label, delta }) => (
+    <div className={`rounded-lg border px-4 py-3 ${BORDER_CLS}`}>
+      <div className="text-2xl font-semibold tabular-nums">{value}</div>
+      <div className={`mt-0.5 text-sm ${TEXT.muted}`}>{label}</div>
+      {nonEmpty(delta) ? (
+        <div
+          className={`mt-1.5 flex items-center gap-1 text-xs font-medium ${deltaStyle(delta).cls}`}
+        >
+          <Icon className="h-3.5 w-3.5" name={deltaStyle(delta).icon} />
+          {delta}
+        </div>
+      ) : null}
+    </div>
+  )
+);

package/src/ui/status-badge.tsx

@@ -0,0 +1,66 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { isOneOf } from "../guards.js";
+import { Pill } from "./bits.js";
+import { TONE, TONE_TEXT } from "./tones.js";
+
+export const STATUSES = ["todo", "doing", "done", "blocked"] as const;
+export type Status = (typeof STATUSES)[number];
+
+export const isStatus = isOneOf(STATUSES);
+
+/** Schema entry for an optional `status` prop — shared by every task/status component. */
+export const STATUS_PROP = v.optional(v.picklist(STATUSES));
+
+/** Iconify names for each status — shared by StatusBadge, Step and Event. */
+export const STATUS_ICONS: Record<Status, string> = {
+  blocked: "lucide:circle-x",
+  doing: "lucide:loader-circle",
+  done: "lucide:circle-check",
+  todo: "lucide:circle",
+};
+
+/** `text-*` color for status icons used standalone (Step, Event, Graph nodes). */
+export const STATUS_ICON_CLS: Record<Status, string> = {
+  blocked: TONE_TEXT.red,
+  doing: TONE_TEXT.sky,
+  done: TONE_TEXT.emerald,
+  todo: TONE_TEXT.neutral,
+};
+
+const STYLES: Record<Status, { label: string; cls: string }> = {
+  blocked: {
+    cls: TONE.red,
+    label: "Blocked",
+  },
+  doing: {
+    cls: TONE.sky,
+    label: "In progress",
+  },
+  done: {
+    cls: TONE.emerald,
+    label: "Done",
+  },
+  todo: {
+    cls: TONE.neutral,
+    label: "Todo",
+  },
+};
+
+export const StatusBadge = defineComponent(
+  {
+    description: "ステータスを示す小さなバッジ",
+    schema: v.looseObject({
+      status: v.optional(v.picklist(STATUSES), "todo"),
+    }),
+  },
+  ({ status }) => {
+    const s = STYLES[status];
+    return (
+      <Pill className={s.cls} icon={STATUS_ICONS[status]}>
+        {s.label}
+      </Pill>
+    );
+  }
+);

package/src/ui/statuspage.tsx

@@ -0,0 +1,238 @@
+import type { ReactElement } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { isOneOf, nonEmpty } from "../guards.js";
+import { NUMISH } from "./attrs.js";
+import {
+  CaptionBar,
+  ListPanel,
+  ListRow,
+  Panel,
+  Pill,
+  RowNote,
+} from "./bits.js";
+import { isEl, propOf } from "./children.js";
+import { Icon } from "./icon.js";
+import {
+  CAPTION_TITLE_CLS,
+  LOC_CLS,
+  MONO_NUM_CLS,
+  TEXT,
+  TEXT_SUB,
+  TONE,
+  TRIM_CLS,
+} from "./tones.js";
+
+export const SERVICE_STATUSES = [
+  "operational",
+  "degraded",
+  "outage",
+  "maintenance",
+] as const;
+export type ServiceStatus = (typeof SERVICE_STATUSES)[number];
+
+const isServiceStatus = isOneOf(SERVICE_STATUSES);
+
+const SERVICE_STYLES: Record<
+  ServiceStatus,
+  { cls: string; dot: string; icon: string; label: string }
+> = {
+  degraded: {
+    cls: TONE.amber,
+    dot: "bg-amber-500",
+    icon: "lucide:triangle-alert",
+    label: "Degraded",
+  },
+  maintenance: {
+    cls: TONE.sky,
+    dot: "bg-sky-500",
+    icon: "lucide:wrench",
+    label: "Maintenance",
+  },
+  operational: {
+    cls: TONE.emerald,
+    dot: "bg-emerald-500",
+    icon: "lucide:circle-check",
+    label: "Operational",
+  },
+  outage: {
+    cls: TONE.red,
+    dot: "bg-red-500",
+    icon: "lucide:circle-x",
+    label: "Outage",
+  },
+};
+
+/** Worst status across services → the page-level rollup. */
+const rollup = (statuses: readonly ServiceStatus[]): ServiceStatus => {
+  if (statuses.includes("outage")) {
+    return "outage";
+  }
+  if (statuses.includes("degraded")) {
+    return "degraded";
+  }
+  if (statuses.includes("maintenance")) {
+    return "maintenance";
+  }
+  return "operational";
+};
+
+export const Service = defineComponent(
+  {
+    description:
+      'サービス稼働状況1行。name は必須、status は operational|degraded|outage|maintenance、uptime に稼働率 ("99.98%")。children は補足 (影響内容など)',
+    schema: v.looseObject({
+      name: v.string(),
+      status: v.optional(v.picklist(SERVICE_STATUSES), "operational"),
+      uptime: v.optional(NUMISH),
+    }),
+  },
+  ({ name, status, uptime, children }) => {
+    const s = SERVICE_STYLES[status];
+    return (
+      <ListRow>
+        <span
+          aria-hidden
+          className={`h-2.5 w-2.5 shrink-0 self-center rounded-full ${s.dot}`}
+        />
+        <span className="text-sm font-medium">{name}</span>
+        <Pill className={s.cls} icon={s.icon}>
+          {s.label}
+        </Pill>
+        {uptime === undefined || uptime === "" ? null : (
+          <span className={`${LOC_CLS} ml-auto tabular-nums`}>
+            {String(uptime)}
+          </span>
+        )}
+        <RowNote className={TRIM_CLS}>{children}</RowNote>
+      </ListRow>
+    );
+  }
+);
+
+export const StatusPage = defineComponent(
+  {
+    description:
+      "サービスステータス一覧のコンテナ。<Service> を並べ、最悪ステータスをロールアップ表示 (全稼働/一部障害/停止)。title はキャプション",
+    schema: v.looseObject({
+      title: v.optional(v.string()),
+      updated: v.optional(v.string()),
+    }),
+  },
+  ({ title, updated, children }) => {
+    const statuses: ServiceStatus[] = [];
+    for (const node of flattenChildren(children)) {
+      if (!isEl(node, Service)) {
+        continue;
+      }
+      const st = propOf(node, "status");
+      statuses.push(isServiceStatus(st) ? st : "operational");
+    }
+    const overall = rollup(statuses);
+    const o = SERVICE_STYLES[overall];
+    return (
+      <ListPanel>
+        <CaptionBar className={CAPTION_TITLE_CLS}>
+          <Icon className="h-3.5 w-3.5" name="lucide:activity" />
+          {nonEmpty(title) ? title : "Status"}
+          <span className="ml-auto flex items-center gap-x-2">
+            {nonEmpty(updated) ? (
+              <span className={`${TEXT_SUB} font-normal ${TEXT.faint}`}>
+                {updated}
+              </span>
+            ) : null}
+            {statuses.length > 0 ? (
+              <Pill className={o.cls} icon={o.icon}>
+                {overall === "operational"
+                  ? "All systems operational"
+                  : o.label}
+              </Pill>
+            ) : null}
+          </span>
+        </CaptionBar>
+        {children}
+      </ListPanel>
+    );
+  }
+);
+
+export const DAY_STATUSES = [
+  "up",
+  "degraded",
+  "down",
+  "maint",
+  "none",
+] as const;
+export type DayStatus = (typeof DAY_STATUSES)[number];
+
+const DAY_CLS: Record<DayStatus, string> = {
+  degraded: "bg-amber-400 dark:bg-amber-500",
+  down: "bg-red-500",
+  maint: "bg-sky-400 dark:bg-sky-500",
+  none: "bg-neutral-200 dark:bg-neutral-700",
+  up: "bg-emerald-500",
+};
+
+const DAY_LABEL: Record<DayStatus, string> = {
+  degraded: "degraded",
+  down: "down",
+  maint: "maintenance",
+  none: "no data",
+  up: "operational",
+};
+
+export const Day = defineComponent(
+  {
+    description:
+      "稼働バー1セル。status は up|degraded|down|maint|none。date/note はツールチップ。<Uptime> 内に並べる",
+    schema: v.looseObject({
+      date: v.optional(v.string()),
+      note: v.optional(v.string()),
+      status: v.optional(v.picklist(DAY_STATUSES), "up"),
+    }),
+  },
+  ({ status, date, note }) => {
+    const tip = [date, DAY_LABEL[status], note].filter(nonEmpty).join(" — ");
+    return (
+      <span
+        className={`inline-block h-6 w-1.5 shrink-0 rounded-sm ${DAY_CLS[status]}`}
+        title={nonEmpty(tip) ? tip : DAY_LABEL[status]}
+      />
+    );
+  }
+);
+
+export const Uptime = defineComponent(
+  {
+    description:
+      "稼働率バー (ステータスページ風)。<Day> セルを日付順に並べる。title はラベル、pct は稼働率表示、from/to で期間の端ラベル",
+    schema: v.looseObject({
+      from: v.optional(v.string()),
+      pct: v.optional(NUMISH),
+      title: v.optional(v.string()),
+      to: v.optional(v.string()),
+    }),
+  },
+  ({ title, pct, from, to, children }): ReactElement => (
+    <Panel className="px-4 py-3">
+      <div className="mb-2 flex flex-wrap items-baseline gap-x-2">
+        <span className="text-sm font-medium">
+          {nonEmpty(title) ? title : "Uptime"}
+        </span>
+        {pct === undefined || pct === "" ? null : (
+          <span className={`ml-auto ${MONO_NUM_CLS} text-sm ${TEXT.muted}`}>
+            {String(pct)}%
+          </span>
+        )}
+      </div>
+      <div className="flex flex-wrap gap-0.5">{children}</div>
+      {nonEmpty(from) || nonEmpty(to) ? (
+        <div className={`mt-2 flex justify-between ${TEXT_SUB} ${TEXT.faint}`}>
+          <span>{from ?? ""}</span>
+          <span>{to ?? ""}</span>
+        </div>
+      ) : null}
+    </Panel>
+  )
+);

package/src/ui/steps.tsx

@@ -0,0 +1,74 @@
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren } from "../define.js";
+import { attrTrue, BOOLISH_PROP } from "./attrs.js";
+import { isEl, propOf } from "./children.js";
+import { CHIP_PROPS, ChipRow } from "./chips.js";
+import { Icon } from "./icon.js";
+import {
+  isStatus,
+  STATUS_ICON_CLS,
+  STATUS_ICONS,
+  STATUSES,
+} from "./status-badge.js";
+import type { Status } from "./status-badge.js";
+import { Summary } from "./summary.js";
+import { TRIM_CLS } from "./tones.js";
+
+export const Step = defineComponent(
+  {
+    description:
+      "単一の手順。status は todo|doing|done|blocked。owner/effort/priority/due でチップを付けられる",
+    schema: v.looseObject({
+      ...CHIP_PROPS,
+      status: v.optional(v.picklist(STATUSES), "todo"),
+    }),
+  },
+  ({ status, owner, effort, priority, due, children }) => (
+    <div className="flex gap-3">
+      <Icon
+        className={`mt-1 h-4.5 w-4.5 shrink-0 ${STATUS_ICON_CLS[status]}`}
+        label={status}
+        name={STATUS_ICONS[status]}
+      />
+      <div className="min-w-0 flex-1">
+        <div className={TRIM_CLS}>{children}</div>
+        <ChipRow due={due} effort={effort} owner={owner} priority={priority} />
+      </div>
+    </div>
+  )
+);
+
+/** Resolve a child's effective status — only `<Step>` elements count. */
+const stepStatus = (node: unknown): Status | undefined => {
+  if (!isEl(node, Step)) {
+    return undefined;
+  }
+  const s = propOf(node, "status");
+  return isStatus(s) ? s : "todo";
+};
+
+export const Steps = defineComponent(
+  {
+    description:
+      "手順リストのコンテナ。<Step> を並べる。progress で自動進捗バーを表示",
+    schema: v.looseObject({
+      progress: BOOLISH_PROP,
+    }),
+  },
+  ({ progress, children }) => {
+    const show = attrTrue(progress);
+    const items = flattenChildren(children)
+      .map((node) => stepStatus(node))
+      .filter((s): s is Status => s !== undefined);
+    const done = items.filter((s) => s === "done").length;
+    return (
+      <div className="my-6 space-y-3">
+        {show && items.length > 0 ? (
+          <Summary done={done} label="Steps" total={items.length} />
+        ) : null}
+        {children}
+      </div>
+    );
+  }
+);

package/src/ui/summary.tsx

@@ -0,0 +1,41 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { NUMISH } from "./attrs.js";
+import { TEXT, TRACK_CLS } from "./tones.js";
+
+export const Summary = defineComponent(
+  {
+    description:
+      "進捗バー。done/total は文字列でもよい (MDX の属性は文字列のため)",
+    schema: v.looseObject({
+      done: v.optional(NUMISH, "0"),
+      label: v.optional(v.string()),
+      total: v.optional(NUMISH, "0"),
+    }),
+  },
+  ({ done, total, label }) => {
+    // Unparseable values read as 0 — `NaN` would leak into the label text
+    // and produce an invalid `width: NaN%` style. Negative counts are
+    // clamped too: `width: -50%` is just as invalid.
+    const d = Math.max(0, Number.isFinite(Number(done)) ? Number(done) : 0);
+    const t = Math.max(0, Number.isFinite(Number(total)) ? Number(total) : 0);
+    const pct = t > 0 ? Math.min(100, Math.round((d / t) * 100)) : 0;
+    return (
+      <div className="not-prose my-6">
+        <div className="mb-1.5 flex items-baseline justify-between text-sm">
+          <span className="font-medium">{label ?? "Progress"}</span>
+          <span className={`tabular-nums ${TEXT.muted}`}>
+            {d}/{t}
+          </span>
+        </div>
+        <div className={`h-2 overflow-hidden rounded-full ${TRACK_CLS}`}>
+          <div
+            className="h-full rounded-full bg-emerald-500 transition-all"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </div>
+    );
+  }
+);

package/src/ui/symbol-ref.tsx

@@ -0,0 +1,73 @@
+import * as v from "valibot";
+
+import { defineComponent } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { FILE_LINK_PROPS } from "./attrs.js";
+import { CodeChip, CopyButton, MaybeLink, PathLabel } from "./bits.js";
+import { useFileLink } from "./file-link.js";
+import { Icon } from "./icon.js";
+import { LINK_CLS } from "./tones.js";
+
+export const SYMBOL_KINDS = [
+  "class",
+  "component",
+  "const",
+  "enum",
+  "fn",
+  "interface",
+  "prop",
+  "type",
+] as const;
+export type SymbolKind = (typeof SYMBOL_KINDS)[number];
+
+const KIND_ICONS: Record<SymbolKind, string> = {
+  class: "lucide:box",
+  component: "lucide:puzzle",
+  const: "lucide:variable",
+  enum: "lucide:list-ordered",
+  fn: "lucide:square-function",
+  interface: "lucide:braces",
+  prop: "lucide:tag",
+  type: "lucide:type",
+};
+
+export const SymbolRef = defineComponent(
+  {
+    description:
+      "コードシンボル (関数/型など) への参照チップ。kind でアイコンを出し分け、path/lines で定義場所を併記できる。実在する path はエディタリンク（既定 vscode://）になり、href で上書き可",
+    schema: v.looseObject({
+      ...FILE_LINK_PROPS,
+      kind: v.optional(v.picklist(SYMBOL_KINDS)),
+      name: v.string(),
+    }),
+  },
+  ({ name, kind, path, lines, href }) => {
+    const link = useFileLink(path, lines, href);
+    const label = (
+      <>
+        {name}
+        {nonEmpty(path) ? (
+          <span className="opacity-60">
+            {" "}
+            · <PathLabel lines={lines} path={path} />
+          </span>
+        ) : null}
+      </>
+    );
+    return (
+      <CodeChip>
+        {kind === undefined ? null : (
+          <Icon className="h-3.5 w-3.5 opacity-60" name={KIND_ICONS[kind]} />
+        )}
+        <MaybeLink className={LINK_CLS} href={link}>
+          {label}
+        </MaybeLink>
+        <CopyButton
+          className="-mr-0.5 opacity-40"
+          copy={nonEmpty(path) ? path : name}
+          title="Copy"
+        />
+      </CodeChip>
+    );
+  }
+);

package/src/ui/terminal.tsx

@@ -0,0 +1,117 @@
+import type { ReactElement, ReactNode } from "react";
+import * as v from "valibot";
+
+import { defineComponent, flattenChildren, textOf } from "../define.js";
+import { nonEmpty } from "../guards.js";
+import { NUMISH } from "./attrs.js";
+import { CopyButton } from "./bits.js";
+
+/**
+ * Fence languages rendered as a command transcript instead of highlighted
+ * code: ` ```console `, ` ```terminal `, ` ```shellsession `. Shared from
+ * langs.ts — rehype/shiki.ts SKIP_LANGS includes them so the raw text
+ * reaches `Pre` untouched.
+ */
+export { TERMINAL_LANGS } from "../langs.js";
+
+const PROMPT_RE = /^\$(?:\s|$)/u;
+
+/**
+ * Flatten children to transcript text. A fenced code block child contributes
+ * its raw code (highlight spans are `\n`-separated, so `textOf` preserves
+ * line breaks); paragraphs and text join on newlines.
+ */
+const transcriptText = (children: ReactNode): string =>
+  flattenChildren(children)
+    .map((child) => textOf(child))
+    .join("\n")
+    .replaceAll(/\n{3,}/gu, "\n\n")
+    .replaceAll(/^\n+|\n+$/gu, "");
+
+export interface TranscriptProps {
+  /** Prepended as a `$ …` prompt line when given. */
+  cmd?: string;
+  /** Exit code badge in the title bar — `0`/empty renders green, others red. */
+  exit?: string;
+  /** Transcript text; `$ `-prefixed lines render as command prompts. */
+  text: string;
+  /** Title bar label (defaults to "Terminal"). */
+  title?: string;
+}
+
+/** Shared terminal-window renderer — used by `Terminal` and `Pre` console fences. */
+export const Transcript = ({
+  cmd,
+  exit,
+  text,
+  title,
+}: TranscriptProps): ReactElement => {
+  const body = nonEmpty(cmd) ? `$ ${cmd}\n${text}` : text;
+  const lines = body.replace(/\n+$/u, "").split("\n");
+  const succeeded = exit === "" || exit === "0";
+  return (
+    <figure className="not-prose my-6 overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950">
+      <figcaption className="flex items-center gap-2 border-b border-neutral-800 bg-neutral-900 px-4 py-2 text-xs">
+        <span aria-hidden className="flex shrink-0 gap-1.5">
+          <span className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
+          <span className="h-2.5 w-2.5 rounded-full bg-amber-400/70" />
+          <span className="h-2.5 w-2.5 rounded-full bg-emerald-500/70" />
+        </span>
+        <span className="min-w-0 flex-1 truncate font-mono text-neutral-500">
+          {nonEmpty(title) ? title : "Terminal"}
+        </span>
+        {exit === undefined ? null : (
+          <span
+            className={`shrink-0 rounded px-1.5 py-0.5 font-mono text-[0.7rem] font-medium ${
+              succeeded
+                ? "bg-emerald-900/70 text-emerald-300"
+                : "bg-red-900/70 text-red-300"
+            }`}
+          >
+            exit {exit === "" ? "0" : exit}
+          </span>
+        )}
+        <CopyButton
+          className="shrink-0 text-neutral-500 opacity-60"
+          copy={body}
+          doneClassName="text-emerald-400"
+          title="Copy transcript"
+        />
+      </figcaption>
+      <pre className="m-0 overflow-x-auto p-4 font-mono text-sm leading-relaxed">
+        {lines.map((line, i) =>
+          PROMPT_RE.test(line) ? (
+            <span className="block text-neutral-100" key={i}>
+              <span className="text-emerald-400 select-none">$</span>
+              {line.slice(1)}
+            </span>
+          ) : (
+            <span className="block text-neutral-400" key={i}>
+              {nonEmpty(line) ? line : " "}
+            </span>
+          )
+        )}
+      </pre>
+    </figure>
+  );
+};
+
+export const Terminal = defineComponent(
+  {
+    description:
+      "ターミナル実行結果ブロック。cmd は `$ ` プロンプト行として先頭に表示、exit は終了コードバッジ (0=緑/他=赤)、title はタイトルバー。children は出力（フェンスドコードブロック推奨）。本文中 `$ ` 始まりの行はコマンド行として強調",
+    schema: v.looseObject({
+      cmd: v.optional(v.string()),
+      exit: v.optional(NUMISH),
+      title: v.optional(v.string()),
+    }),
+  },
+  ({ cmd, exit, title, children }) => (
+    <Transcript
+      cmd={cmd}
+      exit={exit === undefined ? undefined : String(exit)}
+      text={transcriptText(children)}
+      title={title}
+    />
+  )
+);